/* ============================================================================
   CMC Registry — application stylesheet
   Phase 1a of the redesign: the presentation layer, extracted from app.py.

   Built on IBM Carbon Design System tokens, carried by the IBM Plex faces this
   application already self-hosts. Plex is the typeface IBM built for Carbon.

   TWO RULES FOR ANYONE EDITING THIS FILE
   --------------------------------------
   1. Take every colour, size and space from a token below. If you find
      yourself typing a hex value or an arbitrary pixel size in a component,
      the token is missing — add it to the token layer instead.
   2. NEVER write left / right. Use the logical properties: inline-start,
      inline-end, text-align:start, inset-inline-*, margin-inline-*. The
      interface must mirror into Arabic by setting dir="rtl" and nothing else.
      (Arabic is not shipped yet — this is what makes shipping it cheap.)
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/IBMPlexSans-Regular.woff2') format('woff2');
 font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
 font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/assets/fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
 font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/assets/fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
 font-weight:600;font-style:normal;font-display:swap}

:root{
  /* --- Carbon greys ------------------------------------------------------ */
  --g10:#f4f4f4; --g20:#e0e0e0; --g30:#c6c6c6; --g50:#8d8d8d;
  --g60:#6f6f6f; --g70:#525252; --g100:#161616;

  /* --- surfaces ---------------------------------------------------------- */
  --ui-bg:#ffffff;          /* the page ground                               */
  --ui-layer:#ffffff;       /* cards and panels sitting on the ground        */
  --ui-layer-alt:#f4f4f4;   /* table headers, toolbars, wells                */
  --ui-field:#f4f4f4;       /* form inputs                                   */

  /* --- text -------------------------------------------------------------- */
  --tx:#161616;             /* primary                                       */
  --tx-2:#525252;           /* secondary                                     */
  --tx-3:#6f6f6f;           /* helper / placeholder                          */
  --tx-dis:#c6c6c6;         /* disabled                                      */
  --tx-on-color:#ffffff;

  /* --- lines ------------------------------------------------------------- */
  --ln:#e0e0e0;             /* subtle                                        */
  --ln-strong:#8d8d8d;

  /* --- interactive: Carbon blue. This is the ONLY colour that means
         "you can act on this". CMC teal is a brand mark, not a UI colour. -- */
  --ia:#0f62fe;
  --ia-hover:#0050e6;
  --ia-active:#002d9c;
  --ia-wash:#edf5ff;
  --ia-focus:#0f62fe;

  /* --- brand ------------------------------------------------------------- */
  --brand:#007A8A;          /* CMC teal — the lockup, and nothing else       */

  /* --- state (semantic only; never decorative) --------------------------- */
  --ok:#0e6027;      --ok-bg:#defbe6;    --ok-ln:#a7f0ba;
  --warn:#8e6a00;    --warn-bg:#fcf4d6;  --warn-ln:#f1c21b;
  --err:#da1e28;     --err-bg:#fff1f1;   --err-ln:#ffd7d9;
  /* a rehearsal instance must never be mistaken for production */
  --rehearsal:#8a3800;

  /* --- type scale (Carbon) ----------------------------------------------- */
  --t-label:12px;           /* uppercase labels, column headers              */
  --t-helper:12px;          /* helper text, captions                         */
  --t-body-c:14px;          /* body compact — tables, dense UI               */
  --t-body:14px;            /* body                                          */
  --t-h1:14px;              /* heading-compact-01 — inline headings          */
  --t-h3:20px;              /* section heading                               */
  --t-h4:28px;              /* page title                                    */
  --lh-c:1.29;              /* 18/14 — compact                               */
  --lh:1.43;                /* 20/14                                         */
  --track-label:.32px;

  /* --- spacing (Carbon 2/4/8 scale) -------------------------------------- */
  --s1:2px; --s2:4px; --s3:8px; --s4:12px; --s5:16px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px;

  /* --- faces ------------------------------------------------------------- */
  --en-font:'IBM Plex Sans','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --ar-font:'IBM Plex Sans Arabic','IBM Plex Sans','Segoe UI',Tahoma,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;

  /* Carbon is square. Radius survives only where a shape carries meaning
     (pills that read as tags, not as panels). */
  --r-pill:999px;
  --shadow:0 1px 2px rgba(22,22,22,.05),0 4px 14px rgba(22,22,22,.05);
}

/* ----------------------------------------------------------------- base -- */
*{box-sizing:border-box}
body{
  margin:0;background:var(--ui-bg);color:var(--tx);
  font-family:var(--en-font);font-size:var(--t-body);line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}
.ar,[lang="ar"],[dir="rtl"]{font-family:var(--ar-font);line-height:1.7}
a{color:var(--ia)}
a:hover{color:var(--ia-hover)}
:focus-visible{outline:2px solid var(--ia-focus);outline-offset:1px}
main{max-width:1312px;margin:var(--s6) auto var(--s9);padding-inline:var(--s5)}
hr{border:none;border-block-start:1px solid var(--ln);margin:var(--s6) 0}

/* --------------------------------------------------------------- masthead -- */
.mast{
  position:sticky;inset-block-start:0;z-index:20;
  background:var(--ui-layer);border-block-end:1px solid var(--ln);
  display:flex;align-items:stretch;gap:0;padding-inline:var(--s5);
  flex-wrap:wrap;min-height:48px;
}
.lock{
  display:flex;align-items:center;gap:var(--s3);
  text-decoration:none;color:var(--tx);padding-inline-end:var(--s5);
  border-inline-end:1px solid var(--ln);margin-inline-end:var(--s5);
}
.lock img{width:26px;height:26px}
.lock b{font-size:var(--t-body);font-weight:600;line-height:1.2;letter-spacing:0}
.lock .sub{
  display:block;font-size:10px;color:var(--tx-3);letter-spacing:var(--track-label);
  font-weight:400;text-transform:uppercase;
}
.mast nav{margin-inline-start:auto;display:flex;gap:0;flex-wrap:wrap;align-items:stretch}
.mast nav a{
  color:var(--tx-2);text-decoration:none;padding:0 var(--s5);font-size:var(--t-body);
  font-weight:400;display:flex;align-items:center;
  border-block-end:2px solid transparent;
}
.mast nav a:hover{background:var(--ui-layer-alt);color:var(--tx)}
.mast nav a.on{color:var(--tx);font-weight:600;border-block-end-color:var(--ia)}
.mast nav a.xls{color:var(--ia)}
.mast nav a.xls:hover{background:var(--ia-wash)}
.mast .who{
  display:inline-flex;align-items:center;gap:var(--s3);
  margin-inline-start:var(--s5);padding-inline-start:var(--s5);
  border-inline-start:1px solid var(--ln);font-size:var(--t-body);color:var(--tx-2);
}
.mast .who .role{
  background:var(--ui-layer-alt);color:var(--tx-2);border-radius:var(--r-pill);
  padding:1px var(--s3);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--track-label);
}
.mast .who a{color:var(--tx-3);text-decoration:none;font-weight:600;
  padding:0 var(--s2)}
/* the logout form is a flex item of the masthead; without this it stretches to
   the bar's full height and strands its button against the top edge */
.mast form{display:flex;align-items:center}
button.signout{
  background:none;border:0;color:var(--tx-2);font:inherit;font-size:var(--t-body);
  cursor:pointer;padding:0 var(--s4);text-decoration:underline;
}
button.signout:hover{color:var(--ia);background:none}

/* ---------------------------------------------------------- page headings -- */
.pagetitle{font-size:var(--t-h4);color:var(--tx);margin:0 0 var(--s2);font-weight:400;letter-spacing:0}
.pagesub{color:var(--tx-2);font-size:var(--t-body);margin:0 0 var(--s6)}
.pagehead{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);
  flex-wrap:wrap;margin:0 0 var(--s5);
}
.pagehead .muted{font-size:var(--t-body)}
h1.ttl{margin:0;font-size:var(--t-h4);color:var(--tx);line-height:1.25;font-weight:400}
.ttl-ar{font-size:19px;margin-block-start:var(--s2);color:var(--tx-2)}
h2.sec,h3.sec{
  font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--tx-3);margin:0 0 var(--s4);font-weight:600;
}

/* ------------------------------------------------------------------ cards -- */
.card{
  background:var(--ui-layer);border:1px solid var(--ln);
  padding:var(--s5) var(--s5) var(--s6);margin-block-end:var(--s5);
}
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:var(--s5)}
.bgrid .card{margin-block-end:0}
.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,1fr);gap:var(--s5);align-items:start}
@media(max-width:920px){.cols{grid-template-columns:1fr}}

/* --------------------------------------------------------------- metrics -- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--ln);border:1px solid var(--ln);margin-block-end:var(--s6)}
.kpi{
  display:block;background:var(--ui-layer);padding:var(--s4) var(--s5) var(--s5);
  text-decoration:none;color:var(--tx);
}
a.kpi:hover{background:var(--ia-wash)}
.kpi b{display:block;font-size:var(--t-h4);color:var(--tx);font-weight:400;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2}
.kpi span{font-size:var(--t-label);color:var(--tx-3);letter-spacing:var(--track-label);
  text-transform:uppercase;font-weight:400}
.kpi.good b{color:var(--ok)}
.kpi.warnk b{color:var(--warn)}

/* ---------------------------------------------------------------- tables -- */
table{border-collapse:collapse;width:100%;font-size:var(--t-body-c);line-height:var(--lh-c)}
th{
  font-size:var(--t-label);letter-spacing:var(--track-label);color:var(--tx-2);
  text-align:start;font-weight:600;padding:var(--s4) var(--s5);white-space:nowrap;
  background:var(--ui-layer-alt);border-block-end:1px solid var(--ln-strong);
  text-transform:uppercase;
}
th a{color:inherit;text-decoration:none}
th a:hover{color:var(--ia)}
td{padding:var(--s4) var(--s5);border-block-end:1px solid var(--ln);vertical-align:top}
tr:last-child td{border-block-end:none}
tbody tr:hover td,tr.hov:hover td{background:var(--ui-layer-alt)}
.tablewrap{overflow-x:auto}
/* register table only: the page scrolls and the header sticks under the
   masthead. Offsets are measured at runtime into --stick1/--stick2 because the
   masthead wraps and changes height; these literals are only the fallback. */
.flowtable th{position:sticky;inset-block-start:var(--stick2,99px);z-index:2}
td.ckcol,th.ckcol{width:34px;padding-inline:var(--s5) 0}
a.did{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ia);
  letter-spacing:0;text-decoration:none;white-space:nowrap;
}
a.did:hover{text-decoration:underline}
a.tlink{color:var(--tx);text-decoration:none;font-weight:600}
a.tlink:hover{color:var(--ia)}
.arline{display:block;margin-block-start:var(--s1);color:var(--tx-2)}
table.noar .arline{display:none}
td.file .fname{
  font-family:var(--mono);font-size:11.5px;color:var(--tx-2);display:block;
  max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
td.file a.act{
  font-size:var(--t-body-c);font-weight:400;color:var(--ia);text-decoration:none;
  margin-inline-end:var(--s4);
}
td.file a.act:hover{text-decoration:underline}
.nofile{color:var(--tx-3);font-size:var(--t-body-c)}
tr.placeholder td{background:transparent}
tr.placeholder a.did{color:var(--tx-3)}
tr.placeholder a.tlink{color:var(--tx-3);font-weight:400}
.cov-y{color:var(--ok);font-weight:600;text-align:center}
.cov-n{color:var(--tx-dis);text-align:center}
.cov-x{color:var(--tx-3);text-align:center;font-size:var(--t-helper);font-style:italic}
.cov-na{color:var(--tx-dis);text-align:center;font-size:var(--t-helper)}

/* --------------------------------------------------------- filters / bars -- */
.fstrip{
  display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;
  padding:0 0 var(--s4);border-block-end:1px solid var(--ln);margin-block-end:var(--s4);
}
.fstrip input{height:32px}
.fl{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-helper);
  color:var(--tx-2);font-weight:400}
.fl select{height:32px}
form.filters{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:end}
form.filters label{
  display:flex;flex-direction:column;gap:var(--s2);font-size:var(--t-label);
  letter-spacing:var(--track-label);color:var(--tx-2);font-weight:400;
}
form.filters input,form.filters select{height:38px}
form.filters button,form.filters .btn{height:38px;padding:0 var(--s5);line-height:38px}
form.filters button{line-height:normal}
/* A tick box in a filter row (round 31, the OVR queue's "fixtures"): box and
   word on one line at the row's height. Without this the label above stacked
   them, and the input rules gave the box 38px, padding and a field background. */
form.filters label.tick{flex-direction:row;align-items:center;gap:var(--s2);height:38px;
  font-size:var(--t-body);letter-spacing:normal;color:var(--tx)}
form.filters label.tick input{height:auto;padding:0;margin:0;border:0;background:none;
  inline-size:16px;block-size:16px;accent-color:var(--ia-active)}
.segs{display:flex;margin:0 0 var(--s4);border-block-end:1px solid var(--ln);width:100%}
.seg{
  padding:var(--s4) var(--s5);font-size:var(--t-body);font-weight:400;color:var(--tx-2);
  text-decoration:none;display:flex;align-items:center;gap:var(--s3);
  border-block-end:2px solid transparent;margin-block-end:-1px;
}
.seg:hover{background:var(--ui-layer-alt);color:var(--tx)}
.seg.on{color:var(--tx);font-weight:600;border-block-end-color:var(--tx)}
.seg .n{
  font-family:var(--mono);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;
  background:var(--ui-layer-alt);padding:1px var(--s3);color:var(--tx-2);
}
.seg.on .n{background:var(--ia-wash);color:var(--ia-active)}
.actionbar{
  position:sticky;inset-block-start:var(--stick1,57px);z-index:3;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  flex-wrap:nowrap;background:var(--ui-layer-alt);border:1px solid var(--ln);
  padding:0 var(--s5);margin:0 0 var(--s4);min-height:40px;
}
.actionbar.armed{background:var(--ia);border-color:var(--ia)}
.actionbar.armed .quiet,.actionbar.armed .selcount,.actionbar.armed .pill-note{color:var(--tx-on-color)}
.actionbar.armed .quiet.disabled{color:rgba(255,255,255,.55)}
.abl,.abr{display:flex;gap:var(--s6);align-items:center;flex-wrap:wrap}
.selcount{font-size:var(--t-body);font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}
.pill-note{font-size:var(--t-body-c);color:var(--tx-2);font-weight:400}
.tfoot{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  flex-wrap:wrap;margin-block-start:var(--s4);padding-block-start:var(--s4);
  border-block-start:1px solid var(--ln)}
.tfoot-r{display:flex;gap:var(--s6);align-items:center;flex-wrap:wrap}
.ck{display:flex;gap:var(--s3);align-items:center;font-size:var(--t-body-c);
  color:var(--tx-2);font-weight:400}
.quiet{color:var(--ia);text-decoration:none;font-weight:400;font-size:var(--t-body)}
.quiet:hover{text-decoration:underline}
.quiet.disabled{color:var(--tx-dis);pointer-events:none;text-decoration:none}

/* ------------------------------------------------------------------ forms -- */
input,select,textarea{
  font:inherit;padding:var(--s3) var(--s4);border:none;
  border-block-end:1px solid var(--ln-strong);background:var(--ui-field);
  color:var(--tx);border-radius:0;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--ia-focus);outline-offset:-2px;border-block-end-color:transparent;
}
input::placeholder{color:var(--tx-3)}
textarea{width:100%;min-height:80px;line-height:var(--lh)}
button,.btn{
  background:var(--ia);color:var(--tx-on-color);border:1px solid var(--ia);border-radius:0;
  padding:var(--s3) var(--s5);font:inherit;font-size:var(--t-body);font-weight:400;
  cursor:pointer;text-decoration:none;display:inline-block;
}
button:hover,.btn:hover{background:var(--ia-hover);border-color:var(--ia-hover);color:var(--tx-on-color)}
.btn.ghost{background:transparent;color:var(--ia);border-color:var(--ia)}
.btn.ghost:hover{background:var(--ia-wash);color:var(--ia-active);border-color:var(--ia-active)}
.btn.danger{background:transparent;color:var(--err);border-color:var(--err)}
.btn.danger:hover{background:var(--err-bg);color:var(--err);border-color:var(--err)}
.btn.sm{padding:var(--s2) var(--s4);font-size:var(--t-body-c)}
.btn.dis{background:var(--ui-layer-alt);color:var(--tx-dis);border-color:var(--ln);cursor:default}
.actions{display:flex;gap:var(--s4);flex-wrap:wrap;margin-block-start:var(--s5)}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s5)}
.formgrid label{
  display:flex;flex-direction:column;gap:var(--s2);font-size:var(--t-label);
  letter-spacing:var(--track-label);color:var(--tx-2);font-weight:400;
}
.linklike{
  background:none;border:none;color:var(--err);font-size:var(--t-body-c);cursor:pointer;
  padding:0;text-decoration:underline;font-family:inherit;
}
.filepick{
  display:inline-block;border:1px dashed var(--ln-strong);padding:var(--s3) var(--s5);
  color:var(--ia);font-weight:400;cursor:pointer;font-size:var(--t-body);
  background:var(--ui-field);position:relative;
}
.filepick:hover{background:var(--ia-wash);border-color:var(--ia)}
.filepick input{position:absolute;opacity:0;width:1px;height:1px;inset-inline-start:var(--s3);
  inset-block-start:var(--s3)}

/* ------------------------------------------------------- status & badges -- */
.badge{
  display:inline-block;padding:var(--s1) var(--s4);border-radius:var(--r-pill);
  font-size:var(--t-helper);font-weight:400;white-space:nowrap;
}
.b-draft{background:var(--ui-layer-alt);color:var(--tx-2)}
.b-eff{background:var(--ok-bg);color:var(--ok)}
.b-ret{background:var(--err-bg);color:var(--err)}
.b-prog{background:var(--warn-bg);color:var(--warn)}
.b-none{background:var(--ui-layer-alt);color:var(--tx-3)}
.b-pin{background:var(--warn-bg);color:var(--warn)}
.b-scope{background:var(--ia-wash);color:var(--ia-active)}
.b-noscope{background:var(--ui-layer-alt);color:var(--tx-3)}
.chip{
  display:inline-block;background:var(--ia-wash);color:var(--ia-active);
  border-radius:var(--r-pill);padding:var(--s1) var(--s4);font-size:var(--t-helper);
  font-weight:400;margin-inline-end:var(--s3);margin-block-end:var(--s3);
}
.chips{margin-block-start:var(--s4)}
.integ-ok{color:var(--ok);font-weight:600}
.integ-warn{color:var(--warn);font-weight:600;text-decoration:none}
.idchip{
  font-family:var(--mono);display:inline-block;background:var(--ui-layer-alt);color:var(--tx);
  padding:var(--s2) var(--s4);font-size:var(--t-body);font-weight:600;
  letter-spacing:0;margin-block-end:var(--s4);
}
.idpreview{
  font-family:var(--mono);font-size:var(--t-h3);font-weight:600;color:var(--ia-active);
  background:var(--ia-wash);padding:var(--s3) var(--s4);
}
.flash{
  background:var(--ok-bg);border-inline-start:3px solid var(--ok);color:var(--tx);
  padding:var(--s4) var(--s5);margin-block-end:var(--s5);font-weight:400;
}
.rehearsal{
  background:var(--rehearsal);color:var(--tx-on-color);text-align:center;
  font-weight:600;font-size:var(--t-body-c);
  letter-spacing:var(--track-label);padding:var(--s2) var(--s5);
  position:sticky;inset-block-start:0;z-index:19;
}
.rehearsal-fixed{position:fixed;inset-inline:0;inset-block-end:0;inset-block-start:auto}
.empty{text-align:center;padding:var(--s7) var(--s4);color:var(--tx-2);font-size:var(--t-body)}
.muted{color:var(--tx-2);font-size:var(--t-body-c)}
.fnote{font-size:var(--t-helper);margin-block-start:var(--s2);font-weight:400;line-height:1.4}
.fnote.ok{color:var(--ok)}
.fnote.warn{color:var(--warn)}
.fnote.seal{color:var(--tx-3);font-size:11.5px;margin-block-start:var(--s1)}

/* ----------------------------------------------------------- record page -- */
dl.detail{display:grid;grid-template-columns:215px 1fr;gap:var(--s3) var(--s5);margin:0;
  font-size:var(--t-body)}
dl.detail dt{color:var(--tx-2);font-size:var(--t-body-c);padding-block-start:1px}
dl.detail dd{margin:0}
.filelist .f{padding:var(--s4) 0;border-block-end:1px solid var(--ln)}
.filelist .f:last-child{border-block-end:none}
.f .frow{display:flex;align-items:flex-start;gap:var(--s4)}
.f .ic{font-size:18px;line-height:1.3}
.f .nm{font-weight:600;font-size:var(--t-body);overflow-wrap:anywhere;line-height:1.4}
.f .meta{font-size:var(--t-helper);color:var(--tx-2);margin-block-start:var(--s1)}
.f .facts{display:flex;gap:var(--s3);margin-block-start:var(--s4);align-items:center}
.f .facts form{display:inline}

/* --------------------------------------------------------------- viewer --- */
/* Phase 4 deletes this block: the Registry should render exactly what Compass
   renders, and this override is why the same document looks worse here. */
.paper{
  background:var(--ui-layer);border:1px solid var(--ln);max-width:880px;margin:0 auto;
  padding:var(--s9) var(--s10);font-size:16px;line-height:1.8;color:var(--tx);
}
.paper h2{color:var(--tx);font-size:var(--t-h3);margin:var(--s7) 0 var(--s4);
  padding-block-end:var(--s2);border-block-end:1px solid var(--ln);font-weight:600}
.paper h2:first-child{margin-block-start:0}
.paper h3{color:var(--tx);font-size:16px;margin:var(--s6) 0 var(--s3);font-weight:600}
.paper p{margin:var(--s3) 0}
.paper .ar{font-size:17px;line-height:2}
.paper .doc-t{width:100%;margin:var(--s6) 0;font-size:var(--t-body)}
.paper .doc-t td{border:1px solid var(--ln);padding:var(--s3) var(--s4);line-height:1.6}
.paper .doc-t tr.hd td{background:var(--ui-layer-alt);color:var(--tx);font-weight:600;
  font-size:var(--t-body-c);letter-spacing:var(--track-label)}
.paper .doc-t p{margin:var(--s2) 0}
@media(max-width:700px){.paper{padding:var(--s6) var(--s5)}}

/* ============================================================================
   UTILITIES — Phase 1b
   These exist so no Python file ever writes style="" again. Every value comes
   off the Carbon spacing and type scales; there are deliberately no arbitrary
   sizes here. If a screen needs something this layer cannot express, that is a
   missing component, not a reason to inline a style.
   ci/check_presentation.py fails the build if style="" reappears in app.py.
   ========================================================================== */

/* block spacing — Carbon 2/4/8. Names are scale steps, not pixel values. */
.m0{margin:0}
.mt-1{margin-block-start:var(--s2)}   .mb-1{margin-block-end:var(--s2)}
.mt-2{margin-block-start:var(--s3)}   .mb-2{margin-block-end:var(--s3)}
.mt-3{margin-block-start:var(--s4)}   .mb-3{margin-block-end:var(--s4)}
.mt-4{margin-block-start:var(--s5)}   .mb-4{margin-block-end:var(--s5)}
.mt-5{margin-block-start:var(--s6)}   .mb-5{margin-block-end:var(--s6)}
.mb-6{margin-block-end:var(--s7)}
.mx-2{margin-inline:var(--s3)}        .mx-3{margin-inline:var(--s4)}
.mi-2{margin-inline-start:var(--s3)}  .mi-auto{margin-inline-start:auto}
/* trailing gap for wrapping inline items (chips, tags) */
.gap-r{margin-inline-end:var(--s3);margin-block-end:var(--s3)}
.pad-row{padding:var(--s4) var(--s1)}

/* layout */
.row{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.row-top{display:flex;gap:var(--s4);align-items:flex-start;flex-wrap:wrap}
.flex1{flex:1}
.span-all{grid-column:1/-1}
.block{display:block}
.ib{display:inline-block}
.inline{display:inline}
.hidden{display:none !important}   /* utility: must outrank component rules */
.w-full{width:100%}
.minw{min-width:220px}

/* text */
.tc{text-align:center}
.te{text-align:end}
.ts{text-align:start}
.nowrap{white-space:nowrap}
.t-12{font-size:var(--t-helper)}
.t-14{font-size:var(--t-body)}
.t-16{font-size:16px}
.fw4{font-weight:400}
.fw6{font-weight:600}
.lh-2{line-height:2}
.track-1{letter-spacing:1px}
/* form labels are uppercase by default; some carry a sentence-case hint */
.plain-label{text-transform:none;letter-spacing:0}

/* colour — semantic tokens only, never a raw value */
.c-tx{color:var(--tx)}
.c-tx2{color:var(--tx-2)}
.c-ia{color:var(--ia)}
.c-ia-d{color:var(--ia-active)}
.c-err{color:var(--err)}
.c-warn{color:var(--warn)}

/* the dashboard's utility link line sits tight under the metric strip */
.util-line{margin:calc(var(--s4) * -1) 0 var(--s5);font-size:var(--t-helper)}

/* a form label standing on its own, outside .formgrid / form.filters */
.flabel{display:block;font-size:var(--t-label);letter-spacing:var(--track-label);
  color:var(--tx-2);font-weight:400;margin-block-end:var(--s2)}

/* ============================================================================
   DOCUMENTS SCREEN — Phase 2
   ========================================================================== */

/* --- toolbar -------------------------------------------------------------
   Carbon replaces this bar with a batch-action bar when rows are selected.
   We deliberately do NOT: that is what made Download vanish on selection.
   The bar is constant; only the SCOPE of each action changes, and the bar
   tints so the state is unmistakable. */
.dtool{display:flex;align-items:stretch;border:1px solid var(--ln);
  background:var(--ui-layer);min-height:40px;margin-block-end:var(--s4)}
.dtool .dsearch{flex:1;display:flex;align-items:center;min-width:180px}
.dtool .dsearch input{width:100%;height:38px;background:transparent;
  border-block-end:none;padding-inline:var(--s5)}
.dtool .dsearch input:focus{outline-offset:-2px}
.dtool .dstate{flex:1;display:flex;align-items:center;padding-inline:var(--s5);
  font-weight:600;font-variant-numeric:tabular-nums}
.dtool a.tb,.dtool button.tb{
  display:flex;align-items:center;gap:var(--s3);padding-inline:var(--s5);
  border:none;border-inline-start:1px solid var(--ln);background:transparent;
  color:var(--ia);font-size:var(--t-body);font-weight:400;text-decoration:none;
  white-space:nowrap;cursor:pointer;
}
.dtool a.tb:hover,.dtool button.tb:hover{background:var(--ia-wash)}
.dtool a.tb.pri{background:var(--ia);color:var(--tx-on-color);border-inline-start:none}
.dtool a.tb.pri:hover{background:var(--ia-hover)}
.dtool a.tb.off{color:var(--tx-dis);pointer-events:none}
/* armed = rows are selected */
.dtool.armed{background:var(--ia);border-color:var(--ia)}
.dtool.armed .dstate{color:var(--tx-on-color)}
.dtool.armed a.tb,.dtool.armed button.tb{color:var(--tx-on-color);
  border-inline-start-color:rgba(255,255,255,.3)}
.dtool.armed a.tb:hover,.dtool.armed button.tb:hover{background:rgba(255,255,255,.14)}
.dtool.armed a.tb.pri{background:rgba(255,255,255,.18)}
.dtool.armed a.tb.off{color:rgba(255,255,255,.5)}

/* --- filter chips --------------------------------------------------------
   Six dropdowns all reading "All" state nothing. A chip row states the
   current question in words, and only the filters actually in use take space. */
.fbar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-block-end:var(--s4);min-height:32px}
.fchip{display:inline-flex;align-items:center;gap:var(--s3);
  padding-block:var(--s1);padding-inline:var(--s4) var(--s2);border:1px solid var(--ia);
  border-radius:var(--r-pill);background:var(--ia-wash);color:var(--ia-active);
  font-size:var(--t-helper);font-weight:400}
.fchip .k{color:var(--tx-2)}
.fchip a.x{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:var(--r-pill);color:var(--ia-active);
  text-decoration:none;font-size:13px;line-height:1}
.fchip a.x:hover{background:var(--ia);color:var(--tx-on-color)}
.fadd{position:relative;display:inline-flex;align-items:center}
.fadd select{
  appearance:none;border:1px dashed var(--ln-strong);border-radius:var(--r-pill);
  background:transparent;color:var(--tx-2);font-size:var(--t-helper);
  padding-block:var(--s1);padding-inline:var(--s4) var(--s5);height:26px;cursor:pointer;
}
.fadd select:hover{border-color:var(--ia);color:var(--ia)}
.fbar .clearall{font-size:var(--t-helper);color:var(--tx-2)}

/* --- table refinements ---------------------------------------------------
   Fixed density: one line per row unless Arabic titles are on. The old table
   was double-height on every row because the Arabic title always showed. */
.flowtable td{height:44px;padding-block:var(--s3)}
td.file .fline{display:flex;align-items:center;gap:var(--s4);flex-wrap:nowrap}
td.file .fname{flex:0 0 250px;max-width:250px;margin:0;direction:ltr;text-align:start}
.tag-sm{display:inline-flex;align-items:center;gap:var(--s2);padding:0 var(--s3);
  border-radius:var(--r-pill);font-size:11px;font-weight:400;white-space:nowrap}
.tag-sm.ok{background:var(--ok-bg);color:var(--ok)}
.tag-sm.warn{background:var(--warn-bg);color:var(--warn)}
.dot{width:6px;height:6px;border-radius:var(--r-pill);flex:none}
.dot.g{background:var(--ok)}
.dot.a{background:var(--warn)}

/* ============================================================================
   NAVIGATION + HOME — Phase 3
   ========================================================================== */

/* --- account menu --------------------------------------------------------
   <details> so it works with no JavaScript at all. One control carries the
   name; the ROLE lives inside the menu, because printing "admin ADMIN" in the
   bar reads as a duplication bug. */
.acct{position:relative;display:flex;align-items:center;
  margin-inline-start:var(--s5);padding-inline-start:var(--s5);
  border-inline-start:1px solid var(--ln)}
.acct>summary{display:flex;align-items:center;gap:var(--s3);cursor:pointer;
  list-style:none;font-size:var(--t-body);color:var(--tx-2);padding-block:var(--s3)}
.acct>summary::-webkit-details-marker{display:none}
.acct>summary:hover{color:var(--tx)}
.acct .avatar{width:24px;height:24px;border-radius:var(--r-pill);background:var(--g70);
  color:var(--tx-on-color);display:grid;place-items:center;font-size:10px;font-weight:600;
  flex:none;letter-spacing:0}
.acct .caret{font-size:10px;color:var(--tx-3)}
.acctmenu{position:absolute;inset-block-start:100%;inset-inline-end:0;z-index:30;
  min-width:230px;background:var(--ui-layer);border:1px solid var(--ln);
  box-shadow:var(--shadow);padding-block:var(--s2)}
.acctmenu a,.acctmenu button{display:block;width:100%;text-align:start;
  padding-block:var(--s3);padding-inline:var(--s5);font-size:var(--t-body);
  color:var(--tx);text-decoration:none;background:none;border:none;
  font-family:inherit;cursor:pointer}
.acctmenu a:hover,.acctmenu button:hover{background:var(--ui-layer-alt);color:var(--tx)}
.acctmenu .whoami{padding-block:var(--s3) var(--s4);padding-inline:var(--s5);
  border-block-end:1px solid var(--ln);margin-block-end:var(--s2);
  font-size:var(--t-helper);color:var(--tx-2)}
.acctmenu .whoami b{display:block;color:var(--tx);font-size:var(--t-body)}
.acctmenu .sep{border:none;border-block-start:1px solid var(--ln);
  margin-block:var(--s2)}
.acctmenu form{display:block}
/* the lockup is the way home, so it takes an active state like any tab */
.lock.on b{color:var(--ia)}

/* --- home: a work queue, not a wall of counts ---------------------------- */
.hgreet{margin-block-end:var(--s6)}
.hgreet h1{font-size:var(--t-h4);font-weight:400;margin:0;letter-spacing:-.01em}
.hgreet .sub{color:var(--tx-2);font-size:var(--t-body);margin-block-start:var(--s2)}
.hgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:1px;background:var(--ln);border:1px solid var(--ln);margin-block-end:var(--s5)}
@media(max-width:900px){.hgrid{grid-template-columns:1fr}}
.hpane{background:var(--ui-layer);padding:var(--s5)}
.hpane h2{font-size:var(--t-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--tx-3);margin:0 0 var(--s4);font-weight:600}
.qitem{display:grid;grid-template-columns:3px 1fr auto;gap:var(--s2) var(--s4);
  align-items:center;padding-block:var(--s4);border-block-end:1px solid var(--ln)}
.qitem:last-child{border-block-end:none}
.qitem .sev{align-self:stretch;grid-row:span 2}
.qitem .sev.a{background:var(--warn)}
.qitem .sev.r{background:var(--err)}
.qitem .sev.b{background:var(--ia)}
.qitem .w{font-size:var(--t-body);font-weight:600;color:var(--tx)}
.qitem .s{font-size:var(--t-helper);color:var(--tx-2);grid-column:2}
.qitem .go{font-size:var(--t-helper);color:var(--ia);text-decoration:none;white-space:nowrap}
.qitem .go:hover{text-decoration:underline}
.allclear{display:flex;align-items:center;gap:var(--s3);color:var(--ok);
  font-size:var(--t-body);padding-block:var(--s5)}
.qnum{font-family:var(--mono);font-size:28px;font-weight:500;letter-spacing:-.02em;
  color:var(--tx);font-variant-numeric:tabular-nums}
.qnum small{font-family:var(--en-font);font-size:var(--t-body);color:var(--tx-2);
  font-weight:400;letter-spacing:0}
.pbar{height:6px;background:var(--ui-layer-alt);display:flex;overflow:hidden;
  margin-block-start:var(--s3)}
.pbar i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-block-start:var(--s3);
  font-size:var(--t-helper);color:var(--tx-2)}
.legend span{display:inline-flex;align-items:center;gap:var(--s2)}
.hsplit{border-block-start:1px solid var(--ln);margin-block-start:var(--s5);
  padding-block-start:var(--s5)}
details.more{border:1px solid var(--ln);margin-block-end:var(--s5)}
details.more>summary{padding:var(--s4) var(--s5);cursor:pointer;font-size:var(--t-body);
  color:var(--tx-2)}
details.more>summary:hover{background:var(--ui-layer-alt);color:var(--tx)}
details.more .bgrid{padding:0 var(--s5) var(--s5)}
.pbar i.f-ok{background:var(--ok)}
.pbar i.f-ia{background:var(--ia)}
.pbar i.f-mute{background:var(--ln-strong)}
.dot.b{background:var(--ia)}
.dot.n{background:var(--ln-strong)}

/* --- department tag picker ------------------------------------------------
   34 departments plus two grouping signals is more than anyone recalls, which
   is the actual reason this was hard to fill in as free text. */
.tagpick{grid-column:1/-1;border:1px solid var(--ln);padding:var(--s4) var(--s5);
  background:var(--ui-layer)}
.tagpick .grp{margin-block-start:var(--s4)}
.tagpick .grp:first-child{margin-block-start:0}
.tagpick .ghead{font-size:var(--t-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--tx-3);font-weight:600;
  margin-block-end:var(--s3)}
.tagpick .opts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
/* .formgrid label sets flex-direction:column at equal specificity, so the
   direction must be restated or every box stacks above its own label */
.tagpick label{display:inline-flex;flex-direction:row;align-items:center;gap:var(--s3);
  font-size:var(--t-body);color:var(--tx);text-transform:none;letter-spacing:0;
  font-weight:400;min-width:150px}
.tagpick label.off{color:var(--tx-dis)}
.tagpick label.legacy{color:var(--warn)}
.tagpick .hint{font-size:var(--t-helper);color:var(--tx-2);margin-block-start:var(--s3);
  line-height:1.5}
.tagpick .sig{background:var(--ui-layer-alt);padding:var(--s3) var(--s4);
  margin-inline:calc(var(--s4) * -1);margin-block-end:var(--s4)}
.tagpick .why{margin-inline-start:var(--s3);color:var(--tx-2);font-weight:400;
  text-transform:none;letter-spacing:0}
/* provenance under a register value on the Resolve screen */
.prov{font-size:var(--t-helper);color:var(--tx-2);margin-block-start:var(--s2);
  line-height:1.45;max-width:44ch}
/* a state tag that is also the way to act on that state */
a.tag-sm{text-decoration:none}
a.tag-sm.warn:hover{background:var(--warn);color:var(--tx-on-color)}
a.tag-sm.warn:hover .dot{background:var(--tx-on-color)}
.pbar i.f-part{background:var(--warn)}
.dot.p{background:var(--warn)}

/* ---- round 21: grants editor and profile row on /users, chip as a link ---- */
/* the second row under each user: profile inputs and the grant list */
tr.sub td{border-block-start:none;padding-block-start:0;padding-block-end:var(--s5);
  background:var(--ui-layer-alt)}
form.profile{display:inline-flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
form.profile input{inline-size:16ch;padding:var(--s2) var(--s3);font-size:var(--t-body-c)}
.grant{display:inline-flex;align-items:center;gap:var(--s2);background:var(--ia-wash);
  color:var(--ia-active);border-radius:var(--r-pill);padding:var(--s1) var(--s3)
  var(--s1) var(--s4);font-size:var(--t-helper);margin-inline-end:var(--s3);
  margin-block-end:var(--s2)}
.grant .btn.sm{padding-block:0;padding-inline:var(--s2);min-block-size:0;line-height:1}
form.grantadd{display:inline-flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
form.grantadd select{padding:var(--s2) var(--s3);font-size:var(--t-body-c)}
/* a filter chip that is a link (the mail outbox status filter) */
a.chip{text-decoration:none}
a.chip.on,.chip.on{background:var(--ia);color:var(--tx-on-color)}
.chip .n{margin-inline-start:var(--s2);opacity:.75}