/* Roboto Condensed, self-hosted. Owner ruling 2026-07-21: an internal
   case-data tool should not phone Google on every load. Apache 2.0, so
   redistribution is fine.

   ONE FILE, NOT THREE. Roboto Condensed is a VARIABLE font -- Google serves a
   single woff2 spanning the whole weight axis, and the 400/500/700 URLs return
   byte-identical files (verified by sha256). Shipping one per weight would have
   been 100KB of the same bytes three times. `font-weight: 100 900` is what
   tells the browser this one file covers the range.

   Latin subset only: the full family is seven subsets including Cyrillic and
   Greek, which a Houston firm's intake board has no use for. */
@font-face{
  font-family:"Roboto Condensed";
  src:url("fonts/roboto-condensed.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Layout and structure extracted from docs/dda-intake-app-mockup.html, the
   artefact the owner approved 2026-07-19.

   THE PALETTE AND TYPOGRAPHY BELOW ARE NOT THE MOCKUP'S. Owner ruling
   2026-07-21 replaced them with the firm's own, sampled from computed styles on
   doylelawfirm.com rather than eyeballed. The mockup's emerald green, purple and
   teal were placeholder and read as a different company. Everything structural
   is still the approved artefact; only the brand layer changed. */

:root{
    /* FIRM PALETTE, sampled from doylelawfirm.com. The brand green is #9dc02e,
       a YELLOW-green -- not the emerald #1eae5a the mockup carried.

       --green keeps its name so every brand rule inherited from the mockup
       picks the firm colour up automatically.

       BRAND AND STATUS ARE SEPARATE COLOURS NOW, deliberately. The mockup used
       one green for both "this is the brand" and "this case is healthy". At
       #9dc02e that breaks the activity dot: a yellow-green sits too close to
       amber #e8a13c to tell apart at 11px, and instant red/amber/green
       legibility is the whole job of that dot. --ok is a deeper green from the
       same family: still the firm's colour world, unmistakably not amber. */
    --bg:#f4f5f6; --page:#e7eef7; --panel:#ffffff; --line:#e6e6e6; --ink:#262626; --sub:#838383;
    /* ONE green, everywhere (owner ruling). #657b1e passes 4.5:1 BOTH as text on
       white AND as a fill under white text -- the vibrant brand #9dc02e could not
       (white-on-#9dc02e was ~1.9:1, the illegible "Message client" button). --green,
       --brand, --brand-deep, --ok all resolve to this single value now. */
    --green:#657b1e;
    --brand-deep:#657b1e;
    --ok:#657b1e;
    --amber:#e8a13c; --red:#e0533d; --blue:#3f7ad9;

    /* ============================================================================
       DESIGN TOKENS -- the single source of truth. New/edited UI uses THESE, never
       an ad-hoc px size, gap, or colour. This is the standard every screen is
       brought into compliance with (replacing the element-by-element decisions).
       ============================================================================ */
    /* TYPE SCALE -- five roles, deliberate jumps. Every text size is one of these. */
    --fs-display:2rem;     /* 30px  hero name / big score  */
    --fs-title:1.375rem;    /* 22px  page / screen title            */
    --fs-section:1rem;      /* 16px  section + card header (h3)      */
    --fs-body:.875rem;      /* 14px  body text, values, primary rows */
    --fs-label:.75rem;      /* 12px  labels                          */
    --fs-micro:.625rem;     /* 10px  micro-labels, eyebrows, counts  */
    /* SPACING SCALE -- strict 4px grid. Every gap + padding is one of these. */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
    /* SEMANTIC COLOUR -- ONE meaning each, identical in nav / badges / pills /
       buttons. complete=green, pending=amber, urgent=red, new=blue, neutral=gray.
       Each a bg + a fg that passes contrast on it. */
    --sem-complete-bg:#eaf3df; --sem-complete-fg:#3b6d11;
    --sem-pending-bg:#fbeeda;  --sem-pending-fg:#854f0b;
    --sem-urgent-bg:#fcebeb;   --sem-urgent-fg:#a32d2d;
    --sem-new-bg:#e6f1fb;      --sem-new-fg:#185fa5;
    --sem-neutral-bg:#eef0f2;  --sem-neutral-fg:#5f5e5a;
    /* Soft-fill borders to pair with the --sem-*-bg fills, + a warm attention tint for
       the Primary Weakness callout (owner card-fixes-r2 item 5). */
    --sem-complete-bd:#c7e0a8; --sem-urgent-bd:#f0cabb; --sem-neutral-bd:#dbe0e4;
    --sem-pending-bd:#eecfa0;   --tint-weakness:#fff6f3;
    /* Pipeline pills re-cut to the firm's world. The mockup's purple/teal/gold
       belonged to no palette anyone chose; the site runs green + neutrals. */
    --emp:#4a4a4a; --inj:#6f8f1c; --brass:#8a7434;
    --sans:"Roboto Condensed","Trebuchet MS",Helvetica,sans-serif;
    --shadow:0 1px 2px rgba(20,24,28,.06),0 1px 3px rgba(20,24,28,.05);
    --shadow-lift:0 4px 14px rgba(20,24,28,.10);
    /* ALIASES the later features referenced before these existed. The search
       box, the move panel, the staleness chips and the drop modal were all
       written against --card / --muted / --hover / --brand, none of which was
       defined -- so `background:var(--card)` rendered TRANSPARENT, which is why
       the drop dialog bled the board through it. Defined here once rather than
       rewritten in every rule. */
    --card:#ffffff; --muted:#838383; --hover:#eef0f2; --brand:#657b1e;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* Form controls do NOT inherit font-family from body by UA default, so any
     control that forgets `font:inherit` silently renders in Arial/system (the
     queue-nav buttons did exactly that). One global reset guarantees every
     control -- present and future -- carries the app typeface. Intentional
     exceptions (monospace data, print-doc serif) use more specific selectors
     and still win. */
  input,select,textarea,button{font-family:inherit}
  html{font-size:var(--fs-section)}
  body{font-family:var(--sans);background:var(--page);color:var(--ink)}

  /* top nav */
  .top{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1.4rem;padding:0 1.4rem;height:54px;position:sticky;top:0;z-index:40;max-width:100vw}
  .logo,.who,.ncnav{flex:0 0 auto}
  /* Tighter tabs before anything has to scroll: at laptop widths this alone is
     usually enough, and scrolling is the fallback rather than the first resort. */
  @media (max-width:1500px){ .top{gap:.9rem} .top nav button{padding:0 .6rem} }
  @media (max-width:1200px){ .top nav button{padding:0 .45rem} }
  /* Phone. The header keeps everything that is an ACTION and sheds what is a
     convenience: the filter box goes (pressing "/" still opens search), "+ New
     case" keeps its plus and drops its words, and the firm mark shrinks. Sign out
     stays, because a control you cannot reach is worse than one you rarely use. */
  @media (max-width:640px){
    .top{gap:.5rem;padding:0 .6rem}
    .top .search{display:none}
    .top .ncnav{padding:.4rem .6rem}
    .top .ncnav .nc-label{display:none}
    .logo img{height:26px}
    .logo .tool{display:none}
  }
  .logo{font-weight:800;font-size:var(--fs-section);letter-spacing:-.02em}
  .logo b{color:var(--green)}
  /* THE NAV SHRINKS AND SCROLLS ITSELF; THE PAGE NEVER DOES (audit 2026-08-29, U2).
     Thirteen tabs at their natural width made the header ~1658px against a 1272px
     window, so EVERY screen carried a horizontal scrollbar and "Sign out" sat off
     the right edge. It was the most-seen defect in the app -- on 100% of pageviews.
     min-width:0 is the load-bearing part: without it a flex item refuses to shrink
     below its content, which is exactly why the overflow escaped to the body. */
  .top nav{display:flex;gap:.2rem;height:100%;flex:0 1 auto;min-width:0;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}
  .top nav::-webkit-scrollbar{height:3px}
  .top nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .top nav button{background:none;border:none;border-bottom:2.5px solid transparent;font:inherit;font-size:var(--fs-body);font-weight:500;color:var(--sub);padding:0 .9rem;cursor:pointer;flex:0 0 auto;white-space:nowrap}
  .top nav button.on{color:var(--ink);border-bottom-color:var(--green)}
  .top nav .n{background:var(--red);color:#fff;font-size:var(--fs-micro);font-weight:600;border-radius:9px;padding:.08rem .4rem;margin-left:.35rem}
  .grow{flex:1}
  /* Allowed to give ground before the nav does -- a narrower filter box is a far
     smaller loss than a nav that cannot reach its last tab. */
  .search{border:1px solid var(--line);border-radius:8px;padding:.42rem .8rem;font:inherit;font-size:var(--fs-body);flex:0 1 230px;min-width:120px;background:var(--bg)}
  .avatar{width:30px;height:30px;border-radius:50%;background:var(--emp);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-label);font-weight:700}

  /* KPI strip */
  /* Half-height stat row (owner): the board should start above the fold, so the
     four counts run as a compact single-line label:value instead of tall cards. */
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;padding:.6rem 1.4rem 0}
  /* Clickable board filters (owner): button reset + hover/active affordance. */
  .kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;
    padding:.4rem .8rem;box-shadow:var(--shadow);display:flex;align-items:baseline;gap:.45rem;
    width:100%;font:inherit;text-align:left;cursor:pointer;transition:border-color .12s,box-shadow .12s}
  .kpi{cursor:pointer;transition:transform .08s ease,box-shadow .08s ease,border-color .08s ease}
  .kpi:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
  .kpi.on{border-color:var(--green)}
  .kpi .num{font-size:var(--fs-section);font-weight:700;letter-spacing:-.03em;line-height:1.1}
  .kpi .lbl{font-size:var(--fs-label);color:var(--sub)}
  .kpi.on .lbl{color:var(--green);font-weight:600}
  .kpi.warn .num{color:var(--red)}
  .kpi .delta{font-size:var(--fs-label);color:var(--green);font-weight:600;margin-left:.2rem}

  /* pipeline */
  /* Page backdrop is a very light blue (--page) so white cards/panels lift off
     it, on EVERY view, not just the board (owner: legacy pages still showed the
     old grey). Set on `body` above. Deliberately NOT --bg: that variable fills
     search inputs and code blocks and must stay grey. */
  .pipewrap{padding:1rem 1.4rem 1.4rem}
  .pipehead{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
  .pipehead h1{font-size:var(--fs-section);font-weight:700;letter-spacing:-.01em}
  .seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
  .seg button{background:none;border:none;font:inherit;font-size:var(--fs-label);padding:.35rem .8rem;cursor:pointer;color:var(--sub)}
  .seg button.on{background:var(--ink);color:#fff}
  .fchip{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.35rem .75rem;font-size:var(--fs-label);color:var(--sub);cursor:pointer}
  .fchip.on{border-color:var(--green);color:var(--green);font-weight:600}

  /* align-items:stretch so every column fills the tallest column's height --
     with the colbody flex-filling below, the WHOLE column (cards or empty
     space) is a drop target, which is what dragging from a tall column to a
     short or empty one needs. */
  .pipe{display:grid;grid-template-columns:repeat(5,minmax(215px,1fr));gap:.8rem;align-items:stretch;overflow-x:auto}
  .col{min-width:215px;display:flex;flex-direction:column}
  .colhead{background:var(--panel);border:1px solid var(--line);border-radius:10px 10px 0 0;padding:.6rem .8rem;border-bottom:2.5px solid var(--green)}
  .colhead .t{font-size:var(--fs-label);font-weight:700}
  .colhead .s{font-size:var(--fs-label);color:var(--sub);margin-top:.1rem}
  /* #13: column health metrics under the count — avg score · oldest · est. work. */
  .colhead .chealth{font-size:var(--fs-micro);color:var(--sub);margin-top:.15rem;opacity:.9}
  .colhead .chealth span{white-space:nowrap;cursor:help}
  /* flex-fill + a floor, so there is always droppable space below the cards. */
  .colbody{padding:.55rem 0 0;flex:1 1 auto;min-height:140px}
  .deal{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.65rem .75rem;margin-bottom:.5rem;cursor:pointer;box-shadow:var(--shadow);transition:box-shadow .12s, transform .12s}
  .deal:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
  /* #47: uniform card height so the board reads as a scannable grid. Full cards
     cap at a max height; anything longer fades out (the full detail is one hover
     away in the preview). Compact rows are exempt -- they're already one line. */
  /* #8/#9/#10 added a verdict + blocker row at the top; the cap was raised from
     11rem so the claim-tag/badge row at the bottom is no longer sliced off. The
     summary is line-clamped (see .cardsum) so this bounds the whole card. */
  .deal:not(.compact){max-height:14.5rem;overflow:hidden}
  .deal:not(.compact)::after{content:"";position:absolute;left:0;right:0;bottom:0;
    height:1.1rem;background:linear-gradient(to bottom,transparent,var(--panel));
    pointer-events:none;opacity:0;transition:opacity .12s}
  .deal.is-clipped:not(.compact)::after{opacity:1}
  .deal .name{font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em}
  .deal .sub{font-size:var(--fs-label);color:var(--sub);margin:.12rem 0 .45rem}
  /* #6: the internal case ID (TMP-...) is bookkeeping, not triage signal -- dim
     it out of the scan path, bring it back on hover for when staff need it. */
  .caseid{opacity:.35;transition:opacity .12s}
  .deal:hover .caseid,.caseid:hover{opacity:1}
  /* Card redesign: three calm zones -- header (score+name), hook (1-line
     summary), footer (tag + next action). */
  .card-hd{display:flex;align-items:center;gap:.5rem}
  .card-name{flex:1;min-width:0;font-size:var(--fs-body);font-weight:700;letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Awaiting-portal-signup banner above the board (owner 2026-08-21). */
  .portal-await{margin:.2rem 0 .9rem}
  .pa-banner{display:inline-flex;align-items:center;gap:.85rem;cursor:pointer;font:inherit;
    border:1px solid var(--sem-pending-bd);border-radius:12px;padding:.55rem 1rem .55rem .85rem;
    background:linear-gradient(135deg,var(--sem-pending-bg),var(--panel) 78%);
    box-shadow:var(--shadow);transition:box-shadow .12s,transform .12s}
  .pa-banner:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
  .pa-ico{font-size:var(--fs-title);line-height:1}
  .pa-body{display:flex;align-items:baseline;gap:.4rem}
  .pa-num{font-size:var(--fs-title);font-weight:800;letter-spacing:-.03em;color:var(--sem-pending-fg)}
  .pa-lbl{font-size:var(--fs-label);color:var(--sub);font-weight:600}
  .pa-arrow{margin-left:.5rem;padding-left:.7rem;border-left:1px solid var(--sem-pending-bd);
    font-size:var(--fs-label);font-weight:700;color:var(--sem-pending-fg);opacity:.9}
  .pa-banner.pa-zero{border-color:var(--sem-complete-bd);
    background:linear-gradient(135deg,var(--sem-complete-bg),var(--panel) 78%)}
  .pa-banner.pa-zero .pa-num,.pa-banner.pa-zero .pa-arrow{color:var(--sem-complete-fg)}
  .pa-banner.pa-zero .pa-arrow{border-left-color:var(--sem-complete-bd)}

  /* ---- Pipeline per-column card (owner 2026-08-19) ---------------------------- */
  /* Universal type row: case-type pill + status flags, under the name/SOL header. */
  .card-typerow{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-top:.35rem}
  .pill.unclassified{background:var(--sem-neutral-bg);color:var(--sem-neutral-fg);
    border:1px solid var(--sem-neutral-bd);font-style:italic}
  /* No date yet -- muted, not the loud "needs term date" to-do (that's Ian's Screen). */
  .is-sol.unknown{color:var(--sub);background:var(--panel);border-color:var(--line);
    cursor:default;font-weight:700}
  .card-body{margin-top:.5rem}
  .card-circlerow{display:flex;align-items:center;gap:.4rem}
  /* Days-since-intake circle: number in the ring, colour = how long it's been waiting. */
  .day-circle{display:inline-flex;align-items:center;justify-content:center;
    width:2.1rem;height:2.1rem;border-radius:50%;font-size:var(--fs-label);font-weight:800;
    border:2px solid var(--sem-neutral-bd);color:var(--sem-neutral-fg);background:var(--panel)}
  .day-circle.dc-orange{border-color:var(--sem-pending-bd);color:var(--sem-pending-fg);
    background:var(--sem-pending-bg)}
  .day-circle.dc-red{border-color:var(--sem-urgent-bd);color:var(--sem-urgent-fg);
    background:var(--sem-urgent-bg)}
  /* Client's self-reported document inventory (Typeform Docs). */
  .card-inv{list-style:none;margin:.45rem 0 0;padding:0;display:flex;flex-direction:column;gap:.15rem}
  .card-inv li{font-size:var(--fs-micro);color:var(--ink);padding-left:.85rem;position:relative;
    line-height:1.3}
  .card-inv li::before{content:"📄";position:absolute;left:0;font-size:var(--fs-micro)}
  /* Completeness bar (More Info Needed). */
  .card-comp{display:flex;align-items:center;gap:.4rem;margin-top:.45rem}
  .card-comp-bar{flex:1;height:.5rem;border-radius:4px;background:var(--sem-neutral-bg);overflow:hidden}
  .card-comp-fill{display:block;height:100%;border-radius:4px;background:var(--sem-neutral-fg)}
  .card-comp-fill.lo{background:var(--sem-urgent-fg)}
  .card-comp-fill.md{background:var(--sem-pending-fg)}
  .card-comp-fill.hi{background:var(--sem-complete-fg)}
  .card-comp-pct{font-size:var(--fs-micro);font-weight:800;color:var(--sub);flex:0 0 auto}
  /* Ian's determination (Pre-Screen / Call / Post-Call). */
  .card-det{font-size:var(--fs-label);font-weight:700;margin-top:.1rem;display:flex;
    align-items:center;gap:.3rem}
  .card-det.det-good{color:var(--sem-complete-fg)}
  .card-det.det-bad{color:var(--sem-urgent-fg)}
  .card-det.det-part{color:var(--sem-pending-fg)}
  .card-det.none{color:var(--sub);font-weight:600;font-style:italic}
  /* Editable two-sentence summary. */
  .card-sum{font-size:var(--fs-label);line-height:1.35;color:var(--ink);margin-top:.35rem;
    cursor:text;border-radius:6px;padding:.1rem .2rem;margin-left:-.2rem}
  .card-sum:hover{background:var(--bg)}
  .card-sum-tag{color:var(--green);font-weight:800;margin-right:.2rem}
  .card-sum-empty{color:var(--sub);font-style:italic}
  /* Scheduled call time + retention phase indicator. */
  .card-callat{font-size:var(--fs-micro);font-weight:700;color:var(--sub);margin-top:.35rem}
  .card-retain{font-size:var(--fs-micro);font-weight:800;margin-top:.3rem;
    color:var(--sem-complete-fg)}
  /* "Next:" marks the text as a recommended step, not a button (owner). */
  .card-next-k{font-weight:800;text-transform:uppercase;letter-spacing:.02em;opacity:.7}
  .cmeet{max-width:100%}
  /* Minimal safety flag: a barred / no-claim case must never look normal. */
  .cflag{font-size:var(--fs-micro);font-weight:800;letter-spacing:.02em;border-radius:6px;
    padding:.05rem .35rem;background:#fbe3de;color:var(--red);white-space:nowrap}
  /* 🔥 high-value-lead-about-to-be-lost: orange left trim + a warm-tinted card. */
  .cflag.fire{background:transparent;padding:0;font-size:var(--fs-body);letter-spacing:-.1em}
  /* 🚨 Fast Qualified: the urgency red made prominent (solid), no new hue. */
  .cflag.fastqual{background:var(--red);color:#fff}
  .deal.fire{border-left:4px solid #e8820c;background:linear-gradient(90deg,#fff7ec,var(--panel) 40%)}
  /* ⏰ a manual nudge is due (More Info Needed / The Call) -- amber, an attention cue. */
  .cflag.nudge{background:#fdf0dc;color:#8a5a12}
  /* The nudge badge is a live send button on the card: clickable, no page hop. */
  .cflag.nudge-btn{border:1px solid #eac98f;cursor:pointer;font-family:inherit;line-height:1.2}
  .cflag.nudge-btn:hover:not(:disabled){background:#f7e2bd}
  .cflag.nudge-btn:disabled{cursor:default;opacity:.85}/* Failed Gate / Portal Pending name-only rows: minimal footprint, no case detail. */.deal.portalrow{padding:.35rem .65rem;margin-bottom:.28rem;
    display:flex;align-items:center;gap:.4rem}.deal.portalrow .fg-name{font-size:var(--fs-body);font-weight:600;
    color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
  /* New-case button pinned in the top bar. */
  .ncnav{font-size:var(--fs-label);padding:.32rem .7rem;white-space:nowrap}
  .row{display:flex;align-items:center;justify-content:space-between}
  .pill{font-size:var(--fs-micro);font-weight:600;padding:.14rem .5rem;border-radius:20px}
  .pill.emp{background:#ececec;color:var(--sub)}
  .pill.inj{background:#ececec;color:var(--sub)}
  .pill.portal{background:#faf2df;color:var(--brass)}
  .pill.flag{background:#fbe9e6;color:var(--red)}
  /* Practice-area tag: the LEAD CAUSE OF ACTION, accent-coloured (owner ruling).
     Maritime is blue (owner-set); the rest proposed. Light fill + strong text so
     several read distinctly at card scale. */
  /* Grayscale + icon (owner ruling): the family is carried by the icon, not a
     decorative colour. Colour is reserved for the health/urgency system. */
  .ptag{font-size:var(--fs-micro);font-weight:700;padding:.14rem .5rem;border-radius:20px;
    white-space:nowrap;background:var(--hover);color:var(--ink)}
  /* Card age as a velocity signal: quiet when fresh, urgent when it has sat. */
  .agepill{font-size:var(--fs-micro);font-weight:700;padding:.05rem .35rem;border-radius:10px;
    margin-left:.4rem;vertical-align:middle}
  /* Semantic: fresh/warm are fine (neutral); aging needs action (yellow); old is
     urgent (red). Colour only where it signals. */
  .agepill.fresh{background:var(--hover);color:var(--sub)}
  .agepill.warm{background:var(--hover);color:var(--sub)}
  .agepill.aging{background:#fdf3e0;color:#a06d14}
  .agepill.old{background:#fbe3de;color:var(--red)}
  /* Contact bar: the value plus call / text / email / copy actions. */
  .cbar{display:inline-flex;align-items:center;gap:.15rem}
  .cico{display:inline-flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;
    border:none;background:transparent;cursor:pointer;border-radius:5px;font-size:var(--fs-body);
    text-decoration:none;line-height:1;color:inherit}
  .cico:hover{background:var(--hover)}
  /* the activity dot — Pipedrive's signal */
  .act{width:11px;height:11px;border-radius:50%;flex:none}
  .act.ok{background:var(--green)} .act.due{background:var(--amber)} .act.over{background:var(--red)} .act.none{background:#cfd4d8}

  /* detail */
  .view{display:none}.view.show{display:block}
  .dhead{background:#fff;border-bottom:1px solid var(--line);padding:1rem 1.4rem 0}
  /* #10 tighter, standardized header rhythm: breadcrumb close to the name row,
     a shorter stage tracker, and a single ~.55rem margin between bands. */
  .crumb{font-size:var(--fs-label);color:var(--sub);margin-bottom:.3rem;cursor:pointer}
  .crumb:hover{color:var(--ink)}
  /* #10 breadcrumb merged ONTO the name row: inline, centered, with a divider
     before the case name instead of consuming its own full band. */
  .dtop .crumb{margin:0;align-self:center;padding-right:.85rem;border-right:1px solid var(--line);white-space:nowrap}
  .dtop{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
  .dtop h1{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em}
  .caseno{font-size:var(--fs-label);color:var(--sub);font-variant-numeric:tabular-nums}
  .dmeta{display:flex;gap:1.8rem;flex-wrap:wrap;font-size:var(--fs-label);color:var(--sub);padding-bottom:.6rem}
  .dmeta b{color:var(--ink);font-weight:600}
  /* At-a-glance client status chips: portal / meeting / screen. */
  /* Pipeline health strip: is every intake pipe flowing? */
  .healthbar{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;
    padding:.5rem .7rem;margin:0 0 1rem;background:var(--panel);border:1px solid var(--line);
    border-radius:10px;font-size:var(--fs-label)}
  .healthbar .hlabel{font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--sub);font-size:var(--fs-micro);margin-right:.2rem}
  .hnode{display:inline-flex;align-items:center;gap:.35rem;color:var(--ink);
    padding:.1rem .35rem;border-radius:6px}
  .hnode .hdot{width:.55rem;height:.55rem;border-radius:50%;background:#cfd4d8}
  .h-green .hdot{background:var(--ok)}
  .h-amber .hdot{background:var(--amber)}
  .h-red .hdot{background:var(--red)}
  .h-idle{color:var(--sub)}
  .h-idle .hdot{background:#cfd4d8}
  .hnode.hlost{color:var(--red);font-weight:700}
  /* Card-icon legend: collapsed by default, quiet, there when needed. */
  /* In the control strip: the summary is a plain link at the right end; the panel
     opens as an absolute popover so it never pushes the columns down. */
  .cardlegend{position:relative;margin:0;font-size:var(--fs-label)}
  .cardlegend summary{cursor:pointer;color:var(--sub);font-weight:600;list-style:none;
    display:inline-flex;align-items:center;gap:.35rem;padding:.2rem 0;white-space:nowrap}
  .cardlegend summary::-webkit-details-marker{display:none}
  .cardlegend summary::before{content:"ⓘ";color:var(--brand-deep)}
  .legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:.4rem .9rem;padding:.6rem .8rem;margin-top:.3rem;background:var(--panel);
    border:1px solid var(--line);border-radius:10px;color:var(--ink)}
  .cardlegend[open] .legend-grid{position:absolute;right:0;top:calc(100% + .3rem);
    z-index:30;width:min(600px,88vw);box-shadow:0 10px 30px rgba(0,0,0,.14)}
  .legend-grid span{display:flex;align-items:center;gap:.4rem}
  .legend-grid .star{color:#e0a500}
  .legend-grid .lg-up{color:var(--ok)} .legend-grid .lg-cap{color:var(--sub)}
  .legend-grid .lg-g{color:var(--ok)} .legend-grid .lg-a{color:var(--amber)} .legend-grid .lg-x{color:var(--red)}
  .legend-grid .lg-b{color:var(--sem-new-fg)}
  .legend-grid .lgsol{position:static;display:inline-block}
  /* Manual claim-type picker. */
  .claimpickwrap{display:flex;align-items:center;gap:.4rem;margin:0 0 .8rem}
  .claimpickwrap:empty{display:none}
  /* One tight identity row: contact info (phone/email/consent) | metadata
     (origin/claim type) | client-status pills, all on a single wrapping line. */
  .dident{display:flex;align-items:center;gap:.35rem 1rem;flex-wrap:wrap;margin:var(--sp-3) 0 .7rem}
  .dident .dmeta{padding-bottom:0;margin:0}
  .dident .claimpickwrap{margin:0}
  .cp-label{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--sub)}
  #cp-select{font:inherit;font-size:var(--fs-label);padding:.2rem .4rem;border:1px solid var(--line);border-radius:6px;background:#fff}
  .cp-manual{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;color:var(--brand-deep);background:#f0faf4;border:1px solid var(--brand);border-radius:4px;padding:.05rem .3rem}
  .cstat{font-size:var(--fs-label);color:var(--ink);background:var(--panel);border:1px solid var(--line);
    border-radius:14px;padding:.2rem .65rem}
  .cstat b{font-weight:700;color:var(--sub);margin-right:.3rem;text-transform:uppercase;font-size:var(--fs-micro);letter-spacing:.03em}
  .cstat-active{background:var(--panel);border-color:var(--line);color:var(--sub)}
  .cstat-booked{background:#e7f4ea;border-color:#bfe0c9;color:var(--ok)}
  .cstat-invited{background:#fdf3e0;border-color:#f0dcb4;color:#a06d14}
  .cstat-none{background:var(--panel);color:var(--sub)}
  /* #2 a booked meeting: a real calendar tile + the day/time, not just a word. */
  .cmeet-block{display:inline-flex;align-items:center;gap:.5rem;background:#e7f4ea;
    border:1px solid #bfe0c9;border-radius:8px;padding:.2rem .5rem;vertical-align:middle}
  .cmeet-cal{display:flex;flex-direction:column;align-items:center;width:2.05rem;
    border-radius:5px;overflow:hidden;background:#fff;border:1px solid #bfe0c9;line-height:1}
  .cmeet-cal-m{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;color:#fff;
    background:var(--green);width:100%;text-align:center;padding:.09rem 0}
  .cmeet-cal-d{font-size:var(--fs-section);font-weight:800;color:var(--green);padding:.05rem 0 .1rem}
  .cmeet-when{display:flex;flex-direction:column;line-height:1.25}
  .cmeet-when b{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.03em;color:var(--sub);margin:0}
  .cmeet-when span{font-size:var(--fs-body);font-weight:700;color:var(--ink)}
  /* Lead narrative panel: what the case is about, up front. */
  .dsummary{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand);
    border-radius:8px;padding:.7rem .9rem;margin:0 0 1rem}
  .dsum-label{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--sub);margin-bottom:.35rem}
  .dsum-body{font-size:var(--fs-body);color:var(--ink);line-height:1.5;white-space:pre-wrap}
  .dsum-body.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .dsum-more{margin-top:.4rem;padding:.15rem 0;font-size:var(--fs-label)}
/* One-click evidence request in the docs tab. */
.docreq{border:1px solid var(--line);border-radius:8px;padding:.7rem .85rem;margin-bottom:.9rem;background:#fbfbfa}
.docreq-row{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--fs-body);color:var(--ink);padding:.2rem 0;cursor:pointer}
.docreq-row input{margin-top:.2rem}
.docreq-tp{font-size:var(--fs-micro);font-weight:700;color:var(--sub);background:var(--hover);padding:.05rem .3rem;border-radius:4px;text-transform:uppercase}
.docreq #docreq-send{margin-top:.6rem}
.docreq-msg{margin-top:.5rem;font-size:var(--fs-label);color:var(--brand-deep);font-weight:600}
/* "Before the call" -- a clean read-off checklist (owner): grouped questions, no
   checkboxes / weight badges / why-expanders / counters. Readability over density. */
.scriptcard .cqgroup{margin-bottom:var(--sp-5)}
.scriptcard .cqgroup-h{font-size:var(--fs-label);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--sem-neutral-fg);margin-bottom:var(--sp-2)}
.scriptcard .cqlist{margin:0;padding-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.scriptcard .cqlist .cq{font-size:var(--fs-body);line-height:1.5;color:var(--ink)}
.scriptcard .cqlist .cq::marker{color:var(--sub);font-weight:700}
/* (legacy interactive-script styles below, kept for any other caller) */
.scriptcard .sgroup{border:1px solid var(--line);border-radius:8px;margin-bottom:.5rem;overflow:hidden}
.scriptcard summary{cursor:pointer;font-weight:700;font-size:var(--fs-body);padding:.5rem .7rem;background:var(--panel);list-style:none;display:flex;align-items:center;gap:.5rem}
.scriptcard summary::-webkit-details-marker{display:none}
.scriptcard summary::before{content:"▸";color:var(--sub);font-size:var(--fs-label);transition:transform .1s}
.scriptcard details[open] summary::before{transform:rotate(90deg)}
.sqchk{margin-top:.18rem;flex:none}
/* #27: a completed section reads green. */
.scriptcard details.groupdone summary{color:var(--ok)}
.dz1-clocktime{display:inline-flex;gap:.7rem;font-size:var(--fs-label);color:var(--sub);white-space:nowrap}
.dz1-clocktime b{color:var(--ink);font-weight:800}
.dz1-act{font-size:var(--fs-body);font-weight:700;color:var(--ink);background:#fff;border:1.5px solid var(--ink);
  border-radius:8px;padding:var(--sp-2) var(--sp-4);cursor:pointer;font-family:inherit}
.dz1-act:hover{background:var(--ink);color:#fff}
.dz1-act-decline{color:var(--sub);border-color:var(--line);font-weight:600}
.dz1-act-decline:hover{background:var(--red);border-color:var(--red);color:#fff}
/* Completeness meter -- neutral fill, not decorative color. */
.dz1-meter{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto}
.dz1-meter-bar{width:120px;height:7px;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.dz1-meter-bar i{display:block;height:100%;background:var(--ink)}
.dz1-meter-n{font-size:var(--fs-label);font-weight:700;color:var(--ink);white-space:nowrap}
/* Manual-nudge strip (More Information Needed / The Call). */
.dz1-nudge{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-1) 0;
  padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.dz1-nudge-due{border-color:var(--amber);background:#fdf0dc}
.dz1-nudge-txt{font-size:var(--fs-label);font-weight:600;color:var(--ink)}
.dz1-nudge-btn{margin-left:auto;font-weight:700;background:var(--amber);border-color:var(--amber);color:#3a2a08}
.dz1-nudge-btn:hover{filter:brightness(.96)}
.dz1-nudge .btn.ghost[disabled]{margin-left:auto}
/* Move/Decline live in the Zone 1 action bar now -> hide the header duplicates. */
.dtop #d-move,.dtop #d-decline{display:none}
/* Dated-clock badge: its own distinct row, FATAL-tier treatment always (a
   limitations clock is a hard deadline), intensified within 30 days. Mirrors the
   fatal red-flag pill -- red severity chip + red text. */
.dz1-clock{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  border:1px solid var(--red);background:#fdecea;border-radius:7px;padding:.3rem .55rem}
.dz1-clock.urg{background:#fbd9d4;box-shadow:0 0 0 2px rgba(224,83,61,.18)}
.dz1-clock-sev{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:#fff;background:var(--red);border-radius:4px;padding:.1rem .4rem;line-height:1.3}
.dz1-clock-tx{display:flex;flex-direction:column;line-height:1.2}
.dz1-clock-tx b{font-size:var(--fs-body);font-weight:800;color:var(--red)}
.dz1-clock-tx span{font-size:var(--fs-label);font-weight:600;color:var(--red)}
@keyframes dz1pulse{0%,100%{opacity:1}50%{opacity:.35}}
.cstat-new{font-size:var(--fs-micro);font-weight:800;letter-spacing:.04em;color:#fff;background:var(--green);
  border-radius:4px;padding:.05rem .3rem;margin-left:.4rem;vertical-align:middle}
.cmeet-new{box-shadow:0 0 0 2px rgba(31,122,77,.4)}
/* Deadline "Acknowledge review" control (records a timeline note; SOL stays live). */
.dl-ack{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap}
.dl-ack-msg{font-size:var(--fs-label);color:var(--ok);font-weight:600}
.dl-ack-msg[hidden]{display:none}
@media (max-width:640px){.dgrid{grid-template-columns:1fr}}
.dv-edit{font:inherit;font-size:var(--fs-body);text-align:right;border:1px solid var(--brand);
  border-radius:5px;padding:.1rem .3rem;width:9rem;max-width:100%}
.dv-edit:focus{outline:none;box-shadow:0 0 0 1px var(--brand)}
.addfact{display:flex;gap:.4rem;margin-top:.7rem;flex-wrap:wrap}
/* display:flex outranks the bare [hidden] attribute, so the Add-fact input row
   showed even while hidden -- collapse it explicitly (the recurring trap). */
.addfact[hidden]{display:none}
.addfact input{font:inherit;font-size:var(--fs-body);padding:.3rem .5rem;border:1px solid var(--line);border-radius:6px}
.addfact #af-name{flex:1;min-width:8rem}
.addfact #af-value{flex:1;min-width:6rem}

/* The claimant's account + long narrative facts: a left-border accent block of
   standard readable prose, not a heavy card that compresses a long story into a
   cramped form field. */
.dstory{border-left:3px solid var(--brand);padding:.05rem 0 .1rem .9rem;margin:0 0 .9rem}

/* Contact-preference chips in the top contact bar. */
.cpref{font-size:var(--fs-label);font-weight:700;border-radius:9px;padding:.08rem .5rem;
  background:var(--hover);color:var(--sub);border:1px solid var(--line)}
.cpref.on{background:#eef7ef;color:var(--green);border-color:#cfe6d1}
.cpref.off{background:#fdecea;color:#8c2f1d;border-color:#f0c4bb}
/* Scoring reasoning as bullets. */
.reasonbl{margin:.2rem 0 0;padding-left:1.1rem;font-size:var(--fs-body);line-height:1.5;color:#3d4247}
.reasonbl li{margin-bottom:.3rem}

/* Reports tab: attribution tables. */
.rtable{width:100%;border-collapse:collapse;margin:.6rem 0;font-size:var(--fs-label)}
.rtable th{text-align:left;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.03em;
  color:var(--sub);font-weight:800;border-bottom:2px solid var(--line);padding:.35rem .5rem}
.rtable td{padding:.35rem .5rem;border-bottom:1px solid var(--line);color:var(--ink)}
.rtable td.num,.rtable th.num{text-align:right;font-variant-numeric:tabular-nums}
.rtable tbody tr:hover{background:var(--hover)}
/* Case timing (owner 2026-09-03): sortable column headers, scrollable body
 * (up to 500 rows) without losing the sticky header. */
.mkt-timing-wrap{max-height:520px;overflow-y:auto;border:1px solid var(--line);
  border-radius:8px}
.mkt-timing-wrap .rtable{margin:0}
.mkt-timing-table thead th{position:sticky;top:0;background:var(--panel,var(--bg));z-index:1}
.mkt-timing-table thead th[data-sort]{cursor:pointer;user-select:none}
.mkt-timing-table thead th[data-sort]:hover{color:var(--ink)}
.mkt-timing-table thead th[data-sort].sort-asc::after{content:" \25B2";font-size:.85em}
.mkt-timing-table thead th[data-sort].sort-desc::after{content:" \25BC";font-size:.85em}
.rsub{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--sub);margin:1rem 0 .1rem}
/* ▲ could-rise interactive checklist. */
/* #7 tighter checklist density, matching the triage drawer's what-would-raise list. */
.ceilchecklist{margin:.3rem 0 .15rem;display:flex;flex-direction:column;gap:.14rem}
.ceilitem{display:flex;align-items:flex-start;gap:.4rem;font-size:var(--fs-label);line-height:1.28;
  color:var(--ink);cursor:pointer}
.ceilitem input{margin-top:.12rem}
.ceilitem input:checked + span{text-decoration:line-through;color:var(--sub)}
/* Docs: drag-and-drop zone + evidence progress. */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  border:1.5px dashed var(--line);border-radius:8px;padding:1rem;cursor:pointer;text-align:center;
  color:var(--sub);font-size:var(--fs-body);transition:border-color .1s, background .1s}
.dropzone:hover{border-color:var(--brand)}
.dropzone.dz-over{border-color:var(--brand);background:#f0faf4;color:var(--brand-deep)}
.dropzone .dz-text b{color:var(--brand-deep)}
.dropzone .dz-file{font-size:var(--fs-label);font-weight:600;color:var(--ink)}
.evprog{margin-top:.6rem}
.evprog-bar{height:.4rem;background:var(--hover);border-radius:4px;overflow:hidden}
.evprog-bar i{display:block;height:100%;background:var(--ok);border-radius:4px;transition:width .2s}
.evprog-txt{font-size:var(--fs-micro);color:var(--sub);margin-top:.2rem}
.tldate.needdate{background:#fbe3de;color:#b23524;font-weight:800;font-size:var(--fs-micro);
  padding:.05rem .35rem;border-radius:4px;letter-spacing:.03em}
/* Board density toggle + compact scan rows. */
.boardtools{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;margin:0 0 .6rem}
/* On the filter row: push the controls to the right so the chips stay left-aligned
   (owner) -- no separate band, no dead zone. Wrap tidily on narrow screens. */
.pipehead .boardtools{margin:0 0 0 auto;flex-wrap:wrap}
.pipehead{flex-wrap:wrap;row-gap:.5rem}
.densitytoggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.densitytoggle button{background:#fff;border:none;font:inherit;font-size:var(--fs-label);font-weight:600;color:var(--sub);padding:.3rem .7rem;cursor:pointer}
.densitytoggle button.on{background:var(--brand);color:#fff}
.deal.compact{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .6rem}
/* THE NAME NEVER LOSES THE SPACE FIGHT (audit 2026-08-25: compact rows showed
   tags and no name). Name keeps a guaranteed minimum and ellipsizes; the meta
   tags shrink and clip first -- ordered urgent-first so SOL / NO CLAIM / missing
   survive clipping and the decorative tags go under. */
.deal.compact .crow-name{font-weight:600;font-size:var(--fs-body);color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:.3rem;flex:1 1 auto;min-width:0}
.deal.compact .crow-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:6.5em}
.deal.compact .crow-meta{display:flex;align-items:center;gap:.4rem;flex:0 1 auto;min-width:0;overflow:hidden;justify-content:flex-start}
.deal.compact .star{position:static;top:auto;right:auto;color:#e0a500}
.crow-sol{font-size:var(--fs-micro);font-weight:800;color:#fff;background:var(--red);border-radius:4px;padding:.05rem .3rem}
.crow-miss{font-size:var(--fs-micro);font-weight:800;color:#a06d14;background:#fdf3e0;border:1px solid #f0dcb4;border-radius:4px;padding:.05rem .3rem;white-space:nowrap}
/* Hover preview popup: a glance without leaving the board. Non-interactive. */
.cardpreview{position:fixed;z-index:60;width:320px;max-height:60vh;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lift);
  padding:.7rem .8rem;pointer-events:none;font-size:var(--fs-label);color:var(--ink)}
.cardpreview .pv-head{font-size:var(--fs-body);margin-bottom:.4rem;color:var(--ink);display:flex;align-items:center;gap:.4rem}
.cardpreview .pv-sum{font-size:var(--fs-label);color:#3d4247;line-height:1.4;margin-bottom:.4rem}
.cardpreview .pv-miss{font-size:var(--fs-label);color:#a06d14;background:#fdf3e0;border-radius:5px;padding:.25rem .4rem;margin-bottom:.4rem;line-height:1.35}
.cardpreview .pv-empty{color:var(--sub);font-style:italic}
/* Floating attorney-notes panel: always visible on the detail page. */
/* ============ THREE-PANEL WORKSPACE (Figma-style case screen) ============
   LEFT module picker | CENTER canvas (stacked modules) | RIGHT persistent action
   panel. One card language throughout; color reserved for the SOL/FATAL signals. */
/* INFORMATION region: the workspace fills the full available width up to the edge
   of the fixed-width Action Panel -- no artificial gutter, no centered max-width cap
   that would leave the panel floating away from the right edge. */
.workspace{display:grid;grid-template-columns:190px minmax(0,1fr) 300px;gap:1rem;
  padding:1.1rem 1.4rem;max-width:none;align-items:start}
/* LEFT: module picker (multi-select). */
.ws-nav{position:sticky;top:.7rem;display:flex;flex-direction:column;gap:var(--sp-1);
  border:1px solid var(--line);border-radius:12px;padding:var(--sp-2);background:#fff;
  box-shadow:0 1px 2px rgba(20,24,28,.05)}
.ws-nav button{display:flex;align-items:center;gap:var(--sp-2);width:100%;text-align:left;
  border:none;background:none;font:inherit;font-size:var(--fs-body);font-weight:600;color:var(--sub);
  padding:var(--sp-2) var(--sp-3);border-radius:9px;cursor:pointer;transition:background .12s,color .12s}
.ws-nav button:hover{background:var(--hover);color:var(--ink)}
/* Active module -- unmistakable: a solid green pill with a soft glow, tying the
   nav into the branded/primary language of the rest of the screen. */
.ws-nav button.on{background:var(--green);color:#fff;font-weight:800}
.ws-nav .wsn-lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-nav .tabn{font-size:var(--fs-micro);font-weight:700;background:var(--panel);color:var(--sub);
  border-radius:10px;padding:1px var(--sp-1);flex:none}
.ws-nav button.on .tabn{background:rgba(255,255,255,.24);color:#fff}
/* Composable nav GROUPS: a header that expands/collapses its sub-items (Figma-like).
   Sub-items are ordinary .ws-nav buttons (so they get the active-green pill), just
   indented and a touch smaller. */
/* SAVED VIEWS row: pin/switch which modules are open. Compact, at the top of the nav.
   The pinned (non-Default) state greens the picker + lights the pin. */
.ws-views{display:flex;align-items:center;gap:var(--sp-1);padding:0 var(--sp-1) var(--sp-2);
  margin-bottom:var(--sp-1);border-bottom:1px solid var(--line)}
.ws-views-pin{font-size:var(--fs-label);opacity:.3;flex:none}
.ws-views.pinned .ws-views-pin{opacity:1}
.ws-view-pick{flex:1;min-width:0;font:inherit;font-size:var(--fs-label);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:var(--sp-1) var(--sp-2);background:#fff;cursor:pointer}
.ws-views.pinned .ws-view-pick{border-color:var(--green);color:var(--green);font-weight:700}
.ws-view-save{flex:none;font:inherit;font-size:var(--fs-micro);font-weight:700;color:var(--sub);
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:var(--sp-1) var(--sp-2);
  cursor:pointer;white-space:nowrap}
.ws-view-save:hover{border-color:var(--ink);color:var(--ink)}

/* A grouped set reads as deliberate (owner): a subtle divider + gap sets the group's
   sub-items apart from the flat list below, so the tight stack looks intentional. */
.ws-nav .ws-group{display:flex;flex-direction:column;padding-bottom:var(--sp-2);
  margin-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.ws-nav .ws-grouphd{display:flex;align-items:center;justify-content:space-between;width:100%;
  text-align:left;border:none;background:none;font:inherit;font-size:var(--fs-body);font-weight:800;
  color:var(--ink);padding:var(--sp-2) var(--sp-3);border-radius:9px;cursor:pointer}
.ws-nav .ws-grouphd:hover{background:var(--hover)}
.ws-nav .ws-chev{font-size:var(--fs-micro);color:var(--sub);transition:transform .12s;flex:none}
.ws-nav .ws-group.collapsed .ws-chev{transform:rotate(-90deg)}
.ws-nav .ws-sub{display:flex;flex-direction:column;gap:var(--sp-1);padding-left:var(--sp-2)}
.ws-nav .ws-group.collapsed .ws-sub{display:none}
.ws-nav .ws-sub button{font-size:var(--fs-label)}
/* CENTER: canvas. Selected panes stack vertically. ONE spacing scale (owner):
   var(--sp-6) = 32px BETWEEN major sections (the panes), 16px WITHIN. Each pane
   owns its internal 16px; the between-pane rhythm lives here alone, so no pane
   adds its own top margin (that doubling was the uneven 40px / 25px gaps). */
.ws-canvas{display:flex;flex-direction:column;gap:var(--sp-6);min-width:0}
.ws-canvas .pane{display:none}
.ws-canvas .pane.show{display:block}
/* RIGHT: persistent ACTION panel -- the panel commands MORE weight than the
   workspace (this is where the decision happens), earned by NON-COLOR means:
   its own raised slab surface (distinct from the white workspace cards) + a
   lift-shadow + heavier/larger buttons. Colour stays reserved for urgency. */
/* Toned back from the heavy pass: a light distinct slab + soft lift, not a dark
   wall. The panel earns prominence from being its own surface, not from black. */
/* The action rail is the point of the page, so it STAYS with you as the canvas
   scrolls (owner: the buttons must not scroll away, and the space below shouldn't
   read as unfinished). Sticky + self-align to the row top; capped to the viewport
   with its own scroll so a tall rail on a short screen never detaches. */
.ws-actions{position:sticky;top:.7rem;align-self:start;
  max-height:calc(100vh - 1.4rem);overflow:auto;
  background:#edeff2;border:1px solid #dcdfe4;
  border-radius:14px;padding:var(--sp-4);box-shadow:0 4px 16px rgba(20,24,28,.10)}
.ap-inner{display:flex;flex-direction:column;gap:var(--sp-3)}
.ws-actions .ap-sect{border:none;border-radius:0;padding:0;background:none}
.ap-do{display:flex;flex-direction:column;gap:var(--sp-2)}
.ap-eyebrow{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;color:var(--sub);
  text-transform:uppercase;margin:0 0 var(--sp-1)}
.ap-actions{display:flex;flex-direction:column;gap:var(--sp-2)}
/* Engagement actions -- clean secondary outlines (Send a Message / Request
   Documents / Schedule Meeting). No heavy fill. */
.ap-actions .dz1-act,.ap-dispo .dz1-act{width:100%;min-width:0;display:flex;
  align-items:center;justify-content:center;font-size:var(--fs-body);font-weight:600;
  border:1px solid var(--line);border-radius:9px;padding:var(--sp-2);background:#fff;color:var(--ink);
  white-space:normal;overflow-wrap:break-word;text-align:center;line-height:1.15}
.ap-actions .dz1-act:hover,.ap-dispo .dz1-act:hover{border-color:var(--ink);background:var(--hover)}
/* Context-aware engagement actions: label on top, a tiny state line under it. */
.ap-actions .dz1-act{flex-direction:column;gap:1px}
.ap-act-lb{font-weight:600}
.ap-act-st{font-size:var(--fs-micro);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--sub)}
/* Already-completed action: dimmed + dashed so it reads as "done, but re-doable",
   not a fresh call-to-action. Full opacity on hover for the re-do (Resend/Reschedule). */
.ap-actions .dz1-act.is-done{opacity:.62;border-style:dashed}
.ap-actions .dz1-act.is-done:hover{opacity:1}
.ap-actions .dz1-act.is-done .ap-act-st{color:var(--sem-complete-fg)}
/* DISPOSITION -- the two final-decision actions, grouped + set apart by a divider. */
.ap-dispo{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px solid #d7dade}
.ap-dispo-k{font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;color:var(--sub);
  text-transform:uppercase;margin-bottom:var(--sp-1)}
/* Move Case -- the disposition primary: solid green (white text passes). */
.ap-dispo .dz1-act-move{background:var(--green);color:#fff;border:1.5px solid var(--green);font-weight:700}
.ap-dispo .dz1-act-move:hover{background:#54681a;border-color:#54681a}
/* Review Complete -- Ian's conclude action (Typeform-Docs item 7): an emphasis outline,
   distinct from Move's solid green, since it opens the four-option popup rather than acting. */
.ap-dispo .dz1-act-review{background:#fff;color:var(--emp);border:1.5px solid var(--emp);font-weight:800}
.ap-dispo .dz1-act-review:hover{background:var(--emp);border-color:var(--emp);color:#fff}
/* Decline -- a red-outline danger, never a primary. */
.ap-dispo .dz1-act-decline{background:#fff;color:var(--red);border:1px solid var(--red);font-weight:600}
/* Refer out is quieter than Decline on purpose: the red button ends someone's
   case, this one sends a write-up and changes nothing. */
.ap-dispo .dz1-act-refer{background:#fff;color:var(--sub);border:1px solid var(--line);font-weight:600}
.ap-dispo .dz1-act-refer:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.ap-dispo .dz1-act-decline:hover{background:var(--red);border-color:var(--red);color:#fff}
/* SEMANTIC STATUS -- one rule, used identically by pills, badges, nav counts.
   bg + fg tint, no border. This is the single colour-semantic standard. */
.sem-complete{background:var(--sem-complete-bg);color:var(--sem-complete-fg)}
.sem-pending{background:var(--sem-pending-bg);color:var(--sem-pending-fg)}
.sem-urgent{background:var(--sem-urgent-bg);color:var(--sem-urgent-fg)}
.sem-new{background:var(--sem-new-bg);color:var(--sem-new-fg)}
.sem-neutral{background:var(--sem-neutral-bg);color:var(--sem-neutral-fg)}
/* Workflow pills -- icon + two stacked lines, on the spacing/type tokens. */
/* Workflow header row: title + the pin toggle. */
.wf-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.wf-head h3{margin:0}
.wf-pin{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-label);
  font-weight:600;color:var(--sub);background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:var(--sp-1) var(--sp-2);cursor:pointer;font-family:inherit}
.wf-pin:hover{border-color:var(--ink);color:var(--ink)}
.wf-pin.on{background:var(--sem-complete-bg);color:var(--sem-complete-fg);border-color:transparent}
.wf-pin svg{width:14px;height:14px;flex:none}
/* Pinned: lift the Workflow module to the top of the canvas (flex order) and keep it
   in view while the rest of the canvas scrolls. */
.ws-canvas .pane#pane-workflow.pinned{order:-1;position:sticky;top:.6rem;z-index:5}
.ws-canvas .pane#pane-workflow.pinned .wf-card{box-shadow:0 6px 18px rgba(20,24,28,.13)}
.wf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-2);margin-top:var(--sp-1)}
.wf-pill{display:flex;align-items:center;gap:var(--sp-2);border-radius:10px;
  padding:var(--sp-2) var(--sp-3)}
.wf-ic{flex:none;width:18px;height:18px;display:inline-flex}
.wf-ic svg{width:18px;height:18px;display:block}
.wf-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.wf-lb{font-size:var(--fs-body);font-weight:500}
.wf-st{font-size:var(--fs-label);font-weight:400;opacity:.85;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* Attorney Notes module (was a floating panel; now a proper module above Journey). */
.nm-card{display:flex;flex-direction:column;gap:.6rem}
.nm-list{display:flex;flex-direction:column;gap:.4rem;max-height:22rem;overflow:auto}
.nm-note{font-size:var(--fs-body);line-height:1.45;color:var(--ink);border-left:2px solid var(--line);
  padding:.1rem 0 .1rem .7rem}
.nm-when{display:block;font-size:var(--fs-micro);color:var(--sub);margin-bottom:.1rem}
.nm-empty{font-size:var(--fs-body);color:var(--sub);font-style:italic}
.nm-text{width:100%;border:1px solid var(--line);border-radius:8px;padding:.55rem;
  font:inherit;font-size:var(--fs-body);resize:vertical}
.nm-act{display:flex;align-items:center;gap:.7rem}
.nm-msg{font-size:var(--fs-label);color:var(--sub)}
/* The Move/Decline/Send-link buttons are triggered from the action panel now, so
   the header duplicates are hidden (they remain as handler targets). */
.dtop #d-move,.dtop #d-decline,.dtop #d-sched-link{display:none}
/* The hero below now carries the client name + the real legal theory, so the old
   CRM-style name + generic "employment" pill are dropped from the utility row (the
   #d-name element stays in the DOM -- the composer reads its textContent). */
.dtop #d-name,.dtop #d-pipe{display:none}

/* ============ CASE HERO -- open a case like a litigation file ============
   Full-width identity band above the state bar: name (page title) / legal theory
   (brief title) / one-line narrative / strength + score + readiness chips. */
.case-hero{background:var(--panel);border-bottom:1px solid var(--line);
  padding:var(--sp-5) 1.4rem}
.case-hero[hidden]{display:none}
/* Two columns: the identity stack (name -> claim -> summary) uses the horizontal
   space on the left; the "should I care?" facts sit in a compact panel on the right. */
.hero-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5)}
.hero-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.hero-name{font-size:var(--fs-display);font-weight:800;letter-spacing:-.02em;line-height:1.03;color:var(--ink)}
.hero-claim{font-size:var(--fs-title);font-weight:700;color:var(--brand-deep);line-height:1.2}
/* Bad news never wears the brand green (audit 2026-08-25). */
.hero-claim-neg{color:var(--sem-urgent-fg)}
.hero-narr{font-size:var(--fs-section);color:var(--ink);max-width:80ch;line-height:1.4}
/* Healthcare fast-qualification badge -- urgent red, reused (no new colour). */
.hero-fastqual{display:inline-block;align-self:flex-start;margin:var(--sp-1) 0 0;
  padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-pill);
  background:var(--red);color:#fff;font-size:var(--fs-meta);font-weight:700}
/* The compact meta panel. */
.hero-side{flex:none;align-self:flex-start;min-width:11.5rem;max-width:15rem;
  display:flex;flex-direction:column;gap:var(--sp-2);background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:var(--sp-3) var(--sp-4)}
.hero-s-line{font-size:var(--fs-label);color:var(--ink);display:flex;align-items:center;gap:var(--sp-1)}
.hero-s-lane{color:var(--sem-complete-fg);font-weight:700}
@media(max-width:720px){.hero-inner{flex-direction:column}.hero-side{align-self:stretch;max-width:none}}

/* ============ CASE STATUS BAR (STATE region) ============
   State only, grouped by meaning. Never actions. Status items that navigate look
   like quiet links; passive facts don't. */
/* Breathing room (owner): the stepper is the orientation anchor for the page, so it
   gets air above (from the nav) and beside (from the progress meter). */
.statusbar{padding:.85rem 1.4rem;border-bottom:1px solid var(--line);background:var(--panel)}
.sb-inner{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2.2rem}
.sb-group{display:flex;flex-direction:column;gap:.26rem;min-width:0}
.sb-group.sb-stagegrp{flex:1 1 240px;min-width:200px}
.sb-k{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--sub)}
.sb-v{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .4rem;font-size:var(--fs-label);color:var(--ink)}
.sb-muted{color:var(--sub)}
/* Deadline + Next in the top bar (owner 2026-08-25): the SOL wears the status
   colour for its urgency band; Next is plain ink. */
.sb-sol{font-size:var(--fs-body);font-weight:700}
.sb-sol.past{color:var(--sem-urgent-fg)}
.sb-sol.soon{color:var(--sem-pending-fg)}
.sb-sol.ok{color:var(--sem-complete-fg)}
.sb-next{font-size:var(--fs-body);font-weight:600;color:var(--ink);max-width:26rem;
  display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-stages{display:flex;gap:2px;flex-wrap:wrap}
.sb-schip{font-size:var(--fs-micro);font-weight:600;color:var(--sub);background:var(--bg);
  border:1px solid var(--line);border-radius:4px;padding:.12rem .4rem;white-space:nowrap}
/* ONLY the current stage is highlighted. Completed stages recede to a neutral
   check (no green -- green was colouring every done stage and drowning the one
   that matters); upcoming stages stay faint. */
/* Three distinct states (owner): done = green check (completed, but quiet so it
   doesn't drown the current one), current = solid ink fill + bold, upcoming = the
   default faint gray outline. */
.sb-schip.done{color:var(--sub);background:var(--bg)}
.sb-schip.done::before{content:"✓ ";font-weight:800;color:var(--green)}
.sb-schip.cur{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:800}
.sb-sol.urg,.sb-sol.urg b{color:var(--red)}
.sb-prog{display:flex;align-items:center;gap:.4rem}
.sb-prog-bar{width:64px;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.sb-prog-bar i{display:block;height:100%;background:var(--brand);border-radius:99px}
/* Navigation shortcut -- a quiet link to a module, NOT an action button. */
.sb-nav{border:none;background:none;font:inherit;font-size:var(--fs-label);color:var(--ink);
  cursor:pointer;padding:.1rem .25rem;border-radius:5px;display:inline-flex;align-items:center;gap:.3rem}
.sb-nav b{font-weight:700}
.sb-nav:hover{background:#fff;text-decoration:underline}

/* ============ CASE DIFF BANNER -- "Changes Since Your Last Review" ============
   Everything in it is new/unread, so the whole banner wears the blue "new" token;
   the four category labels are groupers, not statuses, so they stay neutral (they
   must NOT borrow complete/pending/urgent -- that would misread the semantic rule).
   All sizing/spacing on the tokens. */
.whatschanged{margin:var(--sp-3) 0}
.whatschanged[hidden]{display:none}
.wc-inner{border:1px solid var(--sem-new-fg);border-left:3px solid var(--sem-new-fg);
  background:var(--sem-new-bg);border-radius:10px;padding:var(--sp-3) var(--sp-4)}
.wc-head{display:flex;align-items:center;gap:var(--sp-2)}
.wc-dot{width:8px;height:8px;border-radius:50%;background:var(--sem-new-fg);flex:none}
.wc-title{font-size:var(--fs-body);font-weight:700;color:var(--sem-new-fg)}
.wc-count{font-size:var(--fs-micro);font-weight:800;border-radius:99px;padding:1px var(--sp-2)}
.wc-dismiss{font-size:var(--fs-label);font-weight:600;color:var(--sem-new-fg);
  background:#fff;border:1px solid var(--sem-new-fg);border-radius:8px;
  padding:var(--sp-1) var(--sp-3);cursor:pointer;font-family:inherit}
.wc-dismiss:hover{background:var(--sem-new-fg);color:#fff}
.wc-cats{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3)}
.wc-cat{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.wc-cat-k{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;border-radius:6px;padding:2px var(--sp-2);flex:none;min-width:84px;text-align:center}
.wc-items{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
.wc-item{font-size:var(--fs-body);color:var(--ink)}
.wc-item b{font-weight:700;color:var(--sem-new-fg)}
/* Stage 2/3: the score move headline. from->to + signed delta + derived why. */
.wc-delta{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;
  margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:8px;
  background:var(--bg);border:1px solid var(--line)}
.wc-delta-k{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--sub)}
.wc-delta-v{font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.wc-delta-n{font-size:var(--fs-body);font-weight:800;padding:0 var(--sp-2);border-radius:6px}
.wc-delta.down .wc-delta-n{color:#fff;background:var(--red)}
.wc-delta.up .wc-delta-n{color:#fff;background:var(--ok)}
.wc-delta-why{font-size:var(--fs-label);color:var(--sub)}

/* ============ QUEUE NAVIGATOR ============
   A distinct dark strip -- "doing work within a queue" is a different mode from the
   board. Snapshot per session; Prev/Next move within the frozen list. */
.queuenav{padding:.5rem 1.4rem;background:var(--ink);color:#fff}
.qn-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem}
.qn-ctx{display:flex;align-items:baseline;gap:.55rem;min-width:0}
.qn-k{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.55)}
.qn-name{font-size:var(--fs-body);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qn-pos{font-size:var(--fs-label);color:rgba(255,255,255,.75)}
.qn-nav{display:flex;align-items:center;gap:.4rem}
.qn-btn{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;
  font:inherit;font-size:var(--fs-label);font-weight:600;padding:.28rem .7rem;border-radius:7px;cursor:pointer}
.qn-btn:hover:not(:disabled){background:rgba(255,255,255,.18)}
.qn-btn:disabled{opacity:.4;cursor:default}
.qn-return{background:#fff;color:var(--ink);border-color:#fff}
.qn-return:hover{background:rgba(255,255,255,.85)}

/* Narrow screens: stack the three panels; nav becomes a horizontal wrap. */
@media(max-width:1040px){
  .workspace{grid-template-columns:1fr}
  .ws-nav{flex-direction:row;flex-wrap:wrap;position:static}
  .ws-nav button{width:auto}
  .ws-actions{position:static;order:-1}
}
/* Collapsible long timeline content (transcripts). */
.whatfold summary{cursor:pointer;list-style:none;color:var(--sub);font-size:var(--fs-body)}
.whatfold summary::-webkit-details-marker{display:none}
.whatfold .whatmore{color:var(--brand-deep);font-weight:600}
.whatfold[open] summary{color:var(--sub);opacity:.6}
  .main{min-width:0}
  .pane{display:none}.pane.show{display:block}

  .tcard{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:1rem 1.1rem;margin-bottom:.9rem}
  /* Inside the workspace canvas the flex `gap` already spaces the cards; the extra
     bottom margin made the run below the main grid pace unevenly against it. */
  .ws-canvas .tcard{margin-bottom:0}
  .tcard h3{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.07em;color:var(--sub);margin-bottom:.7rem;font-weight:700}

  .ev{display:flex;gap:.75rem;padding:.5rem 0;border-bottom:1px solid #f2f4f5}
  .ev:last-child{border-bottom:none}
  .ev .ic{width:26px;height:26px;border-radius:50%;background:#eef0f2;flex:none;display:flex;align-items:center;justify-content:center;font-size:var(--fs-label)}
  .ev.client .ic{background:#e2f2f5}
  .ev.staff .ic{background:#efe9fb}
  .ev.alarm .ic{background:#fbe9e6}
  .ev .body{flex:1;min-width:0}
  .ev .who{font-size:var(--fs-label);font-weight:600}
  .ev .what{font-size:var(--fs-body);color:#3d4247;margin-top:.06rem}
  .ev .when{font-size:var(--fs-micro);color:var(--sub);white-space:nowrap}
  .ev.client .body{background:#f4fafb;border-radius:8px;padding:.45rem .6rem;margin:-.1rem 0}

  .composer{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.7rem .8rem}
  .modes{display:flex;gap:.35rem;margin-bottom:.55rem}
  .modes button{border:1px solid var(--line);background:#fff;border-radius:20px;font:inherit;font-size:var(--fs-label);font-weight:600;padding:.24rem .75rem;cursor:pointer;color:var(--sub)}
  .modes button.on{border-color:var(--green);color:var(--green);background:#f0faf4}
  .modes .hint{font-size:var(--fs-micro);color:var(--sub);align-self:center;margin-left:.3rem}
  .btn{background:var(--green);color:#fff;border:none;border-radius:8px;font:inherit;font-size:var(--fs-label);font-weight:600;padding:.55rem 1rem;cursor:pointer}
  .btn.quiet{background:#fff;color:var(--ink);border:1px solid var(--line)}
  .btn.red{background:var(--red)}

  /* side rail */
  .rail .tcard{padding:.7rem .8rem}
  .kv{display:flex;justify-content:space-between;font-size:var(--fs-label);padding:.3rem 0}
  .kv .k{color:var(--sub)} .kv .v{font-weight:600;text-align:right}
  .bar{height:6px;background:#eef0f2;border-radius:3px;margin:.5rem 0 .2rem;position:relative}
  .bar i{position:absolute;inset:0;width:52%;background:var(--amber);border-radius:3px}
  .bar em{position:absolute;left:60%;top:-3px;width:2px;height:12px;background:var(--ink)}
  .claim{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;border-bottom:1px solid #f2f4f5;font-size:var(--fs-label)}
  .claim:last-child{border-bottom:none}
  .cv{font-size:var(--fs-micro);font-weight:700;padding:.14rem .5rem;border-radius:20px}
  .cv.look{background:#fdf3e0;color:#a06d14}

  /* queue */
  .qwrap{padding:1.1rem 1.4rem;max-width:960px}
  .qwrap h1{font-size:var(--fs-section);font-weight:700;margin-bottom:.15rem}
  .qwrap .sub{font-size:var(--fs-label);color:var(--sub);margin-bottom:1rem}
  /* Ian's Screen: the 5-column intake Kanban (owner 2026-08-17). Reuses the board
     .pipe/.col column shell, but a CUSTOM card (.is-card) -- NO score (the gates
     replaced scoring); claim tag, summary, and three time chips. Column 5 is the
     compact name-only referral row. */
  #ian-screen{padding:1.1rem 1.4rem}
  .is-head h1{font-size:var(--fs-section);font-weight:700;margin-bottom:.8rem}
  .is-ref{background:var(--panel);border:1px solid var(--line);border-radius:8px;
    padding:.4rem .55rem;font-size:var(--fs-body);font-weight:600;margin-bottom:.4rem;cursor:pointer}
  .is-ref:hover{border-color:var(--emp)}
  /* Referrals tab: the two attorney actions under each referral card. */
  .ref-item{margin-bottom:.9rem}
  .ref-actions{display:flex;gap:.4rem;margin-top:-.2rem}
  .ref-act{flex:1;border:1px solid var(--line);background:var(--panel);border-radius:8px;
    padding:.4rem .6rem;font:inherit;font-size:var(--fs-label);font-weight:600;color:var(--sub);cursor:pointer}
  .ref-act:hover{border-color:var(--emp);color:var(--ink)}
  .ref-act.close{color:var(--brass);border-color:var(--brass)}
  /* Close — no letter (Declined): a decline, so it reads red, distinct from Handed off. */
  .ref-act.declino{color:var(--red);border-color:var(--red)}
  .ref-act.declino:hover{background:var(--red);border-color:var(--red);color:#fff}
  .ref-act:disabled{opacity:.5;cursor:default}
  /* Portal Tracking cards (owner Typeform-Docs item 4). */
  .pt-num{font-size:var(--fs-micro);color:var(--sub);font-weight:700;white-space:nowrap}
  .pt-remove{margin-top:.5rem;width:100%;border:1px solid var(--red);background:var(--panel);
    color:var(--red);font:inherit;font-size:var(--fs-label);font-weight:700;border-radius:8px;padding:.35rem;cursor:pointer}
  .pt-remove:hover{background:var(--red);color:#fff}
  .pt-remove:disabled{opacity:.5;cursor:default}
  /* Send-portal-invite: a positive CTA on a Portal Pending card that has an
     email but nothing sent yet (owner 2026-08-28). */
  .pt-send{margin-top:.5rem;width:100%;border:1px solid var(--brand);background:var(--panel);
    color:var(--brand);font:inherit;font-size:var(--fs-label);font-weight:700;border-radius:8px;padding:.35rem;cursor:pointer}
  .pt-send:hover{background:var(--brand);color:#fff}
  .pt-send:disabled{opacity:.5;cursor:default}
  /* Ian's Screen card v2 -- matches the Pipeline board's .deal shading. */
  .is-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;
    padding:.6rem .7rem;margin-bottom:.5rem;cursor:pointer;box-shadow:var(--shadow);transition:box-shadow .12s,transform .12s}
  .is-card:hover{border-color:var(--emp);box-shadow:0 2px 8px rgba(0,0,0,.10)}
  .is-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
  .is-name{font-size:var(--fs-body);font-weight:700;min-width:0}
  .is-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.35rem}
  /* SOL corner: colour-banded by days remaining; an exclamation flag when unset.
     Clickable to set/correct the date (sticky manual override). */
  .is-sol{flex:0 0 auto;font-size:var(--fs-micro);font-weight:800;white-space:nowrap;cursor:pointer;
    border:1px solid var(--line);border-radius:6px;padding:.12rem .4rem}
  .is-sol:hover{filter:brightness(.96)}
  .is-soledit{font:inherit;font-size:var(--fs-micro);border:1px solid var(--brand);border-radius:6px;padding:.1rem .2rem}
  .is-sol.neutral{color:var(--sub);background:var(--panel)}
  .is-sol.yellow{color:#8a6d0b;background:#fbf4d8;border-color:#e8d59a}
  .is-sol.orange{color:#b5590a;background:#fbe6d4;border-color:#f0c79a}
  .is-sol.red{color:#fff;background:var(--red);border-color:var(--red)}
  /* The still-running claim beside a passed clock (audit 2026-08-29, O3). Deliberately
     QUIET -- green, no fill, no border weight: it must never compete with the red stamp
     it sits next to. It answers "is anything left?", it does not soften the warning. */
  .is-sol-live{flex:0 0 auto;font-size:var(--fs-micro);font-weight:700;white-space:nowrap;
    color:var(--green);margin-left:.25rem}
  /* "Needs term date": a clickable red pill (owner 2026-08-19) — the SOL can't compute
     without a termination date, so the flag names the real gap instead of a bare "!". */
  .is-sol.needs{color:#fff;background:var(--red);border-color:var(--red);cursor:pointer;font-weight:800}
  /* One day chip; colour set by the section/referral scale on the class. */
  .is-daychip{font-size:var(--fs-micro);font-weight:700;border-radius:999px;padding:.15rem .55rem;
    border:1px solid var(--line);white-space:nowrap}
  .is-daychip.neutral{color:var(--sub)}.ref-green{color:#3d6b1f;background:#eaf3dd;border-color:#c7e0a8}.ref-yellow{color:#8a6d0b;background:#fbf4d8;border-color:#e8d59a}.ref-orange{color:#b5590a;background:#fbe6d4;border-color:#f0c79a}.ref-red{color:#fff;background:var(--red);border-color:var(--red)}
  /* Case type + completeness (owner v3): a visual progress bar, not a bare number. */
  .is-casetype{font-size:var(--fs-label);font-weight:700;color:var(--emp);margin:.3rem 0 0}
  .is-prog{display:flex;align-items:center;gap:.45rem;margin:.4rem 0}
  .is-progbar{flex:1;height:.5rem;background:var(--hover);border-radius:999px;overflow:hidden}
  .is-progbar span{display:block;height:100%;background:var(--ok);border-radius:999px}
  .is-progpct{font-size:var(--fs-label);font-weight:800;color:var(--ink);flex:0 0 auto}
  .is-miss{font-size:var(--fs-micro);color:var(--sub);margin-top:.15rem;line-height:1.35}
  .is-miss.ok{color:#3d6b1f;font-weight:600}
  /* Review of New Information: new docs / message. */
  .is-newrow{display:flex;flex-wrap:wrap;gap:.35rem;margin:.35rem 0}
  .is-newrow.none{color:var(--sub);font-size:var(--fs-micro);font-style:italic}
  .is-new{font-size:var(--fs-micro);font-weight:700;color:var(--emp);
    background:var(--hover);border-radius:6px;padding:.12rem .4rem}
  .is-new.msg{color:#1d6a4f;background:#e3f3ec}
  /* Referral full card. */
  .is-refcard .is-reflawyer{font-size:var(--fs-label);color:var(--sub);margin:.2rem 0 0;font-weight:600}
  .is-refstat{margin:.3rem 0 .1rem}
  .is-refstatus{font:inherit;font-size:var(--fs-micro);font-weight:700;border:1px solid var(--line);
    border-radius:6px;padding:.15rem .35rem;background:var(--panel);color:var(--ink);cursor:pointer}
  .is-refstatus:hover{border-color:var(--emp)}
  .is-fucount{font-size:var(--fs-micro);font-weight:800;color:var(--emp);
    background:var(--hover);border-radius:999px;padding:.15rem .45rem}
  .is-refemail{display:flex;align-items:center;gap:.3rem;margin:.15rem 0 0}
  .is-refem{font-size:var(--fs-micro);color:var(--emp);word-break:break-all}
  .is-copyemail{border:1px solid var(--line);background:var(--panel);border-radius:5px;cursor:pointer;
    font-size:var(--fs-micro);line-height:1;padding:.1rem .3rem;color:var(--sub)}
  .is-copyemail:hover{border-color:var(--emp);color:var(--ink)}
  .is-followup{border:none;background:none;cursor:pointer;font-size:1.15em;line-height:1;padding:0 .1rem}
  .is-followup:hover{transform:scale(1.15)}
  .rc-overlay{position:fixed;inset:0;z-index:210;background:rgba(20,22,28,.45);
    display:flex;align-items:center;justify-content:center;padding:1rem}
  .rc-pop{background:var(--panel);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);
    width:min(440px,92vw);padding:1.1rem 1.15rem}
  .rc-title{font-size:var(--fs-section);font-weight:800;color:var(--ink)}
  .rc-sub{font-size:var(--fs-label);color:var(--sub);margin:.25rem 0 .85rem;line-height:1.35}
  .rc-opts{display:flex;flex-direction:column;gap:.5rem}
  .rc-opt{display:flex;align-items:center;gap:.6rem;text-align:left;border:1px solid var(--line);
    background:var(--panel);border-radius:9px;padding:.55rem .7rem;cursor:pointer;font:inherit;
    font-size:var(--fs-body);color:var(--ink)}
  .rc-opt:hover{border-color:var(--emp);background:var(--hover)}
  .rc-opt:disabled{opacity:.5;cursor:default}
  .rc-icon{flex:0 0 1.4rem;font-size:1.1em;text-align:center;color:var(--sub)}
  .rc-label{min-width:0}
  .rc-cancel{margin-top:.85rem;border:none;background:none;color:var(--sub);cursor:pointer;
    font:inherit;font-size:var(--fs-label);text-decoration:underline}
  /* Execution queues: role toggle + urgency-banded rows. */
  .eq-roles{display:flex;gap:.5rem;margin-bottom:1rem}
  .eq-role{border:1px solid var(--line);background:var(--panel);border-radius:8px;
    padding:.4rem .8rem;font-size:var(--fs-label);cursor:pointer;color:var(--sub)}
  .eq-role.on{background:var(--accent,#2c5b8f);color:#fff;border-color:transparent;font-weight:600}
  /* My Work (arch B): Current/Upcoming bands + name-led rows + in-place panels. */
  .mw-band{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.05em;
    font-weight:800;color:var(--ink,#141c24);margin:1.2rem 0 .45rem}
  .mw-band.up{color:var(--sub)}
  .mw-row{background:var(--panel);border:1px solid var(--line);border-radius:9px;margin-bottom:.4rem}
  .mw-row:hover{border-color:var(--line-strong,#c9d2dc)}
  .mw-row.open{border-color:var(--accent,#2c5b8f)}
  /* Name-led header; the whole bar expands the work panel in place. */
  .mw-head{width:100%;display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem .5rem .6rem;
    background:transparent;border:0;cursor:pointer;font-family:inherit;text-align:left}
  .mw-chev{color:var(--sub);font-size:var(--fs-micro);width:1rem;flex:none}
  .mw-name{font-weight:700;font-size:var(--fs-body);color:var(--ink,#141c24);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:42%}
  .mw-sub{font-size:var(--fs-micro);color:var(--sub);flex:1;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mw-clock{font-size:var(--fs-micro);color:var(--sub);white-space:nowrap;flex:none}
  .mw-clock.over{color:#b3261e;font-weight:700}
  /* In-place working panel: ordered §3 content blocks + a bottom action bar. */
  .mw-panel{border-top:1px solid var(--line);padding:.7rem .85rem;background:var(--panel-hover,#f6f8fa)}
  .mw-loading,.mw-muted{color:var(--sub);font-size:var(--fs-label)}
  .mw-block{margin-bottom:.8rem}
  .mw-bt{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.04em;font-weight:800;
    color:var(--sub);margin:0 0 .3rem}
  .mw-pct{font-size:var(--fs-micro);color:var(--sub);font-weight:700}
  /* Workflow strip */
  .mw-wfstrip{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem;font-size:var(--fs-micro)}
  .mw-wf{padding:.12rem .5rem;border-radius:11px;border:1px solid var(--line);color:var(--sub);white-space:nowrap}
  .mw-wf.done{color:#1f7a35;border-color:#bfe0c6;background:#f1f9f3}
  .mw-wf.current{color:#fff;background:var(--accent,#2c5b8f);border-color:transparent;font-weight:700}
  .mw-wfsep{color:var(--line-strong,#c9d2dc)}
  /* Checklist / requested items */
  .mw-cklist,.mw-doclist{list-style:none;padding:0;margin:0;font-size:var(--fs-label)}
  .mw-ck{padding:.15rem 0}
  .mw-ck .mw-ckstate{display:inline-block;width:2.2rem;font-weight:700}
  .mw-ck.have .mw-ckstate{color:#1f7a35}
  .mw-ck.missing{color:var(--sub)}.mw-ck.missing .mw-ckstate{color:#b3261e}
  .mw-ckval{color:var(--sub);font-size:var(--fs-micro)}
  /* Message thread + reply */
  .mw-thread{max-height:12rem;overflow:auto}
  .mw-msg{font-size:var(--fs-label);padding:.25rem 0;border-bottom:1px dotted var(--line)}
  .mw-msg.out{color:var(--sub)}
  .mw-reply{width:100%;margin:.5rem 0 .35rem;border:1px solid var(--line);border-radius:7px;padding:.5rem;font-family:inherit;font-size:var(--fs-label)}
  .mw-replyacts,.mw-declineacts,.mw-panelacts{display:flex;gap:.5rem;margin-top:.4rem;flex-wrap:wrap}
  .mw-panelacts{margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--line);align-items:center}
  /* Before-the-call / brief blocks */
  .mw-bcsec{margin:.3rem 0}
  .mw-bcsec b{font-size:var(--fs-micro);color:var(--sub)}
  .mw-bcsec ul{margin:.15rem 0 .3rem 1.1rem;padding:0;font-size:var(--fs-label)}
  .mw-ovsum{font-size:var(--fs-label);line-height:1.5}
  .mw-ovrisk{font-size:var(--fs-label);color:#b3261e;margin-top:.35rem}
  /* Screener notes (human-only) */
  .mw-human{background:#fbf7ee;border:1px solid #ecdfc4;border-radius:8px;padding:.5rem .65rem}
  .mw-humantag{font-size:var(--fs-micro);color:#8a6d3b;margin-bottom:.35rem}
  .mw-tag{display:inline-block;background:#fff;border:1px solid #e0d3b3;border-radius:11px;
    padding:.05rem .5rem;font-size:var(--fs-micro);margin:.1rem .15rem 0 0}
  .mw-sntext{font-size:var(--fs-label);margin-top:.3rem;white-space:pre-wrap}
  /* Intake transcript */
  .mw-transcript{max-height:14rem;overflow:auto;font-size:var(--fs-label)}
  .mw-qa{padding:.3rem 0;border-bottom:1px dotted var(--line)}
  .mw-q{font-weight:600}.mw-a{color:var(--sub)}
  /* Termination pull-out */
  .mw-term{background:#fef6f5;border:1px solid #f2ccc8;border-radius:8px;padding:.5rem .65rem}
  /* AI summary */
  .mw-summary{padding:.6rem .75rem;background:var(--panel);border:1px solid var(--line);
    border-radius:8px;font-size:var(--fs-label);line-height:1.45}
  /* Decision buttons */
  .mw-decidebtns{display:flex;flex-wrap:wrap;gap:.5rem}
  .mw-decide{background:var(--accent,#2c5b8f);color:#fff;border:1px solid transparent;border-radius:7px;
    padding:.4rem .85rem;font-weight:600;font-size:var(--fs-label);cursor:pointer;font-family:inherit}
  .mw-decide:disabled{background:transparent;color:var(--sub);border-color:var(--line);cursor:not-allowed}
  /* Decline menu */
  .mw-lt{display:block;font-size:var(--fs-label);margin-bottom:.4rem}
  .mw-lettertype{margin-left:.4rem;font-family:inherit;font-size:var(--fs-label);padding:.2rem .3rem}
  /* Buttons */
  .mw-send,.mw-declinesend{background:var(--accent,#2c5b8f);color:#fff;border:0;border-radius:7px;
    padding:.4rem .9rem;font-weight:600;cursor:pointer;font-family:inherit;font-size:var(--fs-label)}
  .mw-declinesend{background:var(--red,#b3261e)}
  .mw-act{white-space:nowrap;background:transparent;color:var(--accent,#2c5b8f);border:1px solid var(--accent,#2c5b8f);
    border-radius:7px;padding:.4rem .85rem;font-size:var(--fs-label);font-weight:600;cursor:pointer;font-family:inherit}
  .mw-act.primary{background:var(--accent,#2c5b8f);color:#fff;border-color:transparent}
  .mw-act:hover:not(:disabled){filter:brightness(1.05)}
  .mw-opencase{margin-left:auto;font-size:var(--fs-micro);color:var(--sub);text-decoration:none}
  .mw-opencase:hover{text-decoration:underline}

  @media(max-width:980px){.kpis{grid-template-columns:repeat(2,1fr)}.dwrap{grid-template-columns:1fr}.pipe{grid-template-columns:repeat(2,minmax(215px,1fr))}}
  @media(max-width:600px){.pipe{grid-template-columns:1fr}.search{display:none}}

/* ------------------------------------------------------------------------
   APP-ONLY ADDITIONS — states a static mockup had no reason to render.
   Nothing above this line was changed.
   ------------------------------------------------------------------------ */

/* The dot carries a native tooltip naming its clock (owner ruling): a case can
   go red for a reason a human would not assume, so the reason is always one
   hover away. cursor:help is the affordance that says "there is more here". */
.act{cursor:help}
.act.none{background:#cfd4d8}

/* Empty column. A column with no cases must look deliberately empty rather
   than broken or still-loading. */
.colempty{font-size:var(--fs-label);color:var(--sub);padding:.7rem .2rem;text-align:center}

/* Loading / error / auth panels. */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;
       box-shadow:var(--shadow);padding:1.1rem 1.3rem;margin:1.1rem 1.4rem;max-width:760px}
.panel h2{font-size:var(--fs-section);font-weight:700;margin-bottom:.4rem}
.panel p{font-size:var(--fs-body);color:#3d4247;line-height:1.55;margin-bottom:.5rem}
.panel code{background:var(--bg);border:1px solid var(--line);border-radius:5px;
            padding:.12rem .4rem;font-size:var(--fs-label);font-family:ui-monospace,Menlo,Consolas,monospace}
.panel pre{background:var(--bg);border:1px solid var(--line);border-radius:8px;
           padding:.7rem .85rem;font-size:var(--fs-label);overflow-x:auto;margin:.5rem 0;
           font-family:ui-monospace,Menlo,Consolas,monospace}
.panel.bad{border-color:var(--red)}
.panel.bad h2{color:var(--red)}
.tokin{width:100%;border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;
       font:inherit;font-size:var(--fs-label);margin:.35rem 0 .6rem;
       font-family:ui-monospace,Menlo,Consolas,monospace}

/* Shadow-mode banner. The app comes up alongside a pipeline that is not
   sending; saying so on screen keeps "nothing went out" from being a thing a
   person has to remember rather than see. */
.shadowbar{background:#fdf6e3;border-bottom:1px solid #ecdcae;color:#7a601b;
           font-size:var(--fs-label);padding:.35rem 1.4rem;text-align:center}

/* An unplaced case — a stage no column claims. Loud on purpose: the board
   silently omitting a case is the failure this surfaces. */
.unplaced{background:#fbe9e6;border:1px solid var(--red);border-radius:10px;
          padding:.7rem .9rem;margin:0 1.4rem 1rem;font-size:var(--fs-label);color:#8c2f1d;max-width:760px}

/* Nav items not yet built. Visibly inert rather than silently broken. */
.top nav button.todo{opacity:.4;cursor:not-allowed}

/* Score tolerance band (step 2).
   THE MOCKUP'S `.bar em` TICK IS DELIBERATELY UNUSED. It marks the branch
   threshold as a hard line, and the ruling is that the line is not sharp:
   maritime moved 10 points across 31 runs of one narrative, and employment has
   no variance measurement at all. The band is shaded; the only marker drawn is
   the score itself.
   `.band.indet` is the unmeasured case -- hatched, because a solid band would
   assert a width nobody measured. */
.band{height:9px;background:#eef0f2;border-radius:5px;position:relative;
      margin:.6rem 0 .35rem;overflow:hidden}
.band i{position:absolute;top:0;bottom:0;background:rgba(232,161,60,.5);border-radius:5px}
.band u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);opacity:.7}
.caveat{font-size:var(--fs-label);color:var(--sub);line-height:1.5;margin-top:.5rem;
        padding-top:.5rem;border-top:1px solid #f0f2f3}
.verdict{font-size:var(--fs-micro);font-weight:700;padding:.14rem .5rem;border-radius:20px;
         background:#eef0f2;color:var(--sub)}
.verdict.none{background:#fdf3e0;color:#a06d14}
.verdict.noclaim{background:#fbe3de;color:#b23524}
.verdict.strong{background:transparent;color:var(--ink)}
.verdict.low{background:var(--hover);color:var(--sub)}

/* Attribution: one value shown, every value kept. A disagreement is signal and
   is marked rather than resolved away. */
.attr{padding:.4rem 0;border-bottom:1px solid #f2f4f5;font-size:var(--fs-label)}
.attr:last-child{border-bottom:none}
.attr .f{color:var(--sub);font-size:var(--fs-label)}
.attr .v{font-weight:600;word-break:break-word}
.attr .alt{font-size:var(--fs-micro);color:var(--sub);margin-top:.15rem}

/* ========================================================================
   BRAND OVERRIDES — owner ruling 2026-07-21. The firm's mark, not a wordmark.

   Every rule here exists because the mockup assumed a colour that the firm's
   real green cannot do. #9dc02e is LIGHT: white text on it measures 2.10:1,
   which is unreadable and fails WCAG AA by a wide margin. So brand-green
   surfaces carry INK text (7.22:1), and green-on-white text uses --brand-deep
   (4.77:1) rather than the raw brand colour (2.10:1).

   Measured, not eyeballed — the numbers above are computed contrast ratios.
   ======================================================================== */

/* The real mark replaces the "DDA Intake" wordmark entirely. */
.top{height:62px}
.logo{display:flex;align-items:center;gap:.7rem;font-weight:400}
.logo img{height:34px;width:auto;display:block}
/* The tool's name sits BESIDE the firm mark, quietly. It is an internal tool,
   so the firm is the brand and "Intake" is just which tool this is. */
.logo .tool{font-size:var(--fs-body);font-weight:700;letter-spacing:.06em;
            text-transform:uppercase;color:var(--sub);
            border-left:1px solid var(--line);padding-left:.7rem}

/* The single green is dark enough to take WHITE text (4.5:1+); ink on it fails. */
.btn{background:var(--green);color:#fff;font-weight:700}
.btn:hover{background:#54681a}
/* Pressed feedback -- the drop Confirm gave none, so a slow async submit looked
   like nothing happened and people clicked again. Hover/active stay DARKER (not
   lighter) so white text keeps its contrast. */
.btn:active:not(:disabled){transform:translateY(1px);background:#455717}
.btn.quiet{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.red{background:var(--red);color:#fff}

/* Green text on white uses the deeper green. */
.fchip.on{border-color:var(--green);color:var(--brand-deep)}
/* Mode toggle: the active mode is a solid fill, inactive modes a light outline,
   so the toggle reads as a switch rather than a row of tags (Activity cleanup). */
.modes button.on{border-color:var(--green);color:#fff;background:var(--green);font-weight:700}
.top nav button.on{border-bottom-color:var(--green)}
.colhead{border-bottom-color:var(--green)}

/* Status colours are independent of the brand. */
.act.ok{background:var(--ok)}

/* Pills, re-cut to green + neutrals. */
.pill.emp{background:#ececec;color:var(--sub)}
.pill.inj{background:#ececec;color:var(--sub)}
.pill.portal{background:#f3efe2;color:var(--brass)}
.pill.flag{background:#fbe9e6;color:var(--red)}

/* The avatar was the mockup's purple. */
.avatar{background:var(--ink);color:#fff;font-weight:700}

/* Sign-in (magic link). The firm mark leads; there is no password field to
   fill, so the panel stays deliberately sparse. */
.panel.signin{max-width:430px;margin:3.5rem auto;text-align:center;padding:1.6rem 1.7rem 1.3rem}
.signin-mark{height:42px;width:auto;margin:0 auto .9rem;display:block}
.panel.signin h2{font-size:var(--fs-section);margin-bottom:.35rem}
.panel.signin p{font-size:var(--fs-body);text-align:center}
.panel.signin .tokin{text-align:center}
.panel.signin .btn{width:100%}
.signin-note{font-size:var(--fs-label);color:var(--sub);margin-top:.7rem}
.signin-bad{background:#fbe9e6;border:1px solid #f0c4bb;border-radius:8px;
            padding:.6rem .75rem;font-size:var(--fs-label);color:#8c2f1d;margin-top:.6rem;text-align:left}
.devauth{margin-top:1.2rem;padding-top:.8rem;border-top:1px solid var(--line);text-align:left}
.devauth summary{font-size:var(--fs-label);color:var(--sub);cursor:pointer;text-align:center}
.devauth pre{margin-top:.6rem}

/* Signed-in identity in the header. */
.who{display:flex;align-items:center;gap:.6rem}
.signout{background:none;border:none;font:inherit;font-size:var(--fs-label);color:var(--sub);
         cursor:pointer;padding:0}
.signout:hover{color:var(--ink);text-decoration:underline}

/* Composer (step 3). Three modes; two are client-visible and gated on the
   SERVER. Nothing here is the gate -- these styles only report what the server
   already decided. */
.composer{margin-bottom:.9rem}
.composer textarea{width:100%;border:1px solid var(--line);border-radius:8px;
  padding:.6rem .7rem;font:inherit;font-size:var(--fs-body);resize:vertical;min-height:64px}
.composer .modes button{cursor:pointer}
.cpick{display:flex;gap:.5rem;margin-bottom:.55rem}
.cpick select{flex:1;border:1px solid var(--line);border-radius:8px;
  padding:.45rem .6rem;font:inherit;font-size:var(--fs-label);background:#fff}
.crow{display:flex;align-items:center;gap:.6rem;margin-top:.55rem}
.cgate{font-size:var(--fs-label);color:var(--sub)}
.cgate.held{color:#8a6d1b;font-weight:600}
.cresult{margin-top:.6rem;font-size:var(--fs-label);border-radius:8px;padding:.55rem .7rem}
.cresult.ok{background:#f2f8e6;border:1px solid #d8e8b4;color:#4a6216}
.cresult.held{background:#fdf6e3;border:1px solid #ecdcae;color:#7a601b}
.cresult.bad{background:#fbe9e6;border:1px solid #f0c4bb;color:#8c2f1d}

/* A blocked button must LOOK blocked. The declination queue disables approve
   when the letter will not render or the viewer is not an attorney, and without
   this the control looked identical to a live one -- an approve button that
   appears clickable and silently is not is worse than no button. */
.btn:disabled, .btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
.btn:disabled:hover, .btn[disabled]:hover{filter:grayscale(.5)}

/* A note is a person speaking. It should not look like a system row. */
.ev.ev-note .body{background:#f6f7f2;border-left:3px solid var(--green);
  border-radius:6px;padding:.45rem .6rem;margin:-.1rem 0}
.ev.ev-note .what{color:var(--ink);font-size:var(--fs-body)}
.ev.alarm .who{color:#8c2f1d}

/* A line with nothing beneath it because nothing was recorded -- distinct from
   a line that simply needs no detail. Says so rather than looking complete. */
.ev .what.thin{color:var(--sub);font-style:italic;font-size:var(--fs-label)}

/* Feed date dividers (Activity log + Messages): Today / Yesterday / a date, so a
   long history reads at a glance instead of as one undifferentiated wall. */
.tl-div{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--sub);margin:.7rem 0 .35rem;padding-bottom:.15rem;border-bottom:1px solid var(--line)}
.tl-div:first-child{margin-top:0}

/* Messages tab: the portal conversation as a chat thread -- client left, us
   right -- so a real client message can't hide among system events. */
.tcard-thread #d-thread{display:flex;flex-direction:column;gap:.4rem;max-height:52vh;overflow-y:auto}
.msgrow{display:flex}
.msgrow.mine{justify-content:flex-end}
.msgrow.theirs{justify-content:flex-start}
.msg{max-width:78%;border-radius:12px;padding:.5rem .7rem}
.msgrow.theirs .msg{background:#eef0f2;border:1px solid var(--line);border-bottom-left-radius:4px}
.msgrow.mine .msg{background:#f0faf4;border:1px solid #cfe6d6;border-bottom-right-radius:4px}
.msg-b{font-size:var(--fs-body);line-height:1.45;color:var(--ink);white-space:pre-wrap}
.msg-b.thin{color:var(--sub);font-style:italic}
.msg-w{font-size:var(--fs-micro);color:var(--sub);margin-top:.25rem}
/* A client-sent screenshot/image, rendered inline in the conversation. */
.msg.msg-img-wrap{padding:.35rem}
.msg-img{display:block;max-width:100%;max-height:22rem;border-radius:8px;border:1px solid var(--line);background:var(--hover);min-height:1.5rem}
.msgrow.mine .msg-w{text-align:right}

/* --- search ---------------------------------------------------------------
   Above the board on purpose. Finding a person is the first thing that
   happens on a Tuesday, and it is the only route to the 931 terminal cases
   that have no lane. */
.searchbar { display:flex; gap:8px; align-items:center; margin:0 0 14px; }
.searchbar input {
  flex:1; max-width:520px; padding:9px 12px; font-size:var(--fs-body);
  border:1px solid var(--line); border-radius:6px; background:var(--card);
  color:var(--ink); font-family:inherit;
}
.searchbar input:focus { outline:2px solid var(--brand); outline-offset:1px; }
.qhint { color:var(--muted); font-size:var(--fs-label); }
.qrow {
  display:flex; gap:10px; align-items:baseline; padding:8px 10px;
  border-bottom:1px solid var(--line); cursor:pointer;
}
.qrow:hover { background:var(--hover); }
.qnum { font-variant-numeric:tabular-nums; color:var(--muted); min-width:104px; }
.qname { font-weight:600; }
.qmeta { color:var(--muted); font-size:var(--fs-label); margin-left:auto; }
/* A terminal or void case must not read like working inventory. */
.qrow.gone .qname, .qrow.gone .qnum { opacity:.62; }
.qvoid {
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.04em;
  border:1px solid var(--line); border-radius:3px; padding:1px 5px;
  color:var(--muted);
}

/* --- move panel -----------------------------------------------------------
   Every legal transition, read from the server. System-only moves are shown
   and disabled rather than hidden -- owner ruling: staff should see what the
   machine does for itself. */
.movepanel {
  border:1px solid var(--line); border-radius:8px; background:var(--card);
  padding:12px 14px; margin:10px 0 4px;
}
.movehead { display:flex; gap:10px; align-items:baseline; margin-bottom:8px; }
.moverow {
  display:flex; gap:10px; align-items:center; width:100%; text-align:left;
  padding:8px 10px; margin:3px 0; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--ink);
  font:inherit; cursor:pointer;
}
.moverow:hover:not(:disabled) { background:var(--hover); border-color:var(--brand); }
/* GREYED, NOT GONE. A control that vanishes teaches nothing about the machine. */
.moverow:disabled { cursor:not-allowed; opacity:.5; }
.movegoes { color:var(--muted); font-size:var(--fs-label); margin-left:auto; }
/* Close as Duplicate: a distinct, letter-free terminal close, set apart from the
   stage moves above it so it never reads as just another transition. */
.moverow.dup { margin-top:8px; border-style:dashed; color:var(--muted); }
.moverow.dup:hover { color:var(--ink); border-color:var(--brand); border-style:solid; }
.movewhy { color:var(--muted); font-size:var(--fs-label); font-style:italic; }
.movetier {
  font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.05em;
  border:1px solid var(--line); border-radius:3px; padding:1px 5px;
  color:var(--muted);
}
.movereason { margin-top:10px; }
.movereason textarea {
  width:100%; padding:8px 10px; font:inherit; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:6px;
}
.moveact { display:flex; gap:8px; margin-top:8px; }
.btn.ghost { background:transparent; color:var(--muted); }
/* Rescue is a reversal -- an outlined button carrying an undo mark, distinct
   from the filled destructive actions beside it in the pile. */
.btn.rescue { background:transparent; color:var(--brand-deep);
  border:1px solid var(--brand-deep); font-weight:700; border-radius:8px;
  padding:.4rem .8rem; }
.btn.rescue:hover { background:#f0faf4; }
/* Decline: a caution-outline action in the detail header, distinct from Move. */
.btn.decline { background:transparent; color:var(--red); border:1px solid var(--red); font-weight:700; }
.btn.decline:hover { background:#fbe9e6; }

/* --- drag, drop, staleness ------------------------------------------------ */
.deal { cursor: grab; }
.deal.dragging { opacity:.45; cursor:grabbing; }
.col.over { outline:2px dashed var(--brand); outline-offset:-4px; border-radius:8px; }

/* Staleness measures OUR neglect, and is suppressed while the ball is in the
   client's court. Amber at 2 days, red at 5. */
.stale {
  float:right; font-size:var(--fs-label); font-weight:600; padding:1px 6px;
  border-radius:10px; margin-left:6px;
}
.stale.amber { background:var(--amber); color:#3a2b00; }
.stale.red   { background:var(--red); color:#fff; }

/* #4/#5 Spotlight search overlay: opens over anything, from anywhere. */
.spotlight{position:fixed;inset:0;z-index:200;background:rgba(20,22,28,.45);
  display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
/* hidden MUST win: a bare display:flex on the class outranks the UA [hidden]
   rule, so without this the overlay stays up and blocks the board even after
   spotClose() (the .modalwrap[hidden] lesson, repeated here). */
.spotlight[hidden]{display:none}
.spotclose{position:absolute;top:.4rem;right:.55rem;border:none;background:transparent;
  color:var(--sub);font-size:var(--fs-title);line-height:1;cursor:pointer;padding:.15rem .35rem;border-radius:6px}
.spotclose:hover{background:var(--hover);color:var(--ink)}
.spotbox{position:relative}
.spotbox{width:min(640px,92vw);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden}
.spotin{width:100%;border:none;outline:none;font-size:var(--fs-section);padding:1rem 1.15rem;
  background:transparent;color:var(--ink);box-sizing:border-box}
.spothint{padding:.3rem 1.15rem .5rem;font-size:var(--fs-label);color:var(--sub);
  border-bottom:1px solid var(--line)}
.spotresults{max-height:52vh;overflow-y:auto}
.spotrow{display:flex;align-items:center;gap:.6rem;padding:.55rem 1.15rem;cursor:pointer;
  border-bottom:1px solid var(--line)}
.spotrow:last-child{border-bottom:none}
.spotrow.active,.spotrow:hover{background:var(--hover)}
.spotrow.gone{opacity:.55}
.spotrow .snum{font-weight:700;font-size:var(--fs-label);min-width:5.5rem}
.spotrow .sname{flex:1;font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spotrow .smeta{font-size:var(--fs-label);color:var(--sub);white-space:nowrap}
.spotrow .svoid{font-size:var(--fs-micro);font-weight:700;color:var(--red);background:#fbe3de;
  border-radius:8px;padding:.05rem .35rem}

/* #17 manual acts: attorney-added facts on the Claims panel. */
.manualacts{margin-top:.75rem;padding-top:.6rem;border-top:1px dashed var(--line)}
.mfact-head{font-size:var(--fs-micro);font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.45rem}
.mfact{display:inline-block;font-size:var(--fs-micro);font-weight:700;color:#5a3ec8;background:#ece8fb;border-radius:9px;padding:.05rem .4rem;margin-left:.4rem;vertical-align:middle}
.mfact-list{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.55rem}
.mfact-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:var(--fs-label)}
.mfact-claims{color:var(--sub);margin-left:.35rem;font-size:var(--fs-micro)}
.addfact{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.addfact .manual-act-pick{flex:2;min-width:12rem;font-size:var(--fs-label);padding:.28rem}
.addfact .manual-act-desc{flex:3;min-width:9rem;font-size:var(--fs-label);padding:.28rem}

/* #12 Partner Brief: the derived decision panel above the tabs. */
.pbrief{border:1px solid var(--line);border-left:4px solid var(--sub);border-radius:10px;
  padding:var(--sp-4);margin:0;background:var(--panel)}
/* The verdict header owns the content below it, so it sits CLOSE to it (owner: it
   shouldn't float). margin-bottom binds it down; the first section starts right under. */
.pb-head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.pbrief .pb-section:first-of-type,.pbrief .pb-happened-row{margin-top:0}
.pb-rec{font-weight:800;font-size:var(--fs-body);flex:1 1 auto;min-width:0}
/* Best claim -- vital info, promoted to a prominent header pill next to the score
   (owner). Bigger than the eyebrow labels + a colour: green, because the best claim is
   one that PASSED the gate. */
.pb-claimpill{display:inline-flex;align-items:center;gap:var(--sp-2);flex:none;
  background:var(--sem-complete-bg);color:var(--sem-complete-fg);
  border-radius:99px;padding:var(--sp-1) var(--sp-3)}
.pb-claimpill-k{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;opacity:.75}
.pb-claimpill-v{font-size:var(--fs-body);font-weight:700}
.pb-claimpill-lane{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;background:rgba(255,255,255,.55);border-radius:6px;padding:1px var(--sp-1)}
/* Visual discipline: the recommendation reads in B&W; only a decline/risk verdict
   keeps color (an urgent decision signal). */
.pb-rec.strong,.pb-rec.review,.pb-rec.action{color:var(--ink)}
.pb-rec.risk,.pb-rec.decline{color:var(--red)}
.pb-rec.neutral{color:var(--sub)}

/* #1 readable measure: the narrative and synthesis never span the full panel. */
.pb-narr{margin:.55rem 0 .1rem}
.pb-narr-h{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--sem-neutral-fg);margin-bottom:var(--sp-2)}
/* "What happened" -- the verbatim claimant narrative. Given a subtle fill + a
   brand left-border + slightly larger text so it reads as primary-source
   evidence, clearly distinct from the AI synthesis (.pb-why) below it. */
.pb-quote{max-width:96ch;margin:0;padding:.4rem .65rem;border-left:3px solid var(--brand);
  background:var(--bg);border-radius:0 8px 8px 0;font-size:var(--fs-body);line-height:1.5;
  color:var(--ink);font-style:italic}
/* Verbatim client account -- labeled as the client's own words (owner), so it never
   reads as our synthesis. */
.pb-quote::before{content:"Client's words";display:block;font-style:normal;font-weight:800;
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.04em;
  color:var(--sub);margin-bottom:var(--sp-1)}
/* The AI distillation reads as clean prose (not the italic client quote); the raw
   account, when expanded, keeps the quoted-narrative styling below it. */
/* Readability: looser leading and a tight measure so the prose in the narrowed column
   stops clumping. On the tokens -- body size, established ink, no per-component hex. */
.pb-sum{max-width:62ch;font-size:var(--fs-section);line-height:1.7;color:var(--ink);font-weight:400}
/* Fact nuggets: bold anchor + one fact per line, the scannable form of the
   background. Sub-header uses the neutral-fg token (readable, not the faint --sub). */
.pb-nuggets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
/* Item 5b: each fact nugget is its own sub-card; Primary Weakness a warm amber callout. */
.pb-nug{font-size:var(--fs-body);line-height:1.5;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:9px;padding:.55rem .7rem;box-shadow:var(--shadow)}
.pb-nug.weak{background:var(--tint-weakness);border-color:var(--sem-urgent-bd);
  border-left:3px solid var(--amber)}
.pb-nug-k{display:block;font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;color:var(--sem-neutral-fg);margin-bottom:2px}
.pb-nug.weak .pb-nug-k{color:#9a5a12}
.pb-nug-t{display:block;color:var(--ink)}
.pb-fullnarr{margin-top:.45rem}
/* A long story is clamped to three lines; the toggle button reveals the rest. */
/* The claimant narrative is one of the most important things on the card, so it
   gets real room -- ~6 lines before the "Read full narrative" toggle appears. */
.pb-quote.clamp3{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.pb-morebtn{margin-top:.25rem;border:none;background:none;color:var(--ink);font:inherit;
  font-size:var(--fs-label);font-weight:700;cursor:pointer;padding:0;text-decoration:underline}

/* Row 2: What happened + synthesis, full width (no side column, so no gap when
   the risks run long). */
.pb-body{margin-top:.45rem}
.pb-body .pb-narr{margin-top:0}
@media (max-width:720px){.pb-cols{grid-template-columns:1fr}}

/* ===== Slice B: Zone 2 -- ONE repeating section style + one spacing scale ===== */
.pb-section{margin-top:.9rem}
.pb-section:first-of-type{margin-top:.5rem}
/* What Happened + Red Flags as a two-column row: Red Flags (stacked) left, the
   AI summary right, side by side. */
/* Equal-height two-column grid; the app font on both columns so they read as one
   system. align-items:stretch makes the columns the same height (bottoms align, and
   the divider spans the full height). */
.pb-happened-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);
  align-items:stretch;font-family:var(--sans)}
@media(max-width:640px){.pb-happened-row{grid-template-columns:1fr}}
.pb-happened-row .pb-section{margin-top:0}
.pb-happened-row .pb-hr-left,.pb-happened-row .pb-hr-right{min-width:0}
.pb-happened-row .pb-narr{margin:0}
/* Fixed-height column headers so BOTH columns start their first content line on the
   same pixel row, regardless of header wrapping. */
.pb-happened-row .pb-narr-h{min-height:1.1rem;margin-bottom:var(--sp-3)}
@media(max-width:640px){.pb-sw{grid-template-columns:1fr}}
@media(max-width:640px){.pb-facts-grid{grid-template-columns:repeat(2,1fr)}}
.pb-fact{border:1px solid var(--line);border-radius:8px;padding:.4rem .55rem;background:var(--bg);min-width:0}
.pb-fact-k{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  color:var(--sem-neutral-fg);margin-bottom:var(--sp-1)}
.pb-fact-v{font-size:var(--fs-body);font-weight:400;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Legal elements: element name (left) + a strength PILL pinned right (icon + label).
   The pill wears the enforced semantic tokens via .sem-* -- strong=green(complete),
   possible=amber(pending), weak & unconfirmed=gray(neutral). Red is never used here
   (reserved for urgent/destructive), so an unconfirmed non-issue can't read as a
   failure. Type/spacing on the tokens; body text on --ink; no per-component hex. */
/* Looser row rhythm (owner): the right column was a dense run of single lines vs the
   generously-spaced labeled blocks on the left -- sp-5 between rows balances them. */
/* Item 5c: a structured list -- clean row dividers + consistent padding (was a big gap),
   status pills stay right-aligned (le-top space-between). */
.le-list{display:flex;flex-direction:column}
.le-row{display:flex;font-size:var(--fs-section);padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line)}
.le-row:last-child{border-bottom:none}
.le-body{flex:1;min-width:0;display:flex;flex-direction:column}
/* align-items:flex-start so the pill sits at the FIRST line of a multi-line element,
   not floating in the vertical middle of a wrapped paragraph. */
.le-top{display:flex;align-items:flex-start;gap:var(--sp-2);justify-content:space-between}
/* This is the most important content on the screen (owner) -- bumped one step to
   fs-section so it is never the smallest text. Regular weight; the name is the anchor. */
.le-el{color:var(--ink);font-weight:400;min-width:0;line-height:1.5;font-size:var(--fs-section)}
.le-el-name{font-weight:700}   /* the element NAME (before the colon) -- the anchor */
.le-why{font-size:var(--fs-body);color:var(--sem-neutral-fg);line-height:1.45;margin-top:var(--sp-1)}
.le-pill{flex:none;display:inline-flex;align-items:center;gap:var(--sp-1);
  font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  border-radius:99px;padding:2px var(--sp-2);white-space:nowrap}
.le-pill-ic{font-weight:800;line-height:1}
/* Procedural (firm-side) elements sit apart from the graded merit list, under a
   quiet header, so a firm to-do never reads as a gap in the client's case. */
.le-proc{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px dashed var(--line)}
.le-proc-h{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--sub);margin-bottom:var(--sp-3)}
.le-proc .le-el{color:var(--sub)}
/* The What-Happened split: factual background | claim analysis, with a divider. */
.pb-happened-row .pb-hr-right{border-left:1px solid var(--line);padding-left:var(--sp-4)}
@media(max-width:640px){.pb-happened-row .pb-hr-right{border-left:none;padding-left:0;
  border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-2)}}
.pb-fact-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:2px}
.pb-fchip{font-size:var(--fs-label);background:var(--sem-neutral-bg);color:var(--sem-neutral-fg);
  border-radius:6px;padding:2px var(--sp-2);white-space:nowrap}
.pb-fchip-more{background:none;color:var(--sub);font-weight:600}

/* "What happened" pre-analysis state: a quiet placeholder for the attorney summary
   that generates on first analysis, instead of leading with the client's raw
   account. Dashed + muted reads as "pending", not "empty/broken". */
.pb-narr-pre{border:1px dashed var(--line);border-radius:8px;padding:var(--sp-2) var(--sp-3);
  background:var(--bg)}
.pb-presum{font-size:var(--fs-body);color:var(--sub);line-height:1.5;margin-top:var(--sp-1)}

/* #4 high-value flag -- a $250k+ case spottable at a glance. GREEN (the one
   positive/affirmative colour), not gold: the screen holds to ink + green + red. */
.pb-hival{display:inline-block;align-self:flex-start;margin-top:var(--sp-1);font-size:var(--fs-micro);
  font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--sem-complete-fg);
  background:var(--sem-complete-bg);border:none;border-radius:6px;padding:2px var(--sp-1)}
/* #2 Explain Score as a full-height RIGHT SLIDE-OVER with a dimmed backdrop --
   anchored to the viewport edge, not cut off under the header. */
.pb-explain[hidden]{display:none}     /* class-vs-[hidden] guard (recurring trap) */
/* #1 dimmed + BLURRED backdrop behind the edge-to-edge right slide-over. */
.pb-explain-back{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.pb-explain-panel{position:fixed;top:0;right:0;height:100vh;height:100dvh;
  width:min(640px,94vw);background:#fff;border-left:1px solid var(--line);
  box-shadow:-10px 0 30px rgba(0,0,0,.22);z-index:201;padding:0;
  overflow-y:auto;text-align:left;animation:pbSlideIn .16s ease-out}
@keyframes pbSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* #3 sticky header bar: title + score badge + close, higher contrast, stays put
   while the body scrolls. */
.pb-explain-hd{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:.55rem;
  background:#fff;padding:.85rem 1.05rem;border-bottom:2px solid var(--line)}
.pb-explain-title{font-size:var(--fs-body);font-weight:800;color:var(--ink)}
.pb-explain-score{font-size:var(--fs-body);font-weight:800;color:#fff;background:var(--ink);
  border-radius:8px;padding:.1rem .5rem;line-height:1.2}
/* #3 a bigger, squarer click target — easier to hit than a bare glyph. */
.pb-explain-x{margin-left:auto;border:none;background:none;cursor:pointer;color:var(--sub);
  font-size:var(--fs-section);line-height:1;display:flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;border-radius:8px;margin-right:-.35rem}
.pb-explain-x:hover{color:var(--ink);background:var(--wash,#f1f2f4)}
.pb-explain-body{padding:1rem 1.05rem 1.2rem}
/* #2 roomier: more line-height and spacing so the drawer doesn't feel cramped. */
.ex-sec{margin-bottom:1.2rem}
.ex-sec:last-child{margin-bottom:0}
.pb-explain .ex-k{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  color:var(--sub);margin:0 0 .5rem}
/* Each factor its own colored card: green support, amber uplift, red risk. */
.ex-card{font-size:var(--fs-body);line-height:1.55;color:var(--ink);border:1px solid var(--line);
  border-left-width:3px;border-radius:8px;padding:.55rem .7rem;margin-bottom:.5rem}
.ex-card:last-child{margin-bottom:0}
.ex-card b{color:var(--ink)}
.ex-card.ex-support{background:#eef7ef;border-color:#cfe6d1;border-left-color:var(--ok)}
.ex-card.ex-raise{background:#fdf6e3;border-color:#ecdcae;border-left-color:var(--amber)}
.ex-card.ex-cap{background:#fbe9e6;border-color:#f0c4bb;border-left-color:var(--red)}
/* Conditional caveats: hedged flags relocated from the Red Flags box. Muted and
   neutral -- reasoning to weigh, not an alarm. */
.ex-card.ex-caveat{background:var(--panel);border-color:var(--line);
  border-left-color:var(--sub);color:var(--sub)}
.ex-card.ex-caveat b{color:var(--ink)}
/* compact-row tone dot: the verdict at a glance without the line. */
.cv-dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block;flex:none;background:var(--sub)}
.cv-dot.strong{background:var(--ok)}
.cv-dot.review{background:var(--sem-new-fg)}   /* blue = worth attorney review (one tone map) */
.cv-dot.action{background:var(--amber)}
.cv-dot.risk,.cv-dot.decline{background:var(--red)}
.cv-dot.neutral{background:var(--line)}

/* #7 Morning Brief: a briefing, not a flat dashboard. Constrained width so cards
   don't stretch into empty space; the top case is the hero; deadlines read as
   urgency bands; pipeline health is one distribution bar. */
/* Widened to line up with the board/case tabs (was a narrow 820 card that left
   light gutters against the full-width nav). */
.mb-wrap{max-width:1180px;margin:0 auto;padding:1.2rem 1.4rem}
.mb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.mb-head h1{margin:0;font-size:var(--fs-title)}
.mb-k{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--sub);margin-bottom:.4rem}

/* Stats + pipeline health share the top row (owner: health pulled up next to the
   stats). Stats on the left at their content width, health taking the rest. */
.mb-topgrid{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:stretch;
  margin-bottom:.9rem}
@media(max-width:720px){.mb-topgrid{grid-template-columns:1fr}}
.mb-topgrid .mb-section,.mb-topgrid .mb-stats{margin-bottom:0}
.mb-topgrid .mb-health{display:flex;flex-direction:column;justify-content:center}

/* #6 metric cards: age-since-first-contact, portal signups, employment breakdown.
   Two small cards + one wide card, wrapping to one column on narrow screens. */
.mb-metrics{display:grid;grid-template-columns:1fr 1fr 2fr;gap:.9rem;margin-bottom:.9rem}
@media(max-width:860px){.mb-metrics{grid-template-columns:1fr}}
.mb-mcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem}
.mb-mcard .mb-sub{font-weight:400;text-transform:none;letter-spacing:0;color:var(--sub)}
/* age split bar */
.mb-agebar{display:flex;height:26px;border-radius:7px;overflow:hidden;background:var(--hover);margin-bottom:.5rem}
.mb-age-seg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--fs-label);font-weight:700}
.mb-age-seg.fresh{background:var(--ok)}
.mb-age-seg.mid{background:var(--amber);color:#3a2b00}
.mb-age-seg.old{background:var(--red)}
.mb-agelegend{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:var(--fs-label);color:var(--sub)}
.mb-agelegend b{color:var(--ink)}
.mb-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.35rem;vertical-align:baseline}
.mb-dot.fresh{background:var(--ok)}.mb-dot.mid{background:var(--amber)}.mb-dot.old{background:var(--red)}
/* portal ratio */
.mb-portal{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.5rem}
.mb-portal-big{font-size:var(--fs-display);font-weight:800;line-height:1;color:var(--brand)}
.mb-portal-slash{color:var(--sub);font-weight:700}
.mb-portal-sub{font-size:var(--fs-label);color:var(--sub)}
.mb-portal-bar{height:8px;border-radius:5px;background:var(--hover);overflow:hidden;margin-bottom:.3rem}
.mb-portal-fill{display:block;height:100%;background:var(--brand)}
.mb-portal-pct{font-size:var(--fs-micro);color:var(--sub);text-transform:uppercase;letter-spacing:.04em}
/* employment breakdown: two columns of icon-labeled bars */
.mb-mcard-wide .mb-wtgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:620px){.mb-mcard-wide .mb-wtgrid{grid-template-columns:1fr}}
.mb-wt-h{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--brand);margin-bottom:.35rem}
.mb-ibars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.mb-ibars li{display:grid;grid-template-columns:1.3rem minmax(0,7rem) 1fr 1.6rem;align-items:center;gap:.4rem}
.mb-ib-ic{font-size:var(--fs-body);text-align:center}
.mb-ib-label{font-size:var(--fs-label);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-ib-bar{height:9px;border-radius:5px;background:var(--hover);overflow:hidden}
.mb-ib-fill{display:block;height:100%;background:var(--brand);border-radius:5px}
.mb-ib-n{font-size:var(--fs-label);font-weight:700;color:var(--ink);text-align:right}
/* Stats: content-sized, not stretched full width. */
.mb-stats{display:flex;gap:.7rem;flex-wrap:wrap}
.mb-stat{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:.7rem .95rem;min-width:9rem}
button.mb-stat{cursor:pointer;text-align:left;font:inherit}
button.mb-stat:disabled{cursor:default;opacity:.7}
button.mb-decline:not(:disabled):hover{border-color:var(--red)}
.mb-stat-n{font-size:var(--fs-display);font-weight:800;color:var(--ink);line-height:1}
.mb-stat-k{font-size:var(--fs-label);color:var(--sub)}

.mb-section{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:.9rem 1rem;margin-bottom:.8rem}
.mb-list{margin:0;padding-left:1.1rem;font-size:var(--fs-label);color:var(--ink);line-height:1.5}
.mb-list .colempty{list-style:none;margin-left:-1.1rem}

/* Whiteboard: an actual cork-board of pinned sticky notes, not a form-and-feed
   card. Distinct sticky colours, a pushpin, a little scatter-rotation. */
.wb-card{background:#efe7d6;border:1px solid #d8ccb2;border-radius:12px;
  padding:.9rem 1rem 1.1rem;margin-bottom:.8rem;
  background-image:radial-gradient(rgba(140,120,86,.18) 1px, transparent 1px);
  background-size:14px 14px;box-shadow:inset 0 2px 12px rgba(90,72,40,.12)}
.wb-head{display:flex;align-items:center;margin-bottom:.5rem}
.wb-title{font-size:var(--fs-body);font-weight:800;color:#5a4a2a;letter-spacing:.01em}
.wb-post{display:flex;gap:.5rem;margin-bottom:1rem}
.wb-input{flex:1;min-width:0;font-family:inherit;font-size:var(--fs-label);color:var(--ink);
  border:1px solid #cbbd9e;border-radius:8px;padding:.45rem .65rem;background:rgba(255,255,255,.85)}
.wb-input:focus{outline:none;border-color:var(--brand);background:#fff}
.wb-post-btn{white-space:nowrap}

.wb-board{display:flex;flex-wrap:wrap;gap:1.15rem 1.25rem;align-items:flex-start}
.wb-note{position:relative;width:190px;min-height:112px;padding:.85rem .8rem .6rem;
  display:flex;flex-direction:column;color:#3a352b;border-radius:2px;
  box-shadow:0 4px 9px rgba(60,48,24,.22);transition:transform .12s ease,box-shadow .12s ease}
/* the pushpin */
.wb-note::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8a8a, #d23b3b 65%, #a92121);
  box-shadow:0 2px 3px rgba(0,0,0,.3)}
/* scatter: a few fixed tilts cycled by position -- on the THREAD, so the parent
   note and its edge-stuck replies tilt together as one pinned stack. */
.wb-thread:nth-child(4n+1){transform:rotate(-2.2deg)}
.wb-thread:nth-child(4n+2){transform:rotate(1.6deg)}
.wb-thread:nth-child(4n+3){transform:rotate(-.8deg)}
.wb-thread:nth-child(4n){transform:rotate(2.1deg)}
.wb-note:hover{transform:rotate(0) scale(1.04);box-shadow:0 8px 18px rgba(60,48,24,.28);z-index:50 !important}
.wb-note-body{flex:1;font-size:var(--fs-body);font-weight:600;line-height:1.32;white-space:pre-wrap;
  word-break:break-word}
.wb-note-meta{margin-top:.55rem;font-size:var(--fs-micro);color:rgba(0,0,0,.55);display:flex;
  flex-wrap:wrap;align-items:center;gap:.35rem .5rem}
.wb-author{font-weight:800}
.wb-when{opacity:.85}
.wb-case{font-family:inherit;font-size:var(--fs-micro);font-weight:800;color:#0b60c4;
  background:rgba(255,255,255,.5);border:none;border-radius:4px;padding:0 .25rem;cursor:pointer}
.wb-case:hover{text-decoration:underline}
.wb-clear{position:absolute;top:1px;right:5px;font-family:inherit;font-size:var(--fs-section);line-height:1;
  color:rgba(0,0,0,.3);background:none;border:none;cursor:pointer;padding:.1rem .2rem}
.wb-clear:hover{color:rgba(0,0,0,.65)}
/* A thread: the parent note, then its replies stacked linearly BELOW, each sitting
   ON TOP of the note above and overlapping its bottom EDGE only (the overlap is
   less than the card's bottom padding, so the note above keeps its author line
   visible). Reads as one connected chain; the newest reply is frontmost and carries
   the compose control. Each note keeps its own pushpin. */
.wb-thread{display:flex;flex-direction:column;width:190px;align-self:flex-start}
.wb-thread .wb-note{position:relative;padding-bottom:1rem}
.wb-thread .wb-note:not(:first-child){margin-top:-10px}
.wb-reply-note{width:174px;margin-left:14px;min-height:0;
  padding:.5rem .55rem 1rem;box-shadow:0 5px 12px rgba(60,48,24,.3);transform:rotate(-.5deg)}
.wb-reply-note:hover{transform:rotate(0) scale(1.02);z-index:50 !important}
.wb-reply-note .wb-note-body{font-size:var(--fs-label);flex:none}
.wb-reply-note .wb-note-meta{margin-top:.3rem}
.wb-reply-btn{margin-top:.45rem;align-self:flex-start;font-family:inherit;font-size:var(--fs-micro);
  font-weight:800;color:rgba(0,0,0,.55);background:rgba(255,255,255,.4);border:none;border-radius:4px;
  padding:.1rem .4rem;cursor:pointer}
.wb-reply-btn:hover{color:rgba(0,0,0,.8)}
.wb-reply-box{margin-top:.4rem;display:flex;flex-direction:column;gap:.3rem}
.wb-reply-input{width:100%;font-family:inherit;font-size:var(--fs-label);border:1px solid rgba(0,0,0,.2);
  border-radius:5px;padding:.3rem .4rem;background:rgba(255,255,255,.85)}
.wb-reply-send{align-self:flex-end;font-family:inherit;font-size:var(--fs-micro);font-weight:800;
  color:#fff;background:#6a5a2c;border:none;border-radius:5px;padding:.2rem .7rem;cursor:pointer}
.wb-reply-send:hover{filter:brightness(1.1)}
.wb-empty{width:100%;font-size:var(--fs-label);color:#7a6a48;font-style:italic;padding:.3rem .1rem}
/* Meetings-this-week: the week's actionable commitments -- given real prominence
   (green accent + emphasised header/time) so it reads as the day's key section, not
   just another card. NEW flag on last-24h bookings. */
/* Stripe rule (audit 2026-08-25): a coloured left stripe means URGENT (red,
   .mb-overdue) and nothing else. Meetings are information, not an alarm. */
.mb-section.mb-meetings{box-shadow:0 2px 10px rgba(20,24,28,.07)}
.mb-section.mb-meetings>.mb-k{font-size:var(--fs-label)}
.mb-meetlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.mb-meetlist li{display:flex;align-items:center;gap:.7rem;padding:.4rem .55rem;border-radius:8px;
  background:#fff;border:1px solid var(--line);font-size:var(--fs-body)}
.mb-meet-when{font-weight:700;color:var(--ink);white-space:nowrap;min-width:12rem}
.mb-meet-main{flex:1;color:var(--ink)}
.mb-meet-main b{margin-right:.3rem}
.mb-meet-badge{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  color:#fff;background:var(--green);border-radius:5px;padding:.1rem .4rem;white-space:nowrap}
.mb-meet-new{background:#eaf7ef;border-color:#bfe0c9;box-shadow:inset 3px 0 0 var(--green)}
/* Today's meetings stand out (owner #8): bold row + a solid ink TODAY badge. */
.mb-meet-today{box-shadow:inset 3px 0 0 var(--ink);border-color:var(--ink)}
.mb-meet-today .mb-meet-when{font-weight:800;color:var(--ink)}
.mb-today-badge{background:var(--ink)}
/* A self-booked below-bar meeting: real, on the calendar, but the case hasn't
   cleared the screening bar -- staff must review it, so it's amber, not green. */
.mb-meet-belowbar{box-shadow:inset 3px 0 0 var(--amber);border-color:#e5c07a}
.mb-belowbar-badge{background:var(--amber);color:#3a2a08}
.mb-newn{color:var(--green);font-weight:800}

/* Deadline warnings: urgency band, not raw red text. */
.mb-warn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.mb-warn li{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-label);padding:.25rem .5rem;
  border-left:3px solid var(--line);border-radius:0 6px 6px 0;background:var(--hover)}
.mb-warn li.over,.mb-warn li.stale{border-left-color:var(--red)}
.mb-warn li.soon{border-left-color:var(--amber)}
.mb-warn li.warn{border-left-color:var(--sub)}
.mb-due{font-weight:700;font-size:var(--fs-label);flex:none;min-width:5.5rem}
.mb-warn li.over .mb-due,.mb-warn li.stale .mb-due{color:var(--red)}
.mb-warn li.soon .mb-due{color:#a06d14}
.mb-w-main{flex:1;min-width:0}
.mb-ct{color:var(--sub);font-size:var(--fs-label)}
.mb-when{color:var(--sub);font-size:var(--fs-label);flex:none}/* Per-row "Review →": opens the case (the brief never mutates a legal clock). */.mb-open{flex:none;border:1px solid var(--line);background:#fff;border-radius:6px;
  font:inherit;font-size:var(--fs-micro);font-weight:700;color:var(--ink);padding:.15rem .5rem;cursor:pointer}.mb-open:hover{border-color:var(--ink);background:var(--hover)}
/* The Overdue / SOL group leads with a red header so it can't be mistaken for the
   amber list below it; the stuck-intakes group is amber (a nudge, not an alarm). */
.mb-overdue{border-left:3px solid var(--red)}
.mb-stuck{border-left:3px solid var(--amber)}
.mb-k-red{color:var(--red)}
.mb-more{list-style:none;color:var(--sub);font-size:var(--fs-micro);font-style:italic;padding:.1rem .5rem}

/* Pipeline-health distribution bar -- taller so the inline segment counts fit. */
.mb-bar{display:flex;height:22px;border-radius:7px;overflow:hidden;background:var(--hover);margin-bottom:.5rem}
.mb-seg{height:100%;display:flex;align-items:center;justify-content:center;min-width:0}
.mb-seg-n{font-size:var(--fs-micro);font-weight:800;color:#fff;line-height:1}
.mb-seg.action .mb-seg-n{color:#3a2b00}
/* Thin separator between adjacent segments (distinguishes two same-tone stages). */
.mb-seg-sep{box-shadow:inset 1.5px 0 0 var(--panel)}
/* Totals summary line -- distinct from the coloured stage legend below it. */
.mb-totals{font-size:var(--fs-label);color:var(--sub);margin-bottom:.35rem}
.mb-totals b{color:var(--ink);font-weight:800}
.mb-seg.urgent{background:var(--red)}
.mb-seg.action{background:var(--amber)}
.mb-seg.info{background:var(--blue)}
.mb-seg.healthy{background:var(--ok)}
.mb-seg.signed{background:var(--brand)}
.mb-seg.neutral{background:var(--sub)}
/* Per-stage distinct hues for the pipeline-health bar (owner: read as N segments,
   not 3). Six clearly-separated colours; categorical, so hard hex rather than the
   repeating semantic tokens. Portal (gold) keeps dark numerals for contrast. */
.mb-seg.sc-portal{background:#a8c6e8}
.mb-seg.sc-portal .mb-seg-n{color:#173f6e}
.mb-seg.sc-moreinfo .mb-seg-n{color:#173f6e}
.mb-seg.sc-moreinfo{background:#7fa9d9}
.mb-seg.sc-prescreen{background:#588cc9}
.mb-seg.sc-call{background:#3a71b3}
.mb-seg.sc-postcall{background:#265892}
.mb-seg.sc-retention{background:#173f6e}
.mb-legend{display:flex;flex-wrap:wrap;gap:.6rem;font-size:var(--fs-label);color:var(--sub)}
.mb-leg{display:flex;align-items:center;gap:.3rem}
.mb-dot{width:.6rem;height:.6rem;border-radius:2px;display:inline-block}
.mb-dot.urgent{background:var(--red)}
.mb-dot.action{background:var(--amber)}
.mb-dot.info{background:var(--blue)}
.mb-dot.healthy{background:var(--ok)}
.mb-dot.signed{background:var(--brand)}
.mb-dot.neutral{background:var(--sub)}
.mb-dot.sc-portal{background:#a8c6e8}
.mb-dot.sc-moreinfo{background:#7fa9d9}
.mb-dot.sc-prescreen{background:#588cc9}
.mb-dot.sc-call{background:#3a71b3}
.mb-dot.sc-postcall{background:#265892}
.mb-dot.sc-retention{background:#173f6e}

/* #16 saved-views control (in the board tools row). */
.savedviews{display:flex;align-items:center;gap:.35rem;margin-left:.4rem}
.savedviews .viewsel{font-size:var(--fs-label);padding:.22rem .4rem;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--ink);max-width:11rem}
.savedviews .btn.quiet{font-size:var(--fs-label);padding:.22rem .55rem}

/* #15 Triage drawer: right-hand slide-over over the board. Wider than the first
   cut (text was wrapping into narrow columns); sticky header + close/foot fixed,
   body scrolls; content in distinct labelled sections. */
.triage{position:fixed;inset:0;z-index:180;background:rgba(20,22,28,.5);
  display:flex;justify-content:flex-end}
.triage[hidden]{display:none}   /* hidden must win over display:flex (the overlay lesson) */
.triage-panel{width:min(58%,720px);min-width:420px;height:100%;background:var(--panel);
  border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.25);
  display:flex;flex-direction:column}
/* Sticky header anchor: name/case#/stage on the left, score badge on the right. */
.triage-head{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;
  border-bottom:1px solid var(--line);background:var(--panel)}
.triage-id{flex:1;min-width:0;display:flex;align-items:center;gap:.8rem;justify-content:space-between}
.tg-head-main{min-width:0}
.tg-name{font-size:var(--fs-section);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-meta{font-size:var(--fs-label);color:var(--sub);margin-top:.1rem}
.tg-cn{font-weight:600}
/* Verdict tier paired with the score in the header -- one tone map (review = blue). */
.tg-tier{font-size:var(--fs-body);font-weight:700;margin-top:.15rem;line-height:1.3}
.tg-tier.tone-strong{color:var(--ok)} .tg-tier.tone-review{color:var(--sem-new-fg)}
.tg-tier.tone-action{color:#a06d14} .tg-tier.tone-risk,.tg-tier.tone-decline{color:var(--red)}
.tg-tier.tone-neutral{color:var(--sub)}
.tg-next-line{font-size:var(--fs-body);color:var(--ink)}
.triage-close{flex:none;border:none;background:transparent;color:var(--sub);font-size:var(--fs-title);
  line-height:1;cursor:pointer;padding:.1rem .4rem;border-radius:6px}
.triage-close:hover{background:var(--hover);color:var(--ink)}
.triage-body{flex:1;overflow-y:auto;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.85rem}
.triage-foot{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;
  border-top:1px solid var(--line)}
.triage-hint{flex:1;text-align:center;font-size:var(--fs-micro);color:var(--sub)}
/* Decline reads as an intentional decision boundary against the primary
   "Open full case" button: a subtle red tint on hover. */
#triage-decline:hover{background:#fbe3de;border-color:var(--red);color:var(--red)}

/* Ask-first hero: the decision-driving question, the first thing the eye hits.
   Tinted background + a bold tone-coloured left stripe so it pops on open. */
.tg-ask{border:1px solid var(--line);border-left:5px solid var(--ink);border-radius:12px;
  padding:.85rem 1rem;background:#eef4fb}
.tg-ask.strong{border-left-color:var(--ok)} .tg-ask.action{border-left-color:var(--amber)}
.tg-ask.risk,.tg-ask.decline{border-left-color:var(--red)}
.tg-ask-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}
.tg-ask-actions{display:flex;gap:.35rem;flex-wrap:wrap}
.tg-send:hover{border-color:var(--ink);color:var(--ink)}
.tg-ask-k{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--sub)}
.tg-copy{border:1px solid var(--line);background:var(--panel);color:var(--sub);font-size:var(--fs-micro);
  font-weight:700;border-radius:7px;padding:.12rem .5rem;cursor:pointer;white-space:nowrap}
.tg-copy:hover{color:var(--ink);border-color:var(--ink)}
.tg-ask-q{font-size:var(--fs-section);font-weight:700;color:var(--ink);line-height:1.35}

.tg-sect{border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem;background:var(--panel)}
.tg-k{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--sub);margin-bottom:.45rem}
/* Supporting vs Working-against: a coloured underline accent on each header. */
.tg-k.good{color:var(--ok);border-bottom:2px solid var(--ok);padding-bottom:.2rem;display:inline-block}
.tg-k.bad{color:#a06d14;border-bottom:2px solid var(--amber);padding-bottom:.2rem;display:inline-block}
.tg-why{font-size:var(--fs-body);color:var(--sub);margin-top:.4rem;line-height:1.4}
.tg-cols{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;align-items:stretch}
@media (max-width:520px){.tg-cols{grid-template-columns:1fr}}
.tg-list{margin:0;padding-left:1.05rem;font-size:var(--fs-body);line-height:1.5}
.tg-list.good li{color:var(--ink)}
.tg-list.bad li{color:var(--ink)}
.tg-list.raise li{color:var(--ink);margin-bottom:.2rem}
.tg-empty{font-size:var(--fs-label);color:var(--sub);font-style:italic}
/* Decision-support disclaimer -- a persistent, quiet footer on the analysis views. */
.tg-foot-note,.ws-foot{font-size:var(--fs-micro);color:var(--sub);text-align:center;
  letter-spacing:.02em}
.tg-foot-note{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--line)}
.ws-foot{padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.tg-facts{display:flex;flex-wrap:wrap;gap:.5rem}
.tg-fact{display:flex;flex-direction:column;background:var(--hover);border-radius:8px;padding:.35rem .55rem;min-width:6rem}
.tg-fk{font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--sub)}
.tg-fv{font-size:var(--fs-body);color:var(--ink);font-weight:800}

/* --- modal ---------------------------------------------------------------- */
/* THE DROP DIALOG. The single most-used control once sorting starts, so it is
   built to look like it: a solid opaque panel, a real dimming backdrop, and
   the route options as clear selectable choices. */
.modalwrap {
  position:fixed; inset:0; background:rgba(20,24,28,.55);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
/* hidden MUST win. A bare `display:flex` on the class outranks the `hidden`
   attribute's low-specificity display:none, so without this the modal is
   visible on page load -- auto-opened, empty, greying the board. Same trap the
   board itself shipped with (.view{display:none} vs hidden); the attribute
   selector gives `hidden` the specificity to close it. */
.modalwrap[hidden] { display:none; }
.modal {
  background:#ffffff;               /* OPAQUE. Nothing bleeds through. */
  border:1px solid var(--line); border-radius:12px;
  padding:20px 22px; width:min(480px, 92vw);
  box-shadow:0 12px 40px rgba(20,24,28,.28);
  display:flex; flex-direction:column; gap:14px;
}
.modal h3 { margin:0; font-size:var(--fs-section); font-weight:600; color:var(--ink); }
.modal #drop-body { display:flex; flex-direction:column; gap:7px; }
/* Each route is a full-width selectable choice. */
.modal .moverow {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:11px 13px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--ink); font:inherit; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.modal .moverow:hover { background:var(--hover); border-color:var(--brand); }
/* The visible selected state, set when a reason-requiring choice is picked. */
.modal .moverow.sel {
  border-color:var(--brand); background:#f2f6e6;
  box-shadow:inset 3px 0 0 var(--brand);
}

/* Referral-partner picker: one row per partner (name · practice area · email),
   the picked one highlighted; Confirm stays disabled until a pick is made. */
.partner-list { display:flex; flex-direction:column; gap:7px; max-height:22rem; overflow:auto; }
.partner-row {
  display:grid; grid-template-columns:1fr auto; gap:2px 10px; width:100%; text-align:left;
  padding:9px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--ink); font:inherit; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.partner-row:hover { background:var(--hover); border-color:var(--brand); }
.partner-row.on { border-color:var(--brand); background:#f2f6e6; box-shadow:inset 3px 0 0 var(--brand); }
.partner-name { font-weight:700; color:var(--ink); }
.partner-area { grid-column:1; font-size:var(--fs-label); color:var(--sub); }
.partner-email { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:var(--fs-label); color:var(--brand); }
/* Manual decline menu — six reasons, the person declining picks. */
.decline-menu { display:flex; flex-direction:column; gap:7px; margin:.5rem 0 1rem; }
.decline-opt { text-align:left; display:flex; flex-direction:column; gap:2px; width:100%;
  padding:.6rem .8rem; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--ink); font:inherit; cursor:pointer;
  transition:border-color .12s, background .12s; }
.decline-opt:hover:not(:disabled) { border-color:var(--brand); background:var(--hover); }
.decline-opt:disabled { opacity:.5; cursor:not-allowed; }
.do-label { font-weight:700; color:var(--ink); font-size:var(--fs-body); }
.do-desc { font-size:var(--fs-label); color:var(--sub); }

/* Attorney referral write-up review modal: To, subject, editable body, send. */
.writeup-modal { max-width:660px; width:92vw; max-height:88vh; overflow-y:auto; }
.writeup-modal label { display:block; font-size:var(--fs-label); color:var(--sub); margin:.6rem 0 .2rem; }
/* Two-section referral review: ① client notice, ② partner write-up. */
.rr-section { border:1px solid var(--line); border-radius:9px; padding:.6rem .8rem; margin:.7rem 0; }
.rr-head { font-weight:700; color:var(--ink); font-size:var(--fs-body); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.rr-num { color:var(--brand); }
.rr-status { margin-left:auto; font-size:var(--fs-micro); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--sub); background:var(--hover); border-radius:999px; padding:.1rem .5rem; }
.rr-status.rr-sent { color:var(--ok); background:#e6f2e2; }
.rr-section .btn { margin-top:.6rem; }
.wu-to { font-size:var(--fs-label); color:var(--ink); background:var(--hover); border-radius:6px; padding:.35rem .6rem; }
.wu-to span { font-weight:700; }
.wu-subject { width:100%; font-family:inherit; font-size:var(--fs-body); color:var(--ink);
  border:1px solid var(--line); border-radius:7px; padding:.4rem .6rem; background:var(--bg); }
.wu-body { width:100%; font-family:inherit; font-size:var(--fs-label); color:var(--ink); line-height:1.5;
  border:1px solid var(--line); border-radius:8px; padding:.6rem; background:var(--bg); resize:vertical; }
.wu-subject:focus, .wu-body:focus { outline:none; border-color:var(--brand); }
.wu-hint { margin-top:.5rem; }
.modal .movereason { display:flex; flex-direction:column; gap:6px; }
.modal .movereason label { font-size:var(--fs-body); color:var(--muted); }
.modal textarea {
  width:100%; padding:9px 11px; font:inherit; color:var(--ink);
  background:#ffffff; border:1px solid var(--line); border-radius:8px;
  box-sizing:border-box; resize:vertical;
}
/* Buttons on their own row, spaced, never overlapping content. */
.modal .moveact { display:flex; gap:10px; justify-content:flex-end;
  border-top:1px solid var(--line); padding-top:12px; margin-top:2px; }

/* --- the pre-call brief ---------------------------------------------------- */
.ask { padding:8px 0; border-bottom:1px solid var(--line); }
.ask:last-child { border-bottom:0; }
/* Weight badges: C/H/M/L, most urgent reads hottest. */
.wt { font-size:var(--fs-label); font-weight:800; padding:1px 6px; border-radius:4px;
      min-width:16px; text-align:center; }
/* Red flags, tagged by severity. */
.flag { padding:8px 10px; border-radius:6px; margin:5px 0;
        border-left:3px solid var(--line); background:var(--bg); }
/* Deadline chips inside the brief. */
.dl { font-variant-numeric:tabular-nums; font-weight:600; }
.dl.exp { color:var(--red); }
.dl.urg { color:var(--amber); }
.dl.unk { color:var(--muted); font-style:italic; font-weight:400; }

/* --- post-screen review ("After the screen" tab) -------------------------
   Typography tuned to the pre-call brief (which reads well): body content at the
   brief's full size, weight 600, --ink -- NOT the cramped small type it launched
   with. In a condensed face (Roboto Condensed) sub-14px body is the readability
   problem; the primary line matches .asktext (1rem/600/ink), the secondary line
   matches .askwhy (~.85rem/muted) but with a touch more line spacing. Headers
   stay the .tcard h3 eyebrow, so the header/body weight hierarchy is explicit. */
.prov { font-size:var(--fs-body); color:var(--muted); font-style:italic;
        padding:6px 0 2px; }
/* The summary paragraph: comfortable reading measure. */
.psummary { font-size:var(--fs-section); line-height:1.6; color:var(--ink); }
/* The screener note entry. */
.snote textarea { width:100%; min-height:150px; font:inherit; font-size:var(--fs-body);
        line-height:1.55; padding:.65rem; border:1px solid var(--line);
        border-radius:6px; resize:vertical; color:var(--ink); background:#fff; }
.snote .snrow { display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.snstatus { font-size:var(--fs-body); color:var(--muted); }
.srcline { font-size:var(--fs-body); color:var(--muted); margin-top:8px; }
.srcline.ok { color:var(--ok); font-weight:600; }
/* Timeline entries. */
.tl { display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.tl:last-child { border-bottom:0; }
.tldate { min-width:96px; font-variant-numeric:tabular-nums; font-weight:600;
          color:var(--ink); font-size:var(--fs-body); }
.tldate.unk { color:var(--muted); font-style:italic; font-weight:400; }
.tlev { color:var(--ink); font-size:var(--fs-section); line-height:1.5; }
/* Evidence: in-hand vs missing as two side-by-side columns. */
.evgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .evgrid { grid-template-columns:1fr; } }
.evcol { border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.evcol.in { border-top:3px solid var(--ok); }
.evcol.miss { border-top:3px solid var(--red); }
.evcol-h { font-size:var(--fs-micro); font-weight:800; text-transform:uppercase; letter-spacing:.04em;
           color:var(--sub); margin-bottom:6px; display:flex; align-items:center; }
.evcol-n { margin-left:auto; background:var(--hover); border-radius:9px; padding:0 .45rem;
           font-size:var(--fs-micro); color:var(--sub); }
.evrow2 { display:flex; align-items:baseline; gap:8px; padding:5px 0; border-top:1px solid var(--line); }
.evcol .evrow2:first-of-type { border-top:0; }
.evitem { color:var(--ink); font-size:var(--fs-body); line-height:1.4; }
/* Source of the evidence, as a labeled chip. */
.evchip { margin-left:auto; white-space:nowrap; font-size:var(--fs-micro); font-weight:700;
          text-transform:uppercase; letter-spacing:.02em; border-radius:9px; padding:.05rem .45rem;
          background:var(--hover); color:var(--sub); border:1px solid var(--line); }
.evchip.who-claimant { background:var(--bg); color:#2b5cad; border-color:#cfe0f7; }
.evchip.who-employer { background:#fdf2e6; color:#9a5b12; border-color:#f0d9b8; }
.evchip.who-third_party { background:#f0eefb; color:#5a3ec8; border-color:#d9d2f3; }
/* Element strength per claim: strength shown as a color-coded left border, with
   the basis indented under the element header. */
.claimblk { padding:12px 0; border-bottom:1px solid var(--line); }
.claimblk:last-child { border-bottom:0; }
.claimname { font-weight:700; color:var(--ink); font-size:var(--fs-section); margin-bottom:8px; }
.elem { padding:6px 0 6px 12px; border-left:3px solid var(--line); margin:8px 0; }
.elem.str-supported { border-left-color:var(--ok); }
.elem.str-thin { border-left-color:var(--amber); }
.elem.str-unestablished { border-left-color:var(--red); }
.elemhead { display:flex; align-items:baseline; gap:9px; }
.elemname { font-weight:600; color:var(--ink); font-size:var(--fs-body); }
.st { font-size:var(--fs-micro); font-weight:800; text-transform:uppercase; letter-spacing:.03em;
      padding:1px 6px; border-radius:4px; white-space:nowrap; margin-left:auto; }
.st.supported { background:var(--ok); color:#fff; }
.st.thin { background:var(--amber); color:#3a2b00; }
.st.unestablished { background:var(--red); color:#fff; }
.elembasis { color:var(--muted); font-size:var(--fs-body); margin-top:4px; line-height:1.55; }
/* Worth-an-attorney-call verdict. */
.verdict { display:inline-block; font-weight:800; font-size:var(--fs-body);
           text-transform:uppercase; letter-spacing:.03em; padding:3px 9px;
           border-radius:4px; margin-bottom:8px; }
.verdict.yes { background:var(--ok); color:#fff; }
.verdict.no { background:var(--bg); color:var(--muted); border:1px solid var(--line); }
.prrow { display:flex; gap:9px; padding:8px 0; border-bottom:1px solid var(--line); }
.prrow:last-child { border-bottom:0; }
.prbox { color:var(--muted); font-size:var(--fs-section); }
.prrec { font-weight:600; color:var(--ink); font-size:var(--fs-section); }
.prwhere { color:var(--muted); font-size:var(--fs-body); }
.prwhy { color:var(--muted); font-size:var(--fs-body); margin-top:3px; line-height:1.5; }
.cv.dead { background:var(--bg); color:var(--muted); border:1px solid var(--line); }
/* Attorney gate override: the machine verdict is struck (kept, not removed), the
   attorney verdict sits beside it, and the reasoning shows under the claim. */
.claimact { display:flex; gap:6px; align-items:center; }
.cv.struck { text-decoration:line-through; opacity:.5; }
.cv.override { background:var(--brand); color:#fff; }
/* Full verdict palette: each decision its own colour. */
.cv-fast { background:#e6f2e2; color:var(--green); }
.cv-look { background:#fdf3e0; color:#a06d14; }
.cv-refer { background:#e4eefb; color:#2b5fb0; }
.cv-fail { background:#fbe3de; color:#b23524; }
.cv-inelig { background:var(--bg); color:var(--muted); border:1px solid var(--line); }
.ovreason { font-size:var(--fs-label); color:var(--brand); margin-top:.15rem; font-style:italic; }
/* #6 one disqualified-claim pattern: struck title + italic reason beside the pill. */
.claim-reason{font-size:var(--fs-label);color:var(--sub);margin-top:.1rem}
.claim-reason.dead{font-style:italic}
.claim-dead-name{text-decoration:line-through;color:var(--sub)}
.gate-override { font-size:var(--fs-micro); padding:.1rem .45rem; }
.deadclaims { margin-top:8px; }
.deadclaims summary {
  cursor:pointer; font-size:var(--fs-label); color:var(--muted); padding:6px 0;
  border-top:1px solid var(--line); user-select:none;
}
.deadclaims summary:hover { color:var(--ink); }
.deadclaims .claim { opacity:.72; }

/* --- documents: provenance badge + staff uploader -------------------------
 * The badge is the schema's uploaded_by_type made visible, and it must read at
 * a glance -- staff-obtained (firm work) and claimant-uploaded (portal) are
 * different provenance and never blur, the same principle as attribution. */
.prov { font-size:var(--fs-micro); font-weight:800; padding:1px 6px; border-radius:4px;
        margin-left:6px; text-transform:uppercase; letter-spacing:.03em;
        vertical-align:middle; }
.prov-staff  { background:#eef4e0; color:var(--brand-deep); }
.prov-client { background:#e7eefc; color:#2a5bb0; }
.prov-system { background:var(--bg); color:var(--muted); border:1px solid var(--line); }

.docup { border:1px solid var(--line); border-radius:8px; padding:.7rem .8rem;
         margin-bottom:.9rem; background:var(--bg); }
.docup-row { display:flex; gap:.5rem; align-items:center; margin-bottom:.5rem; }
.docup-row:last-of-type { margin-bottom:0; }
.docup-row input[type=text] { flex:1; }
.docup input, .docup select { font:inherit; font-size:var(--fs-body); padding:.4rem .5rem;
         border:1px solid var(--line); border-radius:6px; background:var(--card); }
.docup-note { font-size:var(--fs-label); color:var(--muted); margin-top:.5rem; line-height:1.4; }
.doc-dl { color:var(--brand-deep); text-decoration:none; font-weight:600; }
.doc-dl:hover { text-decoration:underline; }

/* --- journey tab: measured and self-reported touch tracks ----------------- */
.jnote { font-size:var(--fs-label); color:var(--muted); background:var(--bg);
         border:1px solid var(--line); border-radius:8px; padding:.6rem .8rem;
         margin-bottom:.9rem; line-height:1.5; }
.jrow { display:flex; gap:.7rem; padding:.45rem 0; border-top:1px solid var(--line); }
.jrow:first-of-type { border-top:0; }
.jwhen { font-size:var(--fs-label); color:var(--muted); min-width:104px;
         font-variant-numeric:tabular-nums; padding-top:2px; }
.jbody { flex:1; }
.jhead { font-size:var(--fs-body); font-weight:600; }
.jsub { font-size:var(--fs-label); color:var(--muted); margin-top:1px; word-break:break-all; }
.jclick { font-weight:600; color:var(--brand-deep); }
/* Provenance of a touch: live beacon vs. attribution from the intake record. */
.jprov { font-size:var(--fs-micro); font-weight:700; text-transform:uppercase;
         letter-spacing:.04em; padding:1px 5px; border-radius:3px; vertical-align:middle;
         color:var(--muted); background:var(--bg); border:1px solid var(--line); }
.jprov.beacon { color:var(--brand-deep); border-color:var(--brand); }
.arrow { display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .8rem;
         border:1px solid var(--line); border-radius:8px; margin-bottom:.5rem;
         background:var(--card); }
.arrow.on { border-color:var(--brand); box-shadow:inset 3px 0 0 var(--brand); background:#f6faec; }

/* --- board wayfinding: SEMANTIC accents per column ------------------------
   Colour means one thing everywhere: urgent (red), needs-action (yellow),
   informational/in-progress (blue), healthy/done (green). Failed Gate is red. */
:root {
  --acc-urgent:var(--red); --acc-action:var(--amber);
  --acc-info:var(--ink); --acc-healthy:var(--ok);
}
.col[data-accent="urgent"]  { --acc:var(--acc-urgent); }
.col[data-accent="action"]  { --acc:var(--acc-action); }
.col[data-accent="info"]    { --acc:var(--acc-info); }
.col[data-accent="healthy"] { --acc:var(--acc-healthy); }
.col[data-accent] .colhead {
  border-top:3px solid var(--acc);
  border-top-left-radius:8px; border-top-right-radius:8px;
}
.col[data-accent] .colhead .t { color:var(--acc); font-weight:800; }
.cicon { margin-right:.35rem; font-size:.95em; }
/* Card echoes its column's accent as a quiet left border -- placement, not paint. */
.deal[data-accent="urgent"]  { border-left:3px solid var(--acc-urgent); }
.deal[data-accent="action"]  { border-left:3px solid var(--acc-action); }
.deal[data-accent="info"]    { border-left:3px solid var(--acc-info); }
.deal[data-accent="healthy"] { border-left:3px solid var(--acc-healthy); }

/* --- exit drop bar: the off-column moves, revealed while dragging --------- */
#exit-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; gap:1rem; justify-content:center; padding:1rem 1.5rem 1.4rem;
  background:linear-gradient(to top, rgba(20,22,26,.14), transparent);
  opacity:0; transform:translateY(12px); transition:opacity .14s, transform .14s;
  pointer-events:none;
}
#exit-bar.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.exitzone {
  flex:0 1 320px; display:flex; align-items:center; justify-content:center;
  gap:.5rem; padding:1.1rem 1rem; border-radius:12px; font-weight:800;
  font-size:var(--fs-section); border:2px dashed; background:var(--card); cursor:copy;
  box-shadow:var(--shadow); transition:transform .1s, background .1s;
}
.exithint { font-weight:500; font-size:var(--fs-label); opacity:.8; }
.exiticon { font-size:var(--fs-section); }
#exit-decline { color:#b23327; border-color:#d9584a; }
#exit-decline.over { background:#fbe9e6; transform:scale(1.03); border-style:solid; }
#exit-refer { color:#3f6088; border-color:#5f80a8; }
#exit-refer.over { background:#e9effb; transform:scale(1.03); border-style:solid; }

/* --- the decline pile: story-first scan rows + expand-to-card ------------- */
.dpwrap { max-width: 900px; margin: 0 auto; padding: 1rem 0; }

/* Decline Archive: a search box + a flat result list. */
.da-search { margin: .6rem 0 1rem; }
#da-q { width: 100%; font-family: inherit; font-size: var(--fs-body); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: .6rem .8rem; background: var(--bg); }
#da-q:focus { outline: none; border-color: var(--brand); }
.da-count { font-size: var(--fs-label); color: var(--sub); margin-bottom: .5rem; }
.da-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.da-row { display: grid; grid-template-columns: 1fr 1fr auto auto auto; align-items: center; gap: .8rem;
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.da-row:hover { border-color: var(--brand); background: var(--hover); }
.da-name { font-weight: 700; color: var(--ink); }
.da-email { color: var(--sub); font-size: var(--fs-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-cn { color: var(--sub); font-size: var(--fs-label); }
.da-open { white-space: nowrap; }
.da-more { margin-top: .6rem; font-size: var(--fs-label); color: var(--sub); font-style: italic; }
/* Closed-case status badge — a retained client must read differently from a
   decline at a glance. Colours reuse the semantic tokens. */
.da-status { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.da-st-won { background: #e6f2e2; color: var(--ok); }
.da-st-declined { background: #f7e7e4; color: var(--red); }
.da-st-referred { background: #fdf0dc; color: #8a5a12; }
.da-st-neutral { background: var(--hover); color: var(--sub); }

/* Beyond the Board tab strip (owner 2026-09-03). Rendered into TWO places --
   #bb-tabs on this view, #bb-tabs-mon at the top of the separate Monitoring
   view -- so the four read as one destination regardless of which underlying
   view is actually showing (Monitoring keeps its own view + click-handling
   untouched; this strip is how it cross-navigates to the other three). */
.bb-tabs { display: flex; gap: .4rem; margin: .8rem 0 1.2rem; border-bottom: 1px solid var(--line);
  padding-bottom: .6rem; flex-wrap: wrap; }
.bb-tab { font: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--sub);
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: .4rem .9rem; cursor: pointer; }
.bb-tab:hover { background: var(--hover); color: var(--ink); }
.bb-tab.on { background: var(--brand); color: #fff; }
.bb-n { font-size: var(--fs-micro); font-variant-numeric: tabular-nums; opacity: .85; }

/* The recent-300 lists above the search, and the search itself -- both reuse
   .da-* (same row shape, same status colours), so only this heading + spacing
   is new. */
.bb-search { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.bb-search h3 { margin: 0 0 .2rem; font-size: var(--fs-section); }

/* Retained tab (owner 2026-09-03): claim type, lead source, self-reported
 * source, retention date -- each labeled, unlike the compact single-line
 * .da-row the other three tabs use. A card, not a row: there is more here
 * than a name and a date, and an Un-retain action that needs its own room to
 * not be an accidental click next to Open. */
.bb-retained-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: .6rem; }
.bb-retained-row { border: 1px solid var(--line); border-radius: 10px;
  padding: .8rem .9rem; background: var(--panel); }
.bb-retained-top { display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; margin-bottom: .6rem; }
.bb-retained-fields { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: .6rem 1rem; margin-bottom: .7rem; }
.bb-field { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.bb-field-lbl { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--sub); }
.bb-field-val { font-size: var(--fs-body); color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bb-retained-act { display: flex; gap: .5rem; justify-content: flex-end;
  border-top: 1px dashed var(--line); padding-top: .6rem; }
@media (max-width: 800px) {
  .bb-retained-fields { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
}

/* Migrations status page. */
.mig-k { font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: .05rem .35rem; border-radius: 5px; margin: 0 .1rem; }
.mig-k.needs { background: #fbe9d0; color: #8a5010; }
.mig-k.held { background: #e7e2f5; color: #4b3a86; }
.mig-summary { margin: .4rem 0 .8rem; padding: .5rem .7rem; border-radius: 8px; font-weight: 700; }
.mig-summary.needs { background: #fbe9d0; color: #8a5010; border: 1px solid #e6c79a; }
.mig-listing { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.mig-row { display: grid; grid-template-columns: 3rem 8.5rem 1fr; align-items: center; gap: .6rem;
  padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.mig-num { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mig-badge { font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  text-align: center; padding: .1rem .35rem; border-radius: 5px; }
.mig-badge.needs { background: #f2a93b; color: #3a2400; }
.mig-badge.held { background: #7b5ea7; color: #fff; }
.mig-badge.ok { background: var(--ok); color: #fff; }
.mig-badge.np { background: var(--line); color: var(--sub); }
.mig-desc { font-size: var(--fs-label); color: var(--sub); }

/* Page wrapper for the wide, table-shaped views (Settlements). Kept from the
   removed Decline table, which is where it was introduced. */
.dtwrap { max-width: 1200px; margin: 0 auto; padding: 1rem 0; }
.dpbar { position:sticky; top:0; z-index:5; display:flex; gap:.6rem; align-items:center;
         background:var(--card); border:1px solid var(--line); border-radius:8px;
         padding:.55rem .8rem; margin-bottom:.7rem; box-shadow:var(--shadow); }
.dpbar #dp-selected { font-weight:700; font-size:var(--fs-body); white-space:nowrap; }
.dpbar input[type=text] { flex:1; font:inherit; font-size:var(--fs-body); padding:.45rem .6rem;
         border:1px solid var(--line); border-radius:6px; background:var(--bg); }
.dpick { padding-top:2px; } .dpick-none { width:14px; display:inline-block; }

/* §7 three-column scan row: name | case type + plain description | actions.
   Metadata clutter (score/channel/nom/ceiling) intentionally removed from the
   row and kept in the expanded card. */
.drow3 { display:grid; grid-template-columns:minmax(140px,220px) 1fr auto; gap:1rem;
  align-items:center; padding:.55rem .85rem; border-bottom:1px solid var(--line); background:var(--card); }
.drow3:hover { background:#f6faec; }
.drow3.on { box-shadow:inset 3px 0 0 var(--brand); background:#f6faec; }
.dcol-name { display:flex; align-items:center; gap:.5rem; min-width:0; }
.dcol-name .dname { font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dcontact-inline { font-size:var(--fs-label); color:var(--sub); }
.dcol-sum { min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem; }
.dcol-sum .dtype { font-size:var(--fs-label); font-weight:600; color:var(--brand); white-space:nowrap; }
/* Summary: up to 3 full lines (no mid-word single-line chop), click to expand to
   the complete text in place. Its own row under the cause-of-action. */
.dcol-sum .ddesc { flex-basis:100%; font-size:var(--fs-body); color:var(--ink); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer;
  max-width:75ch; }
.dcol-sum .ddesc.expanded { -webkit-line-clamp:unset; }
.dcol-sum .ddesc:hover { color:var(--brand-deep); }
.dcol-act { display:flex; gap:.4rem; justify-content:flex-end; align-items:center; }
/* Move (owner 2026-09-04): a small native disclosure, not a JS-driven popover --
   position:relative/absolute is the only new mechanism, so it can never desync
   from open/closed state the way a manually-toggled class could. */
.dpmove { position:relative; }
.dpmove > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; }
.dpmove > summary::-webkit-details-marker { display:none; }
.dpmove > summary::marker { content:""; }
.dpmove-menu { position:absolute; right:0; top:100%; margin-top:.3rem; z-index:20;
  display:flex; flex-direction:column; gap:.3rem; padding:.4rem;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow-lift); min-width:11rem; }
.dpmove-menu .btn { white-space:nowrap; }
/* Passed / Failed, unconnected to the rest of the row (owner 2026-09-03: "two
   new sections unconnected to the other info on the case"). Its own full-width
   strip under the 3-column grid -- grid-column spans every column so it never
   fights the name/summary/action widths above it -- with a visible top rule so
   it reads as its own section, not a continuation of the summary. */
.dgatequick { grid-column: 1 / -1; display:flex; gap:.6rem; margin-top:.4rem;
  padding-top:.4rem; border-top:1px dashed var(--line); }
.dgq { flex:1 1 0; min-width:0; display:flex; align-items:baseline; gap:.4rem;
  padding:.2rem .55rem; border-radius:6px; }
.dgq-lbl { font-size:var(--fs-micro); font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; white-space:nowrap; }
.dgq-txt { font-size:var(--fs-label); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; min-width:0; }
.dgq-pass { background:var(--sem-complete-bg); }
.dgq-pass .dgq-lbl { color:var(--sem-complete-fg); }
.dgq-pass .dgq-txt { color:var(--sem-complete-fg); }
.dgq-fail { background:var(--sem-urgent-bg); }
.dgq-fail .dgq-lbl { color:var(--sem-urgent-fg); }
.dgq-fail .dgq-txt { color:var(--sem-urgent-fg); }
/* One-click decline button: deliberate but not alarming; goes muted+busy while
   the request is in flight. Attorney-only; disabled reads as unavailable. */
/* Decline: a solid, high-contrast red button (was red text on the .btn green
   default -- unreadable). White on #c0492f reads at a glance; darker red on hover. */
.dp-decline { background:#c0492f; color:#fff; border-color:#a23a24; font-weight:700; }
.dp-decline:hover:not(:disabled) { background:#a23a24; color:#fff; }
.dp-decline:disabled { opacity:.45; cursor:not-allowed; }
/* Transient confirmation after a one-click decline (the row is gone, so the
   reviewer needs a beat of feedback). Bottom-center, auto-dismisses. */
.dp-toast { position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%,1rem);
  background:var(--ink); color:#fff; font-size:var(--fs-body); padding:.6rem 1rem;
  border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.25); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:9000; }
.dp-toast.show { opacity:1; transform:translate(-50%,0); }
.dstory { font-size:var(--fs-section); color:var(--ink); line-height:1.4; }
.dstory.big { font-size:var(--fs-section); font-weight:600; }
/* Fact-composed summary (no free-text story): plain, not quoted, clearly a
   digest rather than the claimant's own words. */
.dstory.factsum { color:var(--ink); font-style:normal; font-size:var(--fs-body); }
.dwhy { font-size:var(--fs-body); color:var(--red); font-weight:600; margin-top:.3rem; }
.dwhy.big { margin-top:.5rem; font-size:var(--fs-body); }
/* Decline cards: the REASON is the headline scan-line now (owner ruling), the
   claimant's story demoted into a fold. Ink, not red -- it is the primary text,
   not an alarm accent. */
.dwhy.headline { color:var(--ink); font-weight:700; font-size:var(--fs-body); line-height:1.45; margin-top:.15rem; }
.dwhy.headline.big { font-size:var(--fs-section); }
.dstory-fold { margin-top:.6rem; }
.dstory-fold>summary { font-size:var(--fs-micro); font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--sub); cursor:pointer; list-style:none; }
.dstory-fold>summary::-webkit-details-marker { display:none; }
.dstory-fold>summary::before { content:"▸ "; }
.dstory-fold[open]>summary::before { content:"▾ "; }
.dstory-fold .dstory { margin:.4rem 0 0; font-size:var(--fs-body); color:var(--sub);
  border-left-color:var(--line); }
/* Name line above the story on a decline row. A nameless case reads as a clear
   placeholder, never a bare phone number pretending to be a name. */
.dname { font-weight:700; font-size:var(--fs-body); color:var(--ink); margin-bottom:.15rem; }
.dname .noname { font-weight:600; color:var(--muted); font-style:italic; }
/* Factual-background one-liner: what the case IS, so a row is judgeable without
   opening it. One line in the collapsed row (ellipsis; full text on hover);
   wraps in the expanded card. */
.dsum { font-size:var(--fs-label); color:var(--sub); line-height:1.4; margin:.05rem 0 .1rem;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.dsum.big { white-space:normal; font-size:var(--fs-body); color:var(--ink); }
.dwho .noname { font-weight:600; color:var(--muted); font-style:italic; }
/* Score badge (owner ruling): 80-100 deep green, 50-79 amber, 0-49/gate-fail
   subtle grey. The number is a solid chip so it reads at a glance in a scan. */
.sbadge { display:inline-block; font-weight:800; font-size:var(--fs-label); min-width:1.5rem;
  text-align:center; padding:.05rem .4rem; border-radius:5px; color:#fff; }
.sbadge.hi { background:var(--ok); }
.sbadge.mid { background:var(--amber); }
.sbadge.lo { background:#cfd4d8; color:var(--ink); }
/* Verdict word: >70 strong, 50-70 too close, <50 just low. Coarser than the
   badge and kept separate so a gate-failed case shows neither. */
.svrd { font-size:var(--fs-micro); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  margin-left:.3rem; }
.svrd.strong { color:var(--ok); }
.svrd.close { color:var(--amber); }
.svrd.low { color:var(--muted); }
.dmeta { font-size:var(--fs-label); color:var(--muted); margin-top:.35rem; }

/* The expanded card: the judgment block ABOVE the letter, always. */
.dcard { border:1px solid var(--brand); border-radius:10px; margin-bottom:.6rem;
         background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
.djudge { padding:.9rem 1rem; background:#fafcf5; border-bottom:1px solid var(--line); }
.djrow { display:flex; gap:.8rem; align-items:center; margin-top:.5rem; font-size:var(--fs-label); }
.djrow .dclaim { font-weight:700; } .djrow .dscore { color:var(--muted); font-variant-numeric:tabular-nums; }
.djrow .dsource { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.03em;
         background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 6px; color:var(--muted); }
/* The letter is a COLLAPSED section by default -- staff read their own template
   rarely, so it must not drown the case summary. [hidden] wins over the block. */
.dletter { padding:.9rem 1rem; border-top:1px solid var(--line); background:#fbfcf8; }
.dletter[hidden] { display:none; }
.dletter-head { display:flex; justify-content:space-between; align-items:center;
         font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.06em; color:var(--sub);
         font-weight:700; margin-bottom:.5rem; }
.dletter-subj { font-weight:700; font-size:var(--fs-body); margin-bottom:.4rem; }
/* Rendered HTML now, not escaped source: normal flow, real paragraph spacing. */
.dletter-body { font-size:var(--fs-body); line-height:1.55; white-space:normal; color:var(--ink);
         border:1px solid transparent; border-radius:6px; padding:.3rem; }
.dletter-body p { margin:0 0 .6em; }
.dletter-body p:last-child { margin-bottom:0; }
.dletter-body.editing { border-color:var(--brand); background:#fffef8; padding:.5rem; }
.dcardact { display:flex; gap:.5rem; padding:.7rem 1rem 1rem; flex-wrap:wrap; }

/* Best-available identity + honest empty states (owner: judge in one second). */
.dwho { font-weight:700; font-size:var(--fs-section); color:var(--ink); }
.dstory.muted { color:var(--muted); font-weight:400; font-style:normal; }
.dcontact { font-size:var(--fs-label); color:var(--muted); margin-top:.4rem; }
.djrow .ddate { color:var(--muted); font-variant-numeric:tabular-nums; }

/* --- drag legibility + locked-selection styling (owner, live board) ------- */
/* Sticky column headers: stay visible while scrolling a tall column, so the
   lane identity is never scrolled off while sorting.
   top:0, NOT 54px: `.pipe` has overflow-x:auto, so overflow-y computes to auto
   and .pipe -- not the viewport -- is the scroll container the header sticks to.
   .pipe already sits below the 54px nav, so a 54px offset stuck the header down
   INTO the column, overlapping the first card (the clipped top row). top:0
   sticks it at the top of the pipe, where it belongs. */
.colhead { position: sticky; top: 0; z-index: 6; }
/* Mid-drag, each column header goes SOLID in its own accent colour -- the lanes
   stop being anonymous the moment a card is moving -- and the one under the
   cursor outlines darkly as the live target. */
body.dragging .col[data-accent] .colhead { background: var(--acc); border-color: var(--acc); }
body.dragging .col[data-accent] .colhead .t,
body.dragging .col[data-accent] .colhead .s,
body.dragging .col[data-accent] .colhead .chealth,
body.dragging .col[data-accent] .colhead .cicon { color: #fff; }
body.dragging .col.over .colhead { outline: 3px solid var(--ink); outline-offset: 2px; }
body.dragging .colbody { background: rgba(0,0,0,.015); border-radius: 0 0 8px 8px; }

/* A LOCKED selection is not an input. When a move is chosen (or auto-armed as
   the only option), it wears a checkmark and reads as a committed choice, not a
   green text box you might try to type in. */
.modal .moverow.sel::before {
  content: "\2713"; color: var(--brand); font-weight: 900; margin-right: 2px;
}
.modal .moverow.sel { cursor: default; font-weight: 600; }

/* Fills the .modal shell (width:min(480px,92vw)); fields stretch to it, exactly
   as the drop dialog's rows do. */
.ncform { display: flex; flex-direction: column; gap: .6rem; }
.ncform label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size:var(--fs-label); font-weight: 600; color: var(--sub);
}
.ncform input, .ncform select, .ncform textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem;
  font: inherit; font-size:var(--fs-body); color: var(--ink); background: #fff;
}
.ncform textarea { resize: vertical; }
.ncform input:focus, .ncform select:focus, .ncform textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 1px;
}
/* #9 system alerts render as a dismissible top-of-page banner (below the nav),
   not inline above the tabs -- so they never stack with the bottom-right
   floating panels. Click anywhere on the banner to dismiss. */
.ncerr {
  position: fixed; top: 54px; left: 0; right: 0; z-index: 41;
  background: #fbe9e6; color: #b23327; border-bottom: 1px solid #e9c3bc;
  padding: .55rem 6.5rem .55rem 1.4rem; font-size:var(--fs-body); font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.ncerr::after {
  content: "✕ dismiss"; position: absolute; right: 1.4rem; top: 50%;
  transform: translateY(-50%); font-size:var(--fs-label); font-weight: 700; opacity: .7;
}
.ncerr[hidden] { display: none; }

/* Password + authenticator sign-in (replaces magic-link). */
.mfa-qr { width:180px; height:180px; border:1px solid var(--line); border-radius:8px;
          background:#fff; margin:.5rem auto; display:block; }
#mfa-secret { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:var(--fs-label);
              background:var(--bg); padding:.1rem .35rem; border-radius:4px; }
#mfa-code { text-align:center; letter-spacing:.35em; font-size:var(--fs-section); }

/* Human-only gut channels on the card: priority star (top-right) + vibes face
   (left of the score). Set on the case screen; the card only displays them. */
.deal{position:relative}
.deal .star{position:absolute;top:.5rem;right:.5rem;font-size:var(--fs-section);line-height:1;color:#e0a500}

/* Case-screen gut controls: priority star toggle + vibes faces. */
.gutbtn{background:none;border:1px solid var(--line);border-radius:8px;font-size:var(--fs-section);line-height:1;padding:.3rem .5rem;cursor:pointer;color:var(--sub)}
.gutbtn.on{color:#e0a500;border-color:#e0a500}
.vibeset{display:inline-flex;gap:.2rem;margin-left:.3rem}
/* Clearly a set of toggle buttons: bordered at rest, lifting on hover, ringed
   when chosen -- so it reads as clickable, not as decoration. */
.vibebtn{position:relative;background:none;border:1px solid var(--line);border-radius:8px;font-size:var(--fs-section);line-height:1;padding:.25rem .45rem;cursor:pointer;filter:grayscale(.75);opacity:.5;transition:transform .08s ease, opacity .1s, background .1s}
.vibebtn:hover{opacity:1;filter:grayscale(.1);background:var(--hover);transform:scale(1.12)}
/* Selected vibe: unmistakable -- full colour, a ring, a lift, and a check badge. */
/* Selected vibe: ringed in blue -- vibes are an INFORMATIONAL read, not a
   health/urgency signal, so it takes the info colour, not green. */
.vibebtn.on{filter:none;opacity:1;border-color:var(--ink);background:#eaf1fb;box-shadow:0 0 0 2px var(--ink);transform:scale(1.08)}
.vibebtn.on::after{content:"✓";position:absolute;top:-6px;right:-6px;width:14px;height:14px;
  background:var(--ink);color:#fff;font-size:var(--fs-micro);font-weight:800;border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1}
/* Empty-state hint label before the faces when none is set. */
.vibeset::before{content:"Vibes:";font-size:var(--fs-micro);color:var(--sub);font-weight:600;align-self:center;margin-right:.15rem}

/* Score-ceiling verdict: card chip, case-screen line, scan-row text. */
.ceil{font-size:var(--fs-label);margin-left:.15rem;line-height:1}
.ceil.up{color:var(--ok)}
.ceil.cap{color:var(--muted)}
.ceilline{margin-top:.5rem;font-size:var(--fs-label);font-weight:600;line-height:1.35}
.ceilline.up{color:var(--ok)}
.ceilline.cap{color:var(--muted)}
.qhint{margin-top:.6rem;font-size:var(--fs-label);color:var(--sub)}/* Per-column score-sort toggle in the header. In-flow (below the summary) so it
   never collides with the absolute New-case button on Needs Review. */
.sortsel{margin-top:.4rem;border:1px solid var(--line);background:#fff;border-radius:6px;
         font:inherit;font-size:var(--fs-micro);color:var(--sub);padding:.12rem .45rem;cursor:pointer}
.sortsel.on{border-color:var(--brand);color:var(--brand-deep);font-weight:600}
.crow-screen{font-size:var(--fs-micro);font-weight:700;border-radius:4px;padding:.05rem .3rem}
.crow-screen.decide{background:#fdf3e0;color:#a06d14}
.crow-screen.unscreened{background:var(--hover);color:var(--sub)}
/* #1 meeting/scheduling badge on the card -- scannable from the board at a glance:
   green = booked (shows date+time), blue = screen held, amber = invite sent. */
.cmeet{font-size:var(--fs-micro);font-weight:700;border-radius:5px;padding:.08rem .34rem;
  white-space:nowrap;display:inline-flex;align-items:center;gap:.15rem}
.cmeet.booked{background:#d9f0e2;color:var(--green)}
.cmeet.held{background:#e3edfb;color:#2a5db0}
.cmeet.sent{background:#fdf3e0;color:#a06d14}/* TIME-BARRED stamp: loud red on the score, card, and scan row -- so the case
   is never glanced past. The score is kept for review; the red is the warning. */


.solbadge{display:inline-block;background:var(--red);color:#fff;font-size:var(--fs-micro);font-weight:800;
          letter-spacing:.05em;text-transform:uppercase;padding:.15rem .5rem;border-radius:4px;
          margin:.1rem 0 .35rem}
/* #47: same impossible-to-miss red stamp as SOL PASSED, for a case where no
   claim survived the gates. Compact-row variant matches .crow-sol. */
.crow-noclaim{font-size:var(--fs-micro);font-weight:800;color:#fff;background:var(--red);border-radius:4px;padding:.05rem .3rem}

/* Intake Transcript module — the raw form Q&A staff read on the case screen.
   Design tokens only (case-screen standard). */
.itx { display: flex; flex-direction: column; gap: var(--sp-3); }
.itx-row { padding-left: var(--sp-3); border-left: 2px solid var(--line); }
.itx-q { font-size: var(--fs-label); color: var(--sub); margin-bottom: var(--sp-1); }
.itx-a { font-size: var(--fs-body); color: var(--ink); white-space: pre-wrap; }
.itx-none { color: var(--sub); font-style: italic; }
/* Recovered later from Typeform's Responses API -- not in the original
   submission (owner 2026-09-03). A quiet inline tag, not a loud badge: the
   answer itself is the point, this is provenance for whoever needs it. */
.itx-recovered { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--sem-pending-fg); background: var(--sem-pending-bg);
  padding: 1px 6px; border-radius: 999px; margin-left: .4rem; white-space: nowrap; }
.itx-when { font-size: var(--fs-label); color: var(--sub); font-weight: 400; }
.itx-note { font-size: var(--fs-body); color: var(--sub); }

/* Screener Notes module — a PERSON's read, deliberately distinct from AI facts.
   A warm-gold accent + speech icon signal human judgment (valuable insight the
   system can't produce), never a verified fact. Tokens + one local warm accent. */
.tcard.screener { --scr-accent:#b8860b; border-left:3px solid var(--scr-accent); }
.tcard.screener h3 { color:var(--scr-accent); }
.scr-sub { font-size:var(--fs-label); color:var(--sub); margin:var(--sp-1) 0 var(--sp-4); line-height:1.45; }
.scr-lb { display:block; font-size:var(--fs-label); color:var(--ink); font-weight:600; margin:var(--sp-3) 0 var(--sp-2); }
.scr-hint { font-weight:400; color:var(--sub); }
.scr-vibes { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2); }
.scr-vibes .scr-lb { margin:0; }
.scr-vibeset { display:inline-flex; gap:var(--sp-1); }
.scr-vibe, .scr-tag { cursor:pointer; border:1px solid var(--line); background:var(--card); border-radius:999px; line-height:1; }
.scr-vibe { padding:var(--sp-1) var(--sp-2); font-size:var(--fs-section); filter:grayscale(.4) opacity(.55); }
.scr-vibe.on { filter:none; border-color:var(--scr-accent); background:#fdf6e3; }
.scr-tags { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.scr-tag { padding:var(--sp-1) var(--sp-3); font-size:var(--fs-label); color:var(--sub); }
.scr-tag.on { color:#7a5c00; border-color:var(--scr-accent); background:#fdf6e3; font-weight:600; }
.scr-body { width:100%; box-sizing:border-box; margin-top:var(--sp-1); font-size:var(--fs-body);
  padding:var(--sp-3); border:1px solid var(--line); border-radius:6px; resize:vertical; font-family:inherit; }
.scr-row { display:flex; align-items:center; margin-top:var(--sp-3); }
.scr-status { font-size:var(--fs-label); color:var(--sub); }
.scr-note { font-size:var(--fs-label); color:var(--sub); font-style:italic; margin-top:var(--sp-2); }

/* Phase 4 — Doc/Info Issues + Intake Transcript modules (case screen). */
.dii-bar{height:9px;border-radius:5px;background:var(--hover);overflow:hidden;margin:.4rem 0 .3rem}
.dii-fill{display:block;height:100%;background:var(--brand);border-radius:5px}
.dii-pct{font-size:var(--fs-label);color:var(--sub);margin-bottom:.6rem}
.dii-pct b{color:var(--ink)}
.dii-done{font-size:var(--fs-label);color:var(--ok);font-weight:700}
.dii-list{display:flex;flex-direction:column;gap:.25rem}
.dii-item{display:grid;grid-template-columns:1.1rem 1fr auto;align-items:center;gap:.45rem;
  padding:.3rem .4rem;border-radius:7px}
.dii-item.dii-missing{background:#fbf1ec}
.dii-item.dii-have .dii-ic{color:var(--ok)}
.dii-item.dii-na .dii-ic{color:var(--sub)}
.dii-item.dii-missing .dii-ic{color:var(--red)}
.dii-ic{font-weight:800;text-align:center}
.dii-label{font-size:var(--fs-body);color:var(--ink);min-width:0}
.dii-val{color:var(--sub);font-weight:600}
.dii-src{font-size:var(--fs-micro);color:var(--sub);text-transform:uppercase;letter-spacing:.03em;
  border:1px solid var(--line);border-radius:4px;padding:0 .2rem;margin-left:.3rem}
.dii-acts{display:flex;gap:.2rem}
.dii-set{font-size:var(--fs-micro);border:1px solid var(--line);background:#fff;border-radius:5px;
  padding:.1rem .35rem;cursor:pointer;color:var(--sub);font-family:inherit}
.dii-set:hover{border-color:var(--brand);color:var(--brand)}
.dii-set.on{background:var(--brand);color:#fff;border-color:var(--brand)}
/* Provisional (narrative "client says") items: distinct from a confirmed have --
   amber, a "~" mark, a "client says" tag, and a Confirm control that promotes it. */
.dii-item.dii-provisional{background:#fbf7ee}
.dii-item.dii-provisional .dii-ic{color:#b5850b}
.dii-src.prov{color:#8a6d3b;border-color:#e0d3b3;background:#fff}
/* Unified Case-Elements card (owner 2026-08-18): Background + Liability (Gate 2
   merits with causation/pretext sub-item groups) + retained Documents strip. */
.g2card .g2-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.2rem}
.g2card .g2-head h3{margin:0}
.g2-headmain{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.g2-claimline{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-body);color:var(--ink)}
.g2-claimlbl{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.03em;color:var(--sub);font-weight:800}
.g2-claimline .g2-claim{width:auto;min-width:12rem;font-weight:700}
.g2-xy{font-size:var(--fs-label);color:var(--sub);font-weight:700}
.g2-sec{margin-top:1rem}
.g2-sec > h4{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.04em;color:var(--sub);font-weight:800;margin:0 0 .5rem}
/* A section header is a BAR, not a title with a button adrift at the far end (owner
   2026-09-06: "sits in empty space with no distinct border boundary or section
   context"). The rule underneath anchors both ends to the same line, the way the
   group headings inside already do. */
.g2-sechd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.g2-sechd h4{margin:0;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.04em;color:var(--sub);font-weight:800}
/* ONE STRUCTURED BAR, NOT LOOSE HEADER TEXT (owner 2026-09-06: the employer / role /
   salary / dates "feel a bit floating and unanchored... group these into distinct
   metric badges or a structured horizontal card so they look intentional").
   A single bordered container, hairline dividers between cells, uniform padding --
   so it reads as one meta strip rather than six cards that happen to be adjacent. */
/* THE 5/7 SPLIT (owner spec 2026-09-06): structured metadata on the left, the
   factual synopsis on the right, so the card opens with what the case IS rather than
   with an employer name. Stacks on a narrow screen. */
.g2-bgsplit{display:grid;grid-template-columns:5fr 7fr;gap:var(--sp-5);align-items:start}
@media (max-width:1100px){ .g2-bgsplit{grid-template-columns:1fr} }
/* WHITE, NOT GREY (owner 2026-09-06: "Remove the dark/heavy gray background tint
   completely"). A tinted panel behind the one block of prose on the card made the
   thing you are meant to read the heaviest object on screen. */
.g2-syn{display:flex;flex-direction:column;gap:var(--sp-4);height:100%;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
  border-radius:16px;padding:var(--sp-5);cursor:pointer}
.g2-syn:hover{border-color:var(--sem-neutral-bd)}
.g2-syn-hd{display:flex;align-items:baseline;gap:var(--sp-3)}
.g2-syn-title{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.12em;
  color:var(--sub);font-weight:700}
/* A text action, not a button-shaped object competing with the title. */
.g2-syn-gen{margin-left:auto;border:none;background:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:var(--fs-label);font-weight:600;color:var(--brand)}
.g2-syn-gen:hover{text-decoration:underline}
.g2-syn-gen:disabled{opacity:.6;cursor:default;text-decoration:none}
/* Four sentences at a readable measure -- the whole point of the card. */
.g2-syn-body{margin:0;font-size:var(--fs-body);line-height:1.7;color:var(--ink);
  max-width:64ch}
.g2-syn-empty{margin:0;font-size:var(--fs-label);line-height:1.6;color:var(--sub);
  max-width:56ch}
/* Background Info is a STACK OF ELEMENT ROWS now, not a grid of cards (owner
   2026-09-06: "try to make background match the 'Case facts' its to contrasting right
   now"). Same rail, same label track, same tint -- see _g2BgField. The old
   `.g2-bg`/`.g2-f` card grid is gone with it. */
/* THE LEFT COLUMN IS A COMPACT STACK, not element rows (owner spec 2026-09-06:
   "Remove huge horizontal white cards. Use tight row items with clear labels and dark
   value text"). The 12.5rem label track that lines Case Facts up beautifully across a
   full-width card is simply too wide for five of twelve columns -- the edit control
   wrapped onto its own line on every row. Label above value, tight. */
.g2-bg{display:flex;flex-direction:column;gap:var(--sp-1)}
/* NO BOX PER ROW (owner 2026-09-06: "Remove outer individual row border boxes to
   eliminate visual noise"). Six bordered cards to show six short values was the
   noise; a key/value list is the content. */
.g2-bgsplit .g2-bgrow{border:none;border-radius:8px;padding:var(--sp-2) var(--sp-3);
  background:none;box-shadow:none}
.g2-bgsplit .g2-clickrow{cursor:pointer}
.g2-bgsplit .g2-clickrow:hover{background:var(--hover)}
.g2-bgsplit .g2-clickrow:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.g2-bgsplit .g2-bgrow .g2-elgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:0 var(--sp-2);align-items:center;min-height:0}
.g2-bgsplit .g2-bgrow .g2-elhead{grid-column:1;margin:0;padding:0;border:none;
  background:none;border-radius:0}
.g2-bgsplit .g2-bgrow .g2-ellabel{font-size:var(--fs-micro);letter-spacing:.1em}
.g2-bgsplit .g2-bgrow .g2-elans{grid-column:1;border-left:none;padding-left:0;
  margin-top:1px}
.g2-bgsplit .g2-bgrow .g2-elwhy{grid-column:2;grid-row:1 / span 2;align-self:center}
.g2-bgsplit .g2-bgrow .g2-fv{max-width:none}
/* NO ROW MAY TOWER (owner 2026-09-06: "if that section is too long, it's going to
   make it look off"). Extraction shortens the employer's reason on most cases, but
   the fallback is the client's raw answer -- up to 3,603 characters on a live case --
   and one row that tall pulls the whole left column out of step with the synopsis
   card beside it. Two lines, and the rest is one click away in the editor. */
.g2-bgsplit .g2-bgrow.tall .g2-fv{display:block;overflow:hidden;
  line-height:1.5;max-height:calc(1.5em * 2 + var(--sp-2) * 2);
  background:var(--sem-neutral-bg);border:1px solid var(--sem-neutral-bd);
  border-radius:10px;padding:var(--sp-2) var(--sp-3);font-weight:500;
  box-sizing:content-box}
/* A DETERMINISTIC BOUND, not -webkit-line-clamp. The clamp reported as working and
   was not: this engine computes display:-webkit-box back to flow-root once overflow
   is set, which silently disables it -- the box rendered three cut lines while the
   computed style still said `-webkit-line-clamp: 2`. A max-height in line units
   cannot be quietly turned off by a display normalisation. */
/* NO belt-and-braces max-height here. A separate `overflow:hidden` on the same box
   blockifies display:-webkit-box in Chrome, which silently disables the line-clamp --
   the row rendered three cut lines instead of two clamped ones. The clamp below owns
   the bound on its own; the non-clamped values in this column are single-line. */
.g2-bgrow .g2-elhead{background:var(--sem-neutral-bg)}
/* A background row has no Expand and no source, so its value takes those tracks
   instead of leaving 16rem of white on every line. The LABEL track is untouched,
   which is what keeps it aligned with the element rows below. */
.g2-bgrow .g2-elans{grid-column:2 / -1}
/* A paragraph must not run the full width of a 1400px screen (owner 2026-09-06:
   "Fix text stretching across the entire screen"). 60ch measured out at ~66 real
   characters in this face -- inside the 65-75 he asked for. */
.g2-bgrow .g2-fv{font-size:var(--fs-body);font-weight:600;color:var(--ink);
  display:block;max-width:60ch}
.g2-bgrow.tall .g2-fv{font-weight:500;line-height:1.65;background:var(--sem-neutral-bg);
  border:1px solid var(--sem-neutral-bd);border-radius:12px;padding:var(--sp-4)}
.g2-bgrow .g2-fv.ro{color:var(--sub);font-weight:500}
/* Item 5d: the long free-text field spans the whole row as its own callout, so it isn't
   crammed into a fixed-width card and the short metric cards keep a clean, even grid. */
/* The long free-text row (the employer's stated reason) just reads as a taller row
   now; `.g2-f.full`'s full-width card treatment went with the card grid. */
.g2-bgrow.tall .g2-fv{line-height:1.55}
.g2-fl{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.03em;color:var(--sub);font-weight:700}
.g2-fv{font-size:var(--fs-body);color:var(--ink);font-weight:600;word-break:break-word}
.g2-fv.editable{cursor:text;border-bottom:1px dashed var(--line)}
.g2-fv.editable:hover{border-bottom-color:var(--brand);color:var(--brand)}
.g2-fv.ro{color:var(--sub)}
.g2-edit{font:inherit;font-size:var(--fs-body);width:100%;border:1px solid var(--brand);border-radius:5px;padding:.15rem .3rem}
.g2-claim{font:inherit;font-size:var(--fs-body);font-weight:600;color:var(--ink);width:100%;
  border:1px solid var(--line);border-radius:5px;padding:.2rem .3rem;background:var(--panel);cursor:pointer}
.g2-claim:hover{border-color:var(--brand)}
/* ONE TABLE, NOT A STACK OF CARDS (owner 2026-09-06: "Replace the individual
   stacked floating card wrappers with a single unified table container... clean
   divider lines between rows"). Nine bordered, shadowed cards in a column read as
   nine objects; the elements are one list. */
.g2-liab{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  overflow:hidden}
.g2-liab > .g2-el{border:none;border-radius:0;border-bottom:1px solid var(--line);
  box-shadow:none;cursor:pointer;transition:background-color .12s ease}
.g2-liab > .g2-el:last-child{border-bottom:none}
.g2-liab > .g2-el:hover{background:var(--hover)}
/* The status colour lives in the label badge, not as a wash across the whole row. */
.g2-liab > .g2-el.g2c-green,.g2-liab > .g2-el.g2c-red,.g2-liab > .g2-el.g2c-gray{
  background:var(--panel)}
.g2-liab > .g2-el.g2c-green:hover,.g2-liab > .g2-el.g2c-red:hover,
.g2-liab > .g2-el.g2c-gray:hover{background:var(--hover)}
.g2-liab > .g2-el .g2-elhead{margin:0;border-radius:8px;border-right:none;
  align-self:center;padding:var(--sp-2) var(--sp-3)}
/* v3 Liability row: [name | divider | answer | control], colour-coded fill. */
/* ONE RHYTHM DOWN THE CARD (owner 2026-09-06: "the information isn't consisntetnly
   organize dor paced; its hapharzard visually; and its very difficult for me to
   track"). Row heights ran from one line to five, so the eye had no beat to follow.
   A min-height gives every row the same floor; content is capped at two lines, and
   the whole answer is one Expand away. */
.g2-el{border:1px solid var(--line);border-radius:9px;padding:.45rem .6rem}
/* Same rail as the Jury Pool value rows -- icon, fixed label column, answer, controls --
   so the three groups read as one card instead of three designs. */
/* FOUR FIXED COLUMNS, IDENTICAL ON EVERY ROW (owner 2026-09-06): topic | substance |
   pop out | control. The last two were `auto` tracks, so each row sized them to its own
   content and nothing lined up down the card -- "right now runs too much to freely".
   Fixed tracks mean the pop-out and the control sit at the same x on every row.

   The label track is 12.5rem, up from 11rem: "TERMINATED / ADVERSE ACTION" and
   "PROTECTED REPORT / TRIGGER" were wrapping hard against the divider. */
.g2-elgrid{display:grid;grid-template-columns:12.5rem minmax(0,1fr) 6rem;
  align-items:center;gap:var(--sp-3);min-height:2.35rem}
/* Only a BACKGROUND row can outgrow two lines now (the employer's stated reason
   renders in full there), so top-alignment is scoped to those. Element rows are
   capped at two lines and always centre. */
.g2-bgrow.tall .g2-elgrid{align-items:start}
.g2-bgrow.tall .g2-elhead{padding-top:var(--sp-3)}
/* THE WHOLE LEFT BLOCK CARRIES THE STATUS (owner 2026-09-05), not a hairline on the
   edge -- icon and label sit in one tinted cell that runs to the divider, which is
   readable at a glance without washing the answer text behind a colour. */
/* Both sides VERTICALLY CENTRED (owner 2026-09-06: the label block was top-aligned
   while a one-line answer like "Registered Nurse" floated in the middle, which read as
   two different rows). Centre both and a single-line row is level; a wrapped label and
   a three-line answer still centre against each other. */
.g2-elhead{display:flex;align-items:center;gap:.5rem;align-self:stretch;
  margin:-.45rem 0 -.45rem -.6rem;padding:var(--sp-2) var(--sp-4);border-radius:7px 0 0 7px;
  border-right:1px solid var(--line);background:var(--sem-neutral-bg)}
/* .04em, not .06em: tracking that flatters SALARY crushes NO PUBLIC ENTITY
   (PRIVATE-SECTOR ONLY) against the edge of its box. */
.g2-ellabel{font-size:var(--fs-label);font-weight:700;min-width:0;color:var(--sub);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.35}
/* The consistent divider between the name and the answer (fixed label column keeps it aligned). */
.g2-elans{border-left:1px solid var(--line);padding-left:var(--sp-4);min-width:0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:var(--sp-1)}
/* The click-to-edit underline hugs the text. As a stretched flex child it drew a rule
   the full width of the column, which read as an empty form field under every answer. */
.g2-elans > .g2-ansv{max-width:100%}
.g2-ansv{font-size:var(--fs-body);color:var(--ink);font-weight:600;word-break:break-word}
/* Edit affordance on HOVER, not at rest. A permanent dashed rule under a wrapped
   three-line answer draws itself the full width of the column and reads as an empty
   form field under every row. */
.g2-ansv.editable{cursor:text;border-bottom:1px dashed transparent}
.g2-ansv.editable:hover{border-bottom-color:var(--brand)}
/* An unanswered element: a status TOKEN and the gap it names, so "we have not
   established this" never wears the same type as a real answer. */
.g2-ansv.g2-unres{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2);
  border-bottom-color:transparent}
.g2-token{display:inline-block;font-size:var(--fs-micro);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--sub);
  background:var(--sem-neutral-bg);border:1px solid var(--sem-neutral-bd);
  border-radius:999px;padding:1px var(--sp-2);line-height:1.6;white-space:nowrap}
.g2-tokenwhy{font-size:var(--fs-label);font-weight:500;color:var(--sub)}
/* Expand, far right, its own fixed track (owner 2026-09-06: "I want expand on the
   far right; the sourcing should be removed and keep in the window popup: it's too
   busy now"). The source column lasted one iteration -- taking provenance out of the
   content fixed the content and then made the right-hand side the busy part. */
.g2-elwhy{display:flex;align-items:center;justify-content:flex-end}
/* STATUS IS A MARGIN STRIPE, NOT A FILL (owner 2026-09-05: "not coloring entire row...
   it doesn't look like Christmas lights"). Eight or nine washed rows stacked read as
   decoration and stop meaning anything; a 3px rail on a white row still scans down the
   column at a glance and leaves the text at full contrast. The right-hand control
   carries the same state for anyone who cannot use the colour. */
.g2c-green .g2-elhead{background:var(--sem-complete-bg);border-right-color:var(--sem-complete-bd)}
.g2c-green .g2-ellabel{color:var(--sem-complete-fg)}
.g2c-red .g2-elhead{background:var(--sem-urgent-bg);border-right-color:var(--sem-urgent-bd)}
.g2c-red .g2-ellabel{color:var(--sem-urgent-fg)}
.g2c-gray .g2-elhead{background:var(--sem-neutral-bg)}
/* THERE IS NO FOURTH STATUS COLOUR (owner 2026-09-06: "I just want green red and
   unknown not purple"). A confirmed element is green, like any other satisfied one.
   What makes the four confirm elements different is the GATE, not a hue -- they never
   colour themselves, so green on one of them always means a person pressed it. */
/* Confirm + "?" review controls (fixed-width circular pills, right-aligned). */
/* The .g2-confirm / .g2-review / .g2-status circles are GONE (owner 2026-09-06:
   "what's the point of the flats and chedck marks and qeustionmarks? I dont see how
   those help"). Three icon vocabularies in one rail, none self-explaining. What they
   did now lives in the Expand panel with words on it. Deleted rather than left
   dormant -- an unreachable control is the next thing someone re-wires by accident. */
/* The .g2s-* status-badge fills and the .g2-ansmore "Show full answer" link went with
   them: the badge had no element left to paint, and the link lived in the content
   column, which now holds content and nothing else. */
/* Folded, never hidden: a long intake narrative is still the element's evidence, it
   just should not set the row's height on every load. */
.g2-ansv.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.g2-edit-multi{line-height:1.45;resize:vertical;min-height:4.5rem}
/* Provenance is a QUIET pill under the answer, not a green link competing with the
   real action links beside it. Same height and padding on every row. */
.g2-cite{border:1px solid var(--sem-neutral-bd);background:var(--sem-neutral-bg);
  padding:1px var(--sp-2);border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:var(--fs-micro);font-weight:600;color:var(--sub);line-height:1.6;
  white-space:nowrap}
.g2-cite:hover{border-color:var(--brand);color:var(--brand)}
.g2-evidence{font-size:var(--fs-label);color:var(--ink);background:var(--hover);border-radius:6px;
  padding:.35rem .55rem;margin:.3rem 0 0 13rem;line-height:1.4;font-style:italic}
/* Sub-item content fields (causation / pretext). */
/* The .g2-sub* rules were the inline sub-item list inside the old <details> popout.
   Deleted with _g2SubItem when the Why panel replaced it (2026-09-06). */
.g2-fill{font-size:var(--fs-label);border:1px solid var(--brand);background:var(--panel);color:var(--brand);
  border-radius:6px;padding:.25rem .6rem;cursor:pointer;font-family:inherit;font-weight:600}
.g2-fill:hover{background:var(--brand);color:#fff}
.g2-fill:disabled{opacity:.6;cursor:default}
/* Three-group Liability layout (owner spec 2026-09-04): Case Facts / Legal Merits /
   Jury Pool & Damages -- a different KIND of question each, so they get real
   separation (spacing + a label), not three more colours competing with the
   row-level status colour already in use. */
.g2-group{margin-top:1.1rem}
.g2-group:first-child{margin-top:0}
.g2-grouphd{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.05em;
  color:var(--sub);font-weight:800;margin:0 0 .5rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}
.g2-groupnote{font-size:var(--fs-micro);color:var(--sub);font-style:italic;margin:0 0 .5rem}
/* The Jury Pool tier, beside the section name it belongs to. Tier 1 is the only one
   that gets the strong fill -- 2 and 3 step down, and "No tier" is deliberately the
   quietest thing on the card: it ranks priority, it does not judge the case. */
.g2-tier{display:inline-block;margin-left:.5rem;padding:.05rem .5rem;border-radius:9px;
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.03em;text-transform:none;
  vertical-align:middle;border:1px solid}
.g2-tier.t1{background:var(--sem-complete-bg);color:var(--sem-complete-fg);
  border-color:var(--sem-complete-bd)}
.g2-tier.t2{background:var(--sem-new-bg);color:var(--sem-new-fg);border-color:#bcd8f0}
.g2-tier.t3{background:var(--sem-pending-bg);color:var(--sem-pending-fg);
  border-color:var(--sem-pending-bd)}
.g2-tier.t0{background:transparent;color:var(--sub);border-color:var(--line);
  font-weight:600}
/* The value verdict is a NOTICE. As an indented italic caption it ran off the edge
   of the card on a long string ("Collin County is not a county we file in") and read
   as a stray line rather than a warning worth acting on. */
.g2-tierwhy{display:flex;align-items:flex-start;gap:var(--sp-2);
  font-size:var(--fs-label);color:var(--sem-pending-fg);font-style:normal;
  background:var(--sem-pending-bg);border:1px solid var(--sem-pending-bd);
  border-radius:8px;padding:var(--sp-3);
  margin:var(--sp-3) 0 var(--sp-4);line-height:1.45}
/* Informational, not a deficiency: blue, never amber or red. */
.g2-divnote{display:flex;align-items:flex-start;gap:var(--sp-2);
  font-size:var(--fs-label);color:var(--sem-new-fg);background:var(--sem-new-bg);
  border:1px solid #bcd8f0;border-radius:8px;padding:var(--sp-3);
  margin:var(--sp-2) 0 var(--sp-4);line-height:1.5}
.g2-divnote.quiet{color:var(--sub);background:var(--sem-neutral-bg);
  border-color:var(--sem-neutral-bd)}
.g2-tierwhy-ic{flex:0 0 auto;font-size:var(--fs-body);line-height:1.2}
/* Curated employer match: an action to take, so it reads louder than the tier note
   below it -- but it is still a prompt, not a verdict, hence no status colour. */
.g2-reghint{font-size:var(--fs-label);color:var(--ink);margin:.5rem 0 0;line-height:1.45;
  background:var(--sem-pending-bg);border-left:3px solid var(--sem-pending-bd);
  border-radius:0 3px 3px 0;padding:.4rem .55rem}
.g2-reghint b{font-weight:700}
.g2-regsrc{display:block;font-size:var(--fs-micro);color:var(--sem-pending-fg);
  margin-top:.2rem}
/* Arbitration: confirmed reads as a real condition on the tier; unknown reads as the
   open question it is, not as "we checked and there's none". */
.g2-arbwrap{display:inline-block;margin-left:.35rem;border-radius:9px;vertical-align:middle;
  border:1px solid;padding:0 .2rem 0 .35rem}
.g2-arbwrap select{font:inherit;font-size:var(--fs-micro);font-weight:700;color:inherit;
  background:none;border:0;padding:.05rem .1rem;cursor:pointer;text-transform:none;
  -webkit-appearance:none;appearance:none}
.g2-arbwrap.on{background:var(--sem-pending-bg);color:var(--sem-pending-fg);
  border-color:var(--sem-pending-bd)}
.g2-arbwrap.off{background:var(--sem-neutral-bg);color:var(--sem-neutral-fg);
  border-color:var(--sem-neutral-bd)}
.g2-arbwrap.unk{background:transparent;color:var(--sub);border-color:var(--line);
  border-style:dashed}
.g2-arbwrap.unk select{font-weight:600}
/* One line: icon, label, value, source. No per-row status colour -- these factors never
   gate the case, and a red row here would read as a rejection. */
.g2-valrow{background:var(--panel);border-color:var(--line)}
/* MET / SHORT, on the whole value block (owner 2026-09-06). The three figures decide
   one question together, so the verdict belongs to the group, not to any one row --
   a green salary beside a grey tenure would read as three separate judgments. */
.g2-liab.g2v-met > .g2-valrow .g2-elhead{background:var(--sem-complete-bg)}
.g2-liab.g2v-met > .g2-valrow .g2-ellabel{color:var(--sem-complete-fg)}
.g2-liab.g2v-short > .g2-valrow .g2-elhead{background:var(--sem-urgent-bg)}
.g2-liab.g2v-short > .g2-valrow .g2-ellabel{color:var(--sem-urgent-fg)}
/* Arbitration is BLUE when unknown or not applicable -- it is a fact we have not
   settled, not a deficiency, and amber or red here would read as a problem with the
   case (owner: "It can stay blue for uknonw or not applicable"). */
.g2-arbrow .g2-elhead{background:var(--sem-new-bg)}
.g2-arbrow .g2-ellabel{color:var(--sem-new-fg)}
.g2-liab.g2v-met > .g2-arbrow .g2-elhead,
.g2-liab.g2v-short > .g2-arbrow .g2-elhead{background:var(--sem-new-bg)}
.g2-liab.g2v-met > .g2-arbrow .g2-ellabel,
.g2-liab.g2v-short > .g2-arbrow .g2-ellabel{color:var(--sem-new-fg)}
.g2-vicon{font-size:var(--fs-body);line-height:1;text-align:center;width:1.1rem;
  flex:0 0 auto}
.g2-valrow .g2-ellabel{color:var(--sub);font-weight:600;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:.06em}
/* The value carries no left border of its own -- .g2-elans already draws the divider,
   and two rules landed on top of each other. */
.g2-valv{font-weight:700;color:var(--ink);font-size:var(--fs-body)}
.g2-valv.unk{font-weight:600;color:var(--sub);font-style:italic}
/* The .g2-valsrc pill went with the row's source column -- Jury Pool provenance
   now reads inside the Expand panel (.g2-why-part-s). */
/* WHY: the reasoning behind one element, on the SIDE.

   This replaced an inline <details> that expanded down inside the card. Owner
   2026-09-06: "I dont wnat it to popu out or exapnd down liek that too. we need a
   side or something." Opening one used to shove every element below it down the
   page, so reading the reasoning cost you your place in the card. */
/* The pop-out control, in its own fixed column: an expand glyph and the count. Sized
   and padded identically on every row so the column reads as a column. */
/* ONE ICON, IDENTICAL ON EVERY ROW (owner 2026-09-06: "some rows use a minimal
   diagonal arrow, while others use a blocky rectangular button... Standardize all
   table rows to use the exact same subtle icon component"). The label used to appear
   on hover, which meant a screenshot caught one row wearing a different control from
   its neighbours. There is no label now -- the arrow is the whole affordance, and the
   accessible name lives on aria-label. */
.g2-why{display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;padding:0;margin:0;border:none;border-radius:6px;
  background:transparent;cursor:pointer;font-family:inherit;color:var(--sub);
  opacity:.55;transition:opacity .12s ease,color .12s ease,background-color .12s ease}
.g2-el:hover .g2-why{opacity:1}
.g2-why:hover,.g2-why:focus-visible{opacity:1;color:var(--ink);background:var(--hover)}
.g2-why-ic{font-size:var(--fs-body);line-height:1}
/* An absent answer is a STATE, not a stray dash. */
.g2-empty{font-size:var(--fs-label);color:var(--sub);font-style:italic}
/* A CENTERED FOCUS READER, NOT A SIDE DRAWER (owner ruling 2026-09-06):

     "Narrow, right-hand slide-over drawers are meant for quick side notes or status
      checks -- not for reviewing dense, high-stakes legal facts... Trying to read
      long multi-paragraph summaries and quote snippets in a 320px column feels
      cramped and frustrating."

   He is right about the mechanics: a 480px column minus padding gave roughly 40
   characters a line, where comfortable reading is 60-75. At 720px the same prose
   runs about 75. The drawer's CONTENT survives -- the timeline, the un-italicised
   quotes, the sticky action bar -- only the container changed. */
.g2-why-panel{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:var(--sp-6)}
/* HIDDEN MUST WIN. `display:flex` on the class outranks the UA's [hidden] rule, so
   without this the panel stays laid out while "hidden" -- an invisible full-viewport
   layer at z-index 60 that eats every click on the app underneath. It shipped that
   way on 2026-09-06 and took the whole UI down: nothing on any screen responded.
   This codebase has been bitten by the same thing four times before (see .addfact,
   .case-hero, .whatschanged, .dl-ack-msg); any overlay that sets display on its
   class needs this line beside it. */
.g2-why-panel[hidden]{display:none}
/* Soft, not a blackout: the card behind stays legible, the modal earns focus from
   elevation and blur. */
.g2-why-scrim{position:absolute;inset:0;background:rgba(15,23,42,.20);opacity:0;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .2s}
.g2-why-panel.open .g2-why-scrim{opacity:1}
.g2-why-sheet{position:relative;z-index:1;width:min(1040px,100%);
  max-height:min(86vh,60rem);background:var(--panel);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 64px rgba(16,24,40,.22),0 2px 8px rgba(16,24,40,.08);
  overflow-y:auto;padding:var(--sp-6) var(--sp-6) var(--sp-6);
  opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity .2s ease,transform .22s cubic-bezier(.32,.72,0,1)}
.g2-why-panel.open .g2-why-sheet{opacity:1;transform:translateY(0) scale(1)}
@media (max-width:640px){
  .g2-why-panel{padding:var(--sp-3)}
  .g2-why-sheet{max-height:92vh;padding:var(--sp-5) var(--sp-4)}
}
@media (prefers-reduced-motion:reduce){
  .g2-why-sheet{transition:opacity .12s ease}
  .g2-why-panel.open .g2-why-sheet{transform:none}
}
.g2-why-x{position:absolute;top:var(--sp-3);right:var(--sp-4);background:transparent;
  border:none;font-size:var(--fs-title);line-height:1;color:var(--sub);cursor:pointer}
/* ---------------------------------------------------------------------------
   THE PANEL, REBUILT (owner spec 2026-09-06). His diagnosis: "stacked card
   overload with low-contrast, condensed typography, heavy borders, and long blocks
   of italicized quotes that strain the eyes."

   So: no grey card around every question, no italics on the evidence, and real
   space between things. White ground, hairline dividers, one clear step from
   question -> finding -> the words it came from.
   --------------------------------------------------------------------------- */
.g2-why-eyebrow{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em;
  color:var(--sub);font-weight:700}
.g2-why-hd h2{margin:var(--sp-2) 0 var(--sp-3);font-size:var(--fs-title);
  color:var(--ink);font-weight:600;letter-spacing:-.01em;line-height:1.15}
/* The source tag: a quiet pill, tinted to the element's state. */
.g2-why-verdict{display:inline-block;font-size:var(--fs-micro);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;border-radius:999px;
  padding:2px var(--sp-3);border:1px solid}
.g2wv-complete{background:var(--sem-complete-bg);color:var(--sem-complete-fg);
  border-color:var(--sem-complete-bd)}
.g2wv-urgent{background:var(--sem-urgent-bg);color:var(--sem-urgent-fg);
  border-color:var(--sem-urgent-bd)}
.g2wv-neutral{background:var(--sem-neutral-bg);color:var(--sem-neutral-fg);
  border-color:var(--sem-neutral-bd)}
/* The headline finding is PROSE, not a card -- it is the thing being asserted. */
.g2-why-sum{margin:var(--sp-4) 0 0;font-size:var(--fs-label);color:var(--sub);
  line-height:1.55}
.g2-why-full{font-size:var(--fs-body);color:var(--ink);line-height:1.7;font-weight:500;
  max-width:60ch;
  margin:var(--sp-3) 0 0;padding:0;background:none;white-space:pre-wrap}
/* An explicit hover outline, so the click-to-edit is discoverable without a button
   sitting on top of it (owner: "make the synthesized summary text directly
   click-to-edit with a subtle hover outline"). */
.g2-why-full.editable{cursor:text;border:1px solid transparent;border-radius:10px;
  margin-left:calc(var(--sp-3) * -1);padding:var(--sp-3);transition:border-color .12s ease,background-color .12s ease}
.g2-why-full.editable:hover{border-color:var(--sem-neutral-bd);background:var(--hover)}
/* The actions STICK to the bottom of the sheet, so they are reachable the whole way
   down the timeline and read as "now decide" rather than "before you have read it".
   Negative margins pull the bar out to the sheet's edges. */
.g2-why-actions{position:sticky;bottom:calc(var(--sp-6) * -1);z-index:2;
  display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:flex-end;
  margin:var(--sp-5) calc(var(--sp-6) * -1) calc(var(--sp-6) * -1);
  padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--line);
  border-radius:0 0 16px 16px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)}
.g2-why-actions .btn{border-radius:999px;font-size:var(--fs-label);font-weight:500;
  padding:var(--sp-2) var(--sp-4);border:1px solid var(--line);background:var(--panel);
  color:var(--ink)}
.g2-why-actions .btn:hover{background:var(--hover);border-color:var(--sub)}
.g2-why-flag.on{border-color:var(--sem-pending-bd);color:var(--sem-pending-fg);
  background:var(--sem-pending-bg)}
.g2-why-note{display:flex;align-items:flex-start;gap:var(--sp-2);margin-top:var(--sp-3);
  font-size:var(--fs-label);color:var(--sem-pending-fg);background:var(--sem-pending-bg);
  border:1px solid var(--sem-pending-bd);border-radius:8px;padding:var(--sp-3)}
/* Jury Pool's value parts, same quiet treatment. */
.g2-why-parts{display:flex;flex-direction:column;margin-top:var(--sp-4)}
.g2-why-part{display:grid;grid-template-columns:7rem minmax(0,1fr);
  gap:var(--sp-1) var(--sp-4);align-items:baseline;padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line)}
.g2-why-part:last-child{border-bottom:none}
.g2-why-part-l{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;
  color:var(--sub);font-weight:700}
.g2-why-part-v{font-size:var(--fs-body);font-weight:600;color:var(--ink)}
.g2-why-part-v.unk{font-weight:500;color:var(--sub)}
.g2-why-part-s{grid-column:2;font-size:var(--fs-micro);color:var(--sub)}
/* A TIMELINE, NOT A STACK (owner 2026-09-06: "use a subtle vertical timeline thread
   ... turns disparate data points into a cohesive story you can skim down
   effortlessly"). One thread down the left, a node per question -- filled where there
   is an answer, hollow where there is not, so the gaps are legible at a glance. */
.g2-why-cards{position:relative;display:flex;flex-direction:column;
  margin:var(--sp-5) 0 var(--sp-4);padding-left:var(--sp-5)}
.g2-why-cards::before{content:"";position:absolute;left:3px;top:var(--sp-2);
  bottom:var(--sp-4);width:2px;background:var(--line);border-radius:1px}
.g2-why-card{position:relative;background:none;border:none;border-radius:0;
  padding:0 0 var(--sp-5)}
.g2-why-card:last-child{padding-bottom:0}
.g2-why-card::before{content:"";position:absolute;left:calc(var(--sp-5) * -1);
  top:.3rem;width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px var(--panel)}
.g2-why-card.empty::before{background:var(--panel);border:2px solid var(--sem-neutral-bd)}
.g2-why-q-lbl{font-size:var(--fs-label);color:var(--sub);font-weight:600;
  margin-bottom:var(--sp-2);line-height:1.4;letter-spacing:0;text-transform:none}
.g2-why-v{display:block;font-size:var(--fs-body);color:var(--ink);line-height:1.65;
  font-weight:500;max-width:60ch}
/* THE EVIDENCE, NOT IN ITALICS (owner: "long blocks of italicized quotes that strain
   the eyes"). A left accent bar marks it as the client's own words instead. */
.g2-why-q{margin:var(--sp-3) 0 0;padding:var(--sp-4);font-size:var(--fs-label);
  color:var(--sub);line-height:1.7;font-style:normal;background:var(--sem-neutral-bg);
  border-left:3px solid var(--green);border-radius:0 12px 12px 0;max-width:66ch}
.g2-why-card.empty{background:none;border:none;border-bottom:1px solid var(--line);
  padding:var(--sp-4) 0}
.g2-why-card.empty:last-child{border-bottom:none}
.g2-why-none{display:block;font-size:var(--fs-label);color:var(--sub);font-style:normal}
/* The editor: room to see the whole answer, and a focus ring you can find. */
.g2-why-editor{display:block;width:100%;min-height:22rem;margin-top:var(--sp-2);
  padding:var(--sp-4);font-family:inherit;font-size:var(--fs-body);line-height:1.7;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);
  border-radius:12px;resize:vertical;transition:border-color .12s ease,box-shadow .12s ease}
.g2-why-editor:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(101,123,30,.16)}
/* A filled primary beside a quiet secondary, so the committing action is obvious. */
.g2-why-actions .btn.g2-field-save{background:var(--green);border-color:var(--green);
  color:#fff;font-weight:600}
.g2-why-actions .btn.g2-field-save:hover{background:var(--brand-deep);
  border-color:var(--brand-deep)}
.g2-why-actions .btn.g2-field-save:disabled{opacity:.65;cursor:default}
/* THE SPLIT CANVAS: evidence left, editor right (owner spec 2026-09-06). 45/55, and
   it stacks below 900px rather than squeezing two unreadable columns. */
.g2-why-split{display:grid;grid-template-columns:45fr 55fr;gap:var(--sp-6);
  align-items:start;margin-top:var(--sp-5)}
@media (max-width:900px){ .g2-why-split{grid-template-columns:1fr;gap:var(--sp-5)} }
.g2-why-eviden{min-width:0}
.g2-why-edit{min-width:0;display:flex;flex-direction:column;
  position:sticky;top:0}
.g2-why-editlbl{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;
  color:var(--sub);font-weight:700}
.g2-why-hint{margin:var(--sp-2) 0 0;font-size:var(--fs-micro);color:var(--sub)}
.g2-why-split .g2-why-cards{margin-top:0}
.g2-why-split .g2-why-sum{margin-top:0}
.g2-why-foot{font-size:var(--fs-micro);color:var(--sub);line-height:1.5}
.dii-item.dii-unknown .dii-ic{color:var(--sub)}
.dii-prov-n{color:#8a6d3b;font-weight:700}
.dii-confirm{font-size:var(--fs-micro);border:1px solid #b5850b;background:#fff;border-radius:5px;
  padding:.1rem .4rem;cursor:pointer;color:#8a6d3b;font-weight:700;font-family:inherit}
.dii-confirm:hover{background:#b5850b;color:#fff}
.itx-sum{font-size:var(--fs-body);color:var(--ink);line-height:1.45;margin-bottom:.5rem}
.itx-k{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.04em;color:var(--brand);font-weight:700;margin-bottom:.2rem}
.itx-raw summary{cursor:pointer;font-size:var(--fs-label);color:var(--sub);font-weight:600}
.itx-raw pre{white-space:pre-wrap;font-size:var(--fs-label);color:var(--ink);background:var(--hover);
  border-radius:8px;padding:.6rem;margin-top:.4rem;max-height:22rem;overflow:auto;font-family:inherit}
/* Phase 4 — Termination paperwork pull-out. */
.tp-card summary{cursor:pointer;font-size:var(--fs-body)}
.tp-hint{font-size:var(--fs-label);color:var(--sub);font-weight:400}
.tp-list{margin-top:.5rem;display:flex;flex-direction:column;gap:.35rem}
.tp-doc{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-body)}
.tp-doc .ic{color:var(--sub)}
.tp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-view{font-size:var(--fs-label);color:var(--brand);font-weight:600;white-space:nowrap}

/* Phase 5 — Post-Call disposition canvas. Three decision cards; the primary
   (Retain) reads brand, the two exits read neutral. */
.pcd-hint{font-size:var(--fs-label);color:var(--sub);margin-bottom:.6rem}
.pcd-grid{display:grid;gap:.5rem}
.pcd-card{display:flex;flex-direction:column;gap:.2rem;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:#fff;border-radius:9px;padding:.6rem .7rem;font-family:inherit}
.pcd-card:hover{border-color:var(--brand)}
.pcd-title{font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.pcd-desc{font-size:var(--fs-label);color:var(--sub);line-height:1.4}
.pcd-retain{border-color:var(--brand);background:var(--hover)}
.pcd-retain .pcd-title{color:var(--brand)}

/* Retention module (now inside Post-Call, gated on the Pending Retention flag). */
.ret-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.ret-head h3{margin:0}
.ret-badge{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--brand);background:var(--hover);border:1px solid var(--brand);border-radius:999px;padding:.15rem .55rem;white-space:nowrap}
.ret-cancel{font-family:inherit;font-size:var(--fs-label);font-weight:600;border:1px solid var(--line);
  background:#fff;color:var(--sub);border-radius:7px;padding:.4rem .8rem;cursor:pointer}
.ret-cancel:hover{border-color:var(--sub);color:var(--ink)}
.ret-auto{display:flex;flex-direction:column;gap:.25rem;padding:.55rem;border:1px dashed var(--line);
  border-radius:8px;margin-bottom:.7rem}
/* SEND TO CLIENT. This was styled as permanently dead -- greyed, not-allowed
   cursor -- from when the button was a placeholder with no endpoint behind it. The
   send is real now, and a working control that renders as broken is worse than no
   control: the owner sent a live agreement while the UI told him he could not.
   It reads as a real action; the confirm dialog carries the weight, not a
   disabled-looking button. */
.ret-send{align-self:flex-start;font-family:inherit;font-size:var(--fs-label);font-weight:700;
  border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:6px;
  padding:.35rem .8rem;cursor:pointer}
.ret-send:hover{filter:brightness(1.06)}
.ret-send:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Only while the send is actually in flight. */
.ret-send:disabled{opacity:.6;cursor:progress}
.ret-pending{font-size:var(--fs-micro);color:var(--sub);font-style:italic}
.ret-acts{display:flex;gap:.5rem}
/* Prepare-retention CTA + draft/review editor (owner 2026-08-28). */
.ret-autobtns{display:flex;gap:.5rem;flex-wrap:wrap}
.ret-prepare{font-family:inherit;font-size:var(--fs-label);font-weight:700;
  border:1px solid var(--brand);background:var(--panel);color:var(--brand);border-radius:6px;
  padding:.35rem .7rem;cursor:pointer}
.ret-prepare:hover{background:var(--brand);color:#fff}
.ret-test{font-family:inherit;font-size:var(--fs-label);font-weight:600;
  border:1px solid var(--line);background:var(--panel);color:var(--sub);border-radius:6px;
  padding:.35rem .7rem;cursor:pointer}
.ret-test:hover{border-color:var(--brand);color:var(--brand)}
.ret-test:disabled{opacity:.6;cursor:default}
.pt-toolbar{margin:.4rem 0 1rem}
.ret-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;
  justify-content:center;z-index:1000;padding:1rem}
.ret-modal{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  width:min(920px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.3)}
.ret-mhead{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;
  border-bottom:1px solid var(--line)}
.ret-mhead h3{margin:0;font-size:var(--fs-section)}
.ret-x{border:none;background:none;color:var(--sub);font-size:var(--fs-title);cursor:pointer;line-height:1}
.ret-warn{margin:.7rem 1rem 0;padding:.5rem .7rem;border:1px solid var(--sem-pending-fg);
  border-radius:8px;background:var(--hover);color:var(--sem-pending-fg);font-size:var(--fs-micro)}
.ret-grid{display:grid;grid-template-columns:minmax(240px,1fr) minmax(280px,1.2fr);gap:1rem;
  padding:1rem;overflow:auto}
.ret-fields{display:flex;flex-direction:column;gap:.6rem}
.ret-field{display:flex;flex-direction:column;gap:.2rem}
.ret-field>span{font-size:var(--fs-micro);color:var(--sub);font-weight:700}
.ret-in{font-family:inherit;font-size:var(--fs-body);border:1px solid var(--line);border-radius:6px;
  padding:.4rem .5rem;background:var(--bg);color:var(--fg);width:100%;box-sizing:border-box}
textarea.ret-in{resize:vertical}
.ret-toggle{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-label);color:var(--fg);
  margin-top:.2rem;cursor:pointer}
.ret-reffields{display:flex;flex-direction:column;gap:.6rem;padding:.6rem;border:1px dashed var(--line);
  border-radius:8px}
.ret-reffields[hidden]{display:none}
.ret-preview{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.ret-plabel{font-size:var(--fs-micro);color:var(--sub);font-weight:700}
.ret-ptext{margin:0;white-space:pre-wrap;word-wrap:break-word;font-family:inherit;
  font-size:var(--fs-label);line-height:1.45;border:1px solid var(--line);border-radius:8px;
  padding:.7rem;background:var(--bg);overflow:auto;max-height:60vh}
.ret-mfoot{display:flex;gap:.6rem;justify-content:flex-end;padding:.8rem 1rem;border-top:1px solid var(--line)}
.ret-close{font-family:inherit;font-size:var(--fs-label);font-weight:700;border:1px solid var(--line);
  background:var(--panel);color:var(--fg);border-radius:6px;padding:.35rem .8rem;cursor:pointer}
.ret-testsend{margin-right:auto;font-family:inherit;font-size:var(--fs-label);font-weight:700;
  border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:6px;
  padding:.35rem .8rem;cursor:pointer}
.ret-testsend:hover{filter:brightness(1.06)}
.ret-testsend:disabled{opacity:.6;cursor:default}
/* Signing-line nudge control: dial the box lift against the real SignNow view. */
.ret-nudge{display:inline-flex;align-items:center;gap:.35rem;font-family:inherit;
  font-size:var(--fs-label);color:var(--muted)}
.ret-nudgein{width:3.2rem;font-family:inherit;font-size:var(--fs-label);
  border:1px solid var(--line);background:var(--panel);color:var(--fg);
  border-radius:6px;padding:.25rem .4rem}
@media (max-width:640px){.ret-grid{grid-template-columns:1fr}}
.pcd-fire{font-family:inherit;font-size:var(--fs-label);font-weight:700;border-radius:7px;
  padding:.4rem .8rem;cursor:pointer;border:1px solid var(--line)}
.ret-signed{background:var(--brand);color:#fff;border-color:var(--brand)}
/* Retention Report — the frozen snapshot. Reuses the After-the-Screen block styling. */
.rr-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.4rem}
.rr-head h3{margin:0}
.rr-when{font-size:var(--fs-micro);color:var(--sub);font-style:italic}
.rr-block{margin-top:.9rem}
.rr-block > h4{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.04em;color:var(--sub);font-weight:800;margin:0 0 .4rem}
.rr-el{font-weight:700;text-transform:capitalize}
.rr-satisfied{color:var(--ok)}
.rr-missing{color:var(--red)}
.rr-client_says,.rr-unknown,.rr-na{color:var(--sub)}

/* --- Lead Quality report (owner 2026-08-23): tiered points, signed W/M/Y --- */
.lq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.lq-stat{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1)}
.lq-stat .lq-n{font-size:var(--fs-display);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.lq-stat .lq-l{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--sub)}
.lq-stat.lq-points .lq-n{color:var(--sem-new-fg)}
.lq-stat.lq-signed .lq-n{color:var(--sem-complete-fg)}
.lq-tiers{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0}
.lq-tier{flex:1;min-width:130px;border-radius:10px;padding:var(--sp-3);border:1px solid var(--sem-neutral-bd);
  background:var(--sem-neutral-bg)}
.lq-tier .lq-n{font-size:var(--fs-title);font-weight:800;font-variant-numeric:tabular-nums}
.lq-tier .lq-l{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--sub)}
.lq-tier.t-g1{background:var(--sem-new-bg);border-color:#bcd8f0}.lq-tier.t-g1 .lq-n{color:var(--sem-new-fg)}
.lq-tier.t-g2{background:var(--sem-pending-bg);border-color:var(--sem-pending-bd)}.lq-tier.t-g2 .lq-n{color:var(--sem-pending-fg)}
.lq-tier.t-sg{background:var(--sem-complete-bg);border-color:var(--sem-complete-bd)}.lq-tier.t-sg .lq-n{color:var(--sem-complete-fg)}
.lq-bars{display:flex;align-items:flex-end;gap:3px;height:84px;margin:var(--sp-3) 0 var(--sp-1)}
.lq-bar{flex:1;background:var(--sem-new-bg);border:1px solid #bcd8f0;border-radius:3px 3px 0 0;min-height:2px;position:relative}
.lq-bar:hover{background:var(--sem-new-fg);border-color:var(--sem-new-fg)}
.lq-bar .lq-tip{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:var(--fs-micro);padding:2px 6px;border-radius:4px;white-space:nowrap;z-index:3}
.lq-bar:hover .lq-tip{display:block}
.lq-axis{display:flex;justify-content:space-between;font-size:var(--fs-micro);color:var(--sub)}

/* --- Attribution report restyle (owner 2026-08-23): tiles, bars, pills --- */
.att-list{display:flex;flex-direction:column;gap:var(--sp-1);margin:var(--sp-2) 0 var(--sp-4)}
.att-row{display:grid;grid-template-columns:minmax(110px,160px) 1fr auto;gap:var(--sp-3);
  align-items:center;padding:var(--sp-2) var(--sp-2);border-radius:8px}
.att-row:hover{background:var(--hover)}
.att-name{font-size:var(--fs-body);font-weight:700;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.att-track{position:relative;height:18px;background:var(--sem-neutral-bg);border-radius:9px;overflow:hidden}
.att-fill{position:absolute;inset:0 auto 0 0;background:var(--sem-new-bg);border-right:2px solid var(--sem-new-fg);
  border-radius:9px 0 0 9px;min-width:2px}
.att-fill.f-sign{background:var(--sem-complete-bg);border-right-color:var(--sem-complete-fg)}
.att-track .att-count{position:absolute;right:8px;top:0;line-height:18px;font-size:var(--fs-micro);
  font-weight:800;color:var(--sub);font-variant-numeric:tabular-nums}
.att-nums{display:flex;gap:var(--sp-2);align-items:center;font-variant-numeric:tabular-nums}
.att-nums .n{font-size:var(--fs-label);font-weight:700;color:var(--ink);min-width:2.2em;text-align:right}
.pct-pill{display:inline-block;font-size:var(--fs-micro);font-weight:800;padding:2px 8px;border-radius:999px;
  background:var(--sem-neutral-bg);color:var(--sem-neutral-fg);border:1px solid var(--sem-neutral-bd);
  font-variant-numeric:tabular-nums;min-width:3.4em;text-align:center}
.pct-pill.p-good{background:var(--sem-complete-bg);color:var(--sem-complete-fg);border-color:var(--sem-complete-bd)}
.pct-pill.p-mid{background:var(--sem-pending-bg);color:var(--sem-pending-fg);border-color:var(--sem-pending-bd)}
.att-legend{display:flex;gap:var(--sp-4);font-size:var(--fs-micro);color:var(--sub);
  text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-bottom:var(--sp-1);
  padding:0 var(--sp-2)}
.rnotes-fold{margin-top:var(--sp-3)}
.rnotes-fold summary{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--sub);cursor:pointer}
.rnotes-fold ul{margin:var(--sp-2) 0 0;padding-left:var(--sp-5);font-size:var(--fs-label);color:var(--sub)}
.mkt-opps{display:flex;flex-direction:column;gap:var(--sp-2)}
.mkt-opp{display:flex;gap:var(--sp-3);align-items:baseline;padding:var(--sp-2) var(--sp-3);border-radius:8px;
  border:1px solid var(--sem-neutral-bd);background:var(--sem-neutral-bg)}
.mkt-opp-k{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.mkt-opp-t{font-size:var(--fs-body);color:var(--ink)}
.mkt-opp.o-scale{background:var(--sem-complete-bg);border-color:var(--sem-complete-bd)}
.mkt-opp.o-investigate{background:var(--sem-pending-bg);border-color:var(--sem-pending-bd)}
.mkt-opp.o-emerging{background:var(--sem-new-bg);border-color:#bcd8f0}
.mkt-opp.o-waste{background:var(--sem-urgent-bg);border-color:var(--sem-urgent-bd)}
.mkt-term{cursor:pointer}

/* --- Marketing Command Center v2 (mockup layout, owner 2026-08-23) --- */
.mkt-layout{display:grid;grid-template-columns:170px 1fr;gap:var(--sp-4);align-items:start}
@media (max-width:900px){.mkt-layout{grid-template-columns:1fr}.mkt-rail{display:none}}
.mkt-rail{position:sticky;top:70px;background:#20242b;border-radius:12px;padding:var(--sp-3) 0;
  display:flex;flex-direction:column}
.mkt-rail-item{display:block;padding:var(--sp-2) var(--sp-4);font-size:var(--fs-label);font-weight:700;
  color:#aab2bf;text-decoration:none;border-left:3px solid transparent}
.mkt-rail-item:hover{color:#fff;background:#2a2f38}
.mkt-rail-item.on{color:#fff;background:#2a2f38;border-left-color:#8fc743}
.mkt-rail-soon{padding:var(--sp-3) var(--sp-4) var(--sp-1);font-size:var(--fs-micro);color:#6b7280;
  border-top:1px solid #323844;margin-top:var(--sp-3)}
.mkt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:var(--sp-3);
  margin-bottom:var(--sp-4)}
.mkt-kpi{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:2px}
.mkt-kpi-i{font-size:var(--fs-section)}
.mkt-kpi-v{font-size:var(--fs-title);font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.mkt-kpi-l{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--sub)}
.mkt-delta{font-size:var(--fs-micro);font-weight:700;color:var(--sub)}
.mkt-delta.d-up{color:var(--sem-complete-fg)}
.mkt-delta.d-down{color:var(--sem-urgent-fg)}
.mkt-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
@media (max-width:1100px){.mkt-row2{grid-template-columns:1fr}}
.mkt-fn-head{display:grid;grid-template-columns:1fr 64px 84px;font-size:var(--fs-micro);
  font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);
  margin-bottom:var(--sp-1);text-align:right}
.mkt-fn-row{display:grid;grid-template-columns:1fr 64px 84px;align-items:center;gap:var(--sp-2);
  margin-bottom:var(--sp-1)}
.mkt-fn-bar{height:34px;border-radius:6px;display:flex;align-items:center;padding:0 var(--sp-3)}
.mkt-fn-bar.fn-leads{background:var(--sem-new-bg);border:1px solid #bcd8f0}
.mkt-fn-bar.fn-qual{background:#e8e4f6;border:1px solid #cbc2e8}
.mkt-fn-bar.fn-screen{background:#f0e8f6;border:1px solid #dcc8ea}
.mkt-fn-bar.fn-signed{background:var(--sem-complete-bg);border:1px solid var(--sem-complete-bd)}
.mkt-fn-name{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.mkt-fn-n{font-size:var(--fs-body);font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.mkt-fn-c{font-size:var(--fs-label);color:var(--sub);font-variant-numeric:tabular-nums;text-align:right}
.mkt-leg-dot{width:10px;height:10px;border-radius:999px;display:inline-block;flex:none}
.mkt-combo-leg{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--fs-micro);
  font-weight:700;color:var(--sub);margin-bottom:var(--sp-1)}
.mkt-opp-ch{margin-left:auto;color:var(--sub);font-weight:800}

/* --- Command Center v3 (reviewer edits) --- */
.mkt-tagline{font-size:var(--fs-label);color:var(--sub);margin:0 0 var(--sp-3)}
.mkt-health{display:flex;gap:var(--sp-3);align-items:baseline;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}
.mkt-health-k{font-size:var(--fs-label);font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.mkt-health-t{font-size:var(--fs-body);color:var(--ink)}
.mkt-sb-total{font-size:var(--fs-label);font-weight:800;color:var(--ink);margin-bottom:var(--sp-2)}
.mkt-sb-row{display:grid;grid-template-columns:110px 1fr 82px;gap:var(--sp-2);align-items:center;
  margin-bottom:var(--sp-1)}
.mkt-sb-name{font-size:var(--fs-label);font-weight:700;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mkt-sb-track{height:16px;background:var(--sem-neutral-bg);border-radius:8px;overflow:hidden}
.mkt-sb-fill{height:100%;background:var(--sem-new-fg);border-radius:8px}
.mkt-sb-n{font-size:var(--fs-micro);font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums;text-align:right}
.mkt-st{font-size:var(--fs-micro);font-weight:800;white-space:nowrap;padding:2px 8px;border-radius:999px}
.mkt-st-scale{background:var(--sem-complete-bg);color:var(--sem-complete-fg)}
.mkt-st-investigate{background:var(--sem-pending-bg);color:var(--sem-pending-fg)}
.mkt-st-emerging{background:var(--sem-new-bg);color:var(--sem-new-fg)}
.mkt-st-waste{background:var(--sem-urgent-bg);color:var(--sem-urgent-fg)}
.mkt-opp{cursor:pointer}
.mkt-opp-conf{font-size:var(--fs-micro);color:var(--sub);white-space:nowrap;margin-left:auto}
.mkt-opp-ch{margin-left:var(--sp-2)}
.mkt-unknown-row td{color:var(--sub);font-style:italic}
.mkt-unattr{margin-top:var(--sp-3);padding:var(--sp-3);background:var(--sem-neutral-bg);
  border:1px solid var(--sem-neutral-bd);border-radius:8px;font-size:var(--fs-label);color:var(--ink)}
.mkt-unattr .kv{display:inline-flex;gap:6px;margin:2px 10px 2px 0}
.mkt-drawer-t{margin:0;background:var(--sem-neutral-bg);border-radius:8px}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:var(--fs-label)}
.mkt-controls{margin-bottom:var(--sp-3)}
.mkt-ctl{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin:var(--sp-2) 0}
.mkt-ctl-g{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;
  overflow:hidden;box-shadow:var(--shadow)}
.mkt-ctl-g button{border:0;background:transparent;padding:6px 14px;font-size:var(--fs-label);
  font-weight:700;color:var(--sub);cursor:pointer}
.mkt-ctl-g button.on{background:var(--ink);color:#fff}
/* Real calendar range (owner 2026-09-03), replacing the week/month/year
 * buttons -- breaks out of the pill shape those use since it holds labeled
 * date inputs, not a row of equal buttons. */
.mkt-ctl-g.mkt-range{background:transparent;border:none;box-shadow:none;
  overflow:visible;display:inline-flex;align-items:center;gap:var(--sp-2)}
.mkt-range-lbl{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-micro);
  font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.02em}
.mkt-date-in{font-family:inherit;font-size:var(--fs-label);border:1px solid var(--line);
  border-radius:6px;padding:5px 8px;background:#fff;color:var(--ink)}
.mkt-apply-btn{font-family:inherit;font-size:var(--fs-label);font-weight:700;
  border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:6px;
  padding:6px 14px;cursor:pointer}
.mkt-apply-btn:hover{opacity:.85}
.mkt-window{font-size:var(--fs-micro);color:var(--sub);margin:0}
.mkt-covwarn{background:var(--sem-pending-bg);border:1px solid var(--sem-pending-bd);
  color:var(--sem-pending-fg);border-radius:8px;padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-label);margin-bottom:var(--sp-2)}

/* --- Portal Tracking card enrichment (owner 2026-08-23) --- */
.pt-card{padding:var(--sp-3) var(--sp-4) !important;margin-bottom:var(--sp-2)}
.pt-meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);
  margin-top:var(--sp-2)}
.pt-type{font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--sem-new-fg);background:var(--sem-new-bg);padding:2px 8px;border-radius:999px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.pt-days{font-size:var(--fs-micro);color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-days.pt-stale{color:var(--sem-urgent-fg);font-weight:700}
.pt-days.pt-noemail{color:var(--sem-pending-fg);font-weight:700}
/* Attempt count: how many letters this client has actually received on this case.
   Sits beside the age, because "12 days" and "12 days across 7 letters" are
   different situations that read identically without it. */
.pt-tries{font-size:var(--fs-micro);color:var(--sub);font-variant-numeric:tabular-nums;
  white-space:nowrap;padding-left:var(--sp-2);border-left:1px solid var(--line);}
/* The nudge run is exhausted -- emailing again is not the next move. */
.pt-tries.pt-tries-max{color:var(--sem-urgent-fg);font-weight:700}
/* Off Board Tracking: as many columns as there ARE (owner 2026-09-03: "the fifth
   column is randomly thrown underneath -- that's the massive issue"). This was
   hardcoded to 4 when the view had 4 categories; a 5th (Referral -- in portal)
   was added later and this rule never was, so it had nowhere in the 4-slot grid
   to go and wrapped onto its own row at column 1.
   auto-fit was tried first and is WRONG here: it packs as many
   minmax(240px,1fr) tracks as the container's actual width allows, and 5 do
   not fit at 240px minimum inside the .dtwrap 1200px cap with 4 gaps between
   them -- so it silently recreated the exact same wrap, just for the same
   reason as before (a mismatch between how many columns the CSS assumes and
   how many the data has), only now varying by viewport width too.
   --pt-cols is set from the real category count at render time
   (openPortalTracking in app.js), so the column count can never drift from
   the data again regardless of how many categories exist. */
#view-portal-tracking .pipe{grid-template-columns:repeat(var(--pt-cols,5),minmax(200px,1fr))}
#view-portal-tracking .pt-card{cursor:pointer}
#view-portal-tracking .pt-card:hover{box-shadow:0 2px 10px rgba(0,0,0,.10);transform:translateY(-1px)}
@media(max-width:1100px){#view-portal-tracking .pipe{grid-template-columns:repeat(2,minmax(240px,1fr))}}

/* --- Off Board Tracking: spacing (owner 2026-09-02, "just needs to be spaced
   properly") ---------------------------------------------------------------

   This view was built by borrowing the Kanban board's .pipe/.col/.deal rules and
   then bolting a margin-top onto each new card part as it was added: the meta
   row, the phone link, Send invite, Remove access. Four authors of vertical
   space, none of them aware of the others, so the gap between two card elements
   depended on WHICH two they happened to be -- and a card carrying a phone
   number plus a button spaced differently from one carrying just a button.

   The card lays its own children out now, with one gap. Nothing inside sets a
   top margin. Adding a fifth element to a card is then a markup change and not
   a spacing decision.

   The meta row had the same shape of bug from a different direction:
   space-between across a variable number of children. Two children sat pushed to
   opposite edges; three spread evenly; and the attempts chip -- which carries a
   left rule meant to divide it from the age beside it -- could wrap onto its own
   line and draw that rule against nothing. It packs from the left now and the
   divider is drawn only where something precedes it. */

#view-portal-tracking .dtwrap{padding:var(--sp-5) 0 var(--sp-6)}
#view-portal-tracking h1{margin-bottom:var(--sp-2)}
#view-portal-tracking .sub{margin-bottom:var(--sp-5);max-width:68ch}

/* Columns get room to breathe; four dense columns at .8rem read as one block. */
#view-portal-tracking .pipe{gap:var(--sp-4)}
#view-portal-tracking .colbody{padding-top:var(--sp-3)}
#view-portal-tracking .colhead{padding:var(--sp-3) var(--sp-4)}

/* ONE author of vertical space inside a card. */
#view-portal-tracking .pt-card{
  display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4) !important;margin-bottom:var(--sp-3)}
#view-portal-tracking .pt-card > *{margin-top:0}
#view-portal-tracking .pt-meta{margin-top:0}
#view-portal-tracking .pt-tel{margin-top:0}
#view-portal-tracking .pt-send,
#view-portal-tracking .pt-remove{margin-top:0;padding:var(--sp-2)}

/* The name and case number, sharing a baseline rather than a stretched row. */
#view-portal-tracking .is-top{align-items:baseline;gap:var(--sp-2)}

/* Meta packs from the left. The attempts divider is drawn only when something
   actually precedes it on the same line. */
#view-portal-tracking .pt-meta{
  justify-content:flex-start;flex-wrap:wrap;row-gap:var(--sp-1);gap:var(--sp-2)}
#view-portal-tracking .pt-tries{padding-left:0;border-left:0}
#view-portal-tracking .pt-days + .pt-tries{
  padding-left:var(--sp-2);border-left:1px solid var(--line)}
#view-portal-tracking .pt-type{max-width:100%}

/* A phone number is the action on a callback card, so give it the presence of
   one rather than the inline-link size it inherited. */
#view-portal-tracking .pt-tel{
  display:block;text-align:center;padding:var(--sp-2);border-radius:8px}

#view-portal-tracking .colempty{padding:var(--sp-4) var(--sp-2)}

/* --- Review-mode wizard + doc-request panel (owner 2026-08-23) --- */
/* FULL-SCREEN OVERLAY: the wizard owns the viewport; the page under it is
   simply covered (never fought over with [hidden] -- that trap bit 3x). */
#g2wizard{position:fixed;inset:0;z-index:80;background:var(--bg);overflow:hidden;
  padding:var(--sp-3) var(--sp-4)}
body.wiz-lock{overflow:hidden}
/* The left side is a slim case-file rail now (owner 2026-08-25) -- the review
   panel owns the screen; reference material opens in its own tabs. */
.wiz-split{display:grid;grid-template-columns:290px 1fr;gap:var(--sp-4);height:calc(100vh - 24px)}
@media(max-width:980px){.wiz-split{grid-template-columns:1fr;height:auto}}
.wiz-left{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;height:100%;min-height:0}
.wiz-left-head{padding:var(--sp-3);border-bottom:1px solid var(--line);flex:none}
.wiz-client h2{margin:0;font-size:var(--fs-section)}
.wiz-client{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.wiz-left-body{overflow-y:auto;padding:var(--sp-3) var(--sp-4);flex:1;min-height:0}
.wiz-right{display:flex;flex-direction:column;gap:var(--sp-2);height:100%;min-height:0}
.wiz-right-head{flex:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.wiz-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:2px}
.wiz-prog{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-label);font-weight:700;color:var(--sub)}
.wiz-bar{height:6px;background:var(--sem-neutral-bg);border-radius:3px;overflow:hidden}
.wiz-bar div{height:100%;background:var(--sem-complete-fg);border-radius:3px}
.wiz-bggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2)}
.wiz-bg{background:#fff;border:1px solid var(--line);border-radius:8px;padding:var(--sp-2) var(--sp-3)}
.wiz-bg-l{display:block;font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--sub)}
.wiz-bg-v{font-size:var(--fs-label);font-weight:700;color:var(--ink)}
.wiz-stepper{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;
  padding:var(--sp-1) 0}
.wiz-step{width:34px;height:34px;border-radius:999px;border:2px solid var(--sem-neutral-bd);
  background:var(--sem-neutral-bg);font-size:var(--fs-body);font-weight:800;cursor:pointer;color:var(--sub)}
.wiz-step.s-ok{background:var(--sem-complete-bg);border-color:var(--sem-complete-bd);color:var(--sem-complete-fg)}
.wiz-step.s-flag{background:var(--sem-pending-bg);border-color:var(--sem-pending-bd);color:var(--sem-pending-fg)}
.wiz-step.s-auto{background:var(--sem-new-bg);border-color:#bcd8f0;color:var(--sem-new-fg)}
.wiz-step.on{outline:3px solid var(--sem-new-fg);outline-offset:1px}
.wiz-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:var(--sp-4)}
.wiz-infer,.wiz-answer{background:var(--sem-neutral-bg);border:1px solid var(--sem-neutral-bd);
  border-radius:8px;padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2);font-size:var(--fs-body)}
.wiz-infer .rsub,.wiz-answer .rsub{display:block;margin-bottom:2px}
.wiz-answer{background:var(--sem-new-bg);border-color:#bcd8f0}
.wiz-subs{margin:var(--sp-2) 0}
.wiz-q{font-size:var(--fs-body);font-weight:700;margin:var(--sp-3) 0 var(--sp-2)}
.wiz-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.wiz-ok{background:var(--sem-complete-fg);color:#fff}
.wiz-flag{background:var(--sem-pending-fg);color:#fff}
.wiz-notes{width:100%;min-height:74px;border:1px solid var(--line);border-radius:8px;
  padding:var(--sp-2) var(--sp-3);font-size:var(--fs-body);font-family:inherit}
.wiz-notebar{display:flex;gap:var(--sp-2);margin-top:var(--sp-1)}
.wiz-nav{flex:none;display:flex;gap:var(--sp-2);justify-content:space-between;
  padding:var(--sp-2) 0;border-top:1px solid var(--line);background:var(--bg)}
.wiz-done{text-align:center}
.wiz-disp{font-size:var(--fs-title);font-weight:800;margin-bottom:var(--sp-2)}
.wiz-disp.d-ok{color:var(--sem-complete-fg)}
.wiz-disp.d-flag{color:var(--sem-pending-fg)}
.wiz-disp.d-pend{color:var(--sub)}
.g2-headbtns{display:flex;gap:var(--sp-2);margin-left:auto}
.dr-overlay{position:fixed;inset:0;background:rgba(20,22,26,.45);z-index:60;
  display:flex;align-items:center;justify-content:center}
.dr-panel{background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);
  width:min(640px,92vw);max-height:86vh;overflow-y:auto;padding:var(--sp-5)}
.dr-panel-wide{width:min(940px,94vw)}
.dr-cols{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:flex-start;margin:var(--sp-3) 0}
.dr-col{flex:1 1 300px;min-width:0}
.dr-items{display:flex;flex-direction:column;gap:var(--sp-2);margin:var(--sp-2) 0}
.dr-item{display:flex;gap:var(--sp-2);align-items:flex-start;
  padding:var(--sp-1) var(--sp-2);border-radius:6px}
.dr-item:hover{background:var(--hover)}
.dr-item-tick{display:flex;gap:var(--sp-1);align-items:center;flex:0 0 auto;
  padding-top:var(--sp-1);white-space:nowrap}
.dr-qedit{flex:1;min-width:0;font-family:inherit;font-size:var(--fs-label);line-height:1.4;
  resize:vertical;border:1px solid var(--sem-neutral-bd);border-radius:6px;
  padding:var(--sp-1) var(--sp-2);background:var(--sem-neutral-bg)}
.dr-ft{font-size:var(--fs-micro);font-weight:800;color:var(--sub);white-space:nowrap}
.dr-msg{background:var(--sem-neutral-bg);border:1px solid var(--sem-neutral-bd);border-radius:8px;
  padding:var(--sp-3);font-size:var(--fs-label);white-space:pre-wrap;font-family:inherit}
.dr-actions{display:flex;gap:var(--sp-2);justify-content:flex-end;margin-top:var(--sp-3)}
.dr-msg-edit{width:100%;min-height:190px;font-family:inherit;font-size:var(--fs-body);
  line-height:1.5;resize:vertical}
.wiz-q-top{font-size:var(--fs-section);font-weight:800;margin:0 0 var(--sp-3)}
.wiz-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);
  margin:var(--sp-2) 0}
.wiz-fact{background:var(--sem-neutral-bg);border:1px solid var(--sem-neutral-bd);border-radius:8px;
  padding:var(--sp-2) var(--sp-3)}
.wiz-fact span{display:block;font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--sub)}
.wiz-fact b{font-size:var(--fs-body)}
.wiz-warn{color:var(--sem-urgent-fg);font-weight:700;font-size:var(--fs-label)}
.wiz-venue{display:flex;gap:var(--sp-2);align-items:flex-end;margin:var(--sp-2) 0}
.wiz-edit-l{display:flex;flex-direction:column;font-size:var(--fs-micro);font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--sub);gap:4px}
.wiz-input{padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:var(--fs-body)}
.wiz-state{font-size:var(--fs-label);color:var(--sub);margin-bottom:var(--sp-2)}
.wiz-bg[data-editable]{cursor:pointer;position:relative}
.wiz-bg[data-editable]:hover{border-color:var(--sem-new-fg)}
.wiz-bg-edit{position:absolute;top:6px;right:8px;font-size:var(--fs-micro);color:var(--sub)}
.wiz-bg-v{font-size:var(--fs-body);font-weight:700;color:var(--ink);text-transform:capitalize}
.wiz-sub-v{cursor:pointer;color:var(--ink)}
.wiz-sub-v:hover{color:var(--sem-new-fg)}

/* --- Review mode, Apple-grade pass (owner 2026-08-24): clarity, air,
   hierarchy. Later rules override the earlier wizard block. --- */
#g2wizard{background:#f5f5f7;padding:var(--sp-4) var(--sp-5)}
.wiz-left{border:none;border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.wiz-left-head{border-bottom:1px solid rgba(0,0,0,.06);padding:var(--sp-4)}
.wiz-client h2{font-size:var(--fs-title);letter-spacing:-.01em}
.wiz-right-head{background:transparent}
.wiz-prog span{font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.wiz-bar{height:4px;border-radius:2px}
.wiz-stepper{gap:10px}
.wiz-step{width:36px;height:36px;border-width:1.5px;font-size:var(--fs-body);transition:transform .12s}
.wiz-step:hover{transform:scale(1.12)}
.wiz-step.on{outline-width:2px;outline-offset:2px}
.wiz-bggrid{gap:0;background:#fff;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.08);
  padding:var(--sp-2) var(--sp-4);display:flex;flex-wrap:wrap}
.wiz-bg{border:none;background:transparent;border-radius:0;padding:var(--sp-2) var(--sp-4);
  border-right:1px solid rgba(0,0,0,.06);flex:1;min-width:130px}
.wiz-bg:last-child{border-right:none}
.wiz-bg-l{font-size:var(--fs-micro);letter-spacing:.08em;color:#86868b;margin-bottom:2px}
.wiz-bg-v{font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em;text-transform:none}
.wiz-bg[data-editable]:hover{background:#f5f5f7;border-radius:10px}
.wiz-card{border:none;border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.08);
  padding:var(--sp-6) var(--sp-6) var(--sp-5)}
.wiz-q-top{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.25;
  margin-bottom:var(--sp-4)}
.wiz-infer{background:transparent;border:none;padding:0;margin-bottom:var(--sp-4);
  font-size:var(--fs-section);line-height:1.5;color:#1d1d1f}
.wiz-answer{background:#f5f5f7;border:none;border-radius:14px;padding:var(--sp-4);
  margin-bottom:var(--sp-4);font-size:var(--fs-body);line-height:1.55}
.wiz-answer .rsub{color:#86868b;letter-spacing:.08em;margin-bottom:6px}
.wiz-facts{gap:0;background:#f5f5f7;border-radius:14px;padding:var(--sp-2) var(--sp-3);
  display:flex;flex-wrap:wrap}
.wiz-fact{background:transparent;border:none;flex:1;min-width:120px;padding:var(--sp-3);
  border-right:1px solid rgba(0,0,0,.06)}
.wiz-fact:last-child{border-right:none}
.wiz-fact span{color:#86868b;letter-spacing:.08em}
.wiz-fact b{font-size:var(--fs-section);font-weight:700;letter-spacing:-.01em}
.wiz-q{font-size:var(--fs-section);font-weight:600;margin:var(--sp-4) 0 var(--sp-3)}
.wiz-actions{gap:10px}
.wiz-actions .btn{border-radius:999px;padding:9px 20px;font-weight:600}
.wiz-notes{border-radius:12px;border-color:rgba(0,0,0,.12);background:#fafafa}
.wiz-nav{border-top:none;padding-top:var(--sp-3)}
.wiz-nav .btn{border-radius:999px;padding:9px 22px}
.wiz-state{color:#86868b}
/* Sub-factors as stacked QUESTIONS (owner 2026-08-25): each causation/pretext
   factor is its own question + answer block, not a dense labelled grid. */
.wiz-subq{padding:var(--sp-3) 0;border-bottom:1px solid rgba(0,0,0,.05)}
.wiz-subq:last-child{border-bottom:none}
.wiz-subq-q{font-size:var(--fs-body);font-weight:600;color:#1d1d1f;margin-bottom:4px}
.wiz-subq-a{font-size:var(--fs-body);line-height:1.5;color:var(--ink);cursor:pointer;
  background:#f5f5f7;border-radius:10px;padding:8px 12px;display:block}
.wiz-subq-a:hover{background:#eef1f6}
.wiz-subq-a.empty{color:#86868b;font-style:italic}
.wiz-subq-src{font-size:var(--fs-micro);color:#86868b;margin-top:3px}
/* Knowledge element: decision-maker rows; the unknown decision-maker is the trap. */
.wiz-know b{cursor:pointer;display:block}
.wiz-know b:hover{color:var(--sem-new-fg)}
.wiz-know.trap b{color:var(--sem-urgent-fg)}
/* TDI subscriber lookup card */
.wiz-tdi{background:#f5f5f7;border-radius:14px;padding:var(--sp-4);margin-bottom:var(--sp-4)}
.wiz-tdi-c{background:#fff;border-radius:10px;padding:var(--sp-3);margin:var(--sp-2) 0;
  font-size:var(--fs-body);line-height:1.5;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.wiz-tdi-b{display:inline-block;font-size:var(--fs-micro);font-weight:700;border-radius:999px;
  padding:2px 10px;margin:4px 0}
.wiz-tdi-b.on{background:var(--sem-complete-bg);color:var(--sem-complete-fg)}
.wiz-tdi-b.off{background:var(--sem-urgent-bg);color:var(--sem-urgent-fg)}
.wiz-tdi-use{margin-top:4px}
.wiz-warn{margin-top:var(--sp-3)}
/* Case-file rail: plain-named links, one per line, each opening its own tab. */
.wiz-rail-k{margin-bottom:var(--sp-2)}
.wiz-file{display:flex;align-items:center;gap:10px;padding:11px 12px;margin:6px 0;
  background:#f5f5f7;border-radius:12px;color:var(--ink);text-decoration:none;
  font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em}
.wiz-file:hover{background:#eef1f6}
.wiz-file.off{opacity:.6}
.wiz-file-ic{flex:none}
.wiz-file-l{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiz-file-open{flex:none;color:#86868b;font-weight:400}
.wiz-rail-none{margin:6px 2px}
.wiz-msgs{margin-top:var(--sp-3)}
.wiz-msgs summary{cursor:pointer;font-weight:600;font-size:var(--fs-body);padding:8px 2px;
  color:var(--ink)}
.wiz-storyp{font-size:var(--fs-body);line-height:1.55;white-space:pre-wrap;padding:4px 2px}
/* Decline rows: vertical separators between name | summary | actions, plus
   the age/source meta line under the name (owner 2026-08-24). */
.drow3 .dcol-name{flex-wrap:wrap;border-right:1px solid var(--line);padding-right:1rem;
  align-content:center}
.drow3 .dcol-act{border-left:1px solid var(--line);padding-left:1rem}
.dmeta{flex-basis:100%;font-size:var(--fs-micro);color:var(--sub);margin-top:2px}
.mkt-remainder td{color:var(--sub);background:var(--sem-neutral-bg);font-size:var(--fs-label)}

/* ===== Review mode, professional pass (owner 2026-08-25): one system --
   white surfaces, hairline rules, a single shadow spec, one radius family,
   quiet chrome. These FINAL rules override the earlier wizard blocks. ===== */
#g2wizard{background:#f6f7f9}
.wiz-left,.wiz-card,.wiz-bggrid{border:1px solid rgba(20,24,32,.08);border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,32,.05)}
/* Header: the kicker names the element; the question is the headline. */
.wiz-kicker{font-size:var(--fs-micro);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#86868b;margin-bottom:6px}
.wiz-q-top{font-size:var(--fs-title);font-weight:700;letter-spacing:-.015em;line-height:1.3;
  margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid rgba(20,24,32,.07)}
/* Stepper: state is the only decoration -- green done, amber flagged, ring = here. */
.wiz-step{width:32px;height:32px;border:1px solid rgba(20,24,32,.15);background:#fff;
  border-radius:50%;font-size:var(--fs-label);color:#86868b;transition:transform .12s}
.wiz-step.s-ok{background:var(--sem-complete-bg);border-color:var(--sem-complete-bd);color:var(--sem-complete-fg)}
.wiz-step.s-flag{background:var(--sem-pending-bg);border-color:var(--sem-pending-bd);color:var(--sem-pending-fg)}
.wiz-step.s-auto{background:var(--sem-complete-bg);border-color:var(--sem-complete-bd);color:var(--sem-complete-fg)}
.wiz-step.on{outline:2px solid var(--ink);outline-offset:2px}
.wiz-bar{background:rgba(20,24,32,.08)}
.wiz-bar>div{background:var(--sem-complete-fg)}
/* Facts strip: labels quiet, values firm; the edit pencil appears on hover only. */
.wiz-bggrid{background:#fff}
.wiz-bg-l{font-size:var(--fs-micro);letter-spacing:.07em;color:#9a9aa0}
.wiz-bg-v{font-weight:600}
.wiz-bg-edit{opacity:0;transition:opacity .12s}
.wiz-bg[data-editable]:hover .wiz-bg-edit{opacity:1}
/* Body panels: one gray, one radius. */
.wiz-answer,.wiz-facts,.wiz-tdi,.wiz-subq-a{background:#f6f7f9;border-radius:10px}
.wiz-subq-a:hover{background:#eef1f5}
.wiz-subq-src{color:#9a9aa0}
/* Actions: one primary (Confirm), one cautionary outline, one ghost -- equal
   height, aligned, separated from the body by a hairline. */
.wiz-actions{border-top:1px solid rgba(20,24,32,.07);padding-top:var(--sp-4);
  margin-top:var(--sp-4);gap:10px}
.wiz-actions .btn{border-radius:9px;padding:9px 18px;font-weight:600;border:1px solid transparent}
.wiz-ok{background:var(--sem-complete-fg);color:#fff}
.wiz-ok:hover{filter:brightness(1.08)}
.wiz-flag{background:#fff;color:var(--sem-pending-fg);border-color:var(--sem-pending-bd)}
.wiz-flag:hover{background:var(--sem-pending-bg)}
.wiz-actions .quiet{background:transparent;color:#86868b;border-color:rgba(20,24,32,.15)}
/* Notes: a quiet writing surface. */
.wiz-notes{background:#fff;border:1px solid rgba(20,24,32,.12);border-radius:10px;
  font-size:var(--fs-body);line-height:1.5}
.wiz-notes:focus{outline:2px solid var(--sem-new-fg);outline-offset:1px;border-color:transparent}
.wiz-notebar .btn{border-radius:9px}
/* Bottom nav: a fixed bar, Next is the one primary. */
.wiz-nav{border-top:1px solid rgba(20,24,32,.08);padding:var(--sp-3) 0 0}
.wiz-nav .btn{border-radius:9px;padding:9px 20px}
.wiz-nav #wiz-next{background:var(--ink);color:#fff;font-weight:700}
/* Case-file rail: hairline list, not gray slabs. */
.wiz-file{background:#fff;border:1px solid rgba(20,24,32,.08);margin:5px 0;border-radius:10px}
.wiz-file:hover{border-color:var(--sem-new-fg);background:#fff}
.wiz-file-ic{opacity:.75}
.wiz-msgs summary{color:#5c6672}
/* Knowledge + TDI internals inherit the same system. */
.wiz-tdi-c{border:1px solid rgba(20,24,32,.07);box-shadow:none}
.wiz-warn{background:var(--sem-urgent-bg);color:var(--sem-urgent-fg);border-radius:10px;
  padding:var(--sp-3);font-size:var(--fs-body);line-height:1.45}

/* ===== Live Calls page + board handoff badge (SPEC-live-handoff) ===== */
.cflag.handoff{border-radius:6px;padding:.05rem .4rem}
.cflag.handoff.warn{background:var(--sem-pending-bg);color:var(--sem-pending-fg)}
.cflag.handoff.ok{background:var(--sem-complete-bg);color:var(--sem-complete-fg)}
/* ── Live Calls — Apple / macOS Sonoma aesthetic (owner spec 2026-08-27) ──
 * Font-size stays on the --fs-* token scale (lint gate); the Apple palette,
 * glass surfaces, segmented control and pastel pills are applied on top. Tuned
 * for light mode. */
#view-live-calls{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",
  "SF Pro Text",sans-serif;background:linear-gradient(180deg,#F5F5F7 0%,#ECECF1 100%);
  padding-bottom:var(--sp-6)}
#view-live-calls h1{color:#1C1C1E;letter-spacing:-.02em}
#view-live-calls .sub{color:#6C6C70}
/* Segmented control (iOS pill tabs) */
.lc-tabs{display:inline-flex;gap:2px;margin:var(--sp-4) 0 var(--sp-3);
  background:rgba(120,120,128,.12);border-radius:9px;padding:2px}
.lc-tab{background:transparent;border:none;border-radius:7px;padding:.4rem 1.1rem;
  font-size:var(--fs-label);font-weight:600;color:#6C6C70;cursor:pointer;
  transition:all .2s ease-in-out}
.lc-tab.on{background:#fff;color:#1C1C1E;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.lc-tab .n{margin-left:.35rem;font-variant-numeric:tabular-nums;color:#8E8E93}
/* Glass cards (Live now) */
.lc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--sp-3);margin-top:var(--sp-3)}
.lc-card{background:rgba(255,255,255,.72);backdrop-filter:blur(25px) saturate(180%);
  -webkit-backdrop-filter:blur(25px) saturate(180%);border:1px solid rgba(255,255,255,.5);
  border-radius:18px;padding:var(--sp-4);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.05);
  transition:all .2s ease-in-out}
.lc-card:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.09)}
.lc-hd{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2)}
.lc-who b{font-size:var(--fs-section);letter-spacing:-.01em;color:#1C1C1E}
.lc-ph{font-size:var(--fs-label);color:#6C6C70;margin-left:.4rem}
.lc-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.5rem 0;
  font-size:var(--fs-label);color:#6C6C70}
.lc-branch{font-weight:600;color:#0284C7;text-transform:capitalize;
  background:rgba(2,132,199,.1);border-radius:8px;padding:.1rem .5rem}
.lc-dur{margin-left:auto;font-variant-numeric:tabular-nums;color:#8E8E93}
.lc-tx{font-size:var(--fs-label);line-height:1.5;color:#1C1C1E;white-space:pre-wrap;
  max-height:9rem;overflow-y:auto;background:rgba(120,120,128,.06);border-radius:12px;
  padding:.6rem .7rem}
.lc-tx.empty{color:#8E8E93;font-style:italic}
/* Status pills (pastel) */
.lc-handoff{font-size:var(--fs-micro);font-weight:600;border-radius:12px;padding:.2rem .6rem;
  white-space:nowrap;letter-spacing:.01em}
.lc-handoff.none{color:#8E8E93;background:rgba(120,120,128,.1)}
.lc-handoff.rung{background:#E0F2FE;color:#0284C7}
.lc-handoff.on{background:#E4F9EC;color:#12B76A}
/* Today's log — glass container + table */
#lc-today{background:rgba(255,255,255,.72);backdrop-filter:blur(25px) saturate(180%);
  -webkit-backdrop-filter:blur(25px) saturate(180%);border:1px solid rgba(255,255,255,.5);
  border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.04);padding:8px 8px 4px;
  margin-top:var(--sp-3)}
.lc-today-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-label)}
.lc-today-tbl th{text-align:left;color:#8E8E93;font-weight:600;font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:.05em;padding:.6rem .8rem}
.lc-today-tbl td{padding:.7rem .8rem;border-top:1px solid rgba(120,120,128,.14);
  vertical-align:middle;color:#1C1C1E}
.lc-today-tbl tbody tr:first-child td{border-top:none}
.lc-today-tbl tr[data-callid]{cursor:pointer;transition:all .2s ease-in-out}
.lc-today-tbl tr[data-callid]:hover td{background:rgba(255,255,255,.6)}
.lc-today-tbl tr[data-callid]:hover td:first-child{border-radius:12px 0 0 12px}
.lc-today-tbl tr[data-callid]:hover td:last-child{border-radius:0 12px 12px 0}
.lc-today-tbl td b{color:#1C1C1E}
.lc-t-time{color:#8E8E93;font-variant-numeric:tabular-nums;white-space:nowrap}
.lc-t-out{text-transform:capitalize;font-size:var(--fs-micro);font-weight:600;border-radius:12px;
  padding:.2rem .55rem;background:rgba(120,120,128,.1);color:#6C6C70}
.lc-t-out.ok{background:#E4F9EC;color:#12B76A}
.lc-t-out.miss{background:#FEF0C7;color:#DC6803}
.lc-src{background:rgba(120,120,128,.1);border-radius:8px;padding:.15rem .5rem;
  text-transform:capitalize;font-size:var(--fs-micro);color:#6C6C70}
.lc-txlink{color:#0284C7;font-weight:600;white-space:nowrap}
/* Frosted pop-out drawer */
.lc-drawer{position:fixed;inset:0;z-index:60}
.lc-drawer-scrim{position:absolute;inset:0;background:rgba(20,24,28,.28);opacity:0;
  transition:opacity .2s}
.lc-drawer.open .lc-drawer-scrim{opacity:1}
.lc-drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(560px,94vw);
  background:rgba(255,255,255,.82);backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);border-left:1px solid rgba(255,255,255,.5);
  box-shadow:-12px 0 40px rgba(0,0,0,.12);transform:translateX(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);overflow-y:auto;padding:var(--sp-5);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif}
.lc-drawer.open .lc-drawer-panel{transform:translateX(0)}
.lc-drawer-x{position:absolute;top:.6rem;right:.9rem;background:transparent;border:none;
  font-size:var(--fs-title);line-height:1;color:#8E8E93;cursor:pointer}
.lc-d-hd h2{margin:0;font-size:var(--fs-title);color:#1C1C1E;letter-spacing:-.02em}
.lc-d-sub{display:flex;gap:.5rem;align-items:center;margin-top:.4rem}
.lc-live-dot{color:#12B76A;font-size:var(--fs-micro);font-weight:700}
.lc-bg{margin:var(--sp-4) 0;border-radius:14px;overflow:hidden;background:rgba(120,120,128,.06)}
.lc-bg-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .8rem;
  font-size:var(--fs-label);color:#1C1C1E;border-bottom:1px solid rgba(120,120,128,.12)}
.lc-bg-row:last-child{border-bottom:none}
.lc-bg-row span{color:#8E8E93}
.lc-d-sec{margin-top:var(--sp-4)}
.lc-d-sec h3{margin:0 0 .5rem;font-size:var(--fs-micro);text-transform:uppercase;
  letter-spacing:.05em;color:#8E8E93;font-weight:600}
.lc-ans{font-size:var(--fs-label);line-height:1.55;white-space:pre-wrap;color:#1C1C1E;
  background:rgba(120,120,128,.06);border-radius:12px;padding:.6rem .7rem}
.lc-d-tx{font-size:var(--fs-label);line-height:1.6;white-space:pre-wrap;color:#1C1C1E;
  background:rgba(120,120,128,.06);border-radius:12px;padding:.7rem .8rem;max-height:48vh;
  overflow-y:auto}
.lc-d-open{margin-top:var(--sp-4)}

/* ============ SETTLEMENTS / CRM ============ */
.stl-table{width:100%;border-collapse:collapse;font-size:var(--fs-label)}
.stl-table th{text-align:left;font-size:var(--fs-meta);color:var(--muted);
  font-weight:700;padding:var(--sp-2);border-bottom:1px solid var(--line)}
.stl-table td{padding:var(--sp-2);border-bottom:1px solid var(--line);color:var(--fg);
  vertical-align:top}
.stl-table .stl-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stl-sub{font-size:var(--fs-meta);color:var(--muted)}
.stl-actions{white-space:nowrap;text-align:right}
.stl-mini{font-family:inherit;font-size:var(--fs-meta);font-weight:700;
  border:1px solid var(--line);background:var(--panel);color:var(--fg);
  border-radius:6px;padding:var(--sp-1) var(--sp-2);cursor:pointer;margin-left:var(--sp-1)}
.stl-mini.send{border-color:var(--brand);background:var(--brand);color:#fff}
.stl-mini:disabled{opacity:.5;cursor:default}
.stl-badge{display:inline-block;font-size:var(--fs-meta);font-weight:700;
  border-radius:var(--radius-pill);padding:0 var(--sp-2);
  background:rgba(120,120,128,.14);color:var(--muted)}
.stl-badge.ok{background:var(--brand);color:#fff}
.stl-badge.neg{background:rgba(224,83,61,.14);color:var(--red)}
.stl-table tr.stl-neg td{background:rgba(224,83,61,.05)}
/* Add/edit form overlay */
.stl-ov{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;
  align-items:center;justify-content:center;z-index:60;padding:var(--sp-3)}
.stl-ov[hidden]{display:none}
.stl-card{background:var(--bg);border-radius:12px;max-width:44rem;width:100%;
  max-height:88vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.stl-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3);border-bottom:1px solid var(--line)}
.stl-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);padding:var(--sp-3)}
.stl-grid label{display:flex;flex-direction:column;gap:var(--sp-1);
  font-size:var(--fs-meta);color:var(--muted)}
.stl-grid .stl-wide{grid-column:1 / -1}
.stl-in{font-family:inherit;font-size:var(--fs-label);color:var(--fg);
  border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:var(--sp-2)}
input[type=checkbox].stl-in{width:auto;padding:0;border:none;background:transparent}
.stl-sect{font-size:var(--fs-meta);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);border-top:1px solid var(--line);
  margin-top:var(--sp-2);padding-top:var(--sp-3)}
.stl-grid > .stl-sect:first-child{border-top:none;margin-top:0;padding-top:0}
.stl-check{flex-direction:row!important;align-items:center;gap:var(--sp-2)!important}
.stl-foot{display:flex;gap:var(--sp-2);justify-content:flex-end;
  padding:var(--sp-3);border-top:1px solid var(--line)}
@media (max-width:640px){.stl-grid{grid-template-columns:1fr}}


/* --- Monitoring: the long-watch file (owner ruling 2026-08-29) -------------
   NOT a board card. A card is sized for a fast decision; this is sized to be
   re-read weeks later by someone who has forgotten the case, so it gets room and
   leads with what we are watching for.

   Deliberately COLOURLESS beyond the tokens: no red, no amber, no staleness dot.
   These cases are not being worked on purpose, and colouring them would invent an
   urgency the monitoring stage exists to remove. */
.mon-list{display:flex;flex-direction:column;gap:.9rem;margin-top:1rem}
.mon-file{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:1rem 1.1rem;box-shadow:var(--shadow)}
.mon-head{display:flex;align-items:baseline;gap:1rem;justify-content:space-between}
.mon-who{display:flex;align-items:baseline;gap:.6rem;min-width:0;flex-wrap:wrap}
.mon-who b{font-size:var(--fs-section);font-weight:700}
.mon-num{font-size:var(--fs-label);color:var(--sub);font-variant-numeric:tabular-nums}
.mon-open{flex:0 0 auto}

/* The question the reader arrived with, so it sits above everything else. */
.mon-watch{margin-top:.75rem}
.mon-k{display:block;font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sub);margin-bottom:.25rem}
.mon-watch-text{font-size:var(--fs-body);line-height:1.5;background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;cursor:pointer}
.mon-watch-text:hover{border-color:var(--brand)}
.mon-watch-text:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Nothing recorded is a PROMPT, not a blank: an unanswered watch file is the one
   that will be useless in six weeks. */
.mon-watch-text.mon-unset{color:var(--sub);font-style:italic}

.mon-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:.7rem 1.2rem;margin:.85rem 0 0}
.mon-facts>div{min-width:0}
.mon-facts dt{font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sub)}
.mon-facts dd{margin:.15rem 0 0;font-size:var(--fs-body);overflow-wrap:anywhere}
.mon-none{color:var(--sub)}

/* An empty tab is where someone learns what the tab is for. */
.mon-empty{background:var(--card);border:1px dashed var(--line);border-radius:10px;
  padding:1.4rem 1.5rem;margin-top:1rem;max-width:60ch}
.mon-empty b{display:block;font-size:var(--fs-section);margin-bottom:.35rem}
.mon-empty span{color:var(--sub);font-size:var(--fs-body);line-height:1.55}

@media (max-width:640px){
  .mon-head{flex-direction:column;align-items:flex-start;gap:.5rem}
  .mon-file{padding:.85rem .9rem}
}

/* --- Batch declination review -------------------------------------------- */
/* Wider than a standard modal: the point is to READ what is about to go out,
   so the list needs room and its own scroll rather than pushing the buttons
   off-screen on a long batch. */
.modal.dp-batch-modal { width:min(680px, 94vw); }
.dp-batch-reason {
  margin:.5rem 0 .75rem; padding:.5rem .65rem; border-radius:8px;
  background:var(--hover); border:1px solid var(--line);
  font-size:var(--fs-body); color:var(--ink);
}
.dp-batch-reason .lbl { color:var(--sub); margin-right:.4rem; }
.dp-batch-list { max-height:44vh; overflow-y:auto; border:1px solid var(--line);
  border-radius:8px; }
.dp-batch-item { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:.75rem; padding:.55rem .7rem; border-bottom:1px solid var(--line); }
.dp-batch-item:last-child { border-bottom:none; }
.dp-batch-who { font-size:var(--fs-body); color:var(--ink); min-width:0; }
.dp-batch-who .noname { color:var(--sub); font-style:italic; }
.dp-batch-meta { display:block; font-size:var(--fs-meta); color:var(--sub); }
.dp-batch-why { font-size:var(--fs-meta); color:var(--sub); min-width:0; }
.dp-batch-why .t { color:var(--ink); }
.dp-batch-over { margin:.6rem 0 0; font-size:var(--fs-body); color:var(--amber); }
/* On a phone the two columns leave the reason ~18 characters wide and it wraps
   to four lines per case, so a 14-case batch becomes unreadable. Stack them:
   who, then why, which is the reading order anyway. */
@media (max-width:560px) {
  .dp-batch-item { grid-template-columns:1fr; gap:.15rem; }
  .dp-batch-list { max-height:52vh; }
}

/* ---- The Gate 1 reckoning on the decline card -----------------------------
   Three states, and they must stay three. The semantic pairs already in :root
   carry the meaning: complete = passed, urgent = an established failure,
   pending = nobody asked yet. Pending is deliberately NOT red -- it is the
   Universal Rule showing through, and a reviewer who reads it as a failure will
   decline a case the gate deliberately sent to them. */
.dgates{margin:var(--sp-3) 0 0;border-top:1px solid var(--line);padding-top:var(--sp-2);}
.dgates>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:var(--sp-2);}
.dgates>summary::-webkit-details-marker{display:none;}
.dgates>summary::before{content:"▸";color:var(--sub);font-size:var(--fs-label);}
.dgates[open]>summary::before{content:"▾";}
.dgates-t{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.06em;
  color:var(--sub);font-weight:600;}
.dgates-lead{font-size:var(--fs-label);color:var(--ink);}
.gclaim{margin-top:var(--sp-3);}
.gclaim-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2);
  margin-bottom:var(--sp-1);}
.gclaim-name{font-size:var(--fs-body);font-weight:600;color:var(--ink);}
.gclaim-count{font-size:var(--fs-micro);color:var(--sub);
  text-transform:uppercase;letter-spacing:.05em;}
.gchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-1);}
.gchip{display:inline-flex;align-items:baseline;gap:var(--sp-1);
  padding:2px var(--sp-2);border-radius:3px;border:1px solid transparent;
  font-size:var(--fs-label);max-width:100%;}
.gchip .gname{font-weight:600;white-space:nowrap;}
.gchip .gdetail{opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:26ch;}
.gchip.good{background:var(--sem-complete-bg);color:var(--sem-complete-fg);
  border-color:var(--sem-complete-bd);}
.gchip.bad{background:var(--sem-urgent-bg);color:var(--sem-urgent-fg);
  border-color:var(--sem-urgent-bd);}
/* The FAILED reason is the decision. It gets a full row and wraps rather than
   truncating -- nobody should have to hover a chip to learn why a real person
   is being declined. Passed and to-check stay compact; they are context. */
.gchip.bad{flex-basis:100%;align-items:flex-start;}
.gchip.bad .gdetail{white-space:normal;max-width:none;overflow:visible;}
.gchip.warn{background:var(--sem-pending-bg);color:var(--sem-pending-fg);
  border-color:var(--sem-pending-bd);}
@media (max-width:720px){.gchip .gdetail{display:none;}}

/* ---- Refer to someone not on the roster ---------------------------------- */
.partner-other[hidden]{display:none}
.partner-other{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);}
.po-lab{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-body);color:var(--ink);cursor:pointer;}
.po-fields{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2);}
.po-fields[hidden]{display:none;}   /* display:flex outranks the bare [hidden] */
.po-f{flex:1 1 12rem;display:flex;flex-direction:column;gap:.2rem;}
.po-f span{font-size:var(--fs-label);color:var(--sub);}
.po-fields input{width:100%;font-family:inherit;font-size:var(--fs-body);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:.4rem .6rem;background:var(--bg);}

/* ---- Sent to client: the copy of what actually went out ------------------- */
/* One row per letter, collapsed. The newest opens by default -- "what did we last
   tell them" is the question this pane is usually opened to answer. */
.sn-item{border:1px solid var(--line);border-radius:8px;margin-bottom:var(--sp-2);
  background:var(--bg);}
.sn-item > summary{display:flex;align-items:baseline;gap:var(--sp-2);cursor:pointer;
  padding:var(--sp-2) var(--sp-3);font-size:var(--fs-body);color:var(--ink);}
.sn-when{font-size:var(--fs-micro);color:var(--sub);font-variant-numeric:tabular-nums;
  white-space:nowrap;}
.sn-what{flex:1 1 auto;font-weight:600;}
/* Delivery state on the row's face: a letter that never arrived is not a record of
   what we said, it is a thing to fix, and it must not read the same as one that did. */
.sn-st{font-size:var(--fs-micro);white-space:nowrap;font-weight:700;}
.sn-ok{color:var(--sub);font-weight:400;}
.sn-wait{color:var(--sem-pending-fg);}
.sn-bad{color:var(--sem-urgent-fg);}
.sn-meta{padding:0 var(--sp-3) var(--sp-2);font-size:var(--fs-micro);color:var(--sub);}
.sn-err{margin:0 var(--sp-3) var(--sp-2);font-size:var(--fs-micro);
  color:var(--sem-urgent-fg);}
/* The letter itself: the claimant's own line breaks preserved, which is the whole
   point of keeping a copy. Wrapped, never horizontally scrolled. */
.sn-body{margin:0;padding:var(--sp-3);border-top:1px solid var(--line);
  font-family:inherit;font-size:var(--fs-body);color:var(--ink);
  white-space:pre-wrap;word-break:break-word;}
.sn-empty{color:var(--sub);font-style:italic;}

/* Separator between the two waits in the banner. Both are "someone who is not us
   has not come back yet"; the dot keeps them one thought, not two banners. */
.pa-sep{color:var(--sub);margin:0 var(--sp-2);}

/* The callback card's phone number: the action, not a detail. A tel: link so it
   dials from a desk phone or a handset without anyone re-typing it. */
.pt-tel{display:inline-block;margin-top:var(--sp-2);font-size:var(--fs-body);
  font-variant-numeric:tabular-nums;color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:5px;padding:.25rem .6rem;background:var(--bg);}
.pt-tel:hover,.pt-tel:focus-visible{border-color:var(--sem-urgent-fg);}

/* The questions a document request actually asked. The covering note is just a
   link; these are the substance, and every generated form carries a different set. */
.sn-asked{margin:0;padding:var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 1.1rem);
  border-top:1px solid var(--rule-soft,var(--line));list-style:disc;}
.sn-asked li{font-size:var(--fs-body);color:var(--ink);margin:.15rem 0;}

/* Mark retained: the one disposition that is good news. Distinguished from Decline
   (red) without shouting -- it closes a case, so it should not read as a neutral
   third option beside two ways of saying no. */
.btn.ghost.retain{color:var(--brand);border-color:var(--brand);}
.btn.ghost.retain:hover{background:var(--brand);color:#fff;}

/* Cause of action: the chips are the first thing on the card, because it is the first
   question -- which law are we working this under. */
.g2-claims{margin:.5rem 0 .2rem}
.g2-claimhd{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.05em;
  color:var(--sub);font-weight:800;margin-bottom:.35rem}
.g2-chiprow{display:flex;flex-wrap:wrap;gap:.4rem}
.g2-claimchip{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  font-family:inherit;text-align:left;cursor:pointer;border:1px solid var(--line);
  background:var(--panel);border-radius:8px;padding:.3rem .6rem;max-width:22rem}
.g2-claimchip .g2-chipname{font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.g2-claimchip .g2-chipstate{font-size:var(--fs-micro);color:var(--sub);font-weight:600}
.g2-claimchip.live{border-color:var(--sem-complete-bd);background:var(--sem-complete-bg)}
.g2-claimchip.live .g2-chipstate{color:var(--sem-complete-fg)}
.g2-claimchip.dead{opacity:.62}
.g2-claimchip.dead .g2-chipname{font-weight:600;color:var(--sub)}
/* Dropped reads as an open question, not a verdict -- dashed, the way an unanswered
   arbitration reads elsewhere on this card. */
.g2-claimchip.dropped{border-style:dashed;border-color:var(--sem-pending-bd);
  background:var(--sem-pending-bg)}
.g2-claimchip.dropped .g2-chipstate{color:var(--sem-pending-fg)}
.g2-claimchip.on{outline:2px solid var(--brand);outline-offset:1px}
.g2-claimchip:not([data-g2claim]){cursor:default}
.g2-claimmore{margin-top:var(--sp-2)}
.g2-claimmore summary{cursor:pointer;font-size:var(--fs-micro);color:var(--sub);
  font-weight:600;list-style:none}
.g2-claimmore summary::-webkit-details-marker{display:none}
.g2-claimmore summary::before{content:"B8";display:inline-block;margin-right:.3rem;
  transition:transform .15s ease}
.g2-claimmore[open] summary::before{transform:rotate(90deg)}
.g2-claimmore .g2-chiprow{margin-top:var(--sp-2)}
.g2-claimnone{font-size:var(--fs-label);color:var(--sub)}
.g2-claimnote{font-size:var(--fs-micro);color:var(--sub);font-style:italic;margin:.35rem 0 0}

/* No claim fits: the reasons stand in for the element grid. Deliberately quiet -- this
   is a finished answer, not an alarm, and not something to work through. */
.g2-noclaim .g2-ncintro{font-size:var(--fs-body);color:var(--sub);margin:.1rem 0 .6rem;
  max-width:56ch}
.g2-nclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.g2-ncrow{display:grid;grid-template-columns:minmax(8rem,14rem) 1fr;gap:.6rem;
  align-items:baseline;padding:.4rem .6rem;border-left:3px solid var(--line);
  background:var(--panel);border-radius:0 6px 6px 0}
.g2-ncname{font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.g2-ncwhy{font-size:var(--fs-small);color:var(--sub)}
@media (max-width:720px){.g2-ncrow{grid-template-columns:1fr}}