/* ============================================================
   Cause List — the web design system, second layer.

   tokens.css holds the palette, type scale and spacing; nothing here invents a
   colour or a size. If a value is needed twice, it belongs in tokens.css.
   Loaded AFTER tokens.css — without it every colour below resolves to nothing.

   DESIGN.md, applied to a desktop surface:
     · one accent (navy), hairline borders, no shadows, no gradients
     · red only for lapsing orders and destructive actions
     · green only for a posted court result
     · legibility beats density — but a laptop earns a real table, and text on
       it is REAL BROWSER TEXT: selectable, findable with Ctrl+F, printable.
       That is the whole reason this site is HTML and not the Flutter build
       (WEB.md §2).
   ============================================================ */

* { box-sizing: border-box; }

/* [hidden] is the weakest rule in CSS, so any `display:` set on the same
   element silently defeats it. Several panels here are flex or grid AND are
   toggled with `el.hidden = true`. This puts `hidden` back in charge, once. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.015em; }
h1 { font-size: var(--t-headline); font-weight: 800; }
h2 { font-size: 19px; font-weight: 800; }
h3 { font-size: var(--t-title); font-weight: 700; }
h4 {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--slate);
}
p { margin: 0; }

a { color: var(--navy); }
.muted { color: var(--slate); }
.lead { max-width: 68ch; color: var(--slate); }
.error { color: var(--danger); font-weight: 600; }
.num { text-align: right; }
.stamp { color: var(--slate); font-size: var(--t-caption); font-weight: 600; }

/* ---------- controls ---------- */

label {
  display: flex; flex-direction: column; gap: var(--s-1);
  font-size: var(--t-caption); font-weight: 700; color: var(--slate);
}

input, select, textarea {
  font: inherit;
  padding: 10px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-input);
  background: var(--paper);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--navy-tint);
  border-color: var(--navy);
}

button { font: inherit; cursor: pointer; }
button.primary {
  background: var(--navy); color: #fff; border: 0;
  padding: 12px 16px; border-radius: var(--r-input);
  font-weight: 700;
}
button.primary:disabled { opacity: 0.55; cursor: default; }
button.ghost {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 8px 12px; border-radius: var(--r-input);
  font-weight: 600;
}
button.ghost:hover { background: var(--grey-tint); }
button.google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 12px 16px; border-radius: var(--r-input);
  font-weight: 700;
}
button.google:hover { background: var(--grey-tint); }
button.google:disabled { opacity: 0.55; cursor: default; }

.orDivider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0;
  color: var(--slate); font-size: var(--t-caption); font-weight: 700;
}
.orDivider::before, .orDivider::after {
  content: ''; flex: 1; height: 1px; background: var(--hairline);
}
button.link {
  background: none; border: 0; padding: 0;
  color: var(--navy); font-weight: 700; text-decoration: underline;
}

/* Keyboard focus must be visible on every interactive thing — a desktop app
   that cannot be tabbed through is a desktop app half-built. */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------- surfaces ---------- */

.card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
}
.card + .card { margin-top: var(--s-3); }
.card > h2 + .lead, .card > h1 + .lead { margin-top: var(--s-2); }
.card.placeholder .stamp { margin-top: var(--s-4); display: block; }

.head {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap; margin-bottom: var(--s-4);
}
.head .actions { margin-left: auto; display: flex; gap: var(--s-2); }

.pill {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  padding: 3px 9px; border-radius: var(--r-chip);
  white-space: nowrap;
}
.pill.navy    { background: var(--navy-tint);    color: var(--navy); }
.pill.grey    { background: var(--grey-tint);    color: var(--grey); }
.pill.amber   { background: var(--amber-tint);   color: var(--amber); }
.pill.success { background: var(--success-tint); color: var(--success); }
.pill.danger  { background: var(--danger-tint);  color: var(--danger); }

/* A short list of label/value facts — the account card, and later the identity
   column on Case Detail. Labels are the quiet half; the value is what is being
   read out over the phone, so it is the bold one. */
.kv-list { margin-top: var(--s-4); display: flex; flex-direction: column; gap: 2px; }
.kv { font-size: var(--t-label); }
.kv span { color: var(--slate); }
.kv b { font-weight: 700; }

.empty {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--slate);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.empty.error-state { color: var(--danger); }

/* ---------- dense table ----------
   The desktop's reason to exist. Rows stay 40px so a full day fits on one
   screen, but the type never drops below 13px and nothing is ellipsized into
   ambiguity (DESIGN.md: a case number is never truncated). */

.tablewrap {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--slate);
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  font-size: var(--t-label);
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FCFCFD; }

/* ============================================================
   The shell — header, sidebar, content.

   Kept in the shared file with the components rather than in a private
   stylesheet, because the console will want the same frame the day it grows a
   sidebar, and two frames that drift is exactly what tokens.css was written to
   prevent.
   ============================================================ */

#shell {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
  grid-template-areas: 'bar bar' 'side main';
  min-height: 100vh;
}

#bar {
  grid-area: bar;
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-4);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; }
.brand .mark {
  background: var(--navy); color: #fff;
  width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 11px; letter-spacing: 0.5px;
}
.who {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--slate); font-size: var(--t-label);
}
.who b { color: var(--ink); font-weight: 700; }
#keysBtn { width: 32px; padding: 8px 0; text-align: center; }

/* ---------- the finder ----------
   Header search over the advocate's own cases. Results appear under it as a
   list you walk with the arrow keys — no mouse anywhere in the path from
   "where is that writ" to reading it. */
#finder { position: relative; flex: 1 1 380px; max-width: 460px; }
#finder input {
  width: 100%;
  padding: 8px 34px 8px 12px;
  background: var(--mist);
  border-radius: var(--r-chip);
}
#finder input:focus { background: var(--paper); }
/* Chrome draws its own clear button on type=search; ours would sit under it. */
#finder input::-webkit-search-cancel-button { display: none; }

#qHint {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font); font-size: 11px; font-weight: 800;
  color: var(--slate); background: var(--paper);
  border: 1px solid var(--hairline); border-radius: 5px;
  padding: 1px 6px; pointer-events: none;
}
#finder input:focus + #qHint { display: none; }

#qResults {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-1);
  max-height: 60vh; overflow-y: auto;
  z-index: 20;
}
.qrow {
  display: block; width: 100%; text-align: left;
  background: none; border: 0;
  padding: 8px 10px; border-radius: var(--r-input);
  cursor: pointer;
}
.qrow:hover, .qrow.on { background: var(--navy-tint); }
.qrow b { display: block; font-size: var(--t-label); font-weight: 700; }
.qrow span { display: block; font-size: var(--t-caption); color: var(--slate); }
.qnote {
  padding: 8px 10px; font-size: var(--t-caption); color: var(--slate);
  border-top: 1px solid var(--hairline); margin-top: var(--s-1);
}

/* The same row, on a full screen rather than in the dropdown. One component,
   so a case reads identically wherever it is found. */
.hitlist { display: flex; flex-direction: column; margin-top: var(--s-3); }
.hitlist .qrow { border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 10px; }
.hitlist .qrow:last-child { border-bottom: 0; }

/* ---------- overlay ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(16, 20, 30, 0.34);
  display: grid; place-items: center;
  padding: var(--s-4);
}
.overlay-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-5);
  width: min(520px, 96vw);
  max-height: 86vh; overflow-y: auto;
}
.overlay-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.overlay-head button { margin-left: auto; }
.keygroup { margin-bottom: var(--s-4); }
.keygroup h4 { margin-bottom: var(--s-2); }
.keyrow {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: 5px 0; font-size: var(--t-label);
}
.keyrow kbd {
  font-family: var(--font); font-size: 11px; font-weight: 800;
  min-width: 34px; text-align: center;
  border: 1px solid var(--hairline); border-radius: 5px;
  padding: 2px 7px; background: var(--mist);
}

#side {
  grid-area: side;
  background: var(--paper);
  border-right: 1px solid var(--hairline);
  padding: var(--s-3) var(--s-2);
  display: flex; flex-direction: column; gap: 2px;
}
#side a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-input);
  color: var(--ink);
  font-weight: 700; font-size: var(--t-label);
  text-decoration: none;
}
#side a:hover { background: var(--grey-tint); }
#side a.on { background: var(--navy-tint); color: var(--navy); }
/* Named, visible and unusable — an advocate can see what is coming without
   clicking into a dead screen. */
#side .soon {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: 9px 12px;
  color: var(--grey);
  font-weight: 700; font-size: var(--t-label);
  cursor: default;
}
#side .soon span {
  font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--grey);
}
#side hr {
  border: 0; border-top: 1px solid var(--hairline);
  margin: var(--s-3) var(--s-2);
}

#main {
  grid-area: main;
  padding: var(--s-5);
  max-width: 1180px;
  width: 100%;
}

/* ============================================================
   Schedule
   ============================================================ */

.eyebrow {
  font-size: 11px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--slate);
  margin-bottom: var(--s-2);
}
/* The one sentence the whole screen exists to say. Large, but not the w800
   reserved for a serial number (DESIGN.md). */
.big-line {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-1);
}
.dayhead h1 { font-size: var(--t-title); font-weight: 700; color: var(--slate); }
.note-amber {
  margin-top: var(--s-3);
  padding: 9px 12px;
  background: var(--amber-tint); border: 1px solid var(--amber-line);
  border-radius: var(--r-input);
  color: var(--amber); font-weight: 700; font-size: var(--t-label);
}

/* The four counts. Always four, always in the app's order, and an empty one
   shows a grey 0 rather than disappearing — structural honesty. */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3);
  margin: var(--s-3) 0;
}
.countcard { padding: var(--s-4); }
.countcard h3 { font-size: var(--t-label); font-weight: 700; }
.countcard .countnum {
  font-size: 32px; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.15; margin: var(--s-2) 0 2px;
}
.countcard .countsub { font-size: var(--t-caption); color: var(--slate); }
.countcard.navy .countnum { color: var(--navy); }
.countcard.grey .countnum { color: var(--grey); }
/* Not published yet: no number at all, because a zero here would be a claim. */
.countcard.amber { background: var(--amber-tint); border-color: var(--amber-line); }
.countcard.amber .countnum { color: var(--amber); }
.countcard.amber .countsub { color: var(--amber); font-weight: 700; }

/* Deadlines — red is only ever this and destructive confirmations. */
.deadlines { display: flex; flex-direction: column; gap: var(--s-2); }
.deadline {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  padding: 9px 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-input);
  font-size: var(--t-label);
}
.deadline.danger { background: var(--danger-tint); border-color: var(--danger-line); }
.deadline.danger b { color: var(--danger); }
.danger-text { color: var(--danger); }

/* A court's own block: name, division, judges, then its rows in serial order. */
.courtgroup { margin-top: var(--s-4); }
.courthead {
  display: flex; align-items: baseline; gap: var(--s-2);
  flex-wrap: wrap; margin-bottom: var(--s-2);
}
.courthead .judges { font-size: var(--t-caption); color: var(--slate); }

/* The dense table. 13px, tight rows, real selectable text — the whole reason
   this site is HTML: a case number can be dragged over, copied into a draft and
   found with Ctrl+F. */
table.dense { min-width: 720px; }
table.dense td { padding: 7px 12px; }
table.dense th { padding: 8px 12px; }
table.dense .serialcol { text-align: right; width: 68px; white-space: nowrap; }
/* The serial is the number an advocate scans a list for, so it is the one
   figure that gets weight. */
table.dense td.serialcol { font-weight: 800; font-size: 15px; }
table.dense .sub { display: block; font-size: var(--t-caption); color: var(--slate); }
table.dense a { font-weight: 700; text-decoration: none; }
table.dense a:hover { text-decoration: underline; }

/* The week strip — seven days, closed ones included and labelled. */
.week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.weekday {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-input);
  background: var(--paper); color: var(--ink);
  text-decoration: none;
}
.weekday:hover { border-color: var(--navy-line); }
.weekday.on { border-color: var(--navy); background: var(--navy-tint); }
.weekday.closed { background: var(--mist); }
.weekdate { font-weight: 800; font-size: var(--t-label); }
.weekfull { font-size: var(--t-caption); color: var(--slate); }
.weekcount { font-size: var(--t-label); font-weight: 700; margin-top: var(--s-1); }
.weeknote { font-size: var(--t-caption); color: var(--slate); }
.weekday.unpublished { background: var(--amber-tint); border-color: var(--amber-line); }
.amber-text { color: var(--amber); }

/* ============================================================
   My Cases
   ============================================================ */

/* The buckets. Filters on a desk, where the phone has a list of rooms to walk
   into. None is hidden at zero — a bucket that vanishes when empty makes a
   lawyer wonder where their cases went. */
.buckets { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.bucket {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  padding: 7px 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-chip);
  background: var(--paper); color: var(--ink);
  font-size: var(--t-label); font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.bucket:hover { border-color: var(--navy-line); }
.bucket.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.bucket .bucketcount { font-weight: 800; color: var(--slate); }
.bucket.on .bucketcount { color: #fff; }
.bucket.amber { border-color: var(--amber-line); background: var(--amber-tint); color: var(--amber); }
.bucket.amber .bucketcount { color: var(--amber); }
.bucket.amber.on { background: var(--amber); color: #fff; }
/* The divider the app draws between the fixed buckets and the user's own. */
.bucketsplit {
  width: 1px; align-self: stretch; min-height: 26px;
  background: var(--hairline); margin: 0 var(--s-1);
}

table.cases { min-width: 780px; }
/* A sortable heading is a button, so it is reachable by Tab and announces its
   direction — a table you can only sort with a mouse is half a table. */
.sortbtn {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--slate); cursor: pointer;
}
.sortbtn:hover { color: var(--navy); }
.sortbtn .arrow { color: var(--navy); }
/* Tomorrow or today. Not red — red is for a lapsing order, and a hearing you
   are ready for is not an emergency. */
.soon b { color: var(--navy); }

/* ============================================================
   Case Detail
   ============================================================ */

/* Identity left, timeline right. Below 1000px the two stack rather than
   squeezing — a 40-character-wide timeline is not a timeline. */
.twocol {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
}
.col-left, .col-right { display: flex; flex-direction: column; gap: var(--s-3); }
.col-left .card + .card, .col-right .card + .card { margin-top: 0; }
.twocol h1 { font-size: var(--t-headline); }
.flag-amber { background: var(--amber-tint); border-color: var(--amber-line); }
.flag-amber h4, .flag-amber .lead { color: var(--amber); }

/* What the court, or the advocate, actually said. Quoted rather than styled as
   a status: it is somebody's words, not a state we computed. */
.result-line {
  margin-top: var(--s-2);
  padding: 8px 11px;
  background: var(--mist);
  border-left: 2px solid var(--hairline);
  border-radius: 0 var(--r-input) var(--r-input) 0;
  font-size: var(--t-label);
  white-space: pre-wrap;
}

.addnote { display: flex; gap: var(--s-2); align-items: flex-start; margin-bottom: var(--s-2); }
.addnote textarea { flex: 1 1 auto; resize: vertical; font-family: inherit; }
.adddate { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.adddate input[type=date] { flex: 0 0 auto; }
.adddate input:not([type=date]) { flex: 1 1 180px; }

/* One dated column, five kinds of thing in it. The kind is a pill rather than
   a colour, because colour alone would put five meanings on a palette that has
   exactly one accent. */
.timeline { display: flex; flex-direction: column; }
.timeyear {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--slate);
  margin: var(--s-4) 0 var(--s-2);
}
.timeyear:first-child { margin-top: var(--s-2); }
.event {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: var(--s-3);
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.eventdate { display: flex; flex-direction: column; }
.eventdate b { font-size: var(--t-label); font-weight: 700; }
.eventdate span { font-size: var(--t-caption); color: var(--slate); }
.eventtop { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.eventbody .sub { font-size: var(--t-caption); color: var(--slate); margin-top: 2px; }
/* Still to come — the one thing on this screen worth marking. */
.event.ahead .eventdate b { color: var(--navy); }
.event.ahead { background: linear-gradient(to right, var(--navy-tint), transparent 60%); }
.event.order .pill { background: var(--danger-tint); color: var(--danger); }
.event.task-done .eventbody b, .event.order-done .eventbody b { color: var(--slate); }
.event.note .pill { background: var(--navy-tint); color: var(--navy); }

@media (max-width: 1000px) {
  .twocol { grid-template-columns: minmax(0, 1fr); }
  .event { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- sign in ---------- */

#login { display: grid; place-items: center; min-height: 100vh; padding: var(--s-4); }

/* The front page is an explanation beside the sign-in box, not a bare form.
   Google's OAuth brand verification requires the home page to state what the
   app does; a lone login card fails that check, and reads as a dead end to a
   first-time visitor too. Stacks to one column on a phone, intro first. */
#loginWrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-6);
  align-items: center;
  max-width: 1040px;
  width: 100%;
}
#loginIntro { max-width: 56ch; }
#loginIntro .brand { margin-bottom: var(--s-3); }
#loginIntro h1 { margin: 0 0 var(--s-2); }
#loginIntro .lead { margin-bottom: var(--s-3); }
.introList {
  list-style: none; padding: 0; margin: 0 0 var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.introList li {
  padding-left: 18px; position: relative;
  color: var(--slate); line-height: 1.6;
}
.introList li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--navy);
}
.introList b { color: var(--ink); font-weight: 700; }
.introFoot {
  font-size: var(--t-caption); color: var(--slate);
  line-height: 1.6; margin: 0 0 var(--s-2);
}

@media (max-width: 900px) {
  #login { place-items: start center; }
  #loginWrap { grid-template-columns: 1fr; gap: var(--s-4); }
  #loginIntro { max-width: none; }
}
#loginCard {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-6);
  width: min(400px, 94vw);
  display: flex; flex-direction: column; gap: var(--s-3);
}
#loginCard h1 { text-align: center; }
#loginCard .lead { text-align: center; margin-bottom: var(--s-2); }
#loginCard button.primary { margin-top: var(--s-2); }
#loginCard .foot {
  margin-top: var(--s-2);
  text-align: center;
  font-size: var(--t-caption);
  color: var(--slate);
  line-height: 1.6;
}

/* ---------- flash ---------- */

.flash {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 30;
  max-width: min(560px, 92vw);
  padding: 11px 16px;
  border-radius: var(--r-btn);
  font-weight: 700; font-size: var(--t-label);
  background: var(--danger-tint); color: var(--danger);
  border: 1px solid var(--danger-line);
}
.flash.info { background: var(--navy-tint); color: var(--navy); border-color: var(--navy-line); }

/* ---------- a narrow laptop ----------
   Not a phone layout: the phone has an app. This only keeps a 13" screen and a
   half-width window usable. */
@media (max-width: 1040px) {
  /* The name goes before the search box does: the account code identifies the
     account just as well and takes a quarter of the room. */
  .who b { display: none; }
}

@media (max-width: 860px) {
  #finder { flex-basis: 200px; }
  #shell {
    grid-template-columns: minmax(0, 1fr);
    /* Three rows, not two: the nav takes the height of its own content here.
       Left on `1fr` it inherits the whole column and every link stretches to
       the full height of the page. */
    grid-template-rows: 56px auto minmax(0, 1fr);
    grid-template-areas: 'bar' 'side' 'main';
  }
  #side {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    border-right: 0; border-bottom: 1px solid var(--hairline);
  }
  #side hr { display: none; }
  #main { padding: var(--s-4); }
}