:root {
    --ui: 1;
    --bg:#eef1f4; --surface:#fff; --side:#16232e;
    --rule:#d3dae1; --rule-soft:#e6ebef;
    --ink:#16202a; --ink-2:#47576a; --ink-3:#7b8a9c; --notlive:#8a5d0f;
    --accent:#14567A; --accent-soft:#e3eef5; --today:#fff8e8;
    --shadow:0 1px 2px rgba(16,32,48,.07), 0 10px 28px -20px rgba(16,32,48,.5);
    /* standing: meaning only, never the firm's brand colour */
    --st-critical:#B3402F; --st-serious:#B8661A; --st-warning:#8A6D0F; --st-good:#1B6B4A; --st-dormant:#8593a3;
    --st-wash:#f6f8fa; --stg-mix:13%;
    /* the consultant's stage in the submittal register */
    --sr-consult:#5A4797;
    /* the admin screen's band: what comes with a product the firm could add (Sheet 53) */
    --band:#f3f0e6; --band-rule:#b9a979; --band-ink:#6b5a1f; --new:#B3402F;
    /* Aliases. Several components -- "Where did it go?", the timesheet's answer
       strip, the analytics drill -- were written against these names before the
       palette settled on the ones above. An undefined custom property is not an
       error: the declaration is simply dropped, so those panels rendered with no
       background at all and the page showed through them. Defined here in terms
       of the real tokens, so they follow the theme with everything else. */
    --card: var(--surface); --line: var(--rule); --muted: var(--ink-3); --soft: var(--accent-soft);
  }
  /* Dark by the person's choice, or by the system when they have not chosen.
     data-theme is set from their saved preference, so every screen -- the
     standup included -- follows the same choice. */
  :root { color-scheme: light; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg:#0e1319; --surface:#161e26; --side:#0b1219;
      --rule:#2b3742; --rule-soft:#212b34;
      --ink:#e2e9ef; --ink-2:#a7b6c4; --ink-3:#758496; --notlive:#e0b05a;
      --accent:#5fb0dc; --accent-soft:#162833; --today:#231e12;
      --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -22px rgba(0,0,0,.9);
      --st-critical:#E08876; --st-serious:#E3A062; --st-warning:#D9B64A; --st-good:#63BE94; --st-dormant:#7c8b97;
      --st-wash:#121a21; --stg-mix:22%; --sr-consult:#A99BE6;
      --band:#1d1b14; --band-rule:#8a7a45; --band-ink:#D9B64A; --new:#E08876;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
      --bg:#0e1319; --surface:#161e26; --side:#0b1219;
      --rule:#2b3742; --rule-soft:#212b34;
      --ink:#e2e9ef; --ink-2:#a7b6c4; --ink-3:#758496; --notlive:#e0b05a;
      --accent:#5fb0dc; --accent-soft:#162833; --today:#231e12;
      --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -22px rgba(0,0,0,.9);
      --st-critical:#E08876; --st-serious:#E3A062; --st-warning:#D9B64A; --st-good:#63BE94; --st-dormant:#7c8b97;
      --st-wash:#121a21; --stg-mix:22%; --sr-consult:#A99BE6;
      --band:#1d1b14; --band-rule:#8a7a45; --band-ink:#D9B64A; --new:#E08876;
  }
  * { box-sizing:border-box; }
  /* An author rule that sets `display` overrides the UA default for [hidden];
     this makes the attribute authoritative so toggling .hidden always works. */
  [hidden] { display:none !important; }
  /* legacy text arrives with real line breaks recovered from <br/> */
  .ltext { white-space: pre-wrap; }
  .segbar { display:flex; gap:.4rem; margin:0 0 .7rem; flex-wrap:wrap; }
  .segbar .seg { font: inherit; font-size:.8rem; color:var(--ink-3); background:transparent;
         border:1px solid var(--rule); border-radius:4px; padding:.28rem .6rem; cursor:pointer; }
  .segbar .seg:hover { color:var(--ink); }
  .segbar .seg.on { color:var(--ink); border-color:var(--accent); background:var(--accent-soft); }
  .segn { font-variant-numeric:tabular-nums; opacity:.75; margin-left:.15rem; }
  .trail { display:flex; gap:1.4rem; align-items:flex-end; flex-wrap:wrap;
           padding:0 0 .9rem; margin-bottom:.9rem; border-bottom:1px solid var(--rule); }
  .trail__who h2 { margin:0; font-size:1.25rem; }
  .trail__who p { margin:.15rem 0 0; font-size:.85rem; }
  .trail__stats { display:flex; gap:1.6rem; margin-left:auto; flex-wrap:wrap;
                  padding-right:.4rem; }          /* the last figure ran into the edge */
  .trail__stats div { text-align:right; }
  .trail__stats b { display:block; font-size:1.3rem; font-variant-numeric:tabular-nums; }
  .trail__stats span { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
  table.perms th.rolecol { text-align:center; white-space:nowrap; padding:0; }
  table.perms th.rolecol button { font:inherit; font-size:inherit; letter-spacing:inherit;
        text-transform:inherit; color:var(--accent); background:none; border:0; cursor:pointer;
        padding:.3rem .4rem; width:100%; }
  table.perms th.rolecol button:hover { text-decoration:underline; }
  .fnbtn { font:inherit; text-align:left; background:none; border:0; padding:0; cursor:pointer;
           color:var(--ink); width:100%; }
  .fnbtn:hover b { color:var(--accent); text-decoration:underline; }
  table.perms th.rolecol span { display:block; font-weight:400; text-transform:none;
                                letter-spacing:0; font-size:.66rem; color:var(--ink-3); }
  table.perms td.perm { text-align:center; white-space:nowrap; }
  table.perms td.perm span { display:inline-block; width:1.05rem; font-size:.66rem; font-weight:700;
                             border-radius:2px; margin:0 .04rem; }
  table.perms td.perm .on  { color:var(--surface); background:var(--accent); }
  table.perms td.perm .off { color:var(--ink-3); background:var(--rule-soft); }
  table.perms td.perm .yes { width:auto; padding:0 .35rem; color:var(--surface); background:#1B6B4A; }
  table.perms td.perm .no  { width:auto; padding:0 .35rem; color:var(--ink-3); }
  table.perms tr.special td { background:var(--bg); }
  table.perms tr.special:first-of-type td { border-top:2px solid var(--rule); }
  .cats { margin-top:.15rem; display:flex; gap:.25rem; flex-wrap:wrap; }
  .cat { font-size:.66rem; letter-spacing:.04em; padding:.05rem .35rem; border-radius:3px;
         border:1px solid var(--rule); color:var(--ink-3); background:var(--bg); white-space:nowrap; }
  .joblink { color:var(--accent); text-decoration:none; }
  .joblink:hover { text-decoration:underline; }
  .doclist { list-style:none; margin:0; padding:0; font-size:.82rem; }
  .docact { display:inline-block; margin-left:.4rem; font-size:.66rem; letter-spacing:.03em;
            padding:.02rem .3rem; border-radius:3px; border:1px solid var(--rule);
            color:var(--ink-3); background:var(--bg); white-space:nowrap; }
  .docitem { font:inherit; font-size:.82rem; text-align:left; padding:0; border:0; background:none;
             color:var(--accent); cursor:pointer; text-decoration:underline;
             text-decoration-style:dotted; text-underline-offset:2px; }
  .docitem:hover { text-decoration-style:solid; }
  .docitem:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .docitem--nopath { color:var(--ink-2); text-decoration-color:var(--ink-3); }
  .tsbar--find, .tsbar--group { flex-wrap:wrap; gap:.5rem .7rem; }
  .tsbar--find input[type=date], .tsbar--find input#fJob {
    font:inherit; font-size:.85rem; padding:.25rem .45rem; border-radius:5px;
    border:1px solid var(--line); background:var(--bg); color:var(--ink); }
  .tsbar--find input#fJob { min-width:15rem; }
  .tsbar--find input:focus-visible, .tsbar--find select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  .btn.on { background:var(--accent); border-color:var(--accent); color:#fff; }
  .tsans { display:flex; gap:1.6rem; align-items:baseline; flex-wrap:wrap;
           padding:.7rem .9rem; margin:.6rem 0 .2rem; border:1px solid var(--line);
           border-left:3px solid var(--accent); border-radius:6px; background:var(--card); }
  .tsans__n b { font-size:1.35rem; font-weight:600; font-variant-numeric:tabular-nums; }
  .tsans__n span { font-size:.75rem; color:var(--muted); margin-left:.3rem; }
  .tsans__r { margin-left:auto; font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; }
  .shbar { display:inline-block; height:.5rem; width:var(--w); max-width:5rem; min-width:1px;
           background:var(--accent); opacity:.5; border-radius:1px; margin-right:.4rem;
           vertical-align:baseline; }
  .lnk { all:unset; cursor:pointer; color:var(--accent); text-decoration:underline;
         text-decoration-style:dotted; text-underline-offset:2px; }
  .lnk:hover { text-decoration-style:solid; }
  .lnk:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }