/* Colortek Branding Style Guide, Book 3: Montserrat (Black/ExtraBold uppercase heads, Regular/Medium body), light grey ground,
   charcoal ink and panels, colour only from the Colortek drop. Motion is smooth and elegant: fades and slow reveals, no spins or bounces.
   Layout: charcoal header band, one column of white cards on grey; big time numerals carry the daily deadlines. */
:root{
  --ground:#E3E4E6; --surface:#FFFFFF; --sunk:#EEEFF1; --line:#CDD0D4;
  --ink:#3A3A3A; --ink-strong:#2B2B2B; --muted:#6E7177; --band:#3A3A3A; --band-ink:#FFFFFF; --band-muted:#B9BCC1;
  --action:#3A3A3A; --action-ink:#FFFFFF;
  --ok:#3D7D4B; --ok-soft:#E2EFE3; --warn:#C25F1F; --warn-soft:#F8E7DA; --bad:#D7261E; --bad-soft:#F9DEDC;
  --shadow:0 1px 2px rgba(43,43,43,.05),0 12px 28px -20px rgba(43,43,43,.45);
  --font:"Montserrat","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ground:#2A2C2F; --surface:#36383C; --sunk:#404348; --line:#4E5257;
  --ink:#E9EAEC; --ink-strong:#FFFFFF; --muted:#A9ADB3; --band:#1F2023; --band-ink:#FFFFFF; --band-muted:#9EA2A8;
  --action:#E9EAEC; --action-ink:#2B2B2B;
  --ok:#86C793; --ok-soft:#24352A; --warn:#EE9A62; --warn-soft:#3F2C1E; --bad:#F2716A; --bad-soft:#43231F;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 28px -20px rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#2A2C2F; --surface:#36383C; --sunk:#404348; --line:#4E5257;
  --ink:#E9EAEC; --ink-strong:#FFFFFF; --muted:#A9ADB3; --band:#1F2023; --band-ink:#FFFFFF; --band-muted:#9EA2A8;
  --action:#E9EAEC; --action-ink:#2B2B2B;
  --ok:#86C793; --ok-soft:#24352A; --warn:#EE9A62; --warn-soft:#3F2C1E; --bad:#F2716A; --bad-soft:#43231F;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 28px -20px rgba(0,0,0,.8); color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--ground);color:var(--ink);font-family:var(--font);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.wrap{max-width:940px;margin:0 auto;padding:0 16px}

/* logo */
.wordmark{display:inline-flex;align-items:center;gap:10px;color:currentColor}
.wordmark .ctdrop{height:30px;width:auto;display:block}
.wordmark .ctword{height:13px;width:auto;display:block}

/* header band */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--band);color:var(--band-ink)}
.bar{display:flex;align-items:center;gap:14px;padding-block:12px;flex-wrap:wrap}
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--band-muted);margin-right:auto}
.tabs{display:flex;gap:2px;background:rgba(255,255,255,.08);padding:3px;border-radius:6px}
.tabs button{border:0;background:transparent;color:var(--band-muted);font:700 11.5px var(--font);letter-spacing:.1em;text-transform:uppercase;padding:8px 13px;border-radius:4px;cursor:pointer}
.tabs button[aria-selected="true"]{background:#FFFFFF;color:#2B2B2B}
.who{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--band-muted)}
.who b{color:var(--band-ink);font-weight:800}
.who button{border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--band-ink);font:700 11px var(--font);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:4px;cursor:pointer}

main{padding-block:28px 80px}
.kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
h1{font-size:30px;font-weight:900;line-height:1.05;margin:0 0 8px;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink-strong);text-wrap:balance}
h2{font-size:14px;font-weight:800;margin:0 0 12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-strong)}
.sub{color:var(--muted);margin:0;max-width:66ch}
.panel{background:var(--surface);border-radius:8px;padding:20px;box-shadow:var(--shadow)}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1 1 190px;min-width:0}
label.f{display:flex;flex-direction:column;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font:500 14.5px var(--font);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:11px 12px;width:100%;text-transform:none;letter-spacing:0}
textarea{min-height:72px;resize:vertical;line-height:1.5}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1 1 140px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:800 12px var(--font);letter-spacing:.1em;text-transform:uppercase;padding:13px 10px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.seg button small{font:500 11.5px var(--font);letter-spacing:.02em;text-transform:none;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.seg button[aria-pressed="true"] small{color:inherit;opacity:.75}
.zone{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-strong);margin:18px 0 2px}
.zone:first-child{margin-top:0}
.zone::before{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
.item{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.zone+.item{border-top:0}
.item-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.item-text{flex:1 1 260px;min-width:0;font-weight:500}
.yn{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap}
.yn button{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:800 11.5px var(--font);letter-spacing:.1em;text-transform:uppercase;padding:9px 15px;border-radius:999px;cursor:pointer;min-width:74px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.yn button svg{width:13px;height:13px;display:none}
.yn button[aria-pressed="true"] svg{display:block}
.yn button.y[aria-pressed="true"]{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.yn button.n[aria-pressed="true"]{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.yn button.s{min-width:38px;padding:9px 0;font-size:12.5px;letter-spacing:0}
.yn button.s[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.btn{border:0;background:var(--action);color:var(--action-ink);font:800 13px var(--font);letter-spacing:.12em;text-transform:uppercase;padding:16px 18px;border-radius:6px;cursor:pointer;width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);width:auto;font-size:11px;padding:9px 13px}
.meter{height:4px;border-radius:999px;background:var(--sunk);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--ink-strong);border-radius:inherit}
.progress{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.note{padding:12px 14px;border-radius:6px;background:var(--sunk);color:var(--ink);font-weight:500}
.note.ok{background:var(--ok-soft);color:var(--ok)}
.note.err{background:var(--bad-soft);color:var(--bad)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:4px;white-space:nowrap}
.chip.good{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.none{background:var(--sunk);color:var(--muted)}
.chip.info{background:var(--sunk);color:var(--ink)}
.due{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.due .panel{display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.due .l{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.due .t{font-size:46px;font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--ink-strong)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:11px 8px;border-top:1px solid var(--line);vertical-align:middle}
th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:0;font-weight:800;white-space:nowrap}
td.strong{font-weight:700;color:var(--ink-strong)}
.rep{border-top:1px solid var(--line);padding:13px 0}
.rep:first-child{border-top:0;padding-top:0}
.rep summary{cursor:pointer;display:flex;gap:10px;align-items:center;flex-wrap:wrap;list-style:none;border-radius:4px}
.rep summary::-webkit-details-marker{display:none}
.rep summary .lead{flex:1 1 230px;min-width:0}
.rep summary .lead strong{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:13px}
.rep ul{margin:8px 0 0;padding-left:0;list-style:none}
.rep li{margin:4px 0;padding-left:14px;position:relative}
.rep li::before{content:"";position:absolute;left:0;top:7px;border-left:5px solid var(--muted);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.rep li.fail{color:var(--bad)}
.rep li.fail::before{border-left-color:var(--bad)}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.secret{font-weight:700;font-size:14px;background:var(--surface);padding:6px 10px;border-radius:4px;user-select:all;letter-spacing:.02em}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.photos figure{margin:0;position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--sunk)}
.photos img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.photos figure button{position:absolute;top:5px;right:5px;border:0;background:rgba(43,43,43,.75);color:#fff;border-radius:999px;width:26px;height:26px;cursor:pointer;font-size:15px;line-height:1}
.addphoto{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;aspect-ratio:1;border:1.5px dashed var(--line);background:transparent;border-radius:6px;color:var(--muted);font:800 10px var(--font);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-align:center;padding:6px}
.addphoto svg{width:24px;height:24px}
.viewer{position:fixed;inset:0;z-index:20;background:rgba(30,31,34,.92);display:flex;align-items:center;justify-content:center;padding:20px}
.viewer img{max-width:100%;max-height:100%;border-radius:4px}

/* sign-in */
.login{max-width:440px;margin:0 auto}
.login .band{background:var(--band);color:var(--band-ink);border-radius:8px 8px 0 0;padding:34px 24px 28px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.login .band .wordmark{flex-direction:column;gap:16px}
.login .band .ctdrop{height:70px}
.login .band .ctword{height:22px}
.login .band .tag{font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--band-muted)}
.login .band .ghost-drop{position:absolute;right:-60px;bottom:-80px;width:260px;opacity:.06;filter:grayscale(1) brightness(3);pointer-events:none}
.login .panel{border-radius:0 0 8px 8px}
.values{text-align:center;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:18px}

/* success */
.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(3px)}
.overlay .card{background:var(--band);color:var(--band-ink);border-radius:8px;padding:30px 34px;box-shadow:var(--shadow);text-align:center;max-width:320px;margin:16px}
.overlay .dropfill{position:relative;width:72px;height:98px;margin:0 auto 16px}
.overlay .dropfill img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.overlay .dropfill .base{filter:grayscale(1);opacity:.22}
.overlay h2{color:#fff;margin:0 0 4px}
.overlay p{color:var(--band-muted);margin:0;font-size:12.5px}

@media (prefers-reduced-motion:no-preference){
  .fade>*{animation:fade .6s cubic-bezier(.22,.7,.2,1) both}
  .fade>*:nth-child(2){animation-delay:.06s}.fade>*:nth-child(3){animation-delay:.12s}.fade>*:nth-child(4){animation-delay:.18s}.fade>*:nth-child(5){animation-delay:.24s}.fade>*:nth-child(n+6){animation-delay:.3s}
  @keyframes fade{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
  .login .band .ctdrop{animation:reveal 1.4s cubic-bezier(.22,.7,.2,1) both}
  .login .band .ctword{animation:fadeonly 1s ease .5s both}
  @keyframes reveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes fadeonly{from{opacity:0}to{opacity:1}}
  .meter i{transition:width .6s cubic-bezier(.22,.7,.2,1)}
  .yn button,.seg button,.btn,.tabs button{transition:background .25s ease,border-color .25s ease,color .25s ease}
  .overlay{animation:fadeonly .3s ease both}
  .overlay .card{animation:fade .45s cubic-bezier(.22,.7,.2,1) both}
  .overlay .dropfill .fill{animation:reveal 1.1s cubic-bezier(.22,.7,.2,1) .15s both}
  .overlay h2,.overlay p{animation:fadeonly .5s ease .9s both}
}
.issue-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px;border-radius:6px;background:var(--sunk)}
.issue-fields .deps{display:flex;flex-wrap:wrap;gap:6px}
.dep{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:800 10.5px var(--font);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:999px;cursor:pointer}
.dep[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.mini{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.deptabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.deptabs button{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:800 10.5px var(--font);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:6px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.deptabs button b{font-size:12px}
.deptabs button[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.deptblock{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.deptblock:first-child{border-top:0;padding-top:0;margin-top:0}
.deptblock>h3{margin:0 0 8px;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-strong);display:flex;gap:8px;align-items:center}
.iss{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;margin-bottom:8px;background:var(--surface)}
.iss .top{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.iss .top strong{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px}
.iss .what{font-weight:600;color:var(--ink-strong)}
.iss .act{font-size:13px}
.iss .act b{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.iss .fu{font-size:12.5px;color:var(--muted);border-left:2px solid var(--line);padding-left:10px}
.iss .tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.iss .tools input{flex:1 1 200px;min-width:0;padding:8px 10px;font-size:13px}
.cbx{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.cbx:first-of-type{border-top:0}
.cbx input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--ink-strong)}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}

/* ===== Light & colourful theme: drop colours as accents ===== */
:root{
  --c1:#E0742E; --c2:#E2A92B; --c3:#5B4FA0; --c4:#3F74B8; --c5:#4E9A4B; --c6:#0E9AA7; --c7:#C2457A; --c8:#5F6B7A;
  --spectrum:linear-gradient(90deg,#E0742E,#E2A92B 22%,#5B4FA0 46%,#3F74B8 70%,#4E9A4B);
  --ground:#F5F6F8; --surface:#FFFFFF; --sunk:#F0F2F5; --line:#E2E5EA;
  --ink:#3A3A3A; --ink-strong:#262626; --muted:#737780; --band:#FFFFFF; --band-ink:#262626; --band-muted:#737780;
  --action:#3F74B8; --action-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(38,38,38,.04),0 10px 26px -18px rgba(38,38,38,.28);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --c1:#F08A4B; --c2:#F0BE4A; --c3:#8E84D6; --c4:#6E9CDB; --c5:#79BE73; --c6:#3CC1CB; --c7:#E57FA8; --c8:#9AA5B3;
  --ground:#202226; --surface:#2B2E33; --sunk:#353940; --line:#3E434A; --band:#2B2E33; --band-ink:#F2F2F2; --band-muted:#A9ADB3;
  --action:#6E9CDB; --action-ink:#10151F;}}
:root[data-theme="dark"]{
  --c1:#F08A4B; --c2:#F0BE4A; --c3:#8E84D6; --c4:#6E9CDB; --c5:#79BE73; --c6:#3CC1CB; --c7:#E57FA8; --c8:#9AA5B3;
  --ground:#202226; --surface:#2B2E33; --sunk:#353940; --line:#3E434A; --band:#2B2E33; --band-ink:#F2F2F2; --band-muted:#A9ADB3;
  --action:#6E9CDB; --action-ink:#10151F;}
header{background:var(--band);color:var(--band-ink);box-shadow:0 1px 0 var(--line)}
header::after{content:"";display:block;height:4px;background:var(--spectrum)}
.tabs{background:var(--sunk)}
.tabs button[aria-selected="true"]{background:var(--action);color:var(--action-ink)}
.who button{border-color:var(--line);color:var(--band-ink)}
h1{font-weight:800}
.kicker{color:var(--c4)}
.panel{border:1px solid var(--line);border-radius:12px}
.panel h2{display:flex;align-items:center;gap:9px}
.panel h2::before{content:"";width:10px;height:13px;flex:0 0 auto;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:var(--hc,var(--c4));transform:translateY(-1px)}
.stack>.panel:nth-of-type(5n+1) h2{--hc:var(--c4)} .stack>.panel:nth-of-type(5n+2) h2{--hc:var(--c1)} .stack>.panel:nth-of-type(5n+3) h2{--hc:var(--c5)} .stack>.panel:nth-of-type(5n+4) h2{--hc:var(--c3)} .stack>.panel:nth-of-type(5n+5) h2{--hc:var(--c2)}
.btn{border-radius:10px}
.seg button{border-radius:10px}
.seg button[aria-pressed="true"]{background:var(--action);border-color:var(--action)}
#seg-opening[aria-pressed="true"]{background:var(--c1);border-color:var(--c1);color:#fff}
#seg-closing[aria-pressed="true"]{background:var(--c3);border-color:var(--c3);color:#fff}
#seg-spot[aria-pressed="true"]{background:var(--c1);border-color:var(--c1);color:#fff}
#by-mystery[aria-pressed="true"]{background:var(--c3);border-color:var(--c3);color:#fff}
.meter{height:6px}
.meter i{background:var(--spectrum);background-size:600px 100%}
.zone{color:var(--zc,var(--c4));padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--zc,var(--c4)) 10%,var(--surface));margin-left:-4px;margin-right:-4px}
.zone::before{border-left-color:var(--zc,var(--c4))}
.item{border-top-color:var(--line)}
.yn button{border-radius:999px}
.due .panel{border-top:5px solid var(--dc,var(--c4));background:linear-gradient(180deg,color-mix(in srgb,var(--dc,var(--c4)) 9%,var(--surface)),var(--surface) 70%)}
.due .panel:nth-child(1){--dc:var(--c1)} .due .panel:nth-child(2){--dc:var(--c3)}
.due .t{color:var(--dc)}
.chip{border-radius:999px}
.chip.dept{color:#fff;background:var(--dpc,var(--c4))}
.deptabs button{border-radius:999px}
.deptabs button[aria-pressed="true"]{background:var(--dpc,var(--action));border-color:var(--dpc,var(--action));color:#fff}
.deptabs button:not([aria-pressed="true"]) b{color:var(--dpc,var(--ink))}
.deptblock>h3{color:var(--dpc,var(--ink-strong))}
.deptblock>h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--dpc,var(--c4))}
.iss{border-left:4px solid var(--dpc,var(--line));border-radius:10px}
.dep[aria-pressed="true"]{background:var(--dpc,var(--action));border-color:var(--dpc,var(--action));color:#fff}
.dep{--dpc:var(--c4)}
.login .band{background:linear-gradient(160deg,color-mix(in srgb,var(--c2) 18%,var(--surface)),color-mix(in srgb,var(--c3) 14%,var(--surface)) 55%,color-mix(in srgb,var(--c5) 16%,var(--surface)));color:var(--ink-strong);border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}
.login .band .tag{color:var(--muted)}
.login .band .ghost-drop{opacity:.08;filter:grayscale(1)}
.login .panel{border-radius:0 0 12px 12px}
.overlay .card{background:var(--surface);color:var(--ink-strong);border:1px solid var(--line);border-radius:14px}
.overlay h2{color:var(--ink-strong)}
.overlay p{color:var(--muted)}
th{color:var(--muted)}
.rep summary .lead strong{color:var(--ink-strong)}

/* ---- drill-down dashboard ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 16px}
.kpi{all:unset;box-sizing:border-box;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--kc);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;transition:transform .2s ease,box-shadow .2s ease}
.kpi:hover,.kpi:focus-visible{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.kpi .kl{font:800 11px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kpi b{font-size:30px;line-height:1.1;color:var(--kc)}
.kpi .ks{font-size:12.5px;color:var(--muted)}
details.drill{padding:0;overflow:hidden}
details.drill>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 18px}
details.drill>summary::-webkit-details-marker{display:none}
details.drill>summary::before{content:"▸";color:var(--muted);transition:transform .2s ease}
details.drill[open]>summary::before{transform:rotate(90deg)}
details.drill>summary h2{margin:0;flex:1 1 auto;font-size:17px}
details.drill>.drillbody{padding:0 18px 18px}
.sumline{display:inline-flex;gap:6px;flex-wrap:wrap}
.sub3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.brtable tr.brrow{cursor:pointer}
.brtable tr.brrow:hover td{background:var(--soft,rgba(0,0,0,.025))}
.brtable tr.brrow.on td{background:rgba(0,0,0,.035)}
.brtable .caret{color:var(--muted);display:inline-block;width:12px}
.brtable tr.brdetail-row>td{padding:4px 10px 16px;background:rgba(0,0,0,.015)}
details.drillsub>summary{list-style:none;cursor:pointer}
details.drillsub>summary::-webkit-details-marker{display:none}
details.drillsub>summary h3{display:flex;gap:8px;align-items:center;margin:0}
details.drillsub[open]>summary{margin-bottom:8px}
.rbar{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px}
.rbar-track{position:relative;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--bad) 0 40%,#E0742E 40% 60%,#E2A92B 60% 75%,#7CB342 75% 90%,var(--ok) 90% 100%)}
.rbar-track i{position:absolute;top:-5px;width:4px;height:20px;border-radius:3px;background:var(--ink);transform:translateX(-50%);transition:left .4s ease}
.rbar-labels{display:grid;grid-template-columns:40fr 20fr 15fr 15fr 10fr;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rbar-labels span.on{color:var(--ink)}
.bigscore{font-size:26px;font-weight:800}
.secscore{margin-left:auto;font-weight:800}
.zone{display:flex;align-items:center;gap:8px}
.yn button.p[aria-pressed="true"]{background:#FFF3D6;border-color:#E2A92B;color:#9A6B00}
@media (max-width:640px){.brtable th:nth-child(2),.brtable td:nth-child(2),.brtable th:nth-child(3),.brtable td:nth-child(3),.brtable th:nth-child(6),.brtable td:nth-child(6){display:none}.rbar-labels{font-size:9px}}
.issue-slot{display:contents}

/* web app additions */
#flash{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink-strong);color:var(--surface);padding:10px 16px;border-radius:10px;font-weight:600;z-index:60;max-width:calc(100% - 32px);box-shadow:var(--shadow)}