/* ZIDA hubs: one narrow column of tappable tiles; forms open inside their tile */
:root{
  --bg:#F6F3EE; --surface:#FFFFFF; --ink:#012130; --muted:#4F6670; --line:#E3DBCE;
  --accent:#008080; --accent-soft:#DCD1BF; --field:#FBFAF7;
  --good:#2E7D4F; --good-soft:#E3F1E8; --warn:#9A6418; --warn-soft:#F6EBDA; --bad:#B3392C; --bad-soft:#FBEAE7;
  --display:"EB Garamond", Georgia, "Times New Roman", serif;
  --body:"Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#012130; --surface:#06303F; --ink:#F2EDE4; --muted:#A9BCC2; --line:#14475A;
  --accent:#3FB3B3; --accent-soft:#0B4152; --field:#0A3A4A;
  --good:#6FCB94; --good-soft:#123528; --warn:#E0A559; --warn-soft:#3A2C16; --bad:#E37B6B; --bad-soft:#3A211C; --on-accent:#012130; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#012130; --surface:#06303F; --ink:#F2EDE4; --muted:#A9BCC2; --line:#14475A;
  --accent:#3FB3B3; --accent-soft:#0B4152; --field:#0A3A4A;
  --good:#6FCB94; --good-soft:#123528; --warn:#E0A559; --warn-soft:#3A2C16; --bad:#E37B6B; --bad-soft:#3A211C; --on-accent:#012130; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.55;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));}
.wrap{max-width:600px; margin:0 auto; padding-block:40px 56px; display:flex; flex-direction:column; gap:34px}
.wrap.wide{max-width:880px}
header{display:flex; flex-direction:column; gap:12px}
.mark{font-weight:700; letter-spacing:.32em; font-size:11px; text-transform:uppercase}
.mark span{color:var(--accent)}
.eyebrow{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
h1{font-family:var(--display); font-weight:500; font-size:clamp(34px, 9vw, 44px); line-height:1.05; margin:0; text-wrap:balance}
.intro{color:var(--muted); margin:0; max-width:52ch}
h2{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 12px; display:flex; align-items:center; gap:12px}
h2::after{content:""; flex:1; height:1px; background:var(--line)}
.tiles{display:flex; flex-direction:column; gap:12px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:4px; color:inherit; text-decoration:none}
a.tile, .tile>summary{display:grid; grid-template-columns:52px minmax(0,1fr) 20px; gap:16px; align-items:center; padding:16px 18px; cursor:pointer; list-style:none}
.tile>summary::-webkit-details-marker{display:none}
a.tile:hover, details.tile:hover{border-color:var(--accent)}
details.tile[open]{border-color:var(--accent)}
a.tile:focus-visible, .tile>summary:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.icon{width:52px; height:52px; border-radius:50%; background:var(--accent-soft); display:grid; place-items:center}
.icon svg{width:24px; height:24px; fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.t-name{font-family:var(--display); font-size:21px; font-weight:600; line-height:1.15; margin:0}
.t-when{font-size:13.5px; color:var(--muted); margin:3px 0 0}
.t-kind{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:6px 0 0; font-weight:700}
.arrow{width:20px; height:20px; fill:none; stroke:var(--muted); stroke-width:1.5; transition:transform .2s}
details[open] .arrow{transform:rotate(90deg)}
.sent-badge{display:inline-block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:2px 7px; border-radius:3px; background:var(--good-soft); color:var(--good); margin-left:6px; vertical-align:middle}
form{display:flex; flex-direction:column; gap:14px; padding:4px 18px 20px; border-top:1px solid var(--line)}
form .row{display:flex; flex-direction:column; gap:5px}
form label{font-size:13px; font-weight:700}
form .help{font-size:12px; color:var(--muted); font-weight:400}
form .req{color:var(--bad)}
input, select, textarea{font:inherit; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:4px; padding:10px 12px; width:100%; min-width:0}
textarea{min-height:88px; resize:vertical}
.checks{display:flex; flex-wrap:wrap; gap:8px 16px}
.checks label{font-weight:400; display:flex; gap:6px; align-items:center}
.checks input{width:auto}
button{font:inherit; font-weight:700; border:0; border-radius:4px; padding:12px 18px; background:var(--accent); color:var(--on-accent,#fff); cursor:pointer}
button[disabled]{opacity:.6; cursor:wait}
button.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.msg{font-size:13.5px; padding:10px 12px; border-radius:4px}
.msg.ok{background:var(--good-soft); color:var(--good)}
.msg.err{background:var(--bad-soft); color:var(--bad)}
.tt-list{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.tt{display:flex; flex-direction:column; gap:2px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:4px; text-decoration:none; color:inherit}
.tt:hover{border-color:var(--accent)}
.tt b{font-weight:700; font-size:14px}
.tt span{font-size:12px; color:var(--muted)}
.note{font-size:13px; color:var(--muted); margin:12px 0 0}
footer{border-top:1px solid var(--line); padding-top:18px; font-size:12.5px; color:var(--muted); display:flex; flex-direction:column; gap:4px}

/* Director dashboard */
.stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:16px}
.stat .fig{font-family:var(--display); font-size:30px; line-height:1.1; font-variant-numeric:tabular-nums}
.stat .lab{font-size:12.5px; color:var(--muted); margin-top:4px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:16px 18px}
.people{display:flex; flex-direction:column}
.person{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center}
.person:last-child{border-bottom:0}
.pill{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:3px 8px; border-radius:3px; white-space:nowrap}
.pill.ok{background:var(--good-soft); color:var(--good)}
.pill.no{background:var(--bad-soft); color:var(--bad)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.leave{background:var(--accent-soft); color:var(--ink)}
.report{border-top:1px solid var(--line); padding:12px 0}
.report:first-child{border-top:0; padding-top:0}
.report h3{font-family:var(--display); font-size:19px; margin:0 0 6px; font-weight:600}
.report dl{margin:0; display:grid; grid-template-columns:150px minmax(0,1fr); gap:4px 12px; font-size:14px}
.report dt{color:var(--muted)}
.report dd{margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:14px}
.list li{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:8px}
.list li:last-child{border-bottom:0}
.empty{color:var(--muted); font-size:14px; margin:0}
.codebar{display:flex; gap:8px; flex-wrap:wrap}
.codebar input{flex:1; min-width:160px}
.req-card{border-top:1px solid var(--line); padding:12px 0; display:flex; flex-direction:column; gap:4px; font-size:14px}
.req-card:first-child{border-top:0; padding-top:0}
.req-card b{font-family:var(--display); font-size:18px}
@media (max-width:420px){.tt-list{grid-template-columns:1fr} .report dl{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.arrow{transition:none}}
.panel a, .report a{color:var(--accent)}

/* Hub colour themes: each hub has its own ZIDA colour so nobody confuses them */
/* Director: navy */
body.theme-director{--bg:#EEF1F4; --surface:#FFFFFF; --ink:#012130; --muted:#4A5B66; --line:#D5DDE3; --accent:#012130; --accent-soft:#D3DCE3; --field:#F7F9FA}
/* Operations: Zephyr Nude */
body.theme-ops{--bg:#F3ECE2; --surface:#FFFDF9; --ink:#2B241B; --muted:#6B5E4C; --line:#E2D6C4; --accent:#6E5B3E; --accent-soft:#DCD1BF; --field:#FBF7F1}
/* Media and Visibility: warm clay, from Zephyr Nude */
body.theme-media{--bg:#F5ECE8; --surface:#FFFCFA; --ink:#2A1E1A; --muted:#6E5A52; --line:#E8D8D0; --accent:#8C5A4A; --accent-soft:#EAD9CF; --field:#FBF6F3}
/* Design: graphite */
body.theme-design{--bg:#F1F1EF; --surface:#FFFFFF; --ink:#1E1E1E; --muted:#5E5E5A; --line:#DCDCD7; --accent:#3A3A38; --accent-soft:#E2E1DC; --field:#F8F8F6}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.theme-director{--bg:#0B1620; --surface:#122330; --ink:#EAF0F4; --muted:#9FB1BD; --line:#22384A; --accent:#9FC3D9; --accent-soft:#1C3345; --field:#0F1E2A}
  :root:not([data-theme="light"]) body.theme-ops{--bg:#1F1A14; --surface:#2A241C; --ink:#F2EADF; --muted:#BFAF98; --line:#3D3427; --accent:#DCC6A3; --accent-soft:#3D3427; --field:#251F18}
  :root:not([data-theme="light"]) body.theme-media{--bg:#1E1614; --surface:#2A1F1C; --ink:#F3E9E4; --muted:#C2A99E; --line:#3E2E29; --accent:#E3B3A0; --accent-soft:#3E2E29; --field:#241A17}
  :root:not([data-theme="light"]) body.theme-design{--bg:#161616; --surface:#202020; --ink:#EDEDEA; --muted:#A9A9A4; --line:#333331; --accent:#DADAD5; --accent-soft:#2E2E2C; --field:#1B1B1B}
}
:root[data-theme="dark"] body.theme-director{--bg:#0B1620; --surface:#122330; --ink:#EAF0F4; --muted:#9FB1BD; --line:#22384A; --accent:#9FC3D9; --accent-soft:#1C3345; --field:#0F1E2A}
:root[data-theme="dark"] body.theme-ops{--bg:#1F1A14; --surface:#2A241C; --ink:#F2EADF; --muted:#BFAF98; --line:#3D3427; --accent:#DCC6A3; --accent-soft:#3D3427; --field:#251F18}
:root[data-theme="dark"] body.theme-design{--bg:#161616; --surface:#202020; --ink:#EDEDEA; --muted:#A9A9A4; --line:#333331; --accent:#DADAD5; --accent-soft:#2E2E2C; --field:#1B1B1B}
body.theme-ops, body.theme-director, body.theme-design{--on-accent:var(--surface)}
body.theme-media{--on-accent:var(--surface)}

:root[data-theme="dark"] body.theme-media{--bg:#1E1614; --surface:#2A1F1C; --ink:#F3E9E4; --muted:#C2A99E; --line:#3E2E29; --accent:#E3B3A0; --accent-soft:#3E2E29; --field:#241A17}

.sub{font-family:var(--display,serif);font-size:19px;font-weight:600;margin:18px 0 8px}
.person small{color:var(--muted);font-size:12px}

body.theme-admin{--bg:#EEF2EC; --surface:#FBFCFA; --ink:#1E2A20; --muted:#5A6B5C; --line:#D5DFD3; --accent:#3F6B4A; --accent-soft:#D3E2D2; --field:#F5F8F4}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body.theme-admin{--bg:#141B16; --surface:#1C251E; --ink:#E9F0E8; --muted:#A3B8A6; --line:#2F3D32; --accent:#9CC7A6; --accent-soft:#2F3D32; --field:#18201A}}
:root[data-theme="dark"] body.theme-admin{--bg:#141B16; --surface:#1C251E; --ink:#E9F0E8; --muted:#A3B8A6; --line:#2F3D32; --accent:#9CC7A6; --accent-soft:#2F3D32; --field:#18201A}
body.theme-admin{--on-accent:var(--surface)}

.decide{display:flex;gap:6px;flex-shrink:0;align-items:flex-start}
.decide button{padding:6px 10px;font-size:13px}
.decide button.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
li.leave small{color:var(--muted)}

.clock-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.clock-buttons button{flex:1;min-width:130px;padding:14px;font-size:16px}
.clock-buttons button.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.clock .row{margin-bottom:12px}
details.panel summary{cursor:pointer;font-weight:600}

.clock .who{margin:0 0 12px;line-height:1.5}
.clock .who small{color:var(--muted)}
.clock .who a{color:var(--accent)}

/* HR Hub */
.hr-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 4px}
.hr-tabs button{background:transparent; color:var(--ink); border:1px solid var(--line); padding:8px 12px; font-size:14px; font-weight:600}
.hr-tabs button.on{background:var(--accent); color:var(--on-accent,#fff); border-color:var(--accent)}
.badge{display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--bad); color:#fff; font-size:11px; line-height:18px; text-align:center}
.hr-who{display:flex; justify-content:space-between; align-items:center; gap:12px}
.hr-who small{color:var(--muted)}
.hr-who button{padding:8px 12px; font-size:13px}
.hr-form{display:flex; flex-direction:column; gap:12px}
.hr-form .row{display:flex; flex-direction:column; gap:5px}
.hr-form label{font-size:13px; font-weight:700}
.hr-form .help{font-weight:400; color:var(--muted)}
.hr-form .req{color:var(--bad)}
.hr-form .checks{display:flex; flex-wrap:wrap; gap:8px 16px}
.hr-form .checks label{font-weight:400}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.three{display:grid; grid-template-columns:1.4fr 1fr .7fr; gap:12px}
@media (max-width:520px){.two,.three{grid-template-columns:1fr}}
.hr-table{width:100%; border-collapse:collapse; font-size:14px}
.hr-table th{text-align:left; font-size:12px; color:var(--muted); font-weight:700; border-bottom:1px solid var(--line); padding:6px 8px 6px 0}
.hr-table td{border-bottom:1px solid var(--line); padding:8px 8px 8px 0; vertical-align:top}
.hr-table tr:last-child td{border-bottom:0}
.hr-table small{color:var(--muted)}
.callout{background:var(--warn-soft); color:var(--warn); padding:10px 12px; border-radius:4px; font-size:13.5px; margin:6px 0}
.goal-row{border:1px solid var(--line); border-radius:4px; padding:12px; display:flex; flex-direction:column; gap:10px; margin-bottom:10px}
.goal-rate{border-top:1px solid var(--line); padding-top:10px}
.goal-list{margin:0 0 10px; padding-left:20px; font-size:14px} .goal-list li{margin-bottom:6px} .goal-list small{color:var(--muted)}
dl.kv{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 12px; font-size:14px; margin:0 0 10px} dl.kv dt{color:var(--muted)} dl.kv dd{margin:0; white-space:pre-wrap}
button.small{padding:6px 10px; font-size:12.5px}

body .hr-tabs button{color:var(--ink)}
body .hr-tabs button.on{color:var(--on-accent,#fff)}

details.scale{border:1px solid var(--line);border-radius:4px;padding:10px 12px;font-size:14px}
details.scale summary{cursor:pointer;font-weight:700}
details.scale table{margin-top:8px}

body.theme-academic{--bg:#F6F3EE; --surface:#FFFFFF; --ink:#012130; --muted:#4F6670; --line:#E3DBCE; --accent:#008080; --accent-soft:#DCD1BF; --field:#FBFAF7}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body.theme-academic{--on-accent:#012130; --bg:#012130; --surface:#06303F; --ink:#F2EDE4; --muted:#A9BCC2; --line:#14475A; --accent:#3FB3B3; --accent-soft:#0B4152; --field:#0A3A4A}}
:root[data-theme="dark"] body.theme-academic{--on-accent:#012130; --bg:#012130; --surface:#06303F; --ink:#F2EDE4; --muted:#A9BCC2; --line:#14475A; --accent:#3FB3B3; --accent-soft:#0B4152; --field:#0A3A4A}

/* today's tasks */
ul.tasks{list-style:none;margin:0;padding:0}
ul.tasks li{border-top:1px solid rgba(0,0,0,.08);padding:10px 0}
ul.tasks li:first-child{border-top:0}
ul.tasks label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-weight:400;margin:0}
ul.tasks input{width:22px;height:22px;flex:0 0 22px;margin-top:2px;accent-color:var(--accent,#008080)}
ul.tasks .t{display:block}
ul.tasks small{display:block;opacity:.65;margin-top:2px;font-size:13px}
ul.tasks li.done .t{text-decoration:line-through;opacity:.55}

table.money{width:100%;border-collapse:collapse;font-size:13.5px}
table.money th,table.money td{padding:9px 4px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
table.money th:first-child{white-space:normal;padding-left:0}
@media(min-width:600px){table.money{font-size:15px}table.money th,table.money td{padding:9px 10px}}
table.money th:first-child{text-align:left;font-weight:600}
table.money thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
table.money tr.strong th,table.money tr.strong td{font-weight:700}
table.money td.neg{color:#A23B2A}

body.theme-finance{--bg:#EEF1F4; --surface:#FCFDFE; --ink:#16243A; --muted:#55657A; --line:#D6DDE6; --accent:#2D4A6E; --accent-soft:#D5DEEA; --field:#F5F7FA}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body.theme-finance{--bg:#111821; --surface:#18222E; --ink:#E8EEF5; --muted:#A3B2C4; --line:#2B3A4C; --accent:#9DB8DA; --accent-soft:#2B3A4C; --field:#141D27}}
:root[data-theme="dark"] body.theme-finance{--bg:#111821; --surface:#18222E; --ink:#E8EEF5; --muted:#A3B2C4; --line:#2B3A4C; --accent:#9DB8DA; --accent-soft:#2B3A4C; --field:#141D27}
body.theme-finance{--on-accent:var(--surface)}
details.panel ul{padding-left:20px;margin:6px 0 4px}
details.panel li{margin:4px 0}

/* onboarding tracker */
details.move{margin-bottom:12px}
details.move summary,details.startmove summary{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;cursor:pointer;list-style:none}
details.move summary::-webkit-details-marker{display:none}
details.move summary small{opacity:.7}
.bar{height:6px;background:var(--line);border-radius:3px;margin:12px 0 4px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--accent)}
ul.steps{list-style:none;margin:0;padding:0}
ul.steps li.stage{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:16px 0 4px}
ul.steps li.step{border-top:1px solid var(--line);padding:9px 0}
ul.steps label{display:flex;gap:12px;align-items:flex-start;font-weight:400;margin:0;cursor:pointer}
ul.steps input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--accent)}
ul.steps small{display:block;opacity:.7;font-size:12.5px;margin-top:2px}
ul.steps li.done .t{text-decoration:line-through;opacity:.6}
ul.steps li.late small{color:#A23B2A;opacity:1}
.evidence{display:flex;gap:8px;margin:8px 0 0 32px;flex-wrap:wrap}
.evidence input{flex:1;min-width:180px}
.evidence .err{color:#A23B2A;font-size:13px;width:100%}
.evidence[hidden]{display:none}

.candrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.candrow select,.candrow input{padding:6px 8px;font-size:13px;width:auto}
.candrow .score{width:70px}.candrow .cnotes{flex:1;min-width:120px}
.candrow button{padding:6px 10px;font-size:13px}
.candrow .err,details.addcand .err{color:#A23B2A;font-size:13px;width:100%}
details.addcand{margin:10px 0 6px}details.addcand summary{cursor:pointer;font-weight:600}
ul.cands li{align-items:flex-start}
body .candrow .csave{color:var(--ink);border:1px solid var(--line);background:transparent}

/* duty hubs */
.contact,.regedit{display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end; max-width:340px}
.contact .btn{display:inline-block; padding:7px 12px; border:1px solid var(--line); border-radius:4px; text-decoration:none; color:var(--ink); font-size:13px; font-weight:600; background:var(--surface)}
.contact input,.regedit input,.contact select,.regedit select{min-width:0; flex:1 1 140px; font-size:13px; padding:7px 8px}
.contact button,.regedit button{padding:7px 12px; font-size:13px}
.loglist li,.reglist li{align-items:flex-start}
.warn-t{color:var(--warn)}
.stat.bad .fig{color:var(--bad)} .stat.ok .fig{color:var(--good)}
.addbox{margin-bottom:12px}
@media (max-width:620px){.loglist li,.reglist li{flex-direction:column}.contact,.regedit{max-width:none; justify-content:flex-start}}

/* task timelines: yesterday, today, tomorrow */
.tday{border:1px solid var(--line); border-radius:4px; padding:12px 14px; margin:0 0 12px; background:var(--surface)}
.tday summary{cursor:pointer; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.tday.now{border-color:var(--ink); border-width:1.5px}
.tday .dayhead{margin:0 0 6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.tday .pill{margin-left:auto}
.tasks.readonly input{opacity:.55}
.tasks li.missed .t{color:var(--bad)}
.dayreport{margin-top:10px; border-top:1px dashed var(--line); padding-top:8px; font-size:14px}
.dayreport .sub2{margin:0 0 4px; font-weight:700}
.dayreport dl{margin:0} .dayreport dt{font-size:12px; color:var(--muted); margin-top:6px} .dayreport dd{margin:0; overflow-wrap:anywhere}
.report dd a,.dayreport dd a,.tasks a{overflow-wrap:anywhere; text-decoration:underline}
@media (max-width:620px){.suplist li{flex-direction:column}.suplist .regedit{max-width:none; justify-content:flex-start}} .suplist li{align-items:flex-start}
.panel button.ghost,.list button.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
/* Clock in and out: highlighted on every hub so it is done every working day */
.panel:has(> [data-clock]), .panel[data-clock], details.panel:has([data-clock]), .panel:has(> details [data-clock]){border:2px solid var(--accent);background:linear-gradient(0deg,rgba(0,128,128,.07),rgba(0,128,128,.07)),var(--surface);box-shadow:0 0 0 4px rgba(0,128,128,.12);position:relative}
.panel[data-clock]::before, .panel:has(> [data-clock])::before, details.panel:has([data-clock])::before, .panel:has(> details [data-clock])::before{content:"Every working day: clock in when you arrive, clock out when you leave";display:block;margin:-2px 0 12px;padding:6px 10px;border-radius:4px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em}
.panel[data-clock="facilitator"]::before, .panel:has(> [data-clock="facilitator"])::before, details.panel:has([data-clock="facilitator"])::before, .panel:has(> details [data-clock="facilitator"])::before{content:"Every class day: clock in when you arrive, clock out when you leave"}
.panel[data-clock="student"]::before{content:"Every class day: scan in when you arrive"}
section:has([data-clock]) > h2{color:var(--accent)}

/* payroll and finance panels (pay.js) */
.pay-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 10px}
table.paytab{width:100%;border-collapse:collapse;font-size:13.5px}
table.paytab th,table.paytab td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.paytab thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}
table.paytab tbody th{font-weight:600;min-width:130px}
table.paytab.money td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.paytab.money thead th:not(:first-child){text-align:right}
table.paytab tr.strong th,table.paytab tr.strong td{font-weight:700}
table.paytab td.neg{color:#A23B2A}
table.paytab small{color:var(--muted);font-weight:400}
table.paytab input{width:110px;padding:6px 8px}
table.paytab form{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0}
table.paytab form.pay-pen,table.paytab form.pay-lim,table.paytab form.pay-fee{justify-content:flex-end}
.pay-edit form{display:block!important;margin-top:8px}
.pay-edit input,.pay-edit textarea{width:100%!important}
tr.pay-lines td{background:var(--surface)}
.linkish{color:var(--accent);font-weight:700;text-decoration:underline;cursor:pointer}
.pay-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.pay-bar input{width:auto}
.pay-steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 12px;counter-reset:s}
.pay-steps li{flex:1 1 140px;border:1px solid var(--line);border-radius:4px;padding:8px 10px;font-size:13px;color:var(--muted)}
.pay-steps li.done{border-color:var(--good);color:inherit}
.pay-steps small{font-size:11.5px}
.pay-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pay-add{margin-top:12px}
.warn-t{color:var(--warn)}
@media (max-width:560px){table.paytab .opt{display:none}table.paytab thead th .opt{display:none}table.paytab tbody th{min-width:110px}}
/* board reports */
.rep-gen{justify-content:flex-start; align-items:flex-end}
.rep-gen label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted)}
.rep-gen label[hidden]{display:none}
.rep-gen select, .rep-gen input{width:auto; max-width:100%}
.xfrep .regedit{align-items:center}
.rep-gen{justify-content:flex-start !important; text-align:left}
.rep-gen label{align-items:flex-start; margin:0}
.rep-stats{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr))}
.rep-stats .stat{padding:12px 14px}
.rep-stats .fig{font-size:22px; line-height:1.2}
form.rep-gen{flex-direction:row; flex-wrap:wrap; align-items:flex-end; padding:0; border-top:0; gap:12px}

/* external facilitators: one card each, label left and value right, stacking on a phone */
.xfcards{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.xfcard{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:16px 18px; min-width:0}
.xfhead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.xfname{font-family:var(--display); font-size:20px; font-weight:600; line-height:1.2}
.xfrows{display:grid; grid-template-columns:minmax(120px, 36%) minmax(0, 1fr); gap:8px 18px; margin:14px 0 0}
.xfrows dt{color:var(--muted); font-size:13px; padding-top:1px}
.xfrows dd{margin:0; overflow-wrap:anywhere; min-width:0}
.xfrows dt, .xfrows dd{border-top:1px solid var(--line); padding-top:8px}
.xfli{margin:0; padding:0 0 0 1.1em; list-style:disc}
.xfli li{padding-left:2px}
.muted{color:var(--muted)}
.xfact{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.xfedit{margin-top:12px}
.xfedit>summary{cursor:pointer; color:var(--accent); font-weight:600}
.xfr{display:grid; grid-template-columns:150px minmax(0, 1fr) auto; gap:8px; margin-bottom:8px}
@media (max-width:560px){
  .xfrows{grid-template-columns:1fr; gap:2px}
  .xfrows dd{border-top:0; padding-top:0; margin-bottom:8px}
  .xfr{grid-template-columns:1fr auto}
  .xfr input[type=text]{grid-column:1 / -1; grid-row:2}
}
body .xfcards button.ghost, body .xfform button.ghost, body .addbox .xfform button.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.xfr button{padding:8px 12px; font-size:13px}
/* Student Requests queue: rows stack on a phone so the action buttons stay in view */
@media (max-width:560px){
  .rqtab thead{display:none}
  .rqtab, .rqtab tbody, .rqtab tr, .rqtab th, .rqtab td{display:block; width:auto}
  .rqtab tr{border-bottom:1px solid var(--line); padding:10px 0}
  .rqtab th, .rqtab td{border:0; padding:4px 0}
  .rqtab td.opt{display:block}
  .rqtab .rq-act input{max-width:none !important; width:100%; margin:4px 0}
  .rqtab .rq-act button{margin:4px 6px 0 0}
}
@media (max-width:560px){
  .pay-scroll .rqtab th, .pay-scroll .rqtab td{border-bottom:0 !important}
  .rqtab td:empty{display:none}
  .rqtab td.opt:not(:empty)::before{content:"Due "; color:var(--muted); font-size:12px}
}

/* ---------- accent colours (theme.js): they replace the hub's own colour on this device only ---------- */
:root[data-accent="oak"] body{--accent:#7A5A36; --accent-soft:#EADFCF; --on-accent:#FFFFFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-accent="oak"] body{--accent:#D9BC94; --accent-soft:#3A2E20; --on-accent:#1E160E}}
:root[data-theme="dark"][data-accent="oak"] body{--accent:#D9BC94; --accent-soft:#3A2E20; --on-accent:#1E160E}
:root[data-accent="olive"] body{--accent:#56663A; --accent-soft:#E0E5D2; --on-accent:#FFFFFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-accent="olive"] body{--accent:#B9C78F; --accent-soft:#2E3420; --on-accent:#1A1F10}}
:root[data-theme="dark"][data-accent="olive"] body{--accent:#B9C78F; --accent-soft:#2E3420; --on-accent:#1A1F10}
:root[data-accent="teal"] body{--accent:#0E5A5A; --accent-soft:#D3E5E3; --on-accent:#FFFFFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-accent="teal"] body{--accent:#7CCBC6; --accent-soft:#123C3B; --on-accent:#062222}}
:root[data-theme="dark"][data-accent="teal"] body{--accent:#7CCBC6; --accent-soft:#123C3B; --on-accent:#062222}
:root[data-accent="burgundy"] body{--accent:#7A2E3B; --accent-soft:#F0DCDF; --on-accent:#FFFFFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-accent="burgundy"] body{--accent:#E7AAB5; --accent-soft:#3D1F25; --on-accent:#2A0E14}}
:root[data-theme="dark"][data-accent="burgundy"] body{--accent:#E7AAB5; --accent-soft:#3D1F25; --on-accent:#2A0E14}
:root[data-accent="slate"] body{--accent:#3D4A5C; --accent-soft:#DDE2E8; --on-accent:#FFFFFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-accent="slate"] body{--accent:#B3C0CF; --accent-soft:#2A3340; --on-accent:#141A22}}
:root[data-theme="dark"][data-accent="slate"] body{--accent:#B3C0CF; --accent-soft:#2A3340; --on-accent:#141A22}

/* ---------- header bar: mark on the left, theme control on the right ---------- */
.topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; min-width:0}
.themer{position:relative; flex-shrink:0}
.themer-btn{display:inline-flex; align-items:center; gap:6px; background:transparent; color:var(--ink); border:1px solid var(--line); padding:6px 10px; font-size:12.5px; font-weight:600; border-radius:999px}
body .themer-btn{color:var(--ink)}
.themer-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6}
.themer-btn svg .fill{fill:currentColor; stroke:none}
.themer-pop{position:absolute; right:0; top:calc(100% + 8px); z-index:30; width:min(300px, calc(100vw - 32px)); background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.14)}
.themer-pop[hidden]{display:none}
.themer-h{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 8px}
.themer-modes{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:14px}
.themer-modes button,.themer-accents button{background:transparent; color:var(--ink); border:1px solid var(--line); padding:7px 6px; font-size:13px; font-weight:600}
body .themer-modes button,body .themer-accents button{color:var(--ink)}
.themer-modes button[aria-checked="true"],.themer-accents button[aria-checked="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.themer-accents{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.themer-accents button{display:flex; flex-direction:column; align-items:center; gap:5px; font-weight:600; font-size:12px}
.themer-accents i{display:block; width:24px; height:24px; border-radius:50%; border:1px solid var(--line)}
.themer-note{font-size:11.5px; color:var(--muted); margin:10px 0 0}

/* ---------- staff profile ---------- */
.profile{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:14px 16px; min-width:0}
.avatar{position:relative; width:60px; height:60px; flex:0 0 60px; border-radius:50%; overflow:hidden; background:var(--accent); color:var(--on-accent,#fff); display:grid; place-items:center; font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:.02em}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar.sm{width:40px; height:40px; flex-basis:40px; font-size:16px}
.profile .who{min-width:0; flex:1}
.profile .pname{font-family:var(--display); font-size:22px; font-weight:600; line-height:1.15; margin:0; overflow-wrap:anywhere}
.profile .prole{margin:2px 0 0; font-size:13.5px; color:var(--muted)}
.profile .pmeta{margin:4px 0 0; font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 12px}
.profile .pmeta b{color:var(--ink); font-weight:700}
.profile .photo-btn{background:transparent; color:var(--accent); border:1px solid var(--line); padding:6px 10px; font-size:12.5px; font-weight:600; flex-shrink:0}
body .profile .photo-btn{color:var(--accent)}
.profile .photo-form{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.profile .photo-form input{flex:1 1 150px; padding:7px 9px; font-size:13px}
.profile .photo-form button{padding:7px 12px; font-size:13px}
.profile .msg{margin-top:8px}


/* ---------- needs you now ---------- */
.needs{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:6px; padding:14px 16px}
.needs-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 8px}
.needs-h b{font-family:var(--display); font-size:21px; font-weight:600}
.needs-h small{color:var(--muted); font-size:12.5px}
.needs ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.needs li{border-top:1px solid var(--line)}
.needs li:first-child{border-top:0}
.needs li button{all:unset; box-sizing:border-box; display:flex; width:100%; justify-content:space-between; align-items:center; gap:12px; padding:9px 2px; cursor:pointer; font-size:14.5px; color:var(--ink)}
.needs li button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.needs li button:hover .nlabel{text-decoration:underline}
.needs .nlabel{min-width:0; overflow-wrap:anywhere}
.needs .nlabel small{display:block; color:var(--muted); font-size:12px}
.ncount{flex-shrink:0; min-width:28px; text-align:center; font-weight:700; font-size:12.5px; padding:2px 8px; border-radius:999px; background:var(--warn-soft); color:var(--warn)}
.ncount.bad{background:var(--bad-soft); color:var(--bad)}
.needs .clear{margin:0; color:var(--muted); font-size:14px}
.howto{margin-top:12px; border-top:1px solid var(--line); padding-top:10px; font-size:13.5px}
.howto summary{cursor:pointer; font-weight:700; color:var(--accent)}
.howto ul{display:block; padding-left:18px; margin:8px 0 0; list-style:disc}
.howto li{border:0; margin:3px 0; color:var(--ink)}

/* ---------- tabs ---------- */
.hubtabs{position:sticky; top:0; z-index:20; background:var(--bg); margin:-8px -16px 0; padding:8px 16px; display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; border-bottom:1px solid var(--line)}
.hubtabs::-webkit-scrollbar{display:none}
.hubtabs button{flex:0 0 auto; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13.5px; font-weight:600; white-space:nowrap; display:inline-flex; gap:6px; align-items:center}
body .hubtabs button{color:var(--ink)}
.hubtabs button[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent,#fff)}
body .hubtabs button[aria-selected="true"]{color:var(--on-accent,#fff)}
.hubtabs .tcount{font-size:11px; line-height:17px; min-width:17px; padding:0 5px; border-radius:9px; background:var(--bad); color:#fff}
.wrap.organised > section.sec-off{display:none !important}
.wrap.organised #dashboard{display:contents !important}
.wrap.organised #dashboard > section.sec-off{display:none !important}

/* ---------- collapsible cards ---------- */
section.sec > h2.sec-head{cursor:pointer; user-select:none; margin:0; padding:13px 16px; background:var(--surface); border:1px solid var(--line); border-radius:6px; color:var(--ink); font-size:11.5px}
section.sec > h2.sec-head::after{display:none}
section.sec > h2.sec-head .stitle{flex:1; min-width:0}
section.sec > h2.sec-head:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
section.sec:not(.closed) > h2.sec-head{border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent}
section.sec > .sec-body{border:1px solid var(--line); border-top:0; border-radius:0 0 6px 6px; padding:4px 12px 14px; background:color-mix(in srgb, var(--surface) 45%, var(--bg))}
section.sec.closed > .sec-body{display:none}
.sbadge{font-size:11px; letter-spacing:0; text-transform:none; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--warn-soft); color:var(--warn)}
.sbadge.zero{background:transparent; color:var(--muted); border:1px solid var(--line)}
.chev{width:16px; height:16px; fill:none; stroke:var(--muted); stroke-width:1.8; transition:transform .2s; flex-shrink:0}
section.sec:not(.closed) .chev{transform:rotate(90deg)}
section.sec.flash > h2.sec-head{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)}
@media (prefers-reduced-motion: reduce){.chev{transition:none}}

/* ---------- requests from reports ---------- */
.rr-lines{display:flex; flex-direction:column; gap:10px}
.rr-line{border:1px solid var(--line); border-radius:4px; padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.rr-line .wide{grid-column:1 / -1}
.rr-line label{font-size:12px; font-weight:700; display:flex; flex-direction:column; gap:4px}
.rr-line .rr-del{justify-self:end; grid-column:1 / -1; padding:5px 10px; font-size:12.5px}
.rr-add{align-self:flex-start; padding:7px 12px; font-size:13px}
@media (max-width:480px){.rr-line{grid-template-columns:1fr}}
.rr-item{border-top:1px solid var(--line); padding:10px 0; display:flex; flex-direction:column; gap:6px; font-size:14px}
.rr-item:first-child{border-top:0}
.rr-item .rr-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.rr-item small{color:var(--muted)}
.rr-item form{display:flex; flex-wrap:wrap; gap:6px; padding:0; border:0; flex-direction:row}
.rr-item form input{flex:1 1 180px; padding:7px 9px; font-size:13px}
.rr-item form button{padding:7px 12px; font-size:13px}

/* ---------- staff directory ---------- */
.dir-dept{margin:4px 0 14px}
.dir-dept h3{font-family:var(--display); font-size:19px; font-weight:600; margin:8px 0 8px; display:flex; gap:8px; align-items:baseline}
.dir-dept h3 small{font-family:var(--body); font-size:11px; letter-spacing:.12em; color:var(--muted)}
.dir-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px}
.dir-card{display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:4px; padding:8px 10px; background:var(--surface); min-width:0}
.dir-card div{min-width:0} .dir-card b{display:block; font-size:14px; overflow-wrap:anywhere} .dir-card small{display:block; color:var(--muted); font-size:12px; overflow-wrap:anywhere}

/* ---------- budget proposal summary (Director) and PH needs ---------- */
.bp-sum{border:1px solid var(--line); border-radius:4px; margin:0 0 10px; background:var(--surface)}
.bp-sum > summary{list-style:none; cursor:pointer; padding:12px 14px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.bp-sum > summary::-webkit-details-marker{display:none}
.bp-sum > summary b{font-family:var(--display); font-size:18px; font-weight:600; flex:1 1 160px}
.bp-sum > div{padding:0 14px 12px}
.bp-ph{background:var(--accent-soft); border-radius:4px; padding:10px 12px; margin:0 0 10px; font-size:13.5px}
.bp-ph .pay-bar{margin:6px 0 0}
table.paytab td.phn{color:var(--muted); font-size:12.5px}

/* ---------- final15 additions ---------- */
@media (min-width:720px){.needs ul{display:grid; grid-template-columns:1fr 1fr; column-gap:28px}.needs li:nth-child(2){border-top:0}}
.hubtabs .t-all{margin-left:auto; border-style:dashed}
.need-dot{display:block; width:0; height:0; overflow:hidden}
a.btnlink{display:inline-block; padding:9px 14px; border:1px solid var(--accent); color:var(--accent); border-radius:4px; text-decoration:none; font-weight:700; font-size:13.5px; white-space:nowrap}
a.btnlink:hover{background:var(--accent-soft)}
.reglink input{width:100%; font-size:13.5px}
.reglink .pay-bar{margin-top:8px}
label.inl{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600}
label.inl input{width:auto; padding:6px 8px}
table.paytab td.chg{font-weight:700}
.list li a.btnlink{flex-shrink:0}
.rq-act input{min-width:0}
@media (max-width:480px){section.sec > .sec-body{padding:4px 8px 12px} .sec-body a.tile, .sec-body .tile>summary{grid-template-columns:42px minmax(0,1fr) 16px; gap:12px; padding:14px 12px} .sec-body .icon{width:42px; height:42px}}
/* external facilitators: decided cards fold to their heading */
li.xfcard.xf-closed > dl.xfrows{display:none}
.xfhead .xftoggle{margin-left:auto; font-size:12.5px}
.xfdone small{color:var(--muted)} .xfdone .xfchange{font-size:12.5px} .xfredo{display:inline-flex; gap:6px}
body button.linkish{background:none; border:0; padding:0; color:var(--accent); font-weight:700; text-decoration:underline; cursor:pointer}
.needs .health{background:var(--bad-soft); color:var(--bad); border-radius:4px; padding:8px 10px; margin:0 0 10px; font-size:13.5px}
.needs .health p{margin:2px 0}

/* ---------- staff build of 7 Nov 2026 ---------- */
/* logo: small seal beside the hub title, teal mark in the footer, large seal on sign-in screens */
.hub-title{display:flex; align-items:center; gap:12px; min-width:0}
.hub-title h1{min-width:0}
.hub-seal{width:40px; height:40px; flex:0 0 40px; border-radius:50%; display:block}
.foot-brand{display:inline-flex; align-items:center; gap:7px}
.foot-brand img{width:18px; height:18px; display:block}
.signin-seal{display:block; width:104px; height:104px; margin:6px auto 16px; border-radius:50%}
#hr-login::before,#al::before{content:""; display:block; width:104px; height:104px; margin:4px auto 16px; background:url(brand/zida-seal.png) center/contain no-repeat}
/* profile header: photo with a small camera button, name beside it, details on full-width lines below */
.profile{display:block}
.profile .ptop{display:flex; align-items:center; gap:14px; min-width:0}
.profile .avatar-wrap{position:relative; flex:0 0 auto}
.profile .avatar{width:64px; height:64px; flex-basis:64px; font-size:24px}
.profile .cam-btn{position:absolute; right:-4px; bottom:-4px; width:28px; height:28px; padding:0; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.18)}
body .profile .cam-btn{color:var(--accent); background:var(--surface)}
.cam-btn svg,.cam-mini svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round}
.profile .pmeta{margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line)}
.link-btn{background:none; border:0; padding:0; color:var(--accent); font-weight:600; font-size:12.5px; text-decoration:underline; text-underline-offset:2px; cursor:pointer}
body .link-btn{color:var(--accent); background:none}
.profile .add-photo{margin-top:4px}
@media (max-width:560px){.profile{padding:12px 14px}.profile .pname{font-size:20px}.profile .pmeta{display:grid; grid-template-columns:1fr; gap:3px}}
/* crop window (also the organogram profile card) */
body.modal-open{overflow:hidden}
.crop-modal{position:fixed; inset:0; z-index:100; background:rgba(1,20,30,.62); display:grid; place-items:center; padding:16px}
.crop-box{background:var(--surface); color:var(--ink); border-radius:8px; padding:18px; width:min(340px, 100%); box-shadow:0 18px 50px rgba(0,0,0,.35)}
.crop-h{font-family:var(--display); font-size:21px; font-weight:600; margin:0}
.crop-sub{font-size:13px; color:var(--muted); margin:2px 0 12px}
.crop-stage{position:relative; margin:0 auto; border-radius:6px; overflow:hidden; touch-action:none; background:#000}
.crop-stage canvas{display:block; cursor:grab; touch-action:none}
.crop-stage canvas:active{cursor:grabbing}
.crop-ring{position:absolute; inset:0; pointer-events:none; border-radius:50%; box-shadow:0 0 0 999px rgba(1,20,30,.55); outline:2px solid rgba(255,255,255,.85); outline-offset:-2px}
.crop-zoom{display:flex; align-items:center; gap:10px; margin:14px 0 4px; font-size:13px; color:var(--muted)}
.crop-zoom input{flex:1; accent-color:var(--accent)}
.crop-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}
/* staff directory: search, departments as closed dropdowns with a count */
.dir-tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px}
.dir-search{flex:1 1 220px; min-width:0}
.dir-count{font-size:12.5px; color:var(--muted)}
details.dir-dept{border:1px solid var(--line); border-radius:6px; margin:0 0 8px; background:var(--surface)}
details.dir-dept > summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; font-family:var(--display); font-size:18px; font-weight:600}
details.dir-dept > summary::-webkit-details-marker{display:none}
details.dir-dept > summary small{font-family:var(--body); font-size:11px; letter-spacing:.12em; color:var(--muted); margin-left:6px}
details.dir-dept > summary .dcount{font-family:var(--body); font-size:12px; font-weight:700; min-width:26px; text-align:center; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--ink)}
details.dir-dept[open] > summary{border-bottom:1px solid var(--line)}
details.dir-dept .dir-grid{padding:10px}
.dir-card[hidden]{display:none}
.dir-card .dc-txt{flex:1}
.cam-mini{flex:0 0 auto; width:30px; height:30px; padding:0; border-radius:50%; display:grid; place-items:center; background:transparent; border:1px solid var(--line); color:var(--accent)}
body .cam-mini{color:var(--accent); background:transparent}
@media (max-width:560px){.dir-grid{grid-template-columns:1fr}}
/* organogram */
.org-tools{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px}
.org{display:flex; flex-direction:column; align-items:center}
.org-print-head{display:none}
.org-board{border:1px dashed var(--muted); border-radius:6px; padding:8px 14px; text-align:center; max-width:420px; color:var(--muted)}
.org-board b{display:block; color:var(--ink); font-family:var(--display); font-size:17px; font-weight:600}
.org-board small{font-size:11.5px}
.org-link{width:1px; height:18px; background:var(--line)}
.org-top .org-node{border-color:var(--accent); border-width:2px}
.org-cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px; width:100%; border-top:1px solid var(--line); padding-top:14px}
.org-col{min-width:0}
.org-dept{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 8px}
.org-dept small{letter-spacing:0; font-weight:600}
.org-tree,.org-tree ul{list-style:none; margin:0; padding:0}
.org-tree ul{margin-left:14px; padding-left:10px; border-left:1px solid var(--line)}
.org-tree li{margin:0 0 6px}
.org-node{display:flex; align-items:center; gap:8px; width:100%; max-width:280px; text-align:left; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; cursor:pointer}
body .org-node{color:var(--ink); background:var(--surface)}
.org-node:hover,.org-node:focus-visible{border-color:var(--accent)}
.org-node .on-txt{min-width:0}
.org-node b{display:block; font-size:13.5px; line-height:1.2; overflow-wrap:anywhere}
.org-node small{display:block; font-size:11.5px; color:var(--muted); line-height:1.25; overflow-wrap:anywhere}
.org-also{display:block; font-size:11px; color:var(--muted); margin:2px 0 0 4px}
.avatar.xs{width:32px; height:32px; flex:0 0 32px; font-size:13px}
.avatar.lg{width:72px; height:72px; flex:0 0 72px; font-size:26px}
.org-card{position:relative; width:min(380px, 100%)}
.org-x{position:absolute; right:8px; top:6px; background:none; border:0; font-size:26px; line-height:1; color:var(--muted); padding:4px 8px}
body .org-x{color:var(--muted); background:none}
.oc-top{display:flex; gap:14px; align-items:center; margin-bottom:12px; padding-right:24px}
.oc-name{font-family:var(--display); font-size:22px; font-weight:600; margin:0; line-height:1.15}
.oc-role{margin:2px 0 0; color:var(--muted); font-size:13.5px}
.oc-dl{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0 0 12px; font-size:13.5px}
.oc-dl dt{color:var(--muted)} .oc-dl dd{margin:0; overflow-wrap:anywhere}
.org-modal .crop-box{max-height:calc(100vh - 32px); overflow:auto}
/* report review */
.rv-sum{margin:0 0 10px; display:flex; flex-wrap:wrap; gap:6px}
.rv-item{border:1px solid var(--line); border-radius:6px; padding:10px 12px; margin:0 0 10px; background:var(--surface)}
.rv-item.rv-done{opacity:.6}
.rv-head{margin:0 0 6px}
.rv-item dl{margin:0 0 8px}
.rv-act{display:flex; flex-wrap:wrap; gap:8px}
.rv-form{display:grid; gap:8px; margin-top:8px}
.rv-form[hidden]{display:none}
.rv-form label{display:grid; gap:4px; font-size:13px; font-weight:600}
.rv-more{margin-top:8px}
.rv-more > summary{cursor:pointer; font-weight:600; font-size:13.5px; padding:6px 0}
/* system health */
.hs-banner{border-radius:6px; padding:10px 12px; margin:0 0 12px; border:1px solid var(--line)}
.hs-banner ul{margin:6px 0 0; padding-left:18px}
.hs-banner.hs-ok{background:var(--good-soft); color:var(--ink)}
.hs-banner.hs-amber{background:var(--warn-soft); color:var(--ink); border-color:var(--warn)}
.hs-banner.hs-red{background:var(--bad-soft); color:var(--ink); border-color:var(--bad)}
.stat.hs-amber{box-shadow:inset 3px 0 0 var(--warn)} .stat.hs-red{box-shadow:inset 3px 0 0 var(--bad)}
.hs-table tr.hs-amber td:first-child{box-shadow:inset 3px 0 0 var(--warn)} .hs-table tr.hs-red td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.slow-toast{position:fixed; left:50%; bottom:18px; transform:translate(-50%, 20px); z-index:90; background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:999px; font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:calc(100vw - 32px)}
.slow-toast.on{opacity:1; transform:translate(-50%, 0)}
/* savings and investment */
.sav-bar{height:10px; border-radius:999px; background:var(--accent-soft); overflow:hidden; margin:6px 0 4px}
.sav-bar i{display:block; height:100%; background:var(--accent)}
.sav-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px}
.sav-form{display:grid; gap:8px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); align-items:end}
.sav-form .wide{grid-column:1 / -1}
.sav-form label{display:grid; gap:4px; font-size:12.5px; font-weight:600}
/* print: the organogram alone */
@media print{
  body.print-org .wrap > *:not(.org-printing){display:none !important}
  body.print-org .org-printing{display:block !important}
  body.print-org .org-printing > h2,body.print-org .org-printing .note,body.print-org .org-tools{display:none !important}
  body.print-org .org-print-head{display:block; text-align:center; margin-bottom:12px}
  body.print-org .org-print-head p{margin:4px 0 0; font-size:12px}
  body.print-org .org-cols{grid-template-columns:repeat(3, 1fr)}
  body.print-org .org-node{break-inside:avoid; border-color:#999}
  body.print-org .sec-body{display:block !important}
  body.print-org{background:#fff}
}
details.hr-fold > summary{cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
details.hr-fold > summary::-webkit-details-marker{display:none}
details.hr-fold > summary b{font-family:var(--display); font-size:22px; font-weight:600}
details.hr-fold > summary small{color:var(--muted); font-size:12.5px}
details.hr-fold > summary::after{content:"Show"; margin-left:auto; font-size:12px; font-weight:700; color:var(--accent)}
details.hr-fold[open] > summary::after{content:"Hide"}

/* 7 Nov 2026: anything with the hidden attribute stays hidden, even where a class sets display (e.g. .xfredo) */
[hidden]{display:none !important}
/* 7 Nov 2026: form fields never wider than their card on a phone (iOS date and time inputs have an intrinsic width) */
input, select, textarea{box-sizing:border-box; max-width:100%}
.row, .two > *, form > *{min-width:0}
input[type=date], input[type=time], input[type=datetime-local], input[type=month]{display:block; width:100%; max-width:100%; min-width:0; min-height:42px}
@supports (-webkit-touch-callout: none){ input[type=date], input[type=time], input[type=datetime-local], input[type=month]{-webkit-appearance:none; appearance:none; text-align:left} input::-webkit-date-and-time-value{text-align:left} }

/* 8 Nov 2026: report fields as bullets, labels in small caps */
.report dt, .dayreport dt, .rv-item dt{font-variant:small-caps; text-transform:lowercase; letter-spacing:.05em; font-size:13px; color:var(--muted); margin-top:8px}
ul.blist{margin:2px 0 4px; padding-left:18px} ul.blist li{margin:2px 0}
details.fulltext{margin:2px 0 6px; font-size:12.5px} details.fulltext summary{cursor:pointer; color:var(--muted)} details.fulltext p{margin:4px 0 0}
/* 8 Nov 2026: Hub guide button under the hub title */
.hub-guide{margin:6px 0 0} .hub-guide a{font-size:13px; padding:5px 12px}

/* 8 Nov 2026: Close all / Open all and Tidy */
.cardbar{display:flex;justify-content:flex-end;gap:14px;margin:4px 0 6px;font-size:13px} .cardbar button{font-size:13px} .cardbar[hidden]{display:none}

/* final20: Not you? Switch code */
.switch-code{margin:6px 0 0;font-size:13px}.switch-code .linkish{font-size:13px}

/* ================= final20 redesign (approved Option B, 8 Nov 2026) =================
   Navy header band with the circle mark and the hub name; light teal page (#F2F8F8) with white cards and thin #E6EBEC lines;
   teal for active states; 8 px spacing; one card style; underline tabs on laptops; a bottom tab bar on phones (4 tabs + More).
   The Director Hub keeps its own light background. Dark mode and the accent colours still apply. */
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) body:not(.theme-director){--bg:#F2F8F8; --surface:#FFFFFF; --ink:#012130; --muted:#4F6670; --line:#E6EBEC; --field:#FFFFFF}}
:root[data-theme="light"] body:not(.theme-director){--bg:#F2F8F8; --surface:#FFFFFF; --ink:#012130; --muted:#4F6670; --line:#E6EBEC; --field:#FFFFFF}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]):not([data-accent]) body{--accent:#008080; --accent-soft:#E6F2F2; --on-accent:#FFFFFF; --accent-text:#006B6B}}
:root[data-theme="light"]:not([data-accent]) body{--accent:#008080; --accent-soft:#E6F2F2; --on-accent:#FFFFFF; --accent-text:#006B6B}
body{background:var(--bg)}
/* header band */
.band{background:#012130; color:#FFFFFF; position:sticky; top:0; z-index:40}
.band-in{max-width:960px; margin:0 auto; height:56px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.band .brand{display:flex; align-items:center; gap:10px; min-width:0}
.band .brand img{width:28px; height:28px; border-radius:50%; background:#fff; flex:none}
.band .brand b{font-family:var(--display); font-weight:600; font-size:20px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.band-act{display:flex; align-items:center; gap:8px; flex:none}
.band-act a, .band-act > button{color:#D7E6EA; background:none; border:0; font:600 13px var(--body); text-decoration:none; padding:6px; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
body .band-act > button{color:#D7E6EA}
.band-act svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8}
.band .themer-btn, body .band .themer-btn{border:0; color:#D7E6EA; padding:6px}
.band .themer-btn span{display:none}
.band-help{position:relative}
.band-pop{position:absolute; right:0; top:calc(100% + 8px); width:min(340px, calc(100vw - 32px)); background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:0 8px 24px rgba(1,33,48,.18); z-index:50; text-align:left}
.band-pop[hidden]{display:none}.band-pop h3{font-size:18px; margin:0 0 8px}.band-pop ul{padding-left:18px; margin:0 0 8px}.band-pop li{margin:4px 0; font-size:14px}
.band-pop a{color:var(--accent); font-weight:700}
@media (max-width:699px){.band-act .desk{display:none}}
/* the old title block stays for the record but the band carries the name now */
.wrap > header .mark, .wrap > header .eyebrow, .wrap > header .hub-title, .wrap > header .intro, .wrap > header .topbar, .wrap > header .hub-guide{display:none !important}
.wrap{padding-block:16px 96px; gap:16px; max-width:960px}
.wrap.wide{max-width:960px}
/* compact profile line */
.profile{background:transparent; border:0; padding:0; gap:12px}
.profile .avatar{width:44px; height:44px; font-size:16px}
.profile .pname{font-size:20px; cursor:pointer}
.profile .prole{font-size:13.5px; color:var(--muted)}
.profile .pmeta{display:none}.profile.show-id .pmeta{display:flex}
.switch-code{margin:4px 0 0}
/* Needs you now: one clean list with counts */
.needs{border-radius:12px; padding:16px}
.needs .howto{display:none}
.ncount{background:var(--accent-soft); color:var(--accent)}
.ncount.bad{background:var(--bad-soft); color:var(--bad)}
/* cards */
section.sec > h2.sec-head{border-radius:12px; padding:14px 16px; font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink)}
section.sec:not(.closed) > h2.sec-head{border-radius:12px 12px 0 0}
section.sec > .sec-body{background:var(--surface); border-radius:0 0 12px 12px; padding:8px 16px 16px}
@media (min-width:700px){section.sec > .sec-body{padding:8px 24px 24px} section.sec > h2.sec-head{padding:16px 24px}}
.more-h{font:700 12px var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:8px 0 -8px}
.wrap.organised > .more-h.sec-off{display:none}
/* laptop: one line of underline tabs */
.hubtabs{margin:0; padding:0; background:transparent; gap:24px; flex-wrap:nowrap; overflow-x:auto; border-bottom:1px solid var(--line); position:static}
.hubtabs button, body .hubtabs button{border:0; border-radius:0; background:transparent; color:var(--muted); padding:10px 0; font-weight:700; font-size:14.5px; border-bottom:2px solid transparent; margin-bottom:-1px}
.hubtabs button[aria-selected="true"], body .hubtabs button[aria-selected="true"]{background:transparent; color:var(--accent); border-bottom-color:var(--accent)}
.hubtabs .t-all{margin-left:auto; border-style:solid}
/* Close all and Tidy: two small icons */
.cardbar{gap:4px; margin:-8px 0 -8px}
.cardbar .linkish, body .cardbar button.linkish{width:32px; height:32px; border:1px solid var(--line); border-radius:8px; background:var(--surface); display:inline-grid; place-items:center; text-decoration:none; padding:0}
.cardbar svg{width:16px; height:16px; fill:none; stroke:var(--muted); stroke-width:1.8}
.cardbar .cb-tidy[aria-pressed="true"]{border-color:var(--accent)} .cardbar .cb-tidy[aria-pressed="true"] svg{stroke:var(--accent)}
.vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* phone: bottom tab bar, at most 5 items */
.bbar{display:none}
@media (max-width:699px){
  .wrap.organised > .hubtabs{display:none}
  .bbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--surface); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
  .bbar button{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px 10px; background:none; border:0; border-radius:0; color:var(--muted); font:700 11px var(--body); position:relative; cursor:pointer}
  body .bbar button{color:var(--muted)}
  .bbar button span.bl{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .bbar svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8}
  .bbar button[aria-selected="true"], body .bbar button[aria-selected="true"]{color:var(--accent)}
  .bbar button[aria-selected="true"]::before{content:""; position:absolute; top:0; left:28%; right:28%; height:2px; background:var(--accent)}
  .bbar .bn{position:absolute; top:4px; left:56%; font-size:10px; line-height:15px; padding:0 5px; border-radius:999px; background:var(--bad); color:#fff}
  .bsheet{position:fixed; inset:0; z-index:60}.bsheet[hidden]{display:none}
  .bsheet .bs-back{position:absolute; inset:0; background:rgba(1,33,48,.35)}
  .bsheet .bs-in{position:absolute; left:0; right:0; bottom:0; background:var(--surface); border-radius:16px 16px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); max-height:80vh; overflow:auto}
  .bsheet .bs-in h3{font-size:18px; margin:0 0 8px}
  .bsheet .bs-i{display:flex; width:100%; justify-content:space-between; align-items:center; padding:14px 4px; background:none; border:0; border-top:1px solid var(--line); border-radius:0; font:700 15px var(--body); color:var(--ink); text-align:left; text-decoration:none}
  body .bsheet .bs-i{color:var(--ink)}
  .bsheet .bs-i.on{color:var(--accent)}
}
body .band .bh-btn, body .band .band-act > button, body .band .themer-btn{background:none; border:0; color:#D7E6EA; padding:6px; box-shadow:none; min-height:0}
body .band .bh-btn:hover, body .band .themer-btn:hover{color:#FFFFFF}
.band .brand .short{display:none}
@media (max-width:699px){.band .brand .full{display:none} .band .brand .short{display:inline}}
.band{margin-left:calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)))}
.hubtabs button[aria-selected="true"], body .hubtabs button[aria-selected="true"]{color:var(--accent-text, var(--accent))}
/* HR Hub and HR Admin tabs: one line with an underline, scrolling sideways on a phone if needed (never wrapping pills) */
.hr-tabs, body .hr-tabs{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:20px; border-bottom:1px solid var(--line); padding:0; background:transparent; scrollbar-width:none}
.hr-tabs::-webkit-scrollbar{display:none}
.hr-tabs button, body .hr-tabs button{flex:0 0 auto; background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--muted); padding:10px 0; font-weight:700; font-size:14.5px; margin-bottom:-1px; white-space:nowrap}
.hr-tabs button.on, body .hr-tabs button.on{background:transparent; color:var(--accent-text, var(--accent)); border-bottom-color:var(--accent)}

/* ================= final21: quizzes, results, change a decision, report builder, events, alumni, check-ins, student load ================= */
.qz-act{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0}
.qz-act button{min-height:40px}
.qz-code{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:8px 0; padding:10px 14px; border-radius:10px; background:var(--accent-soft); color:var(--ink)}
.qz-code b{font-family:var(--display); font-size:30px; letter-spacing:.18em; color:var(--accent)}
.qz-code.big b{font-size:44px}
.qz-code small{color:var(--muted); font-size:13px}
.qz-now{margin:0 0 12px}
.qz-q{border:1px solid var(--line); border-radius:10px; padding:10px 12px 12px; margin:10px 0; min-width:0}
.qz-q legend{font-weight:700; padding:0 6px}
.qz-opt{display:flex; align-items:center; gap:8px; margin:6px 0}
.qz-opt input[type=radio]{flex:none; width:20px; height:20px}
.qz-opt input[name=o]{flex:1; min-width:0}
tr.qz-flag td{background:var(--warn-soft, #FFF6E5)}
.chd-in{margin-top:12px; border-top:1px solid var(--line); padding-top:8px}
.chd-item details{margin-top:6px}
.rpt-frame{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; margin-top:12px}
.rpt-frame iframe{display:block; width:100%; height:560px; border:0}
.ev-figs{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; margin:8px 0 12px}
.ev-fig{border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--bg)}
.ev-fig b{display:block; font-family:var(--display); font-size:26px; color:var(--accent); line-height:1.1}
.ev-fig span{font-size:13px; color:var(--muted)}
.ev-bars{list-style:none; padding:0; margin:4px 0 12px}
.ev-bars li{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px}
.al-s, .check{display:flex; gap:8px; align-items:flex-start; margin:6px 0}
.al-s small{color:var(--muted)}
.btn-link{font-weight:700; color:var(--accent)}
.pc-card{margin-top:16px}
@media (max-width:699px){.rpt-frame iframe{height:460px} .qz-code.big b{font-size:38px}}
.rv-item .rr-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.rv-item .rr-top > span{min-width:0; overflow-wrap:anywhere}
.banner{border-radius:10px; padding:10px 14px; font-size:14px; border:1px solid var(--line)}
.banner.ok{background:var(--good-soft); border-color:transparent}
label.check > input[type=checkbox], label.check > input[type=radio], .choices input[type=radio], .choices input[type=checkbox], .qz-pop input[type=radio]{width:auto; min-width:0; flex:none; margin:3px 0 0}
.choices > label{display:inline-flex; align-items:center; gap:6px}

/* final21 events test mode */
.banner.ev-test{background:#012130; color:#DCD1BF; border-color:#012130; border-radius:4px; margin:0 0 10px}
.banner.ev-test b{color:#FFFFFF; margin-right:6px; letter-spacing:.04em}
.ev-act button{margin:0 8px 8px 0}
.ev-edit textarea{width:100%}

/* final21: long words, URLs and wide tables never widen the page (iPhone zoom-out guard) */
html, body{max-width:100%; overflow-x:hidden}
body{overflow-wrap:anywhere}
p, li, dd, dt, td, th, a, label, summary, small, span, .t, .tasks li, .list li, .rv-item, .panel, .banner, .note{overflow-wrap:anywhere; word-break:break-word}
pre, code{white-space:pre-wrap; overflow-wrap:anywhere}
table{max-width:100%}
.tblwrap{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
img, video, iframe, canvas, svg{max-width:100%}
input, select, textarea{max-width:100%}

/* final21 birthdays: the greeting on the day, and Add your birthday (day and month only) */
.profile .bday-banner{background:#012130;color:#fff;font-family:"EB Garamond",Georgia,serif;font-size:19px;line-height:1.35;border-left:4px solid #008080;border-radius:10px;padding:12px 14px;margin:0 0 12px;overflow-wrap:anywhere}
.profile .add-bday{display:block;margin-top:2px}
.profile .bday-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.profile .bday-row select{width:auto;min-width:0;flex:1 1 90px}
.profile .bday-row button{flex:0 0 auto}
.bd-list{list-style:none;margin:0;padding:0}.bd-list li{padding:8px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.bd-list li:last-child{border-bottom:0}
/* 8 Nov 2026: status pills (Draft, Live, Ended, Approved, request statuses) never shrink or clip: title left (wraps), pill right */
.rr-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.rr-top > :not(.pill){min-width:0; flex:1 1 auto; overflow-wrap:anywhere}
.rr-top > .pill, .rr-top .pill:last-child{flex:none; white-space:nowrap; max-width:none}
.pill{display:inline-block; flex-shrink:0}

/* organogram governance (MD, 8 Nov 2026): Board of Directors on top with the Advisory Board beside it on a dotted line (advises, above no one);
   on phones the Advisory Board sits beside the line from the Board to the MD. The Academic Board (to be set up in 2027) under the MD */
.org-gov{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; max-width:760px}
.org-gov .org-bod{grid-column:2; border-style:solid; border-color:var(--ink)}
.org-side{grid-column:3; justify-self:start; display:flex; align-items:center; min-width:0}
.org-dot{flex:none; width:24px; height:0; border-top:2px dashed var(--muted)}
.org-gov .org-adv{border:1px dashed var(--muted); max-width:200px; padding:6px 10px}
.org-gov .org-adv b{font-size:14.5px}
.org-gov .org-adv small{display:block; font-size:11px; line-height:1.3}
.org-acad{border:1px dashed var(--line); border-radius:6px; padding:5px 12px; text-align:center; color:var(--muted); font-size:12px; max-width:260px}
.org-acad b{display:block; font-family:var(--display); font-weight:600; font-size:14px; color:var(--muted)}
@media screen and (max-width:620px){
  .org-gov{grid-template-columns:1fr 1fr}
  .org-gov .org-bod{grid-column:1 / -1; justify-self:center}
  .org-side{grid-column:2; border-left:1px solid var(--line); padding:8px 0}
  .org-dot{width:14px}
  .org-gov .org-adv{max-width:none}
}
@media print{ body.print-org .org-dot{border-top-color:#777} body.print-org .org-gov .org-adv, body.print-org .org-acad{border-color:#999} }

/* quiz builder (8 Nov 2026): the question and its answer options look clearly different */
.qz-q{--qz-tint:#E8F3F3; --qz-tint-ink:#00605F; --qz-panel:#FFFFFF; --qz-panel-line:#D5DADD; --qz-chip:#E4E7EA; --qz-chip-ink:#33434B; --qz-ok:#E6F4EA; --qz-ok-ink:#1E6B3A; --qz-text:#012130}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .qz-q{--qz-tint:#12343A; --qz-tint-ink:#7FD1CC; --qz-panel:#0F1E28; --qz-panel-line:#2B4250; --qz-chip:#2A3B46; --qz-chip-ink:#D7E2E8; --qz-ok:#163A26; --qz-ok-ink:#8FDDAA; --qz-text:#EAF0F4}}
:root[data-theme="dark"] .qz-q{--qz-tint:#12343A; --qz-tint-ink:#7FD1CC; --qz-panel:#0F1E28; --qz-panel-line:#2B4250; --qz-chip:#2A3B46; --qz-chip-ink:#D7E2E8; --qz-ok:#163A26; --qz-ok-ink:#8FDDAA; --qz-text:#EAF0F4}
.qz-q{border:1px solid var(--line); border-radius:4px; padding:0; margin:14px 0; min-width:0; overflow:hidden; background:var(--surface)}
.qz-q > legend.qz-head{float:left; width:100%; box-sizing:border-box; margin:0; padding:10px 14px; background:#012130; color:#fff; font-weight:700; font-size:15px; letter-spacing:.02em}
.qz-body{clear:both; padding:12px}
.qz-type{margin:0 0 4px}.qz-type select{min-height:44px}
.qz-qbox{background:var(--qz-tint); border-left:3px solid #008080; border-radius:4px; padding:10px 12px; margin:8px 0 4px}
.qz-qbox label{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--qz-tint-ink); margin:0 0 6px}
.qz-qbox textarea{width:100%; box-sizing:border-box; font-size:16px; font-weight:600; line-height:1.4; color:var(--qz-text); background:var(--qz-panel); min-height:64px}
.qz-img{margin:2px 0 12px}.qz-img label{display:block; font-size:12.5px; font-weight:400; color:var(--muted); margin:0 0 3px}.qz-img input{font-size:13px; min-height:44px; width:100%; box-sizing:border-box}
.qz-opts{margin:4px 0 0 14px; background:var(--qz-panel); border:1px solid var(--qz-panel-line); border-radius:4px; padding:8px 10px; color:var(--qz-text)}
.qz-oh{font-size:13px; font-weight:700; margin:2px 0 6px}
.qz-opt{display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 8px; margin:2px 0; border-radius:4px; cursor:pointer}
.qz-opt input[type=radio]{flex:none; width:22px; height:22px; margin:0; accent-color:#1E6B3A}
.qz-chip{flex:none; width:28px; height:28px; border-radius:50%; background:var(--qz-chip); color:var(--qz-chip-ink); display:grid; place-items:center; font-weight:700; font-size:13px}
.qz-opt input[name=o]{flex:1; min-width:0; font-size:14px; font-weight:400; min-height:40px; color:var(--qz-text); background:transparent}
.qz-ok{display:none; flex:none; font-size:12px; font-weight:700; color:var(--qz-ok-ink)}
.qz-opt.is-correct{background:var(--qz-ok)}.qz-opt.is-correct .qz-ok{display:inline}
@media (max-width:420px){.qz-opts{margin-left:6px; padding:6px}.qz-opt{gap:8px; padding:4px 6px}}
/* the radio is the letter chip: tap the chip to tick the correct answer (saves room on phones) */
.qz-opt{position:relative}
.qz-opt input[type=radio]{position:absolute; left:8px; top:50%; width:28px; height:28px; margin:-14px 0 0; opacity:0; cursor:pointer}
.qz-chip{width:30px; height:30px; border:2px solid transparent; box-sizing:border-box}
.qz-opt input[type=radio]:focus-visible + .qz-chip{outline:2px solid #008080; outline-offset:2px}
.qz-opt.is-correct .qz-chip{background:#1E6B3A; color:#fff}
.qz-opt input[name=o]{padding:8px 10px}
@media (max-width:420px){.qz-body{padding:10px}.qz-opts{margin-left:4px; padding:6px 4px}.qz-opt{gap:6px; padding:4px}.qz-opt input[type=radio]{left:4px}.qz-ok{font-size:11px}}
/* item 11 (8 Nov 2026): belt and braces against the zoomed-out iPhone view */
@supports (overflow:clip){html, body{overflow-x:clip}}
.wrap, .wrap > section, .wrap > section > *, .sec-body, .sec-body > *, .panel, .panel > *, .two > *, .stats > *, .grid > *, .rr-top > *, .fav-grid > *, .org-cols > *, .hubtabs > *{min-width:0}
.wrap, main{max-width:100%}
.tasks, .tasks *, .list, .list *, [data-tasks], [data-tasks] *, [data-overdue], [data-overdue] *, .ck-list, .ck-list *, .tday, .tday *, a{overflow-wrap:anywhere}
/* organogram print: the connecting lines print without background graphics; the hub band stays off the page */
@media print{ body.print-org .org-link{background:none !important; border-left:1px solid #777; width:0} body.print-org header.band, body.print-org .band, body.print-org nav.tabs, body.print-org .hubtabs{display:none !important} body.print-org .org-side{border-left-color:#777} }
@media screen and (max-width:620px){ .org[data-org-chart]{padding:0 10px; box-sizing:border-box; width:100%} .org-cols{padding:0 2px} }

/* ---------- final22 (12 Nov 2026) ---------- */
/* item 1: link cards use the full width (icon left, text right), never one word per line */
a.tile > div:not(.icon), .tile > summary > div:not(.icon){min-width:0}
a.tile > div:only-child, a.tile > div:not(.icon):first-child{grid-column:1 / 3}
.t-name, .t-when{overflow-wrap:normal; word-break:normal; hyphens:manual}
.t-name{overflow-wrap:break-word}
/* items 10 and 10d: the hub code row under the name and role, above My Favourites */
.coderow{margin:12px 0 4px; padding:12px 14px; border:1px solid var(--accent); border-radius:4px; background:var(--surface)}
.coderow .cr-l{display:block; font-family:var(--display); font-size:18px; font-weight:600; margin:0 0 8px}
.coderow .cr-bar{display:flex; gap:8px; flex-wrap:wrap}
.coderow input{flex:1 1 160px; min-width:0; min-height:44px}
.coderow button{min-height:44px}
.coderow .msg{margin:8px 0 0}
.coderow.signed{padding:6px 0; border:0; background:none}
.coderow.signed .cr-in{margin:0; font-size:13px; color:var(--muted)}
.coderow.signed .cr-in b{color:var(--ink)}
.coderow.flash{box-shadow:0 0 0 3px var(--accent-soft)}
.go-code{font-weight:700}
body.has-coderow [data-team] > .codebar, body.has-coderow [data-finance] > .codebar, body.has-coderow [data-dutycode] > .codebar,
body.has-coderow [data-stucode] > .codebar, body.has-coderow [data-moves] > .codebar, body.has-coderow section.cr-access{display:none !important}
/* item 49: the theme menu is never cut off: it sits under the top bar, inside the screen, and scrolls if the screen is short */
.themer-pop{position:fixed; top:64px; right:12px; left:auto; width:min(300px, calc(100vw - 24px)); max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); overflow:auto; z-index:60}
/* item 40: who a task is from and to */
.t-fromto{display:block; color:var(--muted); font-size:12px}
.task-given .cancel-form{display:flex; flex-direction:column; gap:8px; padding:8px 0; border:0}
.task-given .cancel-form input{width:100%}
.mc-cancel{font-size:12px; flex:none}
/* item 13: clock in state */
.clock-state{margin:0 0 10px; padding:10px 12px; border-radius:4px; background:var(--good-soft); color:var(--good); font-weight:700}
.clock-buttons button:disabled{opacity:.45; cursor:not-allowed}
.clock-more{margin-top:10px}
.clock-more summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:700}
.clock-more form{padding:8px 0; border:0}
/* item 47: the Content Calendar today */
.cc-list{list-style:none; margin:0; padding:0}
.cc-list li{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
.cc-list li span{min-width:0; overflow-wrap:anywhere}
.cc-list .pill{flex:none}
/* item 17: wide tables as one card per person or item */
.pr-cards{display:flex; flex-direction:column; gap:12px}
.pr-card{border:1px solid var(--line); border-radius:4px; padding:12px 14px; background:var(--surface)}
.pr-card h4{font-family:var(--display); font-size:18px; margin:0}
.pr-card .pr-sub{font-size:13px; color:var(--muted); margin:2px 0 8px}
.pr-kv{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:6px 12px; margin:0; font-size:13.5px}
.pr-kv dt{color:var(--muted)} .pr-kv dd{margin:0; overflow-wrap:anywhere}
.pr-note{color:var(--muted); font-size:12.5px; margin:8px 0 0; overflow-wrap:anywhere}
.pr-edit-form{display:flex; flex-direction:column; gap:10px; margin-top:10px; padding:12px 0 0; border-top:1px solid var(--line)}
.pr-edit-form label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700}
.pr-edit-form input, .pr-edit-form select, .pr-edit-form textarea{width:100%; min-width:0}
@media (min-width:900px){.pr-cards{display:grid; grid-template-columns:1fr 1fr}}
/* item 20: budget category tools */
.bc-tools{margin:12px 0}
.bc-list{list-style:none; margin:8px 0; padding:0}
.bc-list li{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 0; border-bottom:1px solid var(--line)}
.bc-list li span{flex:1 1 100%; min-width:0; overflow-wrap:normal; word-break:normal}
@media (min-width:600px){.bc-list li{flex-wrap:nowrap}.bc-list li span{flex:1 1 0}}
.bc-list button{flex:none; white-space:nowrap; min-height:44px; min-width:0; width:auto; padding:4px 10px}
.bc-new{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border-radius:3px; background:var(--accent-soft); color:var(--accent)}
/* final23b: cards shown from a ready copy say when it was worked out */
.upd23b{margin:0 0 6px;font-size:12.5px;color:var(--muted);line-height:1.5}
.upd23b .linkish{background:none;border:0;padding:0;min-height:0;font:inherit;font-weight:700;margin-left:6px}