/* TSC Promotional Merchandise — design system.
   Tokens are declared on bare :root first, then redefined for the two dark
   cases, so the page is correct whether or not the OS reports a theme.
   --brand, --accent and the two font stacks are overridden per install by the
   inline block page_head() writes from Settings. */

:root{
  --paper:#EDEFF3; --card:#FFFFFF; --card-2:#F4F6F9; --card-3:#E8ECF1;
  --ink:#14171C; --ink-2:#4B525D; --ink-3:#79818E;
  --line:#D3D8DF; --line-2:#E4E8ED;
  --brand:#00427C; --brand-text:#00427C; --brand-soft:#E6EEF6;
  --accent:#F0B323; --accent-soft:#FDF3DC; --accent-text:#8A5B10;

  --s-new:#5A6472;      --s-new-bg:#EDEFF3;
  --s-triage:#8A5B10;   --s-triage-bg:#FBF1DE;
  --s-assigned:#1F5FA8; --s-assigned-bg:#E6EFF9;
  --s-progress:#1B6E8C; --s-progress-bg:#E2F0F5;
  --s-done:#166534;     --s-done-bg:#E4F1E7;
  --s-hold:#79818E;     --s-hold-bg:#EDEFF3;
  --danger:#B4232B; --danger-bg:#FBE8E8; --danger-line:#E9B9BB;
  --warn:#8A5B10;   --warn-bg:#FBF1DE;   --warn-line:#E8D3A4;
  --ok:#166534;     --ok-bg:#E4F1E7;     --ok-line:#B7D9C2;

  --btn-ink:#14171C; --btn-ink-text:#FFFFFF;
  --shadow:0 1px 2px rgba(20,24,32,.05), 0 10px 30px -14px rgba(20,24,32,.35);
  --r:5px;
  --font-head:Archivo,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Public Sans","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1014; --card:#161A20; --card-2:#1C2128; --card-3:#242A33;
    --ink:#E9EBEF; --ink-2:#A5ADB9; --ink-3:#79818E;
    --line:#2B313B; --line-2:#22272F;
    --brand-text:#7FB2E6; --brand-soft:#132132;
    --accent-soft:#2E2617; --accent-text:#E0A93C;
    --s-new:#9AA3B0;      --s-new-bg:#242932;
    --s-triage:#E0A93C;   --s-triage-bg:#2E2617;
    --s-assigned:#6FA8E8; --s-assigned-bg:#182634;
    --s-progress:#5EB6CE; --s-progress-bg:#152A31;
    --s-done:#6BC48A;     --s-done-bg:#152A1E;
    --s-hold:#79818E;     --s-hold-bg:#242932;
    --danger:#F08B8F; --danger-bg:#33191B; --danger-line:#5A2A2D;
    --warn:#E5A25E;   --warn-bg:#2E2617;   --warn-line:#4C3E20;
    --ok:#6BC48A;     --ok-bg:#152A1E;     --ok-line:#27482F;
    --btn-ink:#E9EBEF; --btn-ink-text:#14171C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0D1014; --card:#161A20; --card-2:#1C2128; --card-3:#242A33;
  --ink:#E9EBEF; --ink-2:#A5ADB9; --ink-3:#79818E;
  --line:#2B313B; --line-2:#22272F;
  --brand-text:#7FB2E6; --brand-soft:#132132;
  --accent-soft:#2E2617; --accent-text:#E0A93C;
  --s-new:#9AA3B0;      --s-new-bg:#242932;
  --s-triage:#E0A93C;   --s-triage-bg:#2E2617;
  --s-assigned:#6FA8E8; --s-assigned-bg:#182634;
  --s-progress:#5EB6CE; --s-progress-bg:#152A31;
  --s-done:#6BC48A;     --s-done-bg:#152A1E;
  --s-hold:#79818E;     --s-hold-bg:#242932;
  --danger:#F08B8F; --danger-bg:#33191B; --danger-line:#5A2A2D;
  --warn:#E5A25E;   --warn-bg:#2E2617;   --warn-line:#4C3E20;
  --ok:#6BC48A;     --ok-bg:#152A1E;     --ok-line:#27482F;
  --btn-ink:#E9EBEF; --btn-ink-text:#14171C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; flex-direction:column;
}
h1,h2,h3,h4{font-family:var(--font-head); margin:0; text-wrap:balance; letter-spacing:-.01em}
h1{font-size:20px} h2{font-size:16px} h3{font-size:14px}
a{color:var(--brand-text)}
p{margin:0 0 10px}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums; text-align:right}
.muted{color:var(--ink-3)}
.small{font-size:12px}
.eyebrow{font-family:var(--font-head); font-size:10px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.spacer{flex:1}
.nowrap{white-space:nowrap}

/* ------------------------------- shell -------------------------------- */
.brandrail{height:3px; background:linear-gradient(90deg,var(--brand) 0 60%,var(--accent) 60% 100%)}

.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand .logo{height:30px; width:auto; display:block}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text strong{font-family:var(--font-head); font-size:14.5px; font-weight:700}
.brand-text small{font-size:11px; color:var(--ink-3)}

.mainnav{display:flex; gap:2px; flex-wrap:wrap; margin-left:8px}
.mainnav a{
  padding:7px 11px; border-radius:var(--r); text-decoration:none;
  color:var(--ink-2); font-size:13px; font-weight:600;
}
.mainnav a:hover{background:var(--card-2); color:var(--ink)}
.mainnav a[aria-current="page"]{background:var(--brand-soft); color:var(--brand-text)}

.who{position:relative; margin-left:auto}
.who summary{
  display:flex; align-items:center; gap:7px; cursor:pointer; list-style:none;
  padding:4px 8px 4px 4px; border:1px solid var(--line); border-radius:999px; background:var(--card-2);
}
.who summary::-webkit-details-marker{display:none}
.who-name{font-size:12.5px; font-weight:600; max-width:11rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.av{
  width:24px; height:24px; flex:none; border-radius:999px; display:grid; place-items:center;
  background:var(--brand); color:#fff; font-family:var(--font-head); font-weight:700; font-size:11.5px;
}
.who-menu{
  position:absolute; right:0; top:calc(100% + 6px); min-width:14rem; z-index:30;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:10px; display:flex; flex-direction:column; gap:6px;
}
.who-role{font-size:12px; font-weight:600}
.who-email{font-size:11.5px; color:var(--ink-3); margin-bottom:4px; word-break:break-all}
.who-menu a,.linkish{
  font-size:12.5px; text-align:left; background:none; border:0; padding:4px 0;
  color:var(--brand-text); cursor:pointer; text-decoration:none;
}

main{flex:1; width:100%; max-width:1320px; margin:0 auto; padding:20px}
main.narrow{max-width:820px}
.foot{
  display:flex; gap:10px; align-items:center; padding:12px 20px;
  border-top:1px solid var(--line); background:var(--card);
  color:var(--ink-3); font-size:11.5px;
}

/* ------------------------------ messages ------------------------------ */
.flashes{max-width:1320px; margin:14px auto -4px; padding:0 20px; display:flex; flex-direction:column; gap:8px}
.flash{padding:10px 13px; border-radius:var(--r); border:1px solid var(--ok-line); background:var(--ok-bg); color:var(--ok); font-weight:600; font-size:13px}
.flash-error{border-color:var(--danger-line); background:var(--danger-bg); color:var(--danger)}
.flash-warn{border-color:var(--warn-line); background:var(--warn-bg); color:var(--warn)}

.notice{padding:11px 13px; border-radius:var(--r); border:1px solid var(--line); background:var(--card-2); font-size:13px; margin-bottom:14px}
.notice-warn{border-color:var(--warn-line); background:var(--warn-bg); color:var(--warn)}
.notice-stop{border-color:var(--danger-line); background:var(--danger-bg); color:var(--danger)}
.notice ul{margin:6px 0 0; padding-left:18px}

/* ------------------------------- cards -------------------------------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card+.card{margin-top:16px}
.pad{padding:16px}
.card-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line-2);
}
.card-head h2{font-size:14.5px}
.card-head .sub{font-size:12px; color:var(--ink-3)}

.page-head{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.page-head h1{font-size:21px}
.page-head .sub{font-size:13px; color:var(--ink-3); margin-top:2px}
.back{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; text-decoration:none; margin-bottom:8px}

.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* ------------------------------- stats -------------------------------- */
.stats{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); margin-bottom:18px}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 14px; text-decoration:none; color:inherit; display:block;
}
a.stat:hover{border-color:var(--brand); background:var(--card-2)}
.stat-label{font-family:var(--font-head); font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}
.stat-value{font-family:var(--font-head); font-size:23px; font-weight:700; margin-top:5px; font-variant-numeric:tabular-nums}
.stat-note{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.stat-warn .stat-value{color:var(--warn)}
.stat-danger .stat-value{color:var(--danger)}
.stat-ok .stat-value{color:var(--ok)}

/* ------------------------------ controls ------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  padding:7px 12px; border-radius:var(--r); font-size:12.5px; font-weight:600;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{background:var(--card-2)}
.btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn-primary:hover{background:var(--brand); opacity:.9}
.btn-accent{background:var(--accent); color:#3A2A05; border-color:var(--accent)}
.btn-danger{color:var(--danger); border-color:var(--danger-line)}
.btn-sm{padding:4px 9px; font-size:11.5px}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

.filters{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  padding:11px 14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:16px;
}
.filters label{font-size:11.5px; font-weight:600; color:var(--ink-2)}

input[type=text],input[type=search],input[type=email],input[type=password],input[type=date],
input[type=number],input[type=url],input[type=tel],select,textarea{
  width:100%; padding:7px 9px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); color:var(--ink);
}
textarea{min-height:80px; resize:vertical; line-height:1.5}
select{background:var(--card)}
input:disabled,select:disabled{background:var(--card-3); color:var(--ink-3)}
.field{margin-bottom:13px}
.field>label,.field-label{display:block; font-size:12px; font-weight:600; margin-bottom:4px}
.field .hint{font-size:11.5px; color:var(--ink-3); margin-top:4px}
.field.err input,.field.err select,.field.err textarea{border-color:var(--danger)}
.field .err-text{font-size:11.5px; color:var(--danger); margin-top:4px; font-weight:600}
.field-row{display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.check{display:flex; align-items:flex-start; gap:8px; font-size:13px; margin-bottom:9px}
.check input{margin-top:3px; flex:none; width:auto}
fieldset{border:1px solid var(--line); border-radius:var(--r); padding:13px; margin:0 0 16px}
legend{font-family:var(--font-head); font-size:12px; font-weight:700; padding:0 6px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3)}

.qty-input{width:5.5rem; text-align:right}
.money-input{width:7rem; text-align:right}

/* ------------------------------- tables ------------------------------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.data{width:100%; border-collapse:collapse; font-size:13px}
table.data th{
  text-align:left; font-family:var(--font-head); font-size:10.5px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--card-2);
}
table.data td{padding:9px 12px; border-bottom:1px solid var(--line-2); vertical-align:top}
table.data tbody tr:hover{background:var(--card-2)}
table.data tr.is-total td{font-weight:700; background:var(--card-2); border-top:2px solid var(--line)}
table.data td.num,table.data th.num{text-align:right; font-variant-numeric:tabular-nums}
table.data a{font-weight:600; text-decoration:none}
table.data a:hover{text-decoration:underline}
.row-danger td{background:var(--danger-bg)}
.row-warn td{background:var(--warn-bg)}

.pill{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; white-space:nowrap;
}
.pill-quiet{background:var(--card-3); color:var(--ink-2)}
.tag{display:inline-block; padding:1px 7px; border-radius:var(--r); background:var(--card-3);
  color:var(--ink-2); font-size:11px; font-weight:600}

.empty{padding:34px 20px; text-align:center; color:var(--ink-3)}
.empty p{margin-bottom:12px}

/* ------------------------------- meters ------------------------------- */
.meter{height:6px; border-radius:999px; background:var(--card-3); overflow:hidden; min-width:110px}
.meter span{display:block; height:100%; background:var(--ok); border-radius:999px}
.meter-warn span{background:var(--accent)}
.meter-over span{background:var(--danger); width:100% !important}
.meter-none span{width:0}
.meter-note{font-size:11px; color:var(--ink-3); margin-top:3px}

/* ---------------------------- request detail --------------------------- */
.detail-grid{display:grid; gap:16px; grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
@media (max-width:900px){ .detail-grid{grid-template-columns:1fr} }
.facts{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fact dt{font-family:var(--font-head); font-size:10px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3)}
.fact dd{margin:2px 0 0; font-size:13px; font-weight:600}

.timeline{list-style:none; margin:0; padding:0}
.timeline li{padding:10px 0 10px 18px; border-left:2px solid var(--line); position:relative; margin-left:4px}
.timeline li::before{content:""; position:absolute; left:-5px; top:15px; width:8px; height:8px;
  border-radius:999px; background:var(--brand)}
.timeline .when{font-size:11px; color:var(--ink-3)}
.timeline .what{font-size:13px; font-weight:600}
.timeline .who-did{font-size:12px; color:var(--ink-2)}
.timeline .detail{font-size:12.5px; color:var(--ink-2); margin-top:2px}

/* ------------------------------ item cards ----------------------------- */
.thumb{width:44px; height:44px; border-radius:var(--r); object-fit:cover; background:var(--card-3);
  border:1px solid var(--line-2); display:block}
.thumb-lg{width:100%; max-width:260px; height:auto; border-radius:var(--r); border:1px solid var(--line)}
.itemcell{display:flex; gap:10px; align-items:flex-start}
.itemcell .name{font-weight:600}
.itemcell .sub{font-size:11.5px; color:var(--ink-3)}

/* ------------------------------- charts -------------------------------- */
.bars{display:flex; align-items:flex-end; gap:5px; height:120px; padding-top:6px}
.bars .bar{flex:1; background:var(--brand-soft); border-top:2px solid var(--brand); border-radius:2px 2px 0 0; min-height:2px; position:relative}
.bars .bar span{position:absolute; bottom:-18px; left:0; right:0; text-align:center; font-size:9.5px; color:var(--ink-3)}
.barwrap{padding-bottom:22px}

/* ------------------------------- portal -------------------------------- */
.portal-bar{border-bottom:1px solid var(--line)}
.portal-bar .brand-text small{color:var(--brand-text); font-weight:600}

.portal-alloc{margin-bottom:16px}
.portal-alloc-head{display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:12px}
.portal-alloc-head h2{font-size:18px}
.portal-alloc-figures{margin-left:auto; text-align:right}
.portal-alloc .stat-value.warn{color:var(--warn)}
.portal-alloc .stat-value.danger{color:var(--danger)}

.portal-filters{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:4px}
.portal-filters input[type=search]{width:min(320px,100%)}

.pgroup+.pgroup{margin-top:22px}
.pgroup-head{padding-bottom:6px; border-bottom:1px solid var(--line-2); margin-bottom:12px}
.pgrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

.pcard{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
}
.pcard.is-chosen{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}
.pcard-photo{aspect-ratio:4/3; background:var(--card-3); display:grid; place-items:center; overflow:hidden}
.pcard-photo img{width:100%; height:100%; object-fit:cover; display:block}
.pcard-noimage{color:var(--ink-3); opacity:.5}
.pcard-body{padding:11px 12px 12px; display:flex; flex-direction:column; gap:5px; flex:1}
.pcard-body h3{font-size:13.5px; line-height:1.3}
.pcard-cat{font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.pcard-desc{font-size:12px; color:var(--ink-2); margin:0; line-height:1.45}
.pcard-facts{display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-top:auto; padding-top:6px}
.pcard-out{font-size:12px; color:var(--ink-3); font-style:italic; padding-top:6px}
.pcard-pick{display:flex; gap:6px; align-items:center; padding-top:8px; border-top:1px solid var(--line-2)}
.pcard-pick input{width:100%; text-align:center; padding:6px 4px}
.pcard-sizes{display:grid; grid-template-columns:repeat(auto-fit,minmax(48px,1fr)); gap:5px}
.pcard-qty{display:flex; flex-direction:column; gap:2px; min-width:0}
.pcard-qty.is-out{opacity:.4}
.pcard-size{font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); text-align:center}
.pcard-avail{font-size:9.5px; color:var(--ink-3); text-align:center}

.portal-tray{position:sticky; bottom:0; z-index:15; margin:16px -20px -20px; padding:0 20px 14px}
.portal-tray-inner{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--brand); border-radius:var(--r);
  box-shadow:var(--shadow); padding:12px 16px;
}
.portal-tray-sum{font-family:var(--font-head); font-size:17px; font-weight:700}
.portal-tray-left div{font-family:var(--font-head); font-size:15px; font-weight:700}

.pstages{list-style:none; display:flex; gap:0; margin:0; padding:0; flex-wrap:wrap}
.pstages li{flex:1; min-width:120px; position:relative; padding:0 8px 0 0; display:flex; flex-direction:column; gap:3px}
.pstages li::before{content:""; position:absolute; left:6px; right:8px; top:6px; height:2px; background:var(--line)}
.pstages li:last-child::before{display:none}
.pstages li.is-done::before{background:var(--ok)}
.pstage-dot{width:13px; height:13px; border-radius:999px; background:var(--card-3); border:2px solid var(--line); position:relative; z-index:1}
.pstages li.is-done .pstage-dot{background:var(--ok); border-color:var(--ok)}
.pstages li.is-now .pstage-dot{background:var(--card); border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.pstage-label{font-size:12.5px; font-weight:600; margin-top:5px}
.pstages li.is-now .pstage-label{color:var(--brand-text)}
.pstage-note{font-size:11px; color:var(--ink-3); min-height:14px}

.noimage-prompt{display:flex; gap:10px; align-items:flex-start; color:var(--ink-3)}
.noimage-prompt p{margin:0}

@media (max-width:620px){
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .portal-tray-inner{gap:12px}
}

/* ------------------------------ documents ------------------------------ */
main.doc{max-width:1120px}
.doc-layout{display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start}
.doc-meta{grid-column:1 / -1; font-size:11.5px; color:var(--ink-3)}
.doc-toc{position:sticky; top:72px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px}
.doc-toc ol{list-style:none; margin:8px 0 0; padding:0; counter-reset:sec}
.doc-toc li{counter-increment:sec; font-size:12.5px; line-height:1.35; padding:4px 0; border-top:1px solid var(--line-2)}
.doc-toc li:first-child{border-top:0}
.doc-toc li::before{content:counter(sec); display:inline-block; width:1.6em; color:var(--ink-3); font-family:var(--font-head); font-size:11px; font-weight:600}
.doc-toc a{text-decoration:none; color:var(--ink)}
.doc-toc a:hover{color:var(--brand-text)}
.doc-body{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px 32px 34px; max-width:78ch}
.doc-body p{font-size:14px; line-height:1.6; margin:0 0 11px}
.doc-h1{font-size:19px; margin:34px 0 8px; padding-top:22px; border-top:1px solid var(--line-2); color:var(--brand-text); scroll-margin-top:80px}
.doc-h1:first-child{margin-top:0; padding-top:0; border-top:0}
.doc-h2{font-size:14.5px; margin:20px 0 6px}
.doc-lede{font-size:15px; color:var(--ink-2)}
.doc-who{font-size:12px; color:var(--brand-text); font-weight:600; margin-top:-4px}
.doc-steps,.doc-bullets{margin:0 0 12px; padding-left:22px; font-size:14px; line-height:1.55}
.doc-steps li,.doc-bullets li{margin-bottom:6px}
.doc-body .notice{margin:12px 0 16px; font-size:13.5px}
.doc-body .tablewrap{margin:8px 0 16px}
.doc-body table.data td{font-size:13px}
.doc-roles{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; margin:8px 0 16px}
.doc-role{border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; background:var(--card-2)}
.doc-role strong{display:block; font-family:var(--font-head); margin-bottom:4px}
.doc-role p{font-size:13px; margin:0 0 6px}
@media (max-width:860px){ .doc-layout{grid-template-columns:1fr} .doc-toc{position:static} }
@media print{ .doc-toc{display:none} .doc-layout{display:block} .doc-body{border:0; padding:0; max-width:none} .doc-h1{page-break-before:auto} }

/* -------------------------------- login -------------------------------- */
.auth{max-width:400px; margin:9vh auto; padding:0 20px}
.auth .card{padding:24px}
.auth h1{font-size:19px; margin-bottom:4px}
.auth .sub{font-size:13px; color:var(--ink-3); margin-bottom:18px}
.auth .logo{height:40px; margin-bottom:16px}

/* --------------------------- printed reports --------------------------- */
.print-head{display:none}
@media print{
  .topbar,.foot,.filters,.btn,.flashes,.no-print{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  main{max-width:none; padding:0}
  .card{border:0; box-shadow:none}
  .card+.card{margin-top:18pt}
  .print-head{display:block; margin-bottom:14pt; border-bottom:2px solid #000; padding-bottom:8pt}
  .print-head h1{font-size:16pt}
  .print-head .meta{font-size:9pt; color:#444}
  table.data{font-size:9pt}
  table.data th{background:#eee !important; color:#000; border-bottom:1px solid #000}
  table.data td{border-bottom:1px solid #ddd}
  tr,td,th{page-break-inside:avoid}
  thead{display:table-header-group}
  a{color:#000; text-decoration:none}
  @page{margin:14mm}
}

@media (max-width:760px){
  .topbar{padding:10px 14px}
  .mainnav{order:3; width:100%; margin-left:0; overflow-x:auto}
  main{padding:14px}
  .detail-grid{grid-template-columns:1fr}
}