/* =========================================================================
The request board.
The one page on this site that is not a grid, and it does not try to look
like one. Three columns on a blue field, a card per request, and a tag
saying which of the two sites it is about - the shape of a board everybody
already knows how to read, which is the whole reason for using it here.
The colour does the work the rest of the site does with borders. Each column
owns a hue - New is a quiet violet, In-Progress the site's own blue, Done a
green - and it is worn three times over: the dot beside the heading, the
column's ground, and the ring it grows while a card is held over it. So
"which column is this" is answered before any word of it is read.
========================================================================= */
/* The blue field. It is the page rather than a panel on it, so it goes on the
body: a board with white showing round the edges reads as a widget. */
body.reqboard-body {
background: linear-gradient(180deg, #1f7ae0 0%, #2b8bf2 38%, #bcd9f7 100%);
background-attachment: fixed;
min-height: 100vh;
}
/* The board takes the whole page. .container's 880px is for pages that are a
column of prose; three columns of cards is not one, and the full-width rule
the rosters use lives in leave.css, which this page has no other reason to
load. So it is said here. */
.rb-page { max-width: none; padding: 18px 18px 28px; }
/* ---- the board's own head ------------------------------------------------ */
.rb-head {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 0 0 22px;
}
.rb-head h1 {
margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.02em;
color: #fff;
}
.rb-logo {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; flex: none; border-radius: 10px;
background: rgba(255, 255, 255, .18); color: #fff;
}
.rb-logo svg { width: 22px; height: 22px; }
.rb-count {
font-size: 13px; font-weight: 700; color: #fff;
background: rgba(255, 255, 255, .2); border-radius: 999px; padding: 3px 11px;
}
.rb-head .spacer { flex: 1 1 auto; }
.rb-role-note { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .85); }
/* The one button on the head, white on the blue - the page's only call to
action, and the thing somebody arriving has come to do. */
.rb-new {
display: inline-flex; align-items: center; gap: 7px;
font: inherit; font-size: 14px; font-weight: 800; color: #1d4ed8;
background: #fff; border: 0; border-radius: 999px; padding: 9px 18px;
cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}
.rb-new:hover { background: #eff6ff; }
.rb-new:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.rb-new span { font-size: 17px; line-height: 1; }
/* Export, beside New request: the same pill, quieter - it is a way out of the
board rather than into it, so it sits on the blue rather than in white. */
.rb-export {
display: inline-flex; align-items: center; gap: 7px;
font: inherit; font-size: 13px; font-weight: 700; color: #fff;
background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .55);
border-radius: 999px; padding: 8px 15px; text-decoration: none; cursor: pointer;
}
.rb-export:hover { background: rgba(255, 255, 255, .28); }
.rb-export:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.rb-export span { font-size: 15px; line-height: 1; }
/* ---- the filter ------------------------------------------------------------
One site, or one part of one site, at a time. Chips on the blue, the one
that is on in white; the three parts of the Leave & Duty site sit a little
apart from it and smaller, because they are inside it. */
.rb-filter {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin: -8px 0 18px;
}
.rb-filter-head {
font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
color: rgba(255, 255, 255, .8); margin-right: 4px;
}
.rb-fchip {
font: inherit; font-size: 12.5px; font-weight: 700;
color: #fff; background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
padding: 5px 12px; cursor: pointer;
}
.rb-fchip:hover { background: rgba(255, 255, 255, .28); }
.rb-fchip.is-on { background: #fff; color: #1d4ed8; border-color: #fff; }
.rb-fchip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rb-filter-sub {
display: inline-flex; gap: 5px; align-items: center;
margin-left: 2px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .4);
}
.rb-fchip-area { font-size: 11.5px; padding: 4px 10px; }
.rb-filter-subhead {
font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .8);
margin-right: 2px; white-space: nowrap;
}
/* The search, at the right of the same row. margin-left: auto is what puts
it there - and keeps it there when the chips wrap to a second line. */
.rb-search-wrap { margin-left: auto; flex: 0 1 260px; min-width: 160px; }
.rb-search {
width: 100%; box-sizing: border-box;
font: inherit; font-size: 13px; padding: 6px 12px 6px 32px;
color: #111827; background: #fff; border: 0; border-radius: 999px;
box-shadow: 0 1px 4px rgba(15, 23, 42, .15);
/* A magnifier, drawn in rather than fetched. */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-size: 15px 15px; background-position: 11px 50%;
}
.rb-search::placeholder { color: #9ca3af; }
.rb-search:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---- the three columns --------------------------------------------------- */
/* Side by side where there is room, and scrolled sideways where there is not -
a board is three columns or it is not a board, so they do not stack until
the screen is a phone's. */
.rb-board {
display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr));
gap: 16px; align-items: start;
}
.rb-col {
border-radius: 14px; padding: 14px 12px 12px;
box-shadow: 0 2px 10px rgba(15, 23, 42, .1);
min-height: 160px;
}
/* Each column's own hue, worn by its ground, its dot and its drop ring. Keyed
off data-status rather than a class, so a column's tone can never collide
with a control that happens to share the word - .rb-new is the button in the
head, and a column called "new" must not pick it up. */
.rb-col[data-status="new"] { background: #cfd2ef; --rb-hue: #6366f1; }
.rb-col[data-status="progress"] { background: #bedcfa; --rb-hue: #2563eb; }
.rb-col[data-status="done"] { background: #b9e39a; --rb-hue: #3f9142; }
.rb-col-head {
display: flex; align-items: center; gap: 9px;
padding: 2px 6px 12px;
}
.rb-col-head h2 {
margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
color: #1f2937; white-space: nowrap;
}
.rb-dot {
width: 10px; height: 10px; border-radius: 999px; flex: none;
background: var(--rb-hue, #6366f1);
}
.rb-col-n {
margin-left: auto; font-size: 13px; font-weight: 700; color: #4b5563;
white-space: nowrap;
}
/* The column's sort, a small select dressed as a pill so it sits with the
count rather than looking like a form field that wandered onto the board. */
.rb-sort-wrap { flex: none; display: inline-flex; }
.rb-sort {
appearance: none; -webkit-appearance: none;
font: inherit; font-size: 11px; font-weight: 700; color: #4b5563;
padding: 3px 20px 3px 8px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .55);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 6px center; background-size: 10px;
}
.rb-sort:hover { background-color: rgba(255, 255, 255, .85); }
.rb-sort:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
/* Sorted by number, the column is no longer the developer's arrangement, so
the up/down arrows would move a card to a place the sort puts straight
back. They step out until the column is on Board order again. */
.rb-col[data-sort="asc"] .rb-arrange,
.rb-col[data-sort="desc"] .rb-arrange { display: none; }
.rb-add-top {
flex: none; width: 26px; height: 26px; padding: 0;
font: inherit; font-size: 19px; line-height: 1; font-weight: 700;
color: #374151; background: none; border: 0; border-radius: 7px; cursor: pointer;
}
.rb-add-top:hover { background: rgba(255, 255, 255, .55); }
/* ---- a page of a column ---------------------------------------------------
Done is read ten at a time; the pager sits under the cards. A card on
another page is simply not drawn. */
.rb-card.is-paged-out { display: none; }
.rb-pager {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin-top: 10px; font-size: 12px; font-weight: 700; color: #374151;
}
.rb-pager[hidden] { display: none; }
.rb-pager-btn {
width: 28px; height: 28px; padding: 0; border-radius: 999px;
font: inherit; font-size: 18px; line-height: 1; font-weight: 700;
color: #1d4ed8; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9);
cursor: pointer;
}
.rb-pager-btn:hover { background: #fff; }
.rb-pager-btn:disabled { opacity: .35; cursor: default; }
.rb-pager-text { min-width: 80px; text-align: center; }
/* ---- the cards ----------------------------------------------------------- */
.rb-cards { display: flex; flex-direction: column; gap: 10px; min-height: 8px; }
/* Every card opens - to edit or only to read - so every card looks openable. */
.rb-card {
background: #fff; border-radius: 10px; padding: 12px 13px 10px;
box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
cursor: pointer; border: 2px solid transparent;
}
.rb-card:hover { box-shadow: 0 3px 10px rgba(15, 23, 42, .16); }
/* The card a link pointed at, lit for a moment on arrival. */
.rb-card.is-linked { animation: rb-linked 2.4s ease-out; }
@keyframes rb-linked {
0%, 60% { border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .35); }
100% { border-color: transparent; }
}
.rb-card:focus-visible { outline: none; border-color: #2563eb; }
/* Held, and on its way somewhere: the card thins out so the column under it
can be seen, which is the thing being aimed at. */
.rb-card.is-dragging { opacity: .4; }
.rb-card-title {
margin: 0 0 9px; font-size: 14.5px; line-height: 1.35; font-weight: 600;
color: #111827; overflow-wrap: anywhere;
}
/* The request's number, in front of its title: the one thing on the card that
never changes, in the one place that never moves. */
.rb-num {
display: inline-block; margin-right: 7px; padding: 1px 7px; vertical-align: 1px;
font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
font-variant-numeric: tabular-nums;
color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px;
}
.rb-card-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rb-card-foot .spacer { flex: 1 1 auto; }
/* The site tag. Two sites, two colours, and they are the colours each site
already wears - so the tag is recognised rather than learnt. */
.rb-tag {
font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 3px 9px;
white-space: nowrap;
}
.rb-tag-al { background: #fce7f3; color: #9d174d; }
.rb-tag-duty { background: #dbeafe; color: #1e40af; }
/* Neither site: grey, the colour of "not one of the two above". */
.rb-tag-other { background: #f3f4f6; color: #374151; }
/* The part of the site, beside the site: quieter, because it narrows rather
than names. */
.rb-tag-area { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
/* Up and down, for the one reader who arranges. Small and grey until the card
is hovered - they are there for the moment they are wanted and out of the
way otherwise. */
/* margin-left: auto so that when the foot wraps - two tags are wide - the
arrows and the by-line go to the right of their own line together. */
.rb-arrange { display: inline-flex; gap: 2px; margin-left: auto; }
.rb-arr {
width: 20px; height: 18px; padding: 0; font-size: 9px; line-height: 1;
color: #9ca3af; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 4px;
cursor: pointer;
}
.rb-arr:hover { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
.rb-card:not(:hover):not(:focus-within) .rb-arr { opacity: .45; }
.rb-by { font-size: 11px; color: #9ca3af; white-space: nowrap; }
.rb-note-mark { font-size: 12px; color: #d97706; }
.rb-clip { font-size: 11px; font-weight: 700; color: #6b7280; white-space: nowrap; }
/* ---- the developer's note ---------------------------------------------------
What was done, on a card that is Done. In the column's own green, so it
reads as the answer to the request rather than as more of the request. */
.rb-devnote {
margin: 0 0 9px; padding: 7px 10px; border-radius: 7px;
background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d;
font-size: 12.5px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere;
}
.rb-devnote-head {
display: block; margin-bottom: 2px;
font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
color: #15803d;
}
.rb-devnote-field[hidden], #rb-pics-field[hidden] { display: none; }
/* A long note folds to its first line. The summary is the whole folded view -
heading, first line, "Show more" - and opening it swaps the first line for
the full text. The browser's own disclosure triangle goes: the heading and
the "Show more" already say it opens. */
.rb-devnote.is-fold { padding: 0; }
.rb-devnote-sum {
display: block; padding: 7px 10px; cursor: pointer; list-style: none;
white-space: normal;
}
.rb-devnote-sum::-webkit-details-marker { display: none; }
.rb-devnote-sum::marker { content: ""; }
.rb-devnote-sum:hover { background: #dcfce7; border-radius: 7px; }
.rb-devnote-sum:focus-visible { outline: 2px solid #16a34a; outline-offset: -2px; border-radius: 7px; }
.rb-devnote-peek {
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb-devnote-more, .rb-devnote-less {
display: inline-block; margin-top: 3px;
font-size: 11px; font-weight: 700; color: #15803d; text-decoration: underline;
}
.rb-devnote-less { display: none; }
.rb-devnote.is-fold[open] .rb-devnote-peek,
.rb-devnote.is-fold[open] .rb-devnote-more { display: none; }
.rb-devnote.is-fold[open] .rb-devnote-less { display: inline-block; }
.rb-devnote-body { padding: 0 10px 8px; white-space: pre-line; }
/* ---- pictures on a card ---------------------------------------------------
A strip of up to three, cropped square so the strip is one height whatever
was uploaded, with the count of any more on the last one. Each is a button
into the lightbox and not a link out of the board. */
.rb-pics { display: flex; gap: 6px; margin: 0 0 9px; }
.rb-pic {
position: relative; flex: 0 0 auto; width: 64px; height: 64px; padding: 0;
border: 1px solid #e5e7eb; border-radius: 7px; overflow: hidden;
background: #f3f4f6; cursor: zoom-in;
}
.rb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-pic:hover { border-color: #93c5fd; }
.rb-pic:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.rb-pic-more {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(17, 24, 39, .55); color: #fff; font-size: 15px; font-weight: 800;
}
/* ---- pictures in the dialog ----------------------------------------------
Two strips: what is on the card, and what has been chosen but not sent.
Both are the same shape, so the eye reads them as one row of pictures with
a line between "there" and "about to be". */
.rb-pics-have, .rb-pics-new { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-pics-have:not(:empty) { margin-bottom: 8px; }
.rb-pics-new:not(:empty) { margin-top: 8px; }
.rb-have {
position: relative; width: 72px; height: 72px;
border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: #f3f4f6;
}
.rb-have img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.rb-have.is-new { border-style: dashed; border-color: #93c5fd; }
.rb-have.is-new img { cursor: default; }
.rb-have-x {
position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0;
border: 0; border-radius: 999px; background: rgba(17, 24, 39, .7); color: #fff;
font-size: 15px; line-height: 20px; cursor: pointer;
}
.rb-have-x:hover { background: #b91c1c; }
.rb-pics-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The file input is inside the button's label and off the screen: the label
is what is clicked, and the input is what the click reaches. */
.rb-pick { position: relative; overflow: hidden; cursor: pointer; }
.rb-pick input[type="file"] {
position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
/* ---- the lightbox --------------------------------------------------------
The picture as large as the window allows, on the dark, with its name and
a way to the full-size file underneath. A click anywhere but that bar
closes it. */
.rb-light {
border: 0; padding: 0; background: transparent;
max-width: min(96vw, 1400px); max-height: 94vh; width: auto;
}
.rb-light::backdrop { background: rgba(2, 6, 23, .82); }
.rb-light img {
display: block; max-width: min(96vw, 1400px); max-height: calc(94vh - 44px);
width: auto; height: auto; margin: 0 auto; border-radius: 8px;
background: #fff; cursor: zoom-out;
}
.rb-light-bar {
display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 0 4px;
color: #e2e8f0; font-size: 13px;
}
.rb-light-bar .spacer { flex: 1 1 auto; }
.rb-light-bar a { color: #93c5fd; font-weight: 700; }
.rb-light-bar button {
font: inherit; font-size: 13px; font-weight: 700; color: #0f172a;
background: #fff; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
/* Nothing in a column yet. A line rather than an empty box, because an empty
box invites a click that does nothing. */
/* :has() rather than :empty, because the column is never empty in the markup
sense - the loop that draws the cards leaves a newline behind whether it drew
any or not. What is being asked is "are there cards", so that is what to ask. */
.rb-cards:not(:has(.rb-card:not([hidden])))::after {
content: "Nothing here";
display: block; padding: 10px 4px;
font-size: 12.5px; color: #4b5563; opacity: .65;
}
.rb-add {
display: flex; align-items: center; gap: 8px; width: 100%;
margin-top: 10px; padding: 9px 8px;
font: inherit; font-size: 13.5px; font-weight: 700; color: #374151;
background: none; border: 0; border-radius: 8px; cursor: pointer;
text-align: left;
}
.rb-add:hover { background: rgba(255, 255, 255, .55); }
.rb-add span { font-size: 17px; line-height: 1; }
/* Being dragged over: the column rings in its own colour and lifts a little.
Set by the script on dragenter, taken off on drop or leave. */
.rb-col.is-over { outline: 3px dashed var(--rb-hue, #6366f1); outline-offset: -4px; }
.rb-foot { margin-top: 18px; color: rgba(255, 255, 255, .92); }
/* ---- raising and editing ------------------------------------------------- */
.rb-dialog {
border: 0; border-radius: 14px; padding: 18px 20px 16px;
width: min(520px, calc(100vw - 28px));
box-shadow: 0 18px 44px rgba(15, 23, 42, .3);
}
.rb-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.rb-dialog-head {
display: flex; align-items: center; gap: 10px;
padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #e5e7eb;
}
.rb-dialog-head b { font-size: 16px; }
.rb-dialog-head .btn { margin-left: auto; }
.rb-field { display: block; margin-bottom: 14px; }
.rb-field > span {
display: block; margin-bottom: 6px;
font-size: 12px; font-weight: 800; letter-spacing: .04em;
text-transform: uppercase; color: #6b7280;
}
.rb-field > span i { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; }
.rb-field input[type="text"], .rb-field textarea {
width: 100%; font: inherit; font-size: 14px; padding: 9px 11px;
border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #111827;
box-sizing: border-box; resize: vertical;
}
.rb-field input[type="text"]:focus, .rb-field textarea:focus {
outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
/* The two sites, and the three columns, as chips rather than a select: there
are two of one and three of the other, and both are the kind of choice that
should be one press rather than two. */
.rb-sites { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-site {
display: inline-flex; align-items: center;
font-size: 13px; font-weight: 700; color: #4b5563;
background: #f1f5f9; border: 1.5px solid #e2e8f0; border-radius: 999px;
padding: 6px 14px; cursor: pointer;
}
.rb-site input { position: absolute; opacity: 0; width: 0; height: 0; }
.rb-site:hover { background: #e2e8f0; }
.rb-site:has(input:checked) { border-color: currentColor; }
.rb-site-al:has(input:checked) { background: #fce7f3; color: #9d174d; }
.rb-site-duty:has(input:checked) { background: #dbeafe; color: #1e40af; }
.rb-site-other:has(input:checked) { background: #e5e7eb; color: #1f2937; }
.rb-st-new:has(input:checked) { background: #e0e7ff; color: #3730a3; }
.rb-st-progress:has(input:checked) { background: #dbeafe; color: #1e40af; }
.rb-st-done:has(input:checked) { background: #dcfce7; color: #166534; }
.rb-site-area:has(input:checked) { background: #e2e8f0; color: #1f2937; }
#rb-area-field[hidden] { display: none; }
.rb-site input:focus-visible + span { text-decoration: underline; }
.rb-dialog-foot { display: flex; align-items: center; gap: 10px; }
.rb-dialog-foot .spacer { flex: 1 1 auto; }
.rb-err { font-size: 12.5px; font-weight: 700; color: #b91c1c; }
/* Raising hides the two questions that only make sense for a card that exists:
which column it is in, and taking it off the board. */
.rb-dialog[data-mode="add"] .rb-only-edit { display: none; }
/* Reading hides everything that writes - Save, Remove, the picture picker -
and shows the fields as the words they hold rather than as boxes to type
in. The browser would grey a disabled field and fade its text; here the
text stays black on a quiet ground, because the text is what was opened. */
.rb-dialog[data-mode="view"] .rb-only-write { display: none; }
.rb-dialog[data-mode="view"] .rb-field input[type="text"]:disabled,
.rb-dialog[data-mode="view"] .rb-field textarea:disabled {
color: #111827; background: #f8fafc; border-color: #e5e7eb; opacity: 1;
-webkit-text-fill-color: #111827; cursor: default; resize: none;
}
/* The chips are the answer, not a question: nothing to hover, nothing to
press, and the ones not picked fade so the one that is reads as it. */
.rb-dialog[data-mode="view"] .rb-site { pointer-events: none; }
.rb-dialog[data-mode="view"] .rb-site:not(:has(input:checked)) { opacity: .45; }
/* ---- phones -------------------------------------------------------------- */
/* Three columns is the board, until the screen is narrow enough that three of
them would be three slivers. Then they stack, which is the same board read
top to bottom. */
@media screen and (max-width: 860px) {
.rb-board { grid-template-columns: 1fr; }
.rb-search-wrap { flex: 1 1 100%; margin-left: 0; }
.rb-head h1 { font-size: 22px; }
.rb-page { padding-left: calc(10px + env(safe-area-inset-left, 0px));
padding-right: calc(10px + env(safe-area-inset-right, 0px)); }
}
@media print {
.rb-pick, .rb-have-x, .rb-light, .rb-arrange { display: none !important; }
.rb-filter { color: #111827; }
.rb-fchip { color: #111827; border-color: #cbd5e1; background: none; }
.rb-fchip.is-on { background: #e2e8f0; }
body.reqboard-body { background: #fff; }
.rb-head h1, .rb-count, .rb-foot { color: #111827; }
.rb-new, .rb-add, .rb-add-top, .rb-sort-wrap, .rb-export, .rb-pager { display: none; }
/* On paper every page of Done is printed. */
.rb-card.is-paged-out { display: block; }
.rb-board { grid-template-columns: repeat(3, 1fr); }
}