/* Casedesk — the look of the thing.
 *
 * This is a working instrument for a law firm, not a consumer app, so it is
 * built to feel like good stationery: ink on warm paper, hairline rules, a
 * serif for anything carrying the firm's name, and a great deal of quiet.
 * Nothing here shouts except the things that should — an overdue case, a desk
 * that has stopped reading its mail.
 *
 * System fonts and plain CSS throughout. No build step, no downloads, and it
 * renders identically on a laptop with no internet. */

:root {
  /* Ink and paper. The paper is warm rather than blue-white; on a screen
     looked at all day it reads as calmer. */
  --ink:        #151a20;
  --ink-2:      #39424e;
  --muted:      #6c7885;
  --faint:      #98a2ae;
  --line:       #e3e6ea;
  --line-soft:  #eef0f3;
  --paper:      #f6f6f4;
  --card:       #ffffff;

  --navy:       #1a2b3f;
  --navy-2:     #24384f;
  --accent:     #1b5e8f;
  --accent-ink: #14486e;
  --accent-bg:  #eaf1f7;

  /* Muted on purpose. A red that shouts stops meaning anything by Wednesday. */
  --ok:         #1f6b4a;
  --ok-bg:      #e9f2ec;
  --warm:       #92620a;
  --warm-bg:    #fbf1de;
  --hot:        #9d3328;
  --hot-bg:     #f8e6e3;

  --display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --r-sm: 6px;
  --r:    9px;
  --r-lg: 13px;

  --sh-1: 0 1px 2px rgba(16,24,32,.05), 0 1px 3px rgba(16,24,32,.05);
  --sh-2: 0 1px 2px rgba(16,24,32,.04), 0 10px 28px rgba(16,24,32,.08);
}

* { box-sizing: border-box; }

/* `hidden` must actually hide.
 *
 * The browser's own rule is [hidden] { display: none }, but that lives in the
 * user-agent stylesheet, which every rule in this file outranks — so the
 * moment a class here sets `display` on an element that also carries `hidden`,
 * the element stays on screen. It bit the login page: the sign-in form is a
 * .card.pad, .card.pad sets display:flex, and a brand new desk showed the
 * sign-in form and the create-first-administrator form stacked on top of each
 * other. Rather than fix that one case, make the attribute mean what it says
 * everywhere. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.6 var(--ui);
  -webkit-font-smoothing: antialiased;
}

.muted { color: var(--muted); }

/* Numbers that line up column to column. Ages and counts are read down a
   list, and proportional digits make that harder than it needs to be. */
.tabular, .age, .tile .n, .count { font-variant-numeric: tabular-nums; }

::selection { background: #dbe7f1; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---- the bar across the top ------------------------------------------- */

header {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  color: #fff; padding: 0 26px; min-height: 58px; box-shadow: var(--sh-1);
}

.brand { display: flex; align-items: baseline; gap: 11px; padding: 11px 0; }
.brand .mark { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: .2px; }
.brand .firm {
  font-size: 12px; color: #9db1c6; letter-spacing: .2px;
  border-left: 1px solid rgba(255,255,255,.18); padding-left: 11px;
}

.views { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.views button {
  font: inherit; font-size: 13.5px; cursor: pointer; border: 0; background: transparent;
  color: #b8c7d6; padding: 7px 13px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .13s ease, color .13s ease;
}
.views button:hover { color: #fff; background: rgba(255,255,255,.08); }
.views button.active { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }

.pip:empty { display: none; }
.pip {
  display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 20px;
  background: rgba(255,255,255,.18); font-size: 11px; font-weight: 700;
  text-align: center; line-height: 1.5;
}
.pip.alert { background: #c8534a; color: #fff; }

.whoami { display: flex; align-items: center; gap: 11px; font-size: 13px; }
.whoami .name { color: #fff; font-weight: 600; }
.whoami .role {
  font-size: 10px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700;
  background: rgba(255,255,255,.15); color: #cfe0ef; border-radius: 20px; padding: 3px 9px;
}
.whoami button {
  background: transparent; border: 1px solid rgba(255,255,255,.28); color: #cddae6;
  border-radius: var(--r-sm); padding: 5px 11px; cursor: pointer; font: inherit;
  font-size: 12.5px; transition: background .13s ease, color .13s ease;
}
.whoami button:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---- filters and search ------------------------------------------------ */

.toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--card); border-bottom: 1px solid var(--line); padding: 9px 26px;
}
.filters { display: flex; gap: 3px; flex-wrap: wrap; }
.filters button {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: 6px 12px; border-radius: 20px; font: inherit; font-size: 13px;
  transition: background .13s ease, color .13s ease;
}
.filters button:hover { background: var(--line-soft); color: var(--ink); }
.filters button.active { background: var(--ink); color: #fff; font-weight: 500; }

.search { margin-left: auto; position: relative; }
.search input {
  font: inherit; font-size: 13px; padding: 7px 12px 7px 32px; width: 268px; max-width: 46vw;
  border: 1px solid var(--line); border-radius: 20px; background: var(--paper); color: var(--ink);
  transition: border-color .13s ease, background .13s ease;
}
.search input:focus {
  background: #fff; border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(27,94,143,.12);
}
.search input::placeholder { color: var(--faint); }
.search::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 11px; height: 11px;
  margin-top: -7px; border: 1.5px solid var(--faint); border-radius: 50%;
}
.search::after {
  content: ""; position: absolute; left: 21px; top: 50%; width: 5px; height: 1.5px;
  margin-top: 3px; background: var(--faint); transform: rotate(45deg);
}

main { max-width: 1340px; margin: 26px auto 60px; padding: 0 26px; }

/* ---- is the desk working ----------------------------------------------- */

.health {
  padding: 9px 26px; font-size: 13px; border-bottom: 1px solid var(--line);
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.health.ok   { background: var(--ok-bg);   color: #175539; }
.health.warn { background: var(--warm-bg); color: #7d5407; }
.health.bad  { background: var(--hot-bg);  color: #83291f; }
.health::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  display: inline-block; opacity: .7; align-self: center; flex: none;
}
.health.bad::before { animation: pulse 2s ease-in-out infinite; opacity: 1; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- the numbers across the top ---------------------------------------- */

.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 13px; margin-bottom: 22px;
}
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 18px 14px; box-shadow: var(--sh-1);
}
.tile .n {
  font-family: var(--display); font-size: 30px; line-height: 1.1; font-weight: 600;
  color: var(--navy); letter-spacing: -.5px;
}
.tile.alert .n { color: var(--hot); }
.tile .l { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ---- cards ------------------------------------------------------------- */

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.card.pad {
  padding: 15px 18px; display: flex; justify-content: space-between;
  align-items: center; gap: 15px; flex-wrap: wrap;
}
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1040px) { .split { grid-template-columns: 1fr; } }

/* ---- the list of requests ---------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--faint); padding: 13px 16px 9px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tr.row { cursor: pointer; transition: background .12s ease; }
tr.row:hover { background: #fafbfc; }
tr.row.sel { background: var(--accent-bg); }
tr.row.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.type {
  display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 4px;
  padding: 3px 8px; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
}
/* Anything the firm adds itself gets the neutral treatment rather than no
   treatment, so a new job type never renders as unstyled text. */
.type             { background: #eef0f3; color: var(--ink-2); }
.type.moe_challan { background: var(--accent-bg); color: var(--accent-ink); }
.type.modt        { background: #eee9f7; color: #55399e; }
.type.noi         { background: var(--ok-bg); color: var(--ok); }

.borrower { font-weight: 500; }
.lan { font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: -.2px; }
.stage { font-size: 12.5px; color: var(--ink-2); }
.owner { font-size: 12.5px; color: var(--ink-2); }
.owner.none { color: var(--faint); font-style: italic; }
.age { font-weight: 600; white-space: nowrap; font-size: 13px; }
.age.ok { color: var(--muted); } .age.warm { color: var(--warm); } .age.hot { color: var(--hot); }

.flag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .4px;
  background: var(--warm-bg); color: var(--warm); border-radius: 3px;
  padding: 1px 6px; margin-left: 6px; text-transform: uppercase; vertical-align: 1px;
}

.bar { height: 4px; background: var(--line); border-radius: 3px; overflow: hidden; width: 68px; }
.bar i { display: block; height: 100%; background: var(--ok); border-radius: 3px;
  transition: width .3s ease; }

/* ---- the request list, read down rather than across --------------------
   A desk gets scanned for the one row that needs attention, so the work here
   is making a column readable at a glance: the count beside its bar rather
   than under it, the age right-aligned so the digits line up, and the owner
   as a mark you recognise before you have read the name. */

.requests thead th {
  position: sticky; top: 0; z-index: 2; background: var(--card);
  box-shadow: inset 0 -1px 0 var(--line);
}
.requests th.right, .requests td.right { text-align: right; }
.requests tbody td { padding-top: 10px; padding-bottom: 10px; }

/* Where the request has got to, as a row of ticks. Reading "Registration done"
   tells you the stage; the ticks tell you how far through that is. */
.steps { display: flex; gap: 3px; margin-top: 5px; }
.steps i { width: 14px; height: 3px; border-radius: 2px; background: var(--line); }
.steps i.done { background: #b9cbdb; }
.steps i.now  { background: var(--accent); }

.docs { display: flex; align-items: center; gap: 9px; }
.docs .tabular { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.bar i.full { background: var(--ok); }

/* The owner. Initials first, because a column of names is read as a shape
   long before it is read as words. */
.who { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.who .pic {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--accent-bg); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.who .nm { color: var(--ink-2); }
.who.none { color: var(--faint); font-style: italic; }

@media (max-width: 1100px) {
  /* The name goes before the mark does — the initials still say who. */
  .who .nm { display: none; }
}

/* ---- the case file ----------------------------------------------------- */

.detail { padding: 22px 24px; position: sticky; top: 20px; }
.detail h2 {
  font-family: var(--display); font-size: 20px; margin: 0 0 5px; color: var(--ink);
  font-weight: 600; letter-spacing: -.2px; line-height: 1.25;
}
.detail h3 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .9px; font-weight: 700;
  color: var(--faint); margin: 24px 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
}

.stages { display: flex; flex-wrap: wrap; gap: 5px; }
.stages button {
  font: inherit; font-size: 12.5px; cursor: pointer; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2); border-radius: 20px; padding: 5px 12px;
  transition: all .13s ease;
}
.stages button:hover { border-color: var(--accent); color: var(--accent-ink); }
.stages button.on {
  background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600;
  box-shadow: var(--sh-1);
}
.stages button.done { background: var(--accent-bg); border-color: transparent; color: var(--accent-ink); }

.check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.check input { width: 16px; height: 16px; accent-color: var(--ok); cursor: pointer; flex: none; }
.check label { cursor: pointer; }
.check.miss label { color: var(--hot); }

.docs { list-style: none; padding: 0; margin: 0; }
.docs li {
  font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.docs li:last-child { border-bottom: 0; }
.docs a { color: var(--accent); text-decoration: none; font-weight: 500; }
.docs a:hover { text-decoration: underline; }

.chase {
  width: 100%; min-height: 190px; font: 12.5px/1.6 var(--mono); padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fbfbfa;
  color: var(--ink-2); resize: vertical;
}

.warnbox {
  background: var(--warm-bg); border: 1px solid #f0dfbc; border-radius: var(--r);
  padding: 13px 15px; margin: 16px 0; font-size: 13px; color: #6f4c08;
}
.warnbox b { display: block; margin-bottom: 4px; color: #5c3f06; }

/* ---- buttons ----------------------------------------------------------- */

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; align-items: center; }

button.primary, button.ghost, label.upload {
  font: inherit; font-size: 13px; cursor: pointer; padding: 8px 15px;
  border-radius: var(--r-sm); transition: all .13s ease; white-space: nowrap;
}
button.primary {
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  font-weight: 600; box-shadow: var(--sh-1);
}
button.primary:hover:not(:disabled) { background: #21384f; box-shadow: var(--sh-2); }
button.ghost, label.upload { background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
button.ghost:hover:not(:disabled) { border-color: var(--muted); background: #fbfbfa; }
button:disabled { opacity: .45; cursor: not-allowed; }
label.upload { display: inline-block; }

.linky {
  background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit;
  font-size: 12.5px; padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.linky:hover { color: var(--accent-ink); }
/* For the one action that cannot be undone. Muted rather than loud — it sits
   beside Reset password and Switch off, and a red that shouts on every row
   stops meaning anything by Wednesday. */
.linky.danger { color: var(--hot); }
.linky.danger:hover { color: var(--hot); text-decoration-thickness: 2px; }

input, select, textarea { font-family: inherit; }

/* ---- section headings -------------------------------------------------- */

.sec-head { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; margin: 26px 0 11px; }
.sec-head h2 {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.sec-head .count {
  display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 20px;
  background: var(--line-soft); color: var(--muted); font-size: 11.5px; font-weight: 700;
  text-align: center;
}
.sec-head .muted { font-size: 12.5px; }
/* The first heading on a screen should not push the content down twice. */
.subpanel > .sec-head:first-child { margin-top: 6px; }

/* ---- sub-navigation within one screen ---------------------------------- */

/* Setup and Automations had grown into a single unbroken scroll: every bank,
   then both letters with their full text open, then every kind of job, then
   the forms to add more. Finding one thing meant going past all of it.
   These split a screen into named parts, one shown at a time, in the same
   ruled-paper idiom as the tabs along the top — an underline, not a pill, so
   there is only ever one loud thing on the page. */

.subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin: 4px 0 4px;
}
.subnav button {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;                 /* sit the underline on the rule */
  padding: 9px 13px 8px;
  font: inherit; font-size: 13px; font-weight: 550; color: var(--muted);
  cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0;
  display: flex; align-items: center; gap: 8px;
  transition: color .12s ease, background .12s ease;
}
.subnav button:hover { color: var(--ink-2); background: var(--line-soft); }
.subnav button[aria-selected="true"] {
  color: var(--accent-ink); border-bottom-color: var(--accent);
  background: none;
}
.subnav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Counts ride along in the tab so the queues can be read without opening
   each one — the whole point of splitting them up. */
.subnav .count {
  min-width: 19px; padding: 1px 6px; border-radius: 20px;
  background: var(--line-soft); color: var(--muted);
  font-size: 11px; font-weight: 700; text-align: center;
}
.subnav button[aria-selected="true"] .count { background: var(--accent-bg); color: var(--accent-ink); }
/* Something actually waiting on a person is the one thing allowed to carry
   colour here, and only when the number is not zero. */
.subnav .count.due { background: var(--warm-bg); color: var(--warm); }

@media (max-width: 720px) {
  .subnav { gap: 0; }
  .subnav button { padding: 9px 10px 8px; font-size: 12.5px; }
}

/* ---- messages waiting, scheduled, history ------------------------------ */

.mail {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 10px; box-shadow: var(--sh-1); overflow: hidden;
}
.mail-h {
  display: flex; justify-content: space-between; align-items: center; gap: 13px;
  padding: 12px 15px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
  font-size: 13.5px;
}
.mail.slim .mail-h { border-bottom: 0; }
.mail-b { padding: 12px 15px; font-size: 13px; }
.mail-b .subj { font-weight: 600; margin: 4px 0 9px; }
.mail-body {
  margin: 0; white-space: pre-wrap; background: #fbfbfa; border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 11px 13px; font: 12.5px/1.6 var(--mono);
  max-height: 230px; overflow: auto; color: var(--ink-2);
}

.pill {
  font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 3px 10px;
  white-space: nowrap; letter-spacing: .3px; text-transform: uppercase;
}
.pill.ok         { background: var(--ok-bg);   color: var(--ok); }
.pill.warn       { background: var(--warm-bg); color: var(--warm); }
.pill.bad        { background: var(--hot-bg);  color: var(--hot); }
.pill.muted-pill { background: var(--line-soft); color: var(--muted); }

.banner-on  { border-left: 3px solid var(--ok); }
.banner-off { border-left: 3px solid var(--faint); }
.previewbar { border-left: 3px solid var(--accent); margin-bottom: 10px; align-items: flex-start; }
.previewbar b { color: var(--navy); }
.dupebar { border-left: 3px solid var(--warm); margin-bottom: 20px; }
.dupe {
  display: flex; justify-content: space-between; align-items: center; gap: 13px;
  flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px;
}

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

.addrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.addrow input, .addrow select, .slotpick {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 13px; background: #fff; color: var(--ink);
  transition: border-color .13s ease, box-shadow .13s ease;
}
.addrow input, .addrow select { flex: 1 1 170px; }
.addrow input:focus, .addrow select:focus, .chase:focus, .slotpick:focus,
.signin-box input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(27,94,143,.1);
}
.addrow button { flex: 0 0 auto; }
.slotpick { font-size: 11.5px; padding: 2px 6px; color: var(--muted); margin-left: auto; }

.setup-label { display: block; font-size: 12.5px; font-weight: 600; margin: 15px 0 6px; }
.setup-sub {
  font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  margin: 17px 0 8px; color: var(--faint);
}
.setup-good { background: var(--ok-bg); border-left: 3px solid var(--ok);
  border-radius: var(--r-sm); padding: 12px 15px; font-size: 13px; margin-top: 13px; }
.setup-bad { background: var(--hot-bg); border-left: 3px solid var(--hot);
  border-radius: var(--r-sm); padding: 12px 15px; font-size: 13px; margin-top: 13px; }
.setup-warn { background: var(--warm-bg); border-left: 3px solid var(--warm);
  border-radius: var(--r-sm); padding: 10px 13px; font-size: 12.5px; }
#setup .check { justify-content: space-between; max-width: 480px; }

.fixbox {
  background: #fbfbfa; border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 17px; margin: 16px 0;
}
.quoted { font-style: italic; color: var(--muted); font-family: var(--display); }

/* ---- signing in -------------------------------------------------------- */

body.signin { background: linear-gradient(165deg, var(--navy-2), #12202f 70%); }
.signin-wrap {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  margin: 0; padding: 24px; max-width: none;
}
.signin-box {
  display: block; width: 100%; max-width: 392px; padding: 34px 34px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28); border: 0; border-radius: var(--r-lg);
}
.signin-box h1 {
  margin: 0; font-family: var(--display); font-size: 26px; font-weight: 600;
  color: var(--navy); letter-spacing: -.2px;
}
.signin-box > p.muted { margin: 3px 0 24px; font-size: 12.5px; }
.signin-box label { display: block; font-size: 12.5px; font-weight: 600; margin: 16px 0 6px; }
.signin-box input {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; background: #fff; color: var(--ink);
}
.signin-box button { width: 100%; margin-top: 24px; padding: 11px; font-size: 14px; }
.signin-problem {
  margin-top: 16px; background: var(--hot-bg); color: #83291f; border-radius: var(--r-sm);
  padding: 10px 13px; font-size: 13px; border-left: 3px solid var(--hot);
}
.signin-foot { margin: 20px 0 0; font-size: 12px; }

/* Only ever seen once, on a desk nobody can sign in to yet. Blue rather than
   red: this is not a fault, it is the first step. */
.signin-first {
  margin: 0 0 4px; padding: 12px 14px; font-size: 13px; line-height: 1.55;
  background: var(--accent-bg); color: var(--accent-ink);
  border-radius: var(--r-sm); border-left: 3px solid var(--accent);
}

/* ---- telling someone a click failed ------------------------------------ */

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #201a19; color: #ffe9e6; border-left: 3px solid #c8534a;
  padding: 12px 18px; border-radius: var(--r); font-size: 13.5px; max-width: 90vw;
  box-shadow: 0 10px 34px rgba(0,0,0,.3); z-index: 60; animation: rise .2s ease;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }
/* Same strip, saying something worked rather than something broke. */
.toast.good { background: #10261c; color: #d8f0e3; border-left-color: #4f9c76; }

.empty { padding: 34px 22px; text-align: center; color: var(--muted); font-size: 13.5px; }
.empty b {
  display: block; font-family: var(--display); font-size: 16px; color: var(--ink-2);
  margin-bottom: 4px; font-weight: 600;
}

/* ---- on a phone -------------------------------------------------------- */

@media (max-width: 720px) {
  header { padding: 0 16px; gap: 12px; }
  .brand .firm { display: none; }
  .views { margin-left: 0; width: 100%; overflow-x: auto; padding-bottom: 8px; }
  .whoami { margin-left: auto; }
  .whoami .role { display: none; }
  .toolbar { padding: 9px 16px; }
  .search { margin-left: 0; width: 100%; }
  .search input { width: 100%; max-width: none; }
  main { padding: 0 16px; margin-top: 18px; }
  .health { padding: 9px 16px; }
  .detail { position: static; padding: 18px; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 9px; }
  .tile { padding: 12px 14px; }
  .tile .n { font-size: 25px; }

  /* The table becomes a stack of cards. Six columns on a 375px screen is
     unreadable, and this desk gets checked on a phone between hearings. */
  thead { display: none; }
  table, tbody, tr.row, tbody td { display: block; width: 100%; }
  tr.row {
    border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 10px;
    padding: 12px 14px; background: #fff; position: relative; box-shadow: var(--sh-1);
  }
  tr.row.sel { box-shadow: 0 0 0 2px var(--accent); background: #fff; }
  tr.row.sel td:first-child { box-shadow: none; }
  tbody td { border: 0; padding: 2px 0; }
  tbody td:first-child { padding-bottom: 7px; }
  tbody td:nth-child(3), tbody td:nth-child(4), tbody td:nth-child(6) {
    display: inline-block; width: auto; margin-right: 15px; vertical-align: middle;
  }
  tbody td:nth-child(5) { position: absolute; top: 12px; right: 14px; width: auto; }
  #list { border: 0; box-shadow: none; background: transparent; }
}

@media (max-width: 460px) {
  .filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filters button { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- reports ----------------------------------------------------------- */
.monthrow {
  display: flex; align-items: center; gap: 14px; padding: 6px 0; font-size: 13px;
}
.mlabel { flex: 0 0 132px; color: var(--ink-2); }
.mbars { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 60px; }
.mbar { display: block; height: 7px; border-radius: 3px; min-width: 2px;
  transition: width .4s ease; }
.mbar.in  { background: var(--accent); }
.mbar.out { background: var(--ok); }
.mbar.age { background: var(--navy); opacity: .55; }
.mnum { flex: 0 0 auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.legend { display: flex; gap: 16px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 7px; border-radius: 3px; display: inline-block; }
.legend i.in { background: var(--accent); }
.legend i.out { background: var(--ok); }
#reports table td { font-size: 13px; }
@media (max-width: 720px) {
  .mlabel { flex: 0 0 92px; font-size: 12px; }
  #reports thead { display: table-header-group; }
  #reports table, #reports tbody, #reports tr, #reports td { display: revert; }
  #reports tr { border: 0; margin: 0; padding: 0; box-shadow: none; background: none; }
  #reports tbody td { border-bottom: 1px solid var(--line-soft); padding: 10px 14px; }
}

/* ---- the case history -------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px;
  background: var(--line);
}
.timeline li { position: relative; padding: 0 0 13px 20px; font-size: 12.5px; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: #fff; border: 2px solid var(--line);
}
.timeline li.notable::before { border-color: var(--accent); background: var(--accent); }
.timeline .when { color: var(--faint); font-size: 11.5px; display: block; }
.timeline .what { color: var(--ink-2); }
.timeline .who { color: var(--muted); }
.notebox { display: flex; gap: 8px; margin-top: 12px; }
.notebox input {
  flex: 1; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 13px;
}

/* ---- reminders people set up for themselves ---------------------------- */
.rulebuilder { border-left: 3px solid var(--accent); margin-top: 12px; }
.rulebuilder b { color: var(--navy); }
.rulebuilder select { min-width: 150px; }
#myRules .mail-h { gap: 10px; }
#myRules .mail-h > span:last-child { display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap; }

/* ---- the guide --------------------------------------------------------- */
.guide { max-width: 900px; }
.guide-lede { margin-bottom: 34px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.guide h1 { font-family: var(--display); font-size: 30px; font-weight: 600; margin: 0 0 12px;
  color: var(--ink); letter-spacing: -.4px; }
.guide h2 { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--navy);
  margin: 40px 0 10px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.guide h2:first-of-type { border-top: 0; padding-top: 0; }
.guide h3 { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 26px 0 10px;
  text-transform: none; letter-spacing: 0; border: 0; padding: 0; }
.guide h4 { font-size: 13.5px; font-weight: 600; margin: 0 0 7px; color: var(--navy); }
.guide p { margin: 0 0 13px; color: var(--ink-2); max-width: 68ch; }
.guide .muted { color: var(--muted); }

.figure { margin: 18px 0 26px; }
.figure svg { width: 100%; height: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); display: block; }
.caption { font-size: 12.5px; color: var(--muted); margin-top: 11px; max-width: 68ch; }
.figure.two, .figure.three { display: grid; gap: 14px; }
.figure.two { grid-template-columns: 1fr 1fr; }
.figure.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) {
  .figure.two, .figure.three { grid-template-columns: 1fr; }
}

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 17px 19px; box-shadow: var(--sh-1); }
.panel h3 { margin: 0 0 10px; font-size: 13.5px; }
.panel ul { margin: 0; padding-left: 18px; }
.panel li { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.panel p { font-size: 13px; margin: 0; }
.ok-panel { border-left: 3px solid var(--ok); }
.warm-panel { border-left: 3px solid var(--warm); }
.tag { font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  background: var(--accent-bg); color: var(--accent-ink); border-radius: 20px;
  padding: 2px 7px; vertical-align: 2px; }

.rule-of-thumb { background: var(--accent-bg); border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: 13px 16px; font-size: 13.5px; color: var(--accent-ink);
  max-width: none; }

.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 8px; }
.promises > div { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 15px; font-size: 13px; color: var(--ink-2);
  box-shadow: var(--sh-1); }
.promises b { color: var(--ink); }
@media (max-width: 780px) { .promises { grid-template-columns: 1fr; } }

.guide-foot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); }

/* diagram parts */
.g-box { fill: #fff; stroke: var(--line); stroke-width: 1.2; }
.g-box.accent { fill: var(--accent-bg); stroke: #cddfec; }
.g-box.ok { fill: var(--ok-bg); stroke: #cfe3d6; }
.g-box.warm { fill: var(--warm-bg); stroke: #eddcbb; }
.g-chrome { fill: var(--navy); }
.g-strip { fill: var(--ok-bg); stroke: #cfe3d6; stroke-width: 1; }
.g-strip.accent-strip { fill: var(--accent-bg); stroke: #cddfec; }
.g-pillbox { fill: rgba(255,255,255,.16); }
.g-pillbox.on { fill: rgba(255,255,255,.4); }
.g-line { stroke: var(--faint); stroke-width: 1.4; fill: none; }
.g-hair { stroke: var(--line-soft); stroke-width: 1; }
.g-t { font: 600 13px var(--ui); fill: var(--ink); }
.g-t.light { font-family: var(--display); font-size: 14px; fill: #fff; }
.g-s { font: 12px var(--ui); fill: var(--ink-2); }
.g-s.ok { fill: var(--ok); } .g-s.warm { fill: var(--warm); } .g-s.hot { fill: var(--hot); }
.g-h { font: 700 9.5px var(--ui); fill: var(--faint); letter-spacing: .8px; }
.g-n { font: 600 19px var(--display); fill: var(--navy); }
.g-n.hot { fill: var(--hot); }

/* ---- which desk -------------------------------------------------------
   A bank and a city. Only drawn when there is more than one to choose from. */

.deskpick { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.deskpick button {
  appearance: none; border: 1px solid var(--line); background: var(--card);
  color: var(--ink-2); font: inherit; font-size: 12.5px;
  padding: 5px 11px; border-radius: 20px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.deskpick button:hover { border-color: var(--faint); }
.deskpick button.active {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.deskpick button .n {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--line-soft); color: var(--muted);
  border-radius: 20px; padding: 0 6px; min-width: 18px; text-align: center;
}
.deskpick button.active .n { background: rgba(255,255,255,.22); color: #fff; }
/* Work nobody has placed. Amber, because it is somebody's job to sort out —
   not red, because nothing is broken and nothing is late because of it. */
.deskpick button.warnpill { border-color: var(--warm-line); color: var(--warm); }
.deskpick button.warnpill.active { background: var(--warm); border-color: var(--warm); color: #fff; }

/* On the case itself, so it is obvious why nobody else can see it. */
.notplaced { color: var(--warm); font-weight: 600; }
/* Desks, as cards you can count at a glance rather than a column to read. */
.deskgrid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.deskcard { display: flex; flex-direction: column; }
.deskhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.deskname { font-family: var(--display); font-size: 17px; color: var(--ink); line-height: 1.2; }
.deskbank { font-size: 12px; color: var(--muted); margin-top: 2px; }
.deskcount { text-align: right; line-height: 1; flex: none; }
.deskcount .n { font-family: var(--display); font-size: 24px; color: var(--navy); }
.deskcount .l { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--faint); margin-top: 3px; }
.deskcount.zero .n { color: var(--faint); }

/* Who may see which desk, on the row under each person. */
tr.accessline td { padding-top: 0; border-bottom: 1px solid var(--line); }
.accessrow {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; padding: 2px 0 10px;
}
.grant {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-bg); color: var(--accent-ink);
  border-radius: 20px; padding: 3px 6px 3px 11px; font-size: 12px;
}
.grant .x {
  border: 0; background: none; cursor: pointer; color: var(--accent-ink);
  font-size: 14px; line-height: 1; padding: 0 4px; opacity: .6;
}
.grant .x:hover { opacity: 1; }
.grantadd { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.grantadd select { font: inherit; font-size: 12.5px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }

/* ---- the mailbox screen ------------------------------------------------
   One card, two states. Before the account is connected there is nothing to
   say about sending, so none of it is on screen. */

.mb-state {
  font-size: 13.5px; line-height: 1.55; padding: 11px 14px;
  border-radius: var(--r-sm); margin-bottom: 4px;
}
.mb-state.on  { background: var(--ok-bg);   border-left: 3px solid var(--ok); }
.mb-state.off { background: var(--warm-bg); border-left: 3px solid var(--warm); }
.mb-state .linky { font-size: 12.5px; }

.mb-hint { font-size: 12.5px; margin-top: 7px; line-height: 1.55; }

/* Trial or live, as two things you choose between rather than a switch with a
   hidden second state. Which one you are in should be readable without
   clicking anything. */
.mb-modes { display: grid; gap: 9px; margin: 20px 0 4px; }
@media (min-width: 620px) { .mb-modes { grid-template-columns: 1fr 1fr; } }

.mb-mode {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; font-size: 13.5px; line-height: 1.5;
  transition: border-color .12s ease, background .12s ease;
}
.mb-mode:hover { border-color: var(--faint); }
.mb-mode.picked { border-color: var(--accent); background: var(--accent-bg); }
.mb-mode input { margin-top: 3px; accent-color: var(--accent); }
.mb-mode .muted { font-size: 12.5px; }

/* ---- editing what the letters say -------------------------------------- */
input.wide { width: 100%; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font: inherit; font-size: 13px; background: #fff;
  color: var(--ink); }
input.wide:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27,94,143,.1); }
.fieldhelp { margin-top: 11px; font-size: 12.5px; color: var(--muted); line-height: 2; }
.fieldchip {
  display: inline-block; font: 600 11.5px var(--mono); background: var(--accent-bg);
  color: var(--accent-ink); border: 1px solid var(--accent-edge, #cddfec);
  border-radius: 5px; padding: 1px 7px; cursor: pointer; white-space: nowrap;
}
.fieldchip:hover { background: #dbe8f2; }

/* ---- a person checks each document ------------------------------------- */
.docs li.doc { display: block; padding: 9px 0; }
.docmain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.docacts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.docacts .slotpick { margin-left: 0; }
.doc.verified .docmain a { color: var(--ok); }
.doc.rejected .docmain a { color: var(--hot); text-decoration: line-through; }
.docwhy {
  font-size: 12.5px; color: var(--hot); background: var(--hot-bg);
  border-radius: var(--r-sm); padding: 6px 10px; margin: 6px 0 0;
}
.check .tick { width: 16px; text-align: center; color: var(--ok); flex: none; font-weight: 700; }
.check.miss .tick { color: var(--faint); }

/* ---- reading the mailbox ----------------------------------------------- */
.syncbar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.syncbar button { padding: 5px 12px; font-size: 12.5px; }
@media (max-width: 720px) {
  .syncbar { width: 100%; order: 3; justify-content: space-between; }
  .docacts { gap: 8px; }
}

/* ---- looking at a document without leaving the case -------------------- */
button.tiny { padding: 3px 11px; font-size: 12px; }
.viewer {
  margin: 10px 0 4px; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: #fbfbfa;
}
.viewer iframe { width: 100%; height: 460px; border: 0; display: block; background: #fff; }
.viewer img { width: 100%; max-height: 460px; object-fit: contain; display: block;
  background: #fff; }
.viewer-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.viewer-foot a { color: var(--accent); font-weight: 500; }
@media (max-width: 720px) { .viewer iframe, .viewer img { height: 320px; max-height: 320px; } }

/* ---- the "log a request" sheet -----------------------------------------
 *
 * A native <dialog>, so Escape closes it and the backdrop comes free. Sized
 * to be filled in on a phone between hearings, like the rest of the desk. */
.sheet {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  background: var(--card);
  color: var(--ink);
  padding: 0;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
}
.sheet::backdrop { background: rgba(16, 24, 32, .38); }
.sheet form {
  padding: 22px 24px 20px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
.sheet h2 {
  font-family: var(--display);
  font-size: 1.28rem;
  margin: 0 0 4px;
}
.sheet > form > p { margin: 0 0 16px; }
.sheet label {
  display: block;
  margin-bottom: 13px;
  font-size: .85rem;
  color: var(--ink-2);
}
.sheet input,
.sheet select,
.sheet textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.sheet input:focus,
.sheet select:focus,
.sheet textarea:focus {
  outline: 2px solid var(--accent-bg);
  border-color: var(--accent);
}
.sheet textarea { resize: vertical; }
.sheet .small { font-size: .8rem; margin: -7px 0 15px; }
.sheet .row {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin-top: 18px;
}
.sheet .problem {
  background: var(--hot-bg);
  color: var(--hot);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  margin-bottom: 14px;
  font-size: .87rem;
}

/* The desk being edited in Setup → Kinds of job. Same pills as the board's
   desk filter, but they change what is being written rather than what is
   shown, so they sit above the cards with a sentence saying which. */
.deskpick-setup { margin: 0 0 6px; }
.check .sideset select {
  font: inherit;
  font-size: .84rem;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 3px 6px;
}
.check .pill { margin-left: 6px; }

/* Setup → Keeping documents. The download sits beside the removal button, so
   taking a copy is the nearer of the two. */
a.ghost.button {
  display: inline-block;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: var(--card);
  font-size: .9rem;
}
a.ghost.button:hover { border-color: var(--accent); color: var(--accent); }