/* koklaw — Docket Brief workbench
   Internal tool. Read at a desk, daily, for hours, on dense legal data.
   Palette and rationale: ui/DESIGN.md

   TWO THEMES, BOTH HAND-BUILT.
   Dark is not an inversion of light. Browser auto-dark inverts algorithmically,
   which shifts the status hues unpredictably and flattens the contrast the
   chips depend on. Both palettes are declared here.

   Dark avoids the two things that cause strain: pure black grounds and pure
   white text. #12171C against #E4EAF0 clears AA comfortably without the
   halation #000 on #FFF produces at 17px.

   Resolution order: explicit choice > system preference > light.
   Print is always light. Ink on paper is not a theme. */

:root{
  color-scheme: light dark;

  --blue:#00274C; --blue-dk:#001A33; --blue-soft:#E8EEF4; --maize:#FFCB05;
  --hdr:#00274C; --hdr-ink:#FFFFFF; --hdr-mute:#9FB6CC; --hdr-nav:#C9D8E5;
  --ink:#14202B; --ink2:#2C3A47; --muted:#5B6B7B; --faint:#8593A1;
  --paper:#FBFAF7; --card:#FFFFFF; --rule:#DDE3E9; --rule-soft:#E4E9ED;
  --field:#FFFFFF; --btn-border:#C7D0D9; --btn-ink:#3B4A57;
  --link:#00274C; --primary:#00274C; --primary-hover:#001A33; --on-primary:#fff;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --blocked:#A32D2D; --held:#BA7517; --draft:#185FA5;
  --released:#3B6D11; --superseded:#888780;

  --chip-bg:#F1EFE8;          --chip-ink:#2C2C2A;
  --chip-blocked-bg:#FCEBEB;  --chip-blocked-ink:#501313;
  --chip-held-bg:#FAEEDA;     --chip-held-ink:#412402;
  --chip-draft-bg:#E6F1FB;    --chip-draft-ink:#042C53;
  --chip-released-bg:#EAF3DE; --chip-released-ink:#173404;

  --notice-bg:#FFFDF8; --err-bg:#FFF7F7; --code-bg:#F1F4F7;
}

/* Dark palette. Declared twice — once for the system preference, once for the
   explicit override — because CSS cannot share a block between the two. Keep
   them identical. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --blue:#4E8FD4; --blue-dk:#3D77B4; --blue-soft:#16283A;
    --hdr:#00305E; --hdr-ink:#FFFFFF; --hdr-mute:#8CA9C6; --hdr-nav:#C3D6E8;
    --ink:#E4EAF0; --ink2:#C3CCD6; --muted:#94A2B0; --faint:#8B9AA8;
    --paper:#12171C; --card:#1A2029; --rule:#2C353F; --rule-soft:#232B34;
    --field:#141A21; --btn-border:#3A4551; --btn-ink:#C3CCD6;
    --link:#7FB2E8; --primary:#1E5A9E; --primary-hover:#2A6FB5; --on-primary:#fff;

    --blocked:#D96B6B; --held:#D79B47; --draft:#5B9BD5;
    --released:#7FB33F; --superseded:#7C8894;

    --chip-bg:#262E38;          --chip-ink:#CFD8E2;
    --chip-blocked-bg:#4A1616;  --chip-blocked-ink:#F7C1C1;
    --chip-held-bg:#43290A;     --chip-held-ink:#F5C77A;
    --chip-draft-bg:#0E2F52;    --chip-draft-ink:#B5D4F4;
    --chip-released-bg:#1E3A0C; --chip-released-ink:#C0DD97;

    --notice-bg:#1E2129; --err-bg:#241A1A; --code-bg:#20272F;
  }
}

[data-theme="dark"]{
  --blue:#4E8FD4; --blue-dk:#3D77B4; --blue-soft:#16283A;
  --hdr:#00305E; --hdr-ink:#FFFFFF; --hdr-mute:#8CA9C6; --hdr-nav:#C3D6E8;
  --ink:#E4EAF0; --ink2:#C3CCD6; --muted:#94A2B0; --faint:#8B9AA8;
  --paper:#12171C; --card:#1A2029; --rule:#2C353F; --rule-soft:#232B34;
  --field:#141A21; --btn-border:#3A4551; --btn-ink:#C3CCD6;
  --link:#7FB2E8; --primary:#1E5A9E; --primary-hover:#2A6FB5; --on-primary:#fff;

  --blocked:#D96B6B; --held:#D79B47; --draft:#5B9BD5;
  --released:#7FB33F; --superseded:#7C8894;

  --chip-bg:#262E38;          --chip-ink:#CFD8E2;
  --chip-blocked-bg:#4A1616;  --chip-blocked-ink:#F7C1C1;
  --chip-held-bg:#43290A;     --chip-held-ink:#F5C77A;
  --chip-draft-bg:#0E2F52;    --chip-draft-ink:#B5D4F4;
  --chip-released-bg:#1E3A0C; --chip-released-ink:#C0DD97;

  --notice-bg:#1E2129; --err-bg:#241A1A; --code-bg:#20272F;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- chrome */
header{background:var(--hdr);border-bottom:3px solid var(--maize)}
.bar{max-width:1080px;margin:0 auto;padding:15px 24px;display:flex;
     align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.brand b{color:var(--hdr-ink);font-size:18px;font-weight:500;letter-spacing:.2px}
.brand span{color:var(--hdr-mute);font-size:15px}
nav{display:flex;gap:22px;align-items:baseline}
nav a{color:var(--hdr-nav);text-decoration:none;font-size:16px;padding-bottom:4px;
      border-bottom:2px solid transparent}
nav a:hover{color:var(--hdr-ink)}
nav a[aria-current]{color:var(--hdr-ink);border-bottom-color:var(--maize)}
nav .who{color:var(--hdr-mute);font-size:14px}
nav .who a{color:var(--hdr-mute)}

#theme{background:none;border:1px solid rgba(255,255,255,.28);color:var(--hdr-nav);
  font:inherit;font-size:14px;padding:5px 12px;border-radius:6px;cursor:pointer}
#theme:hover{border-color:var(--maize);color:var(--hdr-ink)}

main{max-width:1080px;margin:0 auto;padding:26px 24px 70px}
h1{font-size:22px;font-weight:500;margin:0}
h2{font-size:19px;font-weight:500;margin:28px 0 10px}
a{color:var(--link)}

.head{display:flex;align-items:baseline;justify-content:space-between;
      gap:16px;flex-wrap:wrap}
.count{font-size:16px;color:var(--muted)}
.lede{font-size:16px;color:var(--muted);margin:4px 0 22px}

/* ------------------------------------------------------------------ rows */
.row{background:var(--card);border:1px solid var(--rule);
     border-left:5px solid var(--superseded);border-radius:0;
     padding:17px 20px;margin-bottom:14px}
.row.blocked{border-left-color:var(--blocked)}
.row.held{border-left-color:var(--held)}
.row.draft{border-left-color:var(--draft)}
.row.released{border-left-color:var(--released)}

.top{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:8px}
.subject{font-size:18px;font-weight:500}
.case{font-family:var(--mono);font-size:15px;color:var(--muted)}
.meta{font-size:15px;color:var(--muted)}
.summary{font-size:16px;color:var(--ink2);margin:0 0 13px}
.soft{color:var(--muted)}

/* Status reads three ways — rail, chip, word — so it survives a mono printer
   and does not depend on colour vision. */
.chip{font-size:13px;font-weight:500;letter-spacing:.4px;padding:4px 11px;
      border-radius:4px;background:var(--chip-bg);color:var(--chip-ink);
      white-space:nowrap}
.blocked  .chip{background:var(--chip-blocked-bg); color:var(--chip-blocked-ink)}
.held     .chip{background:var(--chip-held-bg);    color:var(--chip-held-ink)}
.draft    .chip{background:var(--chip-draft-bg);   color:var(--chip-draft-ink)}
.released .chip{background:var(--chip-released-bg);color:var(--chip-released-ink)}

.acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stamp{font-size:14px;color:var(--faint);margin-left:auto}

/* -------------------------------------------------------------- controls */
button,.btn{font:inherit;font-size:16px;padding:8px 16px;border-radius:6px;
  cursor:pointer;background:var(--card);border:1px solid var(--btn-border);
  color:var(--btn-ink);text-decoration:none;display:inline-block;line-height:1.4}
button:hover,.btn:hover{border-color:var(--blue);color:var(--blue)}
button:focus-visible,.btn:focus-visible,input:focus-visible,
select:focus-visible,a:focus-visible{outline:3px solid var(--maize);
  outline-offset:2px}
.primary{background:var(--primary);border-color:var(--primary);
         color:var(--on-primary);font-weight:500}
.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);
               color:var(--on-primary)}
.ghost{border-color:var(--blue);color:var(--blue)}

input[type=file],input[type=text],input[type=password],select{font:inherit;
  font-size:16px;padding:9px 11px;border:1px solid var(--btn-border);
  border-radius:6px;background:var(--field);color:var(--ink)}

/* ------------------------------------------------------------- role card */
.panel{background:var(--card);border:1px solid var(--rule);padding:20px 22px;
       margin-bottom:16px}
.panel h2{margin-top:0}
.rolebar{background:var(--blue-soft);border-left:5px solid var(--blue);
         padding:13px 18px;font-size:16px;color:var(--ink2);margin-bottom:16px}
.rolebar b{font-weight:500;color:var(--ink)}

.roleopts{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 6px}
.roleopt{border:1px solid var(--btn-border);padding:12px 16px;border-radius:6px;
  background:var(--card);cursor:pointer;min-width:150px}
.roleopt:hover{border-color:var(--blue)}
.roleopt input{margin-right:8px}
.roleopt .lbl{font-size:17px;font-weight:500}
.roleopt .sub{font-size:14px;color:var(--muted);display:block;margin-top:3px}
.roleopt.suggested{border-color:var(--blue);border-width:2px}
.tag{background:var(--primary);color:var(--on-primary);font-size:12px;
     padding:2px 8px;border-radius:4px;margin-left:8px;letter-spacing:.3px;
     font-weight:500}

/* --------------------------------------------------------------- tables */
table{width:100%;border-collapse:collapse;font-size:16px}
th{text-align:left;font-size:14px;font-weight:500;color:var(--muted);
   letter-spacing:.3px;border-bottom:1px solid var(--rule);padding:8px 10px}
td{padding:10px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
tr:last-child td{border-bottom:none}
td.num{font-family:var(--mono);white-space:nowrap}

.ev{font-size:15px;color:var(--muted);margin:2px 0 0}
.ev code{font-family:var(--mono);font-size:14px;background:var(--code-bg);
         padding:1px 5px;border-radius:3px}

.notice{border:1px solid var(--rule);border-left:5px solid var(--held);
        background:var(--notice-bg);padding:14px 18px;font-size:16px;
        margin-bottom:16px}
.err{border-left-color:var(--blocked);background:var(--err-bg)}

.foot{margin-top:26px;padding-top:15px;border-top:1px solid var(--rule-soft);
      font-size:15px;color:var(--muted)}
.foot b{font-weight:500;color:var(--ink2)}

/* ---------------------------------------------------------------- print */
@media print{
  :root,[data-theme="dark"]{
    --paper:#fff; --card:#fff; --ink:#000; --ink2:#222; --muted:#444;
    --faint:#666; --rule:#999; --rule-soft:#CCC; --notice-bg:#fff;
    --err-bg:#fff; --code-bg:#EEE;
    --chip-bg:#EEE; --chip-ink:#000;
    --chip-blocked-bg:#F4DCDC;  --chip-blocked-ink:#3A0E0E;
    --chip-held-bg:#F6EBD4;     --chip-held-ink:#3A2002;
    --chip-draft-bg:#DEEAF6;    --chip-draft-ink:#052440;
    --chip-released-bg:#E4EFD6; --chip-released-ink:#132B04;
  }
  header,nav,.acts,.roleopts,form,#theme{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  main{max-width:none;padding:0}
  .row{break-inside:avoid;border-left-width:3px}
}

/* Someone who asked the OS to stop moving things means it. */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}