/* ClaimTrack's look, built on FirstReach's (brand/README.md): premium and calm, editorial
   meeting product. One stylesheet for every page, served from this app, as are its two
   typefaces, its logo and its icons: the content policy loads nothing from anywhere else,
   and a practice's browser should not tell a font service which pages it opens.

   Geist is the sans; Instrument Serif, in italic only, is the emphasis -- the big numbers
   and the odd word. Both SIL Open Font Licence, see fonts/README. The brand's display face,
   Space Grotesk, is in the logo files already outlined, so the app never loads it. */

@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* -- tokens -------------------------------------------------------------------------------
   Dark only, because night is ClaimTrack's setting: navy near-black ground, one cool accent
   (periwinkle, with indigo at the far end of its gradients), white for what matters, slate
   for the rest.

   Text greys are a step lighter than the site's #64748b, which reads 3.75:1 on this panel
   and so fails WCAG AA for the 12-14px text a work tool is full of. #64748b is kept for
   what is large or decorative only. Every pair below was checked, not eyeballed: ink 17:1,
   body 12:1, muted 7:1, link 9:1, the status pills about 9:1, the primary button 6.4:1.

   Lateness is an ordered scale, so it wears one hue in steps -- periwinkle's own, from dim
   to bright, because on a dark surface it is the lighter step that reads as "more". The
   steps were generated in OKLCH at hue 277 and run through the dataviz validator against
   the panel: lightness monotone, every gap >= 0.06, one hue. Change them and check again. */
:root {
  color-scheme: dark;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: #0a0f1f;          /* the page: near-black indigo */
  --panel: #0f172a;       /* cards and tables */
  --raised: #131c31;      /* inputs, hover */
  --line: #1e293b;        /* the 1px lines */
  --line-strong: #2a3650;
  --ink: #f8fafc;         /* headlines, numbers */
  --body: #cbd5e1;        /* reading text */
  --muted: #94a3b8;       /* labels and secondary text */
  --faint: #64748b;       /* the site's slate: large or decorative only */
  --accent: #818cf8;      /* periwinkle */
  --accent-2: #4f46e5;    /* indigo */
  --link: #a5b4fc;
  --on-accent: #0a0f1f;
  --late: #fda4af;        /* the one warm note: overdue, refused, wrong */
  --late-bg: #211a2e;
  --ok: #6ee7b7;
  --radius: 16px;
  --radius-sm: 10px;

  --band-1: #4749b7; --band-2: #5e64d1; --band-3: #7781e5; --band-4: #939ef4; --band-5: #b1bcfe;
  --band-track: #1f2343;

  /* Whose move a claim is on: ours amber, the insurer's periwinkle, finished green,
     stopped slate. Pale text on a tint of the same hue over the panel; ~9:1 each. */
  --tone-ours: #fcd34d; --tone-ours-bg: #342d25;
  --tone-theirs: #c7d2fe; --tone-theirs-bg: #242c4f;
  --tone-done: #6ee7b7; --tone-done-bg: #0f3138;
  --tone-stopped: #cbd5e1; --tone-stopped-bg: #242d41;

  --gradient: linear-gradient(90deg, var(--accent), var(--accent-2));
  /* A divider that fades to nothing at both ends. */
  --fade: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font: 15px/1.55 var(--sans); font-feature-settings: "ss01" on;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
    text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--accent); }
strong, b { color: var(--ink); font-weight: 600; }
em.accent, .em { font-family: var(--serif); font-style: italic; font-weight: 400; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); }

/* Where the keyboard is, always visible and never on a click. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 14px; border-radius: 999px;
        background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
                   white-space: nowrap; }

/* -- the logo: brand/'s own files, copied into static/brand and never redrawn here ----------
   The horizontal logo in the header, where a person already knows what this is; the endorsed
   one ("by FirstReach AI.") on the pages somebody arrives at. Each at its height and no
   smaller than brand/README.md allows: 16px and 48px. */
.logo { display: inline-flex; flex: none; border-radius: 6px; }
.logo img { display: block; width: auto; height: 22px; }
.brand .logo { margin-right: 3px; }   /* with the row's 14px gap: 17px, the height of its C */
.logo.endorsed img { height: 48px; }

/* -- the top of every page ---------------------------------------------------------------- */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
header.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent);
             backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); }
header.top::after { content: ""; display: block; height: 1px; background: var(--fade); }
.brand { display: flex; align-items: center; gap: 14px; padding: 14px 0 0; flex-wrap: wrap; min-height: 56px; }
.brand .rule { width: 1px; height: 18px; background: var(--line-strong); }
.brand h1 { font: 500 14px/1.2 var(--sans); margin: 0; color: var(--body); letter-spacing: 0; }
.search { margin-left: auto; position: relative; }
.search input[type=search] { width: 18rem; padding: 7px 14px; font-size: 13px; border-radius: 999px; }
/* What static/suggest.js offers under the box as it is typed in. Made by the script, so
   without it there is nothing here to hide. */
.suggest { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; width: max(100%, 24rem);
           max-height: 70vh; overflow-y: auto; padding: 6px; background: var(--panel);
           border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
           box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--bg) 80%, transparent); }
.suggest[hidden] { display: none; }
.suggest-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px;
                  border-radius: 8px; text-decoration: none; color: var(--body); }
.suggest-option:hover, .suggest-option[aria-selected="true"] { background: var(--raised); color: var(--ink); }
.suggest-option[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--accent); }
.suggest-label { color: var(--ink); font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; }
.suggest-kind { color: var(--muted); font: 600 11px/1.8 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; }
.suggest-detail { grid-column: 1 / -1; color: var(--muted); font-size: 12px; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
/* The signed-in person's menu: their name, which opens onto their password, the practice's
   set-up and signing out. A details element, so it needs no script; the panel hangs from
   the name's right edge and never runs off a phone's screen. */
.account { position: relative; margin-left: auto; }
.search ~ .account { margin-left: 0; }  /* the search box already takes the space */
.account > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
                     padding: 6px 12px 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
                     color: var(--body); font-size: 13px; font-weight: 500; }
.account > summary::-webkit-details-marker { display: none; }
/* The marker is decoration: the summary already tells a screen reader whether it is open. */
.account > summary::after { content: "\25BE"; content: "\25BE" / ""; color: var(--muted); }
.account[open] > summary::after { content: "\25B4"; content: "\25B4" / ""; }
.account > summary:hover, .account[open] > summary { color: var(--ink); border-color: var(--accent); }
.account-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; width: max-content;
                 min-width: 13rem; max-width: calc(100vw - 32px); padding: 6px; background: var(--panel);
                 border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
                 box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--bg) 80%, transparent); }
.account-panel ul { list-style: none; margin: 0 0 6px; padding: 0 0 6px; border-bottom: 1px solid var(--line); }
.account-panel a { display: block; padding: 9px 10px; border-radius: 8px; color: var(--body); font-size: 14px;
                   text-decoration: none; }
.account-panel a:hover { background: var(--raised); color: var(--ink); }
.account-panel a[aria-current="page"] { color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.account-panel form { margin: 0; }
.account-panel button { width: 100%; justify-content: flex-start; padding: 8px 9px; border-color: transparent;
                        border-radius: 8px; color: var(--body); font-size: 14px; font-weight: 500; }
.account-panel button:hover { background: var(--raised); border-color: transparent; color: var(--ink); }

nav.main { display: flex; gap: 2px; padding: 10px 0 0; flex-wrap: wrap; }
nav.main a {
  position: relative; padding: 9px 12px 12px; text-decoration: none; color: var(--muted);
  font-size: 14px; font-weight: 500; border-radius: 8px 8px 0 0;
}
nav.main a:hover { color: var(--ink); }
nav.main a.on { color: var(--ink); }
nav.main a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px;
                       border-radius: 2px; background: var(--gradient); }
nav.main a b { font-weight: 600; color: var(--accent); margin-left: 2px; font-variant-numeric: tabular-nums; }

main.wrap { padding-top: 32px; padding-bottom: 72px; counter-reset: section; }

/* -- type ---------------------------------------------------------------------------------- */
/* Section eyebrows, numbered down the page: "01 Where the money is stuck". */
h2 { font: 600 13px/1.3 var(--sans); letter-spacing: 0.01em; color: var(--ink); margin: 40px 0 14px;
     display: flex; align-items: baseline; gap: 10px; }
main h2::before { counter-increment: section; content: counter(section, decimal-leading-zero);
                  font: 700 12px/1 var(--sans); color: var(--accent); letter-spacing: 0.04em;
                  font-variant-numeric: tabular-nums; }
h2:first-child { margin-top: 0; }
h2 .count { margin-left: 2px; }
.headline { font: 500 26px/1.25 var(--sans); letter-spacing: -0.025em; color: var(--ink); margin: 0 0 8px; }
.sub { color: var(--muted); font-size: 13px; margin: 0; }
.muted, tr.muted td { color: var(--muted); }
.empty { color: var(--muted); font-style: normal; padding: 14px 0; }
.eyebrow { font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* A page's name over its headline, where the headline is a sentence rather than a name. */
.panel > .eyebrow { margin: 0 0 12px; }

/* -- surfaces ------------------------------------------------------------------------------ */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.panel h3 { margin: 0 0 4px; font: 600 15px/1.3 var(--sans); color: var(--ink); letter-spacing: -0.01em; }
.panel .why { color: var(--muted); font-size: 13px; margin: 0 0 18px; max-width: 60ch; }
.stack { display: grid; gap: 14px; }
.task { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.task h3 { margin: 0 0 4px; font: 600 15px/1.35 var(--sans); color: var(--ink); }
.task .meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; }

/* A notice: what the last click did. Said once, in green. */
.saved { border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok);
         background: color-mix(in srgb, var(--ok) 7%, var(--panel)); padding: 11px 16px;
         border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 14px; }
/* A press that can be taken back offers it beside what it said, on the same line when it fits. */
.saved form.undo { display: inline-block; margin: 0 0 0 10px; vertical-align: middle; }
.saved form.undo button { padding: 4px 12px; font-size: 13px; }
/* A banner says something about the state of things: periwinkle when it is information,
   the warm note when something is wrong. */
.banner { border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
          background: color-mix(in srgb, var(--accent) 7%, var(--panel)); color: var(--body);
          padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; }
.banner[role=alert] { border-color: color-mix(in srgb, var(--late) 35%, transparent);
                      background: var(--late-bg); color: var(--late); }
.banner a { color: inherit; font-weight: 600; }
.banner-line { margin: 0; }
.banner-line + .banner-line { margin-top: 6px; }
.upkeep { margin-top: 32px; }
/* What runs overnight: one row per job, the job on the left, how it went and what it did
   on the right. The rows' words come from housekeeping.overnight. */
.overnight { margin-top: 32px; }
.overnight-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.overnight-head button { padding: 5px 14px; font-size: 13px; }
.overnight-jobs { list-style: none; margin: 0; padding: 0; }
.overnight-jobs li { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); gap: 4px 18px;
                     padding: 12px 0; border-top: 1px solid var(--line); }
.overnight-jobs .job-name { grid-row: span 2; color: var(--ink); font-weight: 500; }
.overnight-jobs .job-state { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.overnight-jobs .job-when { color: var(--muted); font-size: 13px; }
.overnight-jobs .job-said { color: var(--body); font-size: 14px; }
.job-ok { color: var(--tone-done); background: var(--tone-done-bg); }
.job-bad { color: var(--late); background: var(--late-bg); }
.job-quiet { color: var(--tone-stopped); background: var(--tone-stopped-bg); }
.refused { color: var(--late); font-size: 13px; }

/* -- controls ------------------------------------------------------------------------------ */
select, input[type=text], input[type=search], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=file], textarea {
  font: 400 14px/1.4 var(--sans); padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink);
}
textarea { width: 100%; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--faint); }
select:hover, input:hover, textarea:hover { border-color: #3a4867; }
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 1px; border-color: transparent; border-radius: var(--radius-sm); }
input[type=radio], input[type=checkbox] { accent-color: var(--accent); }

button, a.button {
  display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.2 var(--sans);
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink); cursor: pointer; text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
button:hover, a.button:hover { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.primary, a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.primary:hover, a.button.primary:hover { background: #a5b4fc; border-color: #a5b4fc; color: var(--on-accent); }
button:disabled { opacity: 0.5; cursor: default; }

.field { display: grid; gap: 6px; margin-bottom: 14px; align-content: start; }
.field label, legend.field { font-size: 13px; color: var(--muted); font-weight: 500; }
.field small { color: var(--muted); font-size: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
form.filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
form.filters label { color: var(--muted); font-size: 13px; }
/* What a narrowed register is showing, said above it, with the way back to all of it. */
p.showing { margin: -4px 0 12px; }

.choices { display: grid; gap: 10px; margin: 4px 0 14px; }
.choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline;
          padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer;
          background: var(--raised); }
.choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.choice:has(input:disabled) { cursor: default; opacity: 0.6; }
.choice span { font-weight: 600; color: var(--ink); }
.choice small { grid-column: 2; color: var(--muted); font-size: 13px; }
.copy-box { font: 13px/1.6 var(--mono); min-height: 12rem; }

/* -- a task's answers: each its own button, so one press records it and finishes the task --- */
.answers { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }
button.answer { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border-radius: var(--radius-sm);
                padding: 11px 16px; background: var(--raised); }
button.answer.primary { background: var(--accent); }
button.answer small { font: 400 12px/1.4 var(--sans); color: var(--muted); }
button.answer.primary small { color: var(--on-accent); }
button.answer.chosen { border-color: var(--accent); }
.answers-lead { margin: 14px 0 6px; }
/* Text nobody sends -- a call script, what to look for in ezyVet -- as sentences, and the facts
   to find the claim by as a list, rather than in a box of typewriter letters like an email. */
.task-text p { margin: 10px 0; max-width: 80ch; }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 12px 0;
           padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
dl.facts dt { color: var(--muted); font-size: 13px; }
dl.facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Drawn only by copy.js, so a page without it never shows a button that does nothing. */
.copy-button { margin: 12px 0 -4px; padding: 6px 14px; font-size: 13px; }
details.close-it { margin-top: 18px; color: var(--muted); font-size: 13px; }
details.close-it > summary { cursor: pointer; color: var(--link); font-size: 14px; }
details.close-it form { margin-top: 10px; max-width: 34rem; }

/* -- This week: the book in a line, then a job to a line ------------------------------------
   The page the app opens on. Each job is one row of one panel: how many, what and why, the
   money, and one button, the first job's the page's only primary one. Built for a person who
   has a minute between consultations, so nothing on a row needs reading twice. */
.week-money { padding: 22px 26px; }
.week-money .eyebrow { margin: 0 0 10px; }
.week-money h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 8px;
                 font: 500 18px/1.3 var(--sans); color: var(--body); letter-spacing: -0.01em; }
.week-money h2::before { content: none; counter-increment: none; }
.week-money .money { font: 400 46px/1 var(--serif); font-style: italic; letter-spacing: -0.01em; color: var(--ink);
                     text-decoration: none; }
.week-money .money:hover { color: var(--link); }
.week-money .sub { font-size: 14px; }
ol.jobs { list-style: none; margin: 16px 0 0; padding: 0; background: var(--panel); border: 1px solid var(--line);
          border-radius: var(--radius); }
.job { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 9.5rem 13rem; gap: 4px 20px; align-items: center;
       padding: 16px 22px 16px 10px; border-top: 1px solid var(--line); }
.job:first-child { border-top: none; }
.job-n { text-align: center; font: 400 36px/1 var(--serif); font-style: italic; color: var(--ink);
         font-variant-numeric: lining-nums; }
.job-n small { display: block; margin-top: 4px; font: 600 10px/1.4 var(--sans); font-style: normal;
               letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.job-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 99px;
            font: 700 18px/1 var(--sans); font-style: normal; color: var(--tone-ours); background: var(--tone-ours-bg); }
.job h3 { margin: 0; font: 600 16px/1.3 var(--sans); color: var(--ink); letter-spacing: -0.01em; }
.job-line { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.job-note { margin: 6px 0 0; color: var(--body); font-size: 13px; }
.job-note.warn { color: var(--tone-ours); }
.job-note.warn a { color: inherit; font-weight: 600; }
.job-money { text-align: right; font-variant-numeric: tabular-nums; }
.job-money .amount { display: block; color: var(--ink); font-size: 15px; white-space: nowrap; }
.job-money .late-days { font-size: 12px; }
.job-go { justify-self: end; }
.job-go form { margin: 0; }
.job-go .button, .job-go button { white-space: nowrap; }
.week-done { margin-top: 16px; }
/* A list's work in one press (_work.html, bulk.py): two cards, drafting and sending in a batch, the
   one this practice can press lit; then what a press does not do, counted, with where it is done. */
.work { margin: 16px 0; padding: 20px 22px; }
.work h2 { margin: 0 0 4px; font: 600 18px/1.3 var(--sans); color: var(--ink); }
.work h2::before { content: none; counter-increment: none; }
.work-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 14px 0 0; }
.work-card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 16px 18px;
             border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); }
.work-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.work-card h3 { margin: 0; font: 600 15px/1.3 var(--sans); color: var(--ink); display: flex; gap: 8px; align-items: center; }
.work-card p { margin: 0; font-size: 14px; color: var(--body); }
.work-card form { margin: 4px 0 0; }
.work-card .button, .work-card button { margin-top: 4px; }
.work-step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 99px;
             font: 600 12px/1 var(--sans); color: var(--on-accent); background: var(--muted); }
.work-card.on .work-step { background: var(--accent); }
.work-note { margin: 12px 0 0; font-size: 13px; color: var(--body); }
.work .work-else-title { margin: 20px 0 6px; font: 600 11px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
                   color: var(--muted); }
.work-else { list-style: none; margin: 0; padding: 0; }
.work-else li { padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.work-else li:first-child { border-top: none; }
.work-n { display: inline-block; min-width: 2.2em; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* The assistant (assistant.html): the conversation, each answer's buttons under it, and the box. */
.ask-head { margin-bottom: 14px; }
.ask-head .headline { margin: 0 0 6px; }
.ask-lines { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ask-line { max-width: 46rem; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line);
            background: var(--panel); }
.ask-line.from-person { align-self: flex-end; background: var(--raised); border-color: var(--line-strong); }
.ask-who { margin: 0 0 4px; font: 600 11px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
           color: var(--muted); }
.ask-text { white-space: pre-line; color: var(--body); font-size: 15px; }
.from-person .ask-text { color: var(--ink); }
.ask-offers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ask-offers form { margin: 0; }
.ask-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 14px 16px; }
.ask-form textarea { width: 100%; resize: vertical; min-height: 3rem; }
.ask-form .refused { grid-column: 1 / -1; margin: 0; }
.ask-examples { margin: 14px 0 0; }
.ask-examples summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.ask-examples ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ask-examples form { margin: 0; }
.link-button { padding: 6px 14px; font-size: 14px; }
.ask-clear { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; font-size: 13px; }
/* This week's ask box: one line, under the money. */
.week-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 14px 0 0; }
.week-ask input { width: 100%; }
/* Get set up: what a practice does once, until it is done (this_week.set_up). The steps left are
   rows like the jobs; the ones done are a line at the foot, ticked. */
.setup, .start-here { margin-top: 16px; padding: 18px 22px; }
.setup h2, .start-here h2 { margin: 0 0 4px; font: 600 16px/1.3 var(--sans); color: var(--ink); }
.setup h2::before, .start-here h2::before { content: none; counter-increment: none; }
.setup-count { color: var(--muted); font-size: 13px; font-weight: 500; }
.setup-steps, .start-list { list-style: none; margin: 8px 0 0; padding: 0; }
.setup-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center;
              padding: 12px 0; border-top: 1px solid var(--line); }
.setup-step:first-child, .start-item:first-child { border-top: none; }
.setup-step h3 { margin: 0; font: 600 15px/1.35 var(--sans); color: var(--ink); }
.setup-step p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.setup-go, .start-go { justify-self: end; }
.setup-go .button, .start-go .button { white-space: nowrap; }
.setup-done { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted);
              font-size: 13px; }
.setup-done::before { content: "\2713  "; content: "\2713  " / ""; color: var(--ok); }
/* Start here: when there is more than anybody does in a sitting, the first five (this_week.start_here). */
.start-here .sub { max-width: 80ch; }
.start-item { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 7rem; gap: 4px 20px; align-items: center;
              padding: 10px 0; border-top: 1px solid var(--line); }
.start-what .what { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }
.start-what .about { display: block; color: var(--muted); font-size: 13px; }
.start-money { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.start-go .button { padding: 7px 16px; }
.jobs-eyebrow { margin: 24px 2px 0; }
@media (max-width: 760px) {
  .setup-step { grid-template-columns: minmax(0, 1fr); }
  .setup-go { justify-self: start; }
  /* What to do on its own line, then the money and the button on one. */
  .start-item { grid-template-columns: minmax(0, 1fr) auto; }
  .start-what { grid-column: 1 / -1; }
  .start-money { text-align: left; }
}
.week-more { margin: 16px 2px 0; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .job { grid-template-columns: 3.6rem minmax(0, 1fr); padding: 14px 16px 14px 6px; }
  .job-n { font-size: 28px; }
  .job-money, .job-go { grid-column: 2; justify-self: start; text-align: left; }
  .job-money .amount { display: inline; margin-right: 8px; }
  .week-money .money { font-size: 38px; }
}

/* -- the Numbers page --------------------------------------------------------------------- */
/* The big numbers are italic serif, the brand's stat style; proportional figures, since
   tabular ones look loose at this size. */
.hero { font: 400 68px/1 var(--serif); font-style: italic; letter-spacing: -0.01em; color: var(--ink); margin: 10px 0 0; }
.hero-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.hero-panel { position: relative; overflow: hidden; padding: 28px 28px 24px; }
.hero-panel .k, .tile .k { color: var(--muted); font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.12em; }
.meter { height: 8px; border-radius: 999px; background: var(--band-track); overflow: hidden; margin: 22px 0 10px; }
.meter > span { display: block; height: 100%; background: var(--gradient); border-radius: 999px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.tile .n { font: 400 34px/1.05 var(--serif); font-style: italic; color: var(--ink); margin-bottom: 8px; }
a.tile-link { color: var(--ink); text-decoration: none; transition: border-color 0.15s; }
a.tile-link:hover, a.tile-link:focus-visible { border-color: var(--accent); }
a.tile-link .k::after { content: " \2192"; color: var(--accent); }
.tile .note { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 8px 0 0; }

.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }

/* Bars: scaled to the largest value, thin, rounded at the data end and square at the
   baseline they grow from. The value sits outside the bar, always, so a short bar never
   has to carry a number it would clip. */
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: minmax(6.5rem, 9rem) 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.bar-label { color: var(--muted); }
.bar-track { height: 14px; display: flex; align-items: center; }
.bar-fill { height: 100%; border-radius: 0 4px 4px 0; min-width: 0; }
.bar-value { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.bar-sub { color: var(--muted); font-size: 12px; }
/* A bar that leads to its claims: the label is the link, and it stretches over the whole
   row so the bar itself answers to a click. */
.bar-link { position: relative; }
.bar-link .bar-label a::after { content: ""; position: absolute; inset: -4px; border-radius: 6px; }
.bar-link:hover .bar-label a, .bar-link .bar-label a:focus-visible { text-decoration-color: var(--link); }
.bar-link .bar-label a:focus-visible { outline: none; }
.bar-link .bar-label a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 0; }
/* The insurers too small to draw one by one: one bar, which opens to name them. */
details.others > summary { list-style: none; cursor: pointer; }
details.others > summary::-webkit-details-marker { display: none; }
details.others > summary .bar-label::after { content: " \25B8"; content: " \25B8" / ""; color: var(--muted); }
details.others[open] > summary .bar-label::after { content: " \25BE"; content: " \25BE" / ""; }
details.others > summary:hover .bar-label, details.others > summary:focus-visible .bar-label { color: var(--link); }
.others-list { list-style: none; margin: 10px 0 0; padding: 0 0 0 12px; border-left: 1px solid var(--line); }
.others-list li { display: grid; grid-template-columns: 1fr auto 4.5rem; gap: 12px; align-items: baseline;
                  font-size: 13px; padding: 4px 0; }
.others-list .bar-sub { text-align: right; }
/* The line: SVG for the mark, HTML for every label, so the two never disagree about
   where a point is and the text is real text at a real size however wide the panel. */
.trend { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; margin: 0; }
.trend-axis { position: relative; width: 3.4rem; }
.trend-axis span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px;
                   color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trend-plot { position: relative; }
.trend-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.trend-area { fill: var(--accent); opacity: 0.10; }
.trend-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.trend-hit { fill: transparent; }
.trend-x { grid-column: 2; position: relative; height: 1.2rem; margin-top: 8px; }
.trend-x span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
/* Above or below the last point, never level with it: level, the line runs through it. */
.trend-end { position: absolute; margin-left: -4px; font-size: 12px; font-variant-numeric: tabular-nums;
             white-space: nowrap; color: var(--ink); }
.trend-end.above { transform: translate(-100%, calc(-100% - 8px)); }
.trend-end.below { transform: translate(-100%, 8px); }
/* The hover readout (static/trend.js), which makes these itself: none of them is in the
   page without the script. A line down from the top at the report nearest the pointer,
   the point marked, a ring on the point with keyboard focus, and a label with its date
   and total at the top of the plot, on the side of the line with more room. Placed by the percentages charts.py computed. */
.trend-hit:focus, .trend-hit:focus-visible { outline: none; }  /* .trend-ring is the focus ring */
.trend-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--muted);
               pointer-events: none; }
.trend-mark { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
              background: var(--accent); box-shadow: 0 0 0 2px var(--panel); pointer-events: none; }
/* The focused point's ring: its own element, so a pointer elsewhere never takes it away. */
.trend-ring { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
              box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); pointer-events: none; }
.trend-readout { position: absolute; top: 0; margin-left: 10px; display: grid; gap: 2px; padding: 6px 10px;
                 background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
                 font-size: 12px; white-space: nowrap; pointer-events: none; }
.trend-readout.flip { transform: translateX(calc(-100% - 20px)); }
.trend-readout-date { color: var(--muted); }
.trend-readout-amount { color: var(--ink); font-variant-numeric: tabular-nums; }
[hidden].trend-cross, [hidden].trend-mark, [hidden].trend-ring, [hidden].trend-readout { display: none; }
details.numbers { margin-top: 14px; }
details.numbers summary { color: var(--muted); font-size: 12px; cursor: pointer; }
details.numbers table { margin-top: 10px; }
details.numbers tr.on td { background: var(--raised); color: var(--ink); }

/* -- tables -------------------------------------------------------------------------------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); font-size: 14px;
        border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; }
td { color: var(--body); }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: color-mix(in srgb, var(--raised) 60%, var(--panel)); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { color: var(--ink); }
tr.late td { background: var(--late-bg); }
tbody tr.late:hover td { background: #281f36; }
.late-days { color: var(--late); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Claim rows: "Late by" is the number that matters, with its allowance under it, lighter;
   "Waiting" is lighter too. */
td.num.waiting { color: var(--muted); }
/* A table's caption, saying what its columns mean a sentence a line, just above it. Outside
   the table, so it wraps to a phone's width while a wide table scrolls under it. */
.caption { margin: 20px 0 12px; color: var(--muted); font-size: 13px; }
.caption p { margin: 0 0 4px; max-width: 90ch; }
/* Under the insurers' actual time: how many claims it was measured on. */
.measured { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; }
.allowance { display: block; color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
p.explain { margin: 0 0 12px; max-width: 80ch; }
/* A header that sorts the register: a link that looks like the header it is. */
th a.sort { color: inherit; text-decoration: none; white-space: nowrap; }
th a.sort:hover, th a.sort.on { color: var(--ink); }
.sort-arrow { margin-left: 4px; color: var(--accent); }
/* A table wider than a phone scrolls inside itself rather than dragging the page sideways. */
/* Positioned, so the words hidden for a screen reader inside a cell scroll with the table
   rather than widening the page from wherever the cell happens to be. */
.scroll-x { overflow-x: auto; border-radius: var(--radius); position: relative; }
.scroll-x > table { min-width: 36rem; }

/* -- pills --------------------------------------------------------------------------------- */
.tag { display: inline-block; font: 600 11px/1.6 var(--sans); padding: 1px 9px; border-radius: 999px;
       border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; letter-spacing: 0.02em; }
.tag.us { border-color: color-mix(in srgb, var(--late) 45%, transparent); color: var(--late); }
a.tag { text-decoration: none; }
a.tag:hover, a.tag:focus-visible { border-color: currentColor; }
/* A claim's status: the words carry the meaning, the colour only says whose move it is. */
.badge { display: inline-block; font: 600 12px/1.6 var(--sans); padding: 1px 10px; border-radius: 999px;
         white-space: nowrap; vertical-align: baseline; }
.badge-ours { color: var(--tone-ours); background: var(--tone-ours-bg); }
.badge-theirs { color: var(--tone-theirs); background: var(--tone-theirs-bg); }
.badge-done { color: var(--tone-done); background: var(--tone-done-bg); }
.badge-stopped { color: var(--tone-stopped); background: var(--tone-stopped-bg); }
a.ref { white-space: nowrap; font-variant-numeric: tabular-nums; }
.count { display: inline-block; min-width: 1.7em; padding: 0 7px; border-radius: 999px; font: 600 12px/1.6 var(--sans);
         text-align: center; background: var(--raised); border: 1px solid var(--line-strong); color: var(--muted);
         letter-spacing: 0; text-transform: none; }

pre.draft { white-space: pre-wrap; word-break: break-word; background: var(--bg); border: 1px solid var(--line);
            border-radius: var(--radius-sm); padding: 14px 16px; margin: 12px 0; color: var(--body);
            font: 13px/1.65 var(--mono); }

/* -- the task list ------------------------------------------------------------------------- */
.subnav { display: flex; gap: 8px; margin: 20px 0 6px; flex-wrap: wrap; }
.subnav a { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted);
            text-decoration: none; font-size: 14px; font-weight: 500; background: transparent; }
.subnav a:hover { color: var(--ink); border-color: #3a4867; }
.subnav a.on { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.replies { margin: 10px 0 0; padding-left: 18px; }
.replies li { margin: 5px 0; }
.task-group .why { color: var(--muted); font-size: 13px; margin: -6px 0 12px; }
/* Spaced as sections, since each one's heading is its first child and h2:first-child
   takes the heading's own margin away. */
.task-group { margin-top: 40px; }
.task-group:first-of-type { margin-top: 24px; }
.task-group .banner { margin-bottom: 12px; }
.by-insurer { margin: 0 0 14px; }
.by-insurer .sub { margin-bottom: 8px; }
.by-insurer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.by-insurer a { display: inline-block; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
                font-size: 13px; text-decoration: none; color: var(--body); }
.by-insurer a:hover, .by-insurer a:focus-visible { border-color: var(--accent); color: var(--ink); }
/* A group or section that folds: the heading is the summary, so a folded one still says
   its size. The marker is drawn after the words rather than the browser's own triangle. */
details.fold > summary { list-style: none; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2 { margin-bottom: 14px; }
/* The marker is decoration: the summary already tells a screen reader whether it is open, so
   the alternative text after the slash is empty and the triangle is not read out as part of
   the heading. The first declaration is for a browser that does not know that syntax. */
details.fold > summary h2::after { content: "\25BE"; content: "\25BE" / ""; color: var(--muted); font-weight: 400; }
details.fold:not([open]) > summary h2::after { content: "\25B8"; content: "\25B8" / ""; }
details.fold > summary:hover h2, details.fold > summary:focus-visible h2 { color: var(--link); }
details.fold:not([open]) > summary h2 { margin-bottom: 0; }
.more { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
/* The weekly summary: the week on one screen. Four blocks, in two columns on a wide screen, a
   line to a claim; a claim's whole row, with its allowance and next move, is the register's. */
.week-head { padding: 16px 22px; }
.week-head .headline { margin: 8px 0 4px; font-size: 22px; }
.week-head .sub { margin: 0; }
.week-tiles { margin: 12px 0 16px; }
.week-tiles .tile { padding: 12px 16px; }
.week-tiles .tile .n { font-size: 28px; margin-bottom: 4px; }
.week-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; align-items: start; }
@media (min-width: 1100px) { .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.week-grid + details.fold.week { margin-top: 18px; }
details.fold.week > summary h2 { margin-bottom: 6px; }
.week-intro { margin: 0 0 8px; }
.week-grid .scroll-x > table.week-rows { min-width: 0; }
table.week-rows th, table.week-rows td { padding: 7px 8px; vertical-align: middle; }
table.week-rows .badge, table.week-rows td.num, table.week-rows .due { white-space: nowrap; }
table.week-rows .under { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
table.week-rows a.button { padding: 4px 10px; font-size: 13px; white-space: nowrap; }
.batch-actions { margin: 0 0 14px; }
.batch-actions .row-actions { margin-top: 8px; }
.batch-actions .row-actions + .sub { margin-top: 8px; }
/* One job's list, under its own name, straight from its button on This week. */
.list-head { margin: 4px 0 8px; }
/* What stands in the way of a group's rows, said once and naming each insurer. */
.banner.setup { border-color: color-mix(in srgb, var(--tone-ours) 35%, transparent);
                background: var(--tone-ours-bg); color: var(--tone-ours); margin: 0 0 14px; }
/* The insurers a group's chases go to, one email each. */
table.insurer-chases { margin: 4px 0 14px; }
table.insurer-chases td { vertical-align: middle; }
table.insurer-chases .under { display: block; color: var(--muted); font-size: 12px; }
table.insurer-chases a.button, table.insurer-chases button { padding: 5px 14px; font-size: 13px; white-space: nowrap; }
table.insurer-chases form { margin: 0; }
.scroll-x > table.insurer-chases { min-width: 30rem; }
details.one-by-one, details.claims-fold, details.record-other { margin: 0 0 14px; }
details.one-by-one > summary, details.claims-fold > summary, details.record-other > summary {
  cursor: pointer; color: var(--link); font-size: 14px; }
details.one-by-one[open] > summary, details.claims-fold[open] > summary, details.record-other[open] > summary {
  margin-bottom: 10px; }
details.chase-claims, details.record-other { margin-top: 28px; }
/* How a page works, for whoever wants to know, folded at its foot. */
details.how-it-works { margin-top: 40px; color: var(--muted); font-size: 13px; }
details.how-it-works > summary { cursor: pointer; color: var(--link); font-size: 14px; }
details.how-it-works p { margin: 10px 0 0; max-width: 80ch; }
details.how-it-works form { margin-top: 12px; }
details.how-it-works.in-panel { margin: 4px 0 14px; }
form.inline { display: inline; margin: 0; }
table.tasks .how { color: var(--muted); font-size: 13px; margin-top: 4px; max-width: 42ch; }
table.tasks .c-tick { width: 1%; padding-right: 0; }
table.tasks .c-tick input { width: 18px; height: 18px; margin: 2px 0 0; }
/* The insurer's page: where a chase goes is the first thing on it, in large type. */
.insurer-top .route { font-size: 18px; color: var(--ink); margin: 16px 0 6px; overflow-wrap: anywhere; }
.insurer-top .route a { font-size: 14px; margin-left: 8px; }
table.breakdown th[scope="row"] { text-transform: none; letter-spacing: 0; font: inherit; }
table.breakdown td, table.breakdown th { white-space: nowrap; }
table.breakdown tfoot th, table.breakdown tfoot td { border-bottom: 0; }
table.insurer-claims .c-tick { width: 1%; padding-right: 0; }
table.insurer-claims .c-tick input { width: 18px; height: 18px; margin: 2px 0 0; }
/* A person's word about a claim (outcomes.py): folded under the claim's next step, so the
   step stays the first thing read, and opened with the words kept when it is refused. */
details.record-outcome { margin-top: 14px; }
/* "What did the insurer say?" looks like the button it is, not a footnote beside "Add note". */
details.record-outcome > summary { cursor: pointer; display: inline-flex; font: 600 14px/1.2 var(--sans);
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); }
details.record-outcome > summary:hover { border-color: var(--accent); }
details.record-outcome[open] > summary { border-color: var(--accent); }
details.record-outcome form { margin-top: 12px; }
details.record-outcome .choices { margin: 8px 0 12px; }
details.left-out { margin-top: 14px; }
details.left-out summary { cursor: pointer; color: var(--link); font-size: 14px; }
details.left-out ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
details.left-out li { margin: 4px 0; }
details.email { margin-top: 14px; }
details.email summary { cursor: pointer; color: var(--link); font-size: 14px; }
table.tasks td .badge { margin-top: 4px; }
table.tasks tr.client-head th { background: var(--raised); color: var(--ink); font: 600 14px/1.4 var(--sans);
                                letter-spacing: 0; text-transform: none; padding-top: 12px; }
table.tasks tr.client-head .muted { font-weight: 400; }
table.tasks a.button { padding: 5px 12px; font-size: 13px; white-space: nowrap; }
table.tasks .c-who .muted, table.tasks .c-due .muted { display: block; }
table.tasks .c-owed, table.tasks .c-due { white-space: nowrap; }
@media (max-width: 640px) {
  .scroll-x > table.tasks { min-width: 0; }
  table.tasks, table.tasks tbody { display: block; }
  table.tasks thead { display: none; }
  table.tasks tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
                   grid-template-areas: "claim open" "who who" "insurer insurer" "due owed";
                   padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.tasks tr:last-child { border-bottom: none; }
  table.tasks tr.client-head { display: block; padding: 12px 14px 4px; background: var(--raised); }
  table.tasks tr.client-head th { display: block; padding: 0; border: none; background: none; }
  table.tasks td { display: block; padding: 0; border: none; }
  table.tasks .c-claim { grid-area: claim; } table.tasks .c-open { grid-area: open; }
  table.tasks .c-who { grid-area: who; } table.tasks .c-insurer { grid-area: insurer; }
  table.tasks .c-due { grid-area: due; } table.tasks .c-owed { grid-area: owed; align-self: end; }
  table.tasks.ticks tr { grid-template-columns: auto minmax(0, 1fr) auto;
                         grid-template-areas: "tick claim open" "tick who who" "tick insurer insurer" "tick due owed"; }
  table.tasks .c-tick { grid-area: tick; width: auto; padding-right: 4px; }
  table.tasks .c-who .muted, table.tasks .c-due .muted { display: inline; }
  table.tasks .c-due { white-space: normal; }
  /* A decision's three choices get a line of their own under the row: beside the reference they
     squeezed it to nothing, and a press meant for one claim could land on the next. */
  table.tasks tr:has(form.decide-here) { grid-template-areas: "claim claim" "who who" "insurer insurer" "due owed" "open open"; }
  table.tasks tr:has(form.decide-here) .c-open { margin-top: 8px; }
  table.tasks form.decide-here { justify-content: flex-start; }
}

.guess { margin: 12px 0 8px; }
form.choose { margin-top: 10px; }
form.choose label { font-size: 13px; color: var(--muted); }

/* -- one claim ----------------------------------------------------------------------------- */
.crumbs { margin-bottom: 10px; }
.claim-status { margin: 0; display: flex; gap: 4px 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.next p { margin: 0; }
.next p + p { margin-top: 8px; }
.next .banner { margin-bottom: 12px; }
.claim-cols { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 32px 28px; margin-top: 32px; }
.note-form { margin-bottom: 16px; }
.note-form .field { margin-bottom: 8px; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-strong); }
.event { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 14px; padding: 0 0 18px 16px;
         position: relative; font-size: 14px; }
.event::before { content: ""; position: absolute; left: -5px; top: 7px; width: 9px; height: 9px;
                 border-radius: 99px; background: var(--faint); box-shadow: 0 0 0 3px var(--bg); }
.event-status::before { background: var(--accent); }
.event-note::before { background: var(--tone-ours); }
.event-email::before { background: var(--tone-theirs); }
.event .when { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.event .when span { display: block; }
.event .kind { display: block; color: var(--muted); font: 600 10px/1.6 var(--sans); text-transform: uppercase; letter-spacing: 0.12em; }
.event p { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.event-note p { color: var(--ink); }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); }
.contact p { margin: 0 0 6px; overflow-wrap: anywhere; }
.contact .banner { margin: 6px 0 8px; }
.results .matched { color: var(--muted); font-size: 12px; }

/* A batch's page while its emails are going: static/batch.js says it is keeping it up to date. */
.refreshing { margin: 10px 2px 0; }

/* -- the foot of every page: the endorsement, once ------------------------------------------ */
footer.foot { padding: 0 0 28px; margin-top: 32px; }
footer.foot::before { content: ""; display: block; height: 1px; background: var(--fade); }
.foot-line { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px;
             color: var(--muted); font-size: 12px; }

/* -- phones -------------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .claim-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .hide-narrow { display: none; }
  nav.main a { padding: 8px 9px 11px; }
  nav.main a.on::after { left: 9px; right: 9px; }
  .brand .rule { display: none; }
  /* The search box takes a line of its own rather than squeezing the practice's name. */
  .search { order: 3; flex-basis: 100%; margin-left: 0; }
  .search input[type=search] { width: 100%; }
  .suggest { width: 100%; }
  .search ~ .account { margin-left: auto; }
  .account-name { max-width: 10rem; }
  .panel { padding: 18px; }
  .hero { font-size: 50px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 14px 14px; }
  .tile .n { font-size: 26px; }
}
@media (max-width: 520px) {
  .event { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .event .when span { display: inline; margin-left: 6px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd { margin-bottom: 8px; }
  .overnight-jobs li { grid-template-columns: minmax(0, 1fr); }
  .overnight-jobs .job-name { grid-row: auto; }
  .bar-row { grid-template-columns: 1fr auto; }
  /* The name and the money share a line, and the bar runs the full width under them. */
  .bar-track { grid-column: 1 / -1; order: 3; }
}

/* -- the pages before signing in: one card on the ground ---------------------------------- */
body.plain { min-height: 100vh; display: flex; flex-direction: column; }
.plain-top { padding: 22px 24px; width: 100%; }
.plain-main { flex: 1; display: grid; place-items: center; padding: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 28px; width: 100%; max-width: 400px; }
.card h1 { font: 500 22px/1.25 var(--sans); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.card p { margin: 0 0 14px; }
.card .eyebrow + h1 { margin-top: 10px; }
.card p.sub { margin: 0 0 20px; }
.card label { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.card input:not([type=hidden]) { width: 100%; margin-bottom: 16px; }
.card small { display: block; color: var(--muted); font-size: 12px; margin: -10px 0 16px; }
.card button { width: 100%; justify-content: center; padding: 11px 18px; }
.card .error { border: 1px solid color-mix(in srgb, var(--late) 35%, transparent); background: var(--late-bg);
               color: var(--late); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13px; }
.card .done { border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok);
              background: color-mix(in srgb, var(--ok) 7%, var(--panel)); padding: 10px 14px;
              border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
.card .foot-links { margin: 18px 0 0; font-size: 13px; text-align: center; color: var(--muted); }
.card nav.links { display: flex; gap: 10px; flex-wrap: wrap; }

/* The sign-in page: the brand on the left, the form on the right. */
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center;
         max-width: 1080px; width: 100%; }
.pitch h2 { display: block; font: 500 56px/1.02 var(--sans); letter-spacing: -0.04em; color: var(--ink); margin: 14px 0 18px; }
.pitch h2::before { content: none; }
.pitch h2 i { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.pitch p { color: var(--muted); font-size: 16px; max-width: 42ch; margin: 0 0 22px; }
.live { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--sans); letter-spacing: 0.14em;
        text-transform: uppercase; color: var(--muted); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--ok);
                box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pills .badge { font-size: 12px; }
.pills .sep { color: var(--faint); }
@media (max-width: 820px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pitch h2 { font-size: 40px; }
}

/* A decision's choices on its row of the list, one press each, then the task's page for more. */
form.decide-here { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
form.decide-here button { padding: 6px 12px; font-size: 13px; }
form.decide-here a { font-size: 13px; }

/* A reply about several claims: what it says of each, a line a claim, saved together. */
table.each { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
table.each td { padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; }
table.each .c-said .muted { margin-top: 2px; max-width: 60ch; }
table.each select { min-width: 16rem; max-width: 100%; }
/* What they said of a claim, in their words, under what it means. */
table.each .c-choice input[type=text] { display: block; width: 100%; min-width: 16rem; margin-top: 6px; }
/* On a phone each claim is a card: who, then what they said and their words, the width of the
   screen, rather than a table to scroll sideways past the claim to reach the boxes. */
@media (max-width: 640px) {
  .scroll-x > table.each { min-width: 0; }
  table.each, table.each tbody, table.each tr, table.each td { display: block; }
  table.each tr { padding: 10px 0; border-top: 1px solid var(--line); }
  table.each td { border: none; padding: 2px 0; }
  table.each select, table.each .c-choice input[type=text] { min-width: 0; width: 100%; }
  table.each .c-choice { margin-top: 6px; }
}
/* What the insurer asked, as a person at the practice heard it and wrote it down. */
.said { margin: 0 0 6px; padding: 8px 14px; border-left: 3px solid var(--accent); color: var(--ink);
        font-size: 15px; }