/* TSC Campaign Tracker — 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}

/* -------------------------------- 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}
}

/* ======================= campaign tracker additions ======================= */

/* notifications bell */
.bell{position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid var(--line); border-radius:999px; background:var(--card-2); color:var(--ink-2); text-decoration:none}
.bell:hover{color:var(--ink); background:var(--card-3)}
.bell.has{color:var(--brand-text); border-color:var(--brand)}
.bell-count{position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--danger); color:#fff; font-size:10px; font-weight:700; line-height:17px; text-align:center}

/* dashboard layout */
.dash-grid{display:grid; gap:16px; grid-template-columns:minmax(0,2.2fr) minmax(300px,1fr)}
.dash-main>.card+.card,.dash-main>.grid,.dash-main>.card+.grid,.dash-main>.grid+.card{margin-top:16px}
.dash-side>.card+.card{margin-top:16px}
@media (max-width:1000px){ .dash-grid{grid-template-columns:1fr} }
.filters-toggle{position:relative}
.filters-toggle summary{list-style:none; cursor:pointer}
.filters-toggle summary::-webkit-details-marker{display:none}
.filters-pop{position:absolute; right:0; top:calc(100% + 6px); z-index:25; min-width:min(720px,92vw); box-shadow:var(--shadow); margin:0}

/* horizontal bars */
.hbars{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:5px}
.hbars li{display:grid; grid-template-columns:minmax(80px,1.1fr) 3fr auto; gap:8px; align-items:center; font-size:12px}
.hb-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.hb-track{height:8px; background:var(--card-3); border-radius:999px; overflow:hidden}
.hb-fill{display:block; height:100%; background:var(--brand); border-radius:999px}
.hb-value{font-variant-numeric:tabular-nums; font-weight:600; min-width:3.5rem; text-align:right}
.spend-grid{display:grid; gap:18px 26px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* compact row lists */
.rowlist{list-style:none; margin:0; padding:0}
.rowlist li{padding:9px 16px; border-bottom:1px solid var(--line-2); font-size:13px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rowlist li:last-child{border-bottom:0}
.rowlist a{font-weight:600; text-decoration:none}
.rowlist.compact li{padding:4px 0; border:0}
.rowlist .small{margin-left:auto}
.actionlist{list-style:none; margin:0; padding:0}
.actionlist li{padding:9px 16px 9px 14px; border-left:3px solid var(--line); border-bottom:1px solid var(--line-2); font-size:13px}
.actionlist li:last-child{border-bottom:0}
.actionlist a{text-decoration:none; color:var(--ink)}
.actionlist a:hover{text-decoration:underline}
.actionlist .act-warn{border-left-color:var(--accent)}
.actionlist .act-danger{border-left-color:var(--danger)}
.dot{display:inline-block; width:9px; height:9px; border-radius:999px; vertical-align:middle; margin-right:2px}
.legend{display:flex; gap:10px; flex-wrap:wrap; margin-left:auto}

/* cards view */
.cards{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.ccard{display:flex; flex-direction:column; gap:6px; padding:13px 14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); text-decoration:none; color:inherit; box-shadow:var(--shadow)}
.ccard:hover{border-color:var(--brand)}
.ccard h3{font-size:14px; line-height:1.3}
.ccard-top{display:flex; align-items:center; gap:8px}
.ccard-foot{display:flex; gap:8px; margin-top:auto; padding-top:6px; border-top:1px solid var(--line-2)}
.provider-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); margin-top:8px}

/* calendar */
.calgrid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid var(--line-2)}
.cal-dn{padding:6px 8px; font-family:var(--font-head); font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); background:var(--card-2); border-bottom:1px solid var(--line)}
.cal-cell{min-height:104px; padding:5px 6px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); display:flex; flex-direction:column; gap:3px}
.cal-cell:nth-child(7n){border-right:0}
.cal-empty{background:var(--card-2)}
.cal-today{background:var(--accent-soft)}
.cal-num{font-size:12px; font-weight:600; color:var(--ink-2); text-decoration:none}
.cal-item{display:block; font-size:11px; line-height:1.3; padding:2px 5px; border-left:3px solid var(--brand); background:var(--card-2);
  border-radius:3px; text-decoration:none; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal-item:hover{background:var(--card-3)}
.cal-more{font-size:10.5px; color:var(--brand-text); text-decoration:none}
.weekgrid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid var(--line-2)}
.week-col{min-height:200px; padding:6px; border-right:1px solid var(--line-2); display:flex; flex-direction:column; gap:4px}
.week-col:last-child{border-right:0}
.week-head{font-family:var(--font-head); font-size:12px; font-weight:700; text-decoration:none; color:var(--ink-2); margin-bottom:4px}
.week-col .cal-item{white-space:normal}
@media (max-width:760px){ .calgrid,.weekgrid{grid-template-columns:repeat(1,1fr)} .cal-dn{display:none} .cal-empty{display:none} .cal-cell{min-height:auto} }

/* timeline (gantt) */
.timeline-wrap{overflow-x:auto}
.tl-months{position:relative; height:26px; margin-left:220px; border-bottom:1px solid var(--line)}
.tl-month{position:absolute; top:0; height:26px; line-height:26px; font-size:11px; font-weight:600; color:var(--ink-3);
  border-left:1px solid var(--line-2); padding-left:6px; overflow:hidden; white-space:nowrap}
.tl-rows{position:relative}
.tl-today{position:absolute; top:0; bottom:0; margin-left:220px; width:2px; background:var(--accent); z-index:2}
.tl-row{display:grid; grid-template-columns:220px minmax(0,1fr); border-bottom:1px solid var(--line-2); min-height:40px}
.tl-label{padding:7px 10px; font-size:12.5px; overflow:hidden}
.tl-label a{text-decoration:none; font-weight:600}
.tl-track{position:relative}
.tl-bar{position:absolute; top:9px; height:22px; line-height:20px; border:1px solid; border-radius:4px; font-size:11px; font-weight:600;
  padding:0 7px; overflow:hidden; white-space:nowrap; text-decoration:none; text-overflow:ellipsis}

/* tabs and switches */
.tabs{display:flex; gap:2px; flex-wrap:wrap; margin-bottom:14px; border-bottom:1px solid var(--line)}
.tabs a{padding:8px 12px; font-size:12.5px; font-weight:600; text-decoration:none; color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs a:hover{color:var(--ink); border-bottom-color:var(--line)}
.segmented{display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--card)}
.segmented a{padding:6px 11px; font-size:12px; font-weight:600; text-decoration:none; color:var(--ink-2); border-right:1px solid var(--line)}
.segmented a:last-child{border-right:0}
.segmented a[aria-current="page"]{background:var(--brand-soft); color:var(--brand-text)}
.steps{list-style:none; display:flex; gap:0; margin:0 0 16px; padding:0; counter-reset:step}
.steps li{flex:1; padding:8px 10px; font-size:12px; font-weight:600; color:var(--ink-3); border-bottom:3px solid var(--line)}
.steps li::before{counter-increment:step; content:counter(step) ". "}
.steps li.is-current{color:var(--brand-text); border-bottom-color:var(--brand)}
.steps li.is-done{color:var(--ok); border-bottom-color:var(--ok)}

/* KPI tiles inside cards */
.kpis{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.kpi{padding:10px 12px; background:var(--card-2); border-radius:var(--r); border:1px solid var(--line-2)}
.kpi-label{font-family:var(--font-head); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.kpi-value{font-family:var(--font-head); font-size:19px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums}
.kpi-note{font-size:11px; color:var(--ink-3)}
.goals{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); margin-top:6px}
.goal .meter{margin-top:4px}

/* documents */
.doclist{list-style:none; margin:0; padding:0}
.doclist li{display:flex; gap:12px; align-items:center; padding:9px 16px; border-bottom:1px solid var(--line-2)}
.doclist li:last-child{border-bottom:0}
.doc-meta{flex:1; min-width:0}
.doc-meta a{font-weight:600; text-decoration:none; word-break:break-all}
.thumb-file{display:grid; place-items:center; font-family:var(--font-head); font-size:10px; font-weight:700; color:var(--ink-3)}
.upload-form{border-top:1px solid var(--line-2)}
.inline{display:inline}

/* notifications inbox */
.notelist{list-style:none; margin:0; padding:0}
.notelist li{display:flex; gap:12px; align-items:flex-start; padding:11px 16px; border-bottom:1px solid var(--line-2); border-left:3px solid transparent}
.notelist li:last-child{border-bottom:0}
.notelist li.is-unread{border-left-color:var(--brand); background:var(--card-2)}
.notelist li.is-overdue{border-left-color:var(--danger)}
.note-main{flex:1; min-width:0}
.note-main>a{font-weight:600; text-decoration:none}

/* map */
.map{height:520px; width:100%; background:var(--card-3)}
.map-sm{height:260px}
.leaflet-popup-content{font:12.5px/1.45 var(--font-body)}
.leaflet-popup-content a{font-weight:600}

/* misc forms */
.checks{display:flex; flex-wrap:wrap; gap:4px 16px}
.checks .check{margin-bottom:2px}
.approval-box{padding:10px; border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; background:var(--card-2)}
.approval-inline{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.approval-inline input{max-width:12rem}
.inline-edit{position:relative}
.inline-edit summary{cursor:pointer; list-style:none}
.inline-edit summary::-webkit-details-marker{display:none}
.inline-edit .pop{position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:16rem; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:10px}
.inline-edit .pop .field{margin-bottom:8px}
.mfa-setup{display:grid; gap:18px; grid-template-columns:auto 1fr; align-items:start}
.qr{width:180px; height:180px; background:#fff; padding:8px; border:1px solid var(--line); border-radius:var(--r)}
.qr img,.qr canvas{display:block}
@media (max-width:600px){ .mfa-setup{grid-template-columns:1fr} }
table.matrix th{writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; padding:8px 4px; text-align:left}
table.matrix th:first-child{writing-mode:horizontal-tb; transform:none}
.print-foot{display:none}
@media print{
  .print-foot{display:block; margin-top:12pt; border-top:1px solid #000; padding-top:6pt}
  .tabs,.segmented,.bell,.back{display:none !important}
}

/* boards view: one card per physical face, every booking on it */
.boardlist{display:flex; flex-direction:column}
.board{border-top:1px solid var(--line-2)}
.board-head{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; padding:12px 16px 8px}
.board-head h3{font-size:14.5px}
.board-now{min-width:220px; max-width:360px}
.board-now .eyebrow{display:block; margin-bottom:2px}
.board-now a{font-weight:600; text-decoration:none}
.board-tl{padding:0 16px 6px}
.board-tl .tl-months{margin-left:0; height:20px; border-bottom:1px solid var(--line-2)}
.board-tl .tl-month{height:20px; line-height:20px; font-size:10px}
.board-tl .tl-today{margin-left:0}
.board-tl .tl-row-slim{grid-template-columns:minmax(0,1fr); min-height:28px; border-bottom:0}
.board-tl .tl-bar{top:4px; height:20px; line-height:18px; font-size:10.5px}
.row-live td{background:var(--accent-soft)}

/* charts */
.chart{position:relative; width:100%; padding:6px 0}
.chart-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
@media print{ .chart{height:220px !important} }

/* creative thumbnails and gallery */
.thumb-wide{width:72px; height:44px; object-fit:cover}
.thumb-link{flex:none; display:block}
.ccard-img{width:100%; height:120px; object-fit:cover; border-radius:var(--r); border:1px solid var(--line-2); background:var(--card-3); display:block}
.gallery{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.gallery-item{display:block; text-decoration:none; color:inherit}
.gallery-item img{width:100%; height:130px; object-fit:cover; border-radius:var(--r); border:1px solid var(--line); background:var(--card-3); display:block}
.gallery-item span{display:block; margin-top:4px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* content board */
.kanban{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); align-items:start}
.kcol{background:var(--card-2); border:1px solid var(--line); border-radius:var(--r); padding:8px; min-height:120px}
.kcol-head{display:flex; align-items:center; gap:6px; padding:2px 4px 8px}
.kcard{display:block; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:var(--r); padding:9px 10px; margin-bottom:8px; text-decoration:none; color:inherit; box-shadow:var(--shadow)}
.kcard:hover{border-color:var(--brand)}
.kcard.is-late{border-left-color:var(--danger)}
.kcard-title{font-weight:600; font-size:13px; margin:2px 0 3px; line-height:1.3}
.kcard-foot{display:flex; gap:6px; margin-top:6px}
.cal-item.cal-due{background:transparent; border:1px dashed var(--line); border-left-width:3px; border-left-style:solid}

/* broadcasts: recordings and placeholders */
.bcast-blank{display:grid; place-items:center; color:var(--ink-3); font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.02em; text-transform:uppercase}
.vidgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.vid{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r); padding:8px; background:var(--card)}
.vid-thumb{flex:none; width:120px; height:68px; border-radius:var(--r); overflow:hidden; background:var(--card-3); display:grid; place-items:center; color:var(--ink-2); font-size:12px; font-weight:600; text-decoration:none}
.vid-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.vid-meta{min-width:0; flex:1}
.vid-meta a{text-decoration:none}
.vid-meta input[type=number]{padding:3px 6px; font-size:12px}
.vid-hero{position:relative; display:block; border-radius:var(--r); overflow:hidden; background:var(--card-3)}
.vid-hero img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover}
.vid-hero span{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:44px; text-shadow:0 2px 12px rgba(0,0,0,.6)}