/* ============================================================
   AMCC — CSLB Arbitration

   Brand palette taken from amccenter.com: deep navy #000F27 and
   #001B4E, gold #EF9F19, brass #B9A05C, cool grey #BFC3C9.
   Navy carries the interface; gold is spent only on the things
   that need a person to look at them.

   Charter (transitional serif) for display, Seravek (humanist
   sans) for interface text — both installed on macOS, so the app
   stays self-contained with no webfont downloads.

   One theme only. Hairlines, not shadows.
   ============================================================ */

:root{
  color-scheme: light;

  /* FLAGSHIP — a modern product surface: light neutral ground, crisp white
     cards, near-black ink, one confident blue accent, real depth from shadow. */

  /* warm paper against deep navy ink — printed legal stock, not a cool SaaS
     grey. The neutrals lean toward the palette's warm half on purpose. */
  --paper:#F8F6F2;      /* app ground */
  --paper-2:#FFFFFF;    /* cards / raised surfaces */
  --paper-3:#F0EBE2;    /* hovers / wells / inset tracks */

  /* the accent — AMCC's deep navy, spent on what's interactive */
  --navy:#001b4e;        /* AMCC's navy, off the logo */
  --navy-deep:#00123A;
  --navy-lift:#2A5490;   /* hover / the lighter half of a gradient */

  /* ink — near-black, with a cool grey ramp */
  --ink:#0F1A2B;
  --ink-2:#4A5666;
  --ink-3:#6B7079;

  /* hairline structure */
  --rule:#E7E2D9;
  --rule-2:#D6CFC2;

  /* warm accent, reserved for attention / urgency */
  /* the four brand colours, literal, for fills, bars and borders */
  /* three colours, and only these three */
  --navy-brand:#001b4e;
  --gold:#ef9f19;        /* AMCC's gold, off the logo */
  --brick:#BE3D2A;
  --brick-deep:#8F2A1C;  /* a darker value of the brick, for the last heat step */

  /* the gold stepped dark enough to be small text on white — #F5C45E itself
     is about 1.7:1 and cannot carry a label */
  --gold-ink:#9A6410;

  --clay:#BE3D2A;
  --clay-soft:#FAE7E2;
  --brass:#9A9389;

  /* the dated things carry their own colour, so a week reads at a glance:
     a hearing is not an evidence deadline is not an award */
  --hearing:#001b4e;   --hearing-soft:#E2E6EC;
  --evidence:#ef9f19;  --evidence-soft:#FCEEDA;
  --notice:#1D4878;    --notice-soft:#E4EAF1;
  --award:#BE3D2A;     --award-soft:#FAE7E2;
  --settled:#9A6410;   --settled-soft:#FCEEDA;

  /* glass */
  --glass:rgba(255,255,255,.72);
  --glass-edge:rgba(255,255,255,.85);

  /* depth */
  --shadow-sm:0 1px 2px rgba(14,17,22,.05);
  --shadow:0 1px 3px rgba(14,17,22,.07), 0 1px 2px rgba(14,17,22,.04);
  --shadow-md:0 4px 14px rgba(14,17,22,.08), 0 2px 4px rgba(14,17,22,.04);
  --shadow-lg:0 12px 32px rgba(14,17,22,.12);

  --r:8px;
  --ease:cubic-bezier(.22,.68,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* one distinctive grotesque for the UI, a mono for figures / IDs / labels */
  --f-display:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-type:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family:var(--f-body); font-size:15.5px; line-height:1.6;
  background-color:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0; font-family:var(--f-display); font-weight:600;
  letter-spacing:-.015em; line-height:1.12; text-wrap:balance}
p{margin:0}
button{font:inherit; color:inherit}

/* the label voice: small, medium-weight, gently tracked */
.eyebrow,.status,.amount-label,.pill,.evidence .k,.others th,
.meter-legend,.readout,.dz-hint,.filelist .sz,.divider,.footbar,.wordmark{
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:600;
  font-size:.68rem;
}
h1,h2,h3{letter-spacing:-.02em}

/* ============================================================
   shell
   ============================================================ */
.shell{min-height:100vh; display:flex; align-items:stretch}

/* left sidebar — the app's home rail */
.sidebar{
  position:sticky; top:0; align-self:flex-start;
  height:100vh; flex:none; width:236px;
  display:flex; flex-direction:column; gap:.35rem;
  padding:1.1rem .8rem;
  background:var(--paper-2); border-right:1px solid var(--rule);
}
.side-brand{display:grid; gap:.4rem; padding:.5rem .5rem 1.1rem}
/* AMCC's own wordmark. It is drawn for a white ground, so on the dark theme it
   sits on a light plate rather than being inverted into something that is no
   longer their logo. */
.side-logo{
  display:block; width:100%; max-width:150px; height:auto;
}
:root[data-theme="dark"] .side-logo{
  background:#fff; border-radius:6px; padding:.34rem .4rem;
}
.side-mark{
  flex:none; width:32px; height:32px; border-radius:9px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg,var(--navy),var(--navy-deep));
  font-family:var(--f-display); font-weight:800; font-size:1rem;
  box-shadow:var(--shadow-sm);
}
.side-brand-t strong{display:block; font-family:var(--f-display); font-weight:700;
  font-size:.92rem; letter-spacing:-.01em; line-height:1.2; color:var(--ink)}
.side-brand-t span{display:block; font-size:.72rem; color:var(--ink-3); line-height:1.3;
  padding-left:.15rem; letter-spacing:.02em}

.side-foot{
  margin-top:auto; display:flex; align-items:center; gap:.45rem;
  padding:.7rem .65rem .3rem; border-top:1px solid var(--rule);
}
.side-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;
  box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.side-foot .status{color:var(--ink-3)}

.main-col{flex:1; min-width:0; display:flex; flex-direction:column}
.stage{flex:1; display:flex; align-items:flex-start; justify-content:center;
  padding:3.4rem 3rem 5rem}
.view{width:100%; max-width:760px}

.footbar{
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 3rem; border-top:1px solid var(--rule);
  color:var(--ink-3);
}
.footbar .grow{flex:1}

/* ============================================================
   motion — short, and only on arrival
   ============================================================ */
.view{animation:viewIn .38s var(--ease-out) both}
@keyframes viewIn{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}
.view.leaving{animation:viewOut .16s var(--ease) both}
@keyframes viewOut{
  from{opacity:1} to{opacity:0}
}
.stagger>*{animation:rise .42s var(--ease-out) both}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.07s}
.stagger>*:nth-child(3){animation-delay:.12s}
.stagger>*:nth-child(4){animation-delay:.17s}
.stagger>*:nth-child(5){animation-delay:.22s}
@keyframes rise{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}

/* ============================================================
   landing
   ============================================================ */
.hero{margin-bottom:3rem}
.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  color:var(--ink-3);margin-bottom:1.5rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}
.hero h1{font-size:3.1rem; margin-bottom:1.1rem; letter-spacing:-.028em}
.hero p{color:var(--ink-2); font-size:1.05rem; max-width:33rem}

/* intake bay */
.dropzone{
  position:relative; display:block; width:100%; text-align:left;
  background:var(--paper-2);
  border:1px solid var(--rule-2);
  border-radius:var(--r); padding:2.6rem 2rem;
  cursor:pointer;
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.dropzone:hover{border-color:var(--ink); background:var(--paper-2)}
.dropzone.over{border-color:var(--ink); background:var(--paper-3)}
.dropzone:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

.dz-icon{
  width:40px;height:40px;margin-bottom:1.3rem;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);
  border:1px solid var(--rule-2);
  transition:border-color .22s var(--ease), transform .3s var(--ease-out);
}
.dropzone:hover .dz-icon{border-color:var(--ink);transform:translateY(-2px)}
.dz-icon svg{width:19px;height:19px}
.dz-title{font-family:var(--f-display);font-size:1.35rem;font-weight:600;
  letter-spacing:-.02em;margin-bottom:.35rem}
.dz-sub{color:var(--ink-2); font-size:.94rem}
.dz-hint{color:var(--ink-3); margin-top:1.6rem;
  padding-top:1rem;border-top:1px solid var(--rule)}

.divider{display:flex;align-items:center;gap:.85rem;
  margin:3rem 0 1.6rem;color:var(--ink-3)}
.divider::after{content:"";flex:1;height:1px;background:var(--rule)}

/* the two tracks — told apart by treatment, never by hue alone */
.tracks{display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule)}
.track-card{
  position:relative;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--rule);
  padding:1.8rem 1.6rem 1.7rem 0; cursor:pointer;
  transition:background .22s var(--ease), padding-left .28s var(--ease);
}
.track-card + .track-card{padding-left:1.6rem;border-left:1px solid var(--rule)}
.track-card:hover{background:var(--paper-2)}
.track-card:focus-visible{outline:2px solid var(--ink); outline-offset:-2px}
.track-card .tc-top{margin-bottom:.9rem}
.pill{
  display:inline-block;padding:.32rem .7rem;border-radius:99px;
  border:1px solid var(--rule-2);color:var(--ink-2);
}
.pill.over{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.track-card h3{font-size:1.28rem;letter-spacing:-.022em}
.track-card p{color:var(--ink-2);font-size:.92rem;margin-top:.5rem;max-width:24rem}
.track-card .go{
  margin-top:1.3rem;display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-display);color:var(--ink);font-size:.86rem;font-weight:600;
  border-bottom:1px solid var(--rule-2);padding-bottom:.15rem;
  transition:border-color .22s var(--ease);
}
.track-card:hover .go{border-color:var(--ink)}
.track-card .go span{transition:transform .28s var(--ease)}
.track-card:hover .go span{transform:translateX(4px)}

/* ============================================================
   reading — the one place the interface reports live work
   ============================================================ */
.reading{
  background:var(--paper-2);border:1px solid var(--rule);
  border-radius:var(--r);padding:2.2rem 2rem;
}
.reading-head{display:flex;gap:1.6rem;align-items:flex-start}
.reading h2{font-size:1.5rem;margin:.5rem 0 .4rem;letter-spacing:-.022em}
.reading p{color:var(--ink-2);font-size:.94rem}

.scanner{
  width:64px;height:80px;flex:none;position:relative;overflow:hidden;
  border:1px solid var(--rule-2);border-radius:2px;background:var(--paper);
}
.scanner .line-a{position:absolute;left:10px;right:10px;height:3px;
  background:var(--rule-2)}
.scanner .line-a:nth-child(1){top:14px}
.scanner .line-a:nth-child(2){top:24px;right:22px}
.scanner .line-a:nth-child(3){top:34px}
.scanner .line-a:nth-child(4){top:44px;right:26px}
.scanner .line-a:nth-child(5){top:54px}
.scanner .beam{
  position:absolute;left:0;right:0;height:1px;background:var(--clay);
  animation:scan 1.7s var(--ease) infinite;
}
@keyframes scan{
  0%{transform:translateY(0)} 100%{transform:translateY(80px)}
}
.bar{height:1px;background:var(--rule);overflow:hidden;margin:2rem 0 .9rem}
.bar i{display:block;height:100%;width:0;background:var(--ink);
  transition:width .35s var(--ease)}
.readfoot{display:flex;align-items:baseline;gap:1rem}
.readout{color:var(--ink-3)}
.readfile{margin-left:auto;font-size:.82rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}

/* ============================================================
   result — reads as a record, not a celebration
   ============================================================ */
.result{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);
}
.result-top{padding:2.2rem 2rem 2rem;border-bottom:1px solid var(--rule)}
.result-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.amount-label{color:var(--ink-3)}
.result-head .grow{flex:1}

.verdict-badge{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:grid;place-items:center;margin-left:auto;
  border:1px solid var(--rule-2);color:var(--ink);
  animation:rise .4s var(--ease-out) both;
}
.verdict-badge svg{width:15px;height:15px}
.verdict-badge.warn{border-color:var(--clay);color:var(--clay);
  background:var(--clay-soft)}

.amount{
  font-family:var(--f-display);
  font-size:3.6rem;font-weight:600;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.result h2{font-size:1.9rem;letter-spacing:-.028em;margin-top:.2rem}
.verdict-line{font-size:1rem;color:var(--ink-2);margin-top:1.4rem;max-width:34rem}
.verdict-line b{color:var(--ink);font-weight:600}
.track-name{
  display:inline-block;margin-top:1.2rem;
  font-family:var(--f-display);font-size:.86rem;font-weight:600;
  letter-spacing:.02em;padding:.45rem 1rem;border-radius:99px;
  border:1px solid var(--rule-2);color:var(--ink-2);
}
.track-name.vol{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---- signature: the threshold line ---------------------------------
   Everything turns on $25,000, so the claim is drawn against it. The
   marker is the only coloured thing in the interface. -------------- */
.meter{margin-top:1.8rem;animation:rise .45s var(--ease-out) .12s both}
.meter-track{
  position:relative;height:26px;
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
}
/* measured ticks along the baseline */
.meter-track::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background-image:linear-gradient(90deg,var(--rule-2) 1px,transparent 1px);
  background-size:calc(100%/20) 100%;
}
.meter-fill{
  position:absolute;top:0;bottom:0;left:0;width:0;
  background:var(--paper-3);
  transition:width .9s var(--ease-out);
}
.meter-thresh{position:absolute;top:-5px;bottom:-5px;left:50%;width:1px;
  background:var(--ink)}
.meter-dot{
  position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--clay);transform:translate(-50%,-50%);
  transition:left .9s var(--ease-out);
}
.meter-legend{
  display:flex;justify-content:space-between;margin-top:.7rem;
  color:var(--ink-3);font-size:.6rem;
}
.meter-legend .thr{color:var(--ink)}

.result-body{padding:1.8rem 2rem 2rem}
.evidence{border-left:2px solid var(--rule-2);padding:.2rem 0 .2rem 1.1rem}
.evidence .k{color:var(--ink-3);display:block;margin-bottom:.5rem}
.evidence q{font-style:normal;color:var(--ink-2);font-size:.92rem;line-height:1.7}
.evidence mark{background:var(--clay-soft);color:var(--ink);
  padding:.08em .3em;border-radius:2px;font-weight:600}

.others{margin-top:1.8rem;border-top:1px solid var(--rule);padding-top:1.1rem}
.others summary{font-family:var(--f-display);font-size:.85rem;font-weight:600;
  color:var(--ink);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.6rem}
.others summary::-webkit-details-marker{display:none}
.others summary::before{content:"";width:7px;height:1px;background:currentColor;
  box-shadow:0 0 0 0 currentColor;position:relative;transition:transform .25s var(--ease)}
.others summary::after{content:"";width:1px;height:7px;background:currentColor;
  margin-left:-11px;transition:opacity .25s var(--ease)}
.others[open] summary::after{opacity:0}
.others table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:1rem}
.others th{text-align:left;color:var(--ink-3);
  padding:.5rem .6rem .5rem 0;border-bottom:1px solid var(--rule)}
.others td{padding:.7rem .6rem .7rem 0;border-bottom:1px solid var(--rule);
  color:var(--ink-2)}
.others tr:last-child td{border-bottom:none}
.others .amt{font-family:var(--f-display);font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:600}
.others .ctx{font-size:.84rem}
.others button{background:none;border:0;border-bottom:1px solid var(--rule-2);
  padding:.1rem 0;font-family:var(--f-display);font-size:.8rem;font-weight:600;
  color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:border-color .2s}
.others button:hover{border-color:var(--ink)}
.others button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.btn{
  border:1px solid var(--navy);border-radius:var(--r);
  padding:.85rem 1.6rem;font-family:var(--f-display);
  font-size:.88rem;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep)}
.btn-primary:disabled{opacity:.3;cursor:not-allowed;background:var(--ink)}
.btn-quiet{background:none;color:var(--ink-2);border-color:var(--rule-2)}
.btn-quiet:hover{border-color:var(--ink);color:var(--ink)}

.note{
  display:flex;gap:.8rem;align-items:flex-start;margin-top:1.8rem;
  padding:1rem 1.1rem;border-radius:var(--r);font-size:.9rem;line-height:1.6;
  border:1px solid var(--rule);color:var(--ink-2);
}
.note.amber{border-color:var(--clay);background:var(--clay-soft);color:var(--ink)}
.note.amber svg{color:var(--clay)}
.note svg{width:16px;height:16px;flex:none;margin-top:.24rem;color:var(--ink-3)}
.note b{display:block;font-family:var(--f-display);font-weight:600;color:var(--ink)}

/* manual entry */
.manual{margin-top:1.6rem}
.manual label{display:block;font-size:.92rem;color:var(--ink-2);margin-bottom:.6rem}
.money-input{position:relative;display:flex;align-items:center}
.money-input span{position:absolute;left:0;color:var(--ink-3);
  font-family:var(--f-display);font-size:1.6rem}
.money-input input{
  width:100%;font-family:var(--f-display);font-size:1.6rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  padding:.3rem 0 .5rem 1.35rem;border:0;border-bottom:1px solid var(--rule-2);
  border-radius:0;background:none;color:var(--ink);
  transition:border-color .2s;
}
.money-input input:focus{outline:none;border-color:var(--ink)}
.money-input input::placeholder{color:var(--ink-3);font-weight:400}
.live-verdict{margin-top:.9rem;font-size:.94rem;color:var(--ink-2);min-height:1.5rem}
.live-verdict b{color:var(--ink);font-weight:600}

.filelist{list-style:none;padding:0;margin:2rem 0 0;
  border-top:1px solid var(--rule)}
.filelist li{display:flex;align-items:center;gap:.8rem;font-size:.88rem;
  padding:.7rem 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.filelist .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filelist .sz{color:var(--ink-3)}
.filelist .tick{color:var(--ink);flex:none;display:grid;place-items:center}
.filelist .tick svg{width:13px;height:13px}

.backlink{background:none;border:0;color:var(--ink-3);
  font-family:var(--f-display);font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  cursor:pointer;padding:0 0 .3rem;margin-bottom:1.8rem;
  display:inline-flex;align-items:center;gap:.6rem;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s}
.backlink:hover{color:var(--ink);border-color:var(--ink)}
.backlink:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.backlink span{transition:transform .25s var(--ease)}
.backlink:hover span{transform:translateX(-3px)}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:720px){
  .topbar,.footbar,.stage{padding-left:1.3rem;padding-right:1.3rem}
  .stage{padding-top:3rem;padding-bottom:4rem}
  .hero h1{font-size:2.1rem}
  .amount{font-size:2.6rem}
  .tracks{grid-template-columns:1fr}
  .track-card + .track-card{padding-left:0;border-left:0}
  .result-top,.result-body,.reading{padding-left:1.3rem;padding-right:1.3rem}
  .footbar span:last-child{display:none}
  .others .ctx{display:none}
  .btn{flex:1;min-width:100%}
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ============================================================
   Intake workflow — track, documents, parties, next steps.
   Same rules as everything else: hairlines carry the layout,
   clay is spent only on caution.
   ============================================================ */

/* step bar */
.stepbar{
  display:flex;gap:0;list-style:none;margin:0 0 2.4rem;padding:0;
  border-bottom:1px solid var(--rule);
}
.stepbar li{
  display:flex;align-items:center;gap:.5rem;padding:0 1.1rem .8rem 0;
  font-family:var(--f-display);font-size:.82rem;letter-spacing:.01em;
  color:var(--ink-3);
}
.stepbar li .sn{
  display:grid;place-items:center;width:19px;height:19px;flex:none;
  border:1px solid var(--rule-2);border-radius:50%;
  font-size:.7rem;font-variant-numeric:tabular-nums;
}
.stepbar li .sn svg{width:10px;height:10px}
.stepbar li.on{color:var(--ink)}
.stepbar li.on .sn{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.stepbar li.done{color:var(--ink-2)}
.stepbar li.done .sn{border-color:var(--ink-2);color:var(--ink-2)}

.note.done{border-color:var(--rule-2)}
.note.done svg{color:var(--ink)}

/* document checklist */
.checklist{list-style:none;margin:1.7rem 0 0;padding:0}
.checklist li{border-top:1px solid var(--rule)}
.checklist li:last-child{border-bottom:1px solid var(--rule)}
.checklist label{
  display:flex;gap:.9rem;align-items:flex-start;padding:1rem .2rem;cursor:pointer;
}
.checklist input{position:absolute;opacity:0;width:0;height:0}
.checklist .box{
  display:grid;place-items:center;width:19px;height:19px;flex:none;margin-top:.16rem;
  border:1px solid var(--rule-2);border-radius:var(--r);color:transparent;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s;
}
.checklist .box svg{width:11px;height:11px}
.checklist label:hover .box{border-color:var(--ink-2)}
.checklist input:checked + .box{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.checklist input:focus-visible + .box{outline:2px solid var(--clay);outline-offset:2px}
.checklist .lbl{display:block;font-size:.94rem;line-height:1.5}
.checklist .lbl b{font-family:var(--f-display);font-weight:600;color:var(--ink)}
.checklist .lbl em{display:block;font-style:normal;color:var(--ink-3);font-size:.86rem;margin-top:.15rem}
.checklist .tag{
  margin-left:.5rem;font-family:var(--f-display);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--rule);border-radius:var(--r);padding:.1rem .38rem;
}
.checklist li.req .tag{color:var(--ink-2);border-color:var(--rule-2)}
.checklist input:checked ~ .lbl b{color:var(--ink-2)}

/* party fields */
.fieldset{margin-top:2rem}
.fieldset h4{
  margin:0 0 .9rem;font-family:var(--f-display);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:.5rem;border-bottom:1px solid var(--rule);
}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem}
@media (max-width:620px){.field-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.3rem}
.field span{font-size:.82rem;color:var(--ink-2)}
.field input{
  font-family:var(--f-body);font-size:.95rem;color:var(--ink);
  padding:.4rem 0;border:0;border-bottom:1px solid var(--rule-2);
  border-radius:0;background:none;transition:border-color .2s;
}
.field input::placeholder{color:var(--ink-3);opacity:.55}
.field input:focus{outline:none;border-bottom-color:var(--ink)}

.route{
  display:flex;align-items:flex-start;gap:.5rem;margin-top:1rem;
  font-size:.84rem;line-height:1.6;color:var(--ink-3);
}
/* the icons carry a viewBox but no intrinsic size, so without this they
   stretch to fill the flex row */
.route svg{flex:none;width:15px;height:15px;align-self:flex-start;margin-top:.18rem}
.route.mail{color:var(--clay)}

/* next steps */
.steps{list-style:none;counter-reset:s;margin:1.8rem 0 0;padding:0}
.steps li{
  counter-increment:s;position:relative;padding:0 0 1.6rem 2.4rem;
  border-left:1px solid var(--rule);margin-left:.55rem;
}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{
  content:counter(s);position:absolute;left:-.56rem;top:.05rem;
  display:grid;place-items:center;width:19px;height:19px;
  background:var(--paper);border:1px solid var(--rule-2);border-radius:50%;
  font-family:var(--f-display);font-size:.7rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.s-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.s-head b{font-family:var(--f-display);font-weight:600;font-size:1rem}
.s-head .owner{
  font-family:var(--f-display);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--rule);border-radius:var(--r);padding:.1rem .38rem;
}
.steps p{margin:.35rem 0 0;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.tpl,.dlv{
  display:flex;align-items:center;gap:.45rem;margin-top:.55rem;
  font-size:.82rem;color:var(--ink-3);
}
.tpl svg,.dlv svg{flex:none;width:13px;height:13px}
.tpl b{font-family:var(--f-display);font-weight:600;color:var(--ink-2)}

/* merge field table */
table.merge{width:100%;border-collapse:collapse;margin-top:.9rem;font-size:.85rem}
table.merge th{
  text-align:left;font-family:var(--f-display);font-size:.66rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  padding:.4rem .6rem .4rem 0;border-bottom:1px solid var(--rule);
}
table.merge td{padding:.42rem .6rem .42rem 0;border-bottom:1px solid var(--rule);
  vertical-align:top;color:var(--ink-2)}
table.merge td.amt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;color:var(--ink);white-space:nowrap}
table.merge tr.empty td{color:var(--ink-3);opacity:.6}
.copied{margin-left:.8rem;font-size:.82rem;color:var(--ink-3)}

/* ============================================================
   Reading a referral: flags, cross-reference, the notice.
   Clay still means "a human must look at this".
   ============================================================ */

.hero.tight{margin-bottom:2rem}
.hero.tight h1{font-size:2.4rem}

/* action list — what the gaps oblige Delia to do */
.actionbar{
  margin-top:1.8rem;border:1px solid var(--clay);background:var(--clay-soft);
  border-radius:var(--r);padding:1.1rem 1.2rem;
}
.ab-head{display:flex;align-items:center;gap:.55rem;color:var(--clay);margin-bottom:.7rem}
.ab-head svg{width:16px;height:16px}
.ab-head b{font-family:var(--f-display);font-size:.86rem;letter-spacing:.02em;color:var(--ink)}
.actionbar ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.actionbar li{display:flex;gap:.7rem;align-items:flex-start}
.actionbar li i{flex:none;margin-top:.2rem;color:var(--clay)}
.actionbar li i svg{width:15px;height:15px;display:block}
.actionbar li b{display:block;font-family:var(--f-display);font-weight:600;font-size:.92rem}
.actionbar li span{display:block;font-size:.85rem;color:var(--ink-2);line-height:1.55}

/* cross-reference: fields beside the page they came from */
.view.view-review{max-width:1180px}
.xref{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;margin-top:2rem;align-items:start}
@media (max-width:900px){.xref{grid-template-columns:1fr}}
/* the scan carries the reading, so it takes the wider column and keeps it —
   with a multi-file packet the document list would otherwise push it down
   into the narrow side. */
@media (min-width:901px){
  .xref{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .xref-fields{grid-column:1;grid-row:1}
  .xref .docs-in{grid-column:1;grid-row:2}
  .xref-page{grid-column:2;grid-row:1}
}

.frow{
  display:grid;grid-template-columns:1fr auto;gap:.15rem .8rem;
  padding:.7rem 0;border-bottom:1px solid var(--rule);
}
.frow label{grid-column:1;font-size:.78rem;color:var(--ink-3)}
.frow input{
  grid-column:1;font-family:var(--f-body);font-size:.94rem;color:var(--ink);
  padding:.15rem 0;border:0;border-bottom:1px solid transparent;background:none;
  border-radius:0;transition:border-color .2s;
}
.frow input::placeholder{color:var(--clay);opacity:.75;font-style:italic}
.frow input:focus{outline:none;border-bottom-color:var(--ink)}
.frow .fstat{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--ink-3);
  font-family:var(--f-display);letter-spacing:.02em;white-space:nowrap;
}
.frow .fstat svg{width:13px;height:13px;display:block}
.frow .fstat .okmark{color:var(--ink-3)}
.frow .fstat .bang{color:var(--clay)}
.frow.missing{background:linear-gradient(90deg,var(--clay-soft),transparent 72%)}
.frow.missing .fstat,.frow.check .fstat{color:var(--clay)}
.frow:hover{cursor:pointer}

/* the page itself */
.xref-page{position:sticky;top:1.5rem}
.xp-label,.xp-hint{
  font-family:var(--f-display);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}
.xp-label{margin-bottom:.6rem}
.xp-hint{margin-top:.6rem;text-align:right}
.xp-frame{
  position:relative;overflow:auto;max-height:88vh;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper-2);
}
.xp-frame img{display:block;width:100%;height:auto}
.xp-hi{
  position:absolute;pointer-events:none;opacity:0;
  border:2px solid var(--clay);border-radius:2px;
  background:color-mix(in srgb,var(--clay) 14%,transparent);
  transition:opacity .25s var(--ease),left .3s var(--ease),top .3s var(--ease),
    width .3s var(--ease),height .3s var(--ease);
}

/* switch-style checkbox (conflict check) */
.switch{display:flex;gap:.9rem;align-items:flex-start;margin-top:1.2rem;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .box{
  display:grid;place-items:center;width:19px;height:19px;flex:none;margin-top:.16rem;
  border:1px solid var(--rule-2);border-radius:var(--r);color:transparent;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s;
}
.switch .box svg{width:11px;height:11px}
.switch input:checked + .box{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.switch input:focus-visible + .box{outline:2px solid var(--clay);outline-offset:2px}
.switch .lbl b{display:block;font-family:var(--f-display);font-weight:600;font-size:.94rem}
.switch .lbl em{display:block;font-style:normal;color:var(--ink-3);font-size:.85rem;margin-top:.1rem}

.field select{
  font-family:var(--f-body);font-size:.95rem;color:var(--ink);
  padding:.4rem 0;border:0;border-bottom:1px solid var(--rule-2);
  border-radius:0;background:none;
}
.field select:focus{outline:none;border-bottom-color:var(--ink)}

.steps.compact li{padding-bottom:1.1rem}
.steps.compact li.done .s-head b{color:var(--ink-2)}
.s-done{
  display:inline-flex;align-items:center;gap:.25rem;color:var(--ink-3);
  font-family:var(--f-display);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
}
.s-done svg{width:11px;height:11px}

/* how it goes out */
.sendcard{
  margin-top:1.8rem;border:1px solid var(--rule-2);border-radius:var(--r);padding:1.1rem 1.2rem;
}
.sc-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}
.sc-head svg{width:16px;height:16px;color:var(--ink-2)}
.sc-head b{font-family:var(--f-display);font-size:.86rem}
.sendcard ul{margin:0;padding-left:1.1rem;display:grid;gap:.45rem;
  font-size:.88rem;color:var(--ink-2);line-height:1.55}
.sendcard li.warn{color:var(--clay)}

/* generated document preview */
.preview{margin-top:1.6rem;display:grid;gap:1.6rem}
.doc{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);
  padding:2.4rem 2.6rem;font-size:.86rem;line-height:1.62;color:var(--ink-2);
}
.doc p{margin:0 0 .9rem}
.doc-head{display:flex;gap:1.1rem;align-items:flex-start;
  padding-bottom:1rem;border-bottom:1px solid var(--rule);margin-bottom:1.2rem}
.doc-logo{font-family:var(--f-display);font-weight:600;font-size:1.3rem;
  letter-spacing:.16em;color:var(--ink)}
.doc-org{font-size:.76rem;line-height:1.5;color:var(--ink-3)}
.doc-org b{display:block;font-family:var(--f-display);color:var(--ink-2);font-weight:600}
.doc-meta{font-size:.82rem;color:var(--ink-2);margin-bottom:.3rem}
.doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
  margin:1.2rem 0 1.4rem;font-size:.82rem;color:var(--ink)}
.doc-title{font-family:var(--f-display);font-weight:600;color:var(--ink);
  letter-spacing:.04em;margin-bottom:.8rem}
.doc-table{border-collapse:collapse;margin:.6rem 0 1.2rem;width:100%}
.doc-table th{text-align:left;padding:.32rem 1rem .32rem 0;vertical-align:top;
  font-family:var(--f-display);font-weight:600;font-size:.78rem;color:var(--ink-3);white-space:nowrap}
.doc-table td{padding:.32rem 0;color:var(--ink)}
.doc-list{margin:0 0 1rem;padding-left:1.2rem;display:grid;gap:.7rem}
.doc-served{margin:.5rem 0 .5rem 1rem;color:var(--ink);font-size:.82rem;line-height:1.5}
.doc-link{word-break:break-all;color:var(--ink)}
.unfilled{color:var(--clay);font-style:italic}

@media print{
  .topbar,.footbar,.stepbar,.backlink,.hero,.actions,.sendcard,.fieldset,.note{display:none!important}
  .doc{border:0;padding:0;page-break-after:always;background:none}
  .preview{gap:0}
}

/* voluntary: panel, rankings, appointment */
.muted{font-size:.85rem;color:var(--ink-3);margin:0 0 1rem}
.field-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){.field-grid.three{grid-template-columns:1fr}}
.rankblock{padding:1.1rem 0;border-top:1px solid var(--rule)}
.rankblock:first-of-type{border-top:0;padding-top:.2rem}
.rb-head{
  font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.7rem;
}
.switch.small{margin-top:.9rem}
.switch.small .lbl b{font-size:.86rem}
.switch.small .lbl em{font-size:.8rem}
.checklist label.disabled{opacity:.42;cursor:not-allowed}
.doc-rule{border-bottom:1px solid var(--rule-2);min-width:14rem}

/* integration buttons */
.connectrow{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.2rem}
.connectrow .btn:disabled{opacity:.4;cursor:not-allowed}
.connstat{font-size:.8rem;color:var(--ink-3)}
.connstat.on{color:var(--ink-2)}
.connstat.off{color:var(--clay)}
.doc-note{margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--rule);
  font-size:.82rem;color:var(--ink-3);font-style:italic}

/* sidebar navigation */
.tabs{display:flex;flex-direction:column;gap:.15rem}
.tab{
  position:relative;appearance:none;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  font-family:var(--f-display);font-size:.9rem;font-weight:500;letter-spacing:-.005em;
  color:var(--ink-2);
  padding:.55rem .65rem;border-radius:7px;
  transition:color .14s,background .14s;
}
.tab .navi-i{width:18px;height:18px;flex:none;color:var(--ink-3);transition:color .14s}
.tab:hover{color:var(--ink);background:var(--paper-3)}
.tab:hover .navi-i{color:var(--ink-2)}
/* the deep navy needs a heavier tint than a bright blue did to read as a
   selection, and a gold marker to say which one you are on */
.tab.on{color:var(--navy);background:color-mix(in srgb,var(--navy) 12%,transparent);font-weight:600}
.tab.on .navi-i{color:var(--navy)}
.tab.on::before{
  content:"";position:absolute;left:-.35rem;top:22%;bottom:22%;width:3px;
  border-radius:3px;background:var(--gold);
}
.tab:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.tabflag{
  margin-left:auto;width:7px;height:7px;border-radius:50%;
  background:var(--clay);box-shadow:0 0 0 3px var(--clay-soft);
}

/* dashboard */
.caselist{list-style:none;margin:1.6rem 0 0;padding:0}
.caselist li{border-top:1px solid var(--rule)}
.caselist li:last-child{border-bottom:1px solid var(--rule)}
.caserow{
  /* flag | parties | everything else, so an optional count cannot wrap the row */
  display:grid;grid-template-columns:auto 1fr auto;gap:.4rem 1.1rem;
  align-items:center;width:100%;text-align:left;
  appearance:none;background:none;border:0;cursor:pointer;
  padding:1rem .4rem;color:inherit;font:inherit;
  transition:background .16s;
}
.caserow:hover{background:var(--paper-3)}
.cr-flag{width:18px;display:grid;place-items:center;color:var(--clay)}
.cr-flag svg{width:15px;height:15px}
.cr-main .num{
  font-family:var(--f-display);font-weight:600;font-size:.98rem;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cr-main .who{display:block;font-size:.84rem;color:var(--ink-3);margin-top:.1rem}
.cr-meta{display:flex;align-items:center;gap:.75rem;justify-content:flex-end}
.cr-when{font-size:.78rem;color:var(--ink-3);white-space:nowrap;min-width:5.5rem;text-align:right}
.cr-count{
  font-family:var(--f-display);font-size:.7rem;letter-spacing:.04em;
  color:var(--clay);border:1px solid var(--clay);border-radius:20px;
  padding:.1rem .5rem;white-space:nowrap;
}
/* a kraft file-label, e.g. the track (MANDATORY) */
/* status badges — a soft-tinted pill with a status dot */
.chip{
  font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:0;
  text-transform:none;padding:.22rem .55rem;border-radius:7px;
  border:1px solid var(--rule);color:var(--ink-2);background:var(--paper-2);
  white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;line-height:1.2;
}
.chip.good,.chip.warn,.chip.done{padding-left:.5rem}
.chip.good::before,.chip.warn::before,.chip.done::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
}
.chip.good{color:var(--navy);background:color-mix(in srgb,var(--navy) 7%,#fff);
  border-color:color-mix(in srgb,var(--navy) 20%,#fff)}
.chip.warn{color:var(--clay);background:var(--clay-soft);
  border-color:color-mix(in srgb,var(--clay) 28%,#fff)}
.chip.done{color:var(--ink-3);background:var(--paper-3);border-color:var(--rule)}

.dash-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.dash-filters{display:flex;gap:.3rem;margin-left:auto}
.dash-filters button{
  appearance:none;background:none;border:1px solid var(--rule);border-radius:20px;
  padding:.25rem .7rem;font-family:var(--f-display);font-size:.74rem;color:var(--ink-3);
  cursor:pointer;transition:all .16s;
}
.dash-filters button:hover{color:var(--ink);border-color:var(--rule-2)}
.dash-filters button.on{border-color:transparent;color:var(--navy);
  background:color-mix(in srgb,var(--navy) 9%,transparent);font-weight:600}
.empty{padding:3rem 0;text-align:center;color:var(--ink-3);font-size:.92rem}

/* case detail */
.detail-top{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}
.detail-top h1{font-size:2.2rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;
  font-size:.88rem;margin-top:1.4rem}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;color:var(--ink)}
.timeline{list-style:none;margin:1rem 0 0;padding:0;font-size:.86rem}
.timeline li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;
  padding:.5rem 0;border-top:1px solid var(--rule);color:var(--ink-2)}
.timeline .t{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.8rem}
.remind{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem 0;
  border-top:1px solid var(--rule)}
.remind.done .rt{text-decoration:line-through;color:var(--ink-3)}
.remind .rt{flex:1;font-size:.9rem}
.remind button{appearance:none;background:none;border:0;cursor:pointer;
  color:var(--ink-3);font-size:.78rem;font-family:var(--f-display)}
.remind button:hover{color:var(--clay)}
.addremind{display:flex;gap:.7rem;margin-top:1rem}
.addremind input{flex:1;font-family:var(--f-body);font-size:.92rem;color:var(--ink);
  padding:.4rem 0;border:0;border-bottom:1px solid var(--rule-2);background:none}
.addremind input:focus{outline:none;border-bottom-color:var(--ink)}

/* delete — the one destructive control, kept visually separate */
.fieldset.danger h4{color:var(--ink-2)}
.btn-danger{
  border-color:var(--rule-2);color:var(--ink-2);background:none;
}
.btn-danger:hover{border-color:var(--over);color:var(--over);background:color-mix(in srgb,var(--over) 8%,var(--paper-2))}
.confirm-q{font-size:.9rem;color:var(--ink);align-self:center;margin-right:.4rem}

/* unapproved wording must look unapproved */
.doc-draft{
  border:1px solid var(--clay);background:var(--clay-soft);color:var(--ink);
  border-radius:var(--r);padding:.7rem .9rem;margin-bottom:1.4rem;
  font-family:var(--f-body);font-size:.82rem;line-height:1.5;
}

/* settlement steps */
.settle-step{padding:1.2rem 0;border-top:1px solid var(--rule)}
.settle-step:last-of-type{border-bottom:1px solid var(--rule)}
.settle-step.done .lbl b{color:var(--ink-2)}
.settle-doc{margin:.6rem 0 0 2.5rem}
.settle-doc .actions{margin-top:.6rem}

/* ---------- three-state tasks ---------- */
.task{padding:1.1rem 0;border-top:1px solid var(--rule)}
.task:last-of-type{border-bottom:1px solid var(--rule)}
.task-main{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start}
.task-dot{
  width:11px;height:11px;border-radius:50%;margin-top:.35rem;flex:none;
  border:1.5px solid var(--rule-2);background:transparent;transition:all .18s var(--ease);
}
.task.started .task-dot{border-color:var(--gold);background:var(--gold)}
.task.done .task-dot{border-color:var(--navy);background:var(--navy)}
.task-text b{display:block;font-family:var(--f-display);font-weight:600;font-size:.98rem}
.task-text em{display:block;font-style:normal;color:var(--ink-3);font-size:.85rem;margin-top:.15rem}
.task.done .task-text b{color:var(--ink-2)}
.task-controls{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.task-state{
  font-family:var(--f-display);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-right:.2rem;
}
.task.started .task-state{color:var(--clay)}
.task.done .task-state{color:var(--navy)}
.task-extra{margin:.7rem 0 0 1.9rem}
.btn-sm{padding:.4rem .85rem;font-size:.78rem}

/* the "mark as sent" bar — deliberately not a tick box */
.sendbar{
  display:flex;align-items:center;gap:.7rem;margin-top:1.2rem;padding-top:1.1rem;
  border-top:1px solid var(--rule);
}
.sendbar .grow{flex:1}
.sent-mark{
  display:inline-flex;align-items:center;gap:.4rem;color:var(--navy);
  font-family:var(--f-display);font-size:.82rem;
}
.sent-mark svg{width:14px;height:14px}
.inprog{
  display:inline-block;margin-left:.5rem;padding:.05rem .45rem;border-radius:20px;
  border:1px solid var(--clay);color:var(--clay);
  font-family:var(--f-display);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
}

/* ---------- search ---------- */
.searchrow{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;max-width:32rem}
.searchrow input{
  flex:1;font-family:var(--f-body);font-size:.92rem;color:var(--ink);
  padding:.5rem .75rem;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--paper-2);
}
.searchrow input:focus{outline:none;border-color:var(--navy)}

/* ---------- delete, bottom right and quiet ---------- */
.deletebar{display:flex;justify-content:flex-end;margin-top:3rem;
  padding-top:1.2rem;border-top:1px solid var(--rule);gap:.6rem;align-items:center}
.btn-danger{border-color:#C9CDD4;color:var(--over);background:none}
.btn-danger:hover{border-color:var(--over);background:var(--over);color:#fff}

/* ---------- home dashboard ---------- */
.todos{margin-top:2.2rem}
.todos-head{display:flex;align-items:baseline;gap:.7rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--rule)}
.todos-head h3{font-family:var(--f-display);font-size:.95rem;letter-spacing:.01em}
.todos-head span{
  font-family:var(--f-display);font-size:.7rem;color:var(--ink-3);
  border:1px solid var(--rule);border-radius:20px;padding:.05rem .5rem;
}
/* the spacer in a heading that carries a button, not a count */
.todos-head span.grow{flex:1;border:0;padding:0}
.todo{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:.9rem;align-items:center;
  width:100%;text-align:left;appearance:none;background:none;border:0;
  border-bottom:1px solid var(--rule);padding:.9rem .4rem;cursor:pointer;
  color:inherit;font:inherit;transition:background .16s;
}
.todo:hover{background:var(--paper-3)}
.todo-icon{display:grid;place-items:center;color:var(--clay)}
.todo-icon svg{width:15px;height:15px}
.todo-text b{display:block;font-family:var(--f-display);font-weight:600;font-size:.94rem}
.todo-text em{display:block;font-style:normal;font-size:.83rem;color:var(--ink-3);margin-top:.1rem}
.todo-case{
  font-family:var(--f-display);font-size:.78rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* the day's work, sitting above intake */
.daybar{
  border:1px solid var(--rule-2);border-radius:var(--r);background:var(--paper-2);
  padding:1rem 1.2rem 0.4rem;margin-bottom:2.4rem;
}
.daybar-head{display:flex;align-items:center;gap:.6rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--rule)}
.daybar-head svg{width:15px;height:15px;color:var(--clay)}
.daybar-head b{font-family:var(--f-display);font-size:.9rem}
.daybar-head span{font-size:.82rem;color:var(--ink-3)}
.daybar-head .grow{flex:1}
.daybar .todo{padding:.7rem .2rem}
.daybar .todo:last-of-type{border-bottom:0}
.daybar-more{padding:.5rem .2rem .8rem;font-size:.82rem;color:var(--ink-3)}

/* branch openers */
.branchgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem;margin-top:.8rem}
.branchgrid .btn{width:100%}
.branchform{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--rule)}

/* ============================================================
   Cases as a CRM: full width, deadlines forward, urgency in red.
   ============================================================ */

/* wider than the reading column, but still a page rather than a spreadsheet */
body.wide .view{max-width:1180px;width:100%}

.crm{margin-top:1.4rem;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper-2);overflow:hidden}
.crm-head,.crm-row{
  display:grid;
  grid-template-columns:minmax(9rem,.9fr) minmax(14rem,1.6fr) minmax(9rem,.9fr)
    minmax(13rem,1.4fr) 5rem 7rem;
  gap:1rem;align-items:center;
}
.crm-head{
  padding:.55rem 1.1rem;background:var(--paper-3);border-bottom:1px solid var(--rule);
  font-family:var(--f-display);font-size:.66rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
}
.crm-row{
  width:100%;text-align:left;appearance:none;background:none;border:0;
  border-bottom:1px solid var(--rule);padding:.6rem 1.1rem;cursor:pointer;
  color:inherit;font:inherit;transition:background .13s;
}
.crm-row:last-child{border-bottom:0}
.crm-row:hover{background:var(--paper-3)}
.crm-row.urgent{background:color-mix(in srgb,var(--over) 7%,var(--paper-2));
  box-shadow:inset 3px 0 0 var(--over)}
.crm-row.urgent:hover{background:color-mix(in srgb,var(--over) 12%,var(--paper-2))}

.crm-num{display:flex;align-items:center;gap:.45rem;
  font-family:var(--f-type);font-weight:500;font-size:.86rem;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.crm-bang{display:grid;place-items:center;color:var(--clay)}
.crm-bang svg{width:14px;height:14px}
.crm-row.urgent .crm-bang{color:var(--over)}

.crm-parties b{display:block;font-weight:600;font-size:.9rem}
.crm-parties em{display:block;font-style:normal;font-size:.82rem;color:var(--ink-3)}

.crm-clock b{display:block;font-family:var(--f-display);font-weight:600;font-size:.84rem}
.crm-clock em{display:block;font-style:normal;font-size:.78rem;color:var(--ink-3);margin-top:.1rem}
.crm-clock .hot{color:var(--over)}
.crm-clock b.hot{font-weight:700}
.quiet{font-style:normal;font-size:.8rem;color:var(--ink-3);opacity:.7}
.crm-when{font-size:.78rem;color:var(--ink-3);white-space:nowrap}
.crm-row .cr-count{padding:.1rem .5rem}

@media (max-width:1150px){
  .crm-head{display:none}
  .crm-row{grid-template-columns:1fr auto;gap:.4rem .8rem;padding:1rem}
  .crm-row > span:nth-child(3),.crm-row > span:nth-child(5){justify-self:end}
  .crm-clock,.crm-when{grid-column:1 / -1}
}

/* sort control */
.sortrow{display:flex;align-items:center;gap:.4rem;margin-top:1rem}
.sortrow > span{font-family:var(--f-display);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-right:.3rem}
.sortrow button{
  appearance:none;background:none;border:1px solid var(--rule);border-radius:20px;
  padding:.2rem .7rem;font-family:var(--f-display);font-size:.74rem;color:var(--ink-3);
  cursor:pointer;transition:all .16s;
}
.sortrow button.on{border-color:transparent;color:var(--navy);
  background:color-mix(in srgb,var(--navy) 9%,transparent);font-weight:600}

/* clocks on the case */
.clocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1rem;margin-top:1.8rem}
.clock{border:1px solid var(--rule);border-radius:var(--r);padding:.9rem 1rem;
  background:var(--paper-2)}
.clock.hot{border-color:var(--over);background:color-mix(in srgb,var(--over) 7%,var(--paper-2))}
.clock.done{opacity:.55}
.clock-top{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem}
.clock-top b{font-family:var(--f-display);font-size:.88rem}
.clock-left{font-family:var(--f-display);font-size:.78rem;color:var(--ink-2);white-space:nowrap}
.clock.hot .clock-left,.clock.hot .clock-top b{color:var(--over);font-weight:700}
.clock-bar{height:4px;border-radius:2px;background:var(--paper-3);margin:.6rem 0 .4rem;overflow:hidden}
.clock-bar i{display:block;height:100%;background:var(--navy);transition:width .4s var(--ease)}
.clock.hot .clock-bar i{background:var(--over)}
.clock-meta{font-size:.74rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.clock p{margin:.5rem 0 0;font-size:.8rem;color:var(--ink-3);line-height:1.5}

/* work pages */
.worksteps{margin:.6rem 0 0;padding-left:1.3rem;display:grid;gap:.5rem;
  font-size:.9rem;color:var(--ink-2);line-height:1.55}
.workfoot{display:flex;align-items:center;gap:.7rem;margin-top:2.4rem;
  padding-top:1.2rem;border-top:1px solid var(--rule)}
.workfoot .grow{flex:1}
.workfoot .task-state{margin:0}
.checklist input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.checklist input[type=radio] + .box{border-radius:50%}

/* ============================================================
   Urgency as a scale, and a little more life.
   ============================================================ */

:root{
  /* heat levels, harmonised to the kraft palette */
  /* the four given colours, read as rising pressure:
     navy nothing-yet, gold approaching, orange close, brick past due */
  --calm:#001b4e;
  --due:#9A6410;
  --close:#BE3D2A;
  --over:#8F2A1C;
}

.crm-row{position:relative;box-shadow:inset 3px 0 0 transparent}
.crm-row.heat-calm  {box-shadow:inset 3px 0 0 var(--calm)}
.crm-row.heat-due   {box-shadow:inset 3px 0 0 var(--due);   background:color-mix(in srgb,var(--due) 8%,var(--paper-2))}
.crm-row.heat-close {box-shadow:inset 3px 0 0 var(--close); background:color-mix(in srgb,var(--close) 8%,var(--paper-2))}
.crm-row.heat-over  {box-shadow:inset 3px 0 0 var(--over);  background:color-mix(in srgb,var(--over) 8%,var(--paper-2))}
.crm-row.heat-due:hover{background:color-mix(in srgb,var(--due) 14%,var(--paper-2))}
.crm-row.heat-close:hover{background:color-mix(in srgb,var(--close) 14%,var(--paper-2))}
.crm-row.heat-over:hover{background:color-mix(in srgb,var(--over) 14%,var(--paper-2))}

.crm-clock b{font-variant-numeric:tabular-nums}
.heat-due   .crm-clock b{color:var(--due)}
.heat-close .crm-clock b{color:var(--close)}
.heat-over  .crm-clock b{color:var(--over);font-weight:700}

.clock.heat-due  {border-color:var(--due)}
.clock.heat-close{border-color:var(--close);background:color-mix(in srgb,var(--close) 8%,var(--paper-2))}
.clock.heat-over {border-color:var(--over); background:color-mix(in srgb,var(--over) 8%,var(--paper-2))}
.clock.heat-due   .clock-bar i{background:var(--due)}
.clock.heat-close .clock-bar i{background:var(--close)}
.clock.heat-over  .clock-bar i{background:var(--over)}
.clock.heat-close .clock-left,.clock.heat-over .clock-left{color:var(--over);font-weight:700}

/* rows and cards lift very slightly — enough to feel alive, not enough to fuss */
.crm-row,.track-card,.todo,.tpl-head{transition:background .18s var(--ease),
  transform .18s var(--ease), box-shadow .18s var(--ease)}
.track-card:hover{transform:translateY(-2px)}
.btn{transition:background .18s var(--ease),color .18s var(--ease),
  border-color .18s var(--ease),transform .12s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.chip{transition:background .18s,border-color .18s}

.banner{
  display:block;border:1px solid var(--due);background:color-mix(in srgb,var(--due) 8%,var(--paper-2));border-radius:var(--r);
  padding:.9rem 1.1rem;margin-top:1.4rem;font-size:.88rem;color:var(--ink-2);line-height:1.5;
}
.banner b{display:block;font-family:var(--f-display);color:var(--ink)}
/* the database is unreachable — louder than an ordinary notice */
.banner.bad{border-color:var(--close);background:color-mix(in srgb,var(--close) 8%,var(--paper-2))}

/* ---------- templates ---------- */
.tpl-group{
  font-family:var(--f-display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:2rem 0 .6rem;
}
.tpl-list{margin-top:.6rem}
.tpl{border:1px solid var(--rule);border-radius:var(--r);background:var(--paper-2);
  margin-bottom:.5rem;overflow:hidden}
.tpl.open{border-color:var(--rule-2)}
.tpl-head{
  display:grid;grid-template-columns:2.4rem 1fr auto 1.6rem;gap:1rem;align-items:center;
  width:100%;text-align:left;appearance:none;background:none;border:0;cursor:pointer;
  padding:.85rem 1.1rem;color:inherit;font:inherit;
}
.tpl-head:hover{background:var(--paper-3)}
.tpl-id{font-family:var(--f-display);font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.tpl-name b{display:block;font-family:var(--f-display);font-weight:600;font-size:.94rem}
.tpl-name em{display:block;font-style:normal;font-size:.8rem;color:var(--ink-3);margin-top:.1rem}
.tpl-tags{display:flex;align-items:center;gap:.5rem}
.tpl-fields{font-size:.74rem;color:var(--ink-3);white-space:nowrap}
.tpl-caret{font-family:var(--f-display);font-size:1.1rem;color:var(--ink-3);text-align:center}
.tpl-body{padding:.2rem 1.1rem 1.2rem;border-top:1px solid var(--rule)}
.tpl-note{margin:.9rem 0 0;font-size:.85rem;color:var(--ink-3)}
.tpl-note.warn{color:#8A5A08}
.tpl-size{font-size:.78rem;color:var(--ink-3)}
.tpl-fieldlist{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1rem}
.tpl-fieldlist code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;
  background:var(--paper-3);border:1px solid var(--rule);border-radius:2px;
  padding:.1rem .35rem;color:var(--ink-2);
}
.tpl-text{
  margin:1.1rem 0 0;padding:1.1rem 1.2rem;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r);
  font-family:var(--f-body);font-size:.83rem;line-height:1.6;color:var(--ink-2);
  white-space:pre-wrap;max-height:30rem;overflow:auto;
}
.tpl.missing{opacity:.5}

/* ---------- the hearing room ---------- */
/* One row per person, with the single thing you can do about them on the
   right. Invited rows are quiet — the work is in the ones still to send. */
.plist{display:grid;gap:.4rem;margin-top:1rem}
.prow{
  display:grid;grid-template-columns:9.5rem 1fr auto auto;gap:.9rem;align-items:center;
  padding:.6rem .8rem;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper-2);
}
.prow.on{background:color-mix(in srgb,var(--calm) 5%,var(--paper-2));
  border-color:color-mix(in srgb,var(--calm) 25%,var(--rule))}
.prow.cold{opacity:.62}
.prole{font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.pwho{min-width:0}
.pwho b{display:block;font-family:var(--f-display);font-weight:600;font-size:.9rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwho em{display:block;font-style:normal;font-size:.78rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pstate{font-size:.76rem;color:var(--calm);white-space:nowrap}
.muted-list .prow{background:none}
.moneyfield{position:relative;display:block}
.moneyfield i{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
  font-style:normal;color:var(--ink-3);font-size:.9rem;pointer-events:none}
.moneyfield input{padding-left:1.5rem !important;font-variant-numeric:tabular-nums}
/* inside a ledger row the field is already flush, so the sign sits tighter */
.moneyfield.inrow{flex:1;min-width:0}
.moneyfield.inrow i{left:.45rem}
.moneyfield.inrow input{padding-left:1.2rem !important}
select.drow-v{appearance:none;font:inherit;font-size:.88rem;color:var(--ink);
  background:transparent;border:0;padding:.3rem 0;cursor:pointer;width:100%}
.saved{font-size:.8rem;color:var(--calm)}

.subhead{font-family:var(--f-display);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:1.5rem 0 .1rem}

@media (max-width:720px){
  .prow{grid-template-columns:1fr auto;row-gap:.35rem}
  .prole{grid-column:1 / -1}
}

/* ---------- connections ---------- */
/* Three cards, one per service. Each is a small form, so the fields set the
   rhythm rather than the card — no stat tiles, nothing to scan at a glance. */
.conngrid{display:grid;gap:1.1rem;max-width:52rem;margin-top:1.4rem}
.conncard .c-head{align-items:flex-start}
.cpill{
  font-size:.72rem;padding:.24rem .6rem;border-radius:20px;white-space:nowrap;
  border:1px solid var(--rule);background:var(--paper-3);color:var(--ink-3);
}
.cpill.on{border-color:var(--calm);color:var(--calm);
  background:color-mix(in srgb,var(--calm) 8%,var(--paper-2))}
.cpill.part{border-color:var(--gold);color:var(--gold-ink);
  background:color-mix(in srgb,var(--gold) 12%,var(--paper-2))}
.cpill.bad{border-color:var(--close);color:var(--close);
  background:color-mix(in srgb,var(--close) 8%,var(--paper-2))}
.cwhen{margin:.2rem 0 1.1rem;font-size:.86rem;line-height:1.6;color:var(--ink-2);
  max-width:44rem}
.cwhen code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78em;
  background:var(--paper-3);border:1px solid var(--rule);border-radius:2px;padding:.05em .3em}
.cwhen a{color:var(--calm)}
/* the redirect URL has to be copied exactly, so give it its own line */
code.pick{display:block;margin:.5rem 0;padding:.45rem .6rem;user-select:all;
  font-size:.8rem;background:var(--paper-3);border:1px solid var(--rule);border-radius:4px}
.cwhen em{font-style:normal;color:var(--ink-3)}

.cfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.7rem}
.cfield{display:grid;gap:.28rem}
.cfield.wide{margin-top:.7rem;max-width:24rem}
.cfield span{font-size:.76rem;color:var(--ink-3)}
.cfield span em{font-style:normal;opacity:.75}
.cnote{margin:1rem 0 0;font-size:.84rem;color:var(--ink-2);padding-left:.7rem;
  border-left:3px solid var(--rule-2)}
.cfield input{
  appearance:none;font:inherit;font-size:.86rem;color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:.5rem .7rem;min-width:0;
}
.cfield input::placeholder{font-family:var(--f-body);color:var(--ink-3)}
.cfield input:focus,.ccode:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}

/* Dropbox's second step: the app key identifies the app, this authorises it */
.cstep{margin-top:1.1rem;padding:.9rem 1rem;border:1px dashed var(--rule-2);
  border-radius:var(--r);background:var(--paper-3)}
.cstep.done{border-style:solid;border-color:color-mix(in srgb,var(--calm) 35%,var(--rule))}
.cstep-h{margin:0 0 .6rem;font-family:var(--f-display);font-size:.92rem;color:var(--ink)}
.cstep .muted{margin:.5rem 0 0;font-size:.8rem}
.cstep .actions{flex-wrap:wrap;gap:.5rem}
.ccode{
  appearance:none;font:inherit;font-size:.82rem;flex:1 1 14rem;min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:.42rem .6rem;
}
.ccode::placeholder{font-family:var(--f-body);color:var(--ink-3)}
.cbusy{font-size:.78rem;color:var(--ink-3)}
.cresult{margin:.8rem 0 0;font-size:.84rem;line-height:1.5;padding-left:.7rem;
  border-left:3px solid var(--rule-2);color:var(--ink-2)}
.cresult.ok{border-left-color:var(--calm)}
.cresult.bad{border-left-color:var(--close);color:#8A5A08}
.conncard .actions{margin-top:1rem;align-items:center}
button[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- the letter library ---------- */
/* 259 of AMCC's own replies. Two-column heading so the search box sits with
   the count rather than under it; the letters themselves reuse .tpl. */
.letters{margin-top:3.2rem;padding-top:2rem;border-top:2px solid var(--rule-2)}
.lib-head{display:flex;gap:1.4rem;align-items:flex-end;flex-wrap:wrap;
  justify-content:space-between}
.lib-head h2{font-family:var(--f-display);font-weight:600;font-size:1.45rem;
  margin:.25rem 0 .3rem}
.lib-head .muted{margin:0;font-size:.86rem;max-width:34rem}
.lib-search{
  flex:0 1 18rem;min-width:12rem;appearance:none;font:inherit;font-size:.86rem;
  color:var(--ink);background:var(--paper-2);border:1px solid var(--rule);
  border-radius:var(--r);padding:.55rem .8rem;
}
.lib-search:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.lib-groups{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0 .4rem}
.gchip{
  appearance:none;font:inherit;font-size:.78rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.32rem .7rem;border:1px solid var(--rule);border-radius:20px;
  background:var(--paper-2);color:var(--ink-2);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.gchip span{font-variant-numeric:tabular-nums;font-size:.72rem;color:var(--ink-3)}
.gchip:hover{background:var(--paper-3)}
.gchip.on{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.gchip.on span{color:color-mix(in srgb,var(--paper) 70%,transparent)}
.lib-group{margin-top:.4rem}
/* no number column on a library letter — her filenames are the identifier */
.tpl.letter .tpl-head{grid-template-columns:1fr auto 1.6rem}
.tpl.letter .tpl-name em{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem}
.tpl-note.found{color:var(--ink-2);border-left:3px solid var(--navy);
  padding-left:.7rem;margin-top:1rem}
.tpl-note.found b{font-family:var(--f-display)}

/* connections on Home */
.conns{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:-1rem 0 2rem}
.conn{display:flex;align-items:center;gap:.55rem;padding:.4rem .8rem;
  border:1px solid var(--rule);border-radius:20px;background:var(--paper-2);font-size:.82rem}
.conn b{font-family:var(--f-display);font-weight:600;font-size:.8rem}
.conn span{color:var(--ink-3)}
.conn.on span{color:var(--calm)}
.conn.on{border-color:color-mix(in srgb,var(--navy) 22%,var(--paper-2));background:color-mix(in srgb,var(--navy) 6%,var(--paper-2))}
.conn-note{flex-basis:100%;font-size:.82rem;color:var(--ink-3);margin-top:.2rem}
.conn-note.good{color:var(--calm)}
.conn-note.bad{color:var(--close)}

/* ============================================================
   Conflict check, and leaving intake part-way through.
   ============================================================ */

/* the email, as it will land in Outlook — monospace so the label
   columns AMCC use line up the way they do in their own send */
.mailbody{
  margin-top:1.4rem;padding:1.6rem 1.7rem;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;line-height:1.75;color:var(--ink);
  white-space:pre-wrap;overflow-x:auto;
}
.mailhead{margin-top:.4rem}
/* pre-wrap so the two spaces AMCC put after "Case Number:" are shown, not
   collapsed — what is on screen is exactly what the Copy button gives you */
.mailhead dd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  white-space:pre-wrap;
}

/* save & exit sits under the main action, quieter than it */
.exitbar{
  display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;
  margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--rule);
}
.exit-note{font-size:.82rem;color:var(--ink-3)}

/* the way back in, on the case */
.resumebar{
  display:flex;gap:1.2rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:1.6rem;padding:1.1rem 1.3rem;
  border:1px solid var(--clay);border-radius:var(--r);background:var(--clay-soft);
}
.resumebar b{display:block;font-family:var(--f-display);font-weight:600;color:var(--ink)}
.resumebar span{font-size:.88rem;color:var(--ink-2)}

/* ============================================================
   Tabs within a case, in the order the process runs.
   Locked tabs stay visible so the whole process is legible.
   ============================================================ */

/* the case tabs are a segmented control */
.ctabs{
  display:inline-flex;gap:.1rem;flex-wrap:wrap;margin:1.8rem 0 0;padding:.28rem;
  background:var(--paper-3);border:1px solid var(--rule);border-radius:11px;
}
.ctab{
  display:flex;align-items:center;gap:.45rem;
  padding:.42rem .8rem;border:0;border-radius:8px;background:none;cursor:pointer;
  font-family:var(--f-display);font-size:.85rem;font-weight:500;letter-spacing:-.005em;
  color:var(--ink-2);
  transition:color .14s var(--ease), background .14s var(--ease), box-shadow .14s var(--ease);
}
.ctab:hover:not(:disabled):not(.on){color:var(--ink);background:rgba(255,255,255,.55)}
.ctab.on{
  color:var(--ink);background:var(--paper-2);font-weight:600;box-shadow:var(--shadow-sm);
}
.ctab:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
/* a stage that has not arrived yet: quieter, but still a place you can go */
.ctab.waiting{color:var(--ink-3)}

/* the count or tick riding beside the label */
.ct-mark{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-size:.72rem;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink-3);
}
.ct-mark.count{
  min-width:2.1em;padding:.1rem .35rem;border-radius:20px;
  background:var(--paper-3);
}
.ctab.on .ct-mark.count{background:var(--paper-2);color:var(--ink-2)}
.ct-mark.done{color:var(--calm)}
.ct-mark.done svg{width:15px;height:15px}
.ctab.complete .ct-label{color:var(--ink-2)}

.ctab-body{margin-top:.4rem}
/* the first panel in a tab should not double up on the bar's spacing */
.ctab-body > .fieldset:first-child,
.ctab-body > .actionbar:first-child,
.ctab-body > .note:first-child{margin-top:1.6rem}


/* ---- Details tab: the case dossier ------------------------------------- */
.dossier{display:flex;flex-direction:column;gap:1.25rem;margin-top:.4rem}
.dossier-note{
  font-family:var(--f-display);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:0;
}
.party-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
@media(max-width:760px){.party-grid{grid-template-columns:1fr}}

/* the raised cards, with a staggered rise on entry */
.pcard,.dcard{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.15rem 1.3rem 1.3rem;box-shadow:inset 3px 0 0 var(--accent,transparent);
  animation:drise .5s var(--ease-out) both;animation-delay:calc(var(--i,1) * .05s);
}
.pcard.c{--accent:var(--clay)}
.pcard.r{--accent:var(--navy)}
@keyframes drise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pcard,.dcard{animation:none}}

.pcard-h{margin-bottom:.4rem}
.pcard-role{
  font-family:var(--f-display);font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}
.pcard-name{
  display:block;width:100%;border:0;background:none;padding:.15rem 0 0;
  font-family:var(--f-display);font-size:1.5rem;font-weight:600;line-height:1.15;
  color:var(--ink);letter-spacing:-.01em;
}
.pcard-name::placeholder{color:var(--rule-2)}
.pcard-name:focus{outline:none;box-shadow:0 2px 0 var(--accent)}
.pcard-dba{
  display:block;width:100%;border:0;background:none;padding:.1rem 0;margin-top:.1rem;
  font-family:var(--f-body);font-size:.9rem;font-style:italic;color:var(--ink-2);
}
.pcard-dba::placeholder{color:var(--rule-2);font-style:italic}
.pcard-dba:focus{outline:none}

.dcard-h{
  margin:0 0 .8rem;font-family:var(--f-display);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  padding-bottom:.5rem;border-bottom:1px solid var(--rule);
}
.dcard-sub{
  margin:1.15rem 0 .1rem;font-family:var(--f-display);font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--clay);
}
.dcard .ledger + .dcard-sub{margin-top:1.4rem}

/* the ledger — label left, editable value right */
.ledger{margin-top:.7rem}
.drow{
  display:grid;grid-template-columns:6.6rem 1fr;align-items:baseline;
  gap:.6rem;padding:.34rem 0;border-bottom:1px solid var(--rule);
}
.drow:last-child{border-bottom:0}
.drow-k{
  font-family:var(--f-display);font-size:.7rem;letter-spacing:.03em;
  color:var(--ink-3);text-transform:uppercase;transition:color .15s;
}
.drow:not(.has):not(:focus-within) .drow-k{color:var(--rule-2)}
.drow-v{
  width:100%;border:0;background:none;padding:.05rem 0;border-radius:0;
  font-family:var(--f-body);font-size:.92rem;color:var(--ink);
  border-bottom:1px solid transparent;transition:border-color .18s;
}
.drow-v::placeholder{color:var(--rule-2)}
.drow-v:focus{outline:none;border-bottom-color:var(--clay)}
.drow.ro .drow-v{color:var(--ink-2);cursor:default}
/* money set as a figure */
.drow.fig .drow-v{
  font-family:var(--f-display);font-size:1rem;color:var(--clay);
  font-variant-numeric:tabular-nums;font-weight:600;
}
.drow.fig .drow-v::placeholder{color:var(--brass);opacity:.5;font-weight:400}

/* attorney disclosure, inset into the card */
.atty{margin-top:1rem;border-top:1px solid var(--rule);padding-top:.3rem}
.atty > summary{
  list-style:none;cursor:pointer;padding:.5rem 0 .3rem;display:flex;align-items:center;gap:.5rem;
  font-family:var(--f-display);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.atty > summary::-webkit-details-marker{display:none}
.atty > summary::before{content:"+";font-size:1.05rem;line-height:.8;color:var(--clay)}
.atty[open] > summary::before{content:"–"}
.atty > summary:hover{color:var(--ink)}
.dcheck{display:flex;align-items:center;gap:.5rem;margin:.3rem 0 .2rem;
  font-size:.86rem;color:var(--ink-2);cursor:pointer}
.dcheck input{width:15px;height:15px;accent-color:var(--clay);cursor:pointer}

/* ============================================================
   dark mode
   ============================================================ */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#08101F;
  --paper-2:#0F1B30;
  --paper-3:#17263D;
  --ink:#F2EFE9;
  --ink-2:#B7BDC6;
  --ink-3:#7C8894;
  --rule:#1E2F49;
  --rule-2:#2C4162;
  /* navy is the ground in dark, so the accent becomes its lighter half */
  --navy:#7FA9DC;
  --navy-deep:#9FC3EC;
  --navy-lift:#5A88C0;
  --navy-brand:#7FA9DC;
  --gold:#ef9f19;
  --brick:#E2604A;
  --brick-deep:#C24A38;
  --gold-ink:#F0AC43;
  --clay:#E2604A;
  --clay-soft:#331812;
  --brass:#7C8894;
  --hearing:#7FA9DC;   --hearing-soft:#132339;
  --evidence:#ef9f19;  --evidence-soft:#2E2011;
  --notice:#9CC0E8;    --notice-soft:#17293C;
  --award:#E2604A;     --award-soft:#331812;
  --settled:#ef9f19;   --settled-soft:#2E2011;
  --glass:rgba(28,32,40,.66);
  --glass-edge:rgba(255,255,255,.06);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 18px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px rgba(0,0,0,.6);
  --calm:#7FA9DC;--due:#ef9f19;--close:#E2604A;--over:#F08472;
}
:root[data-theme="dark"] .side-mark{color:#0E1116}

/* theme toggle in the sidebar foot */
.theme-toggle{
  appearance:none;background:none;border:1px solid var(--rule);border-radius:7px;
  width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
  color:var(--ink-3);margin-left:auto;transition:color .14s,background .14s,border-color .14s;
}
.theme-toggle:hover{color:var(--ink);background:var(--paper-3);border-color:var(--rule-2)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}

/* ============================================================
   command palette (⌘K)
   ============================================================ */
.cmdk{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:flex-start;justify-content:center;
  padding-top:14vh;background:rgba(14,17,22,.44);
  backdrop-filter:blur(3px);
}
.cmdk.open{display:flex;animation:cmdkFade .12s var(--ease-out)}
@keyframes cmdkFade{from{opacity:0}to{opacity:1}}
.cmdk-box{
  width:min(92vw,560px);max-height:60vh;display:flex;flex-direction:column;
  background:var(--paper-2);border:1px solid var(--rule-2);border-radius:14px;
  box-shadow:var(--shadow-lg);overflow:hidden;
  animation:cmdkRise .16s var(--ease-out);
}
@keyframes cmdkRise{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.cmdk-in{
  border:0;outline:none;background:none;color:var(--ink);
  font-family:var(--f-display);font-size:1.02rem;padding:1.05rem 1.2rem;
  border-bottom:1px solid var(--rule);
}
.cmdk-in::placeholder{color:var(--ink-3)}
.cmdk-list{overflow-y:auto;padding:.4rem}
.cmdk-group{
  font-family:var(--f-display);font-size:.66rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);padding:.6rem .7rem .3rem;
}
.cmdk-item{
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  appearance:none;background:none;border:0;cursor:pointer;color:var(--ink);
  font:inherit;padding:.55rem .7rem;border-radius:8px;
}
.cmdk-item .ci-icon{width:18px;height:18px;flex:none;color:var(--ink-3);display:grid;place-items:center}
.cmdk-item .ci-icon svg{width:17px;height:17px}
.cmdk-item .ci-num{font-family:var(--f-type);font-size:.82rem;letter-spacing:-.02em;color:var(--ink)}
.cmdk-item .ci-sub{color:var(--ink-3);font-size:.86rem}
.cmdk-item .ci-tag{margin-left:auto;font-size:.72rem;color:var(--ink-3);
  font-family:var(--f-type)}
.cmdk-item.sel,.cmdk-item:hover{background:color-mix(in srgb,var(--navy) 12%,transparent)}
.cmdk-item.sel .ci-icon,.cmdk-item.sel .ci-num{color:var(--navy)}
.cmdk-empty{padding:1.4rem .8rem;color:var(--ink-3);font-size:.9rem;text-align:center}
.cmdk-foot{
  border-top:1px solid var(--rule);padding:.5rem .8rem;display:flex;gap:1rem;
  font-size:.72rem;color:var(--ink-3);font-family:var(--f-type);
}
.cmdk-foot kbd{
  font-family:var(--f-type);background:var(--paper-3);border:1px solid var(--rule);
  border-radius:4px;padding:.05rem .3rem;font-size:.72rem;color:var(--ink-2);
}

/* ============================================================
   Timeline tab
   ============================================================ */
.tl-summary{display:flex;gap:1rem;margin-top:1.5rem;align-items:stretch;flex-wrap:wrap}
.tl-next{
  flex:1;min-width:16rem;background:var(--paper-2);border:1px solid var(--rule);
  border-left:3px solid var(--navy);border-radius:12px;padding:.95rem 1.15rem;
  box-shadow:var(--shadow-sm);
}
.tl-next.heat-over{border-left-color:var(--over)}
.tl-next.heat-close{border-left-color:var(--close)}
.tl-next.heat-due{border-left-color:var(--due)}
.tl-next-k{display:block;font-family:var(--f-display);font-size:.66rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.tl-next b{display:block;font-size:1.02rem;margin:.28rem 0 .18rem;letter-spacing:-.01em}
.tl-next-cd{font-family:var(--f-type);font-size:.84rem;color:var(--ink-2)}
.tl-next.heat-over .tl-next-cd{color:var(--over);font-weight:500}
.tl-next.heat-close .tl-next-cd{color:var(--close);font-weight:500}
.tl-next.heat-due .tl-next-cd{color:var(--due);font-weight:500}

.tl-prog{
  width:150px;background:var(--paper-2);border:1px solid var(--rule);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  padding:.9rem;box-shadow:var(--shadow-sm);
}
.tl-prog-ring{position:relative;
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--navy) calc(var(--pct) * 1%), var(--paper-3) 0);
}
.tl-prog-ring::before{content:"";position:absolute;width:48px;height:48px;border-radius:50%;background:var(--paper-2)}
.tl-prog-ring span{position:relative;font-family:var(--f-type);font-size:1.05rem;font-weight:500;color:var(--ink)}
.tl-prog-ring i{color:var(--ink-3);font-style:normal;font-size:.8rem}
.tl-prog-k{font-family:var(--f-display);font-size:.66rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}

/* the rail */
.tl{list-style:none;margin:2rem 0 0;padding:0}
.tl-phase{
  font-family:var(--f-display);font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin:1.5rem 0 .7rem;padding-left:2px;
}
.tl-phase:first-child{margin-top:0}
.tl-node{
  position:relative;display:grid;grid-template-columns:22px 1fr;gap:.9rem;
  padding:0 0 1.05rem;
}
.tl-node::before{content:"";position:absolute;left:10px;top:20px;bottom:-2px;width:2px;background:var(--rule)}
.tl-node:last-child::before{display:none}
.tl-dot{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--rule-2);
  background:var(--paper);display:grid;place-items:center;color:#fff;position:relative;z-index:1;
}
.tl-dot svg{width:12px;height:12px}
.tlst-done .tl-dot{background:var(--navy);border-color:var(--navy)}
.tlst-closed .tl-dot{background:var(--ink-3);border-color:var(--ink-3)}
.tlst-upcoming .tl-dot{background:var(--paper-3);border-color:var(--rule-2)}
.tlst-due .tl-dot{border-color:var(--due);background:color-mix(in srgb,var(--due) 16%,var(--paper-2));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--due) 14%,transparent)}
.tlst-overdue .tl-dot{border-color:var(--over);background:color-mix(in srgb,var(--over) 16%,var(--paper-2));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--over) 16%,transparent)}
@media(prefers-reduced-motion:no-preference){
  .tlst-due .tl-dot,.tlst-overdue .tl-dot{animation:tlPulse 2.2s var(--ease) infinite}
}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--due) 16%,transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--due) 6%,transparent)}}
.tlst-overdue .tl-dot{}

.tl-body{padding-top:.05rem;min-width:0}
.tl-line{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.tl-label{font-weight:500;font-size:.95rem;letter-spacing:-.01em}
.tlst-upcoming .tl-label{color:var(--ink-3);font-weight:450}
.tl-right{text-align:right;white-space:nowrap;flex:none}
.tl-date{font-family:var(--f-type);font-size:.82rem;color:var(--ink-2)}
.tl-date.is-done{color:var(--navy)}
.tl-date.is-up{color:var(--ink-3)}
.tl-cd{display:block;font-family:var(--f-type);font-size:.84rem;font-weight:500}
.tl-cd.heat-over{color:var(--over)} .tl-cd.heat-close{color:var(--close)}
.tl-cd.heat-due{color:var(--due)} .tl-cd.heat-calm{color:var(--ink-2)}
.tl-due{display:block;font-size:.72rem;color:var(--ink-3);font-family:var(--f-type);margin-top:.05rem}
.tl-note{font-size:.85rem;color:var(--ink-3);line-height:1.5;margin:.2rem 0 0;max-width:46rem}
.tlst-upcoming .tl-note{color:var(--rule-2)}

/* ---------- referral documents ---------- */
/* One referral is a bundle or six separate PDFs, so this reads as a list of
   files rather than a set of cards — the CSLB's own filenames are the label. */
.doclist{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:1px;
  background:var(--rule-2);border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden}
.doclist li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.3rem 1rem;padding:.6rem .8rem;background:var(--paper-2)}
.doclist li.is-memo{background:color-mix(in srgb,var(--navy-deep) 6%,var(--paper-2))}
.doclist .dl-name{font-size:.87rem;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
a.dl-name:hover{text-decoration:underline}
.doclist .dl-meta{font-size:.76rem;color:var(--ink-3);white-space:nowrap}
.docs-in{margin-top:1rem}

/* ---------- home: recent cases ---------- */
.recent{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;margin-top:.5rem}
.recent-row{
  display:grid;grid-template-columns:9rem minmax(0,1fr) auto auto;
  align-items:baseline;gap:.5rem 1rem;width:100%;
  padding:.62rem .85rem;background:var(--paper-2);border:0;cursor:pointer;
  text-align:left;font:inherit;color:var(--ink);
}
.recent-row:hover{background:color-mix(in srgb,var(--navy-deep) 4%,var(--paper-2))}
.recent-row .rr-no{font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--ink)}
.recent-row .rr-parties{font-size:.85rem;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.recent-row .rr-parties i{font-style:normal;color:var(--ink-3);padding:0 .1rem}
.recent-row .rr-status{font-size:.75rem;color:var(--ink-3);white-space:nowrap}
.recent-row .rr-when{font-size:.75rem;color:var(--ink-3);white-space:nowrap}
.recent-row .rr-when i{font-style:normal}
@media (max-width:760px){
  .recent-row{grid-template-columns:1fr auto;row-gap:.15rem}
  .recent-row .rr-parties{grid-column:1/3}
}

/* ============================================================
   home — the dashboard
   Panels, not one long column: the day's hearings and what is dated sit
   beside the list you work down, so the first screen answers "what is
   happening" and "what do I do" at once.
   ============================================================ */

.home{max-width:none}
.hgrid{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:1rem;align-items:start;margin-top:.4rem;
}
.hcol{display:grid;gap:1rem;align-content:start;min-width:0}

.card{
  background:var(--paper-2);border:1px solid var(--rule);
  border-radius:14px;padding:1.15rem 1.25rem;box-shadow:var(--shadow);
  min-width:0;
}
.c-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:.9rem}
.c-head h3{font-family:var(--f-display);font-size:1.12rem;letter-spacing:-.01em;margin:.1rem 0 0}
.c-eyebrow{
  font-family:var(--f-type);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0;
}
.c-count{font-family:var(--f-type);font-size:.72rem;color:var(--ink-3);
  border:1px solid var(--rule);border-radius:20px;padding:.1rem .55rem}
.c-note{color:var(--ink-2);font-size:.9rem;margin:0 0 .6rem}
.c-more{background:none;border:0;padding:.6rem 0 0;cursor:pointer;
  font-size:.82rem;color:var(--navy);width:100%;text-align:left}

/* ---------- greeting ---------- */
.card-greet{
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--navy) 9%,var(--paper-2)) 0%,
    var(--paper-2) 58%);
}
.greet{font-family:var(--f-display);font-size:1.75rem;line-height:1.12;
  letter-spacing:-.02em;margin:.25rem 0 .35rem;text-wrap:balance}
.greet-sub{color:var(--ink-2);font-size:.92rem;margin:0}

.statrow{display:flex;gap:.5rem;margin-top:1rem}
.stat{
  flex:1;background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:.55rem .6rem;text-align:center;
}
.stat b{display:block;font-family:var(--f-display);font-size:1.3rem;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat span{font-size:.7rem;color:var(--ink-3);letter-spacing:.03em}

.startbar{margin-top:1.05rem;padding-top:.95rem;border-top:1px solid var(--rule)}
.sb-label{font-family:var(--f-type);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.sb-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.chip-go{
  font:inherit;font-size:.84rem;cursor:pointer;
  background:var(--navy);color:#fff;border:1px solid var(--navy);
  border-radius:999px;padding:.36rem .85rem;
  transition:transform .12s var(--ease),filter .12s var(--ease);
}
.chip-go:hover{filter:brightness(1.07);transform:translateY(-1px)}
.chip-go.ghost{background:none;color:var(--ink-2);border-color:var(--rule-2)}
.chip-go.ghost:hover{color:var(--navy);border-color:var(--navy)}

/* ---------- today ---------- */
.card-today.live{border-color:color-mix(in srgb,var(--navy) 35%,var(--rule))}
.card-today.blank .blank-line{color:var(--ink-3);font-size:.9rem;margin:.5rem 0 0}
.hear{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.9rem;align-items:center;
  width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:.7rem .85rem;margin-top:.5rem;
  transition:border-color .14s var(--ease),transform .14s var(--ease);
}
.hear:hover{border-color:var(--navy)}
.hear-time{font-family:var(--f-type);font-size:.82rem;color:var(--navy);white-space:nowrap}
.hear-body{min-width:0;display:block}
.hear-body b{display:block;font-size:.9rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hear-body b i{font-style:normal;color:var(--ink-3);padding:0 .15rem}
.hear-body em{display:block;font-style:normal;font-size:.78rem;color:var(--ink-3)}
.hear-no{font-family:var(--f-type);font-size:.74rem;color:var(--ink-3);white-space:nowrap}

/* ---------- the week ---------- */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem}
.wday{background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:.5rem .4rem;min-height:6.5rem}
.wday.is-today{border-color:var(--navy);
  background:color-mix(in srgb,var(--navy) 6%,var(--paper))}
.wd-head{display:flex;align-items:baseline;justify-content:space-between;gap:.25rem;
  padding:0 .15rem .4rem}
.wd-name{font-size:.68rem;color:var(--ink-3);letter-spacing:.04em}
.wd-num{font-family:var(--f-type);font-size:.8rem;color:var(--ink-2)}
.wd-body{display:grid;gap:.3rem}
.wev{
  display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  border:0;border-left:3px solid var(--navy);border-radius:6px;
  background:color-mix(in srgb,var(--navy) 10%,var(--paper-2));
  padding:.32rem .4rem;overflow:hidden;
}
.wev.evidence{border-left-color:var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,var(--paper-2))}
.wev b{display:block;font-size:.7rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wev em{display:block;font-style:normal;font-size:.64rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wev:hover{filter:brightness(.97)}

/* ---------- needs action ---------- */
.actionlist{display:grid;gap:.35rem;max-height:31rem;overflow-y:auto}
.act{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.65rem;align-items:center;
  width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:9px;padding:.5rem .55rem;
}
.act:hover{background:var(--paper);border-color:var(--rule)}
.act-icon{display:grid;place-items:center;width:1.6rem;height:1.6rem;flex:none;
  border-radius:7px;background:var(--paper-3);color:var(--ink-3)}
.act-icon svg{width:.9rem;height:.9rem}
.act-icon.hot{background:var(--clay-soft);color:var(--clay)}
.act-text{min-width:0}
.act-text b{display:block;font-size:.84rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* inside a group this is the item's explanation, not an identifier —
   body face, and capped so one long note cannot push the list around */
.act-text em{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-style:normal;font-size:.76rem;color:var(--ink-3);line-height:1.45;margin-top:.1rem;
}

/* ---------- recent ---------- */
.card-recent .recent{border:0;background:none;gap:.25rem}
.card-recent .recent-row{border:1px solid transparent;border-radius:9px}
.card-recent .recent-row:hover{background:var(--paper);border-color:var(--rule)}

@media (max-width:1080px){
  .hgrid{grid-template-columns:minmax(0,1fr)}
  .hcol-side{order:-1}
  .week{grid-template-columns:repeat(4,minmax(0,1fr))}
  .actionlist{max-height:none}
}
@media (max-width:640px){
  .week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hear{grid-template-columns:auto minmax(0,1fr)}
  .hear-no{display:none}
}

/* a panel waiting for its first case — the layout, explained, not faked */
.card-ghost{border-style:dashed;box-shadow:none;background:none}
.card-ghost h3{font-family:var(--f-display);font-size:1.05rem;margin:.15rem 0 .4rem;
  color:var(--ink-2)}
.card-ghost .ghost-line{color:var(--ink-3);font-size:.86rem;margin:0;max-width:52ch;
  line-height:1.5}

/* ============================================================
   the card, everywhere
   One raised surface for the whole product: a faint glass ground, a lit top
   edge, and a lift on hover for the ones you can act on. Applied to the case
   panels and the docket too, so Home is not a different app.
   ============================================================ */

.card{
  position:relative;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--paper-2) 92%,transparent),
                            color-mix(in srgb,var(--paper-2) 99%,transparent)),
    var(--paper-2);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-edge);
}
/* the lit top edge that sells the glass */
.card::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,transparent,var(--glass-edge),transparent);
  pointer-events:none;
}

/* case panels and the docket adopt the same surface */
.fieldset{
  margin-top:1.1rem;padding:1.15rem 1.25rem;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-edge);
}
.fieldset h4{border-bottom-color:var(--rule)}
.crm{border-radius:14px;box-shadow:var(--shadow), inset 0 1px 0 var(--glass-edge)}

/* ---------- start a case: the one card that makes work ---------- */
.card-start{
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--gold) 30%,transparent) 0%, transparent 62%),
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb,var(--gold) 20%,transparent) 0%, transparent 58%),
    var(--paper-2);
  overflow:hidden;
}
.card-start h3{font-family:var(--f-display);font-size:1.3rem;letter-spacing:-.02em;
  margin:.15rem 0 .35rem}
.card-start .start-copy p{color:var(--ink-2);font-size:.88rem;margin:0;max-width:44ch}
.start-actions{display:grid;gap:.55rem;margin-top:1.1rem}
.bigchip{
  position:relative;display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  border-radius:12px;padding:.8rem 1rem;overflow:hidden;
  border:1px solid transparent;color:#fff;
  background:linear-gradient(135deg,var(--navy-lift),var(--navy-brand));
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--navy-brand) 65%,transparent),
             inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .16s var(--ease-out), box-shadow .16s var(--ease-out), filter .16s var(--ease);
}
.bigchip.voluntary{
  color:#001b4e;
  background:linear-gradient(135deg,#F7BC5A,var(--gold));
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--gold) 85%,transparent),
             inset 0 1px 0 rgba(255,255,255,.55);
}
:root[data-theme="dark"] .bigchip.voluntary{color:#001b4e}
.bigchip.voluntary em{opacity:.72}
.bigchip b{display:block;font-size:.98rem;font-weight:650;letter-spacing:-.01em}
.bigchip em{display:block;font-style:normal;font-size:.76rem;opacity:.82;margin-top:.05rem}
/* the specular sweep — the "liquid" read, only on hover */
.bigchip::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 62%);
  transform:translateX(-120%);transition:transform .55s var(--ease-out);
}
.bigchip:hover{transform:translateY(-3px);filter:brightness(1.04)}
.bigchip.mandatory:hover{
  box-shadow:0 16px 34px -14px color-mix(in srgb,var(--navy-brand) 78%,transparent),
             0 4px 10px -6px color-mix(in srgb,var(--navy-brand) 55%,transparent),
             inset 0 1px 0 rgba(255,255,255,.3);
}
.bigchip.voluntary:hover{
  box-shadow:0 16px 34px -14px color-mix(in srgb,var(--gold) 95%,transparent),
             0 4px 10px -6px color-mix(in srgb,var(--gold) 70%,transparent),
             inset 0 1px 0 rgba(255,255,255,.6);
}
.bigchip:hover::after{transform:translateX(120%)}
.bigchip:active{transform:translateY(0)}
.start-more{
  background:none;border:0;padding:.3rem 0 0;cursor:pointer;font:inherit;
  font-size:.84rem;color:var(--ink-2);text-align:left;
}
.start-more:hover{color:var(--hearing)}

/* ---------- needs action, grouped by case ---------- */
.agroups{display:grid;gap:.4rem}
.agroup{
  border:1px solid var(--rule);border-radius:12px;background:var(--paper);
  overflow:hidden;transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.agroup:hover{border-color:var(--rule-2);box-shadow:var(--shadow-sm)}
.agroup > summary{
  display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;
  padding:.6rem .7rem;
}
.agroup > summary::-webkit-details-marker{display:none}
.ag-head{display:flex;align-items:baseline;gap:.5rem;min-width:0;flex:1}
.ag-no{
  font-family:var(--f-type);font-size:.76rem;color:var(--ink);white-space:nowrap;
  background:none;border:0;padding:0;cursor:pointer;
}
button.ag-no:hover{color:var(--hearing);text-decoration:underline}
.ag-meta{font-size:.78rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.ag-meta i{font-style:normal;padding:0 .1rem}
.ag-clock{font-family:var(--f-type);font-size:.68rem;white-space:nowrap;
  padding:.08rem .4rem;border-radius:20px;background:var(--paper-3);color:var(--ink-3)}
.ag-clock.heat-over{background:color-mix(in srgb,var(--over) 10%,var(--paper-2));color:var(--over)}
.ag-clock.heat-close{background:var(--clay-soft);color:var(--clay)}
.ag-clock.heat-due{background:var(--evidence-soft);color:var(--gold-ink)}
.ag-n{font-size:.72rem;color:var(--ink-3);white-space:nowrap}
.ag-chev{display:grid;place-items:center;width:1.1rem;height:1.1rem;color:var(--ink-3);
  transition:transform .18s var(--ease)}
.ag-chev svg{width:1rem;height:1rem}
.agroup[open] .ag-chev{transform:rotate(180deg)}
.ag-body{padding:0 .35rem .35rem}
.agroup.single .ag-head{padding:.55rem .7rem .1rem}
.agroup.single .act{margin:0 .35rem .35rem}

/* ---------- week + calendar navigation ---------- */
.weeknav{display:flex;align-items:center;gap:.3rem;flex:none}
.wn-btn{
  display:grid;place-items:center;width:1.9rem;height:1.9rem;cursor:pointer;
  border:1px solid var(--rule);border-radius:9px;background:var(--paper-2);color:var(--ink-2);
  transition:border-color .14s var(--ease),color .14s var(--ease),transform .14s var(--ease);
}
.wn-btn svg{width:1rem;height:1rem}
.wn-btn:hover{border-color:var(--hearing);color:var(--hearing);transform:translateY(-1px)}
.wn-today{
  font:inherit;font-size:.76rem;cursor:pointer;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:9px;background:var(--paper-2);
  padding:.28rem .6rem;
}
.wn-today:hover{border-color:var(--hearing);color:var(--hearing)}

/* dated things, by colour */
.wev{border-left-color:var(--hearing);
  background:color-mix(in srgb,var(--hearing) 12%,var(--paper-2))}
.wev.evidence{border-left-color:var(--evidence);
  background:color-mix(in srgb,var(--evidence) 14%,var(--paper-2))}
.wev:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.wev{transition:transform .14s var(--ease),box-shadow .14s var(--ease)}

/* ---------- the calendar tab ---------- */
.cal-view{max-width:none}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;margin-top:.6rem}
.cal-dow{
  font-family:var(--f-type);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding:.2rem .35rem .35rem;
}
.cal-cell{
  min-height:6.2rem;min-width:0;background:var(--paper);
  border:1px solid var(--rule);border-radius:11px;
  padding:.35rem;display:flex;flex-direction:column;gap:.25rem;
  transition:border-color .14s var(--ease);
}
.cal-cell.out{opacity:.42}
.cal-cell.is-today{border-color:var(--hearing);
  background:color-mix(in srgb,var(--hearing) 7%,var(--paper))}
.cal-num{font-family:var(--f-type);font-size:.74rem;color:var(--ink-3);padding:0 .15rem}
.cal-cell.is-today .cal-num{color:var(--hearing);font-weight:600}
.cal-evs{display:grid;gap:.2rem;overflow:hidden;min-width:0}
.cev{min-width:0;max-width:100%}
.cev{
  display:block;width:100%;text-align:left;font:inherit;cursor:pointer;border:0;
  border-left:3px solid var(--hearing);border-radius:6px;padding:.22rem .35rem;
  background:color-mix(in srgb,var(--hearing) 12%,var(--paper-2));
  transition:transform .14s var(--ease),box-shadow .14s var(--ease);
}
.cev.evidence{border-left-color:var(--evidence);
  background:color-mix(in srgb,var(--evidence) 14%,var(--paper-2))}
.cev.notice{border-left-color:var(--notice);
  background:color-mix(in srgb,var(--notice) 13%,var(--paper-2))}
.cev.award{border-left-color:var(--award);
  background:color-mix(in srgb,var(--award) 13%,var(--paper-2))}
.cev b{display:block;font-size:.68rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cev em{display:block;font-style:normal;font-size:.62rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cev:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}

.cal-key{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:.9rem;
  padding-top:.8rem;border-top:1px solid var(--rule);font-size:.76rem;color:var(--ink-3)}
.cal-key span{display:inline-flex;align-items:center;gap:.4rem}
.cal-key .k{width:.7rem;height:.7rem;border-radius:3px;background:var(--hearing)}
.cal-key .k.evidence{background:var(--evidence)}
.cal-key .k.notice{background:var(--notice)}
.cal-key .k.award{background:var(--award)}

@media (max-width:820px){
  .cal-cell{min-height:4.4rem}
  .cev em{display:none}
}

/* today's hearing rows lift like everything else you can open */
.hear{transition:border-color .14s var(--ease),transform .14s var(--ease),box-shadow .14s var(--ease)}
.hear:hover{box-shadow:var(--shadow-sm)}

@media (prefers-reduced-motion:reduce){
  .bigchip,.bigchip::after,.wev,.cev,.hear,.wn-btn,.card{transition:none}
  .bigchip:hover,.wev:hover,.cev:hover,.hear:hover,.wn-btn:hover{transform:none}
}

/* the same surface on the rest of the product, so nothing reads as a
   different app once you leave Home */
.kv{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;
  padding:1.15rem 1.25rem;box-shadow:var(--shadow), inset 0 1px 0 var(--glass-edge);
}
.clock,.tpl{
  border-radius:12px;box-shadow:var(--shadow-sm), inset 0 1px 0 var(--glass-edge);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),border-color .14s var(--ease);
}
.tpl:hover{transform:translateY(-1px);box-shadow:var(--shadow), inset 0 1px 0 var(--glass-edge)}
.actionbar{
  border-radius:14px;box-shadow:var(--shadow-sm), inset 0 1px 0 var(--glass-edge);
}

/* the docket row lifts like everything else that opens */
.crm-row{transition:background .14s var(--ease)}

/* status tones pick up the new hues rather than one blue for everything */
.tone-good{color:var(--navy)}
.tone-warn{color:var(--gold-ink)}
.tone-done{color:var(--navy)}
.tone-quiet{color:var(--ink-3)}

/* ============================================================
   coloured lift
   A hover shadow tinted with whatever the thing is about — navy for a case,
   gold for a dated thing, brick for something overdue — so the depth carries
   the same meaning the colour does.
   ============================================================ */

/* The panels are containers, not controls: hovering one lifts its shadow a
   little and nothing moves. Only the things you actually click travel. */
.card{transition:box-shadow .22s var(--ease-out), border-color .22s var(--ease)}
.hcol > .card:hover{
  border-color:var(--rule-2);
  box-shadow:
    0 14px 30px -22px color-mix(in srgb,var(--navy-brand) 34%,transparent),
    0 2px 8px -5px color-mix(in srgb,var(--navy-brand) 16%,transparent),
    inset 0 1px 0 var(--glass-edge);
}
.card-start:hover{
  box-shadow:
    0 14px 30px -22px color-mix(in srgb,var(--gold) 55%,transparent),
    0 2px 8px -5px color-mix(in srgb,var(--gold) 32%,transparent),
    inset 0 1px 0 var(--glass-edge);
}

.hear:hover{
  border-color:var(--navy);
  box-shadow:0 10px 22px -14px color-mix(in srgb,var(--navy-brand) 60%,transparent);
}
.recent-row:hover,.act:hover{
  box-shadow:0 8px 18px -12px color-mix(in srgb,var(--navy-brand) 45%,transparent);
}
.agroup:hover{
  box-shadow:0 10px 22px -14px color-mix(in srgb,var(--navy-brand) 42%,transparent);
}
.wev:hover,.cev:hover{
  box-shadow:0 8px 16px -10px color-mix(in srgb,var(--navy-brand) 55%,transparent);
}
.wev.evidence:hover,.cev.evidence:hover{
  box-shadow:0 8px 16px -10px color-mix(in srgb,var(--gold) 85%,transparent);
}
.cev.award:hover{
  box-shadow:0 8px 16px -10px color-mix(in srgb,var(--brick) 60%,transparent);
}
.tpl:hover{
  box-shadow:0 10px 24px -16px color-mix(in srgb,var(--navy-brand) 45%,transparent),
             inset 0 1px 0 var(--glass-edge);
}
.wn-btn:hover{
  box-shadow:0 6px 14px -9px color-mix(in srgb,var(--navy-brand) 55%,transparent);
}

@media (prefers-reduced-motion:reduce){
  .card,.hcol > .card:hover{transition:none}
}

/* ---------- needs action: the four modes of work ---------- */
.gchips{display:flex;flex-wrap:wrap;gap:.35rem;margin:-.25rem 0 .75rem}
.gchip{
  display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.76rem;
  cursor:pointer;color:var(--ink-2);background:var(--paper);
  border:1px solid var(--rule);border-radius:999px;padding:.24rem .6rem;
  transition:border-color .14s var(--ease),color .14s var(--ease),
             background .14s var(--ease),box-shadow .14s var(--ease);
}
.gchip span{
  font-family:var(--f-type);font-size:.66rem;color:var(--ink-3);
  background:var(--paper-3);border-radius:20px;padding:0 .32rem;
}
.gchip:hover{border-color:var(--navy);color:var(--navy);
  box-shadow:0 6px 14px -9px color-mix(in srgb,var(--navy-brand) 55%,transparent)}
.gchip.on{background:var(--navy);border-color:var(--navy);color:#fff;
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--navy-brand) 70%,transparent)}
.gchip.on span{background:rgba(255,255,255,.22);color:#fff}
:root[data-theme="dark"] .gchip.on{color:#0B1420}
:root[data-theme="dark"] .gchip.on span{background:rgba(0,0,0,.25);color:#0B1420}
/* the waiting pile is not work you can do, so it reads quieter */
.gchip.g-waiting.on{background:var(--ink-3);border-color:var(--ink-3)}

/* the intake page is the same card language as Home, just roomier */
.card-start-lg{padding:1.5rem 1.6rem}
.card-start-lg h3{font-size:1.5rem}
.card-start-lg .start-copy p{max-width:56ch;font-size:.92rem;line-height:1.55}
.card-start-lg .start-actions{margin-top:1.3rem;gap:.7rem}
.card-start-lg .bigchip{padding:1rem 1.15rem}
.card-start-lg .bigchip b{font-size:1.05rem}
.card-start-lg .bigchip em{font-size:.8rem;margin-top:.15rem}

/* ============================================================
   the welcome tour
   Temporary — a loud button while AMCC are first finding their way around.
   ============================================================ */

.topbar{
  display:flex;justify-content:center;align-items:center;gap:.5rem;
  padding:.9rem 2rem 0;
}
.tourbtn{
  display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-size:.88rem;
  font-weight:600;cursor:pointer;color:var(--navy-brand);
  background:linear-gradient(135deg,#FBDA95,var(--gold));
  border:1px solid color-mix(in srgb,var(--gold) 70%,#000);
  border-radius:999px;padding:.5rem 1.15rem;
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--gold) 90%,transparent),
             inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out);
}
.tourbtn svg{width:16px;height:16px}
.tourbtn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px -14px color-mix(in srgb,var(--gold) 95%,transparent),
             inset 0 1px 0 rgba(255,255,255,.7);
}
/* a slow pulse until it has been taken once — it is the first thing to do */
@keyframes tour-pulse{
  0%,100%{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--gold) 90%,transparent),
                     0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent),
                     inset 0 1px 0 rgba(255,255,255,.6)}
  50%    {box-shadow:0 10px 24px -12px color-mix(in srgb,var(--gold) 90%,transparent),
                     0 0 0 10px transparent,
                     inset 0 1px 0 rgba(255,255,255,.6)}
}
.tourbtn.fresh{animation:tour-pulse 2.6s var(--ease) infinite}
.tourbtn.fresh:hover{animation:none}
@media (max-width:760px){ .topbar{padding:.7rem 1rem 0} }

.tour{position:fixed;inset:0;z-index:80}
/* the whole screen dimmed, with the subject punched out of it — nothing is
   drawn over the thing being described and nothing is blurred */
.tour-veil{
  position:absolute;inset:0;
  background:color-mix(in srgb,var(--navy-brand) 62%,transparent);
  transition:clip-path .34s var(--ease-out);
}
.tour-arrow{
  position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;
  fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;opacity:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  transition:opacity .2s var(--ease);
}
.tour-pop{
  position:fixed;width:min(23rem,calc(100vw - 24px));z-index:2;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:16px;
  padding:1.1rem 1.2rem;box-shadow:0 26px 60px -22px rgba(0,0,0,.5),
    inset 0 1px 0 var(--glass-edge);
  transition:left .34s var(--ease-out),top .34s var(--ease-out);
}
.tour-pop.no-anim{transition:none}
.tour-pop.centred{left:50%;top:50%;transform:translate(-50%,-50%)}
.tour-step{font-family:var(--f-type);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.tour-pop h3{font-family:var(--f-display);font-size:1.18rem;letter-spacing:-.015em;
  margin:.25rem 0 .45rem;text-wrap:balance}
.tour-body{color:var(--ink-2);font-size:.89rem;line-height:1.55;margin:0}
.tour-dots{display:flex;gap:.28rem;margin:.9rem 0 .8rem}
.tour-dots i{width:.4rem;height:.4rem;border-radius:50%;background:var(--rule-2);
  transition:width .24s var(--ease-out),background .24s var(--ease)}
.tour-dots i.on{background:var(--gold);width:1.1rem;border-radius:20px}
.tour-acts{display:flex;align-items:center;gap:.4rem}
.tour-acts .grow{flex:1}
.tour-skip{background:none;border:0;cursor:pointer;font:inherit;font-size:.8rem;
  color:var(--ink-3);padding:.3rem 0}
.tour-skip:hover{color:var(--clay)}
.tour-acts button[disabled]{opacity:.4;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .tour-veil,.tour-pop,.tour-arrow,.tour-dots i{transition:none}
  .tourbtn.fresh{animation:none}
}

/* the card's words cross-fade between steps rather than snapping */
.tour-copy{transition:opacity .16s var(--ease)}
.tour-copy.swapping{opacity:0}

/* ============================================================
   the call log
   Their words: "that's pretty much our bible". Every call in and out, with
   what was said — so the form is one row and the log below it reads like one.
   ============================================================ */

.callform{
  display:grid;gap:.7rem .9rem;
  grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:end;
}
.cf-dir{display:inline-flex;border:1px solid var(--rule);border-radius:999px;
  padding:2px;background:var(--paper);align-self:end;height:2.3rem}
.cf-way{
  font:inherit;font-size:.8rem;cursor:pointer;border:0;border-radius:999px;
  padding:0 .8rem;background:none;color:var(--ink-3);
  transition:background .14s var(--ease),color .14s var(--ease);
}
.cf-way.on{background:var(--navy);color:#fff}
:root[data-theme="dark"] .cf-way.on{color:#08101F}
.cf-notes{grid-column:1/-1}
.cf-notes textarea{
  font:inherit;font-size:.9rem;line-height:1.5;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:9px;
  padding:.55rem .7rem;resize:vertical;width:100%;
}
.cf-notes textarea:focus{outline:none;border-color:var(--navy)}
.cf-go{grid-column:1/-1;display:flex;justify-content:flex-end}

/* who applied to correct the award — one line each, both parties sometimes */
.applicants{list-style:none;margin:.2rem 0 0;padding:0}
.applicants li{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  gap:.7rem;align-items:baseline;padding:.5rem .3rem;
  border-bottom:1px solid var(--rule-2);
}
.applicants li:last-child{border-bottom:0}
.ap-when{font-family:var(--f-type);font-size:.74rem;color:var(--ink-3)}

.callday{margin-top:1rem}
.callday:first-of-type{margin-top:.3rem}
.cd-head{
  font-family:var(--f-type);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
  padding:0 0 .4rem;border-bottom:1px solid var(--rule);margin-bottom:.45rem;
}
.call{
  display:grid;grid-template-columns:2.6rem 5rem minmax(0,1fr) auto;
  gap:.7rem;align-items:baseline;padding:.55rem .3rem;
  border-bottom:1px solid var(--rule-2);
}
.call:last-child{border-bottom:0}
.c-way{
  font-family:var(--f-type);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  text-align:center;border-radius:20px;padding:.1rem 0;
  background:var(--hearing-soft);color:var(--navy);
}
.call.in .c-way{background:var(--evidence-soft);color:var(--gold-ink)}
.c-when{font-family:var(--f-type);font-size:.78rem;color:var(--ink-2);white-space:nowrap}
.c-body{min-width:0}
.c-body b{display:block;font-size:.82rem;color:var(--ink)}
.c-notes{display:block;font-size:.9rem;color:var(--ink-2);white-space:pre-wrap;
  overflow-wrap:anywhere}
.c-drop{
  background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:1.1rem;
  line-height:1;padding:0 .2rem;opacity:0;transition:opacity .14s var(--ease)
}
.call:hover .c-drop{opacity:1}
.c-drop:hover{color:var(--clay)}

@media (max-width:700px){
  .callform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cf-dir{grid-column:1/-1;justify-self:start}
  .call{grid-template-columns:2.6rem 5rem minmax(0,1fr);row-gap:.2rem}
  .c-drop{grid-column:3;justify-self:end;opacity:1}
}

/* The evidence date is a guideline — on a month view it would otherwise fill
   every cell and crowd out the hearings, which are the dates that matter. */
.cev.tiny{
  display:flex;align-items:center;gap:.3rem;border-left-width:2px;
  background:none;padding:.1rem .3rem;
  font-family:var(--f-type);font-size:.62rem;color:var(--ink-3);
}
.cev.tiny i{width:.34rem;height:.34rem;border-radius:50%;background:var(--evidence);flex:none}
.cev.tiny:hover{background:var(--evidence-soft);box-shadow:none;transform:none}