/* ============================================================================
   Pulses OS - FCA Child Intake Suite.
   ALL new CSS for the app shell lives here. app.css and overrides.css are the
   design system and are copied byte-for-byte from _design/ - never edited.
   fit.css is deliberately NOT used: it is a fixed-size mockup hack.
   ============================================================================ */

/* ---------- fluid shell ---------------------------------------------------- */
html,body{min-height:100%}
.shell{width:auto;max-width:1600px;min-height:100vh;margin-left:248px}

/* ---------- left sidebar --------------------------------------------------- */
.side-nav{
  position:fixed;top:0;left:0;bottom:0;width:248px;z-index:20;
  background:#fff;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
}
.side-brand{padding:30px 26px 26px;flex:none}
.side-brand .logo{width:148px}
.side-list{display:flex;flex-direction:column;flex:1}

.nav-i{
  display:flex;align-items:center;gap:12px;
  padding:12px 24px 12px 21px;                 /* 21 + 3px accent = 24 */
  border-left:3px solid transparent;
  color:inherit;text-decoration:none;
}
.nav-i:hover{background:rgba(241,245,248,.5);color:inherit;text-decoration:none}
.nav-i.on{background:var(--mist);border-left-color:var(--blue)}
.nav-i.on:hover{background:var(--mist)}
.nav-t{display:flex;flex-direction:column;min-width:0}
.nav-en{font-family:'Exo 2',sans-serif;font-weight:600;font-size:14px;color:var(--midnight);line-height:1.3}
.nav-ar{font-size:12px;color:var(--faint);line-height:1.45;margin-top:2px}
.nav-ic{
  display:none;flex:none;width:30px;height:30px;border-radius:9px;
  align-items:center;justify-content:center;
  font-family:'Exo 2',sans-serif;font-weight:600;font-size:14px;
  color:var(--midnight);background:var(--mist);
}
.nav-i.on .nav-ic{background:var(--blue);color:#fff}

/* ---------- top bar: sidebar owns the logo, so org sits on the left --------- */
.top > .who-b{text-align:left}
.top .who > .who-b.who-u{padding-left:0;border-left:none}

/* The mockups had the full 1600px to themselves; here the sidebar takes 248 of
   it, so equal-width strip cells are too narrow for "CH-2026-0417" and
   "Guardian verified" and they wrap. Size the cells to their content instead
   and distribute only the slack - the strip still reads as one calm line. */
@media (min-width:1101px){
  .strip .f{flex:1 1 auto}
  .strip .v{white-space:nowrap}
}

/* ---------- fluid replacement for fit.css's .grow --------------------------- */
.grow > .sec{height:100%;min-width:0;display:flex;flex-direction:column}
.grow > .sec > .panel{flex:1;display:flex;flex-direction:column}

/* ============================================================================
   SCREEN 01 - Live Intake Session.
   The mockup's inline <style> was a 1200x1600 portrait-tablet fit hack, so the
   structural classes below are restated at the native app.css scale. Gauges use
   app.css's own 4-across .gauges grid; no override here.
   ============================================================================ */
.sugg{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sugg-l{max-width:900px;min-width:0}
.sugg-t{font-family:'Exo 2',sans-serif;font-weight:600;font-size:30px;color:var(--midnight);letter-spacing:-.4px}
.sugg-s{font-size:16px;color:var(--soft);margin-top:14px;line-height:1.6}
.sugg-c{font-size:14px;color:var(--faint);margin-top:16px}
.sugg-r{flex:none}
.sugg[data-offered="1"] .sugg-l{max-width:none}

/* timeline - same divider idiom as app.css's .strip, four across */
.tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 0}
.tl .c{padding:0 36px;border-left:1px solid var(--mist);min-width:0}
.tl .c:nth-child(4n+1){padding-left:0;border-left:none}
.tl .c:nth-child(4n){padding-right:0}
.tl .tm{font-family:'Exo 2',sans-serif;font-weight:600;font-size:21px;color:var(--midnight);letter-spacing:.4px;margin-top:13px;line-height:1.2}
.tl .lb{font-size:15px;color:var(--soft);margin-top:8px;line-height:1.55}

/* ============================================================================
   SCREEN 03 - Human Review. Rules lifted from the mockup's inline <style>
   (they are not in app.css). Heights come from the grid stretch, not fit.css.
   ============================================================================ */
.rev{display:grid;grid-template-columns:410px minmax(0,1fr);gap:20px;align-items:stretch}

.qpanel{background:#fff;border-radius:16px;padding:26px 0 22px;display:flex;flex-direction:column;height:100%}
.qhead{font-family:'Exo 2',sans-serif;font-weight:600;font-size:18px;color:#00214D;padding:0 30px 20px}
.qi{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 30px;border-top:1px solid #F1F5F8}
.qi.on{background:#F1F5F8}
.qi-l{min-width:0}
.qref{display:block;font-family:'Exo 2',sans-serif;font-weight:600;font-size:14px;color:#00214D;letter-spacing:.3px}
.qt{display:block;font-size:13.5px;color:rgba(38,38,38,.56);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qw{flex:none;font-size:12.5px;color:rgba(38,38,38,.40)}
.qfoot{margin-top:auto;padding:22px 30px 0;font-size:12.5px;color:rgba(38,38,38,.40);line-height:1.55}

.dpanel{background:#fff;border-radius:16px;padding:30px 34px;display:flex;flex-direction:column;height:100%}
.dref{font-family:'Exo 2',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(38,38,38,.40)}
.dt{font-family:'Exo 2',sans-serif;font-weight:600;font-size:30px;color:#00214D;letter-spacing:-.4px;margin-top:12px}
.dconf{font-size:14.5px;color:#2962D8;margin-top:12px}
.dobs{font-size:16px;color:rgba(38,38,38,.62);line-height:1.65;margin-top:24px;max-width:960px}
.fh{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(38,38,38,.40);margin-top:34px}
.fac{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:21px 0;border-bottom:1px solid #F1F5F8}
.fac:last-of-type{border-bottom:none}
.fac .fn{font-size:15px;color:#262626}
.fac .fv{font-family:'Exo 2',sans-serif;font-weight:600;font-size:19px;color:#00214D;flex:none}
.dacts{display:flex;gap:12px;margin-top:auto;padding-top:30px;border-top:1px solid rgba(0,33,77,.09);flex-wrap:wrap}

/* queue rows are real buttons, so the UA's default border/appearance is cleared
   and only the mockup's single top rule is kept */
.qlist{display:flex;flex-direction:column;min-height:0}
.qi{
  width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  appearance:none;background:none;border:0;border-top:1px solid #F1F5F8;border-radius:0;
}
.qi:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* ---------- inline reason form (screens 01 + 03) --------------------------- */
.rsn{margin-top:26px;padding-top:24px;border-top:1px solid var(--rule);width:100%}
.rsn[hidden]{display:none}
.rsn-l{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);display:block}
.rsn-i,.rsn-x{
  font-family:'Archivo',sans-serif;font-size:15px;line-height:1.55;color:var(--ink);
  width:100%;margin-top:12px;padding:13px 16px;border-radius:12px;
  border:1px solid var(--rule);background:#fff;display:block;
}
.rsn-x{min-height:88px;resize:vertical}
.rsn-i:focus,.rsn-x:focus{outline:none;border-color:var(--blue)}
.rsn-i::placeholder,.rsn-x::placeholder{color:var(--faint)}
.rsn-acts{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}
.rsn-err{font-size:14px;color:var(--err);line-height:1.5}
.rsn-err:empty{display:none}
.btn[disabled]{opacity:.55;cursor:default}
.btn.on{background:var(--mist)}

/* ---------- misc shell states ---------------------------------------------- */
.stub-t{font-family:'Exo 2',sans-serif;font-weight:600;font-size:20px;color:var(--midnight)}
.stub-s{font-size:15.5px;color:var(--soft);margin-top:12px;line-height:1.6}
.empty-t{font-family:'Exo 2',sans-serif;font-weight:600;font-size:23px;color:var(--midnight)}
.empty-s{font-size:15.5px;color:var(--soft);margin-top:14px;line-height:1.6;max-width:760px}

/* ---------- responsive ------------------------------------------------------ */
@media (max-width:1100px){
  .side-nav{width:64px}
  .shell{margin-left:64px}
  .side-brand{padding:22px 0 20px;text-align:center}
  .side-brand .logo{width:40px;margin:0 auto;object-fit:cover;object-position:left center;height:28px}
  .nav-i{padding:12px 14px 12px 11px;justify-content:center}
  .nav-t{display:none}
  .nav-ic{display:inline-flex}
  .top{padding:24px 32px}
  .page{padding:36px 32px 52px;gap:36px}
  .h1{font-size:38px}
  .rev{grid-template-columns:minmax(0,1fr)}
  .qpanel,.dpanel{height:auto}
  .tl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl .c:nth-child(4n+1){padding-left:36px;border-left:1px solid var(--mist)}
  .tl .c:nth-child(2n+1){padding-left:0;border-left:none}
  .tl .c:nth-child(2n){padding-right:0}
}
@media (max-width:760px){
  .top{padding:20px 20px;gap:16px;flex-wrap:wrap}
  .page{padding:28px 20px 44px;gap:30px}
  .h1{font-size:32px}
  .lead{font-size:16px}
  .panel,.panel.tight{padding:26px 22px}
  .advisory{padding:26px 22px}

  .strip{display:block;padding:26px 22px}
  .strip .f{padding:20px 0 0;border-left:none;border-top:1px solid var(--mist)}
  .strip .f:first-child{padding-top:0;border-top:none}

  .gauges,.kpis{grid-template-columns:minmax(0,1fr)}
  .gauge{padding:28px 22px 24px}
  .g-v{font-size:68px}
  .kpi{padding:28px 22px 24px}

  .tl{grid-template-columns:minmax(0,1fr);gap:24px 0}
  .tl .c,.tl .c:nth-child(4n+1),.tl .c:nth-child(2n+1){padding:0;border-left:none}
  .sugg{align-items:flex-start;gap:24px}
  .sugg-t{font-size:25px}
  .dt{font-size:25px}
}

/* ============================================================================
   SCREENS 02 + 04 - two-column report layouts (case-record.js, supervisor.js).
   Both mockups defined .cols and .chartwrap but with DIFFERENT grid ratios, so
   the shared behaviour lives in .cols and each ratio hangs off the screen's own
   qualifier.

   Everything that is not genuinely shared is SCOPED under .case-cols /
   .supv-cols so it cannot leak across screens - .fv in particular collides with
   screen 03's .fac .fv (19px Exo 2 midnight vs 13.5px soft body text), and bare
   .pt/.ps/.stat/.fl are far too generic to leave loose in a shared stylesheet.

   Densities are the de-densified ones, NOT the mockups' fit-hack values: those
   existed only to squeeze a fixed 1600x1000 canvas.
   ============================================================================ */
.cols{display:grid;gap:20px;align-items:stretch}
.cols > .sec{display:flex;flex-direction:column;min-width:0}
.cols .panel{flex:1}
.chartwrap{flex:1;display:flex;align-items:center}
.chartwrap svg{width:100%;height:auto;display:block}

/* case-record.js */
.case-cols{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
.case-cols .chartwrap{padding:4px 0}
.case-cols .sec:last-child .panel{justify-content:flex-start}
.case-cols .notes{margin-top:auto;padding-top:20px;border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.case-cols .fl{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.case-cols .fv{font-size:13.5px;color:var(--soft);margin-top:7px;line-height:1.5}

/* The mockup gave this table the full 1600px; here the sidebar takes 248 and the
   grid halves it again, so stop the date and session cells breaking mid-value and
   keep wrapped headers sitting on the same baseline as the short ones. */
.case-cols th{vertical-align:bottom}
.case-cols td:first-child,.case-cols td:nth-child(2){white-space:nowrap}
.case-cols td{padding:18px 0}
.case-cols td:not(:first-child),.case-cols th:not(:first-child){padding-left:16px}
.case-cols th:nth-child(2),.case-cols td:nth-child(2){width:1%}

/* supervisor.js */
.supv-cols{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}
.supv-cols .side{display:flex;flex-direction:column;gap:20px;justify-content:space-between;min-width:0;height:100%}
.supv-cols .side .panel{flex:none;height:auto;padding:24px 28px}
.supv-cols .side th{padding:0 0 12px}
.supv-cols .side td{padding:12px 0;font-size:14.5px}
.supv-cols .poc{font-family:'Exo 2',sans-serif;font-weight:600;color:var(--midnight)}
.supv-cols .stat{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--soft)}
.supv-cols .pt{font-family:'Exo 2',sans-serif;font-weight:600;font-size:17px;color:var(--midnight);margin-bottom:16px}
.supv-cols .ps{font-size:12.5px;color:var(--faint);margin:-8px 0 16px;line-height:1.5}

/* Stack both report grids on narrow viewports. */
@media (max-width:1100px){
  .case-cols,.supv-cols{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================================
   ROUND 2 - the generic CRUD layer (public/crud.js, screens/admin.js) and the
   New / Edit / Archive / Restore affordances on the list screens.

   APPENDED ONLY - nothing above this line is touched. Everything here stays
   inside the design system's own vocabulary: 18px panel radius, 12px control
   radius, the 11.5px/.15em uppercase label idiom from .k and .rsn-l, Exo 2 for
   anything that titles something, Archivo for everything read as prose, and
   --mist / --rule as the only dividers. Inputs deliberately REUSE .rsn-i and
   .rsn-x from screen 03 rather than introducing a second field style.
   ============================================================================ */

/* ---------- Settings sub-navigation (no ninth nav item) -------------------- */
.subnav{background:#fff;border-radius:18px;padding:28px 44px;display:flex;flex-direction:column;gap:20px}
.subnav-g{display:flex;align-items:baseline;gap:26px;min-width:0}
.subnav-k{flex:none;width:84px;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);line-height:1.6}
.subnav-l{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.subnav-i{
  font-family:'Exo 2',sans-serif;font-weight:600;font-size:14px;line-height:1.3;
  padding:9px 16px;border-radius:10px;color:var(--soft);text-decoration:none;
  box-shadow:inset 0 0 0 0 var(--blue);
}
.subnav-i:hover{background:rgba(241,245,248,.6);color:var(--midnight);text-decoration:none}
.subnav-i.on{background:var(--mist);color:var(--midnight);box-shadow:inset 0 -2px 0 0 var(--blue)}
.subnav-i:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- section lead-in (sits between sub-nav and a table) ------------- */
.sec-lead{max-width:1000px}
.sec-lead-t{font-family:'Exo 2',sans-serif;font-weight:600;font-size:23px;color:var(--midnight);letter-spacing:-.2px}
.sec-lead-s{font-size:15.5px;color:var(--soft);margin-top:12px;line-height:1.6;max-width:880px;text-wrap:pretty}

/* ---------- table toolbar: search, archived toggle, the New button --------- */
.tbar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.tbar-l{display:flex;align-items:center;gap:20px;flex-wrap:wrap;min-width:0}
.tbar-r{flex:none}
.srch{
  font-family:'Archivo',sans-serif;font-size:15px;line-height:1.55;color:var(--ink);
  width:320px;max-width:100%;padding:13px 16px;border-radius:12px;
  border:1px solid var(--rule);background:#fff;
}
.srch:focus{outline:none;border-color:var(--blue)}
.srch::placeholder{color:var(--faint)}
.tog{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--soft);cursor:pointer}
.tog input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}

/* An empty slot must not spend one of .sec's 24px gaps. */
[data-crud-slot]:empty{display:none}

/* ---------- sortable headers ---------------------------------------------- */
.th-s{
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
}
.th-s:hover{color:var(--soft)}
.th-s.on{color:var(--midnight)}
.th-a{font-size:12px;line-height:1;letter-spacing:0}
.th-s:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- row actions ---------------------------------------------------- */
th.ract-c,td.ract-c{text-align:right;padding-left:24px;white-space:nowrap}
.ract{display:inline-flex;gap:8px;justify-content:flex-end}
.btn.mini{font-size:13.5px;padding:9px 16px;border-radius:10px}
.cmuted{color:var(--faint)}
.cflag{
  display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);background:var(--mist);border-radius:9px;padding:5px 10px;
  vertical-align:middle;margin-right:10px;
}
tr.carch td{color:var(--soft)}
tr.carch td.strong{color:var(--soft)}
tr.acting td{background:rgba(241,245,248,.55)}

/* ---------- pager ---------------------------------------------------------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--mist)}
.pager-n{font-size:14px;color:var(--faint);font-variant-numeric:tabular-nums}
.pager-b{display:flex;gap:10px;flex:none}

/* ---------- the inline drawer that carries a form or a reason -------------- */
/* app.css zeroes the last row's bottom padding; a drawer row must not inherit
   that or its form sits flush against the panel edge. */
.cdrawer > td{padding:0 0 4px!important;border-bottom:1px solid var(--mist)}
tbody tr.cdrawer:last-child > td{border-bottom:none}
.cdrawer-b{margin:0}

/* ---------- the form ------------------------------------------------------- */
.cform{background:var(--mist);border-radius:16px;padding:30px 32px;margin:4px 0 20px}
.cdrawer-b .cform{margin:0}
.cform-h{margin-bottom:24px}
.cform-t{font-family:'Exo 2',sans-serif;font-weight:600;font-size:20px;color:var(--midnight);letter-spacing:-.2px}
.cform-s{font-size:14.5px;color:var(--soft);margin-top:9px;line-height:1.6;max-width:820px}

.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px 26px}
.fld{min-width:0}
.fld .fld-c{background:#fff}
.fld-req{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:400}
.fld-h{font-size:13px;color:var(--faint);margin-top:8px;line-height:1.5}
.fld-err{font-size:13.5px;color:var(--err);margin-top:8px;line-height:1.5}
.fld-err:empty{display:none}
.fld.bad .fld-c{border-color:var(--err)}
.fld.bad .fld-c:focus{border-color:var(--err)}

/* read-only, server-managed values: shown, never editable */
.fmeta{display:flex;flex-wrap:wrap;gap:26px 40px;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--rule)}
.fmeta-i{min-width:0}
.fmeta-v{font-family:'Exo 2',sans-serif;font-weight:600;font-size:15px;color:var(--midnight);margin-top:8px;line-height:1.3}

/* The reason block inside a form already has its own top rule from .rsn. */
.cform .rsn{margin-top:24px}
.cform .rsn-i,.cform .rsn-x{background:#fff}

/* ---------- 409 / 403 / blocked-by notices --------------------------------- */
.cnote-slot[hidden]{display:none}
.cnote{border-radius:12px;padding:20px 24px;background:#fff;border-left:3px solid var(--rule);margin-bottom:22px}
.cnote.warn{border-left-color:var(--warn)}
.cnote.bad{border-left-color:var(--err)}
.cnote-t{font-family:'Exo 2',sans-serif;font-weight:600;font-size:16px;color:var(--midnight)}
.cnote-s{font-size:14.5px;color:var(--soft);margin-top:9px;line-height:1.6;max-width:820px}
.cnote-a{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

/* ---------- empty / unavailable states ------------------------------------- */
.cempty{padding:14px 0}
.cempty-t{font-family:'Exo 2',sans-serif;font-weight:600;font-size:18px;color:var(--midnight)}
.cempty-s{font-size:15px;color:var(--soft);margin-top:10px;line-height:1.6;max-width:820px}
.cempty-s code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--midnight);background:var(--mist);border-radius:6px;padding:2px 7px}

/* ---------- responsive ------------------------------------------------------ */
@media (max-width:1100px){
  .subnav{padding:24px 28px}
  .subnav-g{flex-direction:column;align-items:flex-start;gap:10px}
  .subnav-k{width:auto}
  .srch{width:240px}
}
@media (max-width:760px){
  .subnav{padding:22px}
  .tbar{align-items:flex-start;flex-direction:column;gap:16px}
  .tbar-r{width:100%}
  .tbar-r .btn{width:100%;justify-content:center}
  .srch{width:100%}
  .cform{padding:24px 20px}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .pager{flex-direction:column;align-items:flex-start;gap:16px}
  th.ract-c,td.ract-c{padding-left:12px}
  .ract{flex-direction:column;align-items:stretch}
}