:root{
  /* blue — the primary colour of the app */
  --ink:#123A63;
  --ink-2:#17497C;
  --ink-3:#1D5C97;
  --sky:#2F7FD4;
  --sky-soft:#E7F0FD;
  /* paper and surfaces, tinted very slightly blue */
  --paper:#F3F8FD;
  --surface:#FFFFFF;
  --sunk:#EAF2FC;
  /* red stays only for danger: errors, delete, department alerts */
  --tape:#B3202C;
  --tape-soft:#FBEAEB;
  /* pastel green — anything settled, paid, approved, filed */
  --seal:#137A52;
  --seal-soft:#E3F5EC;
  --mint:#3FAE85;
  /* orange — anything awaiting action, pending, in review */
  --amber:#B45B0D;
  --amber-soft:#FFF1E0;
  --orange:#F08A2E;
  /* text and rules */
  --slate:#4E5F79;
  --slate-2:#8496AE;
  --rule:#DCE6F2;
  --rule-2:#EAF1F9;
  /* depth */
  --shadow:0 1px 2px rgba(18,58,99,.05),0 10px 26px -16px rgba(18,58,99,.28);
  --shadow-lg:0 2px 5px rgba(18,58,99,.07),0 20px 42px -20px rgba(18,58,99,.38);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* the HTML hidden attribute always wins over display rules */
html{-webkit-text-size-adjust:100%}
/* page background across the app: blue → aqua → pastel green → soft orange */
body{
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(240,138,46,.13), transparent 62%),
    radial-gradient(900px 520px at 4% 108%, rgba(63,174,133,.16), transparent 60%),
    linear-gradient(155deg,#E9F3FE 0%,#E6F4F8 40%,#E7F6EE 70%,#FCF2E6 100%)
    fixed !important;
  min-height:100vh;
}
body{
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:14px;
  line-height:1.5;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ── demo chrome ─────────────────────────────────────── */
.demo-bar{
  position:sticky;top:0;z-index:50;
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:10px 18px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.demo-tag{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.2);
  padding:3px 8px;border-radius:3px;white-space:nowrap;
}
.demo-nav{display:flex;gap:4px;flex-wrap:wrap}
.demo-nav button{
  font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;font-weight:500;
  background:none;border:0;border-radius:5px;
  color:rgba(255,255,255,.55);
  padding:6px 11px;cursor:pointer;
  transition:background .12s,color .12s;
}
.demo-nav button:hover{color:#fff;background:rgba(255,255,255,.08)}
.demo-nav button[aria-current="true"]{color:var(--ink);background:#fff}
.demo-nav button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ── app frame ───────────────────────────────────────── */
.frame{display:flex;min-height:calc(100vh - 45px);background:var(--paper);position:relative}
.rail{
  width:196px;flex-shrink:0;background:var(--ink);
  padding:22px 0;display:flex;flex-direction:column;
  transition:width .18s ease, padding .18s ease;
}
/* ── collapsible menu ──────────────────────────────────────────────────
   The rail collapses to nothing and the arrow tucks against the left edge,
   so the tables and charts get the whole width on a laptop screen. */
/* min-width:0 is load-bearing — a flex item defaults to min-width:auto, which
   refuses to shrink below its content and would ignore width:0 entirely. */
.frame.rail-hidden .rail{
  width:0;min-width:0;padding-left:0;padding-right:0;overflow:hidden;
}
.rail-toggle{
  position:absolute;top:12px;left:196px;z-index:5;
  width:22px;height:34px;margin-left:-11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--slate);
  border:1px solid var(--rule);border-radius:5px;
  font-size:14px;line-height:1;cursor:pointer;
  box-shadow:0 1px 4px rgba(20,33,61,.12);
  transition:left .18s ease, background .12s, color .12s;
}
.rail-toggle:hover{background:var(--sky-soft);color:var(--ink)}
.rail-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.frame.rail-hidden .rail-toggle{left:0;margin-left:6px}
.wordmark{
  padding:0 20px 22px;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;
  letter-spacing:-.02em;color:#fff;line-height:1.25;
}
.wordmark span{color:var(--slate-2);font-weight:500;display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.rail nav{display:flex;flex-direction:column;gap:1px;padding:0 10px}
.rail nav a{
  color:rgba(255,255,255,.6);text-decoration:none;
  padding:8px 10px;border-radius:5px;font-size:13px;
  display:flex;justify-content:space-between;align-items:center;
}
.rail nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.rail nav a.on{background:var(--ink-3);color:#fff;font-weight:500}
.rail nav a b{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;color:rgba(255,255,255,.45)}
.rail-foot{margin-top:14px;padding:14px 20px 0;border-top:1px solid rgba(255,255,255,.1);margin-left:10px;margin-right:10px}
.rail-foot p{color:rgba(255,255,255,.85);font-size:12.5px;font-weight:500}
.rail-foot small{color:var(--slate-2);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:var(--surface);border-bottom:1px solid var(--rule);
  padding:16px 26px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:16px;flex-wrap:wrap;
}
h1{font-family:"Archivo",sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em}
.topbar .sub{color:var(--slate);font-size:12.5px;margin-top:2px}
.body{padding:22px 26px 60px;flex:1}

/* ── buttons ─────────────────────────────────────────── */
.btn{
  font-family:"IBM Plex Sans",sans-serif;font-size:13px;font-weight:500;
  background:var(--ink);color:#fff;border:0;border-radius:5px;
  padding:9px 15px;cursor:pointer;transition:background .12s;
}
.btn:hover{background:var(--ink-3)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--rule)}
.btn.ghost:hover{background:var(--rule-2)}
.btn.tape{background:var(--tape)}
.btn.tape:hover{background:#951a24}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── tiles ───────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:7px;overflow:hidden;margin-bottom:22px}
.tile{background:var(--surface);padding:11px 16px;
      display:flex;flex-direction:column;justify-content:center}
/* A tile that narrows the list is a button, and has to look like one you can
   press — and, once pressed, like one that is down. */
button.tile{border:0;text-align:left;font:inherit;width:100%;cursor:pointer;
            border-radius:0;transition:background .12s}
button.tile:hover{background:#F4F9FF}
button.tile:focus-visible{outline:2px solid var(--sky);outline-offset:-2px}
button.tile[aria-current="true"]{background:var(--sky-soft);box-shadow:inset 0 0 0 1px var(--sky)}
/* The types wrap to a second row rather than squeezing. auto-fit fits as many
   as will hold their minimum and moves the rest down, so four sit on one line
   today and seven — once Writ, Recovery and DRC-07 Order are in play — become
   two rows of readable tiles instead of seven cramped ones. */
.type-tiles{margin:0;grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
/* Above the tablet break the row is exactly one tile per type (--n is set
   on the element by the template), so it never breaks into six-and-one. */
@media (min-width:981px){
  .type-tiles{grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}
}
.type-tiles .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.type-tiles .num{font-size:21px}
.tile .lab{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.tile .num{font-family:"Archivo",sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em;margin-top:3px;line-height:1.05;font-variant-numeric:tabular-nums}
.tile .amt{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--slate);margin-top:3px}
.tile.live .num{color:var(--tape)}
.tile.done .num{color:var(--seal)}
/* ── tiles + updates, side by side ────────────────────────────────────
   The tiles are capped at 720px, which left the rest of the row empty; the
   updates feed fills it instead of adding another band down the page. */
/* Tiles on the left, the month calendar in the space beside them — the two
   panels the same height, top and bottom edges level, so the row reads as one
   band rather than a short box with a tall one beside it. The tiles are the
   ones that stretch, and their contents sit centred in the height they are
   given rather than clinging to the top of it. */
.tiles-row{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:14px;align-items:stretch;margin-bottom:16px;
}
/* No height:100% here any more. It dated from the single band of tiles, and
   inside the stack it made BOTH bands claim the whole height — the types took
   it and the totals were squeezed to a two-pixel sliver. The stack decides
   heights now. */
.tiles-row .tiles{margin-bottom:0}
/* Two bands of tiles in the left column, sharing the height of the month
   beside them, so all three panels end level. */
/* The stack takes its natural height — capping it at 100% of the row made the
   row's height a circular question and clipped the second band of types the
   moment there was one. The grid row grows to whichever side is taller and
   the month stretches to meet it, so the two still end level. */
.tiles-stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.tiles-row .cal{height:100%}
/* The types take the height they need — one row or two — and the totals take
   what is left. Splitting the stack evenly clipped the second row of types the
   moment there was one, because .tiles hides its overflow. The type rule sits
   AFTER the general one on purpose: both are two classes, so order decides. */
.tiles-stack .tiles{flex:1 1 auto;margin:0}
.tiles-stack .tiles.type-tiles{flex:0 0 auto}
.tiles-stack .tile{padding:9px 16px}
@media (max-width:980px){
  .tiles-row{grid-template-columns:1fr}
  .tiles-row .tiles{height:auto}
  .tiles-stack{height:auto}
}

/* ── month calendar (dashboard, beside the tiles) ──────────────────
   Small on purpose: it answers "what is coming this month" at a glance, and
   the diary answers everything else. A day with something on it is a link to
   the case; the dots say what kind, in the same colours the rest of the app
   uses for a hearing, a notice, an order and an appeal. */
.cal{
  border:1px solid var(--rule);border-radius:7px;background:var(--surface);
  overflow:hidden;
}
.cal-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 11px;border-bottom:1px solid var(--rule);background:#EFF5FC;
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate-2);font-weight:600;
}
/* The head is small-caps grey, and a link inheriting that colour did not look
   like one — people did not know the diary was a click away. It takes the
   link blue and an underline on hover instead. */
.cal-link{color:var(--sky);text-decoration:none;font-weight:700;
          display:inline-flex;align-items:center;gap:4px}
.cal-link span{font-size:11px;opacity:.8;transition:transform .12s ease}
.cal-link:hover{color:var(--ink-3);text-decoration:underline}
.cal-link:hover span{opacity:1;transform:translateX(2px)}
.cal-link:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:3px}
/* minmax(0,1fr), not 1fr: a grid column's automatic minimum is its
   content, so one long company name widened its column and pushed
   Sunday off the right edge. */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--rule-2);
          padding:1px}
.cal-dow{
  background:var(--surface);text-align:center;font-size:9px;font-weight:700;
  letter-spacing:.06em;color:var(--slate-2);padding:4px 0;
}
.cal-day{
  background:var(--surface);min-height:27px;padding:2px 0;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11.5px;color:var(--ink);text-decoration:none;
}
.cal-day .n{font-family:"IBM Plex Mono",monospace;line-height:1.1}
.cal-day.out .n{color:var(--slate-2);opacity:.45}
.cal-day.we{background:#FAFCFF}
.cal-day.today .n{
  background:var(--ink);color:#fff;border-radius:50%;
  width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;
}
.cal-day.has{font-weight:600}
.cal-day.has:hover{background:var(--sky-soft)}
.cal-day .dots{display:flex;gap:2px;align-items:center;min-height:5px}
.cal-day .dots i{width:5px;height:5px;border-radius:50%;background:var(--slate-2)}
.cal-day .dots i.k-hearing{background:var(--tape)}
.cal-day .dots i.k-order{background:var(--amber)}
.cal-day .dots i.k-notice{background:var(--sky)}
.cal-day .dots i.k-appeal{background:var(--seal)}
/* a date the notice itself set for a reply — the one that bites */
.cal-day .dots i.k-due{background:var(--amber)}
/* a computed appeal deadline: the last date reads as hard as it is, the
   condonable window softer, because only one of them is a right */
.cal-day .dots i.k-limit{background:var(--tape)}
.cal-day .dots i.k-condone{background:#fff;box-shadow:inset 0 0 0 1.5px var(--tape)}
.cal-day.has .dots i.k-due{box-shadow:0 0 0 2px var(--amber-soft)}
.cal-key{
  display:flex;flex-wrap:wrap;gap:3px 10px;padding:5px 11px;
  border-top:1px solid var(--rule);font-size:10px;color:var(--slate-2);
}
.cal-key span{display:inline-flex;align-items:center;gap:4px}

/* The large calendar — the diary's own, across the full width. Each day has
   room for what is actually on it, so the dots give way to the thing itself. */
.cal-lg .cal-head{font-size:11px;padding:9px 14px}
.cal-lg .cal-dow{font-size:10px;padding:6px 0}
.cal-lg .cal-day{min-height:74px;align-items:stretch;padding:5px 7px;gap:3px}
.cal-lg .cal-day .n{font-size:13px;text-align:left;line-height:1.2}
.cal-lg .cal-day.today .n{width:21px;height:21px}
.cal-lg .cal-day .dots{display:none}
.cal-lg .cal-day .ev{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.cal-lg .cal-day .ev b,.cal-lg .cal-day .ev small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-lg .cal-day .ev b{
  font-size:10.5px;font-weight:600;line-height:1.25;
  padding:1px 5px;border-radius:3px;background:var(--sunk);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-lg .cal-day .ev b.k-hearing{background:var(--tape-soft);color:var(--tape)}
.cal-lg .cal-day .ev b.k-due{background:var(--amber-soft);color:var(--amber)}
.cal-lg .cal-day .ev b.k-limit{background:var(--tape);color:#fff}
.cal-lg .cal-day .ev b.k-condone{background:var(--tape-soft);color:var(--tape);
  box-shadow:inset 0 0 0 1px var(--tape)}
.cal-lg .cal-day .ev small{
  font-size:9.5px;color:var(--slate-2);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:820px){
  .cal-lg .cal-day{min-height:52px}
  .cal-lg .cal-day .ev{display:none}
  .cal-lg .cal-day .dots{display:flex;justify-content:center}
}
.cal-key i{width:5px;height:5px;border-radius:50%;display:inline-block}
.cal-key i.k-hearing{background:var(--tape)}
.cal-key i.k-notice{background:var(--sky)}
.cal-key i.k-order{background:var(--amber)}
.cal-key i.k-appeal{background:var(--seal)}
.cal-key i.k-due{background:var(--amber)}
.cal-key i.k-limit{background:var(--tape)}
.cal-key i.k-condone{background:#fff;box-shadow:inset 0 0 0 1.5px var(--tape)}

/* ── scope selector (entity / group — governs the whole page) ─────── */
.scope{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--rule);border-radius:7px;
  padding:11px 14px;margin-bottom:16px;box-shadow:var(--shadow);
}
.scope .lab{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.scope-mode{display:inline-flex;background:var(--sunk);border:1px solid var(--rule);border-radius:8px;padding:3px}
.scope-mode button{
  font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;font-weight:600;
  background:none;border:0;border-radius:6px;color:var(--slate);padding:7px 18px;cursor:pointer;
  transition:background .12s,color .12s;
}
.scope-mode button:hover{color:var(--ink)}
.scope-mode button[aria-current="true"]{background:var(--ink);color:#fff}
.scope-mode button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* The scope picker needs the room for a company name; State and Status are
   short, so they take what they need and the row still fits on one line. */
.scope .fg{margin:0;min-width:210px}
.scope .fg select{width:100%;font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;
  padding:7px 9px;border:1px solid var(--rule);border-radius:5px;
  background:var(--surface);color:var(--ink)}
.scope .fg select:focus{outline:2px solid var(--ink);outline-offset:-1px}
.scope .fg.narrow{min-width:145px}
.scope-now{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;
  color:var(--slate);background:var(--sky-soft);border-radius:5px;padding:5px 10px;
}

/* ── pie charts ──────────────────────────────────────── */
.charts-bar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:11px}
.charts-bar .lab{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.metric{display:inline-flex;background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:2px}
.metric button{
  font-family:"IBM Plex Sans",sans-serif;font-size:11.5px;font-weight:600;
  background:none;border:0;border-radius:5px;color:var(--slate);padding:6px 13px;cursor:pointer;
  transition:background .12s,color .12s;
}
.metric button:hover{color:var(--ink)}
.metric button[aria-current="true"]{background:var(--sky-soft);color:var(--ink-2)}
.metric button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* A count, not a warning: it sits on the same line as the toggle and reads
   in the same quiet grey as every other label there. */
.charts-note{font-size:11.5px;color:var(--slate-2)}

/* ── the Type a case reads as, from the owner's master ── */
.pill.ct{font-weight:600;white-space:nowrap}
.ct-assessment{background:var(--sky-soft);color:var(--ink-3);border:1px solid #C6DCF2}
.ct-scn{background:var(--tape-soft);color:var(--tape);border:1px solid var(--tape-line)}
.ct-drc-07-order{background:#FBE9EC;color:#8E1F3D;border:1px solid #F0C6D1}
.ct-appeal{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-line)}
.ct-gstat{background:#EFE8FB;color:#5B3FA8;border:1px solid #D9CCF4}
.ct-recovery{background:#FFE9E3;color:#B5471F;border:1px solid #F5C9B8}
.ct-hc-sc-writ{background:#E8F1F4;color:#37606E;border:1px solid #C4DBE3}
.ct-amnesty{background:#E6F4EC;color:#1D6B41;border:1px solid #BFE3CE}
.ct-others{background:var(--sunk);color:var(--slate-2);border:1px solid var(--rule)}

/* ── a clicked pie slice filters the list below ───────── */
.slice{cursor:pointer;transition:opacity .15s ease}
.pie .slice:hover{opacity:.82 !important}
.pie .slice:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.legend li.slice{border-radius:4px;padding-left:4px;margin-left:-4px}
.legend li.slice:hover{background:var(--sky-soft)}
.legend li.slice.picked{background:var(--sky-soft);font-weight:600}
.legend li.slice:focus-visible{outline:2px solid var(--sky);outline-offset:-1px}

.pick-note{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;
  background:var(--sky-soft);border:1px solid var(--rule);border-radius:5px;
  padding:3px 4px 3px 10px;color:var(--ink);
}
.pick-note button{
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;
  font:inherit;font-size:11px;padding:3px 8px;cursor:pointer;color:var(--slate);
}
.pick-note button:hover{border-color:var(--sky);color:var(--ink)}
.charts{
  /* min(360px, 100%) rather than a flat 360px: auto-fit will not shrink a
     track below its stated minimum, so on a 320px phone the card stayed 360px
     wide and carried the whole page sideways with it. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
  gap:14px;margin-bottom:20px;
}
.chart{padding:14px 16px 16px}
.chart-head{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:13px;color:var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--rule-2);
}
.chart-head small{
  font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2);white-space:nowrap;
}
.chart-body{display:flex;align-items:flex-start;gap:14px}
.pie{flex-shrink:0;line-height:0}
.pie svg{display:block}
.pie-empty{font-size:12px;color:var(--slate-2);font-style:italic;line-height:1.4;width:160px}
/* max-height tracks the pie diameter in dashboard.js, so a long legend scrolls
   instead of making the card taller than the chart beside it. */
.legend{list-style:none;margin:0;padding:0;flex:1;min-width:0;max-height:160px;overflow-y:auto}
/* swatch in the first column, name and figure stacked in the second, so a long
   company name gets the full width instead of being crushed to an ellipsis */
.legend li{
  display:grid;grid-template-columns:9px 1fr;gap:0 7px;
  padding:3px 0;min-width:0;align-items:start;
}
.legend i{width:9px;height:9px;border-radius:2px;margin-top:3px}
.legend .lg-name{
  font-size:11.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0;
}
.legend .lg-val{
  grid-column:2;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--slate);white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* ── background analysis banner ──────────────────────────────────────
   Shown on the workspace while a case is being read, and after a job that
   failed. Sits above the liability strip because until it clears, the
   figures below it are not yet the case's figures. */
.job-strip{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 22px;font-size:13px;border-bottom:1px solid var(--rule);
}
.job-strip.running{background:#eff6ff;color:#1e40af;}
.job-strip.failed{background:#fef2f2;color:#991b1b;}
.job-strip span{flex:1;min-width:0;}
.job-strip .btn{flex:0 0 auto;}
.job-dot{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#2563eb;
  animation:job-pulse 1.4s ease-in-out infinite;
}
@keyframes job-pulse{0%,100%{opacity:.25;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){.job-dot{animation:none;opacity:.8;}}

/* ── liability strip + case notes, under the company name ───────────── */
.ws-strip{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  padding:10px 22px;background:var(--surface);border-bottom:1px solid var(--rule);
}
.liab-strip{
  flex:1;min-width:0;border:1px solid var(--rule);border-radius:7px;
  background:var(--surface);overflow:hidden;
}
.liab-strip > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;padding:9px 13px;font-size:12.5px;
}
.liab-strip > summary::-webkit-details-marker{display:none}
.liab-strip > summary:hover{background:#F4F9FF}
.liab-strip > summary:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.liab-strip .ls-lab{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:12.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.liab-strip .ls-fig{font-size:11.5px;color:var(--slate);white-space:nowrap;font-variant-numeric:tabular-nums}
.liab-strip .ls-total{
  margin-left:auto;font-size:13px;font-weight:600;color:var(--tape);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.liab-strip .ls-more{
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-2);
  font-weight:600;border:1px solid var(--rule);border-radius:4px;padding:2px 7px;white-space:nowrap;
}
.liab-strip[open] .ls-more::after{content:" ▲"}
.liab-strip:not([open]) .ls-more::after{content:" ▼"}
.liab-strip[open] > summary{border-bottom:1px solid var(--rule);background:var(--sunk)}
.note-print{display:flex;gap:8px;flex-shrink:0}
.note-print .btn{padding:8px 13px;font-size:12px}
@media (max-width:820px){
  .liab-strip .ls-fig{display:none}
  .note-print{width:100%}
}

/* ── printable case note ─────────────────────────────── */
.note-page{background:var(--paper)}
.note-bar{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:11px 22px;background:var(--surface);border-bottom:1px solid var(--rule);
}
.note-bar b{font-family:"Archivo",sans-serif;font-size:14px;color:var(--ink);display:block}
.note-bar small{display:block;font-size:11.5px;color:var(--slate);margin-top:1px}
.note-bar .btn[aria-current="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.note-sheet{
  max-width:900px;margin:22px auto 60px;background:var(--surface);
  border:1px solid var(--rule);border-radius:8px;padding:34px 40px;box-shadow:var(--shadow);
}
.note-meta{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2);
  font-weight:600;padding-bottom:12px;margin-bottom:22px;border-bottom:2px solid var(--ink);
}
.note-body{font-size:13.5px;line-height:1.62;color:#1B2A3D}
.note-body h1{font-family:"Archivo",sans-serif;font-size:21px;margin:0 0 14px;color:var(--ink)}
.note-body h2{font-family:"Archivo",sans-serif;font-size:16.5px;margin:26px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--rule);color:var(--ink)}
.note-body h3{font-family:"Archivo",sans-serif;font-size:14px;margin:20px 0 8px;color:var(--ink-2)}
.note-body h4,.note-body h5,.note-body h6{font-family:"Archivo",sans-serif;font-size:13px;margin:16px 0 6px;color:var(--ink-2)}
.note-body p{margin:0 0 11px}
.note-body ul,.note-body ol{margin:0 0 12px;padding-left:22px}
.note-body li{margin-bottom:4px}
.note-body hr{border:0;border-top:1px solid var(--rule);margin:22px 0}
.note-body blockquote{
  margin:0 0 14px;padding:10px 14px;background:var(--sky-soft);
  border-left:3px solid var(--sky);border-radius:0 5px 5px 0;font-size:13px;
}
.note-body code{font-family:"IBM Plex Mono",monospace;font-size:12px;background:var(--sunk);padding:1px 4px;border-radius:3px}
.note-body .tbl-wrap{overflow-x:auto;margin:0 0 16px}
.note-body table{width:100%;border-collapse:collapse;font-size:11.5px}
.note-body th{
  background:#EFF5FC;border:1px solid var(--rule);padding:6px 8px;
  font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);font-weight:600;
}
.note-body td{border:1px solid var(--rule-2);padding:6px 8px;vertical-align:top}
.note-body tbody tr:nth-child(even) td{background:#FAFCFF}
.note-empty{text-align:center;padding:40px 20px;color:var(--slate)}
.note-empty h2{font-family:"Archivo",sans-serif;font-size:17px;color:var(--ink);margin-bottom:10px}

@media print{
  .no-print{display:none !important}
  body.note-page{background:#fff}
  .note-sheet{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;padding:0}
  .note-body{font-size:10.5pt;line-height:1.5}
  .note-body table{font-size:8.5pt}
  .note-body h2{page-break-after:avoid}
  .note-body table,.note-body blockquote{page-break-inside:avoid}
  .note-body tr{page-break-inside:avoid}
  @page{margin:16mm 14mm}
}

/* ── GSTAT paper book ────────────────────────────────── */
.mode-item.gstat b::after{
  content:"GSTAT";font-family:"IBM Plex Sans",sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--amber);
  background:var(--amber-soft);border:1px solid #F6D0A6;border-radius:3px;
  padding:1px 5px;margin-left:7px;vertical-align:1px;
}
.paperbook-note{
  background:var(--amber-soft);border:1px solid #F6D0A6;border-left:3px solid var(--orange);
  border-radius:6px;padding:10px 13px;margin-bottom:16px;
  font-size:13px;font-weight:600;color:var(--amber);
}

.gstat{display:grid;grid-template-columns:320px minmax(0,1fr);gap:0;align-items:start}
.gstat-col{min-width:0}
.annex-rail{
  background:var(--surface);border-right:1px solid var(--rule);
  height:calc(100vh - 175px);overflow-y:auto;
}
.annex-head{
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);
  font-weight:600;padding:14px 16px 10px;border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.annex-list{padding:6px 8px 20px}
.annex-book{
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--slate-2);
  padding:11px 8px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* One entry is a row, not a card: the name and the page numbers on one
   line, the summary under them, a hairline between rows. Sixty entries as
   bordered, shadowed cards were twice the height and read as sixty things. */
.annex{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 10px;align-items:baseline;
  text-decoration:none;color:inherit;
  padding:9px 10px;border:0;border-bottom:1px solid var(--rule);border-left:3px solid transparent;
}
.annex:hover{background:#F4F9FF}
.annex.sel{background:#E7F0FD;border-left-color:var(--ink-3)}
.annex:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.annex .an-name{
  display:block;font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;
  font-weight:600;color:var(--ink);line-height:1.3;
}
.annex .an-brief{grid-column:1 / -1;display:block;font-size:11.5px;color:var(--slate);line-height:1.35}
.annex .an-page{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--slate-2);white-space:nowrap;text-align:right;
}
.annex .an-page i{font-style:normal;opacity:.8}
.annex.nopage .an-name{color:var(--slate)}
.annex.nopage .an-page i{color:var(--tape)}
.annex-empty{padding:18px 16px}

.gstat-viewer{padding:16px 20px;background:var(--paper)}
.gstat-bar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--rule);border-radius:7px;
  padding:10px 14px;margin-bottom:12px;box-shadow:var(--shadow);
}
.gstat-bar b{font-family:Archivo,sans-serif;font-size:13.5px;color:var(--ink)}
.gstat-bar small{display:block;font-size:11.5px;color:var(--slate);margin-top:2px}
.gstat-bar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gstat-bar-right .pill{background:var(--sunk);color:var(--slate)}
.gstat-frame{
  width:100%;height:calc(100vh - 265px);border:1px solid var(--rule);
  border-radius:7px;background:var(--surface);
}
@media (max-width:900px){
  .gstat{grid-template-columns:1fr}
  .annex-rail{height:auto;max-height:320px;border-right:0;border-bottom:1px solid var(--rule)}
  .gstat-frame{height:70vh}
}

.cut-note{font-size:11.5px;color:var(--slate-2);padding:9px 2px 0;font-style:italic}

/* ── tables ──────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:7px;overflow:hidden}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate-2);font-weight:600;padding:10px 14px;
  border-bottom:1px solid var(--rule);background:#EFF5FC;white-space:nowrap;
}
td{padding:11px 14px;border-bottom:1px solid var(--rule-2);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#F4F9FF}
.ent{font-weight:600}
.ent small{display:block;font-weight:400;color:var(--slate-2);font-size:11px;font-family:"IBM Plex Mono",monospace;margin-top:1px}
.num-r{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}

/* Sortable column headings.
   The faint double arrow says a column CAN be sorted; the solid single one
   says which column IS sorted and which way. Without the faint one there is
   nothing to tell the user the headings are clickable at all. */
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--ink);background:#E4EEFA}
th[data-sort] .sarr{display:inline-block;margin-left:5px;font-size:10px;
                    color:var(--slate-2);opacity:.45;font-family:system-ui,sans-serif}
th[data-sort]:hover .sarr{opacity:.8}
th[data-sort][aria-sort]{color:var(--ink)}
th[data-sort][aria-sort] .sarr{opacity:1;color:var(--sky)}
th[data-sort].num-r .sarr{margin-left:4px}

.pill{
  display:inline-block;font-size:10.5px;font-weight:600;
  padding:2px 7px;border-radius:3px;letter-spacing:.03em;white-space:nowrap;
}
.pill.gst{background:var(--ink);color:#fff}
.pill.court{background:var(--amber-soft);color:var(--amber);border:1px solid #F6D0A6}
.pill.it{background:#E4EFFA;color:var(--ink-3);border:1px solid #C6DCF2}
.pill.arb{background:#EFEAF4;color:#5B4380;border:1px solid #DCD2E8}
.pill.live{background:var(--tape-soft);color:var(--tape)}
.pill.disposed{background:var(--seal-soft);color:var(--seal)}
/* Fully paid / Dropped / Time barred — the matter is closed */
.pill.closed{background:var(--seal-soft);color:var(--seal)}
.pill.gstat-pill{background:var(--amber-soft);color:var(--amber);border:1px solid #F6D0A6}

.due{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600}
.due.hot{color:var(--tape)}
.due.calm{color:var(--slate)}

a.case-link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
a.case-link:hover{border-bottom-color:var(--tape);color:var(--tape)}

/* ── login ───────────────────────────────────────────── */
.login-wrap{min-height:calc(100vh - 45px);display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.login-art{
  background:var(--ink);color:#fff;padding:52px 46px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.login-art h2{font-family:"Archivo",sans-serif;font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1.1}
.login-art .lede{color:rgba(255,255,255,.62);margin-top:14px;font-size:14.5px;max-width:34ch;line-height:1.55}
.mini-chain{margin:38px 0;padding-left:2px}
.mini-chain div{display:flex;align-items:center;gap:11px;padding:5px 0;font-size:12px;color:rgba(255,255,255,.5)}
.mini-chain div .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);flex-shrink:0}
.mini-chain div.now{color:#fff}
.mini-chain div.now .dot{background:var(--tape);box-shadow:0 0 0 3px rgba(179,32,44,.28)}
.mini-chain .link{width:1px;height:13px;background:rgba(255,255,255,.22);margin-left:3px}
.login-art footer{color:rgba(255,255,255,.35);font-size:11.5px}

.login-form{padding:52px 46px;display:flex;flex-direction:column;justify-content:center;max-width:520px}
.login-form h3{font-family:"Archivo",sans-serif;font-weight:700;font-size:21px;letter-spacing:-.02em}
.login-form .hint{color:var(--slate);font-size:13px;margin-top:5px;margin-bottom:26px}
label{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin-bottom:5px}
input[type=text],input[type=email],input[type=tel],input[type=password],textarea{
  width:100%;padding:9px 11px;border:1px solid var(--rule);border-radius:5px;
  font-family:"IBM Plex Sans",sans-serif;font-size:13.5px;background:var(--surface);color:var(--ink);
}
input:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}
.field{margin-bottom:15px}
/* Company / Financial year / Case ID, side by side above the drop area.
   Collapses to one column on a narrow screen so the boxes stay usable. */
.pick3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.pick3 .field{margin-bottom:10px;min-width:0}
.pick3 select{width:100%;min-width:0}
@media (max-width:760px){.pick3{grid-template-columns:1fr}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}

.seg{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:15px}
.seg label{
  border:1px solid var(--rule);border-radius:6px;padding:11px 13px;cursor:pointer;
  text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--ink);
  background:var(--surface);margin:0;display:block;transition:border-color .12s,background .12s;
}
.seg label small{display:block;font-weight:400;color:var(--slate-2);font-size:11px;margin-top:2px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:checked + label{border-color:var(--ink);background:#E7F0FD;box-shadow:inset 0 0 0 1px var(--ink)}
.seg input:focus-visible + label{outline:2px solid var(--ink);outline-offset:2px}
.mand{
  background:var(--amber-soft);border:1px solid #F6D0A6;border-radius:5px;
  padding:8px 11px;font-size:12px;color:var(--amber);margin-bottom:15px;
}

/* ── flash / validation messages ─────────────────────── */
.flashes{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px}
.flash{border-radius:6px;padding:9px 12px;font-size:12.5px;line-height:1.45;border:1px solid transparent}
.flash.error{background:var(--tape-soft);border-color:#F0CDD0;color:var(--tape)}
.flash.success{background:var(--seal-soft);border-color:#B4E3CB;color:var(--seal)}

/* ── "under development" notice on the sign-in page ───── */
.dev-banner{background:var(--amber-soft);border:1px solid #F3D6AE;border-radius:6px;
  padding:10px 12px;margin:0 0 16px;font-size:12.5px;line-height:1.5;color:var(--amber)}
.dev-banner strong{display:block;margin-bottom:2px}

/* ── three-way segmented choice (CA / Advocate / Neither) ─ */
.seg-3{grid-template-columns:1fr 1fr 1fr}
.seg-3 label{padding:11px 11px}

/* ── OTP verify rows (email + mobile) ────────────────── */
.verify-row{display:flex;gap:8px;align-items:stretch}
.verify-row input{flex:1;min-width:0}
.verify-row .btn{white-space:nowrap;padding:9px 14px;align-self:stretch}
.v-otp{display:flex;gap:8px;align-items:stretch;margin-top:9px}
.v-otp .v-code{flex:1;min-width:0;letter-spacing:.28em;font-family:"IBM Plex Mono",monospace}
.v-otp .btn{white-space:nowrap;padding:9px 14px}
.v-msg{font-size:12px;margin-top:8px;line-height:1.45}
.v-msg.info{color:var(--ink-3)}
.v-msg.ok{color:var(--seal);font-weight:600}
.v-msg.err{color:var(--tape)}
.verify.done .verify-row input{background:var(--seal-soft);border-color:#B4E3CB;color:var(--seal);font-weight:500}

/* ── left-panel preview thumbnails (little screenshots) ── */
.art-shots{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin:32px 0}
.shot{margin:0}
.shot figcaption{margin-top:8px;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600}
.mini{height:80px;background:var(--paper);border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.28);overflow:hidden;padding:8px;display:flex;flex-direction:column;gap:5px}
.mini .top{height:8px;width:45%;background:var(--ink);border-radius:2px}
.mini .ln{height:6px;background:#D3E0EF;border-radius:3px}
.mini .ln.sh{width:55%}
/* dashboard: stat tiles + rows */
.md .tiles3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin:2px 0}
.md .tiles3 span{height:20px;background:#fff;border:1px solid var(--rule);border-radius:3px}
/* cases: table rows */
.mc .rowln{height:9px;background:#fff;border:1px solid var(--rule);border-radius:3px}
/* workspace: chain rail + document sheet */
.mw{flex-direction:row;gap:7px}
.mw .chainm{display:flex;flex-direction:column;gap:9px;padding-top:3px}
.mw .chainm i{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.mw .chainm i.hot{background:var(--tape)}
.mw .sheetm{flex:1;background:#fff;border:1px solid var(--rule);border-radius:4px;padding:7px;display:flex;flex-direction:column;gap:6px}
.mw .sheetm span{height:6px;background:#DCE6F2;border-radius:3px}
.mw .sheetm span.sh{width:60%}
/* reply: two columns */
.mr{flex-direction:row;gap:7px}
.mr .colm{flex:1;background:#fff;border:1px solid var(--rule);border-radius:4px;padding:7px;display:flex;flex-direction:column;gap:6px}
.mr .colm span{height:6px;background:#DCE6F2;border-radius:3px}
.mr .colm span.sh{width:55%}

@media (max-width:560px){
  .seg-3{grid-template-columns:1fr}
}

/* ── upload ──────────────────────────────────────────── */
.drop{
  border:2px dashed var(--rule);border-radius:8px;background:var(--surface);
  padding:34px;text-align:center;margin-bottom:18px;
}
.drop strong{font-family:"Archivo",sans-serif;font-size:15px;display:block;margin-bottom:5px}
.drop p{color:var(--slate);font-size:12.5px}
.forms-grid{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;justify-content:center}
.forms-grid span{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;
  border:1px solid var(--rule);border-radius:3px;padding:3px 7px;color:var(--slate);background:var(--paper);
}
.route{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:20px}
.route div{background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:14px}
.route div.p2{opacity:.55}
.route strong{font-size:13px;display:block}
.route small{color:var(--slate-2);font-size:11.5px}
.phase{
  font-family:"Archivo",sans-serif;font-size:9px;font-weight:700;letter-spacing:.09em;
  padding:2px 5px;border-radius:3px;text-transform:uppercase;float:right;
}
.phase.one{background:var(--seal-soft);color:var(--seal)}
.phase.two{background:var(--rule-2);color:var(--slate-2)}

/* ── workspace: THE CHAIN RAIL ───────────────────────── */
.ws{display:grid;grid-template-columns:264px 1fr 236px;gap:0;flex:1;min-height:0}
.ws-col{border-right:1px solid var(--rule);background:var(--surface);overflow:auto}
.ws-col:last-child{border-right:0;background:var(--paper)}
.ws-head{
  padding:11px 16px;border-bottom:1px solid var(--rule);background:#EFF5FC;
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);font-weight:600;
  position:sticky;top:0;z-index:2;
}
.chain{padding:16px 16px 26px}
.link-row{display:grid;grid-template-columns:16px minmax(0,1fr);gap:11px}
.spine{display:flex;flex-direction:column;align-items:center}
.node{
  width:11px;height:11px;border-radius:50%;background:var(--ink);
  flex-shrink:0;margin-top:4px;border:2px solid var(--surface);
  box-shadow:0 0 0 1.5px var(--ink);
}
.node.open{background:var(--surface);box-shadow:0 0 0 1.5px var(--tape)}
.node.here{background:var(--tape);box-shadow:0 0 0 1.5px var(--tape),0 0 0 4.5px rgba(179,32,44,.16)}
.thread{width:1.5px;flex:1;background:var(--rule);min-height:22px;margin:3px 0}
.thread.pending{background:none;border-left:1.5px dashed var(--tape);width:0}
.doc{padding-bottom:2px;cursor:pointer;border-radius:5px;margin:-4px -7px 0;padding:4px 7px 5px;overflow-wrap:anywhere}
.doc:hover{background:#F4F9FF}
.doc:focus-visible{outline:2px solid var(--ink);outline-offset:0}
.doc .form{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.doc .desc{font-size:11.5px;color:var(--slate);margin-top:1px;line-height:1.35}
.doc .meta{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--slate-2);margin-top:3px}
.doc.sel{background:#E7F0FD;box-shadow:inset 0 0 0 1px #C6DCF2}
.doc.sel:hover{background:#DFECFB}
.gap{
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--slate-2);
  padding:5px 0 5px;letter-spacing:.02em;
}
.doc.pending .form{color:var(--tape)}
.doc.pending .desc{color:var(--tape);opacity:.85}

.viewer{padding:22px 26px;background:var(--paper)}
.sheet{
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;
  padding:34px 38px;box-shadow:0 1px 3px rgba(20,33,61,.05);max-width:640px;margin:0 auto;
}
.sheet .gov{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-2);text-align:center;font-weight:600}
.sheet h4{font-family:"Archivo",sans-serif;font-size:15px;text-align:center;margin:7px 0 3px;letter-spacing:-.01em}
.sheet .ref{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--slate);text-align:center;padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:16px}
.sheet p{font-size:12.5px;color:#333A4D;margin-bottom:11px;line-height:1.6}
.sheet .mark{background:#FDF3C7;padding:1px 2px;border-bottom:1.5px solid #E8C84D}
.sheet table{margin:14px 0;font-size:11.5px;border:1px solid var(--rule)}
.sheet th{padding:6px 9px;font-size:9px;background:#EFF5FC}
.sheet td{padding:6px 9px;font-family:"IBM Plex Mono",monospace;font-size:11px}

.notes{padding:16px}
.note{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:11px 13px;margin-bottom:9px}
.note .tag{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tape);margin-bottom:4px}
.note p{font-size:12px;color:var(--slate);line-height:1.45}
.note .quote{border-left:2px solid #E8C84D;padding-left:8px;font-size:11.5px;color:#333A4D;font-style:italic;margin-bottom:6px}
.ws-cta{padding:14px 16px;border-top:1px solid var(--rule);background:var(--surface);position:sticky;bottom:0}
.ws-cta .btn{width:100%}
.ws-cta small{display:block;text-align:center;color:var(--slate-2);font-size:11px;margin-top:7px}

.case-meta{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.case-meta div .k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.case-meta div .v{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;margin-top:2px}

/* status of the matter — set here, read by the dashboard */
.status-set{display:block;padding-left:20px;border-left:1px solid var(--rule)}
.status-set .k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.status-row{display:flex;gap:6px;align-items:center;margin-top:3px}
.status-row select{
  font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;color:var(--ink);
  padding:5px 8px;border:1px solid var(--rule);border-radius:5px;background:var(--surface);
}
.status-row .btn{padding:6px 12px;font-size:12px}
.status-now{display:block;font-size:10.5px;margin-top:4px;font-style:italic}
.status-now.live{color:var(--tape)}
.status-now.closed{color:var(--seal)}

/* ── reply ───────────────────────────────────────────── */
.reply-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.step-head{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.step-n{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:10px;
  background:var(--ink);color:#fff;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;
}
.step-head h3{font-family:"Archivo",sans-serif;font-size:14.5px;letter-spacing:-.01em}
.step-sub{font-size:12px;color:var(--slate);margin-bottom:13px;padding-left:28px}
.q{background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:14px;margin-bottom:10px}
.q .qt{font-size:12.5px;font-weight:600;margin-bottom:3px;line-height:1.4}
.q .qw{font-size:11px;color:var(--slate-2);margin-bottom:9px;font-style:italic}
.q textarea{min-height:56px;resize:vertical;font-size:12.5px}
.q .ask{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--tape);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.draft{background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:22px 24px;font-size:12.5px;line-height:1.65;color:#333A4D}
.draft h5{font-family:"Archivo",sans-serif;font-size:12.5px;margin-bottom:10px;text-align:center}
.draft p{margin-bottom:10px}
.draft .num-para{padding-left:22px;text-indent:-22px}
.draft .num-para b{font-family:"IBM Plex Mono",monospace;font-weight:600;margin-right:8px}
.rev{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--tape-soft);border:1px solid #F0CDD0;border-radius:6px;
  padding:9px 13px;margin-top:12px;
}
.rev p{font-size:12px;color:var(--tape);font-weight:500}
.rev .dots{display:flex;gap:4px}
.rev .dots i{width:7px;height:7px;border-radius:50%;background:var(--tape);opacity:.28}
.rev .dots i.used{opacity:1}

.pane-actions{display:flex;gap:8px;margin-top:12px}

@media (max-width:1080px){
  .ws{grid-template-columns:230px 1fr}
  /* The notes column carries the Draft reply button — the main thing anyone
     comes to a workspace to do. It used to be hidden here, which removed that
     action entirely on a tablet or a phone. It now runs full width under the
     document instead, where there is room for it. */
  .ws{grid-template-areas:"chain viewer" "notes notes"}
  .ws-col.chain-col{grid-area:chain}
  .ws-col.viewer{grid-area:viewer}
  .ws-col.notes-col{grid-area:notes;border-right:0;border-top:1px solid var(--rule)}
  .reply-grid{grid-template-columns:1fr}
}
@media (max-width:840px){
  .login-wrap{grid-template-columns:1fr}
  .login-art{padding:34px 26px}
  .rail{display:none}
  .ws{grid-template-columns:1fr;grid-template-areas:"chain" "viewer" "notes"}
  .ws-col.chain-col{border-right:0;border-bottom:1px solid var(--rule)}
  .route{grid-template-columns:1fr}
  .body{padding:16px 14px 50px}
  .topbar{padding:14px 16px}
  .table-scroll{overflow-x:auto}
  table{min-width:640px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ── filter / sort bar ───────────────────────────────── */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:12px 14px;margin:0 0 18px}
.toolbar .fg{display:flex;flex-direction:column;gap:4px}
.toolbar label{margin:0}
.toolbar select{font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;padding:7px 9px;border:1px solid var(--rule);border-radius:5px;background:var(--surface);color:var(--ink);min-width:128px}
.toolbar select:focus{outline:2px solid var(--ink);outline-offset:-1px}
.toolbar .spacer{flex:1}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.chip-row .cl{font-size:11px;color:var(--slate-2);margin-right:2px}
.chip{font-size:11px;font-weight:500;background:var(--rule-2);color:var(--slate);border-radius:20px;padding:4px 10px;display:inline-flex;gap:6px;align-items:center}
.chip b{color:var(--ink);font-weight:600}
.chip button{border:0;background:none;color:var(--slate-2);cursor:pointer;font-size:13px;line-height:1;padding:0}

/* ── review status pills ─────────────────────────────── */
.pill.review{background:#FFF0DF;color:#B45B0D;border:1px solid #F6D0A6}
.pill.reviewed{background:var(--seal-soft);color:var(--seal);border:1px solid #B4E3CB}
.pill.rpending{background:#EDEFF4;color:var(--slate);border:1px solid #DADFEA}
.pill.none{background:#EEF2F8;color:var(--slate-2);border:1px solid var(--rule)}

/* ── translation banner ──────────────────────────────── */
.xlate{display:flex;gap:11px;align-items:flex-start;background:#EEF4FF;border:1px solid #CFDEF6;border-radius:7px;padding:11px 14px;margin:0 0 16px}
.xlate .ic{font-family:"Archivo",sans-serif;font-weight:800;font-size:10px;letter-spacing:.06em;color:var(--ink-3);background:#fff;border:1px solid #CFDEF6;border-radius:4px;padding:4px 7px;white-space:nowrap;text-transform:uppercase}
.xlate p{font-size:12px;color:var(--ink-3);line-height:1.5}
.xlate p small{color:var(--slate);display:block;margin-top:2px}
.xlate .tog{margin-left:auto;font-size:11.5px;color:var(--ink);border:1px solid #CFDEF6;background:#fff;border-radius:5px;padding:6px 10px;cursor:pointer;white-space:nowrap;font-weight:500}

/* ── annotation toolbar ──────────────────────────────── */
.anno{display:flex;gap:5px;padding:8px 12px;border-bottom:1px solid var(--rule);background:#EFF5FC;flex-wrap:wrap;position:sticky;top:0;z-index:2}
.anno button{font-size:11.5px;font-weight:500;background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:5px 9px;color:var(--slate);cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.anno button:hover{color:var(--ink);border-color:var(--slate-2)}
.anno button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.anno .liq{margin-left:auto;font-size:10.5px;color:var(--slate-2);font-style:italic;align-self:center}

/* ── reviewer flow ───────────────────────────────────── */
.rvbox{background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:15px;margin-top:14px}
.rvbox h4{font-family:"Archivo",sans-serif;font-size:13px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.rv-state{display:flex;align-items:center;gap:9px;background:#FFF0DF;border:1px solid #F6D0A6;border-radius:6px;padding:9px 12px;margin-bottom:12px;font-size:12px;color:#B45B0D;line-height:1.4}
.rv-people{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.rv-person{display:flex;align-items:center;gap:9px;font-size:12px}
.rv-person .av{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;flex-shrink:0}
.rv-person .who b{font-weight:600}
.rv-person .who .em{color:var(--slate);font-family:"IBM Plex Mono",monospace;font-size:10.5px;display:block}
.rv-person .st{margin-left:auto}

/* ── language + annexures ────────────────────────────── */
.langbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:12px;font-size:12px;color:var(--slate)}
.langbar select{font-size:12.5px;padding:6px 8px;border:1px solid var(--rule);border-radius:5px;background:var(--surface);color:var(--ink)}
.annex{background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:13px 15px;margin-top:12px}
.annex h4{font-family:"Archivo",sans-serif;font-size:12.5px;margin-bottom:10px}
.annex-item{display:flex;align-items:center;gap:9px;font-size:12px;padding:7px 0;border-bottom:1px solid var(--rule-2)}
.annex-item:last-child{border-bottom:0}
.annex-item .nm{flex:1}
.annex-item .nm small{display:block;color:var(--slate-2);font-size:10.5px;font-family:"IBM Plex Mono",monospace}
.annex-item .dl{font-size:11px;color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:4px 9px;cursor:pointer;background:var(--surface)}
.annex-item .dl:hover{border-color:var(--slate-2)}
.annex-item .miss{font-size:10.5px;color:var(--slate-2);font-style:italic}

/* ── attach formats ──────────────────────────────────── */
.attach{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;align-items:center}
.attach .cl{font-size:10.5px;color:var(--slate-2)}
.attach span{font-size:10.5px;border:1px solid var(--rule);border-radius:4px;padding:3px 8px;color:var(--slate);background:var(--paper);cursor:pointer}
.attach span:hover{border-color:var(--slate-2);color:var(--ink)}

/* ── court upload options ────────────────────────────── */
.opt-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.opt-card{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:15px 16px}
.opt-card .tag{font-family:"Archivo",sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tape);margin-bottom:6px}
.opt-card h4{font-family:"Archivo",sans-serif;font-size:14px;margin-bottom:5px}
.opt-card p{font-size:12px;color:var(--slate);line-height:1.5;margin-bottom:11px}
.charges{display:flex;align-items:center;gap:9px;background:var(--amber-soft);border:1px solid #F6D0A6;border-radius:6px;padding:9px 12px;font-size:12px;color:var(--amber);margin-top:10px}
.charges .amt{font-family:"IBM Plex Mono",monospace;font-weight:600;margin-left:auto}
.del-x{border:0;background:none;color:var(--slate-2);cursor:pointer;font-size:15px;line-height:1;padding:2px 6px;border-radius:4px}
.del-x:hover{color:var(--tape);background:var(--tape-soft)}

/* ── user management ─────────────────────────────────── */
.umeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:7px;overflow:hidden;margin-bottom:20px}
.umeta div{background:var(--surface);padding:14px 16px}
.umeta .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.umeta .v{font-family:"Archivo",sans-serif;font-weight:700;font-size:22px;margin-top:6px;line-height:1}
.umeta .v small{font-size:12px;color:var(--slate-2);font-weight:500}
.role-card{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:16px 18px;margin-bottom:14px}
.role-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.role-head h3{font-family:"Archivo",sans-serif;font-size:14.5px}
.role-badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:3px 7px}
.role-badge.up{background:var(--ink);color:#fff}
.role-badge.rev{background:#FFF0DF;color:#B45B0D;border:1px solid #F6D0A6}
.role-badge.mgmt{background:#E4EFFA;color:var(--ink-3);border:1px solid #C6DCF2}
.role-card>p{font-size:12px;color:var(--slate);margin-bottom:8px;line-height:1.5}
.slot{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--rule-2)}
.slot .av{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;flex-shrink:0}
.slot .av.empty{background:var(--paper);color:var(--slate-2);border:1px dashed var(--slate-2);font-size:15px}
.slot .who{flex:1;min-width:0}
.slot .who b{font-size:12.5px;font-weight:600}
.slot .who .em{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--slate);display:block;margin-top:1px}
.slot .who .em.empty{font-style:italic;color:var(--slate-2)}
.slot .act{font-size:11px;color:var(--slate);border:1px solid var(--rule);border-radius:5px;padding:5px 10px;cursor:pointer;background:var(--surface);white-space:nowrap}
.slot .act:hover{border-color:var(--slate-2);color:var(--ink)}

/* ── settings ────────────────────────────────────────── */
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.set-card{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:18px 20px}
.set-card.span2{grid-column:1 / -1}
.set-card h3{font-family:"Archivo",sans-serif;font-size:14.5px;margin-bottom:4px}
.set-card>p{font-size:12px;color:var(--slate);margin-bottom:14px;line-height:1.5}
.mod-list{display:flex;flex-direction:column;gap:9px}
.mod-opt{display:flex;align-items:center;gap:11px;border:1px solid var(--rule);border-radius:7px;padding:11px 13px;cursor:pointer}
.mod-opt.sel{border-color:var(--ink);background:#E7F0FD;box-shadow:inset 0 0 0 1px var(--ink)}
.mod-opt .tick{width:18px;height:18px;border-radius:4px;border:1px solid var(--slate-2);flex-shrink:0;display:grid;place-items:center;font-size:11px;color:#fff}
.mod-opt.sel .tick{background:var(--ink);border-color:var(--ink)}
.mod-opt .nm{flex:1;font-size:13px;font-weight:600}
.mod-opt .ph{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:3px}
.mod-opt .ph.one{background:var(--seal-soft);color:var(--seal)}
.mod-opt .ph.two{background:var(--rule-2);color:var(--slate-2)}
.integ{display:flex;align-items:center;gap:12px;border:1px solid var(--rule);border-radius:7px;padding:12px 14px;margin-bottom:10px}
.integ .logo{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;font-family:"Archivo",sans-serif;font-weight:800;font-size:12px;color:#fff;flex-shrink:0}
.integ .nm{flex:1}
.integ .nm b{font-size:13px}
.integ .nm small{display:block;color:var(--slate-2);font-size:11px;margin-top:1px}
.toggle{width:38px;height:22px;border-radius:20px;background:var(--rule);position:relative;cursor:pointer;flex-shrink:0;border:0}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle.on{background:var(--seal)}
.toggle.on::after{left:18px}
.alert-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--rule-2);font-size:12.5px}
.alert-row:first-of-type{border-top:0}
.alert-row .desc{flex:1}
.alert-row .desc b{font-size:12.5px}
.alert-row .desc small{display:block;color:var(--slate-2);font-size:11px;margin-top:1px}
.help-note{font-size:11.5px;color:var(--slate-2);font-style:italic;margin-top:6px;line-height:1.5}
@media (max-width:1080px){
  .set-grid{grid-template-columns:1fr}
  .opt-split{grid-template-columns:1fr}
}

/* (multi-screen demo toggles removed — each real page is its own document) */

/* ══ subscription page ══════════════════════════════════ */
.app-top{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surface);border-bottom:1px solid var(--rule);
  padding:14px 22px;
}
.wordmark2{font-family:"Archivo",sans-serif;font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.wordmark2 span{color:var(--slate-2);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-left:9px}

.sub-layout{
  max-width:1180px;margin:22px auto;padding:0 22px 60px;
  display:grid;grid-template-columns:1fr 400px;gap:28px;align-items:start;
}

/* ── left: demo ── */
.demo-title{font-family:"Archivo",sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em}
.demo-lede{color:var(--slate);font-size:13.5px;margin:4px 0 18px}
.demo-block{margin-bottom:22px}
.demo-lab{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);font-weight:600;margin-bottom:9px}

/* ── carousel ── */
.carousel{position:relative;border-radius:10px;overflow:hidden;background:var(--ink);border:1px solid var(--rule)}
.c-viewport{overflow:hidden}
.c-track{display:flex;transition:transform .5s ease}
.c-slide{min-width:100%;box-sizing:border-box}
.ph-photo,.ph-video{
  height:270px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
}
.ph-photo{background:linear-gradient(135deg,#E4EFFA,#F6FAFF);color:var(--ink-3)}
.ph-photo b,.ph-video b{font-family:"Archivo",sans-serif;font-size:16px}
.ph-photo small,.ph-video small{font-size:11.5px;opacity:.7}
.ph-ic{font-size:34px}
.ph-video{background:linear-gradient(135deg,#1B2540,#2C3E63);color:#fff}
.ph-play{
  width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.5);display:grid;place-items:center;
  font-size:18px;padding-left:4px;
}
.c-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.85);color:var(--ink);font-size:20px;line-height:1;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.c-arrow:hover{background:#fff}
.c-prev{left:12px}
.c-next{right:12px}
.c-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.c-dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0}
.c-dot.on{background:#fff;width:20px;border-radius:5px}

/* ── right: subscription panel ── */
.sub-panel{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:22px 22px 24px;position:sticky;top:22px}
.sub-panel h3{font-family:"Archivo",sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;margin-bottom:3px}
.plans{display:flex;flex-direction:column;gap:9px;margin:16px 0 12px}
.plan{
  display:flex;align-items:center;gap:11px;border:1px solid var(--rule);border-radius:8px;
  padding:13px 14px;cursor:pointer;margin:0;background:var(--surface);
  transition:border-color .12s,background .12s;
}
.plan input{position:absolute;opacity:0;pointer-events:none}
.plan-tick{width:20px;height:20px;border-radius:5px;border:1px solid var(--slate-2);flex-shrink:0;display:grid;place-items:center;font-size:12px;color:#fff}
.plan.sel{border-color:var(--ink);background:#E7F0FD;box-shadow:inset 0 0 0 1px var(--ink)}
.plan.sel .plan-tick{background:var(--ink);border-color:var(--ink)}
.plan-name{flex:1;font-size:14px;font-weight:600}
.plan-price{font-size:13.5px;font-weight:600;color:var(--ink)}
.plan-badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:3px 8px}
.plan-badge.active{background:var(--seal-soft);color:var(--seal);border:1px solid #B4E3CB}
.plan.owned{cursor:default;opacity:.9}
.plan.owned .plan-tick{background:var(--seal);border-color:var(--seal)}

.plan-all{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1.5px solid var(--ink);border-radius:8px;padding:13px 15px;cursor:pointer;
  background:var(--ink);color:#fff;text-align:left;
}
.plan-all:disabled{opacity:.45;cursor:default}
.plan-all.sel{box-shadow:0 0 0 3px rgba(20,33,61,.18)}
.plan-all-l b{font-family:"Archivo",sans-serif;font-size:14px;display:block}
.plan-all-l small{font-size:11px;color:rgba(255,255,255,.6)}
.plan-all-r{text-align:right}
.plan-all-r .plan-price{color:#fff;font-size:15px}
.plan-all-r .save{display:block;font-size:10px;color:#9FE3C1;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

.sub-total{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);font-weight:600}
.sub-total-amt{font-size:20px;font-family:"Archivo",sans-serif}

/* ── payment (test) screen ── */
.pay-test-tag{
  display:inline-block;font-family:"Archivo",sans-serif;font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--amber);
  background:var(--amber-soft);border:1px solid #F6D0A6;border-radius:4px;padding:4px 8px;
}
.pay-summary{border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin-bottom:18px}
.pay-row{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;font-size:13px;border-bottom:1px solid var(--rule-2)}
.pay-row:last-child{border-bottom:0}
.pay-row span{color:var(--slate)}
.pay-row.total{background:#EFF5FC;font-size:14px}
.pay-row.total b{font-size:16px}

@media (max-width:900px){
  .sub-layout{grid-template-columns:1fr}
  .sub-panel{position:static}
}

/* ══ upload page ════════════════════════════════════════ */
.mtype button:disabled{opacity:.45;cursor:not-allowed}
.drop.dragging{border-color:var(--ink);background:#E7F0FD}
.up-note{
  background:var(--amber-soft);border:1px solid #F6D0A6;border-radius:6px;
  color:var(--amber);font-size:12.5px;font-weight:500;
  padding:8px 12px;margin:12px auto 0;display:inline-block;
}
.picked{border:1px solid var(--rule);border-radius:8px;background:var(--surface);margin-top:16px;overflow:hidden}
.picked-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--rule-2);background:#EFF5FC;
  font-size:12px;font-weight:600;color:var(--slate);
}
.picked-warn{color:var(--tape);font-weight:600}
.picked ul{list-style:none;margin:0;padding:0}
.picked li{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--rule-2);font-size:13px}
.picked li:last-child{border-bottom:0}
.picked .pk-size{color:var(--slate-2);font-size:12px}

/* ── case brief card ─────────────────────────────────── */
.brief-card{border:1px solid var(--rule);border-radius:9px;background:var(--surface);overflow:hidden;margin-top:22px}
.brief-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px;background:var(--ink);color:#fff;
  font-family:"Archivo",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.02em;
}
.brief-mode{font-family:"IBM Plex Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:4px}
.brief-mode.live{background:var(--seal-soft);color:var(--seal)}
.brief-mode.test{background:var(--amber-soft);color:var(--amber)}
.brief-body{padding:16px 18px;font-size:13px;line-height:1.6;color:#333A4D;white-space:pre-wrap;font-family:"IBM Plex Sans",sans-serif}
.brief-body strong{color:var(--ink)}

/* ── API fetch: case selector + case header ──────────── */
.fetch-card{border:1px solid var(--rule);border-radius:9px;background:var(--surface);overflow:hidden;margin-bottom:18px}
.fc-head{padding:11px 16px;background:#EFF5FC;border-bottom:1px solid var(--rule);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.fc-body{padding:16px}
.fc-body .verify-row .btn{padding:9px 16px}
.case-head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--rule);border-radius:9px;background:var(--surface);padding:16px 18px;margin-bottom:12px;
}
.case-head .case-meta{gap:26px}
.fetch-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* two side-by-side options: manual upload vs API fetch */
.two-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-bottom:8px}
.two-opts .opt-card{display:flex;flex-direction:column}
.two-opts .drop{padding:22px 16px;margin-bottom:0}
@media (max-width:820px){.two-opts{grid-template-columns:1fr}}

/* two vertical parts: left = three mode options, right = panel */
/* The four upload options sit in a row across the top; the details of the one
   selected open full width underneath. */
.upload-split{display:block}
.mode-list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;
}
.mode-item{
  display:block;text-decoration:none;border:1px solid var(--rule);border-radius:8px;
  background:var(--surface);padding:18px 18px 20px;color:var(--ink);min-height:104px;
  transition:border-color .12s,background .12s,box-shadow .12s;position:relative;
}
.mode-item:hover{border-color:var(--slate-2)}
.mode-item b{font-family:"Archivo",sans-serif;font-size:15px;display:block;line-height:1.25}
.mode-item small{display:block;color:var(--slate-2);font-size:12px;margin-top:5px;line-height:1.45}
.mode-item.on{border-color:var(--ink);background:#E7F0FD;box-shadow:inset 0 0 0 1px var(--ink)}
/* a small pointer from the chosen option down to the panel below */
.mode-item.on::before{
  content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;
  margin-left:-7px;transform:rotate(45deg);background:#E7F0FD;
  border-left:1px solid var(--ink);border-top:1px solid var(--ink);
}
.mode-panel{border:1px solid var(--rule);border-radius:9px;background:var(--surface);padding:16px}
.mode-panel .drop{margin-bottom:0}
@media (max-width:960px){.mode-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .mode-list{grid-template-columns:1fr}
  .mode-item.on::before{display:none}
}

/* scrollable list of a case's documents, with a Remove button per row */
.doclist{margin-top:16px;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.doclist-head{padding:9px 13px;background:var(--ink);color:#fff;font-family:"Archivo",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.03em}
.doclist-scroll{max-height:230px;overflow-y:auto;background:var(--surface)}
.doclist-row{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--rule-2)}
.doclist-row:last-child{border-bottom:0}
.doclist-row:hover{background:#F4F9FF}
.dl-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dl-id{font-size:10.5px;color:var(--slate-2)}
.dl-name{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.dl-date{font-size:11px;color:var(--slate-2)}
.dl-remove{border:1px solid var(--rule);background:var(--surface);color:var(--tape);font-size:11px;font-weight:600;border-radius:5px;padding:4px 10px;cursor:pointer}
.dl-remove:hover{background:var(--tape-soft);border-color:#F0CDD0}

/* filed-documents table: scrolls both vertically and horizontally, sticky header */
.doc-table-wrap{max-height:440px;overflow:auto}
.doc-table-wrap table{min-width:760px}
.doc-table-wrap thead th{position:sticky;top:0;z-index:3}

/* ── workspace: upper case selector ──────────────────── */
.ws-select{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding:12px 26px;background:var(--surface);border-bottom:1px solid var(--rule)}
.ws-select .fg{margin:0;min-width:0}
/* Company gets the most room, the reference the least — it is a short code. */
.ws-select .fg:nth-child(1){flex:2 1 260px}
.ws-select .fg:nth-child(2){flex:1 1 150px}
.ws-select .fg:nth-child(3){flex:1 1 200px}
.ws-select .fg label{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:600;margin-bottom:4px}
.ws-select .fg label .opt{
  font-size:9px;letter-spacing:.04em;text-transform:none;color:var(--slate-2);
  font-weight:500;font-style:italic;margin-left:4px;
}
.ws-select select{width:100%;min-width:0;max-width:none}
.ws-select select:disabled{background:var(--sunk);color:var(--slate-2)}
.ws-pick-count{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--slate-2);
  white-space:nowrap;padding-bottom:9px;
}
@media (max-width:720px){
  .ws-select .fg{flex:1 1 100%}
  .ws-pick-count{display:none}
}

/* ── workspace: left chain sort + side tags ──────────── */
.ws-sort{display:flex;gap:4px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--rule);background:#EFF5FC}
.ws-sort a{font-family:"IBM Plex Sans",sans-serif;font-size:11px;font-weight:500;background:var(--surface);border:1px solid var(--rule);border-radius:20px;color:var(--slate);padding:4px 10px;cursor:pointer;text-decoration:none;display:inline-block}
.ws-sort a:hover{border-color:var(--slate-2);color:var(--ink)}
.ws-sort a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ws-filtered{font-family:"IBM Plex Sans",sans-serif;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--amber-soft);color:var(--amber);border:1px solid #F6D0A6;border-radius:3px;padding:2px 6px;margin-left:7px}
.as-form{display:inline;margin:0;padding:0}
button.as-link{font:inherit;cursor:pointer}
button.as-link:not(.btn){background:none;border:0;padding:0;color:inherit;text-decoration:none}
button.case-link.as-link{color:var(--ink);border-bottom:1px solid var(--rule)}
.nav-who{align-self:center;font-size:12px;color:var(--ink-soft,#5b6470);margin:0 6px;white-space:nowrap}
.date-q{display:inline-block;width:14px;height:14px;line-height:14px;text-align:center;border-radius:50%;background:var(--amber-soft,#fdf1d6);color:var(--amber,#9a6b00);font-size:10px;font-weight:700;vertical-align:1px;cursor:help}
.side-tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:3px;padding:1px 5px;margin-right:5px}
.side-tag.dept{background:var(--tape-soft);color:var(--tape)}
.side-tag.tp{background:var(--seal-soft);color:var(--seal)}

/* ── workspace: observation-wise liability table ─────── */
.liab{border:1px solid var(--rule);border-radius:8px;background:var(--surface);overflow:hidden;margin-bottom:16px}
.liab-head{padding:9px 14px;background:var(--ink);color:#fff;font-family:"Archivo",sans-serif;font-size:12px;font-weight:600;letter-spacing:.02em}
.liab-table{width:100%;border-collapse:collapse;min-width:560px}
.liab-table th{font-size:9.5px;padding:8px 10px;background:#EFF5FC;white-space:nowrap}
.liab-table td{padding:8px 10px;font-size:12px;border-bottom:1px solid var(--rule-2)}
.liab-table .num-r{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.liab-table tfoot td{background:#EFF5FC;font-weight:600;border-top:1px solid var(--rule)}
.liab-empty{background:var(--surface)}

/* ── workspace: document viewer bits (enlarged) ──────── */
.doc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.doc-title{font-family:"Archivo",sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.3}
.doc-title .mono,.doc-head .hint .mono{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.92em;color:var(--slate)}
.doc-frame{width:100%;height:1080px;border:1px solid var(--rule);border-radius:6px;background:#fff}
.ws-cta-top{position:sticky;top:0;z-index:2;border-bottom:1px solid var(--rule);border-top:0;background:var(--surface)}

/* ── manual analysis (test mode, no API) ─────────────── */
.note-box{
  border-left:3px solid var(--ink);background:var(--surface);border:1px solid var(--rule);
  border-left-width:3px;border-radius:0 8px 8px 0;padding:13px 16px;margin-bottom:18px;
  font-size:13px;line-height:1.6;color:var(--slate);
}
.note-box b{color:var(--ink)}
.ma-step{border:1px solid var(--rule);border-radius:9px;background:var(--surface);margin-bottom:14px;overflow:hidden}
.ma-head{
  display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--ink);color:#fff;
  font-family:"Archivo",sans-serif;font-size:13px;font-weight:600;
}
.ma-head .step-n{background:rgba(255,255,255,.18);color:#fff}
.ma-body{padding:15px 16px}
.ma-text{
  width:100%;font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.5;
  padding:11px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);
  color:var(--ink);resize:vertical;
}
.ma-folder{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:10px 12px}
.ma-folder .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.ma-folder .v{font-size:12px;margin-top:3px;word-break:break-all}
.md-grid{display:flex;flex-wrap:wrap;gap:6px}
.md-chip{
  font-size:11px;background:var(--seal-soft);color:var(--seal);border:1px solid #B4E3CB;
  border-radius:4px;padding:4px 9px;
}

/* ══ draft reply — three columns ═══════════════════════ */
.rp-top{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:10px 22px;border-bottom:1px solid var(--rule)}
.rp-title{flex:0 1 auto;min-width:0}
.rp-title h1{font-family:"Archivo",sans-serif;font-size:17px;margin:0 0 1px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.rp-top .sub{color:var(--slate);font-size:12px;margin:0;white-space:nowrap}
.rp-top-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}

/* stage tabs — one draft per stage of the case */
.rp-stages{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap;padding:0;border:0;flex:1 1 280px;min-width:0}
.rp-stages-lab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:600;align-self:center;margin-right:3px}
.rp-stage{
  display:block;text-decoration:none;border:1px solid var(--rule);border-radius:7px;
  background:var(--surface);padding:5px 10px;color:var(--ink);min-width:0;
}
.rp-stage:hover{border-color:var(--slate-2)}
.rp-stage b{display:block;font-family:"Archivo",sans-serif;font-size:12px}
.rp-stage small{display:block;font-size:10px;color:var(--slate-2);text-transform:capitalize;margin-top:1px}
.rp-stage.on{background:var(--ink);border-color:var(--ink)}
.rp-stage.on b{color:#fff}
.rp-stage.on small{color:rgba(255,255,255,.65)}
.rp-newwrap{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.rp-new{display:flex;gap:6px;align-items:center}
.rp-new select{font-size:11.5px;padding:6px 8px;max-width:190px;width:auto}

/* ── what is being drafted ────────────────────────────────────────────
   Four modes, each reading its figures from a different form. Coloured so
   the one in force is obvious at a glance from across the desk. */
.rp-modes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:9px;padding:14px 22px 0;
}
.rp-mode{
  display:block;text-decoration:none;border-radius:9px;padding:7px 11px;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink);
  border-left-width:4px;transition:transform .12s,box-shadow .12s,background .12s;
}
/* The name and the price share a line; the hint takes one line under it and
   is cut rather than wrapped. Three stacked lines made this bar taller than
   the draft below it, which is the thing the page is for. */
.rp-mode-top{display:flex;align-items:baseline;gap:10px}
.rp-mode b{font-family:"Archivo",sans-serif;font-size:12.5px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-mode .rp-fee{margin:0 0 0 auto;flex:none}
.rp-mode small{
  display:block;margin-top:1px;font-size:10.5px;line-height:1.3;color:var(--slate-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rp-mode:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(20,33,61,.10)}
.rp-mode:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* one colour per pleading, escalating with the forum */
.rp-mode.m-reply{border-left-color:var(--mint)}
.rp-mode.m-appeal1{border-left-color:var(--sky)}
.rp-mode.m-appeal2{border-left-color:var(--orange)}
.rp-mode.m-writ{border-left-color:var(--tape)}
/* the one in force: filled, white type, no longer a link in appearance */
.rp-mode.on{color:#fff;border-color:transparent;box-shadow:0 2px 10px rgba(20,33,61,.18)}
.rp-mode.on small{color:rgba(255,255,255,.78)}
.rp-mode.m-reply.on{background:linear-gradient(180deg,var(--mint),#2E9770)}
.rp-mode.m-appeal1.on{background:linear-gradient(180deg,var(--sky),#1D5C97)}
.rp-mode.m-appeal2.on{background:linear-gradient(180deg,var(--orange),#D2700F)}
.rp-mode.m-writ.on{background:linear-gradient(180deg,#D0343F,var(--tape))}
@media (max-width:700px){
  .rp-modes{padding:12px 14px 0}
  .rp-mode small{display:none}
}

/* the three columns: documents | draft + annexures | observations.
   `order` puts the observations last without moving the block in the
   template, where it has to stay next to the form that posts it. */
.rp3{display:grid;grid-template-columns:300px 1fr 330px;gap:0;align-items:start;min-height:60vh}
.rp-col{border-right:1px solid var(--rule);background:var(--surface);min-width:0}
.rp-col:last-child{border-right:0;background:var(--paper)}
/* The middle column is last in the template but second on screen, so the
   :last-child rule above would drop the divider between it and the
   observations. Put it back and take it off the column that really is last. */
.rp-col-mid{background:var(--paper);order:2;border-right:1px solid var(--rule)}
.rp-col-obs{order:3;border-right:0}
/* the document chain reuses the workspace spine, tightened for this column */
.rp-col .chain{padding:0}
.rp-col .link-row{margin-bottom:2px}
/* ── professional-review disclaimer ───────────────────────────────────
   Deliberately not styled as a dismissible "tip": it sits in the reading
   path, above the draft and above the figures, and cannot be closed. */
.ai-note{
  display:flex;gap:9px;align-items:flex-start;
  margin:0 0 12px;padding:9px 12px;border-radius:7px;
  background:var(--amber-soft);border:1px solid #F6D0A6;
  border-left:3px solid var(--orange);
  font-size:11.5px;line-height:1.45;color:var(--ink);
}
.ai-note b{color:var(--amber)}
.ai-note-mark{
  flex:none;width:16px;height:16px;border-radius:50%;background:var(--orange);
  color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center;
  margin-top:1px;
}

/* ── site footer: the links Indian law and the gateways require ────────
   No background of its own — it takes the colour of whatever page it sits
   on, so it reads as part of the page rather than a pasted-on band. */
.site-foot{
  margin:28px 0 0;padding:16px 22px 22px;border-top:1px solid var(--rule);
  background:transparent;
}
.sf-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sf-brand{font-family:"Archivo",sans-serif;font-weight:700;font-size:12.5px;color:var(--ink)}
.sf-links{display:flex;gap:14px;flex-wrap:wrap}
.sf-links a{font-size:11.5px;color:var(--slate);text-decoration:none}
.sf-links a:hover{color:var(--sky);text-decoration:underline}
.sf-note{margin:9px 0 0;font-size:11px;line-height:1.5;color:var(--slate-2);max-width:90ch}

/* ── consent, taken before payment ───────────────────────────────────── */
.consent{
  margin:16px 0 4px;padding:12px 13px;border-radius:8px;
  border:1px solid #F6D0A6;background:var(--amber-soft);
}
.consent-head{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);font-weight:700;margin-bottom:9px;
}
.consent-item{
  display:flex;gap:9px;align-items:flex-start;
  font-size:11.5px;line-height:1.5;color:var(--ink);
  padding:7px 0;border-top:1px solid rgba(180,91,13,.16);cursor:pointer;
  /* these rows are <label>s, and the global label rule upper-cases and
     letter-spaces them — unreadable for a paragraph the user must actually
     read before agreeing to it */
  text-transform:none;letter-spacing:normal;font-weight:400;
}
.consent-item:first-of-type{border-top:0;padding-top:0}
.consent-item input{margin-top:2px;flex:none;width:15px;height:15px;cursor:pointer}
.consent-item a{color:var(--amber);font-weight:600}
.consent-item b{color:var(--amber)}

/* ── the legal pages themselves ──────────────────────────────────────── */
.legal-page .legal-body{font-size:13.5px;line-height:1.65;color:var(--ink)}
.legal-page .legal-body h2{
  font-family:"Archivo",sans-serif;font-size:15px;margin:22px 0 7px;color:var(--ink);
}
.legal-page .legal-body p{margin:0 0 11px}
.legal-page .legal-body ul{margin:0 0 12px;padding-left:22px}
.legal-page .legal-body li{margin-bottom:5px}
/* a company detail nobody has filled in yet — impossible to miss */
.legal-todo{
  background:var(--tape-soft);color:var(--tape);border:1px dashed var(--tape);
  border-radius:4px;padding:1px 6px;font-size:12px;font-weight:600;
}

/* ── developer console tabs — one subject per page ──────────────────── */
.dev-tabs{
  display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px;
  border-bottom:1px solid var(--rule);padding-bottom:0;
}
.dev-tab{
  text-decoration:none;font-size:12.5px;font-weight:600;color:var(--slate);
  padding:9px 14px;border:1px solid transparent;border-bottom:0;
  border-radius:7px 7px 0 0;margin-bottom:-1px;background:transparent;
}
.dev-tab:hover{color:var(--ink);background:var(--sky-soft)}
.dev-tab.on{
  color:var(--ink);background:var(--surface);
  border-color:var(--rule);border-bottom:1px solid var(--surface);
}
@media (max-width:620px){.dev-tab{padding:8px 10px;font-size:11.5px}}

/* expert desk, above the annexures in the middle column */
.rp-expert{
  margin-top:18px;padding:12px 14px;border:1px solid #F6D0A6;border-radius:8px;
  background:var(--amber-soft);
}
.xp-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.xp-head b{font-family:"Archivo",sans-serif;font-size:13px;color:var(--amber)}
.xp-price{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:13px;color:var(--amber);
}
.rp-expert textarea{
  width:100%;margin:8px 0;font-family:inherit;font-size:12.5px;padding:7px 9px;
  border:1px solid var(--rule);border-radius:6px;resize:vertical;
}
.rp-expert .btn{width:100%}

/* annexures, folded in under the draft */
.rp-annex{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.rp-sub-lead{margin-top:0}
/* the row whose document is on screen in the viewer */
.rp-open.open{background:var(--sky-soft);border-radius:6px}

/* ── floating document viewer ─────────────────────────────────────────
   Not a modal: no backdrop, so the draft behind it stays clickable and the
   notice can be read while typing. Fixed position, dragged by its bar and
   resized from the corner; position and size are kept in localStorage. */
.docpop{
  position:fixed;z-index:60;display:flex;flex-direction:column;
  min-width:300px;min-height:220px;max-width:96vw;max-height:92vh;
  background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 12px 40px rgba(20,33,61,.28);overflow:hidden;resize:both;
}
.docpop[hidden]{display:none}
.docpop-bar{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:#EFF5FC;border-bottom:1px solid var(--rule);
  cursor:grab;touch-action:none;user-select:none;flex:none;
}
.docpop.dragging .docpop-bar{cursor:grabbing}
/* while dragging, the iframe must not eat the pointer moves */
.docpop.dragging .docpop-body{pointer-events:none}
.docpop-title{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.docpop-title b{font-family:"Archivo",sans-serif;font-size:12px;color:var(--ink)}
.docpop-title small{
  font-size:10.5px;color:var(--slate-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:34ch;
}
.docpop-acts{margin-left:auto;display:flex;gap:4px;align-items:center}
.docpop-acts button,.docpop-acts a{
  border:1px solid var(--rule);background:var(--surface);color:var(--slate);
  border-radius:5px;font-size:12px;line-height:1;padding:5px 8px;cursor:pointer;
  text-decoration:none;display:inline-block;
}
.docpop-acts button:hover,.docpop-acts a:hover{background:var(--sky-soft);color:var(--ink)}
.docpop-body{flex:1;min-height:0;background:var(--paper);overflow:auto}
.docpop-body iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.docpop-body img{max-width:100%;display:block;margin:0 auto}
@media (max-width:700px){
  /* no room to float on a phone — sit it across the bottom half */
  .docpop{left:0 !important;top:auto !important;bottom:0;
          width:100vw !important;height:62vh !important;border-radius:10px 10px 0 0;resize:none}
}
.rp-head{
  padding:11px 15px;border-bottom:1px solid var(--rule);background:#EFF5FC;
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:8px;position:sticky;top:0;z-index:2;
}
.rp-lang{text-transform:none;letter-spacing:0;font-size:11px;color:var(--slate);display:flex;gap:6px;align-items:center}
.rp-body{padding:14px 15px}
.rp-sub{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:600;margin:14px 0 8px}

/* left column — observations */
.obs{border:1px solid var(--rule);border-radius:7px;padding:10px 11px;margin-bottom:9px;background:var(--surface)}
.obs-t{font-size:12.5px;font-weight:600;line-height:1.4;margin-bottom:5px}
.obs-amt{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.obs-amt span{font-family:"IBM Plex Mono",monospace;font-size:10px;background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:2px 6px;color:var(--slate)}
.obs-amt .obs-tot{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.obs textarea{width:100%;min-height:56px;font-size:12px;padding:8px 9px;border:1px solid var(--rule);border-radius:5px;resize:vertical;font-family:"IBM Plex Sans",sans-serif;background:var(--paper);color:var(--ink)}
.obs textarea:focus{outline:2px solid var(--ink);outline-offset:-1px}
.obs textarea:disabled{background:#EEF2F8;color:var(--slate-2)}

/* middle column — the draft editor */
.rte-bar{
  display:flex;flex-wrap:wrap;gap:3px;align-items:center;
  border:1px solid var(--rule);border-bottom:0;border-radius:7px 7px 0 0;
  background:#EFF5FC;padding:7px 8px;
}
.rte-bar button{
  font-family:"IBM Plex Sans",sans-serif;font-size:12px;min-width:28px;height:27px;
  background:var(--surface);border:1px solid var(--rule);border-radius:5px;
  color:var(--ink);cursor:pointer;padding:0 7px;line-height:1;
}
.rte-bar button:hover{border-color:var(--slate-2);background:var(--paper)}
.rte-bar button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.rte-bar select{
  font-size:11.5px;height:27px;padding:0 6px;width:auto;min-width:74px;
  border:1px solid var(--rule);border-radius:5px;background:var(--surface);color:var(--ink);
}
.rte-sep{width:1px;height:19px;background:var(--rule);margin:0 4px}
.rte-colour{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.rte-colour span{
  display:block;width:27px;height:27px;border:1px solid var(--rule);border-radius:5px;
  background:var(--ink);
}
.rte-colour input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}

.rte-find{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--rule);border-bottom:0;background:var(--amber-soft);padding:8px 9px;
}
.rte-find input{
  font-size:12px;padding:6px 8px;border:1px solid #F6D0A6;border-radius:5px;
  background:#fff;color:var(--ink);width:auto;flex:1 1 130px;min-width:110px;
}
.rte-find .btn{padding:6px 11px;font-size:12px}
/* "Find" reuses this panel with the replace controls hidden. */
.rte-find-repl{display:contents}
.rte-find.find-only .rte-find-repl{display:none}

/* ── liability review, in the workspace strip ─────────────────────────
   Folded away behind a summary: the figures are usually right, and the
   correction form should not compete with them for attention. */
.liab-review{margin:10px 14px 4px;border-top:1px solid var(--rule);padding-top:10px}
.liab-review > summary{
  cursor:pointer;font-size:11.5px;font-weight:600;color:var(--sky);
  list-style:none;display:inline-flex;align-items:center;gap:5px;
}
.liab-review > summary::-webkit-details-marker{display:none}
.liab-review > summary::before{content:"✎";font-size:12px}
.liab-review > summary:hover{color:var(--ink)}
.liab-review[open] > summary{margin-bottom:10px}
.lr-lab{display:block;font-size:11px;font-weight:600;color:var(--slate);margin-bottom:4px}
.liab-review textarea{
  width:100%;font-family:inherit;font-size:12.5px;padding:8px 10px;
  border:1px solid var(--rule);border-radius:6px;resize:vertical;
}
.lr-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.lr-sub{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-2);font-weight:600;margin:14px 0 6px;
}
.lr-edit input{
  width:100%;min-width:0;font-size:11.5px;padding:4px 6px;
  border:1px solid var(--rule);border-radius:4px;background:var(--surface);
}
.lr-edit input.num-r{text-align:right}
.lr-edit td{padding:3px 4px}

.draft-edit{
  width:100%;min-height:520px;font-family:Calibri,"IBM Plex Sans",sans-serif;font-size:13.5px;
  line-height:1.5;padding:16px 18px;border:1px solid var(--rule);border-radius:0 0 7px 7px;
  background:var(--surface);color:#26303F;overflow-y:auto;max-height:70vh;
}
.draft-edit:focus{outline:2px solid var(--ink);outline-offset:-2px}
.draft-edit:empty:before{content:attr(data-placeholder);color:var(--slate-2)}
.draft-edit p{margin:0 0 10px}
.draft-edit ul,.draft-edit ol{margin:0 0 10px;padding-left:26px}
.draft-edit[contenteditable="false"]{background:#EEF2F8;border-radius:7px}
/* A drafted pleading carries tables — a demand computation, a list of
   authorities. table-layout:fixed with wrapping keeps even an eight-column
   table inside the column instead of pushing the whole editor sideways. */
.draft-edit h1{font-size:16px;margin:14px 0 8px;line-height:1.3}
.draft-edit h2{font-size:14.5px;margin:14px 0 7px;line-height:1.3}
.draft-edit h3{font-size:13.5px;margin:12px 0 6px;line-height:1.3}
.draft-edit table{
  width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;
  margin:0 0 12px;font-size:11.5px;
}
.draft-edit th,.draft-edit td{
  border:1px solid var(--rule);padding:4px 6px;vertical-align:top;
  overflow-wrap:anywhere;word-break:normal;
}
.draft-edit th{background:#EFF5FC;text-align:left;font-weight:600}
.draft-edit hr{border:0;border-top:1px solid var(--rule);margin:14px 0}

.btn-danger{
  font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;font-weight:500;
  background:var(--surface);color:var(--tape);border:1px solid #F0CDD0;
  border-radius:5px;padding:7px 13px;cursor:pointer;
}
.btn-danger:hover{background:var(--tape-soft);border-color:var(--tape)}
.rp-confirm{
  display:flex;gap:7px;align-items:flex-start;font-size:11px;line-height:1.4;
  color:var(--amber);background:var(--amber-soft);border:1px solid #F6D0A6;
  border-radius:6px;padding:8px 10px;cursor:pointer;
}
.rp-confirm input{margin-top:1px;flex-shrink:0}

/* ── reviewer area: nav and shared-draft cards ────────── */
.rv-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.rv-nav a:not(.btn){
  font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;font-weight:500;
  text-decoration:none;color:var(--slate);padding:7px 12px;border-radius:6px;
}
.rv-nav a:not(.btn):hover{background:var(--sunk,#EAF2FC);color:var(--ink)}
.rv-nav a.on{background:var(--ink);color:#fff}
.rv-nav-off{font-size:12.5px;color:var(--slate-2);padding:7px 12px;cursor:not-allowed}
.rv-who{font-size:12px;color:var(--slate-2);margin-left:10px;margin-right:4px}

.rv-draft{
  display:block;text-decoration:none;border:1px solid var(--rule);border-left-width:3px;
  border-left-color:var(--rule);border-radius:0 7px 7px 0;background:var(--surface);
  padding:10px 12px;margin-bottom:8px;color:var(--ink);
}
.rv-draft:hover{border-color:var(--slate-2);border-left-color:var(--slate-2)}
.rv-draft b{display:block;font-family:"Archivo",sans-serif;font-size:12.5px}
.rv-draft span{display:block;font-size:11px;color:var(--slate-2);margin-top:2px}
.rv-draft.live{border-left-color:var(--amber);background:var(--amber-soft)}
.rv-draft.live span{color:var(--amber);font-weight:600}

/* right column — annexures */
.anx-list{display:flex;flex-direction:column;gap:7px}
.anx{border:1px solid var(--rule);border-left-width:3px;border-radius:0 6px 6px 0;padding:8px 10px;background:var(--surface);font-size:12px;line-height:1.45}
.anx.ok{border-left-color:var(--seal)}
.anx.todo{border-left-color:var(--amber)}
.anx b{display:block;font-size:11.5px}
.anx span{color:var(--slate);font-size:11.5px}
.anx em{display:block;color:var(--amber);font-size:10.5px;font-style:normal;margin-top:3px}
.anx-file{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule-2)}
.anx-file:last-of-type{border-bottom:0}
.anx-file .nm{flex:1;min-width:0;font-size:12px}
.anx-file .nm small{display:block;color:var(--slate-2);font-size:10.5px;font-family:"IBM Plex Mono",monospace}
.rp-folder{font-size:9.5px;color:var(--slate-2);word-break:break-all;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule-2)}

@media (max-width:1100px){
  .rp3{grid-template-columns:1fr}
  .rp-col{border-right:0;border-bottom:1px solid var(--rule)}
  .draft-edit{min-height:380px}
}

/* ── draft reply: status pill + revision counter ─────── */
.status-pill{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:4px 9px}
.status-pill.s-questions{background:var(--amber-soft);color:var(--amber);border:1px solid #F6D0A6}
.status-pill.s-drafted{background:#E4EFFA;color:var(--ink-3);border:1px solid #C6DCF2}
.status-pill.s-in_review{background:#FFF0DF;color:#B45B0D;border:1px solid #F6D0A6}
.status-pill.s-approved,.status-pill.s-filed{background:var(--seal-soft);color:var(--seal);border:1px solid #B4E3CB}
.rev-count{font-size:11.5px;color:var(--slate);display:inline-flex;align-items:center;gap:8px}
.rev-count .dots{display:inline-flex;gap:4px}
.rev-count .dots i{width:8px;height:8px;border-radius:50%;background:var(--tape);opacity:.25}
.rev-count .dots i.used{opacity:1}
.draft{white-space:pre-wrap}
.reply-grid .q textarea:disabled,.reply-grid select:disabled{background:#EEF2F8;color:var(--slate-2);cursor:not-allowed}

/* ── user management: add-member row ─────────────────── */
.add-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--rule-2);margin-top:6px}
.add-row input[type=text]{max-width:170px}
.add-row input[type=email]{max-width:230px}
.add-row .btn{white-space:nowrap}
.note-form{background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:12px}
.note-form input[type=text],.note-form textarea{width:100%;font-size:12.5px}
.note .del-x{border:0;background:none;color:var(--slate-2);cursor:pointer;padding:0}
.note .del-x:hover{color:var(--tape);background:none}
select{font-family:"IBM Plex Sans",sans-serif;font-size:13.5px;padding:9px 11px;border:1px solid var(--rule);border-radius:5px;background:var(--surface);color:var(--ink);width:100%}
select:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}

/* ══════════════════════════════════════════════════════════
   COLOUR REFRESH — blue · pastel green · orange
   Blue carries the app. Pastel green = settled / approved /
   paid. Orange = waiting on someone. Red is kept only for
   real danger (delete, errors, department demands).
   ══════════════════════════════════════════════════════════ */

/* let the page gradient show through the app shell */
.frame,.main,.body,.login-wrap,.sub-layout{background:transparent}

/* dark surfaces: blue gradient instead of flat navy */
.rail,.demo-bar{background:linear-gradient(180deg,#154471 0%,#0E2E51 100%)}
.login-art{background:linear-gradient(165deg,#17497C 0%,#0E2E51 58%,#123A63 100%)}
.login-art::after{
  content:"";position:absolute;inset:auto -40px -60px -40px;height:220px;
  background:radial-gradient(closest-side,rgba(63,174,133,.30),transparent);
  pointer-events:none;
}
.login-art{position:relative;overflow:hidden}
.login-art > *{position:relative;z-index:1}
.mini-chain div.now .dot{background:var(--orange);box-shadow:0 0 0 3px rgba(240,138,46,.30)}

/* headers float over the gradient */
/* Safari needs the -webkit- prefix for this and ignores the plain property,
   so without the first line the frosted header is simply flat on a Mac. */
.app-top{background:rgba(255,255,255,.88);
         -webkit-backdrop-filter:saturate(1.4) blur(8px);
         backdrop-filter:saturate(1.4) blur(8px)}
.topbar,.ws-select{background:rgba(255,255,255,.82);
         -webkit-backdrop-filter:saturate(1.4) blur(8px);
         backdrop-filter:saturate(1.4) blur(8px)}

/* every panel lifts off the background */
.card,.tiles,.umeta,.opt-card,.set-card,.role-card,.sub-panel,.brief-card,
.fetch-card,.mode-panel,.liab,.picked,.annex,.ma-step,.q,.note-form,
.doclist,.carousel,.toolbar,.rvbox{box-shadow:var(--shadow)}
.card,.tiles,.umeta,.opt-card,.set-card,.role-card,.brief-card,
.fetch-card,.mode-panel,.liab,.picked{border-color:#D5E3F2}

/* dashboard tiles: a coloured cap and a lift on hover */
.tile{position:relative;transition:background .14s,box-shadow .14s}
.tile::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--sky),#5AA9E8);
}
.tile:nth-child(2)::before{background:linear-gradient(90deg,var(--mint),#7FD3B0)}
.tile:nth-child(3)::before{background:linear-gradient(90deg,var(--orange),#F7BC77)}
.tile:nth-child(4)::before{background:linear-gradient(90deg,#5B8DEF,var(--sky))}
.tile:hover{background:#F7FBFF}
.tile.done .num{color:var(--seal)}

/* primary buttons: blue gradient (ghost / danger keep their own look) */
.btn{background:linear-gradient(180deg,#1D5C97 0%,#123A63 100%);box-shadow:0 1px 2px rgba(18,58,99,.22)}
.btn:hover{background:linear-gradient(180deg,#2470B4 0%,#17497C 100%)}
.btn.ghost{background:var(--surface);border-color:#CFE0F2}
.btn.ghost:hover{background:var(--sky-soft);border-color:#A9CBEE;color:var(--ink-3)}
.btn.danger{background:var(--tape);box-shadow:0 1px 2px rgba(179,32,44,.22)}
.btn.danger:hover{background:#8F1923}

/* Deleting a case: folded away behind its own summary, and in the red the
   rest of the app uses for a deadline gone by, so it never reads as one more
   thing to do here. */
.danger-zone{margin-top:22px;border-top:1px solid var(--rule);padding-top:14px}
.danger-zone>summary{
  cursor:pointer;color:var(--tape);font-size:12.5px;font-weight:500;
  list-style:none;display:inline-flex;align-items:center;gap:6px;
}
.danger-zone>summary::-webkit-details-marker{display:none}
.danger-zone>summary::before{content:"▸";font-size:10px}
.danger-zone[open]>summary::before{content:"▾"}
.danger-zone>summary:hover{text-decoration:underline}
.danger-zone[open]{
  background:var(--tape-soft);border:1px solid #F0CDD0;border-radius:8px;
  padding:12px 14px;margin-top:22px;
}
.danger-zone[open]>summary{margin-bottom:8px}
.danger-zone p{font-size:12.5px;line-height:1.55;margin-bottom:10px}
.danger-zone label{display:block;font-size:12px;margin-bottom:5px;color:var(--slate-2)}

/* dark strip headers inside cards */
.liab-head,.doclist-head,.brief-head,.ma-head,.plan-all,
.mtype button[aria-current="true"],.pill.gst{
  background:linear-gradient(90deg,#123A63 0%,#1D5C97 100%);
}
.plan-all.sel{box-shadow:0 0 0 3px rgba(47,127,212,.24)}

/* selection states in blue */
.seg input:checked + label,.mod-opt.sel,.plan.sel,.mode-item.on,.doc.sel,.drop.dragging{
  border-color:var(--sky);background:var(--sky-soft);box-shadow:inset 0 0 0 1px var(--sky);
}
.mod-opt.sel .tick,.plan.sel .plan-tick,.rail nav a.on,.ws-sort a.on,
.rv-nav a.on,.anno button.active{background:var(--ink-3);border-color:var(--ink-3)}
.node,.mw .chainm i{background:var(--sky)}
.node.here{background:var(--orange);box-shadow:0 0 0 1.5px var(--orange),0 0 0 4.5px rgba(240,138,46,.20)}
.node.open{background:var(--surface);box-shadow:0 0 0 1.5px var(--sky)}
.thread{background:#CFE0F2}
.doc:hover{background:#F4F9FF}
tbody tr:hover td{background:#F4F9FF}

/* pastel green = done, orange = waiting */
.toggle.on{background:var(--mint)}
.plan.owned .plan-tick{background:var(--mint);border-color:var(--mint)}
.side-tag.tp{background:var(--seal-soft);color:var(--seal)}
.rv-draft.live{border-left-color:var(--orange)}
.anx.ok{border-left-color:var(--mint)}
.anx.todo{border-left-color:var(--orange)}
.tile.live .num{color:var(--amber)}

/* subscription demo placeholders */
.ph-photo{background:linear-gradient(135deg,#E4EFFA 0%,#E7F6EE 100%);color:var(--ink-3)}
.ph-video{background:linear-gradient(135deg,#154471 0%,#0E2E51 100%);color:#fff}
.c-dot.on{background:var(--orange)}

/* inputs pick up a blue focus ring */
input:focus,textarea:focus,select:focus{outline-color:var(--sky);border-color:var(--sky)}
.btn:focus-visible{outline-color:var(--sky)}

/* the sign-in art panel runs the full height of the window */
.login-wrap{min-height:100vh}
/* password boxes were narrower than the rest — same width as every other field */
input[type=password]{width:100%}
.login-form input[type=password],.login-form input[type=text],
.login-form input[type=email]{max-width:none}

/* the active tab underline and the "live" pill move off red — red now
   means danger only, orange means a matter still running */
.cuts button[aria-current="true"]{border-bottom-color:var(--sky)}
.pill.live{background:var(--amber-soft);color:var(--amber);border:1px solid #F6D0A6}
.tile.live .num{color:var(--amber)}
.rev-count .dots i{background:var(--sky)}

/* links inside the dark rail must not use the dark ink colour */
.rail-foot .case-link,.rail-foot a{color:rgba(255,255,255,.72);text-decoration-color:rgba(255,255,255,.4)}
.rail-foot .case-link:hover,.rail-foot a:hover{color:#fff}

/* "Draft reply" and the other call-to-action buttons: orange, not red —
   they are the next step to take, not a warning */
.btn.tape{background:linear-gradient(180deg,#F0912F 0%,#D9700F 100%);color:#fff}
.btn.tape:hover{background:linear-gradient(180deg,#F6A247 0%,#C46309 100%)}

/* ── the one signed-in navigation bar (_user_nav.html) ── */
/* ── "preparing your draft" curtain ──────────────────────
   Starting a draft reply reads the notice through Claude before the page can
   be built, which takes the better part of a minute. Without this the browser
   simply sits on the old page and the app looks hung. */
.prep-curtain{
  position:fixed;inset:0;z-index:999;display:flex;align-items:center;
  justify-content:center;background:rgba(18,58,99,.55);backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.prep-card{
  background:var(--surface);border-radius:12px;padding:26px 30px;max-width:380px;
  box-shadow:0 20px 50px -18px rgba(18,58,99,.55);text-align:center;
}
.prep-card b{display:block;font-family:Archivo,sans-serif;font-size:16px;margin-bottom:7px;color:var(--ink)}
.prep-card p{margin:0;font-size:13px;color:var(--slate);line-height:1.55}
.prep-dots{display:flex;gap:5px;justify-content:center;margin-top:15px}
.prep-dots i{
  width:7px;height:7px;border-radius:50%;background:var(--sky);
  animation:prepPulse 1.2s ease-in-out infinite;
}
.prep-dots i:nth-child(2){animation-delay:.18s}
.prep-dots i:nth-child(3){animation-delay:.36s}
@keyframes prepPulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.prep-dots i{animation:none;opacity:.7}}

.sf-credit{margin:10px 0 0;font-size:11.5px;color:var(--slate-2)}
.sf-credit b{color:var(--slate);font-weight:600}

.app-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.app-nav .nav-sm{
  font-size:11.5px;padding:6px 11px;text-decoration:none;line-height:1.2;
}
/* The page you are on, so the bar says where you are rather than only where
   you can go. */
.app-nav .nav-sm.on{
  background:var(--sky-soft);border-color:var(--sky);color:var(--ink);font-weight:600;
}
@media (max-width:640px){
  .app-nav{gap:4px;justify-content:flex-end}
  .app-nav .nav-sm{font-size:11px;padding:5px 9px}
}

/* ── document list: tick boxes and bulk remove ────────── */
.doclist-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dl-all{display:flex;align-items:center;gap:9px;cursor:pointer;min-width:0}
.dl-all input{width:15px;height:15px;accent-color:var(--tape);cursor:pointer;flex:0 0 auto}
.dl-pick{display:flex;align-items:center;padding-right:10px;flex:0 0 auto}
.dl-pick input{width:15px;height:15px;accent-color:var(--tape);cursor:pointer}
.dl-bulk{
  background:var(--tape-soft);border:1px solid var(--tape-line);color:var(--tape);
  border-radius:5px;padding:5px 11px;font-size:11.5px;font-family:inherit;font-weight:600;
  cursor:pointer;white-space:nowrap;
}
.dl-bulk:hover:not(:disabled){background:var(--tape);color:#fff;border-color:var(--tape)}
.dl-bulk:disabled{opacity:.42;cursor:default;color:var(--slate-2);
  background:var(--sunk);border-color:var(--rule)}

/* ── a draft whose tables do not add up ───────────────── */
.arith-warn{
  background:var(--tape-soft);border:1px solid var(--tape-line);border-radius:7px;
  padding:11px 14px;margin:0 0 12px;font-size:12.5px;color:var(--tape);
}
.arith-warn b{display:block;margin-bottom:3px;font-size:13px}
.arith-warn p{margin:0 0 7px;color:var(--slate);font-size:12px;line-height:1.5}
.arith-warn ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:4px}
.arith-warn li{line-height:1.45}

.rp-head-link{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rp-head-link a{font-size:11px;color:var(--sky);text-decoration:none;
  text-transform:none;letter-spacing:0;font-weight:600;white-space:nowrap}
.rp-head-link a:hover{text-decoration:underline}

/* ── observations, on a page of their own ─────────────── */
.obsp-wrap{max-width:1000px;margin:20px auto 60px;padding:0 18px;
  display:flex;flex-direction:column;gap:16px}
.obsp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.obsp-head h1{font-family:Archivo,sans-serif;font-size:24px;font-weight:700;margin:0 0 4px;color:var(--ink)}
.obsp-head .hint{margin:0}

.obsp-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  background:var(--sunk);border:1px solid var(--rule);border-radius:8px;padding:11px 16px}
.obsp-total .k{font-size:12.5px;color:var(--slate)}
.obsp-total .v{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;
  color:var(--tape);font-variant-numeric:tabular-nums}

.obsp{display:grid;grid-template-columns:38px 1fr;gap:0 14px;
  background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  padding:18px 20px;box-shadow:var(--shadow)}
.obsp-n{font-family:Archivo,sans-serif;font-size:19px;font-weight:700;color:var(--slate-2);
  line-height:1.25;font-variant-numeric:tabular-nums}
.obsp-main{min-width:0}
.obsp-main h2{font-family:"IBM Plex Sans",sans-serif;font-size:16px;font-weight:600;
  line-height:1.5;margin:0 0 12px;color:var(--ink)}

.obsp-fig{overflow-x:auto;margin-bottom:14px}
.obsp-fig table{border-collapse:collapse;font-size:12.5px}
.obsp-fig th{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate-2);font-weight:500;text-align:right;
  padding:0 0 4px 22px;white-space:nowrap}
.obsp-fig td{font-family:"IBM Plex Mono",monospace;text-align:right;padding:0 0 0 22px;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.obsp-fig th:first-child,.obsp-fig td:first-child{padding-left:0}
.obsp-fig .tot{color:var(--tape);font-weight:600;border-left:1px solid var(--rule)}
.obsp-fig th.tot,.obsp-fig td.tot{padding-left:16px;margin-left:16px}

.obsp-label{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-2);font-weight:600;margin:0 0 5px}
.obsp textarea{width:100%;resize:vertical;min-height:110px;font-size:13.5px;line-height:1.6}

.obsp-files{margin-top:14px;border-top:1px dashed var(--rule);padding-top:12px}
.obsp-files-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);
  font-weight:600;margin-bottom:9px}
.obsp-add{background:var(--sky-soft);border:1px solid var(--rule);color:var(--ink-2);
  border-radius:5px;padding:4px 10px;font-size:11px;font-family:inherit;cursor:pointer;
  letter-spacing:0;text-transform:none;font-weight:600}
.obsp-add:hover{border-color:var(--sky)}
.obsp-filelist{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:5px}
.obsp-filelist li{display:flex;align-items:center;gap:10px;font-size:12.5px;
  background:var(--sunk);border-radius:5px;padding:6px 10px}
.obsp-filelist a{color:var(--sky);text-decoration:none;word-break:break-word}
.obsp-filelist a:hover{text-decoration:underline}
.obsp-filelist .sz{color:var(--slate-2);font-size:11px;margin-left:auto;white-space:nowrap}
.obsp-filelist button.inline-del{background:none;border:0;color:var(--tape);font-size:11px;
  cursor:pointer;padding:0;font-family:inherit}
.obsp-filelist button.inline-del:hover{text-decoration:underline}

.obsp-save{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  position:sticky;bottom:0;background:var(--paper);padding:14px 0;
  border-top:1px solid var(--rule)}

@media (max-width:640px){
  .obsp{grid-template-columns:1fr;gap:6px;padding:15px 16px}
  .obsp-n{font-size:14px}
  .obsp-head h1{font-size:20px}
}

/* ── draft reply: the case / notice selector bar ─────── */
/* Aligned from the top, not the bottom. "Notice being replied to" carries a
   hint line under its dropdown that the other two do not; aligning on the
   bottom edge therefore lifted that whole group and left the three labels and
   the three dropdowns out of line with each other. */
/* One row, five boxes, the width shared by what each holds: the company
   and the case reference are long, a state and a type are short. The note
   about choosing another notice sits under that box, not alone at the far
   right of an otherwise empty band. */
.rp-select{display:grid;grid-template-columns:minmax(180px,1.6fr) minmax(110px,.9fr) minmax(110px,.9fr) minmax(190px,1.7fr) minmax(190px,1.6fr) minmax(170px,1.3fr);
  gap:10px 16px;align-items:start;padding:10px 22px 8px}
.rp-select .selgrp:only-child,.rp-select .selgrp:nth-last-child(3):first-child{grid-column:auto}
.selgrp{display:flex;flex-direction:column;gap:4px;min-width:0}
.selgrp label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:600;margin:0}
.selgrp select{width:100%;max-width:none}
.selgrp .hint{font-size:10px;margin-top:1px;line-height:1.4}
@media (max-width:1250px){.rp-select{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){.rp-select{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rp-select{grid-template-columns:1fr}}
.rte-hl{background:#FFF3B0 !important;border-color:#E8D98A !important}
@media (max-width:900px){
  .rp-select{gap:12px}
  .selgrp select{max-width:100%}
  .rp-select-note{margin-left:0}
}


/* ══════════════════════════════════════════════════════════
   PHONES AND SMALL TABLETS
   Collected in one place rather than scattered, so the mobile
   behaviour of the app can be read in one sitting.
   ══════════════════════════════════════════════════════════ */

/* Any table wide enough to need it scrolls inside its own box. Without this
   a table with a min-width simply widens the page, and the whole layout
   drifts sideways under the thumb — which is what the hearings page did. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}

/* A grid or flex child defaults to min-width:auto, which means it refuses to
   shrink below its own content. One wide table inside one therefore widens
   the whole page, and the overflow box around that table never gets the
   chance to scroll, because nothing ever makes it narrower than the table.
   This is the single most common reason a page drifts sideways on a phone. */
.hr-grid > *,.hr-next > *,.hc-wrap > *,.tiles-row > *,.two-opts > *,
.rp3 > *,.ws > *,.frame > *{min-width:0}

/* The dashboard's phone navigation. Hidden on desktop, where the rail is the
   navigation and showing both would be two menus saying the same thing. */
.mobile-only-nav{display:none}

@media (max-width:840px){
  .mobile-only-nav{display:block}

  /* The rail is hidden at this width, so its fold-away arrow has nothing to
     fold. It sat over the page title offering to "Hide the menu" when there
     was no menu on screen to hide. */
  .rail-toggle{display:none}

  /* Four figures across a 375px screen left each about 80px wide, which
     truncated the total to "₹ 128.75 …". Two by two gives each one room to
     say what it actually is. */
  .tiles-compact{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* The top bar took three rows on a phone: the wordmark wrapped onto two
     lines and the five links onto two more. The subtitle is the first thing
     that can go — the page title already says where you are. */
  .wordmark2 span{display:none}
  .app-top{padding:10px 14px;gap:10px;align-items:center}
  .app-nav{gap:5px}

  /* Anything you tap needs to be big enough to hit. 40px is short of Apple's
     44 but fits five links across a 375px screen without wrapping to a third
     row, which matters more here than the last four pixels. */
  .app-nav .nav-sm{min-height:40px;display:inline-flex;align-items:center;padding:0 10px}
  .btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .dl-remove,.dl-bulk,.obsp-add{min-height:36px}
  .dl-pick input,.dl-all input{width:20px;height:20px}

  /* A fixed 1080px document frame is taller than the phone itself, so every
     visit meant scrolling past more than a screenful of PDF to reach the
     notes and the Draft reply button underneath. Two thirds of the screen
     shows the document and still leaves the page navigable; the PDF's own
     controls scroll within it, and it opens full-screen from the filename. */
  .doc-frame{height:65vh;min-height:360px}

  /* Long identifiers — GSTINs, case references, filenames — must wrap rather
     than push the page wide. */
  .mono,.dl-name,.dl-id{word-break:break-word;overflow-wrap:anywhere}

  /* Forms: full-width controls, and 16px text so iOS Safari stops zooming
     the page in every time a field is focused. */
  select,input[type=text],input[type=email],input[type=password],
  input[type=date],input[type=number],textarea{
    width:100%;max-width:100%;font-size:16px;
  }
  .toolbar .fg{width:100%}
  .toolbar select,.hr-filters select{min-width:0;width:100%}
}

@media (max-width:380px){
  /* On the narrowest phones still in use the pie and its legend will not sit
     side by side: the legend's figures cannot wrap ("₹ 86.47 Cr · 67.2%"),
     so the pair pushed the page 37px wider than the screen. Stacked, the
     chart keeps its size and the legend gets the full width. */
  .chart-body{flex-direction:column;align-items:stretch;gap:10px}
  .pie{align-self:center}
  .legend{max-height:none}
  .chart-head{flex-wrap:wrap}
  .chart-head small{white-space:normal}
}

@media (max-width:560px){
  /* Side-by-side buttons become stacked, full-width ones — a 48%-wide button
     with two words in it is worse than a full-width button with three. */
  .pane-actions,.ws-cta{flex-direction:column;align-items:stretch}
  .pane-actions .btn,.ws-cta .btn{width:100%}

  /* The observations page: the number moves onto the same line as the text
     rather than taking a column of its own. */
  .obsp-fig th,.obsp-fig td{padding-left:14px}
}

/* ── case review: what a case is missing ──────────────────────────────
   The right-hand column of the workspace. Two tabs, because the gaps are
   what you want on opening a case and the notes are what you write later. */
.gap-tabs{display:flex;border-bottom:1px solid var(--rule);margin-bottom:10px}
.gap-tab{flex:1;padding:8px 4px;font-size:12px;font-weight:600;text-align:center;white-space:nowrap;
  cursor:pointer;color:var(--slate-2);background:none;border:0;
  border-bottom:2px solid transparent;font-family:"IBM Plex Sans",sans-serif}
.gap-tab .n.quiet{background:var(--sunk);color:var(--slate)}
.gap-tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.gap-tab .n{display:inline-block;min-width:17px;padding:0 5px;margin-left:5px;
  border-radius:9px;background:var(--tape);color:#fff;font-size:10.5px;line-height:16px}
.gap{border:1px solid var(--rule);border-left:3px solid var(--slate-2);border-radius:7px;
  background:var(--surface);padding:9px 10px;margin-bottom:8px}
.gap.bad{border-left-color:var(--tape);background:var(--tape-soft)}
.gap.warn{border-left-color:#C9821B}
.gap b{display:block;font-size:12.5px;line-height:1.35;font-family:"Archivo",sans-serif}
.gap small{display:block;color:var(--slate-2);font-size:11px;margin-top:3px;line-height:1.45}
/* Upload across the top, the two answers level under it: three in a row cut
   "Not applicable" to "Not appli…" at the rail's width, and a truncated
   answer is not an answer. */
.gap-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
.gap-acts .up{grid-column:1 / -1}
.gap-acts a,.gap-acts button{font-size:11px;padding:5px 6px;border-radius:5px;text-align:center;white-space:nowrap;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink);
  cursor:pointer;text-decoration:none;font-family:"IBM Plex Sans",sans-serif}
.gap-acts .up{background:var(--ink);color:#fff;border-color:var(--ink)}
.gap-why{display:flex;gap:6px;margin-top:8px}
.gap-why input{flex:1;font-size:11.5px;padding:5px 7px}
.gap-why .btn{font-size:11px;padding:5px 10px}
.gap-done{opacity:.6}
.gap-note{margin-top:7px;font-size:11px;color:var(--slate-2);
  border-top:1px dashed var(--rule);padding-top:6px}

/* the Gaps column on the dashboard */
.gapchip{display:inline-block;min-width:20px;padding:1px 7px;border-radius:9px;
  font-size:11px;font-weight:600;line-height:17px;text-align:center}
.gapchip.bad{background:var(--tape);color:#fff}
.gapchip.warn{background:#FBE9CF;color:#8A5A0B}
.gapchip.ok{background:#E6F4EE;color:#137A52}
/* "not available" is not the same as "not applicable": the gap is real and
   acknowledged, so it keeps a tint rather than fading away entirely. */
.gap-unavailable{opacity:.78;border-left-color:#C9821B}

/* The caution on the GSTN fetch panel. Amber rather than red: it is a thing
   to do before relying on the fetch, not an error — but it must not read as
   one more paragraph of instructions either. */
.fetch-caution{margin-top:18px;padding:12px 14px;border:1px solid #F0D9B0;
  border-left:3px solid #C9821B;border-radius:8px;background:#FEF9F0}
.fetch-caution b{font-family:"Archivo",sans-serif;font-size:13px;color:#8A5A0B}
.fetch-caution p{margin-top:7px;font-size:12.5px;line-height:1.55;color:var(--ink)}
.fetch-caution p b{font-size:12.5px;color:var(--ink)}
/* Saving the invoice details without buying anything. */
.bd-save{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.bd-save .hint{font-size:11.5px}

/* ── phones ───────────────────────────────────────────────────────────
   Measured at 375px against every page. Everything from 768px up (iPad
   portrait and wider) already fits; these are the three places that did
   not, and each was pushing the whole page sideways rather than just
   itself. A page that scrolls horizontally on a phone is the one layout
   fault a reader cannot work around. */
@media (max-width: 560px) {
  /* The document links bleed 7px each side so the hover highlight sits
     wider than the text. At the edge of a narrow screen that bleed has
     nowhere to go and takes the page with it. */
  .doc { margin-left: 0; margin-right: 0; }

  /* Any table still wider than the screen scrolls inside itself. */
  .otable, .liab-table, .ht-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Rows of buttons wrap instead of running off. */
  .pane-actions, .lr-actions, .gap-acts, .bd-save { flex-wrap: wrap; }
}

/* ── installing the fetch extension, on the Upload page ─────────────── */
.ext-install{border:1px solid var(--rule);border-radius:8px;padding:14px 16px;background:var(--surface)}
.ext-lede{margin:0 0 12px}
.ext-install a.btn{text-decoration:none;display:inline-block}
.ext-steps{margin:12px 0 0;padding-left:20px;font-size:12.5px;color:var(--slate);line-height:1.7}
.ext-again{margin:10px 0 0;font-size:12.5px;color:var(--slate);display:flex;align-items:center;gap:8px}

/* ── the top bar: colour on the buttons, and who is signed in ──────────
   Every button in the bar was white with a thin outline, so the bar read as
   a row of empty boxes. A blue tint says "this is the way around the app";
   the page you are on is filled solid, so it reads at a glance; Sign out is
   tinted red because it is the one that ends something. Scoped to .app-top
   so buttons inside the pages keep their own look. */
.app-top .btn.ghost{
  background:#EAF2FD;border-color:#C6DBF4;color:var(--ink);font-weight:500;
}
.app-top .btn.ghost:hover{background:#D6E7FB;border-color:#9FC4EC;color:var(--ink)}
.app-top .btn.ghost.on{
  background:var(--ink-3);border-color:var(--ink-3);color:#fff;font-weight:600;
}
.app-top .btn.ghost.on:hover{background:var(--ink);border-color:var(--ink)}
.app-top .btn.ghost[href$="/logout"]{background:#FCEFF1;border-color:#EFC6CC;color:#A11D29}
.app-top .btn.ghost[href$="/logout"]:hover{background:#F8DDE1;border-color:#E3A6AF}
.app-top .btn.ghost:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* Several pages write their own header with an inline flex row that does not
   wrap, which on a phone takes the whole page sideways — so every header row
   may wrap. */
.app-top > nav, .app-top > div:last-child{flex-wrap:wrap;justify-content:flex-end}

/* Back to the draft, on the full-page observations: the way home, so it is
   coloured like the Draft reply button it returns to. */
.back-draft{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;padding:8px 14px}

/* ── workspace: the top scrolls away, the rest stays ──────────────────
   The stylesheet always meant the three columns to scroll on their own
   (.ws-col{overflow:auto}, a sticky .ws-head); nothing bounded the height,
   so the page scrolled instead and took the chain list and the case review
   off the screen while a PDF was being read.

   The top bar and the two header rows are ordinary page: they scroll away.
   Everything from the Liability bar down is the stage, exactly one window
   high less the one-line footer beneath it — so the page can scroll by the
   height of the rows above and no further. Once they are gone the stage
   fills the screen and stays still, and each column scrolls itself.

   Only where the three columns sit side by side (above 1080px) and the
   window is tall enough; below that they stack and the page scrolls as
   before. The full footer carries the legal links wanted on every page;
   here the same links sit on one line under the stage. */
@media (min-width:1081px) and (min-height:600px){
  .ws-page{--sfc-h:24px}
  .ws-page .ws-stage{
    height:calc(100vh - var(--sfc-h));
    height:calc(100dvh - var(--sfc-h));
    display:flex;flex-direction:column;min-height:0;
  }
  .ws-page .ws-stage > .ws-strip{flex:0 0 auto}
  .ws-page .ws{flex:1 1 auto;min-height:0}
  .ws-page footer.site-foot{display:none}
  .ws-page footer.sf-compact{display:flex;height:var(--sfc-h);box-sizing:border-box;
    margin:0;padding-top:0;padding-bottom:0}
  .ws-page .ws-col{min-height:0;overscroll-behavior:contain}
  .ws-page .ws-col.viewer{display:flex;flex-direction:column;padding:14px 18px}
  .ws-page .ws-col.viewer > *{flex:0 0 auto}
  .ws-page #viewOriginal{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .ws-page #viewOriginal > img{align-self:flex-start;height:auto}
  .ws-page .doc-frame{height:auto;flex:1 1 auto;min-height:320px}
}

/* The company name on the workspace, smaller at the user's asking: it
   labels the case rather than titling the page. Kept bold, because at this
   size bold is what still marks it out from the line beside it, and the
   line under it drops to match so it is not the larger of the two. */
.ws-page .topbar h1{font-size:12px;font-weight:700;letter-spacing:0;line-height:1.45}
.ws-page .topbar .sub{font-size:11.5px}

/* ── workspace header: two slim rows ──────────────────────────────────
   Row one picks the case and carries its status and next hearing; row two
   names it and says whether it has been read. Labels sit beside their
   controls instead of above them, which is most of the height saved. */
.ws-hdr-a{align-items:center;gap:8px 14px;padding:8px 22px}
.ws-hdr-a .hdr-sp,.ws-hdr-b .hdr-sp{flex:1 1 0;min-width:0}
.hdr-set{display:flex;align-items:center;gap:6px;margin:0}
.hdr-k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:600;white-space:nowrap}
.hdr-set select,.hdr-set input[type=date]{height:30px;padding:3px 8px;font-size:12.5px;width:auto}
.hdr-set .btn,.hdr-btn{padding:5px 11px;font-size:12px;line-height:1.2;text-decoration:none}
.hdr-link{font-size:11.5px;white-space:nowrap}
.hdr-inline{display:inline;margin:0}

.ws-hdr-b{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:8px 22px}
.ws-hdr-b .sub{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0}
.ws-hdr-b .sub span+span::before{content:"·";margin:0 7px;color:var(--slate-2)}
.ws-hdr-b .sub .mono{font-family:"IBM Plex Mono",monospace;font-size:11px}

.job-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  border-radius:999px;padding:3px 11px;border:1px solid;white-space:nowrap;cursor:help}
.job-chip.failed{color:#A11D29;background:#FCEFF1;border-color:#EFC6CC}
.job-chip.running{color:var(--ink-3);background:var(--sky-soft);border-color:#BCD6F2}

@media (min-width:841px){
  .ws-hdr-a .fg{display:flex;align-items:center;gap:6px;flex:0 1 auto}
  .ws-hdr-a .fg label{margin:0;white-space:nowrap}
  .ws-hdr-a select{height:30px;padding:3px 8px;font-size:12.5px}
  .ws-hdr-a .fg:nth-child(1) select{width:250px}
  .ws-hdr-a .fg:nth-child(2) select{width:122px}
  .ws-hdr-a .fg:nth-child(3) select{width:172px}
  /* "optional" is worth saying on a form; in this row it costs the company
     box fifty pixels to say something nobody needs told twice. */
  .ws-hdr-a .fg label .opt{display:none}
  /* When the row is short of room the company box gives way first: the
     name is printed in full on the line below anyway. State and case id
     are short and stop making sense cut off. */
  .ws-hdr-a .fg:nth-child(1){flex:0 1 260px;min-width:0}
  .ws-hdr-a .fg:nth-child(1) select{width:100%;min-width:180px}
  /* flex:0 0 auto, not just flex-shrink:0 — the older .ws-select rules give
     these a 150px/200px basis that includes the label, which left the State
     box itself 79px wide. */
  .ws-hdr-a .fg:nth-child(2),.ws-hdr-a .fg:nth-child(3),
  .ws-hdr-a .hdr-set,.ws-hdr-a .ws-pick-count{flex:0 0 auto}
  .ws-hdr-a .fg:nth-child(1){flex:0 1 330px}
}
/* A row that is allowed to wrap wraps before anything in it shrinks, which
   put the hearing controls on a second line on an ordinary laptop. Where
   one line can hold it, it must: the company box then gives way instead. */
@media (min-width:1200px){
  .ws-hdr-a{flex-wrap:nowrap}
}
@media (max-width:840px){
  .ws-hdr-a .hdr-sp{display:none}
  .hdr-set{flex:1 1 100%;flex-wrap:wrap}
  .ws-hdr-b{padding:10px 14px}
}

/* ── fees: the owner's table, and the prices on the draft page ─────────── */
.fee-wrap{overflow-x:auto}
.fee-table{border-collapse:collapse;min-width:460px;font-size:13px}
.fee-table th,.fee-table td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:left}
.fee-table thead th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.fee-table tbody th{font-weight:600;color:var(--ink)}
.fee-table td{white-space:nowrap}
.fee-table input{width:110px;text-align:right;font-variant-numeric:tabular-nums}
.fee-cur{color:var(--slate-2);margin-right:4px}

.rp-fee{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;opacity:.9}
.rp-fee-note{margin:2px 0 0;font-size:11.5px;color:var(--slate);text-align:center}

/* ── paying the draft fee ──────────────────────────────────────────── */
.fee-page{max-width:560px;margin:22px auto 40px;padding:0 16px}
.fee-card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:24px 24px 20px}
.fee-eyebrow{margin:0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.fee-card h1{font-size:20px;margin:4px 0 2px}
.fee-case{margin:0 0 16px;color:var(--slate);font-size:12.5px}
.fee-amount{display:flex;justify-content:space-between;align-items:baseline;
  padding:12px 14px;border-radius:9px;background:var(--sunk)}
.fee-amount span{font-size:12px;color:var(--slate)}
.fee-amount b{font-family:"IBM Plex Mono",monospace;font-size:22px;color:var(--ink)}
.fee-covers{margin:8px 0 14px;font-size:12px;color:var(--slate)}
.fee-steps{margin:0;padding-left:20px;display:grid;gap:16px;font-size:13px}
.fee-steps li b{display:inline}
.fee-steps small{display:block;margin-top:6px;color:var(--slate-2);font-size:11.5px}
.fee-upi{font-size:13px;background:var(--sunk);padding:2px 7px;border-radius:5px}
.fee-copy{padding:3px 9px;font-size:11.5px;margin-left:4px}
.fee-app{display:inline-block;margin-top:8px;padding:7px 13px;font-size:12.5px;text-decoration:none}
.fee-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fee-form input{flex:1 1 180px;min-width:0;padding:8px 10px;font-size:14px;letter-spacing:.04em}
.fee-small{margin:16px 0 0;font-size:11.5px;color:var(--slate-2);line-height:1.6}
.fee-blocked{margin:0 0 14px;padding:10px 12px;border-radius:8px;background:#FCEFF1;
  color:#A11D29;font-size:12.5px;line-height:1.55}
.fee-back{display:inline-block;margin-top:16px;font-size:12.5px}
.rp-fee-paid{color:#1F6B3B}
/* subscription payment: the state after the UTR is given */
.pay-received{margin:16px 0 0;padding:14px 16px;border-radius:9px;background:#E4F4EA;color:#1F4D30;font-size:13px}
.pay-received p{margin:6px 0 0;line-height:1.6}
.pay-fix{margin-top:12px;font-size:12.5px;color:var(--slate)}
.pay-fix summary{cursor:pointer}
.fee-amount + .fee-steps{margin-top:18px}

/* The one-line footer (see _footer.html). Off unless the workspace shows it. */
.sf-compact{display:none;flex:0 0 auto;align-items:center;flex-wrap:nowrap;gap:14px;
  padding:3px 22px;border-top:1px solid var(--rule);background:var(--surface);line-height:1.4;
  font-size:11px;color:var(--slate-2);white-space:nowrap;overflow:hidden}
.sf-compact .sf-brand{font-family:"Archivo",sans-serif;font-weight:700;color:var(--ink);font-size:11.5px}
.sf-compact a{color:var(--slate);text-decoration:none}
.sf-compact a:hover{color:var(--ink);text-decoration:underline}
.sf-compact .sf-c-note{margin-left:auto;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ── reading a document full screen (workspace) ─────────────────────── */
.doc-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.doc-acts form{margin:0}
.doc-full-btn{display:inline-flex;align-items:center;gap:6px}
.doc-full-exit{display:none}
#viewOriginal:fullscreen,#viewOriginal:-webkit-full-screen{
  background:#2B2B2B;display:flex;flex-direction:column;width:100%;height:100%;padding:0;position:relative}
#viewOriginal:fullscreen .doc-frame,#viewOriginal:-webkit-full-screen .doc-frame{
  flex:1 1 auto;width:100%;height:100%;min-height:0;border:0;border-radius:0}
#viewOriginal:fullscreen > img,#viewOriginal:-webkit-full-screen > img{
  max-height:100%;margin:auto;border:0}
#viewOriginal:fullscreen .doc-full-exit,#viewOriginal:-webkit-full-screen .doc-full-exit{
  display:inline-flex;align-items:center;gap:8px;position:absolute;bottom:18px;right:26px;z-index:5;
  background:rgba(18,58,99,.92);color:#fff;border:0;border-radius:999px;padding:7px 14px;
  font:600 12.5px "IBM Plex Sans",sans-serif;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.doc-full-exit small{opacity:.65;font-weight:500;font-family:"IBM Plex Mono",monospace;font-size:10.5px}

/* ── workspace columns: a scrollbar you can see ─────────────────────────
   The document list and the case review already scroll on their own, but a
   Mac hides scrollbars until something is actually scrolled, so a list of
   ten documents showing seven looked like a list of seven. These make the
   bar permanent and visible. The -webkit- rules are what force a Mac to
   keep it on screen in Chrome, Edge and Safari; Chrome ignores them if the
   standard properties are also set, so those are given to Firefox alone. */
.ws-page .ws-col::-webkit-scrollbar{width:10px}
.ws-page .ws-col::-webkit-scrollbar-track{background:#EEF3F9;border-left:1px solid var(--rule)}
.ws-page .ws-col::-webkit-scrollbar-thumb{background:#AFC3DB;border-radius:10px;
  border:2px solid #EEF3F9}
.ws-page .ws-col::-webkit-scrollbar-thumb:hover{background:#7F9CC0}
@supports (-moz-appearance:none){
  .ws-page .ws-col{scrollbar-width:thin;scrollbar-color:#AFC3DB #EEF3F9}
}

/* ── expert help on the draft page ─────────────────────────────────── */
.xp-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.xp-acts form{margin:0}
.xp-consent{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;color:var(--slate);
  text-transform:none;letter-spacing:0;font-weight:400;
  margin:8px 0 10px;line-height:1.45}
.xp-consent input{margin-top:2px;flex-shrink:0}
.xp-done{color:#1F6B3B;margin-bottom:10px}
.xp-state{background:#FFF7EA;border-color:#F0D9A8}

/* ── the expert desk (team and owner) ──────────────────────────────── */
.desk-wrap{max-width:1180px;margin:0 auto;padding:22px 22px 60px}
.desk-wrap h2{margin:0 0 4px}
.desk-wrap .lede{color:var(--slate);font-size:13px;margin:0 0 16px;max-width:75ch}
.xd-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.xd-tabs a{padding:6px 12px;border:1px solid var(--rule);border-radius:999px;font-size:12.5px;
  text-decoration:none;color:var(--ink);background:var(--surface)}
.xd-tabs a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.xd-tabs b{font-family:"IBM Plex Mono",monospace;font-weight:500;margin-left:4px}
.desk-table{border:1px solid var(--rule);border-radius:10px;overflow:hidden;width:100%}
.desk-table td{font-size:12.5px;vertical-align:middle}
.desk-table .muted{color:var(--slate-2);font-size:11px;display:block}
.desk-table .acts{display:flex;gap:6px;flex-wrap:wrap}
.desk-table .acts form{margin:0}
.desk-table .btn{padding:5px 11px;font-size:12px}
.xdue{font-family:"IBM Plex Mono",monospace;font-size:12px;white-space:nowrap}
.xdue.late{color:#A11D29;font-weight:600}
.desk-client-note{margin:0 0 6px;padding:9px 11px;border-radius:7px;background:#FFF7EA;
  font-size:12.5px;white-space:pre-wrap;color:#5A4210}
.desk-docs{display:flex;flex-direction:column;gap:4px}
.desk-doc{display:block;padding:7px 9px;border:1px solid var(--rule);border-radius:7px;
  text-decoration:none;background:var(--surface)}
.desk-doc:hover{background:#F4F9FF;border-color:#BCD6F2}
.desk-doc b{display:block;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink)}
.desk-doc span{display:block;font-size:11px;color:var(--slate);overflow-wrap:anywhere}


/* ── the Expert login: workspace and draft reply ───────────────────── */
.nav-off{opacity:.45;cursor:default}
.xd-tabs a.hot:not([aria-current]){border-color:#E8B45A;background:#FFF7EA}
.dk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding:14px 22px 10px;border-bottom:1px solid var(--rule);background:var(--surface)}
.dk-head h1{font-family:"Archivo",sans-serif;font-size:18px;margin:0 0 2px}
.dk-head .sub{margin:0;color:var(--slate);font-size:12px}
.dk-head .mono{font-family:"IBM Plex Mono",monospace;font-size:11px}
.dk-head-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dk-head-acts .btn{padding:7px 13px;font-size:12.5px}
.dk-col{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;min-width:0}
.dk-col-head{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);
  font-weight:600;margin:0 0 8px;display:flex;justify-content:space-between;gap:10px}
.dk-col-head a{text-transform:none;letter-spacing:0;font-weight:500}
.dk-ws{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;gap:14px;padding:14px 22px 30px;align-items:start}
.dk-docs{display:flex;flex-direction:column;gap:4px;max-height:78vh;overflow:auto}
.desk-doc.on{background:#E7F0FD;border-color:#9FC4EC}
.dk-frame{width:100%;height:78vh;border:1px solid var(--rule);border-radius:6px;background:#fff}
.dk-internal{margin:0 0 10px;padding:9px 11px;border-radius:7px;background:#E7F0FD;font-size:12.5px;
  white-space:pre-wrap;color:#1B3F6E}
.dk-reply{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;padding:14px 22px 30px;align-items:start}
.dk-editor .draft-edit{min-height:60vh}
.dk-actions{display:flex;flex-direction:column;gap:10px}
.dk-note{min-height:90px;font-size:12.5px}
.dk-actions > .btn{align-self:flex-start}
.dk-step{border-top:1px solid var(--rule);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.dk-step b{font-size:13px;color:var(--ink)}
.dk-step p{margin:0;font-size:11.5px;color:var(--slate);line-height:1.5}
.dk-step .btn{align-self:flex-start}
.dk-send{background:#FFF7EA;margin:0 -14px;padding:10px 14px;border-top-color:#F0D9A8}
.dk-send input{font-size:13px;padding:7px 9px}
.dk-state{border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;background:#E7F0FD;color:#1B4C86}
.dk-state.s-for_approval{background:#FFF4E0;color:#8A5A0B}
.dk-client summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink)}
.dk-client-draft{margin-top:8px;max-height:320px;overflow:auto;font-size:12px}
@media (max-width:1100px){
  .dk-ws{grid-template-columns:220px minmax(0,1fr)}
  .dk-ws > .dk-col:last-child{grid-column:1 / -1}
  .dk-reply{grid-template-columns:1fr}
}
@media (max-width:700px){.dk-ws{grid-template-columns:1fr}}
.dk-brief{padding:0;font-size:12px;line-height:1.55}
.dk-brief p{margin:0 0 8px}
.dk-brief h1,.dk-brief h2,.dk-brief h3{font-size:12.5px;margin:10px 0 4px}
/* ── merging Case IDs ──────────────────────────────────────────────── */
.link-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0}
.link-bar .btn{padding:6px 12px;font-size:12.5px}
.link-bar .btn.ghost:not(:disabled){border-color:var(--sky);color:var(--ink-3);font-weight:600}
.link-bar .hint{font-size:12px}
#caseTable .lcol{width:30px;text-align:center;padding-left:8px;padding-right:0}
/* The tick boxes show only after "Link cases" is pressed. */
#caseTable:not(.merging) .lcol{display:none}
/* Type: the pill is a button that opens a list. */
.ctpick{cursor:pointer;font:inherit;border-width:1px}
.ctpick:hover{filter:brightness(.96);box-shadow:0 0 0 2px rgba(15,40,80,.12)}
.ctpick.chosen::after{content:" \270E";font-size:10px;opacity:.75}
.ctsel{font-size:12px;padding:3px 6px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);max-width:180px}
#caseTable .ltick{width:16px;height:16px;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.merged-note{color:#8A5A0B;font-weight:600}
/* 900 was right for the seven columns this page used to have. Type and
   the link to the papers make ten, and a Case ID is twenty characters. */
.mg-wrap{max-width:1120px;margin:0 auto;padding:24px 22px 60px}
.mg-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--rule);
  border-radius:10px;overflow:hidden;font-size:12.5px}
.mg-table th,.mg-table td{padding:9px 11px;border-bottom:1px solid var(--rule);text-align:left}
.mg-table th{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-2);background:var(--sunk)}
.mg-table tr.keep td{background:#EAF6EE}
.mg-table .mono{font-family:"IBM Plex Mono",monospace;font-size:12px}
.mg-keep{font-size:10.5px;font-weight:700;color:#1F6B3B;background:#D5EFDD;border-radius:999px;padding:2px 8px;margin-left:6px}
.mg-problems{margin:16px 0;padding:12px 16px;border-radius:9px;background:#FCEFF1;border:1px solid #EFC6CC;color:#7A1520}
.mg-problems ul{margin:6px 0 0;padding-left:18px}
.mg-what{margin:16px 0;padding:12px 16px;border-radius:9px;background:var(--sunk);font-size:12.5px;line-height:1.6}
.mg-what ul{margin:6px 0 0;padding-left:18px}
.mg-confirm{display:flex;gap:8px;align-items:flex-start;margin:14px 0;font-size:13px}
/* ── Upload a notice: find the case ──────────────────── */
.nm-read{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13px;margin:0 0 14px}
.nm-read dt{color:var(--slate-2)}
.nm-read dd{margin:0}
.nm-cases{display:grid;gap:8px;margin:0 0 14px}
.nm-case{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--rule);
  border-radius:8px;padding:10px 12px;background:var(--surface);cursor:pointer;
  text-transform:none;letter-spacing:normal;font-size:13px;font-weight:400;color:var(--ink)}
.nm-case b{font-weight:600}
.nm-case:has(input:checked){border-color:var(--ink);background:#E7F0FD}
.nm-case small{display:block;color:var(--slate-2);font-size:11.5px;margin-top:2px}
.nm-why{font-size:11px;color:var(--green,#1d7a46);font-weight:600}
.nm-hear{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.nm-hear input,.nm-hear select{width:100%;padding:9px 11px;border:1px solid var(--rule);
  border-radius:8px;background:var(--surface);font:inherit;font-size:13.5px;color:var(--ink)}
@media (max-width:700px){.nm-hear{grid-template-columns:1fr}.nm-read{grid-template-columns:1fr}}

/* Upload notices: one line per notice as it is read */
.nb-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.nb-list li{display:grid;grid-template-columns:minmax(0,260px) 1fr auto;gap:4px 12px;align-items:start;
  padding:8px 12px;border:1px solid var(--rule);border-left-width:3px;border-radius:7px;
  background:var(--surface);font-size:12.5px}
.nb-list li b{font-weight:600;overflow-wrap:anywhere}
.nb-list li a{font-weight:600;white-space:nowrap}
.nb-list li.nb-wait{color:var(--slate-2)}
.nb-list li.nb-busy{border-left-color:var(--sky,#2F7FD4)}
.nb-list li.nb-ok{border-left-color:#1d7a46}
.nb-list li.nb-ask{border-left-color:#C77A12;background:#FFF8EC}
.nb-list li.nb-bad{border-left-color:#B3202C;background:#FDF1F2}
@media (max-width:700px){.nb-list li{grid-template-columns:1fr}}

/* ── the note to argue from, in the workspace column ─────────────── */
.hb-pane{padding:10px 12px 16px}
.hb-read{max-height:none;font-size:12.5px}
.hb-read h2{font-size:12.5px;margin:14px 0 4px;padding-top:8px;border-top:1px solid var(--rule)}
.hb-read h2:first-child{border-top:0;padding-top:0;margin-top:0}
.hb-read p,.hb-read li{font-size:12.5px;line-height:1.6}
.hb-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hb-acts .btn{padding:6px 11px;font-size:12px}

/* ── user management: sections on the left, details beside them ────── */
.um-split{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.um-side{display:grid;gap:8px;position:sticky;top:16px}
.um-item{display:block;text-decoration:none;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:9px;padding:11px 13px;
  transition:border-color .12s,background .12s}
.um-item:hover{border-color:var(--slate-2)}
.um-item b{font-family:"Archivo",sans-serif;font-size:13px;display:flex;align-items:center;gap:8px}
.um-item small{display:block;color:var(--slate-2);font-size:11px;margin-top:3px;line-height:1.45}
.um-item .n{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;
  font-weight:500;color:var(--slate);background:var(--sunk);border-radius:999px;padding:1px 7px}
.um-item.on{border-color:var(--ink);background:#E7F0FD;box-shadow:inset 0 0 0 1px var(--ink)}
.um-main{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:18px 20px}
.um-head{margin:0 0 14px}
.um-head h2{font-size:15.5px;margin:0 0 4px;display:flex;align-items:baseline;gap:9px}
.um-head p{font-size:12.5px;color:var(--slate);line-height:1.6;margin:0}
.um-count{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;color:var(--slate-2)}
.um-group{border:1px solid var(--rule);border-radius:9px;padding:12px 14px;margin-bottom:10px;
  background:var(--paper)}
.um-grow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.um-rename{display:flex;gap:6px;align-items:center;flex:1}
.um-rename input{flex:1;min-width:140px;padding:6px 9px;border:1px solid var(--rule);
  border-radius:7px;background:var(--surface);font:inherit;font-size:13px;color:var(--ink);font-weight:600}
.um-grow form{display:flex;gap:6px;align-items:center;margin:0}
.um-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0}
.um-tags li{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:3px 5px 3px 11px}
.um-tags li form{margin:0}
.um-tags li button{border:0;background:none;color:var(--slate-2);cursor:pointer;
  font-size:14px;line-height:1;padding:0 4px;border-radius:50%}
.um-tags li button:hover{color:#A11D29;background:#FCEFF1}
.um-ent td{vertical-align:middle}
.um-tagform{display:flex;gap:6px;align-items:center;margin:0}
.um-tagform select{padding:5px 8px;border:1px solid var(--rule);border-radius:7px;
  background:var(--surface);font:inherit;font-size:12.5px;color:var(--ink);max-width:190px}
@media (max-width:820px){
  .um-split{grid-template-columns:1fr}
  .um-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* The group name is the only field on its row — give it room to be read. */
.um-main .add-row input[type=text]{min-width:230px}

/* ══════════════════════════════════════════════════════════
   THE SHOP WINDOW
   The two places somebody sees before they have paid: the
   panel beside the sign-in form, and the demo on /subscribe.
   Both say the same three things — one file per matter, the
   hearing dates in front of you, and a reply already drafted.
   The demo screens are drawn in CSS rather than photographed
   so they never go stale when a real screen is changed, and
   so they carry no client's data.
   ══════════════════════════════════════════════════════════ */

/* ── sign-in panel: the three things this does ─────────── */
.art-points{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.art-points li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.art-points i{
  width:24px;height:24px;border-radius:7px;font-style:normal;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;font:700 11px "Archivo",sans-serif;color:#fff;
}
.art-points b{display:block;font-size:13.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.art-points p{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.58);max-width:40ch}

/* hearings thumbnail: date chips, the near one in orange */
.mh{gap:6px;justify-content:center}
.mh .hrow{display:grid;grid-template-columns:15px minmax(0,1fr) 13px;gap:6px;align-items:center}
.mh .hrow .d{height:11px;background:var(--ink);border-radius:2px}
.mh .hrow .b{height:7px;background:#D3E0EF;border-radius:3px}
.mh .hrow .c{height:7px;background:var(--rule);border-radius:2px}
.mh .hrow.soon .d,.mh .hrow.soon .c{background:var(--orange)}

/* ── demo screens on the subscription page ─────────────── */
.dm{
  height:352px;background:var(--surface);display:flex;flex-direction:column;
  text-align:left;font-size:11.5px;color:var(--ink);overflow:hidden;
}
.dm-top{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#EFF5FC;
        border-bottom:1px solid var(--rule)}
.dm-dots{display:inline-flex;gap:4px}
.dm-dots i{width:7px;height:7px;border-radius:50%;background:#C8D8EA}
.dm-top b{font-family:"Archivo",sans-serif;font-size:12.5px}
.dm-top .r{margin-left:auto;font-size:10.5px;color:var(--slate-2)}
.dm-body{flex:1;min-height:0;padding:12px 14px;display:flex;flex-direction:column;gap:10px}

/* caption strip under each screen */
/* the carousel dots sit at the bottom of the slide, so the caption keeps
   room underneath its second line for them to land in */
.dm-cap{background:var(--ink);color:#fff;padding:9px 14px 26px;text-align:left}
.dm-cap b{font-family:"Archivo",sans-serif;font-size:12.5px;display:block}
.dm-cap span{display:block;font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.62);margin-top:2px}

/* dashboard */
.dm-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dm-tile{border:1px solid var(--rule);border-top:3px solid var(--sky);border-radius:7px;
         padding:6px 9px 7px;background:#fff}
.dm-tile span{display:block;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2)}
.dm-tile b{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600}
.dm-tile.live{border-top-color:var(--mint)}
.dm-tile.warn{border-top-color:var(--orange)}
.dm-tile.done{border-top-color:#AFC3DB}

.dm-tbl{width:100%;border-collapse:collapse;font-size:11px}
.dm-tbl th{text-align:left;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
           color:var(--slate-2);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--rule)}
.dm-tbl td{padding:6px 8px;border-bottom:1px solid var(--rule-2)}
.dm-tbl tr:last-child td{border-bottom:0}
.dm-tbl .r{text-align:right}
.dm-pill{display:inline-block;font-size:9px;font-weight:600;padding:2px 7px;border-radius:999px;white-space:nowrap}
.dm-pill.amber{background:var(--amber-soft);color:var(--amber)}
.dm-pill.green{background:var(--seal-soft);color:var(--seal)}
.dm-pill.blue{background:var(--sky-soft);color:var(--ink-3)}
.dm-pill.red{background:var(--tape-soft);color:var(--tape)}

/* hearings */
.dm-hear{display:flex;flex-direction:column;gap:7px}
.dm-h{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;
      border:1px solid var(--rule);border-radius:8px;padding:6px 9px;background:#fff}
.dm-h .cal{border-radius:6px;background:var(--sunk);text-align:center;padding:3px 0}
.dm-h .cal b{display:block;font-family:"IBM Plex Mono",monospace;font-size:14px;line-height:1.15}
.dm-h .cal span{display:block;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2)}
.dm-h .who{min-width:0;font-weight:600;font-size:11.5px}
.dm-h .who small{display:block;font-weight:400;color:var(--slate-2);font-size:10.5px;margin-top:1px;
                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-h.soon{border-color:#F6D0A6;background:var(--amber-soft)}
.dm-h.soon .cal{background:#fff}

/* workspace: the chain rail beside the paper */
.dm-ws{display:grid;grid-template-columns:158px minmax(0,1fr);gap:12px;flex:1;min-height:0}
.dm-chain{list-style:none;margin:0;padding:0}
.dm-chain li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:9px;padding-bottom:10px;position:relative}
.dm-chain li i{width:9px;height:9px;border-radius:50%;background:var(--ink);margin-top:3px}
.dm-chain li:not(:last-child)::before{content:"";position:absolute;left:4px;top:15px;bottom:1px;width:1px;background:var(--rule)}
.dm-chain li.now i{background:var(--orange);box-shadow:0 0 0 3px rgba(240,138,46,.25)}
.dm-chain b{display:block;font-size:10.5px;font-weight:600}
.dm-chain small{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--slate-2)}
.dm-sheet{border:1px solid var(--rule);border-radius:8px;background:#fff;padding:10px;
          display:flex;flex-direction:column;gap:7px;min-width:0}
.dm-ln{height:7px;border-radius:3px;background:#E3EBF5}
.dm-ln.sh{width:62%}
.dm-liab{margin-top:auto;border:1px solid var(--rule);border-radius:7px;background:var(--sunk);
         padding:7px 9px;display:flex;justify-content:space-between;align-items:center;font-size:10.5px}

/* draft reply */
.dm-reply{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;min-height:0}
.dm-col{border:1px solid var(--rule);border-radius:8px;background:#fff;padding:9px 10px;
        display:flex;flex-direction:column;gap:7px;overflow:hidden;min-width:0}
.dm-col .lab{font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.dm-g{border-left:3px solid var(--sky);background:var(--sky-soft);border-radius:0 6px 6px 0;
      padding:5px 8px;font-size:10.5px;line-height:1.4}
.dm-g.ok{border-left-color:var(--mint);background:var(--seal-soft)}
.dm-para{font-size:10.5px;line-height:1.55;color:var(--slate);margin:0}
.dm-acts{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.dm-btn{font-size:9.5px;font-weight:600;padding:4px 9px;border-radius:5px;background:var(--ink);color:#fff}
.dm-btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--rule)}

/* ── what the subscription covers ──────────────────────── */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feat{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
      padding:12px 14px;box-shadow:var(--shadow)}
.feat b{font-family:"Archivo",sans-serif;font-size:13px;display:block;margin-bottom:3px}
.feat p{margin:0;font-size:12px;line-height:1.5;color:var(--slate)}

@media (max-width:900px){
  .feat-grid{grid-template-columns:1fr}
  .dm{height:auto}
  .dm-tiles{grid-template-columns:1fr 1fr}
  .dm-ws,.dm-reply{grid-template-columns:1fr}
  .dm-chain li{padding-bottom:7px}
}

/* The arrows sit on top of the screen being shown, and on the workspace
   slide the left one landed squarely on the chain rail. They fade in when
   the carousel is pointed at; the dots carry the "there is more" signal the
   rest of the time. A touch screen has no hover, so there they stay on,
   tucked into the bottom corners with the caption making room. */
.c-arrow{opacity:0;transition:opacity .14s}
.carousel:hover .c-arrow,.c-arrow:focus-visible{opacity:1}
@media (hover:none){
  .c-arrow{opacity:1;top:auto;bottom:8px;width:28px;height:28px;font-size:17px}
  .c-prev{left:8px}.c-next{right:8px}
  .dm-cap{padding-bottom:44px}
}

/* the document sheet, fleshed out a little */
.dm-sheet .lab{font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
               color:var(--slate-2);font-weight:600}
.dm-ln.xs{width:38%}
.dm-chips{display:flex;gap:5px;flex-wrap:wrap}
.dm-chip{font-family:"IBM Plex Mono",monospace;font-size:9px;border:1px solid var(--rule);
         border-radius:4px;padding:2px 6px;color:var(--slate);background:var(--paper)}

/* The dashboard's own two export buttons, at the end of the filter band. */
.scope-out{display:flex;gap:6px;margin-left:8px}
.scope-out .btn{padding:5px 12px;font-size:12px}

/* ── the calendar's month arrows ──────────────────────────────────── */
.cal-head{position:relative}
.cal-nav{display:inline-flex;align-items:center;gap:2px;margin-left:8px}
.cal-step,.cal-today{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  color:var(--slate);border:1px solid var(--rule);background:var(--surface);
  border-radius:6px;font-size:13px;line-height:1;padding:2px 7px;min-width:22px;
}
.cal-today{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:4px 8px}
.cal-step:hover,.cal-today:hover{border-color:var(--ink);color:var(--ink);background:#E7F0FD}
.cal-step:focus-visible,.cal-today:focus-visible{outline:2px solid var(--sky);outline-offset:1px}
.cal-busy{opacity:.55;transition:opacity .1s}

/* ── cases that look like one matter ─────────────────────── */
.link-hints{margin:0 0 12px;border:1px solid var(--rule);border-radius:8px;
  background:var(--surface)}
.link-hints>summary{cursor:pointer;padding:9px 13px;font-size:12.5px;font-weight:600;
  color:var(--slate);list-style:none;display:flex;align-items:center;gap:8px}
.link-hints>summary::-webkit-details-marker{display:none}
.link-hints>summary::before{content:"\25B8";font-size:10px;color:var(--slate-2);
  transition:transform .12s ease}
.link-hints[open]>summary::before{transform:rotate(90deg)}
.link-hints>summary b{font-weight:600;font-size:11px;background:var(--sky-soft);
  color:var(--slate);border-radius:10px;padding:1px 7px}
.link-hints[open]>summary{border-bottom:1px solid var(--rule)}
.link-hints .mh{margin:8px 10px}
.link-hints .mh:first-of-type{margin-top:10px}
.mh{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:11px 14px;border:1px solid var(--rule);border-left-width:3px;
  border-radius:8px;background:var(--surface);font-size:12.5px}
.mh.likely{border-left-color:#1d7a46;background:#F4FBF6}
.mh.possible{border-left-color:#C77A12;background:#FFF8EC}
.mh-say b{font-weight:600}
.mh-say span{margin-left:8px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--slate)}
.mh-say ul{margin:5px 0 0;padding-left:17px;color:var(--slate);display:grid;gap:2px}
.mh form{flex:none}
.mh .btn{padding:5px 12px;font-size:12px;white-space:nowrap}
@media (max-width:700px){.mh{flex-direction:column;align-items:stretch}}

/* ── the four ways documents arrive, each its own colour ─────────────
   A tint per option so the one you want is found by colour before the
   words are read. Kept pale: these are four equal choices, not a warning
   and three others. The chosen one still goes blue, as every selected
   thing on the site does. */
.mode-item.m-gstn{background:#EFF6FF;border-color:#C7DBF5}
.mode-item.m-create{background:#F0FAF3;border-color:#C6E6D2}
.mode-item.m-existing{background:#FFF8EC;border-color:#EFDCB8}
.mode-item.m-gstat{background:#F7F1FB;border-color:#DCCBE8}
.mode-item.m-gstn:hover{border-color:#7FA9DD}
.mode-item.m-create:hover{border-color:#72B58C}
.mode-item.m-existing:hover{border-color:#D6AE63}
.mode-item.m-gstat:hover{border-color:#A886C0}
.mode-item.on{background:#E7F0FD}

/* the link screen's money column */
.mg-table .mg-num{text-align:right;font-family:"IBM Plex Mono",monospace;white-space:nowrap}
/* the papers, in a new tab — one line, and the column no wider than the link */
.mg-table .mg-open{white-space:nowrap;width:1%;text-align:right}
.mg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* The Case ID never breaks across lines. Its tags sit UNDER it rather
   than beside it — held on one line they made that column 303px, a
   third of the table, and pushed At stake off the edge. */
.lk-ref{white-space:nowrap;display:inline-block}
.mg-table .mg-keep{white-space:nowrap}
.mg-table .ct{white-space:nowrap}
.mg-same{margin:10px 0 0;padding:9px 13px;border-radius:7px;background:#F4FBF6;
  border:1px solid #C6E6D2;font-size:12.5px;color:var(--slate)}

/* ── narrowing the hearing diary ─────────────────────────────── */
.hr-filter{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:18px 0 12px}
.hr-filter-lab{font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate-2);font-weight:600}
.hr-filter select{font-family:inherit;font-size:12.5px;padding:7px 9px;
  border:1px solid var(--rule);border-radius:5px;background:var(--surface);color:var(--ink);
  /* width:auto, or the page's own `select{width:100%}` puts each one on a
     line of its own and the bar becomes four stacked boxes. */
  width:auto;min-width:150px;max-width:230px}
.hr-filter-now{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--slate);
  background:var(--sky-soft);border-radius:5px;padding:4px 9px}
.hr-filter .btn{padding:5px 12px;font-size:12px}
.ht-table tr.ht-pick{cursor:pointer}
.ht-table tr.ht-pick:hover{background:var(--sky-soft)}
.ht-table tr.ht-pick.on{background:#E7F0FD;box-shadow:inset 2px 0 0 var(--ink)}
.ht-table tr.ht-pick:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
tr.hr-none td{color:var(--slate-2);font-size:12.5px;padding:14px 10px}

/* ── a pie slice is a filter ──────────────────────────────── */
.hc-pickable .hc-hit{cursor:pointer}
.hc-pickable svg .hc-hit{transition:opacity .12s}
.hc-pickable svg:hover .hc-hit{opacity:.55}
.hc-pickable svg .hc-hit:hover{opacity:1}
/* Once something is chosen, the rest of the pie steps back so the chosen
   slice is the one you see. */
.hc-card.picked svg .hc-hit{opacity:.3}
.hc-card.picked svg .hc-hit.on{opacity:1;stroke:var(--ink);stroke-width:2}
.hc-pickable .legend li{cursor:pointer;border-radius:4px;padding:1px 4px;margin:0 -4px}
.hc-pickable .legend li:hover{background:var(--sky-soft)}
.hc-card.picked .legend li{opacity:.5}
.hc-card.picked .legend li.on{opacity:1;background:#E7F0FD}
.hc-pickable .hc-bars li{cursor:pointer}
.hc-card.picked .hc-bars li{opacity:.45}
.hc-card.picked .hc-bars li.on{opacity:1}

/* ── sortable hearing tables ─────────────────────────────── */
.hr-table th.hr-sort{cursor:pointer;user-select:none;white-space:nowrap}
.hr-table th.hr-sort:hover{color:var(--ink)}
/* A neutral glyph on every sortable heading, so the column looks clickable
   before it is clicked. It used to be blank until a sort was applied, which
   meant nothing on the page said the table could be sorted at all. */
.hr-table th.hr-sort::after{content:"\2195";opacity:.4;margin-left:5px;font-size:10px}
.hr-table th.hr-sort[data-dir="asc"]::after{content:"\25B2";opacity:1}
.hr-table th.hr-sort[data-dir="desc"]::after{content:"\25BC";opacity:1}
.hr-table th.hr-sort:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}


/* ── linking cases: the observations, case beside case ───────── */
.lk-obs{margin:16px 0 0;border:1px solid var(--rule);border-radius:9px;background:var(--surface)}
.lk-obs-h{padding:10px 14px;border-bottom:1px solid var(--rule);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);font-weight:700}
.lk-obs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--rule-2)}
.lk-obs-col{background:var(--surface);padding:12px 14px;min-width:0}
.lk-obs-ref{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:8px}
.lk-obs-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.lk-obs-col li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:12.5px;
  padding-bottom:7px;border-bottom:1px solid var(--rule-2)}
.lk-obs-col li:last-child{border-bottom:none;padding-bottom:0}
.lk-o-t{color:var(--ink);overflow-wrap:anywhere}
.lk-o-f{grid-row:2;font-size:11px;color:var(--slate-2)}
.lk-o-a{grid-column:2;grid-row:1/3;align-self:center;white-space:nowrap;font-size:12px;
  color:var(--slate)}
.lk-warn{margin:14px 0 0;padding:11px 14px;border:1px solid #EFDCB8;border-left-width:3px;
  border-radius:0 8px 8px 0;background:#FFF8EC;font-size:13px;color:var(--slate)}
.lk-warn b{color:#8A4B00}
.lk-warn ul{margin:6px 0 0 18px;display:grid;gap:4px}
.lk-warn p{margin:8px 0 0;font-size:12.5px;color:var(--slate-2)}

/* ── Settings › Linked cases ─────────────────────────────────── */
.lk-list{display:grid;gap:12px;margin-top:14px}
.lk-group{border:1px solid var(--rule);border-radius:9px;background:var(--surface);overflow:hidden}
.lk-head{display:flex;align-items:center;gap:10px;padding:9px 13px;
  background:var(--sky-soft);border-bottom:1px solid var(--rule)}
.lk-principal{font-size:12.5px;font-weight:600;color:var(--ink)}
.lk-of{font-size:11.5px;color:var(--slate-2)}
.lk-group ul{list-style:none;margin:0;padding:0}
.lk-group li{display:flex;align-items:center;gap:12px;padding:9px 13px;
  border-bottom:1px solid var(--rule-2);font-size:12.5px}
.lk-group li:last-child{border-bottom:none}
.lk-co{color:var(--slate);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-tag{font-size:11px;color:#1d7a46;background:#EAF6EE;border-radius:9px;padding:2px 9px;
  white-space:nowrap}
.lk-group li form{margin:0}
.lk-group li .btn{padding:4px 11px;font-size:12px}
/* the dashboard cell that names the matter instead of the money */
.lk-to{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--slate-2);
  text-decoration:none;white-space:nowrap}
.lk-to:hover{color:var(--ink);text-decoration:underline}

/* ── the matter a workspace case belongs to ──────────────────── */
.lk-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 16px;background:var(--sky-soft);border-bottom:1px solid var(--rule);
  font-size:12.5px;color:var(--slate)}
.lk-bar-say{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.lk-bar-say b{color:var(--ink);font-weight:600}
.lk-bar-refs{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--slate-2)}
.lk-bar-btn{margin-left:auto;padding:4px 12px;font-size:12px;white-space:nowrap}
/* a linked matter at another forum: pointed at, never mixed in */
.lk-forum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 16px;background:#FFF8EC;border-bottom:1px solid #EFDCB8;
  font-size:12.5px;color:var(--slate)}
.lk-forum b{color:#8A4B00;font-weight:600}
.side-tag.lk{background:var(--sky-soft);color:var(--slate);border-color:var(--rule)}
@media (max-width:760px){.lk-bar,.lk-forum{padding:8px 12px}.lk-bar-btn{margin-left:0}}


/* ── background work on a page (templates/_task.html) ──────────────────
   The strip says what is running, or how the last run ended. tasks.js
   reads the task id off the running one and reloads the page when it has
   finished. */
.task-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 22px 0;padding:10px 14px;border-radius:6px;font-size:12.5px;line-height:1.5;border:1px solid var(--rule)}
.task-strip b{font-weight:600;white-space:nowrap}
.task-strip.running{color:var(--ink-3);background:var(--sky-soft);border-color:#BCD6F2}
.task-strip.done{color:#1E5F3F;background:#E6F4EC;border-color:#BFE1CC}
.task-strip.failed{color:#A11D29;background:#FCEFF1;border-color:#EFC6CC}
.hf-actions .task-strip,.gstat-tools .task-strip,.docpane .task-strip{margin:0 0 10px}

/* ── workspace: the next hearing, in the Hearing tab ────────────── */
.hb-next{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--rule)}
.hb-next input[type=date]{height:30px;padding:3px 8px;font-size:12.5px;width:auto;flex:1 1 120px;min-width:0}
.hb-next .btn{padding:5px 11px;font-size:12px;line-height:1.2}

/* ── the draft's own weak points, listed beside it (templates/reply.html) ── */
.check-warn ul{margin-bottom:8px}
.check-warn li{line-height:1.45}
.check-warn .ck-point{display:inline;font-size:12.5px;color:var(--ink)}
.check-warn .ck-why{color:var(--slate);font-size:12px}
.check-warn .ck-kind{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-2);background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:0 5px;margin-right:4px;vertical-align:middle}
.check-warn .ck-at{margin:0;font-size:11px;color:var(--slate-2)}

/* ── reply page: the download choice, the palette, the folded checks ── */
.dl-menu{position:relative;display:inline-block}
.dl-menu summary{list-style:none;cursor:pointer;display:inline-block}
.dl-menu summary::-webkit-details-marker{display:none}
.dl-choices{position:absolute;left:0;top:calc(100% + 4px);z-index:20;min-width:260px;background:var(--surface);border:1px solid var(--rule);border-radius:7px;box-shadow:0 8px 24px rgba(20,33,61,.12);padding:6px}
.dl-choices a{display:block;padding:8px 10px;border-radius:5px;text-decoration:none;color:var(--ink);font-size:12.5px;font-weight:600}
.dl-choices a small{display:block;font-weight:400;color:var(--slate-2);font-size:11px}
.dl-choices a:hover{background:#F4F9FF}
.rte-palette{display:inline-flex;gap:3px;align-items:center;margin:0 2px}
.rte-palette button{width:16px;height:16px;padding:0;border:1px solid rgba(0,0,0,.18);border-radius:3px;cursor:pointer}
.rte-palette button:hover{transform:scale(1.15)}
.rte-hilite #hiliteSwatch{font-size:10px;font-weight:700;color:#333;line-height:16px;text-align:center;border-radius:3px}
.check-warn summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.check-warn summary::-webkit-details-marker{display:none}
.check-warn summary b{margin:0;font-size:13px}
.check-warn .ck-count{font-family:"IBM Plex Mono",monospace;font-size:11px;background:var(--surface);border:1px solid var(--tape-line);border-radius:9px;padding:1px 8px}
.check-warn .ck-open{margin-left:auto;font-size:11px;color:var(--slate-2)}
.check-warn[open] .ck-open{display:none}
.check-warn[open] summary{margin-bottom:6px}
/* Until it has been opened once, the fold pulses: a list nobody has read
   yet must not sit there looking like a heading. */
.check-warn:not([open]) summary b{animation:ck-pulse 1.6s ease-in-out infinite}
@keyframes ck-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.check-warn:not([open]) summary b{animation:none}}

/* ── the user guide (templates/guide.html) ─────────────────────────── */
.guide-page{-webkit-user-select:none;user-select:none}
.guide{max-width:1120px;margin:0 auto;padding:26px 22px 60px}
.guide-head{margin-bottom:28px;max-width:70ch}
.guide-head .eyebrow{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.guide-head h1{font-family:"Archivo",sans-serif;font-size:26px;margin:4px 0 8px;letter-spacing:-.01em}
.guide-head .lede{color:var(--slate);font-size:14px;line-height:1.55;margin:0}
.guide-steps{list-style:none;margin:0;padding:0;counter-reset:gstep;display:flex;flex-direction:column;gap:22px}
.gstep{counter-increment:gstep;display:grid;grid-template-columns:minmax(260px,5fr) minmax(320px,7fr);gap:18px 26px;align-items:start;background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:20px 22px}
.gstep .gtext{position:relative;padding-left:46px}
.gstep .gtext::before{content:counter(gstep);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.gstep h2{font-family:"Archivo",sans-serif;font-size:16px;margin:5px 0 8px;line-height:1.3}
.gstep p{font-size:13.5px;line-height:1.6;color:var(--ink);margin:0 0 8px}
.gstep p b{font-weight:600}
.gstep .mono{font-family:"IBM Plex Mono",monospace;font-size:.92em}
.gstep .gtip{font-size:12.5px;color:var(--slate);border-left:3px solid var(--sky);padding-left:10px}
.gshot{margin:0;min-width:0}
.gshot img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:7px;box-shadow:0 6px 20px rgba(20,33,61,.10);pointer-events:none;-webkit-user-drag:none}
.gshot-note{display:flex;align-items:center;min-height:120px}
.gnote{width:100%;border:1px dashed var(--rule);border-radius:7px;padding:18px 20px;background:var(--paper)}
.gnote b{display:block;font-family:"Archivo",sans-serif;font-size:15px;margin-bottom:4px}
.gnote span{font-size:12.5px;color:var(--slate)}
.guide-foot{margin-top:30px;font-size:12px;color:var(--slate-2);max-width:70ch}
.topbar-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.guide-card{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--rule);border-radius:9px;padding:16px 18px}
.guide-card:hover{border-color:var(--ink-3);background:#F4F9FF}
.guide-card b{display:block;font-family:"Archivo",sans-serif;font-size:15px;margin-bottom:4px}
.guide-card span{display:block;font-size:12.5px;color:var(--slate);line-height:1.5}
.guide-card em{display:block;font-style:normal;font-weight:600;font-size:12.5px;color:var(--ink-3);margin-top:8px}
@media (max-width:820px){.gstep{grid-template-columns:1fr}}
@media print{.guide-page *{display:none !important}}

/* draft reply: a pleading the stage no longer allows, and the comments still owed */
.stage-stop{margin:12px 22px 0;padding:12px 14px;border-left:3px solid var(--tape);background:var(--tape-soft);
  border-radius:0 7px 7px 0;font-size:13px;line-height:1.55;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stage-stop b{color:var(--tape)}
.stage-stop .btn{margin-left:auto}
textarea.obs-c.missing{border-color:var(--amber);background:var(--amber-soft)}
.obs-count{font-size:12px;color:var(--amber);margin:0;line-height:1.45}
.obs-count.ok{color:var(--seal)}

/* the legal particulars: a label above each box, two to a row */
.lg-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin-top:12px}
.lg-row{display:flex;flex-direction:column;gap:4px;min-width:0}
.lg-row.wide{grid-column:1 / -1}
.lg-row label{font-size:12px;letter-spacing:.02em;color:var(--slate);font-weight:600}
.lg-row label .hint{font-weight:400;text-transform:none;letter-spacing:0}
.lg-row input,.lg-row textarea{padding:7px 10px;border:1px solid var(--rule);
  border-radius:7px;font:inherit;font-size:13px;width:100%;box-sizing:border-box}
.lg-row textarea{resize:vertical}
.lg-gap{font-size:11.5px;color:var(--tape)}
.lg-note{font-size:11.5px;color:var(--slate-2)}
.lg-actions{grid-column:1 / -1;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;margin-top:4px}
@media (max-width:760px){.lg-form{grid-template-columns:1fr}}

/* Settings - Case IDs: a case filed under a folder name, and its papers */
.oc{border:1px solid var(--rule);border-radius:10px;background:var(--surface);
  margin-bottom:10px;overflow:hidden}
.oc>summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer;
  padding:11px 14px;font-size:13px}
.oc>summary::-webkit-details-marker{display:none}
.oc>summary::before{content:"\25B8";color:var(--slate-2);font-size:11px}
.oc[open]>summary::before{content:"\25BE"}
.oc[open]>summary{border-bottom:1px solid var(--rule);background:var(--sunk)}
.oc-n{color:var(--tape);font-weight:600}
.oc-co{color:var(--slate);margin-left:auto;font-size:12.5px}
.oc-docs{width:100%;border-collapse:collapse;font-size:12.5px}
.oc-docs th,.oc-docs td{padding:7px 14px;text-align:left;border-bottom:1px solid var(--rule)}
.oc-docs th{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-2)}
.oc-docs th:first-child,.oc-docs td:first-child{width:1%;padding-right:0}
.oc-file{color:var(--slate);word-break:break-all}
.oc-go{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px}
.oc-go label{font-size:12.5px;color:var(--slate)}
.oc-go input{padding:7px 10px;border:1px solid var(--rule);border-radius:7px;
  font-size:13px;flex:0 1 260px}
/* the label sits above the row on its own, as the rest of Settings does */
.oc-go label{flex-basis:100%}

/* ---- Draft reply: folding the document list away -------------------- */
/* The draft is the work; the chain is reference. Hidden, the middle column
   takes the room, which on a 1440 screen is 300px more to write in. */
/* Count the tracks that are actually there, never a zero-width one: the
   children keep their order values and would otherwise slide into the wrong
   tracks, giving the draft a width of nought. */
.rp3.docs-off{grid-template-columns:1fr 330px}
.rp3.obs-off{grid-template-columns:300px 1fr}
.rp3.docs-off.obs-off{grid-template-columns:1fr}
.rp3.docs-off .rp-col-docs{display:none}
.rp3.obs-off .rp-col-obs{display:none}
/* folded away, the middle column is the last one on screen */
.rp3.obs-off .rp-col-mid{border-right:0}
/* Each of the three columns carries its own colour in its header bar, so
   they read as three things and not one long page — and the Hide button in
   each takes that colour through currentColor, which is what says which
   column it belongs to. */
.rp-col-docs > .rp-head{background:var(--sky-soft);color:var(--ink-3);
  box-shadow:inset 0 3px 0 var(--sky)}
.rp-col-mid  > .rp-head{background:#E9F5EF;color:#1C6B4B;
  box-shadow:inset 0 3px 0 var(--mint)}
.rp-col-obs  > .rp-head{background:var(--amber-soft);color:var(--amber);
  box-shadow:inset 0 3px 0 #E2912F}

/* Hide: a real button with a border, not a chevron nobody finds. */
.rp-col-hide{
  margin-left:auto;border:1px solid currentColor;border-radius:5px;
  background:rgba(255,255,255,.6);color:inherit;cursor:pointer;
  padding:1px 7px;font:inherit;font-size:9.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;opacity:.72;
}
.rp-col-hide:hover{opacity:1;background:#fff}
/* the observations header ends with "Open full page", so its Hide sits
   between the title and that link rather than at the far end */
.rp-col-obs .rp-col-hide{margin-left:auto;margin-right:10px}

/* Bringing a column back. The chip appears only while its column IS
   hidden — with both open it said nothing the Hide buttons did not, and
   two of them wrapped the draft's own title onto a second line. */
.rp-docs-toggle{display:none}
.rp3.docs-off .rp-docs-toggle.t-docs,
.rp3.obs-off .rp-docs-toggle.t-obs{display:inline-block}
.rp-docs-toggle{
  border:1px solid var(--rule);background:var(--surface);color:var(--slate);
  border-radius:6px;padding:2px 9px;font:inherit;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;cursor:pointer;
  margin-right:8px;white-space:nowrap;
}
.rp-docs-toggle.t-docs{border-color:#BBD6F4;background:var(--sky-soft);color:var(--ink-3)}
.rp-docs-toggle.t-obs{border-color:#F0D3AC;background:var(--amber-soft);color:var(--amber)}
.rp-docs-toggle:hover{filter:brightness(.96)}

/* ---- Draft reply: one rule between one section and the next ---------- */
/* Everything under the draft — the buttons, review, expert help, the
   annexures — ran together as one column of text. A rule with the section's
   name on it lets the eye find the part it wants without reading. */
.rp-rule{display:flex;align-items:center;gap:10px;margin:18px 0 12px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-2);font-weight:600}
.rp-rule::before,.rp-rule::after{content:"";height:1px;background:var(--rule);flex:1}
.rp-rule > span{flex:none}
/* .rp3.docs-off outranks .rp3 inside the narrow breakpoint, so each
   combination has to say 1fr for itself or a phone keeps two columns. */
@media (max-width:1100px){
  .rp3.docs-off,.rp3.obs-off,.rp3.docs-off.obs-off{grid-template-columns:1fr}
}
.anx em.anx-file{color:var(--seal);font-style:normal;font-weight:600}

/* Draft reply, the guided flow (28 Sep 2026): choose the notice, confirm a later one,
   an additional-submission picker, files per observation, and the amend box. */
.sel-ask select{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.sub-pick{position:relative}
.sub-pick summary{list-style:none;cursor:pointer;font-size:13px;padding:8px 10px;border:1px solid var(--rule);
  border-radius:6px;background:var(--surface)}
.sub-pick summary::-webkit-details-marker{display:none}
.sub-pick summary::after{content:"▾";float:right;color:var(--slate-2)}
.sub-pick-body{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:300px;max-height:320px;overflow:auto;
  background:var(--surface);border:1px solid var(--rule);border-radius:8px;box-shadow:0 8px 24px rgba(20,40,70,.14);
  padding:10px;display:flex;flex-direction:column;gap:6px}
.sub-pick-row{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;cursor:pointer}
.sub-pick-row small{display:block;color:var(--slate-2);font-size:11px}
.stage-ask{margin:12px 22px 0;padding:12px 14px;border-left:3px solid var(--amber);background:var(--amber-soft);
  border-radius:0 7px 7px 0;font-size:13px;line-height:1.55;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stage-ask-acts{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.stage-ask form{margin:0}
.obs-files{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.obs-file{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.obs-up{display:flex;gap:6px;align-items:center}
.obs-up input[type=file]{font-size:11.5px;flex:1;min-width:0}
.obs-up .btn{padding:4px 10px;font-size:12px}
.amend{display:flex;flex-direction:column;gap:6px}
.amend label{font-size:12px;font-weight:600;color:var(--ink)}
.amend textarea{min-height:84px}
.choose-wrap{max-width:1000px;margin:18px auto 60px;padding:0 22px}
.choose-card{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:18px 20px;margin-top:14px}
.choose-card h2{margin:0 0 4px;font-size:17px}
.choose-list{display:flex;flex-direction:column;margin-top:12px;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.choose-row{display:grid;grid-template-columns:110px 100px minmax(0,1fr) auto 120px;gap:12px;align-items:center;
  padding:11px 14px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);font-size:13px}
.choose-row:last-child{border-bottom:0}
.choose-row:hover{background:#F5F9FE}
.choose-form{font-weight:700}
.choose-date{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--slate)}
.choose-file{color:var(--slate-2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.choose-state{display:flex;gap:6px}
.choose-state .pill{font-style:normal}
.choose-go{text-align:right;font-weight:600;color:var(--ink-3,var(--ink))}
@media (max-width:700px){.choose-row{grid-template-columns:1fr 1fr}.choose-file,.choose-go{grid-column:1/-1;text-align:left}}