/*
  The desk: a player's tickets and notes, and the staff's queues, notes, records and profiling.
  Page rules only. The windows, keys, fields, tabs, chips and notes are the Hall's (hall.css, gump.css,
  components.css).

  Order: the page, a state in words, a list of rows, a conversation, forms, the three-pane notes
  workbench, the staff board (lamps, kinds, filters, the queue), summaries, narrow screens, calm.
*/

/* ------------------------------------------------------------------ the page */

.desk-wrap { padding-top: 2rem; padding-bottom: 1rem; }
.desk-wrap > .gump + .gump, .desk-wrap > .note + .gump { margin-top: 0; }
.desk-pair { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(17rem, 1fr); gap: 2rem; align-items: start; }
.desk-pair > * { min-width: 0; }
.desk-pair-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.desk-hint { margin: 1rem 0 0; font: 400 14px/1.55 var(--read); color: var(--ink-dim); }
.desk-hint b { font: 400 16px/1.2 var(--pixel); color: var(--heat-4); }
.desk-line { margin: 0 0 1rem; font: 400 15px/1.6 var(--read); color: var(--ink); }

/* ------------------------------------------------------------------ a state, in words */

/* One chip for every state a ticket or a record can be in. Colours are the kit's: turquoise for what is
   well, ember for what waits, rust for what failed, plain for what is over. */
.state-ok { --c-a: #1f4540; --c-b: #18362f; --c-hi: #6fbfb2; --c-lo: #0a1d1a; color: #b8ece0; }
.state-wait { --c-a: #5f3c14; --c-b: #4a2f10; --c-hi: #d99a4a; --c-lo: #26150a; color: var(--ember-hi); }
.state-new { --c-a: #c26a18; --c-b: #a65a14; --c-hi: #ffc27a; --c-lo: #4d2606; color: var(--heat-5); }
.state-bad { --c-a: #5a2a20; --c-b: #47211a; --c-hi: #c9806c; --c-lo: #230e0a; color: var(--rust); }
.state-off { }

/* The same colours by the word a queue reports, for a lamp whose state the server names. */
.sig[data-state="ok"] { --c-a: #1f4540; --c-b: #18362f; --c-hi: #6fbfb2; --c-lo: #0a1d1a; color: #b8ece0; }
.sig[data-state="attn"] { --c-a: #5f3c14; --c-b: #4a2f10; --c-hi: #d99a4a; --c-lo: #26150a; color: var(--ember-hi); }
.sig[data-state="fail"] { --c-a: #5a2a20; --c-b: #47211a; --c-hi: #c9806c; --c-lo: #230e0a; color: var(--rust); }

/* a row of states across the top of a board */
.lamps { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }

/* ------------------------------------------------------------------ a list of rows */

.rows { margin: 0; padding: 0; list-style: none; }
.rows li { border-top: 2px solid #1f1c18; }
.rows li:first-child { border-top: 0; }
.rows a {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto 4.5rem;
  align-items: center;
  gap: .2rem 1rem;
  padding: .75rem .5rem;
  color: var(--ink);
  text-decoration: none;
}
.rows a:hover, .rows a:focus-visible { background: #2a1c0e; }
.row-ref { font: 400 16px/1.3 var(--pixel); color: var(--heat-3); }
.row-main { display: grid; gap: .1rem; min-width: 0; }
.row-main b { font: 400 16px/1.35 var(--pixel); letter-spacing: .02em; color: var(--brass-hi); overflow-wrap: anywhere; }
.row-main span { font: 400 14px/1.45 var(--read); color: var(--ink-dim); }
.rows a:hover .row-main b, .rows a:focus-visible .row-main b { color: var(--heat-4); text-decoration: underline; }
.row-age { font: 400 14px/1.3 var(--pixel); color: var(--ink-faint); text-align: right; }
.rows .unread .row-main b { color: var(--heat-4); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 1rem 0 0; font: 400 16px/1.4 var(--pixel); color: var(--ink-dim); }
.pager a { display: inline-block; min-width: 24px; padding: .25rem 0; text-decoration: none; }
.pager a::before { content: "> "; color: var(--brass-mid); }

/* ------------------------------------------------------------------ a conversation */

.thread { display: grid; gap: .9rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.msg {
  padding: .75rem 1rem .9rem;
  background: #0f0d0b;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi);
}
.msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; font: 400 16px/1.3 var(--pixel); }
.msg-who { color: var(--brass-hi); overflow-wrap: anywhere; }
.msg-when { margin-left: auto; font-size: 14px; color: var(--ink-faint); }
.msg-body { margin-top: .45rem; font: 400 15px/1.65 var(--read); color: var(--ink); overflow-wrap: anywhere; }
.msg-body p { margin: 0 0 .7em; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-staff { box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--arc-dim), inset -2px -2px 0 2px #0b1513; }
.msg-staff .msg-who { color: var(--arc); }
.msg-internal {
  background: repeating-linear-gradient(135deg, #17110c 0 8px, #120d09 8px 16px);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #8a4a14, inset -2px -2px 0 2px #26150a;
}
.msg-internal .msg-who { color: var(--ember-hi); }
.msg-system { padding: .2rem 0; font: 400 14px/1.5 var(--pixel); color: var(--ink-faint); text-align: center; background: none; box-shadow: none; }
.msg-system .msg-when { margin: 0 .5rem 0 0; }

/* ------------------------------------------------------------------ forms */

.desk-form { display: grid; gap: 1rem; }
.desk-form .field { margin: 0; }
.desk-form .field > span { display: block; margin: 0 0 .35rem; font: 400 16px/1.3 var(--pixel); letter-spacing: .05em; text-transform: uppercase; color: var(--brass); }
.desk-form .field > span small { text-transform: none; letter-spacing: 0; font: 400 14px/1.3 var(--read); color: var(--ink-faint); }
.desk-form textarea { min-height: 7rem; }
.desk-form .keys { margin-top: .2rem; }
.desk-error { margin: 0; padding: .6rem .85rem; font: 400 16px/1.45 var(--pixel); color: var(--rust); background: var(--rust-bg); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #b8705c, inset -2px -2px 0 2px #2c1812; }
.desk-form :is(input, textarea, select) {
  display: block;
  width: 100%;
  padding: .6rem .85rem;
  font: 400 15px/1.5 var(--read);
  color: var(--ink);
  background: linear-gradient(#000 0, #0c0b0a 6px) #0c0b0a;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi);
  caret-color: var(--heat-3);
}
.desk-form :is(input, textarea, select):focus { outline: 0; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--heat-3); }

/* a field and a key on one line: a search, a filter */
.find { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0; }
.find label { font: 400 16px/1.3 var(--pixel); letter-spacing: .05em; text-transform: uppercase; color: var(--brass); }
.find :is(input[type="text"], input[type="search"], input[type="date"], select) {
  flex: 1 1 12rem;
  min-width: 0;
  padding: .45rem .75rem;
  font: 400 15px/1.5 var(--read);
  color: var(--ink);
  background: linear-gradient(#000 0, #0c0b0a 6px) #0c0b0a;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi);
  color-scheme: dark;
}
.find :is(input, select):focus { outline: 0; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--heat-3); }
.find input[type="date"] { flex: 0 1 11rem; }
.find-n { margin-left: .4rem; font: 400 16px/1.3 var(--pixel); color: var(--heat-4); }

/* the writing tabs of the note form, and the preview */
.md-tabs { display: inline-flex; gap: .4rem; margin: 0 0 .5rem; }
.md-tab {
  --s: 2px;
  min-height: 2.1rem;
  padding: .2rem .8rem .3rem;
  font: 400 16px/1.1 var(--pixel);
  letter-spacing: .06em;
  color: var(--brass);
  text-shadow: 2px 2px 0 #000;
  cursor: pointer;
  background: linear-gradient(var(--plate-a) 0 50%, var(--plate-b) 50% 100%);
  border: 0;
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--bev-hi), inset -2px -2px 0 2px var(--bev-lo);
}
.md-tab:hover { color: var(--heat-ink); text-shadow: none; background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%); }
.md-tab.active { color: var(--heat-5); background: linear-gradient(#b9531a 0 50%, #9b4314 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #ffb067, inset -2px -2px 0 2px #5e220a; }
.md-preview { display: none; min-height: 7rem; padding: .7rem .95rem; font: 400 15px/1.65 var(--read); color: var(--ink); background: #0f0d0b; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi); }
.md-preview.empty::before { content: "Nothing to preview yet."; color: var(--ink-faint); }
.note-form.previewing textarea { display: none; }
.note-form.previewing .md-preview { display: block; }

/* ------------------------------------------------------------------ the notes workbench */

/* Three panes in one well: the categories, the index, the note. The script (notes.js) keeps one category
   and one note open; everything is on the page already, so a click is a class change. */
.note-filter { margin: 0 0 .9rem; }
.keyline { margin: 0 0 1rem; font: 400 14px/1.8 var(--read); color: var(--ink-faint); }
.keyline kbd { display: inline-block; min-width: 1.6em; padding: 0 .35em; margin-inline: .1em; font: 400 16px/1.4 var(--pixel); text-align: center; color: var(--brass-hi); background: #2a241a; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 1px #7a6844, 0 3px 0 #000; }
.wb {
  display: grid;
  grid-template-columns: 13.5rem minmax(15rem, 21rem) minmax(0, 1fr);
  min-height: 24rem;
  background: #0c0b0a;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi);
}
.wb-pane { min-width: 0; max-height: 34rem; overflow: auto; }
.wb-rail { display: flex; flex-direction: column; padding: .6rem 0; border-right: 2px solid #1f1c18; }
.wb-cat {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  width: 100%;
  padding: .45rem .8rem;
  font: 400 16px/1.3 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--brass);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0;
}
.wb-cat-n { color: var(--heat-3); }
.wb-cat .wb-count { margin-left: auto; color: var(--ink-faint); }
.wb-cat:hover, .wb-cat:focus-visible { color: var(--heat-4); background: #2a1c0e; }
.wb-cat.active { color: var(--heat-5); background: linear-gradient(#b9531a 0 50%, #9b4314 50% 100%); }
.wb-cat.active .wb-cat-n, .wb-cat.active .wb-count { color: var(--heat-5); }
.wb-list { padding: .4rem 0; border-right: 2px solid #1f1c18; }
.wb-listing { display: block; }
.wb-listing.hidden, .wb-body:not(.visible) { display: none; }
.wb-row {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr) auto;
  gap: .1rem .6rem;
  align-items: baseline;
  width: 100%;
  padding: .5rem .8rem;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0;
  border-top: 2px solid #1a1814;
}
.wb-row:first-child { border-top: 0; }
.wb-row:hover, .wb-row:focus-visible { background: #1d1409; }
.wb-row.sel { background: #2a1c0e; box-shadow: inset 4px 0 0 var(--heat-3); }
.wb-row .when { font: 400 14px/1.4 var(--pixel); color: var(--heat-3); }
.wb-row .what { font: 400 15px/1.4 var(--read); color: var(--ink); overflow-wrap: anywhere; }
.wb-row .new { font: 400 14px/1.4 var(--pixel); color: var(--heat-5); background: #9b4314; padding: 0 .35rem; }
.wb-row[hidden] { display: none; }
.wb-empty { margin: 0; padding: .8rem; font: 400 14px/1.5 var(--pixel); color: var(--ink-faint); }
.wb-body-pane { padding: 1rem 1.3rem 1.3rem; }
.wb-meta { display: grid; gap: .1rem; margin: 0 0 .8rem; padding: 0 0 .7rem; border-bottom: 2px solid #1f1c18; }
.wb-meta b { font: 400 20px/1.25 var(--pixel); color: var(--brass-hi); overflow-wrap: anywhere; }
.wb-meta span { font: 400 14px/1.4 var(--pixel); color: var(--ink-faint); }
.note-md, .wb-body { font: 400 15px/1.7 var(--read); color: var(--ink); overflow-wrap: anywhere; }
.note-md p, .wb-body p { margin: 0 0 .85em; }
.note-md :is(h1, h2, h3), .wb-body :is(h1, h2, h3) { margin: 1.1em 0 .4em; font: 400 18px/1.3 var(--pixel); letter-spacing: .04em; color: var(--brass-hi); }
.note-md ul, .note-md ol, .wb-body ul, .wb-body ol { margin: 0 0 .85em; padding-left: 1.4rem; }
.note-md code, .wb-body code { padding: 0 .3em; font: 400 15px/1.5 var(--pixel); color: var(--heat-4); background: #1a140d; }
.note-md blockquote, .wb-body blockquote { margin: 0 0 .85em; padding: .1rem 0 .1rem 1rem; color: var(--ink-dim); border-left: 4px solid var(--brass-lo); }

/* the accordion the narrow embed keeps */
.cat-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.cat-tab { --s: 2px; min-height: 2.1rem; padding: .2rem .8rem .3rem; font: 400 16px/1.1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--brass); text-shadow: 2px 2px 0 #000; cursor: pointer; background: linear-gradient(var(--plate-a) 0 50%, var(--plate-b) 50% 100%); border: 0; clip-path: var(--step); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--bev-hi), inset -2px -2px 0 2px var(--bev-lo); }
.cat-tab:hover { color: var(--heat-ink); text-shadow: none; background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%); }
.cat-tab.active { color: var(--heat-5); background: linear-gradient(#b9531a 0 50%, #9b4314 50% 100%); }
.cat-tab .tab-n { margin-left: .4em; color: var(--heat-3); }
.cat-tab.active .tab-n { color: var(--heat-5); }
.notes-section { display: none; }
.notes-section.visible { display: block; }
.note-card { border-top: 2px solid #1f1c18; }
.note-card:first-child { border-top: 0; }
.note-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; padding: .6rem .3rem; cursor: pointer; font: 400 15px/1.4 var(--read); color: var(--ink); }
.note-card-head .y { font: 400 14px/1.4 var(--pixel); color: var(--heat-3); }
.note-card-head .bn { font: 400 14px/1.4 var(--pixel); color: var(--brass-mid); text-transform: uppercase; }
.note-card-head:hover, .note-card-head:focus-visible { background: #1d1409; outline: 0; }
.note-card-body { display: none; padding: .2rem .4rem 1rem; }
.note-card.open .note-card-body { display: block; }

/* ------------------------------------------------------------------ the staff board */

/* The kinds of ticket are the readout and the filter at once: each is a plate with its name, a count and a
   line under it, and the one you are looking at is lit. */
.kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .6rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.kind {
  --s: 2px;
  display: grid;
  gap: .05rem;
  height: 100%;
  padding: .55rem .8rem .65rem;
  text-decoration: none;
  color: var(--brass);
  background: linear-gradient(var(--plate-a) 0 50%, var(--plate-b) 50% 100%);
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--bev-hi), inset -2px -2px 0 2px var(--bev-lo);
}
.kind:hover, .kind:focus-visible { color: var(--heat-ink); background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-5), inset -2px -2px 0 2px #b0561a; }
.kind[aria-current] { color: var(--heat-5); background: linear-gradient(#b9531a 0 50%, #9b4314 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #ffb067, inset -2px -2px 0 2px #5e220a; }
.kind-name { font: 400 16px/1.2 var(--pixel); letter-spacing: .05em; text-transform: uppercase; }
.kind-count { font: 400 32px/1.1 var(--pixel); color: var(--heat-4); text-shadow: 2px 2px 0 #000; }
.kind:hover .kind-count, .kind:focus-visible .kind-count { color: var(--heat-ink); text-shadow: none; }
.kind-sub { font: 400 14px/1.3 var(--read); color: var(--ink-dim); }
.kind-sub.attn, .kind-sub.wants { color: var(--ember-hi); }
.kind-sub.fail { color: var(--rust); }
.kind:hover .kind-sub, .kind:focus-visible .kind-sub, .kind[aria-current] .kind-sub { color: inherit; }

.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.5rem; margin: 0 0 1.2rem; }
.filters nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.filters .legend { margin-right: .3rem; font: 400 16px/1.3 var(--pixel); letter-spacing: .05em; text-transform: uppercase; color: var(--brass); }
.filters nav a {
  --s: 2px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.1rem;
  padding: .2rem .8rem .3rem;
  font: 400 16px/1.1 var(--pixel);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brass);
  text-shadow: 2px 2px 0 #000;
  background: linear-gradient(var(--plate-a) 0 50%, var(--plate-b) 50% 100%);
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--bev-hi), inset -2px -2px 0 2px var(--bev-lo);
}
.filters nav a:hover, .filters nav a:focus-visible { color: var(--heat-ink); text-shadow: none; background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%); }
.filters nav a[aria-current] { color: var(--heat-5); background: linear-gradient(#b9531a 0 50%, #9b4314 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #ffb067, inset -2px -2px 0 2px #5e220a; }
.filters .sep { width: 2px; align-self: stretch; margin: 0 .3rem; background: #2a251d; }
.filters .tally { color: var(--heat-3); }
.filters nav a[aria-current] .tally { color: var(--heat-5); }

/* A table is a list of rows with a head in the board's face; a row that matters sits on a line of heat. */
/* Positioned, so that a visually hidden label inside it (position: absolute) is scrolled with the table
   and does not push the page wider than the screen. */
.grid-wrap { position: relative; overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; font: 400 16px/1.4 var(--pixel); }
.grid caption { text-align: left; }
.grid th { padding: .5rem .7rem; font-weight: 400; letter-spacing: .06em; text-align: left; text-transform: uppercase; color: var(--brass-mid); border-bottom: 2px solid var(--brass-deep); white-space: nowrap; }
.grid td { padding: .65rem .7rem; vertical-align: top; border-top: 2px solid #1f1c18; color: var(--ink); }
.grid tbody tr:first-child td { border-top: 0; }
.grid tbody tr:hover td { background: #1a1510; }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.grid .age { white-space: nowrap; color: var(--ink-dim); }
.grid .age.old { color: var(--ember-hi); }
.grid .who, .grid .held { color: var(--ink-dim); overflow-wrap: anywhere; }
.grid .held.free { color: var(--rust); }
.grid td a { display: inline-block; min-width: 24px; padding: .2rem 0; }
.grid .subject a { color: var(--brass-hi); text-decoration: none; overflow-wrap: anywhere; }
.grid .subject a:hover, .grid .subject a:focus-visible { color: var(--heat-4); text-decoration: underline; }
.grid .peek { color: var(--ink-dim); }
.grid .sub { display: block; font: 400 14px/1.4 var(--pixel); color: var(--heat-3); }
.grid .resolution { display: block; margin-top: .15rem; font: 400 14px/1.45 var(--read); color: var(--ink-dim); }
.grid tr.priority td { background: #1d1409; }
.grid tr.priority td:first-child { box-shadow: inset 4px 0 0 var(--heat-3); }
.grid .stamp { white-space: nowrap; color: var(--ink-dim); }

/* the two keys that answer a ticket from the queue */
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.quick input[type="text"] {
  flex: 1 1 9rem;
  min-width: 0;
  padding: .35rem .6rem;
  font: 400 14px/1.4 var(--read);
  color: var(--ink);
  background: #0c0b0a;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi);
}
.quick input:focus { outline: 0; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--heat-3); }
.none { color: var(--ink-faint); }

/* ------------------------------------------------------------------ one ticket, a summary */

.ticket-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); gap: 2rem; align-items: start; }
.ticket-grid > * { min-width: 0; }
.ticket-grid .gump + .gump { margin-top: 0; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin: 1rem 0 0; }
.acts form { margin: 0; }
.counter { display: grid; gap: .1rem; padding: .6rem .85rem; margin: 0 0 .6rem; background: #0f0d0b; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi); }
.counter b { font: 400 16px/1.3 var(--pixel); color: var(--brass-hi); }
.counter span { font: 400 14px/1.55 var(--read); color: var(--ink); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ the staff's front page */

.counts { margin: 0; padding: 0; list-style: none; }
.counts a { display: flex; align-items: baseline; gap: .8rem; padding: .65rem .5rem; font: 400 16px/1.3 var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--brass); text-decoration: none; border-top: 2px solid #1f1c18; }
.counts li:first-child a { border-top: 0; }
.counts a:hover, .counts a:focus-visible { color: var(--heat-4); background: #2a1c0e; }
.counts kbd { min-width: 1.7em; text-align: center; }
.counts .n { min-width: 5ch; font-size: 22px; color: var(--ink-faint); text-align: right; }
.counts .n.on { color: var(--heat-4); text-shadow: 2px 2px 0 #000; }

.dots .warm { color: var(--heat-4); }

/* ------------------------------------------------------------------ a banner for working in, and the panel in the client */

/* The picture is cut off at the top, so the counter or the desk stays and the sky goes. */
.banner-low { min-height: 10.5rem; padding-top: 3.2rem; }

/* The notes panel inside the game client has no header, no banner and no footer: only the windows. */
.desk-embed .desk-wrap { padding: .9rem .8rem 1rem; }
.desk-embed main { min-height: 0; }

/* ------------------------------------------------------------------ the plain face, in the staff's pages */

/* A page that reads in bulk (body.plain, see gump.css) keeps the pixel face for the plates people press
   and the big numbers, sets a code or a count in a monospace, and makes a table's head small and bold. */
.plain :is(.filters nav a, .kind-name, .kind-count, .md-tab, .cat-tab, .wb-cat, .rail-tab, .counts a) { --pixel: var(--pixel-name); }
.plain :is(.row-ref, .row-age, .grid .sub, .grid .age, .grid .stamp, .where, .tree, .counts .n, .codebox, .timeline-legend) { font-family: var(--code); }
.plain .grid { font-size: 15px; }
.plain .grid th { font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.plain .filters .legend, .plain .find label, .plain .desk-form .field > span, .plain .knobs label { font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.plain .pager, .plain .kind-sub { font-size: 14px; }
.plain .msg-who, .plain .row-main b { font-weight: 700; }
.plain .wb-row .what, .plain .note-card-head { font-family: var(--read); }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 1000px) {
  .desk-pair, .ticket-grid { grid-template-columns: minmax(0, 1fr); }
  .wb { grid-template-columns: minmax(0, 1fr); }
  .wb-pane { max-height: none; }
  .wb-rail { flex-direction: row; flex-wrap: wrap; gap: .3rem; padding: .5rem; border-right: 0; border-bottom: 2px solid #1f1c18; }
  .wb-cat { width: auto; }
  .wb-list { border-right: 0; border-bottom: 2px solid #1f1c18; max-height: 18rem; }
}
@media (max-width: 560px) {
  .rows a { grid-template-columns: minmax(0, 1fr) auto; }
  .row-ref { grid-column: 1; }
  .row-main { grid-column: 1 / -1; grid-row: 2; }
  .row-age { grid-column: 2; grid-row: 1; }
  .rows .chip { grid-column: 2; grid-row: 1; justify-self: end; margin-top: 1.6rem; }
  .grid-wrap .grid { min-width: 36rem; }
}