:root, [data-theme="dark"] {
  --bg:#0d1117;--surface:#161b22;--surface2:#21262d;--border:#30363d;
  --text:#e6edf3;--muted:#8b949e;
  --red:#ff4d4f;--amber:#f59e0b;--green:#22c55e;
  --red-bg:rgba(255,77,79,.12);--amber-bg:rgba(245,158,11,.12);--green-bg:rgba(34,197,94,.12);
  --accent:#58a6ff;--accent-bg:rgba(88,166,255,.1);
  --pink:#f472b6;--purple:#a78bfa;--teal:#34d399;
  /* Quick Log identity (QL.6) — deliberately unclaimed by any other feature */
  --quicklog:#7c5cff;--quicklog-bright:#9d85ff;--quicklog-ink:#ffffff;
  --status-action-bg:rgba(245,158,11,.15);--status-action-text:#f59e0b;--status-action-bd:rgba(245,158,11,.35);
  --status-alert-bg:rgba(255,77,79,.13);--status-alert-text:#ff6b6b;--status-alert-bd:rgba(255,77,79,.3);
  --status-clear-bg:rgba(34,197,94,.12);--status-clear-text:#22c55e;--status-clear-bd:rgba(34,197,94,.3);
  --status-neutral-bg:rgba(139,148,158,.1);--status-neutral-text:#8b949e;--status-neutral-bd:rgba(139,148,158,.25);
  --blue:#58a6ff;--blue-bg:rgba(88,166,255,.12);
  --purple-bg:rgba(167,139,250,.12);
  /* Department tokens (v3.0.0-rc0, Phase 0) — overridden at login by applyDeptTheme().
     Defaults mirror OBGYN green so unthemed surfaces render correctly pre-login. */
  --dept-color:#22c55e;--dept-dark:#16a34a;--dept-accent:#4ade80;--dept-rgb:34,197,94;
}
[data-theme="light"] {
  --bg:#f6f8fa;--surface:#ffffff;--surface2:#f0f2f5;--border:#d0d7de;
  --text:#1f2328;--muted:#656d76;
  --red:#cf222e;--amber:#bf8700;--green:#1a7f37;
  --red-bg:rgba(207,34,46,.08);--amber-bg:rgba(191,135,0,.08);--green-bg:rgba(26,127,55,.08);
  --accent:#0969da;--accent-bg:rgba(9,105,218,.08);
  --pink:#d63384;--purple:#8250df;--teal:#1b7c83;
  --quicklog:#6b46ff;--quicklog-bright:#8b6cff;--quicklog-ink:#ffffff;
  --status-action-bg:rgba(191,135,0,.1);--status-action-text:#8a5a00;--status-action-bd:rgba(191,135,0,.3);
  --status-alert-bg:rgba(207,34,46,.09);--status-alert-text:#a0191e;--status-alert-bd:rgba(207,34,46,.25);
  --status-clear-bg:rgba(26,127,55,.09);--status-clear-text:#145c2a;--status-clear-bd:rgba(26,127,55,.28);
  --status-neutral-bg:rgba(101,109,118,.09);--status-neutral-text:#656d76;--status-neutral-bd:rgba(101,109,118,.22);
  --blue:#0969da;--blue-bg:rgba(9,105,218,.08);
  --purple-bg:rgba(130,80,223,.08);
  /* Department tokens — OBGYN green, light variant */
  --dept-color:#1a7f37;--dept-dark:#145c2a;--dept-accent:#22c55e;--dept-rgb:26,127,55;
}
/* ── ANTHROPIC THEME — warm cream, terracotta accent ─────────────────────── */
[data-theme="anthropic"] {
  /* Backgrounds — warm parchment hierarchy */
  --bg:#F5EFE6;
  --surface:#FDFAF6;
  --surface2:#EDE5D8;
  --border:#D9CFBF;
  /* Typography */
  --text:#1C1915;
  --muted:#7A6E61;
  /* Semantic colours — warm-shifted versions */
  --red:#C0392B;--amber:#A0620A;--green:#2A6B3A;
  --red-bg:rgba(192,57,43,.09);--amber-bg:rgba(160,98,10,.09);--green-bg:rgba(42,107,58,.09);
  /* Brand accent — Anthropic terracotta / burnt orange */
  --accent:#C96A2A;
  --accent-bg:rgba(201,106,42,.10);
  --accent-rgb:201,106,42;
  /* Supporting palette — earthy harmonics */
  --pink:#A0522D;     /* sienna */
  --purple:#7B5EA7;   /* warm plum */
  --teal:#2E7D6B;     /* forest */
  --quicklog:#6D5BB8;--quicklog-bright:#8878D4;--quicklog-ink:#ffffff;  /* muted iris — QL.6 */
  --status-action-bg:rgba(160,98,10,.12);--status-action-text:#7A4A00;--status-action-bd:rgba(160,98,10,.3);
  --status-alert-bg:rgba(192,57,43,.1);--status-alert-text:#8C2218;--status-alert-bd:rgba(192,57,43,.28);
  --status-clear-bg:rgba(42,107,58,.1);--status-clear-text:#1A5228;--status-clear-bd:rgba(42,107,58,.28);
  --status-neutral-bg:rgba(122,110,97,.1);--status-neutral-text:#7A6E61;--status-neutral-bd:rgba(122,110,97,.25);
  --blue:#5E7AB5;--blue-bg:rgba(94,122,181,.1);
  --purple-bg:rgba(123,94,167,.10);
  /* Department tokens — OBGYN green, anthropic variant */
  --dept-color:#2A6B3A;--dept-dark:#1A5228;--dept-accent:#4A8A5A;--dept-rgb:42,107,58;
}
/* Soften btn-full colour inversion for anthropic theme */
[data-theme="anthropic"] .btn-full { color: #FDFAF6; }
[data-theme="anthropic"] header { background: #FDFAF6; box-shadow: 0 1px 0 #D9CFBF; }
[data-theme="anthropic"] .sidebar { background: #FDFAF6; }
[data-theme="anthropic"] .tab { font-weight: 500; }
[data-theme="anthropic"] .tab.active { background: var(--surface2); }
[data-theme="anthropic"] .proc-card:hover { border-color: #C2B09A; }
[data-theme="anthropic"] .auth-card { box-shadow: 0 2px 24px rgba(0,0,0,.08); }
*{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;overflow:hidden;margin:0;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;height:100%;font-size:14px;overflow:hidden;overscroll-behavior-y:none;}

/* ── LOADING ── */
#loadingScreen{position:fixed;inset:0;z-index:2000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
#loadingScreen.hidden{display:none;}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-text{color:var(--muted);font-size:13px;}

/* ── AUTH ── */
#authScreen{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 16px;}
#authScreen.hidden{display:none;}
.auth-card{width:min(520px,100%);max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px;margin:auto;}
.auth-logo{text-align:center;margin-bottom:28px;}
.auth-logo-mark{width:52px;height:52px;background:linear-gradient(135deg,#22c55e,#58a6ff);border-radius:14px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-size:22px;color:#fff;}
.auth-logo-title{font-size:22px;}
.auth-logo-sub{font-size:11px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-top:2px;}
.auth-tabs{display:flex;gap:0;margin-bottom:24px;background:var(--surface2);border-radius:8px;padding:3px;}
.auth-tab{flex:1;text-align:center;padding:8px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:all .15s;}
.auth-tab.active{background:var(--surface);color:var(--text);}
.auth-form-title{font-family:'DM Serif Display',serif;font-size:18px;margin-bottom:4px;}
.auth-form-sub{color:var(--muted);font-size:12px;margin-bottom:18px;line-height:1.5;}
.form-field{margin-bottom:14px;}
.form-label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;}
.form-input{width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13.5px;transition:border-color .15s;}
.form-input:focus{outline:none;border-color:var(--accent);}
.form-input.error{border-color:var(--red);}
.form-error{font-size:11px;color:var(--red);margin-top:5px;min-height:15px;}
.pw-wrap{position:relative;}
.pw-wrap .form-input{padding-right:40px;}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;padding:4px;}
.pw-strength{display:flex;gap:4px;margin-top:6px;}
.pw-strength-bar{height:3px;flex:1;border-radius:2px;background:var(--border);transition:background .3s;}
.pw-hint{font-size:11px;color:var(--muted);margin-top:4px;}
.btn-full{width:100%;padding:11px;border-radius:8px;border:none;background:var(--accent);color:#0d1117;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-full:hover{opacity:.88;}
.btn-full:disabled{opacity:.5;cursor:not-allowed;}
.btn-full.secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);}
.btn,.btn-full,.pw-toggle{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.auth-link{text-align:center;font-size:12px;color:var(--muted);margin-top:16px;cursor:pointer;}
.auth-link span{color:var(--accent);text-decoration:underline;}
.auth-info{font-size:11px;color:var(--muted);background:var(--surface2);border-radius:6px;padding:9px 11px;margin-bottom:14px;line-height:1.6;}
.auth-success{font-size:13px;color:var(--green);background:var(--green-bg);border:1px solid var(--green);border-radius:7px;padding:10px 12px;margin-bottom:12px;display:none;}

/* ── APP SHELL ── */
#appShell{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;}

/* ── HEADER ── */
/* Topbar: single 52px row with three zones — logo · tabs (flex:1) · controls.
   v3.5.0 redesign folded the old separate tabs row into the topbar.
   v3.5.2: box-sizing + width guard + explicit right-zone pin keep the
   controls flush with the viewport edge even when a tab is active and
   the main scroll area briefly appears/disappears. */
header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;display:flex;align-items:center;gap:0;height:52px;flex-shrink:0;z-index:100;width:100%;box-sizing:border-box;}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-right:14px;}
.logo-mark{width:30px;height:30px;background:linear-gradient(135deg,#22c55e,#58a6ff);border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-size:15px;color:#fff;flex-shrink:0;}
.logo-text{font-size:16px;line-height:1;}
/* Tagline elements removed from topbar HTML (v3.5.0) — keep rules for any
   legacy auth-screen references, but default to display:none in the topbar. */
header .logo-sub, header .logo-credit { display:none; }
.brand-wordmark{display:inline-flex;align-items:baseline;gap:0;font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:-.04em;line-height:1;}
.brand-aku{color:#f8fbff;}
.brand-tracker{color:#1fd4c9;}
[data-theme="light"] .brand-aku,
[data-theme="anthropic"] .brand-aku{color:#0f172a;}
.header-right{display:flex;gap:8px;align-items:center;}
/* Department badge (v3.0.0-rc0, Phase 0) — topbar right-zone pill shown after login.
   Uses --dept-* tokens set by applyDeptTheme(). Hidden by default. */
.dept-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(var(--dept-rgb),.15);color:var(--dept-accent);letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(var(--dept-rgb),.35);flex-shrink:0;white-space:nowrap;}
/* Phase 1.5 (v3.0.0-rc2): admin-only topbar pills.
   .super-user-pill — always visible for admin. Red accent reminds them they
   hold platform privileges regardless of role/dept preview state.
   .dept-preview-chip — shown only when admin has scoped into a specific
   department. Amber warning colour. Click-tooltip points back to cross-dept. */
.super-user-pill{font-size:10px;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(239,68,68,.15);color:var(--red);border:1px solid rgba(239,68,68,.35);letter-spacing:.06em;text-transform:uppercase;flex-shrink:0;white-space:nowrap;cursor:help;}
.dept-preview-chip{font-size:10px;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(245,158,11,.15);color:var(--amber);border:1px solid rgba(245,158,11,.4);letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;white-space:nowrap;cursor:pointer;}
.dept-preview-chip:hover{background:rgba(245,158,11,.25);}
.user-chip{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.user-chip strong{color:var(--accent);}
.user-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text);transition:background .1s;}
.user-menu-item:hover{background:var(--surface2);}
.sync-indicator{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--green);}
.sync-dot.syncing{background:var(--amber);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

.dashboard-card-skeleton{height:72px;border-radius:10px;margin-top:4px;background:var(--surface2);animation:pulse 1.4s infinite;}

/* ── LAYOUT ── */
.layout{display:grid;grid-template-columns:248px 1fr;flex:1;min-height:0;overflow:hidden;}

/* ── SIDEBAR ── */
.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:20px 0;overflow-y:auto;min-height:0;}
.sidebar-section{padding:0 16px;margin-bottom:6px;}
.sidebar-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);padding:8px 8px 4px;font-weight:600;}
.sidebar-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background .1s;gap:8px;}
.sidebar-item:hover{background:var(--surface2);}
.sidebar-item.active{background:var(--accent-bg);color:var(--accent);}
.sidebar-item.active .sidebar-count{background:var(--accent);color:#fff;}
.sidebar-item-name{font-size:13px;font-weight:500;flex:1;}
.sidebar-count{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--surface2);border-radius:10px;padding:2px 7px;min-width:28px;text-align:center;color:var(--muted);font-weight:500;}
.sidebar-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.overall-stats{padding:14px;margin:0 0 8px;background:var(--surface2);border-radius:8px;border:1px solid var(--border);}
.overall-title{font-size:11px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.8px;}
.overall-numbers{display:flex;gap:12px;margin-bottom:8px;}
.overall-num .val{font-family:'DM Serif Display',serif;font-size:20px;}
.overall-num .lbl{font-size:10px;color:var(--muted);}
.overall-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.overall-bar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--accent));border-radius:2px;transition:width .5s ease;}

/* ── MAIN ── */
/* touch-action: pan-y pinch-zoom — allow vertical scroll AND pinch-to-zoom on
   mobile. Plain `pan-y` silently disables pinch-zoom, which is an a11y issue
   and part of the class of "mobile gesture dies" reports. */
.main{padding:28px 32px;overflow-y:auto;overflow-x:hidden;min-height:0;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;}
.page-title{font-family:'DM Serif Display',serif;font-size:26px;font-weight:400;line-height:1.2;}
.page-subtitle{color:var(--muted);font-size:13px;margin-top:3px;}
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);padding:4px;border-radius:8px;width:fit-content;}
.tab{padding:6px 14px;border-radius:5px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:all .15s;}
.tab.active{background:var(--surface2);color:var(--text);}
.tab:hover:not(.active){color:var(--text);}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px;}
.stat-card-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;white-space:nowrap;}
.stat-card-val{font-family:'DM Serif Display',serif;font-size:22px;line-height:1;flex-shrink:0;}
.stat-card-sub{font-size:10px;color:var(--muted);margin-top:1px;}
.search-bar{width:200px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;}
.search-bar:focus{outline:none;border-color:var(--accent);}
.search-bar::placeholder{color:var(--muted);}
.far-link-chip{display:inline-flex;align-items:center;gap:6px;color:#0b5cff;border-color:rgba(11,92,255,.22);background:rgba(11,92,255,.08);font-weight:700;}
.far-link-chip:hover{color:#0847c7;border-color:rgba(11,92,255,.38);background:rgba(11,92,255,.14);}
.far-zoom-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background:#0b5cff;color:#fff;flex-shrink:0;}

/* ── PROCEDURES ── */
.category-group{margin-bottom:4px;}
.category-toggle{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;cursor:pointer;user-select:none;transition:background .15s;margin-bottom:3px;}
.category-toggle:hover{background:#2d333b;}
.cat-chevron{font-size:10px;color:var(--muted);transition:transform .2s;flex-shrink:0;}
.cat-chevron.open{transform:rotate(90deg);}
.cat-name{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;flex:1;}
.cat-badge{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--border);border-radius:10px;padding:2px 8px;color:var(--muted);}
.cat-progress-mini{font-size:11px;color:var(--muted);}
.category-body{overflow:hidden;transition:max-height .35s ease;}
.category-header-row{display:grid;grid-template-columns:1fr 120px 130px 110px 44px;gap:12px;padding:6px 16px;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;}
.sort-col{cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:4px;transition:color .15s;}
.sort-col:hover{color:var(--accent);}
.sort-col.active{color:var(--accent);}
.sort-arrow{font-size:9px;opacity:.5;}
.sort-col.active .sort-arrow{opacity:1;}
.proc-card{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:12px 16px;display:grid;grid-template-columns:1fr 120px 130px 110px 44px;align-items:center;gap:12px;transition:all .15s;margin-bottom:2px;}
.proc-card:hover{border-color:#484f58;background:var(--surface2);}
.proc-name{font-weight:500;font-size:13.5px;line-height:1.3;}
.proc-tag{font-size:10px;color:var(--muted);margin-top:2px;}
.traffic-light{display:flex;align-items:center;gap:6px;}
.light{width:10px;height:10px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);flex-shrink:0;transition:all .3s;}
.light.active-red{background:var(--red);border-color:var(--red);box-shadow:0 0 6px var(--red);}
.light.active-amber{background:var(--amber);border-color:var(--amber);box-shadow:0 0 6px var(--amber);}
.light.active-green{background:var(--green);border-color:var(--green);box-shadow:0 0 6px var(--green);}
.traffic-label{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;font-weight:500;}
.traffic-label.red{color:var(--red);}
.traffic-label.amber{color:var(--amber);}
.traffic-label.green{color:var(--green);}
.proc-progress{display:flex;flex-direction:column;gap:4px;}
.progress-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.progress-fill{height:100%;border-radius:3px;transition:width .5s ease;}
.progress-fill.red{background:var(--red);}
.progress-fill.amber{background:var(--amber);}
.progress-fill.green{background:linear-gradient(90deg,#22c55e,#4ade80);}
.progress-text{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);text-align:right;}
.count-control{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;}
.count-btn{width:22px;height:22px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .1s;flex-shrink:0;}
.count-btn:hover{background:var(--border);}
.count-val{font-size:15px;font-weight:500;min-width:28px;text-align:center;}
.inline-target{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:3px;}
.inline-target input{width:48px;padding:2px 5px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;text-align:center;}
.inline-target input:focus{outline:none;border-color:var(--accent);}
.log-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:16px;}
.log-btn:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);}

/* ── HISTORY ── */
.history-panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;}
.history-title{font-family:'DM Serif Display',serif;font-size:18px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}
.history-item{display:flex;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);gap:12px;font-size:13px;}
.history-item:last-child{border-bottom:none;}
.history-proc{font-weight:500;flex:1;}
.history-date{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;}
.history-del{width:22px;height:22px;border-radius:4px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;transition:all .1s;display:flex;align-items:center;justify-content:center;}
.history-del:hover{background:var(--red-bg);border-color:var(--red);color:var(--red);}

/* ── CALENDAR ── */
.calendar-wrapper{display:grid;grid-template-columns:minmax(260px,290px) minmax(0,1fr);gap:20px;align-items:start;}
.calendar-rail{display:flex;flex-direction:column;gap:14px;min-width:0;}
.calendar-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-month{font-family:'DM Serif Display',serif;font-size:16px;}
.cal-arrow{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:3px 8px;cursor:pointer;color:var(--text);font-size:12px;transition:background .1s;}
.cal-arrow:hover{background:var(--border);}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px 4px;grid-auto-rows:max-content;align-content:start;}
.cal-dow{text-align:center;font-size:8px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:2px 0 4px;font-weight:600;}
.cal-day{height:34px;min-height:34px;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:600;transition:all .15s;position:relative;gap:1px;border:1px solid transparent;}
.cal-day:hover:not(.empty){background:var(--surface2);border-color:var(--border);}
.cal-day.today{border-color:var(--accent)!important;color:var(--accent);}
.cal-day.selected{background:var(--accent-bg)!important;border-color:var(--accent)!important;color:var(--accent);}
.cal-day.has-log::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--green);position:absolute;bottom:2px;}
.log-sidebar{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;position:sticky;top:80px;max-width:100%;min-width:0;}
.log-sidebar-date{font-family:'DM Serif Display',serif;font-size:18px;margin-bottom:4px;}
.log-sidebar-sub{font-size:12px;color:var(--muted);margin-bottom:18px;}
.log-field-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.log-field-num{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;}
.log-field-num.n1{background:var(--pink);}
.log-field-num.n2{background:var(--purple);}
.log-field-num.n3{background:var(--teal);}
.log-field-group{margin-bottom:16px;}
.checklist-items{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;}
.checklist-item{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;background:var(--surface2);border-radius:6px;border:1px solid transparent;}
.checklist-item.done-item .check-text{text-decoration:line-through;color:var(--muted);}
.check-box{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:all .15s;background:var(--surface);}
.check-box.checked{background:var(--green);border-color:var(--green);}
.check-box.checked::after{content:'✓';font-size:10px;color:#0d1117;font-weight:700;}
.check-text{font-size:13px;flex:1;line-height:1.4;word-break:break-word;}
.checklist-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:1px 3px;opacity:.6;transition:opacity .1s;}
.checklist-del:hover{opacity:1;color:var(--red);}
.add-item-row{display:flex;gap:6px;margin-top:4px;}
.add-item-input{flex:1;padding:6px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:12px;}
.add-item-input:focus{outline:none;border-color:var(--accent);}
.add-item-btn{padding:6px 10px;background:var(--accent-bg);border:1px solid var(--accent);border-radius:6px;color:var(--accent);font-size:12px;cursor:pointer;font-weight:600;}
.cal-save-btn{width:100%;margin-top:10px;padding:10px;background:var(--green-bg);border:1px solid var(--green);border-radius:7px;color:var(--green);font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:opacity .15s;}
.cal-save-btn:hover{opacity:.8;}

/* ── BUTTONS ── */
.btn{padding:7px 14px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;transition:all .15s;font-weight:500;}
.btn:hover{background:var(--border);}
.account-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:16px;}
.account-settings-panel{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px;}
.account-settings-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.account-settings-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.account-settings-item:last-child{border-bottom:none;padding-bottom:0;}
.account-settings-item span{color:var(--muted);}
.account-settings-item strong{color:var(--text);font-weight:600;text-align:right;word-break:break-word;}
/* ── Profile Completion Gate ─────────────────────────────────────────────── */
/* Step dot indicators */
.gate-step-dot{width:9px;height:9px;border-radius:50%;background:var(--border);border:2px solid var(--border);transition:background .2s,border-color .2s;}
.gate-step-dot.active{background:var(--accent);border-color:var(--accent);}
.gate-step-dot.done{background:var(--green);border-color:var(--green);}
/* Step container */
.gate-step{animation:gateFadeIn .2s ease-out;}
@keyframes gateFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
/* Step labels */
.gate-step-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.gate-step-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.25;}
.gate-step-desc{font-size:13px;color:var(--muted);line-height:1.55;}
.account-settings-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.btn-primary{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);}
.btn-primary:hover{background:rgba(88,166,255,.2);}
.btn-danger{background:var(--red-bg);border-color:var(--red);color:var(--red);}
.btn-danger:hover{background:rgba(255,77,79,.2);}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:440px;max-width:90vw;transform:translateY(8px);transition:transform .2s;}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-title{font-family:'DM Serif Display',serif;font-size:20px;margin-bottom:4px;}
.modal-subtitle{color:var(--muted);font-size:13px;margin-bottom:20px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap;}
.modal-mobile-safe .form-input,
.modal-mobile-safe textarea.form-input{font-size:16px;}
.modal-actions-sticky{position:sticky;bottom:0;background:linear-gradient(180deg, rgba(13,17,23,0) 0%, var(--surface) 24%);padding-top:14px;z-index:2;}
.bug-admin-card{padding:12px;margin-bottom:10px;background:var(--surface2);border-radius:8px;border-left:3px solid var(--amber);}
.bug-admin-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.bug-admin-text{font-size:13px;line-height:1.6;color:var(--text);white-space:pre-wrap;margin-bottom:8px;word-break:break-word;}
.bug-admin-editarea{margin-bottom:8px;}
.bug-admin-actions{display:flex;gap:6px;flex-wrap:wrap;}
.proc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* ── MCQ CARD ── */
.mcq-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px 24px;margin-top:24px;}
#dashboardMCQMount .mcq-card{margin-top:0;border:none;background:transparent;padding:0;border-radius:0;}
.mcq-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.mcq-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px;}
.mcq-label-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
.mcq-refresh{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:2px 6px;border-radius:5px;transition:all .15s;line-height:1;}
.mcq-refresh:hover{background:var(--surface2);color:var(--accent);}
.mcq-refresh.spinning{animation:spin .7s linear infinite;}
.mcq-stem{font-size:14.5px;font-weight:500;line-height:1.55;margin-bottom:16px;color:var(--text);}
.mcq-topic-tag{display:inline-block;font-size:10px;background:var(--accent-bg);border:1px solid var(--accent);color:var(--accent);border-radius:12px;padding:2px 9px;margin-bottom:10px;font-weight:500;}
.mcq-options{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.mcq-option{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;transition:all .15s;font-size:13.5px;line-height:1.4;}
.mcq-option:hover:not(.disabled){border-color:var(--accent);background:var(--accent-bg);}
.mcq-option.selected-correct{border-color:var(--green);background:var(--green-bg);color:var(--green);}
.mcq-option.selected-wrong{border-color:var(--red);background:var(--red-bg);color:var(--red);}
.mcq-option.reveal-correct{border-color:var(--green);background:var(--green-bg);}
.mcq-option.disabled{cursor:default;}
.mcq-opt-letter{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px;font-family:'JetBrains Mono',monospace;}
.mcq-option.selected-correct .mcq-opt-letter{border-color:var(--green);background:var(--green);color:#0d1117;}
.mcq-option.selected-wrong .mcq-opt-letter{border-color:var(--red);background:var(--red);color:#0d1117;}
.mcq-option.reveal-correct .mcq-opt-letter{border-color:var(--green);background:var(--green);color:#0d1117;}
.mcq-explanation{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.6;color:var(--muted);display:none;margin-top:4px;}
.mcq-explanation strong{color:var(--text);}
.mcq-explanation.visible{display:block;}
.mcq-loading{text-align:center;padding:32px;color:var(--muted);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:10px;}

/* ── QUESTION BANK ── */
.qbank-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px 20px;margin-bottom:8px;transition:border-color .15s;}
.qbank-pp-btn{padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:12px;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:all .15s;}
.qbank-pp-btn:hover{border-color:var(--accent);color:var(--accent);}
.qbank-pp-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:600;}
.qbank-pg-btn{padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:12px;cursor:pointer;transition:all .15s;}
.qbank-pg-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.qbank-pg-btn:disabled{opacity:.4;cursor:not-allowed;}
.qbank-card:hover{border-color:#484f58;}
.qbank-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.qbank-topic{font-size:10px;background:var(--accent-bg);border:1px solid var(--accent);color:var(--accent);border-radius:12px;padding:2px 10px;font-weight:500;}
.qbank-date{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-left:auto;}
.qbank-stem{font-size:13.5px;font-weight:500;line-height:1.55;margin-bottom:12px;color:var(--text);}
.qbank-options{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
.qbank-option{display:flex;align-items:flex-start;gap:8px;padding:7px 12px;border-radius:7px;border:1px solid var(--border);background:var(--surface2);font-size:13px;line-height:1.4;}
.qbank-option.correct-opt{border-color:var(--green);background:var(--green-bg);color:var(--green);}
.qbank-opt-letter{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;font-family:'JetBrains Mono',monospace;}
.qbank-option.correct-opt .qbank-opt-letter{border-color:var(--green);background:var(--green);color:#0d1117;}
.qbank-explanation{background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:10px 12px;font-size:12.5px;line-height:1.6;color:var(--muted);}
.qbank-explanation strong{color:var(--text);}
.qbank-option.selected-wrong{border-color:var(--red);background:var(--red-bg);color:var(--red);}
.qbank-option.selected-wrong .qbank-opt-letter{border-color:var(--red);background:var(--red);color:#0d1117;}

/* ── QBANK SOURCES ── */
.qbank-sources{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
.qbank-sources-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:7px;}
.qbank-sources-label-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.qbank-source-item{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:7px;position:relative;}
.qbank-source-item.own-source{border-color:rgba(88,166,255,.3);}
.qbank-source-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.qbank-source-author{font-size:10px;font-weight:700;color:var(--accent);font-family:'JetBrains Mono',monospace;}
.qbank-source-date{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.qbank-source-type{font-size:9px;text-transform:uppercase;letter-spacing:.6px;padding:1px 6px;border-radius:8px;font-weight:600;}
.qbank-source-type.text-type{background:var(--accent-bg);color:var(--accent);border:1px solid rgba(88,166,255,.3);}
.qbank-source-type.file-type{background:rgba(245,158,11,.12);color:var(--amber);border:1px solid rgba(245,158,11,.3);}
.qbank-source-actions{display:flex;gap:5px;margin-left:auto;}
.qbank-source-action-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:11px;cursor:pointer;padding:2px 7px;font-weight:600;transition:all .15s;}
.qbank-source-action-btn.edit-btn{color:var(--muted);}
.qbank-source-action-btn.edit-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.qbank-source-action-btn.del-btn{color:var(--muted);}
.qbank-source-action-btn.del-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}
.qbank-source-body{font-size:13px;line-height:1.6;color:var(--text);word-break:break-word;}
.qbank-source-file-link{display:inline-flex;align-items:center;gap:6px;color:var(--amber);font-size:12.5px;font-weight:500;text-decoration:none;border:1px solid rgba(245,158,11,.3);border-radius:6px;padding:4px 10px;background:rgba(245,158,11,.08);transition:opacity .15s;}
.qbank-source-file-link:hover{opacity:.8;}
.qbank-source-edit-box{width:100%;padding:7px 10px;background:var(--surface);border:1px solid var(--accent);border-radius:6px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;min-height:56px;margin-top:6px;}
.qbank-source-edit-box:focus{outline:none;}
.qbank-source-edit-actions{display:flex;gap:6px;margin-top:6px;}
.qbank-add-source{margin-top:10px;}
.qbank-add-source-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;}
.qbank-add-source-textarea{flex:1;min-width:200px;padding:8px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;min-height:52px;transition:border-color .15s;}
.qbank-add-source-textarea:focus{outline:none;border-color:var(--accent);}
.qbank-add-source-textarea::placeholder{color:var(--muted);}
.qbank-add-file-label{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--muted);font-size:12px;cursor:pointer;white-space:nowrap;transition:all .15s;height:38px;}
.qbank-add-file-label:hover{border-color:var(--amber);color:var(--amber);}
.qbank-add-file-label.has-file{border-color:var(--amber);color:var(--amber);background:rgba(245,158,11,.08);}
.qbank-add-source-btn{padding:8px 16px;border-radius:7px;border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;height:38px;transition:opacity .15s;}
.qbank-add-source-btn:hover{opacity:.8;}
.qbank-file-hint{font-size:10px;color:var(--muted);margin-top:4px;}

/* ── SHARE BUTTON (calendar log items) ── */
.share-btn{background:none;border:1px solid transparent;border-radius:4px;color:var(--muted);cursor:pointer;font-size:10px;padding:2px 6px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;transition:all .15s;white-space:nowrap;}
.share-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.share-btn.shared{color:var(--green);border-color:var(--green);background:var(--green-bg);cursor:default;}

/* ── WARDWISDOM VIEW ── */
.ww-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:10px;transition:border-color .15s;}
.ww-card:hover{border-color:#484f58;}
.ww-card.ww-accent-0{border-left:4px solid var(--purple);background:linear-gradient(90deg,rgba(167,139,250,.03) 0%,var(--surface) 25%);}
.ww-card.ww-accent-1{border-left:4px solid var(--pink);background:linear-gradient(90deg,rgba(244,114,182,.03) 0%,var(--surface) 25%);}
.ww-card.ww-accent-2{border-left:4px solid var(--accent);background:linear-gradient(90deg,rgba(88,166,255,.03) 0%,var(--surface) 25%);}
.ww-card.ww-accent-3{border-left:4px solid var(--teal);background:linear-gradient(90deg,rgba(52,211,153,.03) 0%,var(--surface) 25%);}
.ww-card.ww-accent-4{border-left:4px solid var(--amber);background:linear-gradient(90deg,rgba(245,158,11,.03) 0%,var(--surface) 25%);}
.ww-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.ww-tag{font-size:10px;background:rgba(167,139,250,.12);border:1px solid var(--purple);color:var(--purple);border-radius:12px;padding:2px 10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;flex-shrink:0;}
.ww-author{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.ww-date{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.ww-text{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:14px;font-weight:500;}
.ww-text.ww-truncated{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ww-read-more{display:inline;font-size:12px;color:var(--purple);cursor:pointer;font-weight:600;margin-left:4px;}.ww-read-more:hover{text-decoration:underline;}
.ww-verdict{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.ww-verdict-btn{padding:6px 16px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
.ww-verdict-btn.true-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.ww-verdict-btn.false-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}
.ww-verdict-btn.voted-true{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.ww-verdict-btn.voted-false{border-color:var(--red);color:var(--red);background:var(--red-bg);}
.ww-vote-count{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.ww-comment-box{margin-top:10px;width:100%;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;min-height:58px;transition:border-color .15s;}
.ww-comment-box:focus{outline:none;border-color:var(--red);}
.ww-submit-comment{margin-top:6px;padding:5px 14px;border-radius:6px;border:1px solid var(--red);background:var(--red-bg);color:var(--red);font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.ww-submit-comment:hover{opacity:.8;}
.ww-comments-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.ww-comment-item{background:var(--surface2);border-radius:6px;padding:8px 12px;font-size:12.5px;color:var(--muted);line-height:1.5;border-left:2px solid var(--border);}
.ww-comment-item .ww-comment-author{font-size:10px;color:var(--purple);font-weight:600;margin-bottom:3px;}

/* ── LEARNLINK VIEW ── */
.ll-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:10px;transition:border-color .15s;}
.ll-card:hover{border-color:#484f58;}
.ll-card.ll-accent-0{border-left:4px solid var(--teal);background:linear-gradient(90deg,rgba(52,211,153,.03) 0%,var(--surface) 25%);}
.ll-card.ll-accent-1{border-left:4px solid var(--accent);background:linear-gradient(90deg,rgba(88,166,255,.03) 0%,var(--surface) 25%);}
.ll-card.ll-accent-2{border-left:4px solid var(--amber);background:linear-gradient(90deg,rgba(245,158,11,.03) 0%,var(--surface) 25%);}
.ll-card.ll-accent-3{border-left:4px solid var(--pink);background:linear-gradient(90deg,rgba(244,114,182,.03) 0%,var(--surface) 25%);}
.ll-card.ll-accent-4{border-left:4px solid var(--purple);background:linear-gradient(90deg,rgba(167,139,250,.03) 0%,var(--surface) 25%);}
.ll-card-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.ll-tag{font-size:10px;background:rgba(88,166,255,.10);border:1px solid var(--accent);color:var(--accent);border-radius:12px;padding:2px 10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;flex-shrink:0;}
.ll-author{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.ll-date{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-left:auto;}
.ll-text{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:12px;font-weight:500;}
.ll-text.ll-truncated{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ll-read-more{display:inline;font-size:12px;color:var(--teal);cursor:pointer;font-weight:600;margin-left:4px;}.ll-read-more:hover{text-decoration:underline;}
.ll-source-btn{padding:5px 14px;border-radius:6px;border:1px solid var(--accent);background:rgba(88,166,255,.08);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
.ll-source-btn:hover{background:rgba(88,166,255,.18);}
.ll-source-area{margin-top:10px;}
.ll-source-input{width:100%;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;min-height:58px;transition:border-color .15s;}
.ll-source-input:focus{outline:none;border-color:var(--accent);}
.ll-source-submit{margin-top:6px;padding:5px 14px;border-radius:6px;border:1px solid var(--accent);background:rgba(88,166,255,.10);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.ll-source-submit:hover{opacity:.8;}
.ll-sources-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.ll-source-item{background:var(--surface2);border-radius:6px;padding:8px 12px;font-size:12.5px;color:var(--muted);line-height:1.5;border-left:2px solid var(--accent);}
.ww-comment-file-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;}
.ww-comment-file-label{display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.ww-comment-file-label:hover{border-color:var(--accent);color:var(--accent);}
.ww-comment-file-label.has-file{border-color:var(--amber);color:var(--amber);background:rgba(245,158,11,.08);}
.ww-file-hint{font-size:10px;color:var(--muted);margin-top:3px;}
.ww-comment-attached-file{display:inline-flex;align-items:center;gap:5px;color:var(--amber);font-size:12px;font-weight:500;text-decoration:none;border:1px solid rgba(245,158,11,.3);border-radius:5px;padding:3px 8px;background:rgba(245,158,11,.08);}
.ll-source-file-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;}
.ll-source-file-label{display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.ll-source-file-label:hover{border-color:var(--accent);color:var(--accent);}
.ll-source-file-label.has-file{border-color:var(--accent);color:var(--accent);background:rgba(88,166,255,.08);}
.ww-own-comment{border-left:2px solid var(--accent);}
.ww-del-comment-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:10px;cursor:pointer;padding:1px 6px;color:var(--muted);margin-left:auto;transition:all .15s;}
.ww-del-comment-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}
.ll-del-source-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:10px;cursor:pointer;padding:1px 6px;color:var(--muted);margin-left:auto;transition:all .15s;}
.ll-del-source-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}

/* ── INLINE EDIT UI ── */
.checklist-edit-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:10px;cursor:pointer;padding:1px 6px;color:var(--muted);transition:all .15s;white-space:nowrap;}
.checklist-edit-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
/* Copy button on learning log items — inherits checklist-edit-btn base, adds copied flash state */
.ln-copy-btn{font-size:11px !important;}
.ln-copy-btn.copied{color:var(--green) !important;border-color:var(--green) !important;background:var(--green-bg) !important;}
.inline-edit-wrap{flex:1;display:flex;flex-direction:column;gap:4px;}
.inline-edit-input{width:100%;padding:6px 10px;background:var(--surface);border:1px solid var(--accent);border-radius:6px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;min-height:36px;line-height:1.4;}
.inline-edit-input:focus{outline:none;border-color:var(--accent);}
.inline-edit-actions{display:flex;gap:6px;}
.inline-edit-save{padding:3px 12px;border-radius:5px;border:1px solid var(--green);background:var(--green-bg);color:var(--green);font-size:11px;font-weight:600;cursor:pointer;}
.inline-edit-save:hover{opacity:.85;}
.inline-edit-cancel{padding:3px 12px;border-radius:5px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;}
.inline-edit-cancel:hover{border-color:var(--red);color:var(--red);}
.ww-edit-btn,.ll-edit-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:10px;cursor:pointer;padding:1px 8px;color:var(--muted);transition:all .15s;white-space:nowrap;}
.ww-edit-btn:hover{border-color:var(--purple);color:var(--purple);background:rgba(167,139,250,.08);}
.ll-edit-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(88,166,255,.08);}
.community-edit-textarea{width:100%;padding:8px 12px;background:var(--surface2);border:1px solid var(--accent);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;resize:vertical;min-height:60px;line-height:1.6;}
.community-edit-textarea:focus{outline:none;border-color:var(--accent);}
.community-edit-actions{display:flex;gap:8px;margin-top:8px;}
.comment-edit-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:10px;cursor:pointer;padding:1px 6px;color:var(--muted);transition:all .15s;}
.comment-edit-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 18px;font-size:13px;font-weight:500;transform:translateY(80px);opacity:0;transition:all .25s;z-index:300;max-width:300px;pointer-events:none;}
.toast.show{transform:translateY(0);opacity:1;pointer-events:auto;}
.toast.success{border-color:var(--green);color:var(--green);}
.toast.error{border-color:var(--red);color:var(--red);}

.empty{text-align:center;padding:48px;color:var(--muted);}
.empty-icon{font-size:40px;margin-bottom:12px;}

/* ── MOBILE BOTTOM NAV ── */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--surface);border-top:1px solid var(--border);padding:6px 0 env(safe-area-inset-bottom,6px);}
.mobile-nav-inner{display:flex;justify-content:space-around;align-items:flex-end;}
.mobile-nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:10px;cursor:pointer;min-width:52px;border:none;background:none;color:var(--muted);font-family:'DM Sans',sans-serif;transition:color .15s;}
.mobile-nav-btn.active{color:var(--accent);}
.mobile-nav-icon{font-size:20px;line-height:1;}
.mobile-nav-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}

/* ── MOBILE SIDEBAR DRAWER ── */
.mobile-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:180;backdrop-filter:blur(2px);}
.mobile-drawer-overlay.open{display:flex;}
.mobile-drawer{width:280px;background:var(--surface);height:100%;overflow-y:auto;padding:20px 0 40px;transform:translateX(-100%);transition:transform .25s ease;}
.mobile-drawer-overlay.open .mobile-drawer{transform:translateX(0);}
.mobile-drawer-close{position:absolute;top:14px;right:14px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:16px;}
/* Procedures category filter — mobile only (the sidebar filter is hidden on
   phones and the hamburger now opens Explore, so this button re-opens the
   drawer whose Categories section filters the list). Scoped to the Procedures
   view by living inside #proceduresView, which is display:none off-view. */
.proc-cat-filter-btn{display:none;}
@media(max-width:768px){
  .proc-cat-filter-btn{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;padding:9px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1;}
  .proc-cat-filter-btn:active{transform:scale(.97);}
}

/* ── RESPONSIVE BREAKPOINTS ── */
@media(max-width:768px){

  /* Layout */
  .layout{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .main{padding:14px 14px 80px;}

  /* Header — mobile two-row layout.
     A 390px phone cannot fit logo + 6 primary tabs + controls in one 52px
     row (the tabs collapse to a ~0–64px unusable sliver). Instead:
       Row 1 — logo (left) + controls: bell / dept chip / hamburger (right)
       Row 2 — the primary-nav tab strip, full viewport width, horizontally
               scrollable so every tab is reachable.
     This is a deliberate wrap (the earlier accidental 900px wrap is now
     tablet-scoped) — the tab row is full-width, not a right-pinned sliver. */
  header{
    padding:6px 14px 0;
    height:auto;
    flex-wrap:wrap;
    align-items:center;
    row-gap:0;
    column-gap:8px;
  }
  /* #topbar id out-specifies the ≤900px `.logo{flex:1 1 220px}` rule, which
     otherwise grows the logo to full width and shoves controls onto a third
     row. Natural width keeps logo + controls together on row 1. */
  #topbar .logo{flex:0 1 auto;min-width:0;height:40px;}
  .header-right.topbar-controls{flex:0 0 auto;margin-left:auto;height:40px;}
  /* Primary tab bar row DELETED 2026-07-19 with the tab bar. */
  .logo-sub{display:none;}
  .logo-credit{font-size:9px;}
  .logo-text{font-size:15px;}
  .logo-mark{width:28px;height:28px;font-size:13px;}
  /* Account chip stays on mobile — it is the ONLY entry point to #userMenu,
     which holds Account Settings, Sign Out, Toggle Theme, Suspend Session and
     the admin "View as role"/"View department" switchers. Hiding it stranded
     all of those on phones. The dropdown becomes a scrollable, touch-sized
     panel below. */
  .user-chip{display:flex!important;padding:5px 9px;gap:4px;}
  .user-chip strong{display:none!important;}
  #userMenu{
    min-width:min(288px, calc(100vw - 20px))!important;
    max-width:calc(100vw - 16px);
    max-height:calc(100dvh - 116px)!important;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding-bottom:max(6px, env(safe-area-inset-bottom, 0px));
  }
  #userMenu .user-menu-item{padding:12px 14px;font-size:14px;}
  #userMenu select{font-size:13px!important;padding:8px 10px!important;}
  .sync-indicator span{display:none;}
  .header-right .btn:not(#mobileMenuBtn){display:none;}
  .header-right{gap:6px;}
  /* Hide non-btn header elements.
     v3.5.6: the old rule hid #pipTriggerBtn (the legacy Float-Log ghost
     chip). In the v3.5.0 redesign #pipTriggerBtn IS the primary Quick Log
     CTA and MUST stay visible on mobile. #adminDashboardPreviewWrap is
     already hidden via the user-menu dropdown which is itself hidden on
     mobile, so the extra override is redundant. */
  #themeBtn{display:none!important;}

  /* Defensive: the new v3.5.x topbar elements must stay interactive on
     mobile even if some legacy rule scopes `.header-right .btn...` at
     them. None of these carry the .btn class, so this is belt-and-
     suspenders, but it keeps the CTAs functional. */
  .topbar-quick-log,
  .topbar-bell,
  .topbar-controls { pointer-events: auto !important; }
  #pipTriggerBtn   { display: flex !important; }
  #notifBell       { display: inline-flex !important; }

  /* Mobile menu button */
  #mobileMenuBtn{display:flex!important;}

  /* Mobile nav */
  .mobile-nav{display:block;}

  /* Page header */
  .page-header{flex-direction:column;gap:10px;margin-bottom:14px;}
  .page-header > div:last-child{align-items:flex-start;width:100%;}

  /* Tabs → horizontal scroll, no wrap */
  .tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:0;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{white-space:nowrap;padding:6px 12px;font-size:12px;}

  /* Search bar */
  .search-bar{width:100%!important;box-sizing:border-box;}
  #searchBarInline{width:100%!important;}

  /* Stats row */
  .stats-row{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
  .stat-card{padding:10px 10px;}
  .stat-card-val{font-size:20px;}
  .stat-card-label{font-size:10px;}

  /* Procedure cards — stack into mobile card */
  .category-header-row{display:none;}
  .proc-card{
    grid-template-columns:1fr;
    gap:0;
    padding:12px 14px;
    position:relative;
  }
  .proc-card .proc-name{font-size:14px;padding-right:40px;margin-bottom:4px;}

  /* Count controls float top-right */
  .count-control{
    position:absolute;
    top:12px;right:14px;
    flex-direction:column;
    align-items:center;
    gap:2px;
  }
  .count-btn{width:26px;height:26px;}
  .count-val{font-size:14px;min-width:auto;}

  /* Traffic light row */
  .traffic-light{margin-bottom:4px;}

  /* Progress bar full width */
  .proc-progress{width:100%;}
  .progress-bar{height:6px;}

  /* Log button - full width on mobile */
  .log-btn{width:100%;height:34px;border-radius:6px;margin-top:8px;font-size:13px;}
  .log-btn::after{content:' Log entry';}

  /* Inline target */
  .inline-target{font-size:10px;}

  /* Category toggle */
  .category-toggle{padding:10px 12px;}
  .cat-name{font-size:11px;}

  /* Calendar */
  .calendar-wrapper{grid-template-columns:1fr;gap:14px;}
  .calendar-rail{gap:12px;}
  .calendar-card{padding:14px;}
  .cal-day{height:38px;min-height:38px;font-size:12px;}
  .log-sidebar{position:static;top:auto;}

  /* Modal */
  .modal-overlay{align-items:flex-end;}
  .modal{
    width:100%!important;
    max-width:100%!important;
    border-radius:16px 16px 0 0;
    padding:20px 18px 32px;
    transform:translateY(30px);
    max-height:90vh;
    overflow-y:auto;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
  }
  .modal-overlay.open .modal{transform:translateY(0);}
  .modal-actions{
    justify-content:stretch;
    gap:10px;
    padding-bottom:max(4px, env(safe-area-inset-bottom, 0px));
  }
  .modal-actions .btn,
  .modal-actions .btn-primary,
  .modal-actions .btn-danger,
  .modal-actions .btn-full{
    flex:1 1 140px;
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
  }
  .pw-toggle{
    min-width:44px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .proc-grid{grid-template-columns:1fr;}

  /* MCQ card */
  .mcq-card{padding:16px;margin-top:16px;}
  .mcq-stem{font-size:13.5px;}

  /* History */
  .history-item{flex-wrap:wrap;gap:6px;}

  /* Toast */
  .toast{bottom:80px;left:14px;right:14px;max-width:none;text-align:center;}

  /* QBank filter row */
  #qbankView > div:first-child{flex-direction:column;align-items:stretch;}
  #qbankView > div:first-child > div:last-child{flex-direction:column;}

  /* WW / LL search row */
  #wwView > div:first-child,
  #wardwisdomView > div:first-child,
  #learnlinkView > div:first-child{flex-direction:column;align-items:stretch;}

  /* Sidebar drawer styles */
  .mobile-drawer-overlay{position:fixed;}

  /* Page title */
  .page-title{font-size:20px;}

  /* Auth card */
  .auth-card{padding:24px 18px;}

  /* ── Log PGY row — stack on mobile ── */
  .log-pgy-row{grid-template-columns:1fr;}

  /* ── OSATS record grid — stack on mobile (override 480px rule) ── */
  .osats-record-grid{grid-template-columns:1fr;}

  /* ── OSATS abbr key grid — 2-col on mobile ── */
  .abbr-key-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  /* ── OSATS KPI line — relax fixed columns ── */
  .kpi-line{grid-template-columns:26px minmax(36px,44px) 1fr 18px!important;}

  /* ── OSATS ol-grid (outcome level) — 3-col on mobile ── */
  #ol-grid{grid-template-columns:repeat(3,1fr)!important;}

  /* ── OSATS score buttons — slightly smaller ── */
  .osats-score-btn{width:28px;height:28px;font-size:11px;}

  /* ── ISASF score select — full width ── */
  .isasf-score-sel{min-width:0;width:100%;}

  /* ── Roles table — horizontal scroll ── */
  .roles-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .roles-table{min-width:520px;}

  /* ── Dashboard inline grids (rendered via JS) ── */
  /* Insights 2-col stat grid → single col */
  .insights-stat-grid{grid-template-columns:1fr!important;}
  /* Insights 4-col KPI grid → 2-col */
  .insights-kpi-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* ── Dissertation session row ── */
  .diss-session-row{gap:8px;}
  .diss-session-num{width:22px;height:22px;font-size:10px;}
}

@media(max-width:400px){
  .stats-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;}
  .stats-row .stat-card:last-child{grid-column:1/-1;}
  .tab{font-size:11px;padding:5px 10px;}
}

/* ═══════════════════════════════════════════════
   NEW FEATURES — v5 ENHANCEMENTS
   ═══════════════════════════════════════════════ */

/* ── FLOATING ACTION BUTTON ── */
/* ── MOTIVATION BAR ── */
/* motivation chips — compact inline next to page title */
.motiv-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;background:var(--surface2);border:1px solid var(--border);color:var(--text);white-space:nowrap;}
.streak-chip{border-color:var(--amber);color:var(--amber);background:var(--amber-bg);}
.goal-chip{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.goal-chip.goal-done{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.srs-chip{border-color:var(--purple);color:var(--purple);background:rgba(167,139,250,.1);}

/* ── RECENT PROCEDURES ── */
.recent-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-weight:600;margin-bottom:6px;}
.recent-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.recent-chip{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:12px;font-weight:500;color:var(--text);transition:all .15s;font-family:'DM Sans',sans-serif;}
.recent-chip:hover{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);}
.recent-chip-count{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--surface2);border-radius:10px;padding:1px 6px;color:var(--muted);}

/* ── BATCH LOG ── */
.batch-row{display:flex;gap:8px;align-items:center;}

/* ── INSIGHT CARDS ── */
.insight-card{background:var(--surface);border:0.5px solid var(--border);border-radius:10px;padding:16px 18px;}
.insight-card-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.9px;margin-bottom:8px;font-weight:600;}
.insight-card-val{font-family:'DM Serif Display',serif;font-size:28px;}
.dashboard-split-shell{display:grid;grid-template-columns:1fr;gap:14px;align-items:start;}
@media(min-width:960px){.dashboard-split-shell{grid-template-columns:1fr 228px;}}
.dashboard-split-main,.dashboard-split-rail{min-width:0;}
.dashboard-side-actions{display:flex;flex-direction:column;gap:6px;}
.dashboard-split-rail{display:block;}
.dashboard-side-rail{position:sticky;top:68px;background:var(--surface);border:0.5px solid var(--border);border-radius:10px;}
.dashboard-side-rail .btn{width:100%;justify-content:flex-start;padding-left:12px;font-size:12px;}
.dashboard-side-rail .insight-card-label{letter-spacing:.9px;}
/* ── ROLE DESK TABS ── */
.role-desk-tabs{display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.role-desk-tabs::-webkit-scrollbar{display:none;}
.role-desk-tab{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px 6px 0 0;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);border:1px solid transparent;border-bottom:none;margin-bottom:-1px;transition:all .12s;white-space:nowrap;user-select:none;}
.role-desk-tab:hover{color:var(--text);background:var(--surface2);}
.role-desk-tab.active{color:var(--accent);background:var(--surface);border-color:var(--border);border-bottom-color:var(--surface);}
.role-desk-tab .rtab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.role-desk-tab .rtab-badge{font-size:10px;font-weight:600;padding:1px 6px;border-radius:99px;border:1px solid;}
.role-desk-panel{display:none;}
.role-desk-panel.active{display:block;}
/* ── STAT PILL (semantic status badge inside stat cards) ── */
.stat-pill{font-size:11px;font-weight:500;padding:2px 8px;border-radius:99px;border:0.5px solid;display:inline-block;margin-top:6px;line-height:1.4;}
.stat-pill-action{color:var(--status-action-text);background:var(--status-action-bg);border-color:var(--status-action-bd);}
.stat-pill-alert{color:var(--status-alert-text);background:var(--status-alert-bg);border-color:var(--status-alert-bd);}
.stat-pill-clear{color:var(--status-clear-text);background:var(--status-clear-bg);border-color:var(--status-clear-bd);}
.stat-pill-neutral{color:var(--status-neutral-text);background:var(--status-neutral-bg);border-color:var(--status-neutral-bd);}
/* ── MY DESK UNIFIED SUMMARY ── */
.mydesk-role-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:0.5px solid var(--border);}
.mydesk-role-row:last-child{border-bottom:none;padding-bottom:0;}
.mydesk-role-label{font-size:12px;font-weight:500;color:var(--text);width:148px;flex-shrink:0;line-height:1.3;}
.mydesk-role-sub{font-size:10px;color:var(--muted);display:block;font-weight:400;margin-top:1px;}
.mydesk-stat-block{flex:1;display:flex;align-items:center;gap:8px;min-width:0;}
.mydesk-num{font-family:'DM Serif Display',serif;font-size:22px;font-weight:400;width:32px;text-align:right;flex-shrink:0;}
.mydesk-desc{font-size:12px;color:var(--muted);flex:1;}
.mydesk-cta{font-size:11px;font-weight:500;padding:3px 10px;border-radius:99px;border:0.5px solid;cursor:pointer;white-space:nowrap;background:none;font-family:'DM Sans',sans-serif;transition:opacity .12s;}
.mydesk-cta:hover{opacity:.75;}
.mydesk-cta-action{color:var(--status-action-text);border-color:var(--status-action-bd);background:var(--status-action-bg);}
.mydesk-cta-clear{color:var(--status-clear-text);border-color:var(--status-clear-bd);background:var(--status-clear-bg);}
.mydesk-cta-neutral{color:var(--status-neutral-text);border-color:var(--status-neutral-bd);background:var(--status-neutral-bg);}
.mydesk-teaching-row{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 10px;background:var(--surface2);border-radius:7px;font-size:12px;color:var(--muted);}
.mydesk-teaching-val{font-family:'DM Serif Display',serif;font-size:18px;color:var(--text);margin-left:auto;margin-right:4px;}
.faculty-sidebar-summary{margin:0 0 8px;}

.pd-residents-shell{padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:520px;max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px);}
.pd-residents-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;border-bottom:1px solid var(--border);flex-shrink:0;}
.pd-residents-subtabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 18px;flex-shrink:0;overflow-x:auto;}
.pd-residents-subtab{border:none;background:none;color:var(--muted);border-radius:0;padding:8px 14px;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .12s;}
.pd-residents-subtab:hover{color:var(--text);}
.pd-residents-subtab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}
.pd-residents-workspace{display:flex;flex:1;min-height:0;overflow:hidden;min-height:400px;}

/* Left resident list column */
.pd-res-list-col{width:300px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface);}
.pd-res-list-header{padding:10px 10px 8px;border-bottom:1px solid var(--border);flex-shrink:0;}
.pd-res-search-input{width:100%;font-size:12px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--text);outline:none;box-sizing:border-box;margin-bottom:8px;}
.pd-res-pgy-chips{display:flex;gap:4px;flex-wrap:wrap;}
.pd-res-pgy-chip{font-size:10px;padding:2px 8px;border-radius:99px;border:1px solid var(--border);cursor:pointer;background:var(--surface);color:var(--muted);transition:all .1s;}
.pd-res-pgy-chip:hover{border-color:var(--border-strong);}
.pd-res-pgy-chip.active{background:var(--accent-bg);color:var(--accent);border-color:rgba(180,83,9,.3);font-weight:600;}
.pd-res-list-scroll{flex:1;overflow-y:auto;padding:4px;min-height:0;}
.pd-res-list-row{display:flex;align-items:flex-start;gap:8px;padding:8px 8px;border-radius:6px;cursor:pointer;margin-bottom:2px;border:1px solid transparent;transition:all .1s;flex-wrap:wrap;}
.pd-res-list-row:hover{background:var(--surface2);}
.pd-res-list-row.selected{background:var(--accent-bg);border-color:rgba(180,83,9,.25);}
.pd-res-list-avatar{width:30px;height:30px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--accent);flex-shrink:0;margin-top:1px;}
.pd-res-list-row.selected .pd-res-list-avatar{background:var(--accent-bg);}
.pd-res-list-status{font-size:9px;padding:1px 5px;border-radius:99px;font-weight:600;border:1px solid transparent;flex-shrink:0;}
.pd-res-list-status.active{background:rgba(16,185,129,.12);color:var(--green);border-color:rgba(16,185,129,.24);}
.pd-res-list-status.pending{background:rgba(245,158,11,.12);color:var(--amber);border-color:rgba(245,158,11,.24);}
.pd-res-list-status.final-yr{background:rgba(139,92,246,.1);color:#6D28D9;border-color:rgba(139,92,246,.22);}
.pd-res-list-info{flex:1;min-width:0;overflow:hidden;}
.pd-res-list-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.pd-res-list-sub{font-size:10px;color:var(--muted);margin-top:2px;}
.pd-res-list-badges{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px;}
.pd-res-list-meta{display:flex;align-items:center;gap:4px;margin-top:4px;flex-wrap:wrap;}
.pd-res-list-actions{display:flex;gap:3px;align-items:center;}

/* Main content area (right of list) */
.pd-res-main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0;}
.pd-res-tab-content{flex:1;overflow-y:auto;padding:14px 16px;min-height:0;}

/* Register tab: inner subtabs on detail panel */
.pd-res-detail-card{display:flex;flex-direction:column;height:100%;overflow:hidden;}
.pd-res-detail-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.pd-res-detail-avatar{width:36px;height:36px;font-size:13px;border-radius:50%;background:var(--accent-bg);border:1px solid rgba(180,83,9,.2);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:700;flex-shrink:0;}
.pd-res-detail-name{font-size:13px;font-weight:700;color:var(--text);}
.pd-res-detail-email{font-size:10px;color:var(--muted);margin-top:1px;word-break:break-word;}
.pd-res-detail-tabs{display:flex;gap:0;padding:0 14px;border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto;}
.pd-res-detail-tab{border:none;background:none;color:var(--muted);border-radius:0;padding:6px 10px;font-size:11px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .1s;}
.pd-res-detail-tab:hover{color:var(--text);}
.pd-res-detail-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}
.pd-res-detail-body{flex:1;overflow-y:auto;padding:12px 14px;}
.pd-res-detail-section-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin:10px 0 6px;}
.pd-res-detail-section-label:first-child{margin-top:0;}
.pd-res-detail-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:4px 0;border-bottom:1px solid var(--border);font-size:11px;}
.pd-res-detail-row:last-child{border-bottom:none;}
.pd-res-detail-row span{color:var(--muted);}
.pd-res-detail-row strong{color:var(--text);text-align:right;max-width:60%;font-weight:500;}
.pd-res-alert{margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(245,158,11,.12);border-left:3px solid var(--amber);font-size:11px;color:#92400e;line-height:1.5;}
.pd-res-detail-body .form-input{font-size:11px;padding:3px 7px;height:28px;border-radius:5px;}
.pd-res-detail-body select.form-input{cursor:pointer;}

/* Register subtab: resident rows */
.pd-res-card{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer;transition:all .1s;margin-bottom:5px;}
.pd-res-card:hover{border-color:rgba(180,83,9,.25);background:var(--surface2);}
.pd-res-card.selected{border-color:rgba(180,83,9,.4);background:rgba(180,83,9,.06);}
.pd-res-card-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.pd-res-avatar{width:32px;height:32px;font-size:12px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:700;flex-shrink:0;}
.pd-res-card-copy{flex:1;min-width:0;}
.pd-res-card-topline{display:flex;align-items:center;gap:8px;justify-content:space-between;}
.pd-res-name{font-size:13px;font-weight:600;color:var(--text);}
.pd-res-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.pd-res-email{display:none;}
.pd-res-badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px;}
.pd-res-status{font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600;border:1px solid transparent;flex-shrink:0;}
.pd-res-status.active{background:rgba(16,185,129,.12);color:var(--green);border-color:rgba(16,185,129,.24);}
.pd-res-status.pending{background:rgba(245,158,11,.12);color:var(--amber);border-color:rgba(245,158,11,.24);}
.pd-res-status.final-yr{background:rgba(139,92,246,.1);color:#6D28D9;border-color:rgba(139,92,246,.22);}
.pd-res-card-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}

/* Mini stat grid */
.pd-res-mini-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px;}
.pd-res-mini-stat{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);display:flex;flex-direction:column;gap:2px;}
.pd-res-mini-stat strong{font-size:16px;color:var(--text);}
.pd-res-mini-stat span{font-size:10px;color:var(--muted);}

/* Progress bar */
.pd-res-progress-line{display:grid;grid-template-columns:80px minmax(0,1fr) 36px;gap:8px;align-items:center;font-size:11px;padding:4px 0;}
.pd-res-progress-bar,.pd-res-progress-meter{height:5px;border-radius:99px;background:var(--surface2);overflow:hidden;border:none;}
.pd-res-progress-bar>div,.pd-res-progress-meter>div{height:100%;background:linear-gradient(90deg,var(--teal),var(--accent));}

/* Action buttons */
.pd-res-actions{display:flex;flex-direction:column;gap:5px;}
.pd-res-action-group-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin:8px 0 3px;}
.pd-res-action-group-label:first-child{margin-top:0;}
.pd-res-action-btn{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:11px;cursor:pointer;font-family:inherit;text-align:left;width:100%;transition:background .1s;}
.pd-res-action-btn:hover{background:var(--surface2);}
.pd-res-action-btn.danger{color:var(--red);border-color:rgba(185,28,28,.2);}
.pd-res-action-btn.primary{background:var(--accent-bg);color:var(--accent);border-color:rgba(180,83,9,.25);font-weight:600;}

/* Empty states */
.pd-res-detail-empty,.pd-res-empty,.pd-res-detail-empty-inline{padding:14px 16px;border:1px dashed var(--border);border-radius:8px;background:var(--surface2);font-size:12px;color:var(--muted);line-height:1.6;}

/* Progress cards grid */
.pd-res-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;}
.pd-res-feedback-grid,.pd-res-assessment-table,.pd-res-exam-table{display:grid;gap:6px;}
.pd-res-progress-card{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);text-align:left;cursor:pointer;transition:border-color .12s;}
.pd-res-progress-card:hover{border-color:rgba(180,83,9,.3);}
.pd-res-progress-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;}
.pd-res-progress-card-head span:first-child{font-weight:600;color:var(--text);}
.pd-res-progress-card-head span:last-child{font-size:10px;color:var(--muted);}
.pd-res-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);}
.pd-res-progress-meta strong{font-size:14px;color:var(--text);}

/* Assessment rows */
.pd-res-assessment-row{display:grid;grid-template-columns:minmax(140px,1.4fr) repeat(3,52px) auto;gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);}
.pd-res-exam-row{display:grid;grid-template-columns:minmax(140px,1.4fr) minmax(100px,1fr) 80px 62px auto;gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);}
.pd-res-assessment-row div,.pd-res-exam-row div{display:flex;flex-direction:column;gap:2px;}
.pd-res-assessment-row strong,.pd-res-exam-row strong{font-size:13px;color:var(--text);}
.pd-res-assessment-row span,.pd-res-exam-row span{font-size:10px;color:var(--muted);}
.pd-res-exam-header{display:grid;grid-template-columns:minmax(140px,1.4fr) minmax(100px,1fr) 80px 62px auto;gap:8px;padding:4px 12px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.pd-res-exam-badge{font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600;border:1px solid transparent;}
.pd-res-exam-badge.pass{background:rgba(16,185,129,.12);color:var(--green);border-color:rgba(16,185,129,.24);}
.pd-res-exam-badge.fail{background:rgba(239,68,68,.12);color:var(--red);border-color:rgba(239,68,68,.24);}
.pd-res-exam-badge.pending{background:rgba(245,158,11,.12);color:var(--amber);border-color:rgba(245,158,11,.24);}
.pd-res-exam-badge.done{background:rgba(20,184,166,.12);color:var(--teal);border-color:rgba(20,184,166,.24);}

/* Feedback cards */
.pd-res-feedback-card{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);}

/* Tab action bars */
.pd-res-tab-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.pd-res-tab-actions-title{font-size:13px;font-weight:600;color:var(--text);}

/* Role badges */
.pd-role-badge{font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600;}
.pd-role-badge.amber{background:rgba(245,158,11,.12);color:var(--amber);}
.pd-role-badge.accent{background:rgba(180,83,9,.12);color:var(--accent);}
.pd-role-badge.teal{background:rgba(20,184,166,.12);color:var(--teal);}


@media (max-width: 1180px){
  .pd-residents-workspace{flex-direction:column;}
  .pd-res-list-col{width:100%;height:220px;border-right:none;border-bottom:1px solid var(--border);}
  .pd-res-list-scroll{flex-direction:row;display:flex;flex-wrap:wrap;padding:4px;}
}

@media (max-width: 840px){
  .pd-res-list-col{height:180px;}
  .pd-res-mini-stat-grid{grid-template-columns:1fr 1fr;}
  .pd-res-assessment-row{grid-template-columns:1fr 1fr;}
  .pd-res-exam-row{grid-template-columns:1fr;}
}
.dashboard-role-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;border:0.5px solid var(--border);border-radius:10px;background:var(--surface);}
.dashboard-preview-chip{font-size:11px;padding:3px 10px;border-radius:999px;background:rgba(88,166,255,.12);border:1px solid rgba(88,166,255,.25);color:var(--accent);font-weight:600;}
.copy-field-host{position:relative;}
.copy-field-enabled{padding-right:42px;}
.copy-field-btn{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s ease;}
.copy-field-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}

/* ── BADGES ── */
.badge-item{display:flex;flex-direction:column;align-items:center;gap:3px;width:60px;padding:8px 4px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);opacity:.4;transition:all .2s;}
.badge-item.unlocked{opacity:1;border-color:var(--amber);background:var(--amber-bg);}
.badge-emoji{font-size:20px;}
.badge-label{font-size:8px;text-align:center;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;line-height:1.3;}
.badge-item.unlocked .badge-label{color:var(--text);}

/* ── HEATMAP ── */
.heatmap-wrap{display:flex;gap:6px;overflow-x:auto;padding:4px 0;margin-top:8px;}
.heatmap-days{display:flex;flex-direction:column;justify-content:space-between;font-size:9px;color:var(--muted);padding:2px 0;min-width:28px;}
.heatmap-grid{display:flex;gap:3px;}
.heatmap-col{display:flex;flex-direction:column;gap:3px;}
.heatmap-cell{width:12px;height:12px;border-radius:2px;background:var(--surface2);border:1px solid var(--border);}
.heatmap-cell.level-0{background:var(--surface2);}
.heatmap-cell.level-1{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.3);}
.heatmap-cell.level-2{background:rgba(34,197,94,.4);border-color:rgba(34,197,94,.5);}
.heatmap-cell.level-3{background:rgba(34,197,94,.6);border-color:rgba(34,197,94,.7);}
.heatmap-cell.level-4{background:var(--green);border-color:var(--green);}
.heatmap-cell.level-future{background:transparent;border-color:transparent;}
.heatmap-legend{display:flex;align-items:center;gap:4px;margin-top:8px;}

/* ── ONBOARDING ── */
.onboard-overlay{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;}
.onboard-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;max-width:420px;width:100%;text-align:center;}
.onboard-step{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
.onboard-title{font-family:'DM Serif Display',serif;font-size:20px;margin-bottom:8px;}
.onboard-text{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:24px;}
.onboard-actions{display:flex;gap:10px;justify-content:center;}

/* ── MOBILE RESPONSIVE ADDITIONS ── */
@media(max-width:768px){
  .motiv-chip{font-size:10px;padding:2px 7px;}
  .recent-chips{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
  .recent-chips::-webkit-scrollbar{display:none;}
  .recent-chip{flex-shrink:0;}
  .heatmap-cell{width:10px;height:10px;}
  .badge-item{width:52px;padding:6px 2px;}
  .badge-emoji{font-size:16px;}
  .insight-card-val{font-size:22px;}
  .dashboard-split-shell{grid-template-columns:1fr;}
  .dashboard-side-rail{position:static;margin-top:0;}
  .dashboard-side-rail .btn{justify-content:center;padding-left:12px;}
  .batch-row{flex-wrap:wrap;}
  .batch-row select{min-width:0;}
}

/* ═══════════════════════════════════════════════
   v6 FEATURES — Rotation, Exam, Competency, Social, Portfolio
   ═══════════════════════════════════════════════ */

/* ── ROTATION PICKER ── */
.rot-pick-item{padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;cursor:pointer;transition:all .15s;}
.rot-pick-item:hover{border-color:var(--accent);background:var(--accent-bg);}
.rot-pick-item.active{border-color:var(--green);background:var(--green-bg);}

/* ── ROTATION CURRENT CARD ── */
.rotation-current{border-left:4px solid var(--accent);background:linear-gradient(90deg,rgba(88,166,255,.03) 0%,var(--surface) 25%);}

/* ── TIMELINE BLOCKS ── */
.timeline-block{padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;min-width:100px;max-width:160px;transition:all .15s;}
.timeline-block:hover{border-color:var(--accent);}
.timeline-block.current{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 2px rgba(88,166,255,.2);}

/* ── TOPIC MASTERY GRID ── */
.mastery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin-top:8px;}
.mastery-cell{padding:10px 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);text-align:center;transition:all .15s;}
.mastery-cell.weak{border-color:rgba(255,77,79,.3);background:rgba(255,77,79,.05);}
.mastery-cell.weak:hover{background:rgba(255,77,79,.12);border-color:var(--red);}
.mastery-cell.moderate{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.05);}
.mastery-cell.strong{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.05);}
.mastery-cell.untested{border-style:dashed;opacity:.6;}
.mastery-cell.untested:hover{opacity:1;border-color:var(--accent);}
.mastery-cell-pct{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;}
.mastery-cell-topic{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* ── MOCK EXAM ── */
.mcq-option.selected-active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);}
.mcq-option.selected-active .mcq-opt-letter{border-color:var(--accent);background:var(--accent);color:#0d1117;}

/* ── CONFIDENCE DOTS ── */
.conf-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);cursor:pointer;transition:all .15s;}
.conf-dot:hover{border-color:var(--accent);transform:scale(1.2);}
.conf-dot.filled{border-color:transparent;}

/* ── STRUGGLES FEED ── */
.struggle-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:8px;transition:border-color .15s;}
.struggle-card:hover{border-color:#484f58;}
.struggle-vote{padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif;}
.struggle-vote:hover{border-color:var(--pink);color:var(--pink);background:rgba(244,114,182,.08);}
.struggle-vote.voted{border-color:var(--pink);color:var(--pink);background:rgba(244,114,182,.12);cursor:default;}

/* ── MOBILE RESPONSIVE v6 ── */
@media(max-width:768px){
  .mastery-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));}
  .mastery-cell{padding:8px 6px;}
  .mastery-cell-pct{font-size:12px;}
  .timeline-block{min-width:80px;max-width:120px;padding:6px 8px;}
  .conf-dot{width:12px;height:12px;}
  .rot-pick-item{padding:8px 10px;}
}

/* ── COLLAPSIBLE SIDEBAR LABELS ── */
.sidebar-label-toggle{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;transition:color .15s;}
.sidebar-label-toggle:hover{color:var(--text);}
.sb-chevron{font-size:10px;color:var(--muted);transition:transform .2s;}

/* ═══════════════════════════════════════════════
   v7 FEATURES — MAST, ACGME, Dissertation, Gibbs
   ═══════════════════════════════════════════════ */

/* ── MAST DOCUMENT ── */
.mast-doc{transition:border-color .15s;}
.mast-obj-row{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);}
.mast-obj-row input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;flex-shrink:0;margin-top:3px;}
.mast-obj-row label{cursor:pointer;}

/* ── DISSERTATION TIMELINE ── */
.diss-milestone{display:flex;gap:12px;cursor:pointer;padding:4px 0;transition:background .15s;border-radius:6px;}
.diss-milestone:hover{background:var(--surface2);}
.diss-milestone-marker{display:flex;flex-direction:column;align-items:center;width:20px;flex-shrink:0;padding-top:4px;}
.diss-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:var(--surface);transition:all .2s;flex-shrink:0;}
.diss-dot.completed{background:var(--green);border-color:var(--green);}
.diss-dot.current{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px rgba(88,166,255,.2);}
.diss-line{width:2px;flex:1;background:var(--border);margin:4px 0;min-height:16px;}
.diss-milestone.done .diss-line{background:var(--green);}
.diss-milestone-content{flex:1;padding-bottom:12px;}

/* ── GIBBS REFLECTIVE INPUT ── */
.gibbs-input{transition:border-color .15s;}
.gibbs-input:focus{border-left-width:3px;}

/* ── ACGME DOMAIN CARDS ── */
@media(max-width:768px){
  .diss-milestone{padding:2px 0;}
  .diss-dot{width:12px;height:12px;}
  .mast-obj-row label{font-size:12px;}
}

/* ═══════════════════════════════════════════════
   v8 — GROUPED TABS & MOBILE OPTIMIZATION
   ═══════════════════════════════════════════════ */

/* ── SUB-TABS (color-themed per group) ── */
/* Sub-tabs — single scrollable row. Never wrap to a second line: the
   design rule is "no three levels of tabs" (topbar tabs are level 1,
   sub-tabs are level 2), and a wrapped sub-tabs row visually reads as
   level 3. Horizontal overflow uses momentum scroll on touch devices. */
.sub-tabs{display:flex;gap:3px;background:var(--surface2);border:1px solid var(--border);padding:3px;border-radius:8px;max-width:100%;width:fit-content;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch;transition:border-color .2s;}
.sub-tabs::-webkit-scrollbar{height:5px;}
.sub-tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.sub-tab{padding:5px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);transition:all .15s;white-space:nowrap;letter-spacing:.2px;flex-shrink:0;}
.sub-tab:hover:not(.active){color:var(--text);background:rgba(255,255,255,.04);}
.sub-tab.active{color:#fff;}

/* Group colors — active sub-tab gets a colored pill */
.sub-tabs-pink{border-color:rgba(244,114,182,.25);}
.sub-tabs-pink .sub-tab.active{background:var(--pink);color:#0d1117;}
.sub-tabs-pink .sub-tab:not(.active){color:var(--pink);}

.sub-tabs-teal{border-color:rgba(52,211,153,.25);}
.sub-tabs-teal .sub-tab.active{background:var(--teal);color:#0d1117;}
.sub-tabs-teal .sub-tab:not(.active){color:var(--teal);}

.sub-tabs-purple{border-color:rgba(167,139,250,.25);}
.sub-tabs-purple .sub-tab.active{background:var(--purple);color:#0d1117;}
.sub-tabs-purple .sub-tab:not(.active){color:var(--purple);}

.sub-tabs-accent{border-color:rgba(88,166,255,.25);}
.sub-tabs-accent .sub-tab.active{background:var(--accent);color:#0d1117;}
.sub-tabs-accent .sub-tab:not(.active){color:var(--accent);}

/* Primary tabs — active tab gets group color underline */
.tabs-pink .tab.active{color:var(--pink);border-bottom:2px solid var(--pink);background:transparent;}
.tabs-teal .tab.active{color:var(--teal);border-bottom:2px solid var(--teal);background:transparent;}
.tabs-purple .tab.active{color:var(--purple);border-bottom:2px solid var(--purple);background:transparent;}
.tabs-accent .tab.active{color:var(--accent);border-bottom:2px solid var(--accent);background:transparent;}

/* Compact primary-tabs rules DELETED 2026-07-19 with the tab bar. */

@media(max-width:768px){

  /* Sub-tabs full width scroll */
  .sub-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;border-radius:6px;}
  .sub-tabs::-webkit-scrollbar{display:none;}
  .sub-tab{font-size:11px;padding:5px 12px;flex-shrink:0;}

  /* Search bar full width */
  #searchBarInline{width:100%!important;}
  
  /* Page header stack */
  .page-header{flex-direction:column;gap:8px;margin-bottom:12px;}
  .page-header > div:last-child{align-items:stretch;width:100%;}
}

/* ── PER-PROCEDURE HISTORY IN LOG MODAL ── */
.proc-history-row{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px;transition:background .1s;}
.proc-history-row:last-child{border-bottom:none;}
.proc-history-row:hover{background:var(--surface);}

/* ── LIGHT MODE TAB OVERRIDES ── */
[data-theme="light"] .sub-tab.active{color:#fff!important;}
[data-theme="light"] .sub-tab:hover:not(.active){background:rgba(0,0,0,.04);}
[data-theme="light"] .sub-tabs-pink .sub-tab:not(.active){color:var(--pink);}
[data-theme="light"] .sub-tabs-teal .sub-tab:not(.active){color:var(--teal);}
[data-theme="light"] .sub-tabs-purple .sub-tab:not(.active){color:var(--purple);}
[data-theme="light"] .sub-tabs-accent .sub-tab:not(.active){color:var(--accent);}

/* ── LOG HISTORY COLLAPSIBLE TOGGLE ── */
.log-history-toggle{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--border);cursor:pointer;user-select:none;transition:color .15s;}
.log-history-toggle:hover{color:var(--text);}


/* ─── OVERDUE LEARNING NEEDS PANEL ─── */
.overdue-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.overdue-icon{font-size:20px;animation:overdue-pulse 1.8s ease-in-out infinite;}
@keyframes overdue-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(1.15);}}
@keyframes osatsBlink{0%{opacity:1;}100%{opacity:.45;}}
.overdue-title{font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.06em;flex:1;}
.overdue-count{background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 7px;min-width:20px;text-align:center;}
#overdueLearningPanel{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.3);border-radius:10px;padding:12px 14px;max-height:320px;overflow:auto;}
.overdue-list{display:flex;flex-direction:column;gap:8px;}
.overdue-item{background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:7px;padding:9px 11px;}
.overdue-item-meta{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap;}
.overdue-date{font-size:10px;font-weight:600;color:var(--muted);}
.overdue-age{font-size:10px;color:var(--amber);font-weight:600;}
.overdue-age.overdue-critical{color:var(--red);}
.overdue-event-tag{font-size:9px;background:var(--accent-bg);border:1px solid var(--accent);color:var(--accent);border-radius:8px;padding:1px 6px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.overdue-item-text{font-size:12px;color:var(--text);line-height:1.45;margin-bottom:6px;cursor:pointer;}
.overdue-read-more{font-size:10px;color:var(--accent);cursor:pointer;margin-left:2px;}
.overdue-item-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.overdue-copy-btn{width:32px;min-width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.overdue-copy-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.overdue-action-btn{background:var(--accent);color:#fff;border:none;border-radius:5px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.overdue-action-btn:hover{opacity:.82;}
.overdue-dismiss-btn{background:none;border:1px solid var(--border);border-radius:5px;padding:4px 10px;font-size:11px;color:var(--muted);cursor:pointer;}
.overdue-dismiss-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ─── ACTIONED LEARNING HISTORY ─── */
.actioned-item{border-left:2px solid #34d399;padding:7px 10px;margin-bottom:6px;background:rgba(52,211,153,.05);border-radius:0 6px 6px 0;}
.actioned-item-header{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap;}
.actioned-check{color:#34d399;font-size:12px;font-weight:700;}
.actioned-date{font-size:10px;color:var(--muted);font-weight:600;}
.actioned-event-tag{font-size:9px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);color:#34d399;border-radius:8px;padding:1px 6px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.actioned-item-text{font-size:12px;color:var(--text);line-height:1.45;cursor:pointer;}
.actioned-source{font-size:10px;color:var(--accent);margin-top:3px;}

/* ─── LEARNING NEED TEXT TRUNCATION ─── */
.ln-text{cursor:default;}
.ln-read-more{font-size:10px;color:var(--accent);cursor:pointer;margin-left:2px;}

/* ─── PROCEDURE SUBCATEGORY NESTING ─── */
.proc-nest-group{margin-left:16px;border-left:2px solid var(--border);padding-left:0;}
.proc-card-child{opacity:.92;background:var(--surface2);}
.proc-card-child:hover{background:var(--surface);}
.proc-child-indent{color:var(--muted);font-size:11px;margin-right:2px;}

/* ═══════════════════════════════════════════════
   MOBILE OPTIMIZATION PATCH — v10
   Fixes: touch targets, :active states, tap
   feedback, small buttons, scroll issues
   ═══════════════════════════════════════════════ */

/* ── Global touch feedback: :active for all interactive elements ── */
.btn:active,
.btn-primary:active,
.btn-danger:active,
.btn-full:active,
.tab:active,
.sub-tab:active,
.mobile-nav-btn:active,
.sidebar-item:active,
.rot-pick-item:active,
.mcq-option:active,
.ww-verdict-btn:active,
.struggle-vote:active,
.qbank-card:active,
.cal-save-btn:active,
.add-item-btn:active,
.auth-tab:active,
.recent-chip:active,
.mastery-cell:active,
.category-toggle:active,
.ww-card:active,
.insight-card[onclick]:active {
  opacity: 0.75;
  transform: scale(0.97);
}

/* Prevent transform flicker on non-touch devices */
@media (hover: hover) {
  .btn:active,
  .tab:active,
  .sub-tab:active,
  .mcq-option:active,
  .recent-chip:active,
  .category-toggle:active {
    transform: none;
    opacity: 1;
  }
}

/* ── Mobile-specific overrides ── */
@media (max-width: 768px) {

  /* ── Touch targets: minimum 44×44px for all tappable elements ── */

  /* Count buttons (were 26px) */
  .count-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  /* Checkbox — wrap in a larger tap zone */
  .check-box {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex-shrink: 0;
  }
  .check-box.checked::after {
    font-size: 13px;
  }

  /* Checklist delete button — too small (was 12px text, ~20px hit area) */
  .checklist-del {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    opacity: 0.7;
    border-radius: 6px;
  }
  .checklist-del:active {
    opacity: 1;
    color: var(--red);
    background: var(--red-bg);
  }

  /* Checklist edit button — too small (was 10px, 1px padding) */
  .checklist-edit-btn {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0;
  }
  .checklist-edit-btn:active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
  }

  /* Calendar arrows */
  .cal-arrow {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0 10px;
  }
  .cal-arrow:active {
    background: var(--border);
  }

  /* Calendar days — ensure minimum tap size */
  .cal-day {
    min-height: 36px;
  }
  .cal-day:active:not(.empty) {
    background: var(--surface2);
    border-color: var(--border);
  }

  /* Mobile drawer close button (was 30×30) */
  .mobile-drawer-close {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  /* Mobile nav buttons — slightly taller for thumb reach */
  .mobile-nav-btn {
    min-width: 60px;
    padding: 8px 6px;
  }
  .mobile-nav-btn:active {
    color: var(--accent);
    background: var(--accent-bg);
    border-radius: 10px;
  }

  /* Sidebar items */
  .sidebar-item {
    padding: 10px 10px;
    min-height: 44px;
  }
  .sidebar-item:active {
    background: var(--surface2);
  }

  /* Log button (procedure card) */
  .log-btn {
    height: 44px;
    font-size: 14px;
  }

  /* Tabs — taller tap area */
  .tab {
    padding: 8px 12px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .tab:active {
    color: var(--text);
    background: var(--surface2);
  }

  /* Sub-tabs */
  .sub-tab {
    padding: 7px 12px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .sub-tab:active:not(.active) {
    background: rgba(255,255,255,0.06);
  }

  /* WW verdict buttons */
  .ww-verdict-btn {
    padding: 10px 20px;
    font-size: 13px;
  }
  .ww-verdict-btn:active {
    opacity: 0.75;
  }

  /* Struggle vote */
  .struggle-vote {
    padding: 8px 16px;
  }
  .struggle-vote:active {
    opacity: 0.75;
  }

  /* Auth tabs */
  .auth-tab {
    padding: 10px 8px;
    min-height: 42px;
  }
  .auth-tab:active {
    background: var(--surface2);
  }

  /* Recent procedure chips */
  .recent-chip {
    padding: 8px 14px;
    min-height: 40px;
  }
  .recent-chip:active {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
  }

  /* Share buttons (WardWisdom, inline comment) */
  .share-btn {
    min-height: 36px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
  }
  .share-btn:active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
  }

  /* Q Bank pagination buttons */
  .qbank-pp-btn,
  .qbank-pg-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* MCQ options — already good but ensure :active feedback */
  .mcq-option:active:not(.disabled) {
    border-color: var(--accent);
    background: var(--accent-bg);
  }

  /* Overdue action buttons */
  .overdue-action-btn,
  .overdue-dismiss-btn,
  .overdue-copy-btn {
    padding: 8px 14px;
    font-size: 12px;
    min-height: 38px;
  }

  .copy-field-btn {
    width: 34px;
    height: 34px;
    top: 8px;
    right: 8px;
  }

  /* Cal save button */
  .cal-save-btn {
    padding: 13px;
    font-size: 14px;
  }
  .cal-save-btn:active {
    opacity: 0.8;
  }

  /* Add item button in learning log */
  .add-item-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .add-item-btn:active {
    opacity: 0.8;
  }

  /* ── Inline tiny edit/delete buttons in log modal (Previous Entries) ──
     These render via JS inline style — boost via class if possible,
     but also patch the class-based log history del button             */
  .history-del {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .history-del:active {
    background: var(--red-bg);
    border-color: var(--red);
    color: var(--red);
  }

  /* ── Exam / Foundation dot navigation (were 24×24px) ── */
  /* These are inline-styled in JS — we can't override them directly.
     Target the parent scroll container for better UX */
  .exam-dot-nav,
  .vault-dot-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 8px;
    gap: 6px !important;
  }
  .exam-dot-nav::-webkit-scrollbar,
  .vault-dot-nav::-webkit-scrollbar {
    display: none;
  }

  /* ── WardWisdom / LearnLink read-more tap target ── */
  .ww-read-more {
    padding: 4px 2px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Rotation pick items ── */
  .rot-pick-item {
    padding: 12px 14px;
    min-height: 48px;
  }
  .rot-pick-item:active {
    border-color: var(--accent);
    background: var(--accent-bg);
  }

  /* ── Prevent 300ms tap delay on all interactive elements ── */
  a, button, [role="button"],
  .tab, .sub-tab, .mobile-nav-btn,
  .sidebar-item, .cal-day, .mcq-option,
  .check-box, .checklist-del, .checklist-edit-btn,
  .recent-chip, .rot-pick-item, .category-toggle,
  .ww-verdict-btn, .struggle-vote, .share-btn,
  .add-item-btn, .cal-save-btn, .log-btn,
  .overdue-action-btn, .overdue-dismiss-btn, .overdue-copy-btn,
  .ln-copy-btn {
    touch-action: manipulation;
  }

  /* ── Prevent text selection on tap for interactive UI elements ── */
  .tab, .sub-tab, .mobile-nav-btn, .category-toggle,
  .recent-chip, .cal-day, .check-box, .sidebar-item,
  .mcq-option, .ww-verdict-btn, .struggle-vote,
  .mastery-cell, .rot-pick-item {
    -webkit-user-select: none;
    user-select: none;
  }

  /* ── Scroll performance ── */
.main,
.modal,
.mobile-drawer,
.recent-chips,
.sub-tabs,
.tabs {
    -webkit-overflow-scrolling: touch;
  }

  /* ── Input / form usability on mobile ── */
  .form-input,
  textarea,
  select {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }

  /* ── Modal bottom-sheet: ensure it clears the keyboard ── */
  .modal {
    max-height: 85vh;
    padding-bottom: env(safe-area-inset-bottom, 24px);
  }

  /* ── Progress / history tiny edit+delete buttons (inline-styled in JS) ──
     Boost the container so children get more breathing room               */
  .proc-history-row {
    min-height: 44px;
    padding: 10px 10px;
    gap: 8px;
  }

  /* ── Category toggle — ensure full-width tap area ── */
  .category-toggle {
    min-height: 48px;
  }
  .category-toggle:active {
    background: #2d333b;
  }

  /* ── Checklist item rows — enough height for checkbox + buttons ── */
  .checklist-item {
    min-height: 44px;
    align-items: flex-start;
  }
  /* On mobile the inner text+button row should wrap: text takes full width,
     buttons drop to a second line below the text */
  .checklist-item > div > div:first-child {
    flex-wrap: wrap;
  }
  .checklist-item .ln-text,
  .checklist-item .check-text {
    flex: 1 1 100%;
    min-width: 120px;
  }
}

/* Compact community cards */
.ww-tag{display:none;}
.ww-card,
.ll-card{
  padding:12px 14px;
  max-width:920px;
}
.ww-card-header,
.ll-card-header{
  margin-bottom:6px;
}
.ww-compact-meta,
.ll-compact-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  flex-wrap:wrap;
}
.ww-compact-row,
.ll-compact-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.ww-compact-text,
.ll-compact-text{
  flex:1 1 auto;
  min-width:0;
  margin-bottom:0;
}
.ww-inline-actions,
.ll-inline-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  white-space:nowrap;
}
.ww-inline-verdict{
  gap:6px;
  flex-wrap:nowrap;
}
.ww-verdict-btn{
  padding:4px 10px;
  font-size:11px;
}
.ll-source-btn.ll-inline-btn{
  padding:4px 10px;
  font-size:11px;
}
.ww-read-more,
.ll-read-more{
  margin-left:0;
  font-size:11px;
  white-space:nowrap;
}
.ww-text,
.ll-text{
  margin-bottom:0;
}
@media (max-width: 900px){
  .ww-card,
  .ll-card{
    max-width:none;
  }
}
@media (max-width: 680px){
  .ww-compact-row,
  .ll-compact-row{
    flex-direction:column;
    align-items:stretch;
  }
  .ww-inline-actions,
  .ll-inline-actions{
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .ww-inline-verdict{
    justify-content:flex-end;
    flex-wrap:wrap;
  }
}

/* ── Also boost tiny inline buttons on all screen sizes ──
   These classes appear in both mobile and desktop JS renders  ── */
.btn[style*="font-size:10px"],
.btn[style*="font-size: 10px"] {
  min-height: 32px;
  vertical-align: middle;
}

/* OSATS */
.osats-pgy-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: 8px; padding: 10px 14px;
  margin-bottom: 14px; cursor: pointer; font-size: 13px;
  color: var(--purple); transition: opacity .15s;
}
.osats-pgy-bar:hover { opacity: .8; }
.osats-sup-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--amber-bg, rgba(245,158,11,.08));
  border: 1px solid var(--amber); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 14px;
}
.osats-filter-row { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.osats-filter-btn {
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer; transition: all .15s; white-space: nowrap;
  font-family: var(--font, inherit);
}
.osats-filter-btn.active, .osats-filter-btn:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.osats-entry-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; margin-bottom: 10px;
  transition: box-shadow .15s, border-color .15s; cursor: pointer;
}
.osats-entry-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: var(--accent); }
.osats-entry-card-compact{padding:10px 12px;}
.osats-entry-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.osats-entry-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.osats-entry-actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); flex-wrap:wrap; }
.osats-entry-actions .btn{min-height:36px;}
.osats-chip {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 8px; font-size: 11px; color: var(--muted);
}
.osats-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}
.osats-status-badge.pending {
  background: rgba(245,158,11,.12); color: var(--amber); border: 1px solid var(--amber);
}
.osats-status-badge.signed {
  background: rgba(34,197,94,.1); color: var(--green); border: 1px solid var(--green);
}
.osats-record-info {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px;
}
.osats-record-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px;
}
.osats-record-label {
  display: block; font-size: 11px; color: var(--muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 2px;
}
.osats-eval-signed {
  background: rgba(34,197,94,.06); border: 1px solid var(--green);
  border-radius: 10px; padding: 16px; margin-top: 14px;
}
.osats-sig-block {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px; margin-top: 12px;
}
.osats-score-btn {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface2);
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font, inherit);
}
.osats-score-btn:hover { border-color: var(--accent); color: var(--accent); }
.osats-score-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.osats-score-btn.uc.active { background: var(--muted); color: #fff; border-color: var(--muted); }
.osats-ol-btn {
  padding: 8px 6px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface2);
  color: var(--muted); cursor: pointer; text-align: center;
  line-height: 1.3; transition: all .15s;
  font-family: var(--font, inherit);
}
.osats-ol-btn:hover { border-color: var(--accent); color: var(--accent); }
.osats-ol-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.osats-empty-state { text-align: center; padding: 44px 20px; color: var(--muted); }
.osats-pgy-group{margin-top:14px;}
.osats-pgy-group-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text);}
.osats-pgy-group-title span{font-size:11px;color:var(--muted);font-weight:600;}
.osats-queue-card{margin-bottom:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden;}
.osats-queue-card[open]{border-color:var(--accent);}
.osats-queue-summary{list-style:none;display:flex;align-items:center;gap:12px;padding:8px 12px;cursor:pointer;}
.osats-queue-summary::-webkit-details-marker{display:none;}
.osats-queue-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.35;}
.osats-queue-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.osats-queue-body{padding:0 12px 12px;}
.osats-queue-chev{font-size:14px;color:var(--muted);transition:transform .15s ease;}
.osats-queue-card[open] .osats-queue-chev{transform:rotate(90deg);}
.aku-export-masthead{text-align:center;margin:0 0 14px;}
.aku-export-logo{width:78px;height:78px;margin:0 auto 8px;}
.aku-export-logo svg{width:100%;height:100%;display:block;}
.aku-export-university{font-size:15px;font-weight:800;letter-spacing:.12em;}
.aku-export-school{font-size:11px;margin-top:2px;color:#374151;letter-spacing:.08em;text-transform:uppercase;}
.aku-export-title{font-size:18px;font-weight:800;margin-top:10px;}
.aku-export-subtitle{font-size:11px;margin-top:4px;color:#374151;line-height:1.5;}
.log-pgy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* PIN lock overlay is a security wall — appear instantly, no fade-in window
   where pointer-events:all blocks clicks while the overlay is still invisible. */
#signerPinLockOverlay{transition:none;}
.modal-overlay#signerPinLockOverlay .modal{box-shadow:0 18px 60px rgba(0,0,0,.5);}

/* Roles */
.role-chip {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.role-chip-procedure { background: rgba(59,130,246,.12); color: #3b82f6; }
.role-chip-academic { background: rgba(139,92,246,.12); color: var(--purple); }
.role-chip-dissertation { background: rgba(20,184,166,.12); color: var(--teal); }
.role-chip-pd { background: rgba(245,158,11,.12); color: var(--amber); }
.roles-table tr:hover td { background: var(--surface2); }
.roles-table td, .roles-table th { border-bottom: 1px solid var(--border); }
.roles-table tr:last-child td { border-bottom: none; }
.asgn-year-header {
  font-size: 11px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 0; border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.pd-sidebar-badge {
  font-size: 10px; background: var(--purple); color: #fff;
  border-radius: 10px; padding: 1px 6px; font-weight: 700;
  margin-left: auto;
}

/* Dissertation session log */
.diss-session-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.diss-session-row:last-child { border-bottom: none; }
.diss-session-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--muted);
  flex-shrink: 0; margin-top: 2px;
}
.diss-session-body { flex: 1; min-width: 0; }
.diss-session-meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.diss-session-date { font-size: 12px; font-weight: 600; color: var(--text2); }
.diss-session-dur {
  font-size: 11px; color: var(--muted);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 7px;
}
.diss-session-purpose,
.diss-session-outcome,
.diss-session-sups {
  font-size: 12px; color: var(--text2); line-height: 1.5;
  margin-bottom: 3px;
}
.diss-session-purpose strong,
.diss-session-outcome strong,
.diss-session-sups strong { color: var(--text); }

/* ISASF */
.isasf-info-val {
  font-size: 13px; color: var(--text);
  padding: 8px 12px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 6px;
  line-height: 1.4;
}
.isasf-score-sel { min-width: 180px; }
.isasf-score-display { display: inline-flex; align-items: center; gap: 6px; }
#isasf-form-modal tbody tr:hover td { background: var(--surface2); }
#isasf-decision-group label:hover { background: var(--surface2) !important; }

@media (max-width: 480px) {
  .osats-record-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DUTY ROTA MODULE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.rota-wrap { padding: 16px 0 60px; max-width: 100%; }

/* ── Header (v3.5.1: tighter — was 18px title, 14px bottom margin) ── */
.rota-header { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rota-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.1px; }
.rota-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.rota-header-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.rota-header-actions .btn { padding: 5px 10px; font-size: 11.5px; }

/* ── Status badges ── */
.rota-status-badge { display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px; letter-spacing: .3px; }
.rota-status-draft         { background: var(--amber-bg); color: var(--amber); }
.rota-status-chief_reviewed { background: var(--accent-bg); color: var(--accent); }
.rota-status-pending_pd    { background: var(--accent-bg); color: var(--accent); }
.rota-status-approved,
.rota-status-published     { background: var(--green-bg); color: var(--green); }
.rota-status-chief_pending { background: var(--amber-bg); color: var(--amber); }
.rota-status-pd_pending    { background: var(--accent-bg); color: var(--accent); }
.rota-status-pd_approved   { background: var(--green-bg); color: var(--green); }
.rota-status-chief_declined,
.rota-status-pd_declined   { background: var(--red-bg); color: var(--red); }
.rota-status-withdrawn     { background: var(--surface2); color: var(--muted); }

/* ── Month picker (v3.5.1: compact single-line chips with a month+year
   label on one line. Saved ~34px of vertical space vs the old 2-line chips. */
.rota-month-picker { display: flex; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.rota-month-picker::-webkit-scrollbar { height: 6px; }
.rota-month-btn { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--muted); cursor: pointer; font-size: 11px;
  font-weight: 500; line-height: 1.2; position: relative;
  transition: border-color .15s, background .15s; flex-shrink: 0; white-space: nowrap; }
/* Fold the 2-line <month><br><span>year</span> render onto a single line. */
.rota-month-btn br { display: none; }
.rota-month-btn span { margin-left: 3px; font-size: 10px; color: var(--muted); }
.rota-month-btn.active span { color: var(--accent); }
.rota-month-btn:hover { border-color: var(--accent); color: var(--text); }
.rota-month-btn.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.rota-month-btn.has-rota { border-color: var(--teal); }
.rota-month-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--teal); margin: 0 0 0 4px; vertical-align: middle; }

/* ── Banners (v3.5.1: slim and in-line with the flow instead of a big block) ── */
.rota-banner { padding: 5px 10px; border-radius: 5px; font-size: 11px;
  margin-bottom: 8px; line-height: 1.4; }
.rota-banner-warn    { background: var(--amber-bg); color: var(--amber); }
.rota-banner-info    { background: var(--accent-bg); color: var(--accent); }
.rota-banner-success { background: var(--green-bg); color: var(--green); }

/* ── Action buttons ── */
.rota-btn-ai      { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.rota-btn-submit  { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.rota-btn-approve { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.rota-btn-decline { background: var(--red-bg); color: var(--red); border-color: var(--red); }

/* ── Grid layout (matrix + timeline side panel) ── */
.rota-grid-wrap { background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
/* Cap the flex row so both children inherit a bounded height — this lets
   the right-side timeline panel scroll internally instead of pushing the
   page. The mobile breakpoint at ≤640px overrides this to `none` so the
   stacked layout renders naturally. */
.rota-grid-inner { display: flex; min-height: 0; max-height: 680px; }
.rota-grid-mobile-stack{display:flex;flex-direction:column;}
.rota-matrix-pane { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.rota-matrix-pane-mobile{display:block;overflow:visible;}
.rota-table-scroll { overflow: auto; max-height: 600px; }
.rota-table-scroll-mobile-safe{width:100%;min-width:100%;min-height:260px;}

/* ── Timeline side panel ── */
/* Panel itself takes the full height of the flex row (bounded by the
   .rota-grid-inner max-height above). overflow:hidden is what lets the
   nested .rota-timeline-scroll's flex:1 + overflow-y:auto kick in and
   scroll internally, keeping the header + footer pinned. */
.rota-timeline-pane { width: 220px; flex-shrink: 0; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; background: var(--surface); min-height: 200px;
  overflow: hidden; }
.rota-timeline-empty { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 24px 16px; text-align: center; }
.rota-timeline-empty-icon { width: 38px; height: 38px; border-radius: 50%;
  background: rgba(52,211,153,.1); display: flex; align-items: center; justify-content: center; }
.rota-timeline-hint { font-size: 11px; color: var(--muted); line-height: 1.6; }
/* min-height:0 so the flex:1 child can actually shrink below content size
   and trigger the overflow-y:auto scroll. Without this the browser treats
   flex:1 children as "at least as tall as their content" and the scroll
   never kicks in — the classic nested-flex scroll gotcha. */
.rota-timeline-content { display: flex; flex-direction: column; flex: 1; overflow: hidden;
  min-height: 0; }
.rota-tl-head-row { display: flex; align-items: flex-start; justify-content: space-between;
  padding: 9px 12px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: var(--surface); }
.rota-tl-name { font-size: 13px; font-weight: 600; color: var(--text); }
.rota-tl-sub  { font-size: 10px; color: var(--muted); margin-top: 1px; }
.rota-tl-close { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 2px 5px; border-radius: 4px; line-height: 1; flex-shrink: 0; }
.rota-tl-close:hover { background: var(--surface2); color: var(--text); }
.rota-timeline-scroll { flex: 1; overflow-y: auto; min-height: 0;
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.rota-tl-week { border-bottom: 1px solid var(--border); }
.rota-tl-week-head { font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted); padding: 5px 12px 3px;
  background: var(--surface2); display: flex; justify-content: space-between; align-items: center; }
.rota-tl-day-block { border-bottom: 0.5px solid var(--border); }
.rota-tl-day-block:last-child { border-bottom: none; }
.rota-tl-day-row { display: flex; align-items: center; gap: 6px; padding: 4px 12px; }
.rota-tl-day-row:last-child { border-bottom: none; }
.rota-tl-dow  { font-size: 9px; color: var(--muted); width: 22px; flex-shrink: 0; }
.rota-tl-date { font-size: 11px; font-weight: 600; width: 18px; flex-shrink: 0; color: var(--text); }
.rota-tl-shift { flex: 1; }
.rota-tl-off  { font-size: 9px; color: var(--muted); font-style: italic; }
.rota-timeline-footer { padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--surface2); flex-shrink: 0; }
.rota-tl-stats { display: flex; justify-content: space-between; margin-bottom: 5px; }
.rota-tl-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rota-tl-stat span { font-size: 9px; color: var(--muted); }
.rota-tl-stat strong { font-size: 12px; font-weight: 600; color: var(--text); }
.rota-tl-bar-track { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; position: relative; }
.rota-tl-bar-fill  { height: 100%; border-radius: 3px; transition: width .4s; }
/* ── Overtime logging (rota_overtime.js) ──────────────────────────────────── */
.rota-tl-day-block   { }
.rota-tl-day-h       { font-size: 9px; color: var(--muted); margin-left: auto; }

.rota-ot-readonly {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 0 4px 48px;
  font-size: 10px; color: var(--muted);
}
.rota-ot-tap {
  display: inline-flex; align-items: center; gap: 3px;
  margin: 0 0 4px 48px;
  font-size: 9px; color: var(--muted);
  padding: 1px 6px; border-radius: 4px;
  border: 0.5px dashed var(--border-secondary);
  cursor: pointer; user-select: none;
}
.rota-ot-tap:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }

.rota-ot-done {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 0 4px 48px;
  font-size: 10px; cursor: pointer; user-select: none;
}
.rota-ot-extra { color: var(--red); font-weight: 600; }
.rota-ot-total { font-size: 9px; background: var(--red-bg); color: var(--red);
  padding: 1px 5px; border-radius: 4px; }
.rota-ot-edit  { font-size: 9px; color: var(--muted); }

.rota-ot-form {
  margin: 4px 12px 6px 12px;
  border: 1px solid var(--red);
  border-radius: 6px; padding: 8px 10px;
  background: var(--red-bg);
}
.rota-ot-form-title { font-size: 11px; font-weight: 600; color: var(--red); margin-bottom: 3px; }
.rota-ot-hint { font-size: 10px; color: var(--muted); margin-bottom: 7px; line-height: 1.4; }
.rota-ot-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.rota-ot-field label { display: block; font-size: 9px; color: var(--muted); margin-bottom: 2px; }
.rota-ot-field input {
  width: 100%; font-size: 11px; padding: 3px 6px;
  border: 0.5px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text);
}
.rota-ot-calc {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; background: var(--surface2);
  padding: 3px 7px; border-radius: 4px; margin-bottom: 6px;
}
.rota-ot-btns { display: flex; gap: 6px; justify-content: flex-end; }
.rota-ot-save-btn {
  font-size: 11px; padding: 3px 10px; border-radius: 4px;
  background: var(--red); color: #fff; border: none; cursor: pointer;
}
.rota-ot-save-btn:hover { opacity: .88; }
.rota-ot-save-btn:disabled { opacity: .5; cursor: not-allowed; }
.rota-tl-bar-ot { border-radius: 0 3px 3px 0; }


/* ── Filters ── */
.rota-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px;
  border-bottom: 1px solid var(--border); }
.rota-filter-btn { padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); font-size: 11px; cursor: pointer;
  transition: all .15s; }
.rota-filter-btn:hover,
.rota-filter-btn.active { border-color: var(--teal); background: rgba(52,211,153,.1); color: var(--teal); }

/* ── Legend ── */
.rota-legend { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 12px 8px;
  border-bottom: 1px solid var(--border); }
.rota-legend-item { display: flex; align-items: center; }

/* ── Table — frozen column ── */
.rota-table { width: max-content; min-width: 100%; border-collapse: separate;
  border-spacing: 0; font-size: 11px; }

/* Column headers — sticky top */
.rota-th { padding: 6px 8px; font-size: 10px; font-weight: 600;
  text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 2;
  background: #085041; color: #9FE1CB;
  border-right: 0.5px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.15); }
[data-theme="light"] .rota-th { background: #085041; color: #9FE1CB; }

/* Date column header — sticky top + left */
.rota-th-frozen { position: sticky; left: 0; top: 0; z-index: 4;
  background: #04342C !important; color: #9FE1CB !important;
  border-right: 2px solid rgba(255,255,255,.2) !important; min-width: 96px; }

/* Body cells */
.rota-td { padding: 4px 7px; border-bottom: 0.5px solid var(--border);
  border-right: 0.5px solid var(--border); vertical-align: top; min-width: 80px;
  background: var(--surface); }
.rota-td:last-child { border-right: none; }
.rota-td-editable { cursor: pointer; transition: background .1s; }
.rota-td-editable:hover { background: rgba(52,211,153,.08); }
.rota-cell { display: flex; flex-wrap: wrap; gap: 2px; }

/* Date column body cell — sticky left */
.rota-td-frozen { position: sticky; left: 0; z-index: 1;
  background: var(--surface); border-right: 2px solid var(--border); min-width: 96px; }
.rota-td-today { background: rgba(52,211,153,.08) !important;
  border-left: 2px solid var(--teal); }

/* Date cell content */
.rota-date-dow { display: block; font-size: 9px; color: var(--muted); }
.rota-date-num { display: block; font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.rota-holiday-tag { display: block; font-size: 9px; color: var(--amber); font-weight: 600;
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Row types */
.rota-row-weekend td { background: var(--surface2); }
.rota-row-weekend td.rota-td-frozen { background: var(--surface2); }
.rota-row-holiday td { background: rgba(245,158,11,.06); }
.rota-row-holiday td.rota-td-frozen { background: rgba(245,158,11,.1); }
.rota-row-today td { background: rgba(52,211,153,.04); }
.rota-row-mine td { }
.rota-row-mine td.rota-td-frozen { border-left: 2px solid var(--teal); }

/* Weekend rows — Night / Day / Night-Off columns are unused (call_24h carries
   the 24-hour call). Striped to read as "not applicable" at a glance. */
.rota-td-inactive {
  background: repeating-linear-gradient(135deg,
    transparent 0 8px, rgba(0,0,0,.035) 8px 9px) !important;
  cursor: default !important;
}
[data-theme="dark"] .rota-td-inactive {
  background: repeating-linear-gradient(135deg,
    transparent 0 8px, rgba(255,255,255,.04) 8px 9px) !important;
}


/* ── Chips ── */
.rota-chip { display: inline-block; font-size: 10px; padding: 1px 6px;
  border-radius: 4px; white-space: nowrap; cursor: pointer; border: 0.5px solid transparent;
  transition: opacity .15s, transform .1s; font-weight: 500; line-height: 1.7; }
.rota-chip:hover { opacity: .8; transform: scale(1.04); }
.rota-chip-night     { background: rgba(163,45,45,.15); color: var(--red); border-color: var(--red); }
.rota-chip-day       { background: rgba(15,110,86,.15); color: var(--teal); border-color: var(--teal); }

@media (max-width: 768px) {
  .modal-mobile-safe{padding-bottom:18px;}
  .modal-actions-sticky{
    margin:18px -18px -18px;
    padding:12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--border);
    border-radius:0 0 16px 16px;
  }
  .bug-report-modal .modal-subtitle,
  .bug-admin-modal .modal-subtitle{margin-bottom:12px;}
  .bug-admin-card{padding:12px 10px;}
  .bug-admin-actions .btn{flex:1 1 120px;min-height:42px;}
  .osats-modal .osats-record-info,
  .osats-modal .osats-sig-block{padding:12px;}
  .osats-modal .osats-entry-actions .btn,
  .osats-modal .osats-queue-body .btn{flex:1 1 130px;min-height:42px;}
  .osats-modal .osats-queue-summary{padding:10px 12px;align-items:flex-start;}
  .osats-modal .osats-queue-title{font-size:12.5px;}
  .osats-modal .osats-score-btn{
    width:42px;
    height:42px;
    font-size:13px;
  }
  .osats-modal .osats-ol-btn{
    min-height:58px;
    padding:10px 6px;
  }
  .osats-modal table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .osats-modal table tbody{display:block;min-width:460px;}
}
.rota-chip-24h       { background: rgba(83,74,183,.15); color: var(--purple); border-color: var(--purple); }
.rota-chip-theatre   { background: rgba(153,53,86,.15); color: var(--pink); border-color: var(--pink); }
.rota-chip-ward      { background: rgba(133,79,11,.12); color: var(--amber); border-color: var(--amber); }
.rota-chip-leave     { background: rgba(245,158,11,.12); color: var(--amber); border-color: var(--amber); }
.rota-chip-off       { background: var(--surface2); color: var(--muted); border-color: var(--border); }
.rota-chip-outreach  { background: rgba(52,211,153,.12); color: var(--teal); border-color: var(--teal); }
.rota-chip-special   { background: var(--surface2); color: var(--muted); border-color: var(--border); font-style: italic; }
.rota-chip-consultant { background: var(--surface2); color: var(--text); border-color: var(--border); font-weight: 600; }
.rota-chip-instructor { background: rgba(52,211,153,.1); color: var(--teal); border-color: var(--teal); }
.rota-chip-mine     { box-shadow: 0 0 0 2px var(--teal); }
.rota-chip-dimmed   { opacity: .2; }
.rota-chip-selected { outline: 2px solid var(--text); outline-offset: 1px; }

/* ── Empty state ── */
.rota-empty { padding: 60px 24px; text-align: center; color: var(--muted); }

/* ── Panels ── */
.rota-panels { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
@media (min-width: 900px) { .rota-panels { grid-template-columns: 1fr 1fr; gap: 10px; } }
.rota-panel { background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px; }
.rota-panel-title { font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.rota-inbox-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px; background: var(--red);
  color: #fff; font-size: 10px; font-weight: 700; padding: 0 4px; }

/* ── Duty hours bars ── */
.rota-hours-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rota-hours-stat { flex: 1; min-width: 70px; background: var(--surface2);
  border-radius: 7px; padding: 6px 8px; text-align: center; }
.rota-hours-num { display: block; font-size: 18px; font-weight: 700; color: var(--text); }
.rota-hours-num.rota-hours-warn { color: var(--amber); }
.rota-hours-label { font-size: 10px; color: var(--muted); }
.rota-hours-bars { position: relative; display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.rota-hours-bar-row { display: flex; align-items: center; gap: 8px; }
.rota-hours-bar-label { font-size: 11px; color: var(--muted); min-width: 52px; text-align: right; }
.rota-hours-bar-track { flex: 1; height: 14px; background: var(--surface2);
  border-radius: 3px; position: relative; overflow: visible; }
.rota-hours-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.rota-hours-bar-val { position: absolute; right: -30px; top: 0; font-size: 10px;
  color: var(--muted); white-space: nowrap; }

/* ── AI assistant ── */
.rota-ai-chat { height: 180px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 6px; margin-bottom: 10px; padding: 8px; background: var(--surface2);
  border-radius: 7px; border: 1px solid var(--border); }
.rota-ai-msg { font-size: 12px; line-height: 1.5; padding: 6px 9px;
  border-radius: 6px; max-width: 90%; }
.rota-ai-msg-user   { background: var(--accent-bg); color: var(--accent); align-self: flex-end; }
.rota-ai-msg-ai     { background: var(--surface); color: var(--text); border: 1px solid var(--border); align-self: flex-start; }
.rota-ai-msg-system { color: var(--muted); font-size: 11px; font-style: italic; align-self: flex-start; }
.rota-ai-input-row  { display: flex; gap: 8px; }
.rota-ai-input { flex: 1; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--surface2); color: var(--text);
  font-size: 12px; font-family: 'DM Sans', sans-serif; }
.rota-ai-input:focus { outline: none; border-color: var(--accent); }
.rota-ai-patch-preview { margin-top: 8px; padding: 10px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 7px; font-size: 12px; }

/* ── Request cards ── */
.rota-request-card { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 11px 13px; margin-bottom: 8px; }
.rota-request-card:last-child { margin-bottom: 0; }
.rota-request-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.rota-request-input{min-width:180px;}
.rota-request-btn{min-height:38px;}

/* ── Form elements ── */
.rota-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.rota-input { width: 100%; padding: 8px 10px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 7px; color: var(--text);
  font-family: 'DM Sans', sans-serif; font-size: 13px; transition: border-color .15s; }
.rota-input:focus { outline: none; border-color: var(--accent); }

/* ── Modal ── */
/* rota-modal-overlay is injected into the DOM only while the modal is open
   and removed on close. The default display:flex is correct; the overlay is
   visible as soon as it's inserted. See also the #mobileTouchRescue safety
   net further down — it strips pointer-events from any fixed overlay that
   lingers empty of children. */
.rota-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rota-modal { background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; width: 100%; max-width: 480px; max-height: 90vh;
  overflow-y: auto; display: flex; flex-direction: column; }
.rota-modal-header { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 600; color: var(--text); }
.rota-modal-close { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 16px; padding: 2px 6px; border-radius: 4px; }
.rota-modal-close:hover { background: var(--surface2); color: var(--text); }
.rota-modal-body   { padding: 16px; flex: 1; }
.rota-modal-footer { display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border); }

/* ── Mobile ── */
@media (max-width: 640px) {
  .rota-wrap{padding:12px 0 44px;}
  .rota-header{margin-bottom:12px;}
  .rota-header-actions{width:100%;justify-content:stretch;}
  .rota-header-actions .btn{flex:1 1 140px;min-height:42px;}
  .rota-grid-inner{
    display:flex !important;
    flex-direction:column !important;
    min-height:auto;
    max-height:none;           /* unset desktop cap so stacked panes render naturally */
  }
  .rota-matrix-pane{
    display:block !important;
    width:100% !important;
    min-width:100% !important;
    flex:none !important;
    overflow:visible !important;
  }
  .rota-month-picker{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
    margin:0 -4px 12px;
    padding-left:4px;
    padding-right:4px;
  }
  .rota-month-btn{flex:0 0 auto;min-width:58px;}
  .rota-grid-wrap{border-radius:12px;}
  .rota-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:10px;
    gap:8px;
    scrollbar-width:none;
  }
  .rota-filters::-webkit-scrollbar{display:none;}
  .rota-filter-btn{
    flex:0 0 auto;
    min-height:36px;
    padding:6px 12px;
    white-space:nowrap;
  }
  .rota-legend{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:8px 10px 10px;
  }
  .rota-legend::-webkit-scrollbar{display:none;}
  .rota-legend-item{flex:0 0 auto;}
  .rota-table { font-size: 10px; }
  .rota-table-scroll{
    display:block;
    width:100%;
    min-width:100%;
    min-height:260px;
    max-height:none;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  #rotaMainTable{
    display:table !important;
    width:max-content;
    min-width:100%;
  }
  .rota-th, .rota-td { padding: 4px 6px; }
  .rota-th-frozen,
  .rota-td-frozen{min-width:76px;}
  .rota-td{min-width:72px;}
  .rota-chip {
    font-size: 9px;
    padding: 2px 5px;
    min-height:22px;
    display:inline-flex;
    align-items:center;
  }
  .rota-title { font-size: 15px; }
  .rota-panels { grid-template-columns: 1fr; }
  .rota-timeline-pane {
    width:100%;
    order:2;
    border-left:none;
    border-top:1px solid var(--border);
    min-height:0;
    max-height:260px;
  }
  .rota-hours-summary{gap:8px;}
  .rota-hours-stat{min-width:92px;padding:8px 10px;}
  .rota-hours-bar-row{gap:6px;}
  .rota-hours-bar-label{min-width:44px;font-size:10px;}
  .rota-ai-chat{height:160px;}
  .rota-ai-input-row{flex-wrap:wrap;}
  .rota-ai-input{
    min-height:42px;
    font-size:16px;
  }
  .rota-ai-input-row .btn{
    width:100%;
    min-height:42px;
  }
  .rota-request-actions{gap:8px;}
  .rota-request-input{min-width:100%;flex-basis:100%;}
  .rota-request-btn{flex:1 1 140px;min-height:42px;}
  .rota-modal-overlay{padding:0;align-items:flex-end;}
  .rota-modal{
    max-width:100%;
    width:100%;
    border-radius:16px 16px 0 0;
    max-height:92vh;
  }
  .rota-modal-header,
  .rota-modal-body,
  .rota-modal-footer{padding-left:18px;padding-right:18px;}
  .rota-modal-footer{
    flex-wrap:wrap;
    gap:10px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .rota-modal-footer .btn{flex:1 1 140px;min-height:44px;}
}
@media (max-width: 480px) {
  .rota-grid-inner { display:flex !important; flex-direction:column !important; }
  .rota-matrix-pane {
    display:block !important;
    width:100% !important;
    min-width:100% !important;
    flex:none !important;
    overflow:visible !important;
  }
  .rota-timeline-pane { width: 100%; border-left: none; border-top: 1px solid var(--border);
    max-height: 280px; }
  .rota-today-bar{padding:8px 10px;font-size:12px;}
  .rota-panel{padding:10px;}
  .rota-panel-title{font-size:12px;line-height:1.4;}
  .rota-ai-msg{max-width:100%;}
}

/* Rota code/name toggle */
.rota-code-toggle { margin-left: auto; border-color: var(--teal) !important; color: var(--teal) !important; }
.rota-code-toggle.active { background: rgba(52,211,153,.1) !important; }

/* ── Today's shift indicators ── */
.rota-today-blink { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0; animation: rotaBlink 1.4s ease-in-out infinite; }
@keyframes rotaBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .rota-today-blink { animation: none; } }
.rota-today-chip { display: flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 7px; border: 1px solid var(--teal); background: rgba(52,211,153,.08);
  cursor: pointer; transition: background .15s; }
.rota-today-chip:hover { background: rgba(52,211,153,.16); }
.rota-today-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-radius: 8px; margin-bottom: 12px; background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.25); font-size: 13px; color: var(--text); }
.rota-mobile-today { display: none; }
@media (max-width: 768px) {
  .rota-mobile-today { display: flex; align-items: center; gap: 7px; padding: 8px 16px;
    background: rgba(52,211,153,.08); border-top: 1px solid rgba(52,211,153,.2);
    font-size: 12px; color: var(--text); cursor: pointer; }
  .rota-today-chip { display: none !important; }
}

/* ── Estimator panel (draft only) ── */
.rota-estimator-panel { grid-column: 1 / -1; }
.rota-estimator-body { margin-top: 8px; }

/* ── Analytics dashboard ── */
.rota-analytics-panel { grid-column: 1 / -1; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.rota-analytics-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px; margin-bottom: 14px; }
.rota-kpi-card { background: var(--surface2); border-radius: 8px; padding: 10px 12px;
  border: 0.5px solid var(--border); min-height: 88px; display:flex; flex-direction:column; justify-content:space-between; }
.rota-kpi-val  { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.2; margin-bottom: 2px; }
.rota-kpi-label { font-size: 11px; color: var(--muted); }
.rota-kpi-sub   { font-size: 10px; color: var(--muted); margin-top: 2px; }
.rota-analytics-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .rota-analytics-two-col { grid-template-columns: 1fr; } }
.rota-analytics-chart-box { background: var(--surface2); border-radius: 8px;
  padding: 12px 14px; border: 0.5px solid var(--border); }
.rota-analytics-chart-title { font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.rota-analytics-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rota-legend-pill { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); }
.rota-legend-pill span { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.rota-heatmap-grid { display: grid; gap: 3px; align-items: center; }
.rota-hours-table-wrap{border:1px solid var(--border);border-radius:8px;background:var(--surface2);padding:6px 6px 2px;}

/* ── Hours table (full breakdown) ── */
.rota-hours-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.rota-hours-table th { padding: 4px 6px; text-align: left; font-weight: 600;
  color: var(--muted); font-size: 10px; background: var(--surface2);
  border-bottom: 0.5px solid var(--border); white-space: nowrap; }
.rota-hours-table td { padding: 3px 6px; border-top: 0.5px solid var(--border); vertical-align: middle; }
.rota-name-hint { color: var(--muted); font-weight: 400; font-size: 10px; margin-left: 4px; }
.rota-row-over td { background: rgba(255,77,79,.05); }
.rota-row-warn td { background: rgba(245,158,11,.05); }

/* ── Collapsible analytics shell ── */
.rota-analytics-shell { grid-column: 1 / -1; overflow: hidden; padding: 0; }
.rota-analytics-shell-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  cursor: pointer; user-select: none; background: var(--surface2);
  border-bottom: 1px solid var(--border); transition: background .12s;
}
.rota-analytics-shell-head:hover { background: rgba(0,0,0,.02); }
[data-theme="dark"] .rota-analytics-shell-head:hover { background: rgba(255,255,255,.03); }
.rota-analytics-shell-chev { font-size: 12px; color: var(--muted); transition: transform .18s; width:14px; display:inline-block; text-align:center; }
.rota-analytics-shell.collapsed .rota-analytics-shell-chev { transform: rotate(-90deg); }
.rota-analytics-shell.collapsed .rota-analytics-shell-head { border-bottom-color: transparent; }
.rota-analytics-shell-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.rota-analytics-shell-chips { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.rota-analytics-shell-body { padding: 14px; }
.rota-analytics-shell.collapsed .rota-analytics-shell-body { display: none; }

/* ── Header status chips (summary strip in the shell head) ── */
.rota-chip-status {
  display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; white-space: nowrap; line-height: 1.4;
}
.rota-chip-ok     { background: rgba(52,211,153,.12); color: var(--teal); }
.rota-chip-info   { background: rgba(24,95,165,.10);  color: #185FA5; }
.rota-chip-warn   { background: rgba(245,158,11,.15); color: var(--amber); }
.rota-chip-over   { background: rgba(163,45,45,.12);  color: var(--red); }
.rota-chip-purple { background: rgba(83,74,183,.12);  color: #534AB7; }
.rota-chip-muted  { background: var(--surface2); color: var(--muted); }

/* ── Chart-title inline hint (right-aligned descriptor) ── */
.rota-analytics-chart-hint {
  font-size: 9.5px; font-weight: 400; color: var(--muted);
  text-transform: none; letter-spacing: 0; margin-left: 6px;
}
.rota-analytics-chart-title { display: flex; justify-content: space-between; align-items: center; gap: 6px; }

/* ── Attention list (PD panel) ── */
.rota-attn-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 7px; background: var(--surface); border: 0.5px solid var(--border);
  margin-bottom: 4px; font-size: 12px;
}
.rota-attn-badge {
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; flex-shrink: 0;
}
.rota-attn-name { font-size: 12px; font-weight: 500; min-width: 120px; flex-shrink: 0; }
.rota-attn-metric { flex: 1; font-size: 11px; color: var(--muted); }

/* ── Burnout signals ── */
.rota-burnout-row {
  font-size: 11.5px; padding: 6px 10px; border-radius: 5px; margin-bottom: 4px;
  display: flex; gap: 6px; align-items: flex-start;
}
.rota-burnout-over { background: rgba(163,45,45,.10); }
.rota-burnout-warn { background: rgba(245,158,11,.12); }

/* ── Equity module (distribution + CV) ── */
.rota-equity-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 0.5px solid var(--border);
}
.rota-equity-row:last-child { border-bottom: none; }
.rota-equity-shift { width: 88px; font-size: 11px; font-weight: 500; }
.rota-equity-range {
  flex: 1; height: 16px; background: var(--surface); border-radius: 3px;
  position: relative; border: 0.5px solid var(--border);
}
.rota-equity-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
.rota-equity-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); }
.rota-equity-label-min, .rota-equity-label-max {
  position: absolute; font-size: 9px; color: var(--muted); top: -13px;
}
.rota-equity-label-min { left: 0; }
.rota-equity-label-max { right: 0; }
.rota-equity-stats { width: 140px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.rota-equity-stats strong { color: var(--text); font-weight: 600; }
.equity-cv-ok   { color: var(--teal) !important; }
.equity-cv-warn { color: var(--amber) !important; }
.equity-cv-over { color: var(--red) !important; }

/* ── Personal calendar (resident panel) ── */
.rota-cal-month {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.rota-cal-dow {
  font-size: 9px; color: var(--muted); text-align: center;
  padding: 3px 0; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
}
.rota-cal-cell {
  aspect-ratio: 1; border-radius: 5px; font-size: 10px; padding: 3px 4px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface); border: 0.5px solid var(--border);
  position: relative; min-height: 52px;
}
.rota-cal-other { opacity: .25; background: var(--surface2); }
.rota-cal-today { outline: 2px solid var(--teal); }
.rota-cal-postcall {
  background: repeating-linear-gradient(135deg,
    var(--surface) 0 6px, rgba(0,0,0,.035) 6px 7px);
}
[data-theme="dark"] .rota-cal-postcall {
  background: repeating-linear-gradient(135deg,
    var(--surface) 0 6px, rgba(255,255,255,.04) 6px 7px);
}
.rota-cal-num { font-size: 10px; color: var(--muted); align-self: flex-start; }
.rota-cal-tag {
  font-size: 9px; padding: 1px 4px; border-radius: 3px; font-weight: 600;
  align-self: stretch; text-align: center; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-tag-night   { background: rgba(163,45,45,.15);   color: var(--red); }
.cal-tag-24h     { background: rgba(83,74,183,.15);   color: #534AB7; }
.cal-tag-day     { background: rgba(15,110,86,.15);   color: var(--teal); }
.cal-tag-theatre { background: rgba(153,53,86,.15);   color: #993556; }
.cal-tag-ward    { background: rgba(133,79,11,.12);   color: var(--amber); }
.cal-tag-outreach{ background: rgba(99,56,6,.12);     color: #633806; }
.cal-tag-instructor { background: var(--surface2);    color: var(--muted); }
.cal-tag-off     { background: var(--surface2);       color: var(--muted); font-weight: 500; }
.rota-cal-legend {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
  font-size: 10px; color: var(--muted);
}
.rota-cal-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  vertical-align: middle; margin-right: 3px;
}

/* ── Recovery grid (resident) ── */
.rota-recovery-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.rota-recovery-card {
  padding: 10px; background: var(--surface); border-radius: 7px;
  border-left: 2px solid var(--teal);
}
.rota-recovery-warn { border-left-color: var(--amber); background: rgba(245,158,11,.06); }
.rota-recovery-ok   { border-left-color: var(--teal); }
.rota-recovery-big {
  font-size: 22px; font-weight: 700; line-height: 1.1;
}
.rota-recovery-big small { font-size: 10px; color: var(--muted); font-weight: 400; margin-left: 2px; }
.rota-recovery-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); margin-top: 2px;
}
.rota-recovery-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }

@media (max-width: 700px) {
  .rota-recovery-grid { grid-template-columns: 1fr; }
  .rota-analytics-shell-chips { gap: 4px; }
  .rota-chip-status { font-size: 9.5px; padding: 1px 6px; }
  .rota-equity-shift { width: 70px; font-size: 10px; }
  .rota-equity-stats { width: auto; font-size: 10px; }
  .rota-attn-row { flex-wrap: wrap; }
  .rota-attn-metric { width: 100%; }
}

/* ── KPI trend chip (month-over-month delta) ── */
.rota-kpi-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; margin-top: 3px;
}
.trend-up   { color: var(--red); }
.trend-down { color: var(--teal); }
.trend-flat { color: var(--muted); }

/* ── Predicted-cap-breach forecast rows ── */
.rota-forecast-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 10px; border-radius: 6px; margin-bottom: 4px;
  font-size: 11.5px; line-height: 1.45;
}
.rota-forecast-over { background: rgba(163,45,45,.10); }
.rota-forecast-warn { background: rgba(245,158,11,.12); }

/* ── Resident peer-comparison rows ── */
.rota-peer-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 11px;
}
.rota-peer-label { width: 92px; color: var(--muted); flex-shrink: 0; }
.rota-peer-bar-wrap {
  flex: 1; height: 18px; background: var(--surface);
  border-radius: 3px; position: relative; border: 0.5px solid var(--border);
}
.rota-peer-dist {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, transparent,
    rgba(15,110,86,.18) 20%, rgba(15,110,86,.18) 80%, transparent);
  border-radius: 3px;
}
.rota-peer-me {
  position: absolute; top: -3px; bottom: -3px; width: 3px;
  background: var(--teal); border-radius: 2px;
}
.rota-peer-me::after {
  content: 'you'; position: absolute; top: -13px; left: -11px;
  font-size: 9px; font-weight: 700; color: var(--teal);
}
.rota-peer-val {
  width: 150px; font-size: 10.5px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.rota-peer-val strong { color: var(--text); font-weight: 700; }

/* ── Personal overtime chips ── */
.rota-ot-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; background: var(--red-bg); color: var(--red);
  border: 0.5px solid rgba(163,45,45,.35); border-radius: 11px;
  font-size: 10.5px; font-weight: 500;
}
.rota-ot-chip strong { font-weight: 700; margin-right: 4px; }

/* ── PD overtime analytics ── */
.rota-ot-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.rota-ot-kpi {
  padding: 8px 10px; background: var(--surface); border-radius: 6px;
  border-left: 2px solid var(--red);
}
.rota-ot-kpi-val {
  font-size: 18px; font-weight: 700; color: var(--red); line-height: 1.1;
}
.rota-ot-kpi-lbl {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .3px; margin-top: 2px;
}
.rota-ot-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.rota-ot-bar-lbl {
  width: 130px; font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rota-ot-bar-track {
  flex: 1; height: 13px; background: var(--surface2);
  border-radius: 3px; overflow: hidden; border: 0.5px solid var(--border);
}
.rota-ot-bar-fill {
  height: 100%; background: var(--red); opacity: .75; border-radius: 3px;
}
.rota-ot-bar-val {
  width: 48px; text-align: right; font-size: 10.5px;
  color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .rota-peer-label { width: 80px; }
  .rota-peer-val { width: 120px; font-size: 10px; }
  .rota-ot-bar-lbl { width: 100px; }
}

@media (max-width: 700px) {
  .rota-analytics-panel{
    padding:12px 10px;
    border-radius:12px;
  }
  .rota-analytics-kpi{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin-bottom:12px;
  }
  .rota-kpi-card{
    min-height:96px;
    padding:12px 10px;
    border-radius:10px;
  }
  .rota-kpi-val{font-size:24px;}
  .rota-kpi-label{font-size:10px;letter-spacing:.04em;text-transform:uppercase;}
  .rota-kpi-sub{font-size:10px;line-height:1.35;}
  .rota-analytics-chart-box{
    padding:12px 10px;
    border-radius:10px;
  }
  .rota-analytics-chart-title{
    font-size:10px;
    margin-bottom:8px;
  }
  #rota-total-bars,
  #rota-stacked-bars{
    gap:6px !important;
  }
  #rota-total-bars > div,
  #rota-stacked-bars > div{
    gap:8px !important;
    align-items:center !important;
  }
  #rota-total-bars > div > span:first-child,
  #rota-stacked-bars > div > span:first-child{
    width:54px !important;
    text-align:left !important;
    font-size:10px !important;
  }
  #rota-total-bars > div > span:last-child,
  #rota-stacked-bars > div > span:last-child{
    width:34px !important;
    font-size:10px !important;
  }
  .rota-analytics-legend{
    gap:6px;
    margin-top:10px;
  }
  .rota-legend-pill{
    font-size:9.5px;
    padding:4px 6px;
    border-radius:999px;
    background:var(--surface);
    border:1px solid var(--border);
  }
  .rota-heatmap-grid{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .rota-donut-wrap{
    flex-direction:column;
    align-items:flex-start !important;
    gap:10px !important;
  }
  .rota-donut-labels{
    width:100%;
  }
  .rota-donut-labels > div{
    justify-content:space-between;
    width:100%;
    padding:4px 0;
    border-bottom:1px solid var(--border);
  }
  .rota-donut-labels > div:last-child{border-bottom:none;}
  #rotaHighlights > div{
    padding:6px 0 !important;
    gap:8px;
  }
  #rotaHighlights > div > span:first-child{
    font-size:10px !important;
    max-width:42%;
    line-height:1.35;
  }
  .rota-hours-table-wrap{
    margin-left:-2px;
    margin-right:-2px;
    padding:4px 4px 2px;
  }
  .rota-hours-table{
    min-width:640px;
    font-size:10px;
  }
  .rota-hours-table th,
  .rota-hours-table td{
    padding:5px 6px;
  }
}

@media (max-width: 420px) {
  .rota-analytics-kpi{
    grid-template-columns:1fr;
  }
  .rota-kpi-card{
    min-height:82px;
  }
  .rota-kpi-val{font-size:22px;}
}

/* ═══════════════════════════════════════════════════════════════════════
   CBL ROTA MODULE STYLES  v2.3.1
   Uses tracker CSS variables for full dark/light theme support
═══════════════════════════════════════════════════════════════════════ */

/* ── Root container ── */
.cbl-root { padding: 0; }

/* ── Sub-navigation tabs ── */
.cbl-subnav {
  display: flex; background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto; margin: -28px -32px 0; padding: 0 32px;
}
.cbl-subnav-tab {
  padding: 11px 16px; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--muted); white-space: nowrap; flex-shrink: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.cbl-subnav-tab:hover { color: var(--text); }
.cbl-subnav-tab.active { color: var(--teal); border-bottom-color: var(--teal); }

/* ── Quarter bar ── */
.cbl-qbar {
  display: flex; align-items: center; gap: 8px; padding: 10px 0;
  background: var(--bg); border-bottom: 1px solid var(--border);
  margin: 0 -32px; padding: 10px 32px;
  overflow-x: auto;
}
.cbl-qbar-lbl { font-size: 10px; color: var(--muted); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.cbl-qpill {
  padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--border);
  font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
  background: var(--surface); color: var(--muted); cursor: pointer; transition: all .13s;
}
.cbl-qpill:hover { border-color: var(--teal); color: var(--teal); }
.cbl-qpill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Toolbar ── */
.cbl-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 10px 0 8px;
  flex-wrap: wrap;
}
.cbl-pill {
  padding: 5px 13px; border-radius: 20px; border: 1.5px solid var(--border);
  font-size: 11px; font-weight: 700; background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all .13s; white-space: nowrap;
}
.cbl-pill:hover { border-color: var(--teal); color: var(--teal); }
.cbl-pill.active { background: rgba(52,211,153,.12); border-color: var(--teal); color: var(--teal); }
.cbl-pill-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.cbl-pill-primary:hover { filter: brightness(1.08); color: #fff; border-color: var(--accent); }
.cbl-pill-teal {
  background: var(--teal); color: var(--bg); border-color: var(--teal); font-weight: 800;
}
.cbl-pill-teal:hover { filter: brightness(1.06); color: var(--bg); border-color: var(--teal); }
.cbl-pill-danger {
  background: transparent; color: var(--red); border-color: var(--red); font-weight: 700;
}
.cbl-pill-danger:hover { background: var(--red); color: #fff; border-color: var(--red); filter: none; }

/* ── Legend ── */
.cbl-legend {
  display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 0 10px;
  border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.cbl-leg-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); font-weight: 600; }
.cbl-leg-dot  { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* ── Week header ── */
.cbl-week-hdr {
  display: flex; align-items: baseline; gap: 8px;
  padding: 16px 0 6px;
  /* v2.9.4: leave a bit of breathing room at the top so the scroll helper
     doesn't flush the header against the sticky app header. */
  scroll-margin-top: 80px;
}
.cbl-week-num { font-size: 10px; font-weight: 800; color: var(--teal); text-transform: uppercase; letter-spacing: .8px; }
.cbl-week-range { font-size: 11px; color: var(--muted); }
.cbl-week-hdr--current {
  /* v2.9.4: make the current-week header visually obvious so users instantly
     see why the page landed here. */
  background: linear-gradient(90deg, rgba(243,156,18,.08) 0%, transparent 85%);
  border-left: 3px solid var(--accent);
  padding-left: 8px;
  border-radius: 4px;
}
.cbl-week-hdr--current .cbl-week-num { color: var(--accent); }
.cbl-now-pill {
  font-size: 9px; font-weight: 800; background: var(--accent); color: #fff;
  padding: 1px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .2px;
}

/* ── Session card ── */
.cbl-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--teal); border-radius: 10px;
  padding: 12px 14px 12px 16px; margin-bottom: 8px;
  display: flex; gap: 12px; align-items: flex-start;
  cursor: pointer; transition: box-shadow .15s, transform .1s;
  position: relative;
}
.cbl-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); transform: translateY(-1px); }
.cbl-card--far    { border-left-color: var(--amber); }
.cbl-card--drtc   { border-left-color: var(--purple); }
.cbl-card--skills { border-left-color: var(--green); }
.cbl-card--mm     { border-left-color: var(--red); }
.cbl-card--dept   { border-left-color: var(--muted); }
.cbl-card--journal{ border-left-color: var(--accent); }
.cbl-card--cat    { border-left-color: var(--purple); }
.cbl-card--holiday{ border-left-color: var(--border); }
.cbl-card--mine   { border-left-color: var(--amber); background: var(--surface2); }
.cbl-card--blocked{ opacity: .38; pointer-events: none; cursor: default !important; }
.cbl-card--past   { opacity: .72; }

/* Date column */
.cbl-card-date { min-width: 48px; text-align: center; flex-shrink: 0; padding-top: 2px; }
.cbl-date-dow { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.cbl-date-day { font-size: 22px; font-weight: 900; color: var(--text); line-height: 1.05; letter-spacing: -1px; }
.cbl-date-mon { font-size: 10px; color: var(--muted); font-weight: 600; }

.cbl-card-divider { width: 1px; background: var(--border); align-self: stretch; flex-shrink: 0; }

/* Body */
.cbl-card-body { flex: 1; min-width: 0; }
.cbl-type-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 12px;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 5px;
}
.cbl-card-topic { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 7px; }
.cbl-card-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cbl-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px;
  font-size: 10px; color: var(--text); font-weight: 500;
}
.cbl-chip--warn {
  background: var(--red-bg); border-color: rgba(255,77,79,.25);
  color: var(--red); font-weight: 600; font-size: 10px;
}
.cbl-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cbl-dot--p { background: var(--teal); }
.cbl-dot--f { background: var(--purple); }
.cbl-chip-lbl { font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-right: 2px; }

.cbl-card-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cbl-venue {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
}
.cbl-venue--virtual  { background: rgba(45,140,255,.12); color: #2D8CFF; }
.cbl-venue--physical { background: var(--green-bg); color: var(--green); }
.cbl-venue--pending  { background: var(--amber-bg); color: var(--amber); font-size: 9px; }
.cbl-venue--pretest  { background: rgba(167,139,250,.12); color: var(--purple); font-size: 9px; font-weight: 700; }
.cbl-blocked-msg { font-size: 9px; color: var(--muted); margin-top: 5px; font-style: italic; }

/* Mine badge */
.cbl-mine-badge {
  position: absolute; top: 8px; right: 10px;
  background: var(--amber); color: var(--bg);
  font-size: 8px; font-weight: 800; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; letter-spacing: .3px;
}

/* Action column */
.cbl-card-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; align-self: center; }
.cbl-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 7px; border: 1.5px solid var(--border);
  font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer;
  background: var(--surface2); color: var(--text); transition: all .12s; font-family: inherit;
}
.cbl-btn--zoom   { background: #2D8CFF !important; color: #fff !important; border-color: #2D8CFF !important; }
.cbl-btn--zoom:hover { filter: brightness(1.1); }
.cbl-btn--mcq    { background: rgba(167,139,250,.12); color: var(--purple); border-color: rgba(167,139,250,.3); }
.cbl-btn--ln     { background: var(--green-bg); color: var(--green); border-color: rgba(34,197,94,.3); }
.cbl-btn--teal   { background: var(--teal); color: var(--bg); border-color: var(--teal); font-weight: 800; }
.cbl-btn--teal:hover { filter: brightness(1.08); }
.cbl-btn--ghost  { background: var(--surface); color: var(--muted); border-color: var(--border); }
.cbl-btn--ghost:hover { border-color: var(--text); color: var(--text); }
.cbl-btn--danger { background: var(--red-bg); color: var(--red); border-color: rgba(255,77,79,.3); }
.cbl-btn--muted  { background: var(--surface2); color: var(--muted); border-color: var(--border); font-size: 10px; }

/* ── Suggestion banner (bottom) ── */
.cbl-suggestion {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; margin-top: 20px; cursor: pointer; transition: border-color .15s;
}
.cbl-suggestion:hover { border-color: var(--teal); }
.cbl-suggestion-text { font-size: 12px; color: var(--muted); flex: 1; line-height: 1.4; }
.cbl-suggestion-text strong { color: var(--text); }

/* ── Overlays ── */
.cbl-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 800; align-items: flex-end; justify-content: center;
}
.cbl-overlay.open { display: flex; }
.cbl-sheet {
  background: var(--surface); border-radius: 18px 18px 0 0;
  width: 100%; max-width: 540px;
  padding: 20px 22px 48px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0,0,0,.3);
  animation: cblSlideUp .22s cubic-bezier(.2,.8,.4,1);
}
@keyframes cblSlideUp { from { transform: translateY(32px); opacity: 0; } }
.cbl-sheet-handle { width: 34px; height: 3px; background: var(--border); border-radius: 2px; margin: 0 auto 18px; }
.cbl-sheet-close {
  position: absolute; top: 14px; right: 16px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 50%;
  width: 28px; height: 28px; font-size: 13px; color: var(--muted); cursor: pointer;
}

/* ── Centre modals ── */
.cbl-c-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 900; align-items: center; justify-content: center; padding: 20px;
}
.cbl-c-overlay.open { display: flex; }
.cbl-c-modal {
  background: var(--surface); border-radius: 14px; border: 1px solid var(--border);
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: cblSlideUp .2s cubic-bezier(.2,.8,.4,1);
}

/* ── Detail sheet ── */
.cbl-detail-date  { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.cbl-detail-topic { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 14px; line-height: 1.25; }
.cbl-detail-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.cbl-detail-field { background: var(--surface2); border-radius: 8px; padding: 9px 12px; }
.cbl-detail-lbl   { font-size: 9px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.cbl-detail-val   { font-size: 13px; font-weight: 700; color: var(--text); }
.cbl-detail-val--warn { color: var(--red); font-style: italic; }
.cbl-sec-title    {
  font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase;
  letter-spacing: .8px; padding: 12px 0 7px; border-top: 1px solid var(--border); margin-top: 12px;
}

/* Resident action buttons */
.cbl-rab {
  width: 100%; padding: 12px 14px; border-radius: 9px; border: none;
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
  cursor: pointer; transition: filter .12s; text-align: left; font-family: inherit;
}
.cbl-rab:hover { filter: brightness(1.07); }
.cbl-rab-label { font-size: 13px; font-weight: 800; color: #fff; }
.cbl-rab-sub   { font-size: 10px; color: rgba(255,255,255,.7); margin-top: 1px; }
.cbl-rab--zoom    { background: linear-gradient(110deg,#2D8CFF,#1a6fd4); }
.cbl-rab--mcq     { background: linear-gradient(110deg,var(--purple),#7c5cbf); }
.cbl-rab--ln      { background: linear-gradient(110deg,var(--teal),#0a9b5e); }
.cbl-rab--pretest { background: linear-gradient(110deg,var(--accent),#0891b2); }

/* Feedback cards */
.cbl-fb-card {
  background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--teal);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}
.cbl-fb-meta {
  font-size: 10px; color: var(--muted); margin-bottom: 5px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.cbl-fb-body { font-size: 12px; color: var(--text); line-height: 1.45; }
.cbl-fb-tag  {
  padding: 1px 7px; border-radius: 8px; font-size: 8px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; flex-shrink: 0;
}
.cbl-reading-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.cbl-reading-row:last-child { border-bottom: none; }
.cbl-reading-title { font-size: 12px; font-weight: 700; color: var(--text); }
.cbl-reading-meta  { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* Pre-test card */
.cbl-pretest-card {
  background: rgba(167,139,250,.08); border: 1px solid rgba(167,139,250,.25);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}

/* SA controls */
.cbl-vt-btn {
  flex: 1; padding: 8px; border-radius: 7px; border: 1.5px solid var(--border);
  background: var(--surface); font-size: 11px; font-weight: 700; color: var(--muted);
  cursor: pointer; transition: all .13s; font-family: inherit;
}
.cbl-vt-btn.on { border-color: var(--teal); background: rgba(52,211,153,.1); color: var(--teal); }

/* ── Form elements ── */
.cbl-fg { margin-bottom: 12px; }
.cbl-fl { display: block; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.cbl-input, .cbl-select, .cbl-textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; color: var(--text); background: var(--surface2);
  font-family: inherit; transition: border-color .13s; outline: none;
}
.cbl-input:focus, .cbl-select:focus, .cbl-textarea:focus { border-color: var(--teal); background: var(--surface); }
.cbl-textarea { resize: vertical; min-height: 70px; }
.cbl-tpill {
  padding: 4px 11px; border-radius: 20px; border: 1.5px solid var(--border);
  font-size: 10px; font-weight: 700; background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.cbl-tpill.on { background: var(--teal); color: var(--bg); border-color: var(--teal); }
.cbl-sub-pill {
  padding: 3px 9px; border-radius: 12px; border: 1.5px solid var(--border);
  font-size: 10px; font-weight: 700; background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.cbl-sub-pill.on { background: var(--purple); color: #fff; border-color: var(--purple); }
.cbl-modal-info { font-size: 10px; color: var(--muted); background: var(--surface2); border-radius: 6px; padding: 7px 9px; margin-bottom: 14px; }
.cbl-inline-btn {
  padding: 8px 14px; border-radius: 7px; border: none;
  background: var(--teal); color: var(--bg); font-size: 11px; font-weight: 800;
  cursor: pointer; align-self: flex-end; white-space: nowrap; font-family: inherit;
}

/* ── MCQ sheet ── */
.cbl-mcq-opt {
  width: 100%; padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 12px; font-weight: 500; background: var(--surface); cursor: pointer;
  transition: all .13s; text-align: left; color: var(--text); font-family: inherit;
}
.cbl-mcq-opt:hover:not(:disabled) { border-color: var(--purple); background: rgba(167,139,250,.06); }
.cbl-mcq-opt.correct { border-color: var(--green) !important; background: var(--green-bg) !important; color: var(--green) !important; }
.cbl-mcq-opt.wrong   { border-color: var(--red)   !important; background: var(--red-bg)   !important; color: var(--red)   !important; }
.cbl-mcq-opt.selected{ border-color: var(--purple); background: rgba(167,139,250,.08); color: var(--purple); }
.cbl-mcq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: all .2s; display: inline-block; }
.cbl-mcq-dot.active { width: 16px; border-radius: 4px; background: var(--purple); }
.cbl-mcq-dot.done   { background: var(--green); }
.cbl-mcq-nav { padding: 8px 18px; border-radius: 7px; border: none; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; }
.cbl-mcq-nav--prev { background: var(--surface2); color: var(--muted); }
.cbl-mcq-nav--next { background: var(--purple); color: #fff; }

/* ── LN sheet ── */
.cbl-ln-box  { background: var(--surface2); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.cbl-ln-link { background: var(--green-bg); border: 1px solid rgba(34,197,94,.25); border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ── Pre-test attempt ── */
.cbl-pretest-stats { background: var(--surface2); border-radius: 8px; padding: 10px 12px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.cbl-stat-pill { background: var(--surface); border-radius: 5px; padding: 2px 7px; font-size: 10px; font-weight: 700; color: var(--muted); }

/* ── Supervisor pane ── */
.cbl-sup-pane { padding-top: 4px; }
.cbl-reminder { background: var(--red-bg); border: 1px solid rgba(255,77,79,.25); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; }
.cbl-fac-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--teal);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  transition: box-shadow .15s;
}
.cbl-fac-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.cbl-fac-card--past { opacity: .72; border-left-color: var(--border); }
.cbl-fac-meta  { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.cbl-fac-topic { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.cbl-fac-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cbl-fac-btn {
  padding: 4px 10px; border-radius: 6px; border: 1.5px solid var(--border);
  background: var(--surface2); font-size: 10px; font-weight: 700; color: var(--muted);
  cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; gap: 4px; font-family: inherit;
}
.cbl-fac-btn--fb   { color: var(--teal); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.07); }
.cbl-fac-btn--read { color: var(--green); border-color: rgba(34,197,94,.3); background: var(--green-bg); }
.cbl-fac-btn--pretest { color: var(--purple); border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.07); }
.cbl-fac-btn--zoom { background: #2D8CFF; color: #fff; border-color: #2D8CFF; }
.cbl-fac-btn--zoom:hover { filter: brightness(1.08); }

/* ── MCQ Bank pane ── */
.cbl-bank-pane { padding-top: 4px; }
.cbl-bank-search-bar {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px;
}
.cbl-bank-input {
  width: 100%; padding: 7px 10px 7px 32px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 12px; background: var(--surface2); color: var(--text); outline: none;
  transition: border-color .13s; font-family: inherit;
}
.cbl-bank-input:focus { border-color: var(--teal); }
.cbl-topic-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.cbl-topic-pill { padding: 3px 10px; border-radius: 14px; border: 1.5px solid var(--border); font-size: 10px; font-weight: 700; background: var(--surface); color: var(--muted); cursor: pointer; transition: all .12s; font-family: inherit; }
.cbl-topic-pill--on { background: var(--purple); color: #fff; border-color: var(--purple); }
.cbl-bank-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--purple);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}
.cbl-bank-meta { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.cbl-bank-q    { font-size: 13px; color: var(--text); line-height: 1.45; font-weight: 500; }
.cbl-bank-attempt { padding: 4px 10px; border-radius: 6px; border: 1.5px solid rgba(167,139,250,.4); background: rgba(167,139,250,.08); color: var(--purple); font-size: 10px; font-weight: 800; cursor: pointer; font-family: inherit; }

/* ── SA inbox ── */
.cbl-inbox-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: box-shadow .15s; }
.cbl-inbox-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.cbl-inbox-meta { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.cbl-inbox-dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.cbl-inbox-type-tag { padding: 1px 6px; border-radius: 6px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.cbl-inbox-subject { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cbl-inbox-preview { font-size: 11px; color: var(--muted); }

/* ── Upload drop zone ── */
.cbl-upload-drop {
  border: 2px dashed var(--border); border-radius: 10px; padding: 28px 20px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
  margin-bottom: 12px;
}
.cbl-upload-drop:hover, .cbl-upload-drop.active { border-color: var(--teal); background: rgba(52,211,153,.05); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .cbl-subnav { margin: -14px -14px 0; padding: 0 14px; }
  .cbl-qbar   { margin: 0 -14px; padding: 10px 14px; }
  .cbl-detail-grid { grid-template-columns: 1fr 1fr; }

  /* Card: keep horizontal flow, compress date col, actions wrap below body */
  .cbl-card { flex-wrap: wrap; gap: 8px; padding: 10px 10px 10px 12px; }
  .cbl-card-date { min-width: 38px; }
  .cbl-date-day { font-size: 18px; }
  .cbl-card-topic { font-size: 12px; }
  .cbl-card-body { flex: 1; min-width: 0; }

  /* Chips: stay horizontal, single line, ellipsis on overflow */
  .cbl-card-chips { flex-wrap: nowrap; overflow: hidden; max-height: 2.4em; margin-bottom: 4px; }
  .cbl-chip { white-space: nowrap; flex-shrink: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

  /* Actions: full-width row below body, flowing horizontally */
  .cbl-card-actions {
    flex-direction: row; flex-wrap: wrap; gap: 5px;
    width: 100%; margin-left: 46px; align-self: auto;
  }
  .cbl-btn { font-size: 10px; padding: 5px 8px; }

  /* Tags row: stay horizontal */
  .cbl-card-tags { flex-wrap: nowrap; overflow: hidden; }
}

/* ── ACTIONED LEARNING NEEDS RAIL PANEL ──────────────────────────────────── */
.actioned-rail-panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-top:10px;}
.actioned-rail-header{margin-bottom:0;}
.actioned-rail-body{margin-top:8px;}
.actioned-rail-body.collapsed{display:none;}
.actioned-edit-source-btn{margin-left:auto;font-size:10px;background:none;border:none;color:var(--accent);cursor:pointer;padding:1px 5px;border-radius:4px;line-height:1;}
.actioned-edit-source-btn:hover{background:rgba(var(--accent-rgb),.1);}
.actioned-source-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-all;font-size:10px;}
.actioned-source-link:hover{opacity:.8;}
.actioned-pagination{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:6px;border-top:1px solid var(--border);}
.actioned-pag-btn{font-size:11px;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;}
.actioned-pag-btn:disabled{opacity:.35;cursor:not-allowed;}
.actioned-pag-info{font-size:11px;color:var(--muted);}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — v2.5.2
   Principles:
     • All tappable elements ≥ 44×44px (Apple HIG / WCAG 2.5.5)
     • :active visual feedback on every interactive element
     • iOS auto-zoom prevention (font-size ≥ 16px on inputs)
     • touch-action: manipulation on all buttons (kills 300ms delay)
     • Modals bottom-sheet on mobile (easier thumb reach)
     • Safe-area insets respected throughout
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global: touch-action on every interactive element ─────────────── */
button, [role="button"], a, label[for],
.btn, .btn-full, .btn-primary, .btn-danger,
.tab, .sub-tab, .auth-tab,
.mobile-nav-btn, .sidebar-item,
.rota-chip, .rota-filter-btn, .rota-month-btn, .rota-request-btn,
.category-toggle, .cal-day, .mcq-option,
.check-box, .checklist-del, .checklist-edit-btn,
.recent-chip, .rot-pick-item, .ww-verdict-btn, .struggle-vote,
.share-btn, .add-item-btn, .cal-save-btn, .log-btn,
.count-btn, .history-del, .copy-field-btn, .ww-read-more,
.overdue-action-btn, .overdue-dismiss-btn, .overdue-copy-btn,
.qbank-pp-btn, .qbank-pg-btn, .checklist-item,
.rota-td-editable, .rota-chip, .osats-chip,
.cbl-card, .cbl-action-btn, .cbl-filter-btn,
.insight-card, .recent-chip, .proc-cat-row {
  touch-action: manipulation;
}

/* ── Global: .btn base gets min-height ─────────────────────────────── */
.btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* ── Active state feedback (desktop uses hover; mobile needs :active) ─ */
.btn:active          { opacity: .82; transform: scale(.98); }
.btn-primary:active  { opacity: .88; }
.btn-danger:active   { opacity: .88; }

@media (max-width: 768px) {

  /* ── Core button sizing — 44px minimum touch target ─────────────── */
  .btn,
  .btn-full,
  .btn-primary,
  .btn-danger {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 8px;
  }

  /* Exception: small inline buttons inside table cells / chips */
  .btn-xs,
  .rota-chip .btn,
  td .btn {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
  }

  /* ── Count +/- buttons (procedure log) ─────────────────────────── */
  .count-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
    border-radius: 8px;
  }

  /* ── Checklist delete/edit — full 44px ─────────────────────────── */
  .checklist-del,
  .checklist-edit-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 15px;
  }

  /* ── History delete button ──────────────────────────────────────── */
  .history-del {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  /* ── Copy-field button ──────────────────────────────────────────── */
  .copy-field-btn {
    width: 40px;
    height: 40px;
  }

  /* ── WardWisdom read-more ───────────────────────────────────────── */
  .ww-read-more {
    min-height: 44px;
    padding: 8px 4px;
  }

  /* ── Rota chips — comfortable tap targets ───────────────────────── */
  .rota-chip {
    padding: 4px 10px;
    font-size: 11px;
    min-height: 28px;    /* chips stay compact but larger than before */
  }
  .rota-chip:active {
    opacity: .7;
    transform: scale(.96);
  }

  /* ── Rota filter buttons ────────────────────────────────────────── */
  .rota-filter-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 12px;
  }
  .rota-filter-btn:active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
  }

  /* ── Rota month picker buttons ──────────────────────────────────── */
  .rota-month-btn {
    min-height: 40px;
    min-width: 64px;
    font-size: 12px;
  }
  .rota-month-btn:active {
    background: var(--surface2);
  }

  /* ── Rota request button ────────────────────────────────────────── */
  .rota-request-btn {
    min-height: 44px;
    font-size: 13px;
  }

  /* ── Rota editable cells — feedback on tap ──────────────────────── */
  .rota-td-editable:active {
    background: var(--accent-bg) !important;
  }

  /* ── Auth form — comfortable padding and sizing ─────────────────── */
  .auth-wrap {
    padding: 16px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .auth-card {
    padding: 24px 20px;
    border-radius: 14px;
    width: 100%;
  }
  .auth-form-title {
    font-size: 20px;
  }

  /* ── Auth inputs and buttons ────────────────────────────────────── */
  .form-input,
  input[type="email"],
  input[type="password"],
  input[type="text"],
  textarea,
  select {
    font-size: 16px;       /* iOS auto-zoom prevention */
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 10px;
  }

  /* ── Auth tabs (Login / Register) ───────────────────────────────── */
  .auth-tab {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }

  /* ── Modals — bottom-sheet style on mobile ──────────────────────── */
  .modal-overlay {
    align-items: flex-end;       /* anchor to bottom of screen */
    padding-bottom: 0;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90dvh;
    border-radius: 20px 20px 0 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* drag handle visual cue */
    border-top: 3px solid var(--border);
  }
  /* Drag handle bar at top of bottom-sheet */
  .modal::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 16px;
  }
  /* Full-width CTAs inside modals */
  .modal-actions,
  .modal-actions-sticky {
    flex-direction: column;
    gap: 10px;
  }
  .modal-actions .btn,
  .modal-actions-sticky .btn,
  .modal-actions .btn-primary,
  .modal-actions .btn-danger {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* ── Mobile nav bottom bar ──────────────────────────────────────── */
  .mobile-nav {
    padding: 4px 0 env(safe-area-inset-bottom, 8px);
  }
  .mobile-nav-btn {
    min-width: 56px;
    min-height: 52px;
    padding: 8px 8px 4px;
    border-radius: 12px;
    font-size: 10px;
    gap: 2px;
  }
  .mobile-nav-btn svg,
  .mobile-nav-btn .nav-icon {
    font-size: 20px;
  }
  .mobile-nav-btn:active {
    background: var(--accent-bg);
    color: var(--accent);
    transform: scale(.94);
  }

  /* ── Primary and sub tabs ───────────────────────────────────────── */
  .tab {
    min-height: 44px;
    padding: 9px 14px;
    font-size: 13px;
  }
  .sub-tab {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 12px;
  }

  /* ── MCQ options — full-width, taller ──────────────────────────── */
  .mcq-option {
    padding: 14px 14px;
    min-height: 52px;
    font-size: 14px;
    line-height: 1.5;
  }

  /* ── CBL cards and action buttons ───────────────────────────────── */
  .cbl-action-btn,
  .cbl-filter-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 12px;
  }
  .cbl-action-btn:active,
  .cbl-filter-btn:active {
    opacity: .8;
  }
  .cbl-card:active {
    background: var(--surface2);
  }

  /* ── OSATS chips ────────────────────────────────────────────────── */
  .osats-chip {
    padding: 6px 12px;
    min-height: 36px;
    font-size: 12px;
  }
  .osats-chip:active {
    opacity: .8;
  }

  /* ── Insight and procedure cards — tap feedback ─────────────────── */
  .insight-card:active,
  .proc-cat-row:active {
    background: var(--surface2);
  }

  /* ── Category toggles ───────────────────────────────────────────── */
  .category-toggle {
    min-height: 52px;
    padding: 12px 16px;
  }

  /* ── Sidebar items ──────────────────────────────────────────────── */
  .sidebar-item {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
  }

  /* ── Pending approval screen button ────────────────────────────── */
  #pendingApprovalScreen button {
    min-height: 52px;
    width: 100%;
    max-width: 320px;
    font-size: 16px;
    border-radius: 12px;
  }

  /* ── Scroll performance on key containers ───────────────────────── */
  .main, .modal, .mobile-drawer,
  .recent-chips, .sub-tabs, .tabs,
  .rota-month-picker, .rota-filter-row,
  .cbl-subnav, .exam-dot-nav, .vault-dot-nav {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* ── Prevent all text-selection flicker on tap ──────────────────── */
  .tab, .sub-tab, .auth-tab, .mobile-nav-btn,
  .category-toggle, .recent-chip, .cal-day,
  .check-box, .sidebar-item, .mcq-option,
  .ww-verdict-btn, .struggle-vote,
  .mastery-cell, .rot-pick-item,
  .rota-chip, .rota-filter-btn, .rota-month-btn,
  .cbl-card, .cbl-action-btn, .osats-chip {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ── Very small phones (≤ 375px) ───────────────────────────────────── */
@media (max-width: 375px) {
  .btn, .btn-full {
    font-size: 13px;
    padding: 10px 12px;
  }
  .modal {
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .modal-actions .btn,
  .modal-actions-sticky .btn {
    min-height: 44px;
    font-size: 14px;
  }
  .mobile-nav-btn {
    min-width: 48px;
    font-size: 9px;
  }
  .tab {
    padding: 8px 10px;
    font-size: 12px;
  }
  .auth-card {
    padding: 20px 16px;
  }
}


/* ═══════════════════════════════════════════════
   MOBILE PERFORMANCE PATCH
   ═══════════════════════════════════════════════ */

/* content-visibility: auto defers rendering of off-screen view containers
   until they scroll into view — massive paint savings on mobile */
.view-container {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Reduce animation scope on mobile — only animate what the user interacts with */
@media (max-width: 768px) {
  /* Kill backdrop-filter blur on mobile — GPU-expensive, causes jank */
  .modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0,0,0,0.82) !important;
  }
  .mobile-drawer-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0,0,0,0.65) !important;
  }
  /* Disable non-essential transitions on mobile — reduces style recalc */
  .proc-card,
  .insight-card,
  .ww-card,
  .qbank-card,
  .struggle-card,
  .cbl-card,
  .rota-row {
    transition: none !important;
  }
  /* Keep only interaction-critical transitions */
  .btn,
  .tab,
  .sub-tab,
  .mobile-nav-btn {
    transition: opacity 0.1s, transform 0.1s !important;
  }
  /* Promote fixed elements to their own layer — prevents repaints */
  .mobile-nav,
  header {
    will-change: transform;
    transform: translateZ(0);
  }
  /* Prevent layout thrash from heatmap overflow */
  .heatmap-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── Sidebar group cards (v2.5.57) ─────────────────────────────────────── */
.sb-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 4px 0;
  margin-bottom: 6px;
  overflow: hidden;
}
.sb-group .sidebar-label {
  padding: 5px 10px 5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.sb-group .sidebar-item {
  border-radius: 0;
  padding: 7px 10px;
}
.sb-group .sidebar-item:hover { background: var(--surface2); }
.sb-group .sidebar-item.active { background: var(--accent-bg); }
.sidebar-section { padding: 0 12px; margin-bottom: 0; }

/* Accent rails */
.sb-group-cats      { border-left-color: var(--accent); }
.sb-group-traffic   { border-left-color: var(--green); }
.sb-group-community { border-left-color: var(--purple); }
.sb-group-actions   { border-left-color: var(--amber); }
.sb-group-account   { border-left-color: var(--muted); }
.sb-group-nav       { border-left-color: var(--accent); }

/* ── Comms Inbox (v2.5.58) ─────────────────────────────────────────────── */
.comms-shell{display:flex;min-height:520px;height:calc(100vh - 180px);height:calc(100dvh - 180px);max-height:780px;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.comms-sidebar{width:180px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface);}
.comms-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);}
.comms-nav{padding:8px 0;}
.comms-nav-item{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;font-size:12px;color:var(--text2);cursor:pointer;transition:background .1s;}
.comms-nav-item:hover{background:var(--surface2);}
.comms-nav-item.active{background:var(--accent-bg);color:var(--accent);font-weight:600;}
.comms-badge{background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px;line-height:1.5;}
.comms-main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.comms-split{display:flex;flex:1;overflow:hidden;}
.comms-list-col{width:280px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;}
.comms-detail-col{flex:1;overflow-y:auto;}
.comms-list-row{padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;}
.comms-list-row:hover{background:var(--surface2);}
.comms-list-row.selected{background:var(--accent-bg);}
.comms-list-row.unread .comms-list-subject{font-weight:700;color:var(--text);}
.comms-list-row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;}
.comms-list-from{font-size:12px;font-weight:600;color:var(--text);}
.comms-list-date{font-size:10px;color:var(--muted);}
.comms-list-subject{font-size:12px;color:var(--text2);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comms-list-preview{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comms-list-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;}
.comms-chip{font-size:10px;padding:2px 6px;border-radius:99px;font-weight:600;border:1px solid transparent;}
.comms-chip-ack{background:rgba(21,128,61,.1);color:var(--green);border-color:rgba(21,128,61,.2);}
.comms-chip-act{background:rgba(59,130,246,.1);color:var(--blue,#3b82f6);border-color:rgba(59,130,246,.2);}
.comms-chip-unread{background:rgba(180,83,9,.1);color:var(--amber);border-color:rgba(180,83,9,.2);}
.comms-chip-reply{background:rgba(15,118,110,.1);color:var(--teal);border-color:rgba(15,118,110,.2);}
.comms-chip-pending{background:var(--surface2);color:var(--muted);border-color:var(--border);}
.comms-detail{padding:20px;height:100%;overflow-y:auto;}
.comms-detail-subject{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px;}
.comms-detail-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.comms-detail-actions{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:10px 12px;background:var(--surface2);border-radius:7px;border:1px solid var(--border);}
.comms-detail-body{font-size:13px;color:var(--text);line-height:1.65;margin-bottom:16px;}
.comms-detail-section-label{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;}
.comms-receipts-table{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}
.comms-receipt-row{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:var(--surface2);border-radius:6px;font-size:12px;}
.comms-receipt-name{color:var(--text);font-weight:500;}
.comms-receipt-chips{display:flex;gap:4px;}
.comms-reply-block{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:12px;}
.comms-reply-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;}
.comms-reply-body{font-size:12px;color:var(--text);line-height:1.6;}
.comms-compose-wrap{padding:20px;max-width:640px;}
.comms-compose-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:16px;}
.comms-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px 20px;text-align:center;color:var(--muted);font-size:13px;min-height:200px;}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE REFINEMENT PASS — v2.5.72
   Focus:
     • cleaner small-screen header/search/auth layouts
     • more resilient card/form grids on phones
     • better PD resident workspace stacking
   ═══════════════════════════════════════════════════════════════════════════ */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}
button, [type="button"], [type="submit"], a, [onclick],
.btn, .btn-full, .btn-primary, .btn-danger, .pd-res-action-btn,
.pd-res-progress-card, .pd-res-pgy-chip, .pd-residents-subtab,
.pd-res-detail-tab, .rota-banner, .rota-modal-close{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
main, .main, .page-header, .page-header-tools, .page-header-actions,
.dashboard-split-main, .dashboard-split-rail, .pd-res-main-area,
.pd-res-tab-content, .pd-res-detail-body, .account-settings-panel{
  min-width:0;
}
.auth-email-row{
  align-items:stretch;
}
.page-header-tools,
.page-header-actions{
  min-width:0;
}
.page-header-actions > *{
  max-width:100%;
}

/* Header wrap is tablet-only (769–900px). Below 769px the compact
   single-row mobile header (height:52px, see the max-width:768px block)
   MUST win — this wrap was written for the pre-v3.5.0 header and otherwise
   clobbers the phone topbar, collapsing the primary-nav tabs into a ~64px
   sliver and wrapping the header to two rows. Only header + .header-right
   are scoped out; the rest of the ≤900px tweaks still apply to phones. */
@media (min-width: 769px) and (max-width: 900px) {
  header{
    height:auto;
    min-height:60px;
    padding-top:10px;
    padding-bottom:10px;
    gap:10px;
    flex-wrap:wrap;
  }
  .header-right{
    min-width:0;
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
}

@media (max-width: 900px) {
  .logo{
    min-width:0;
    flex:1 1 220px;
  }
  .page-header{
    gap:14px;
    align-items:stretch;
  }
  .page-header-tools{
    align-items:stretch !important;
  }
  .page-header-actions{
    justify-content:stretch !important;
  }
  .page-header-actions .search-bar{
    flex:1 1 100%;
    width:100% !important;
  }
  .page-header-actions .btn,
  .page-header-actions .far-link-chip{
    flex:1 1 calc(50% - 4px);
    justify-content:center;
  }
  .stats-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .stats-row .stat-card:last-child{
    grid-column:1 / -1;
  }
  .account-settings-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px) {
  #authScreen{
    padding:16px 12px max(16px, env(safe-area-inset-bottom, 0px));
    align-items:stretch;
  }
  .auth-card{
    width:100%;
    margin:auto 0;
    padding:22px 16px;
    border-radius:14px;
  }
  .auth-logo{
    margin-bottom:22px;
  }
  .auth-logo-title{
    font-size:20px;
  }
  .auth-logo-sub{
    line-height:1.4;
  }
  .auth-email-row{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  .auth-tabs{
    margin-bottom:18px;
  }
  .page-title{
    font-size:22px;
  }
  .page-subtitle{
    line-height:1.5;
  }
  .page-header-actions{
    display:grid !important;
    grid-template-columns:1fr;
    gap:8px !important;
  }
  .page-header-actions .btn,
  .page-header-actions .far-link-chip,
  .page-header-actions .search-bar{
    width:100% !important;
    min-width:0;
  }
  .page-header-actions .far-link-chip{
    min-height:44px;
  }
  .btn,
  .btn-full,
  .btn-primary,
  .btn-danger,
  .pd-res-action-btn,
  .pd-res-progress-card,
  .pd-residents-subtab,
  .pd-res-detail-tab,
  .pd-res-pgy-chip,
  .rota-banner,
  .rota-modal-close,
  .mobile-drawer-close{
    min-height:44px;
    pointer-events:auto;
  }
  .pd-res-pgy-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
  }
  .pd-residents-subtab,
  .pd-res-detail-tab{
    display:inline-flex;
    align-items:center;
  }
  .pd-res-action-btn{
    padding:10px 12px;
  }
  .pd-res-progress-card{
    padding:12px;
  }
  .rota-banner{
    display:flex;
    align-items:center;
  }
  .rota-modal-close,
  .mobile-drawer-close{
    width:44px;
    height:44px;
    padding:0;
    align-items:center;
    justify-content:center;
  }
  .main{
    padding:12px 12px 86px;
  }
  .stats-row{
    grid-template-columns:1fr;
  }
  .stat-card{
    padding:12px;
  }
  .calendar-card,
  .history-panel,
  .mcq-card,
  .qbank-card,
  .ww-card,
  .ll-card,
  .account-settings-panel,
  .rota-panel{
    padding:14px;
    border-radius:10px;
  }
  .account-settings-item{
    flex-direction:column;
    gap:6px;
  }
  .account-settings-item strong{
    text-align:left;
    max-width:100%;
  }
  .pd-residents-topbar{
    flex-direction:column;
    align-items:stretch;
    padding:12px 14px;
  }
  .pd-residents-topbar > *{
    width:100%;
  }
  .pd-residents-subtabs{
    padding:0 12px;
  }
  .pd-residents-workspace{
    flex-direction:column;
    min-height:0;
  }
  .pd-res-list-col{
    width:100%;
    height:auto;
    max-height:42vh;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .pd-res-list-scroll{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:6px;
    padding:8px;
  }
  .pd-res-list-row{
    width:100%;
    margin-bottom:0;
    padding:10px;
  }
  .pd-res-list-actions{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .pd-res-detail-head{
    align-items:flex-start;
    padding:12px 14px;
  }
  .pd-res-detail-tabs{
    padding:0 10px;
  }
  .pd-res-tab-content,
  .pd-res-detail-body{
    padding:12px;
  }
  .pd-res-mini-stat-grid{
    grid-template-columns:1fr;
  }
  .pd-res-progress-line{
    grid-template-columns:minmax(70px,84px) minmax(0,1fr) 34px;
  }
  .pd-res-assessment-row,
  .pd-res-exam-row{
    grid-template-columns:1fr !important;
    gap:6px;
    padding:10px 12px;
  }
  .pd-res-exam-header{
    display:none;
  }
  .roles-table-wrap,
  .rota-table-scroll,
  .rota-table-scroll-mobile-safe,
  .rota-hours-table-wrap{
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width: 420px) {
  .main{
    padding-left:10px;
    padding-right:10px;
  }
  .logo-text{
    font-size:14px;
  }
  .logo-credit{
    font-size:9px;
  }
  .page-title{
    font-size:20px;
  }
  .mobile-nav-btn{
    min-width:50px;
    padding-left:6px;
    padding-right:6px;
  }
  .mobile-nav-label{
    font-size:8.5px;
    letter-spacing:.35px;
  }
  .auth-card{
    padding:20px 14px;
  }
}

@media (max-width: 768px) {
  .mobile-nav,
  header{
    will-change:auto !important;
    transform:none !important;
  }
  .mobile-nav{
    z-index:260;
  }
  .modal-overlay,
  .mobile-drawer-overlay,
  .rota-modal-overlay{
    touch-action:manipulation;
  }
  .mobile-nav-btn,
  .btn,
  .btn-full,
  .pd-res-action-btn,
  .pd-res-progress-card,
  .rota-request-btn,
  .rota-filter-btn,
  .rota-month-btn{
    cursor:pointer;
    pointer-events:auto;
  }
}

/* ═══════════════════════════════════════════════
   MOBILE INTERACTION FIX — v3.5.8 (was v2.5.75)
   Root causes addressed:
   1. html/body overflow-x causing touch event loss on iOS
   2. Missing touch-action on scrollable containers
   3. Invisible overlay elements blocking taps
   4. 300ms click delay on interactive elements
   5. `touch-action: pan-y` silently killed pinch-zoom — switched to
      `pan-y pinch-zoom` so users can zoom content while still panning.
   6. Safety-net selector was too aggressive on .rota-modal-overlay
      (stripped pointer-events from live modals that lacked `.open`).
      Scoped to `:empty` so only abandoned/empty overlays are blocked.
   ═══════════════════════════════════════════════ */

/* ── Prevent any invisible fixed element blocking touches ── */
/* Any fixed/absolute element that is hidden must not intercept touches.
   For .rota-modal-overlay we only strip pointer-events when the element
   is EMPTY (no children) — that's the abandoned-ghost-overlay case. Live
   overlays always have children injected at insertion time. */
.modal-overlay:not(.open),
.mobile-drawer-overlay:not(.open),
.rota-modal-overlay:empty,
#loadingScreen.hidden,
#authScreen.hidden {
  pointer-events: none !important;
}

/* ── GHOST-OVERLAY TAP THIEF (root cause of "auth fields/buttons dead on
      mobile") ───────────────────────────────────────────────────────────
   A closed .modal-overlay is opacity:0 but NOT display:none, so it stays in
   the render tree. Two escapes defeated the guard above:
     1. Several overlays carry an INLINE z-index (accountPendingOverlay:1150,
        signerPinLockOverlay:1200, profileGateModal:9999) that overrides the
        plain `z-index:-1` burial rule, so the invisible overlay sits ON TOP.
     2. `pointer-events` is inherited, but the overlay's buttons re-enable it
        (computed pointer-events:auto), so elementFromPoint returns an
        invisible centered button — it swallows every tap on the login form
        and blocks touch-scroll.
   Force any closed overlay fully inert AND behind content. `!important` is
   required to beat the inline z-index. Overlays open via `.open`, so a live
   modal is never affected. */
.modal-overlay:not(.open) {
  z-index: -1 !important;
}
.modal-overlay:not(.open) * {
  pointer-events: none !important;
}

/* ── Remove 300ms tap delay globally ── */
/* touch-action: manipulation allows pan-x, pan-y, and pinch-zoom while
   disabling the 300ms double-tap-zoom delay. Safe for interactive elements. */
a, button, [onclick], [role="button"],
.btn, .btn-full, .btn-primary, .btn-danger,
.tab, .sub-tab, .sidebar-item, .mobile-nav-btn,
.category-toggle, .recent-chip, .proc-card,
.mcq-option, .cal-day, .ww-card, .qbank-card,
.auth-tab, .mastery-cell, .pd-res-list-item,
.rota-cell, .rota-request-btn, .rota-filter-btn {
  touch-action: manipulation;
}

/* ── Scrollable containers: universal touch-scroll fix (v3.5.8) ──── */
/* `pan-y pinch-zoom` lets iOS/Android pan vertically AND pinch-zoom. Plain
   `pan-y` silently disables pinch — see v3.5.8 bug fix for mobile zoom.
   overscroll-behavior-y:contain prevents scroll-chaining to outer page. */
[style*="overflow-y:auto"],
[style*="overflow-y: auto"],
[style*="overflow:auto"],
[style*="overflow: auto"],
[style*="overflow-y:scroll"],
[style*="overflow-y: scroll"] {
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Named scrollable containers (overflow set via CSS, not inline style) */
.main,
.mobile-drawer,
.sidebar,
.modal,
.modal-overlay,
#authScreen,
.pd-res-list-scroll,
.pd-res-tab-content,
.pd-res-detail-body,
.pd-res-feedback-grid,
.comms-main,
.comms-list-col,
.comms-detail-col,
.comms-detail,
.osats-queue-body,
.rota-timeline-scroll,
.rota-ai-chat,
#overdueLearningPanel {
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── Horizontal scrollers: pan-x ── */
.tabs,
.sub-tabs,
.recent-chips,
.rota-table-scroll,
.rota-table-scroll-mobile-safe,
.rota-hours-table-wrap,
.roles-table-wrap,
.timeline-wrap {
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Mobile: scroll container architecture (v3.5.12) ──────────────────
   Switch .layout from grid to flex column on mobile. In the original
   grid design, .main (sole grid cell) did NOT get a bounded height
   consistently across iOS/Android — grid auto-rows + stretch-available
   interacts badly with some WebKit builds, making .main's overflow:auto
   a no-op. The v3.5.11 attempt at `overflow: hidden` on .layout killed
   scroll entirely because .main was still unconstrained.

   Flex column with .main as `flex:1; min-height:0` is the bulletproof
   scroll-container pattern for mobile PWAs. .main gets a definite,
   flex-distributed height → overflow:auto works on every browser.
   Desktop continues to use the grid (sidebar + main). */
@media (max-width: 768px) {
  .layout {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
  }

  /* Ensure the app shell never traps touch events with hidden overflow */
  #appShell {
    overflow-x: hidden;
  }

  /* Bottom nav: must always be tappable, never covered */
  .mobile-nav {
    pointer-events: auto !important;
    z-index: 260;
    isolation: isolate;
  }

  /* Ensure mobile nav buttons are fully tappable */
  .mobile-nav-btn {
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1;
  }

  /* Header menu button */
  #mobileMenuBtn {
    pointer-events: auto !important;
    touch-action: manipulation;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Prevent invisible overlay z-index collision with nav */
  .modal-overlay:not(.open),
  .mobile-drawer-overlay:not(.open) {
    z-index: -1;
  }

  /* iOS safe area padding for bottom nav */
  .mobile-nav {
    padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));
  }

  /* Ensure .main bottom padding accounts for nav + safe area */
  .main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.7.0 DESIGN REFRESH — Polish & Consistency Pass
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Topbar: tighter logo area ── */
.logo-sub{font-size:10px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-top:1px;}
.logo-credit{font-size:9px;font-style:italic;font-family:'DM Serif Display',serif;letter-spacing:.4px;color:var(--teal);margin-top:1px;display:block;}
.logo-text{font-size:16px;}
.logo-mark{width:30px;height:30px;border-radius:7px;font-size:14px;}

/* ── Sync indicator: hide label on small screens cleanly ── */
@media(max-width:900px){.sync-indicator span#syncLabel{display:none;}}

/* ── Main tab strip: softer pill style ── */
.tabs{display:flex;gap:3px;background:var(--surface2);border:0.5px solid var(--border);padding:3px;border-radius:8px;width:fit-content;}
.tab{padding:5px 13px;border-radius:5px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:all .12s;}
.tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12);}
.tab:hover:not(.active){color:var(--text);background:rgba(255,255,255,.04);}

/* ── Sidebar: left border active indicator ── */
.sidebar-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:6px;cursor:pointer;transition:background .1s;gap:8px;border-left:2px solid transparent;}
.sidebar-item.active{background:var(--accent-bg);color:var(--accent);border-left-color:var(--accent);}
.sidebar-item.active .sidebar-count{background:var(--accent);color:#fff;}
.sidebar-label{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:var(--muted);padding:8px 8px 4px;font-weight:600;}

/* ── Overall stats sidebar card: cleaner ── */
.overall-stats{padding:12px 14px;margin:0 0 8px;background:var(--surface2);border-radius:8px;border:0.5px solid var(--border);}
.overall-title{font-size:10px;color:var(--muted);margin-bottom:7px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;}
.overall-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.overall-bar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--accent));border-radius:3px;transition:width .5s ease;}

/* ── Dashboard role strip: refined ── */
.dashboard-role-strip{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;border:0.5px solid var(--border);border-radius:10px;background:var(--surface);}

/* ── Insight card: 0.5px border (already in CSS above, ensure cascade wins) ── */
.insight-card{background:var(--surface);border:0.5px solid var(--border);border-radius:10px;padding:16px 18px;}

/* ── Insight card value: neutral text colour (semantic status from pill now) ── */
.insight-card-val{font-family:'DM Serif Display',serif;font-size:26px;color:var(--text);}

/* ── Stat card labels: tighter uppercase ── */
.insight-card-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.9px;margin-bottom:8px;font-weight:600;}

/* ── Dashboard action buttons: pill-shaped for better affordance ── */
.btn.btn-dashboard-action{border-radius:99px;font-size:12px;padding:6px 14px;}

/* ── Role desk tab strip mobile: scrollable ── */
@media(max-width:768px){
  .role-desk-tabs{gap:1px;}
  .role-desk-tab{padding:6px 10px;font-size:12px;}
  .rtab-badge{display:none;}
}

/* ── My Desk panel: role rows ── */
.mydesk-role-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:0.5px solid var(--border);}
.mydesk-role-row:last-child{border-bottom:none;padding-bottom:0;}
.mydesk-role-label{font-size:12px;font-weight:500;color:var(--text);width:148px;flex-shrink:0;line-height:1.3;}
.mydesk-role-sub{font-size:10px;color:var(--muted);display:block;font-weight:400;margin-top:1px;}
.mydesk-stat-block{flex:1;display:flex;align-items:center;gap:8px;min-width:0;}
.mydesk-num{font-family:'DM Serif Display',serif;font-size:22px;font-weight:400;width:32px;text-align:right;flex-shrink:0;}
.mydesk-desc{font-size:12px;color:var(--muted);flex:1;}
.mydesk-cta{font-size:11px;font-weight:500;padding:3px 10px;border-radius:99px;border:0.5px solid;cursor:pointer;white-space:nowrap;background:none;font-family:'DM Sans',sans-serif;transition:opacity .12s;}
.mydesk-cta:hover{opacity:.75;}
.mydesk-cta-action{color:var(--status-action-text);border-color:var(--status-action-bd);background:var(--status-action-bg);}
.mydesk-cta-clear{color:var(--status-clear-text);border-color:var(--status-clear-bd);background:var(--status-clear-bg);}
.mydesk-cta-neutral{color:var(--status-neutral-text);border-color:var(--status-neutral-bd);background:var(--status-neutral-bg);}
.mydesk-teaching-row{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 10px;background:var(--surface2);border-radius:7px;font-size:12px;color:var(--muted);}
.mydesk-teaching-val{font-family:'DM Serif Display',serif;font-size:18px;color:var(--text);margin-left:auto;margin-right:4px;}

/* ── Stat pills: refined ── */
.stat-pill{font-size:11px;font-weight:500;padding:2px 8px;border-radius:99px;border:0.5px solid;display:inline-block;margin-top:6px;line-height:1.4;}
.stat-pill-action{color:var(--status-action-text);background:var(--status-action-bg);border-color:var(--status-action-bd);}
.stat-pill-alert{color:var(--status-alert-text);background:var(--status-alert-bg);border-color:var(--status-alert-bd);}
.stat-pill-clear{color:var(--status-clear-text);background:var(--status-clear-bg);border-color:var(--status-clear-bd);}
.stat-pill-neutral{color:var(--status-neutral-text);background:var(--status-neutral-bg);border-color:var(--status-neutral-bd);}

/* ── Page header area: tighter ── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;}
.page-title{font-family:'DM Serif Display',serif;font-size:24px;font-weight:400;line-height:1.2;}
.page-subtitle{color:var(--muted);font-size:12px;margin-top:3px;}

/* ── Mobile: hide sidebar left-border indicator (no space) ── */
@media(max-width:768px){
  .sidebar-item{border-left-width:0;padding:8px 10px;}
  .sidebar-item.active{border-left-width:0;}
}

/* ── RTL badge in role strip tabs ── */
.rtab-badge.stat-pill{margin-top:0;line-height:1.3;}

/* ── Touch targets: ensure 44px min on mobile ── */
@media(max-width:768px){
  .mydesk-cta{padding:6px 12px;font-size:12px;}
  .stat-pill{padding:4px 10px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.7.1 SIDEBAR REDESIGN — matches mockup
   ══════════════════════════════════════════════════════════════════════════ */

/* Sidebar layout: flex column so float btn can go to bottom.
   NOTE (v3.5.9): scoped to min-width:769px because an unqualified
   `display:flex` here was overriding the mobile `display:none` at line 540
   — same specificity, later in source — causing the desktop sidebar
   (Community/Quick Actions/Program Tools) to stack above the main page
   content on mobile. Desktop keeps flex; mobile stays hidden. */
@media (min-width: 769px) {
  .sidebar{display:flex;flex-direction:column;}
}
.sidebar-section{padding:0 10px;margin-bottom:4px;}

/* Navigation group: clean items */
.sb-group{
  background:var(--surface);
  border:0.5px solid var(--border);
  border-left-width:3px;
  border-radius:8px;
  padding:2px 0;
  margin-bottom:4px;
  overflow:hidden;
}
.sb-group .sidebar-label{
  padding:5px 10px 4px;
  border-bottom:0.5px solid var(--border);
  margin-bottom:2px;
  font-size:9px;letter-spacing:1.1px;
}
.sb-group .sidebar-item{
  border-radius:0;
  padding:7px 10px;
  font-size:13px;
  border-left:2px solid transparent;
}
.sb-group .sidebar-item:hover{background:var(--surface2);}
.sb-group .sidebar-item.active{
  background:var(--accent-bg);
  color:var(--accent);
  border-left-color:var(--accent);
  font-weight:500;
}

/* Rotation progress block */
.sb-progress-block{
  background:var(--surface);
  border:0.5px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:4px;
}
.sb-progress-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--muted);
  margin-bottom:2px;
}
.sb-progress-sub{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  margin-top:3px;
  font-family:'JetBrains Mono',monospace;
}

/* Float Quick Log button — resident sidebar bottom */
#sbFloatBtn{padding:10px 10px 14px;margin-top:auto;}
.sb-float-log-btn{
  width:100%;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--teal);
  background:transparent;
  color:var(--teal);
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  text-align:left;
  display:flex;
  align-items:center;
  gap:6px;
}
.sb-float-log-btn:hover{background:rgba(52,211,153,.1);}

/* + Log procedure pill — shown inside topbar for residents on desktop */
#headerLogProcBtn{
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:600;
  padding:7px 16px;
  border-radius:99px;
  background:var(--accent);
  color:#0d1117;
  border:none;
  cursor:pointer;
  transition:opacity .15s;
  white-space:nowrap;
}
#headerLogProcBtn:hover{opacity:.85;}
[data-theme="light"] #headerLogProcBtn,[data-theme="anthropic"] #headerLogProcBtn{color:#fff;}

/* Page header greeting (replaces Dashboard title for residents) */
.page-greeting{font-family:'DM Serif Display',serif;font-size:22px;font-weight:400;color:var(--text);line-height:1.2;}
.page-greeting-sub{font-size:12px;color:var(--muted);margin-top:3px;}

/* Sidebar: hide procedure filters by default, show via JS */
#sbProcFilters{display:none;}

/* Overall bar used in progress block */
.sb-progress-block .overall-bar{margin:5px 0 0;}

/* Mobile: hide float log btn */
@media(max-width:768px){
  #sbFloatBtn{display:none!important;}
  .sb-progress-block{display:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.7.2 TOPBAR & SIDEBAR CLEANUP
   ══════════════════════════════════════════════════════════════════════════ */

/* Quick Log button — topbar, resident-only (shown/hidden via JS).
   QL.6 (2026-08-27): promoted from a ghost chip to a filled violet pill.
   It is the primary capture CTA and used to carry the same visual weight as
   the neighbouring FAR chip, so nothing marked it out. Violet is unclaimed by
   any other feature (accent=blue/orange, teal, green and red are all spoken
   for), which is what makes the float window recognisable at a glance. */
#pipTriggerBtn {
  background: var(--quicklog);
  border: 1px solid var(--quicklog);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--quicklog-ink);
  cursor: pointer;
  display: none; /* JS sets to flex for residents */
  align-items: center;
  gap: 5px;
  transition: background .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}
#pipTriggerBtn:hover {
  background: var(--quicklog-bright);
  border-color: var(--quicklog-bright);
}
#pipTriggerBtn:focus-visible {
  outline: 2px solid var(--quicklog-bright);
  outline-offset: 2px;
}
/* Float / dock currently open — a glow ring, replacing the old teal tint that
   updatePipButtonState() used to paint inline. */
#pipTriggerBtn.ql-open {
  background: var(--quicklog-bright);
  border-color: var(--quicklog-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--quicklog) 32%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  #pipTriggerBtn.ql-open { box-shadow: 0 0 0 3px rgba(124, 92, 255, .32); }
}

/* Log procedure button — topbar, dynamically injected for residents */
#headerLogProcBtn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 99px;
  background: var(--accent);
  color: #0d1117;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
  display: none;
}
#headerLogProcBtn:hover { opacity: .85; }
[data-theme="light"] #headerLogProcBtn,
[data-theme="anthropic"] #headerLogProcBtn { color: #fff; }

/* Topbar: header-right gap tweaks for cleaner grouping */
.header-right { gap: 8px; }

/* Sidebar: removed nav group — adjust top padding */
.sidebar { padding-top: 12px; }

/* Rotation progress block: now at top of sidebar */
#sbRotationProgress { margin-bottom: 4px; }

/* Sync dot — always visible, label hidden on small screens */
.sync-indicator { flex-shrink: 0; }

/* BETA badge moved to user menu — hide old standalone version if still present */
span#betaBadge:not(.user-menu-item) { display: none !important; }

/* v3.5.6: removed the legacy `#pipTriggerBtn { display: none !important }`
   override that was hiding the Quick Log CTA on all mobile viewports.
   Quick Log is now the primary topbar action (see v3.5.0 redesign) and must
   stay visible on mobile. `#headerLogProcBtn` is the dynamically-injected
   resident-only "+ Log procedure" button from app.js and likewise no longer
   needs to be force-hidden; its visibility is already managed per-role. */

/* ══════════════════════════════════════════════════════════════════════════
   v2.7.4 — Resident two-column dashboard layout
   ══════════════════════════════════════════════════════════════════════════ */

/* Two-column grid collapses to single column on mobile */
@media(max-width:900px) {
  .insight-card > div[style*="grid-template-columns:minmax(0,1.35fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* Stat card: compact when no title header in workspace section */
.insight-card > section.insight-card { margin-top:0; }

/* ── DRTC Feedback Module ───────────────────────────────────────────────────── */
.drtc-stat-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--surface2);color:var(--muted);border:1px solid var(--border);}
.drtc-pending{color:var(--amber);background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.2);}
.drtc-raised{color:var(--teal);background:rgba(20,184,166,.1);border-color:rgba(20,184,166,.2);}

/* ── Study Links / Revision Tools ──────────────────────────────────────────── */
.study-links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.study-link-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text);
  transition:border-color .15s,box-shadow .15s,transform .12s;cursor:pointer;}
.study-link-card:hover,.study-link-card:focus-visible{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);transform:translateY(-1px);}
.study-link-card:active{transform:translateY(0);}
.study-link-icon{font-size:22px;flex-shrink:0;}
.study-link-label{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;}
.study-link-desc{font-size:12px;color:var(--muted);line-height:1.4;}
.study-link-arrow{font-size:16px;color:var(--accent);flex-shrink:0;margin-left:auto;}
@media(max-width:600px){.study-links-grid{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════════════════════════════
   v2.9.2 — MOBILE TAP RESPONSIVENESS PATCH
   Appended last so it wins specificity battles with earlier rules.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Global: every button/link gets touch-action + transparent tap highlight.
      Fixes the 300ms tap delay on older Safari/Chrome Android and the
      grey flash that makes buttons look "stuck". */
button, input, select, textarea, a, label,
.btn, .btn-full, .btn-primary, .btn-danger,
[role="button"], [onclick] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ── Stronger :active feedback on all buttons — visible confirmation the
      tap registered (even before the JS handler fires). */
@media (hover: none) and (pointer: coarse) {
  .btn:active,
  .btn-full:active,
  .btn-primary:active,
  .btn-danger:active,
  button:active:not(:disabled),
  [role="button"]:active,
  .mobile-nav-btn:active,
  .sidebar-item:active {
    opacity: 0.72;
    transform: scale(0.97);
    transition: opacity 60ms ease, transform 60ms ease;
  }
}

/* ── iOS zoom prevention — tighten 16px rule so it beats any deeper
      specificity from role-specific panels (PD detail body, etc).
      content-visibility on off-screen panels can render inputs < 16px
      for a frame, which still triggers the zoom. */
@media (max-width: 820px) {
  .form-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px !important;
    /* min-height already handled by existing rules for specific classes;
       here we just stop the zoom. */
  }
  /* Exception carve-out: compact inline inputs inside the PD resident detail
     body stay compact because they live in a dense tabular view, not a form. */
  .pd-res-detail-body .form-input {
    font-size: 14px !important;
  }
}

/* ── Prevent accidental horizontal scroll on phones. Anything that overflows
      the viewport width gets pinned — fixes the "tap goes somewhere else
      because the page shifted sideways" bug on narrow screens. */
@media (max-width: 480px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .main {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ── Modal action buttons — guarantee a tappable bottom row when the
      bottom-sheet modal sits above the iOS keyboard bar. */
@media (max-width: 768px) {
  .modal-actions-sticky {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    margin-inline: -18px;
    padding-inline: 18px;
    border-top: 1px solid var(--border);
    z-index: 2;
  }
}

/* ── Fix: stacking contexts that clip buttons. Some role cards use
      overflow:hidden + border-radius combined, which on iOS Safari can
      clip the onpointerdown hit region of a child button that's near the
      corner. Switch to overflow:clip with a small internal padding, which
      preserves the radius without eating clicks. */
@media (max-width: 768px) {
  .insight-card,
  .pd-res-card,
  .proc-card,
  .rota-panel {
    /* clip doesn't accept scroll, but these containers don't scroll anyway */
    overflow: clip;
  }
}

/* ── Label → input tap target. On mobile, small checkbox labels often miss;
      make the entire label a tap target rather than relying on hitting the
      7-8px checkbox square. */
@media (max-width: 768px) {
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Auth page flanking panels (v2.9.8) — feature: auth-panels
   Quiet editorial triptych: warm charcoal (left) | cream auth card (centre)
   | warm sand (right). Flush edges, full viewport height, content vertically
   centred. Hidden below 900px. aria-hidden on both panels.

   Palette choice: a warm monochrome — charcoal + cream + sand — reads as a
   single editorial page rather than three competing blocks. Green is left
   to the brand mark inside the card, where it functions as an accent.
   ═════════════════════════════════════════════════════════════════════════════ */

.auth-shell {
  width: 100%;
  min-height: 100vh;        /* fallback for browsers without dvh support */
  min-height: 100dvh;       /* dynamic viewport — adjusts as mobile chrome shows/hides */
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(480px, 100%) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  box-sizing: border-box;
}

/* Auth card sits naturally sized, vertically centred in its column. The
   surrounding beige margin acts as breathing room between card and panels. */
.auth-shell > .auth-card {
  margin: 32px 24px;
  align-self: center;
  width: auto;
  max-width: 100%;
}

.panel-left,
.panel-right {
  padding: clamp(48px, 7vh, 80px) clamp(32px, 4.5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.panel-left  > * { max-width: 360px; width: 100%; }
.panel-right > * { max-width: 400px; width: 100%; }

/* ── Left panel: today's fact ───────────────────────────────────────────── */
.panel-left {
  background: #24201b;                     /* warm charcoal — not pure black */
  color: #d9d0bf;
  align-items: flex-end;                   /* pull content toward auth card */
  text-align: left;
}
.panel-left .ap-eyebrow {
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #8a7f6d;
  font-weight: 600;
}
.panel-left .ap-date {
  font-size: 11px;
  color: #8a7f6d;
  letter-spacing: 0.4px;
  margin: 8px 0 24px;
}
.panel-left .ap-tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #c7b88f;
  background: transparent;
  border: 1px solid rgba(199, 184, 143, 0.35);
  border-radius: 999px;
  margin-bottom: 18px;
  width: auto;
}
.panel-left .ap-fact {
  font-size: 14px;
  line-height: 1.7;
  color: #d9d0bf;
  margin: 0;
  font-weight: 400;
}

/* ── Right panel: today's quote ─────────────────────────────────────────── */
.panel-right {
  background: #e2d3b4;                     /* warm sand, a touch lighter */
  color: #2a231c;
  align-items: flex-start;
  text-align: left;
}
.panel-right .ap-eyebrow-r {
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #8a7958;
  font-weight: 600;
  margin-bottom: 24px;
}
.panel-right .ap-quote {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  line-height: 1.45;
  color: #2a231c;
  margin: 0 0 20px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.1px;
  position: relative;
}
.panel-right .ap-quote::before {
  content: "\201C";                        /* left double quotation mark */
  font-family: 'DM Serif Display', serif;
  font-size: 44px;
  line-height: 1;
  color: rgba(42, 35, 28, 0.25);
  position: absolute;
  left: -0.55em;
  top: -0.18em;
  pointer-events: none;
  user-select: none;
}
.panel-right .ap-author {
  font-size: 13px;
  font-weight: 700;
  color: #2a231c;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.1px;
}
.panel-right .ap-era {
  font-size: 11px;
  color: #8a7958;
  letter-spacing: 0.3px;
  margin-top: 3px;
  font-family: 'DM Sans', sans-serif;
}

/* Desktop: flush panels to viewport edges, drop #authScreen padding. */
@media (min-width: 901px) {
  #authScreen { padding: 0; }
}

/* Mobile: hide panels, restore the original single-card layout. */
@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .auth-shell > .auth-card { margin: 0 auto; }
  .panel-left,
  .panel-right { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   CBL Rota v3 (v3.0.0) — js/cbl.js
   Two-column calendar dashboard. All classes are .cbl3-* prefixed so old
   .cbl-* rules can coexist and be pruned later.
   ═════════════════════════════════════════════════════════════════════════════ */

.cbl3-wrap { display: flex; flex-direction: column; gap: 14px; }

.cbl3-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cbl3-title-text { font-size: 20px; font-weight: 600; color: var(--text); }
.cbl3-title-sub  { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cbl3-top-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cbl3-root {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}
.cbl3-left  { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.cbl3-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.cbl3-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.cbl3-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.cbl3-card-hdr-static { cursor: default; }
.cbl3-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cbl3-card-count { font-size: 10px; color: var(--muted); }
.cbl3-card-chev  { font-size: 11px; color: var(--muted); }
.cbl3-title-dot  { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

.cbl3-badge {
  font-size: 10px;
  background: rgba(34, 197, 94, 0.12);
  color: var(--teal, #22c55e);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

/* ── Calendar ──────────────────────────────────────────────────────────── */
.cbl3-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 4px;
}
.cbl3-cal-title { font-size: 13px; font-weight: 600; color: var(--text); }
.cbl3-cnb {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cbl3-cnb:hover { background: var(--surface2); color: var(--text); }

.cbl3-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 4px 8px 10px;
}
.cbl3-cal-dow {
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  padding: 3px 0;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.cbl3-cal-day {
  font-size: 11px;
  text-align: center;
  padding: 5px 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  color: var(--muted);
  min-height: 28px;
  transition: background 0.12s;
}
.cbl3-cal-day:hover:not(.cbl3-cal-om) { background: var(--surface2); }
.cbl3-cal-day.cbl3-has { color: var(--text); font-weight: 600; }
.cbl3-cal-day.cbl3-tod { background: rgba(34, 197, 94, 0.14); color: var(--teal, #22c55e); font-weight: 700; }
.cbl3-cal-day.cbl3-sel { background: var(--teal, #22c55e) !important; color: #fff !important; font-weight: 700; }
.cbl3-cal-day.cbl3-sel .cbl3-sdot { background: rgba(255, 255, 255, 0.85) !important; }
.cbl3-cal-day.cbl3-cal-om { opacity: 0.25; cursor: default; }

.cbl3-dot-row {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 2px;
}
.cbl3-sdot { width: 4px; height: 4px; border-radius: 50%; display: inline-block; }

/* ── Day detail ────────────────────────────────────────────────────────── */
.cbl3-dd {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  animation: cbl3-fade 0.15s ease-out;
}
@keyframes cbl3-fade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.cbl3-dd-date {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 6px;
}
.cbl3-dd-topic { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; margin: 4px 0 8px; }
.cbl3-dd-row { margin-bottom: 4px; display: flex; flex-direction: column; }
.cbl3-dd-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.cbl3-dd-val { font-size: 11px; color: var(--text); }
.cbl3-dd-empty { font-size: 11px; color: var(--muted); font-style: italic; margin-bottom: 8px; }
.cbl3-dd-sep { border-top: 1px solid var(--border); margin: 10px 0; }
.cbl3-dd-acts { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }

/* ── Pills (session type) ──────────────────────────────────────────────── */
.cbl3-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 4px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

/* ── Buttons (local to cbl3; don't clash with app .btn) ────────────────── */
.cbl3-btn {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.12s, border-color 0.12s;
}
.cbl3-btn:hover { background: var(--surface2); }
.cbl3-btn-sm { font-size: 10px; padding: 4px 9px; }
.cbl3-btn-xs { font-size: 10px; padding: 3px 8px; }
.cbl3-btn-primary {
  background: var(--teal, #22c55e);
  color: #fff;
  border-color: var(--teal, #22c55e);
}
.cbl3-btn-primary:hover { background: #1ea653; border-color: #1ea653; }
.cbl3-btn-ghost { background: transparent; }
.cbl3-btn-danger {
  color: #a32d2d;
  border-color: rgba(163, 45, 45, 0.3);
}
.cbl3-btn-danger:hover { background: rgba(163, 45, 45, 0.08); }
.cbl3-btn-zoom {
  background: rgba(24, 95, 165, 0.08);
  color: #185fa5;
  border-color: rgba(24, 95, 165, 0.25);
}
.cbl3-btn-zoom:hover { background: rgba(24, 95, 165, 0.14); }
.cbl3-btn-pre {
  background: rgba(83, 74, 183, 0.08);
  color: #534ab7;
  border-color: rgba(83, 74, 183, 0.25);
}
.cbl3-btn-pre:hover { background: rgba(83, 74, 183, 0.14); }
.cbl3-btn-ico { font-size: 12px; line-height: 1; }

/* ── Week rail ─────────────────────────────────────────────────────────── */
.cbl3-wrow {
  display: flex;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.cbl3-wrow:last-child { border-bottom: none; }
.cbl3-wrow:hover { background: var(--surface2); }
.cbl3-wrow.cbl3-today-row { border-left: 2px solid var(--teal, #22c55e); }
.cbl3-wgut {
  width: 56px;
  flex-shrink: 0;
  padding: 10px 0 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cbl3-wdn { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.cbl3-wnum { font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.1; }
.cbl3-wnum-tod { color: var(--teal, #22c55e); }
.cbl3-wcnt { flex: 1; min-width: 0; padding: 10px 12px; border-left: 1px solid var(--border); }
.cbl3-wempty { font-size: 11px; color: var(--muted); font-style: italic; }
.cbl3-wtop { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.35; }
.cbl3-wsep { margin: 8px 0; border-top: 1px solid var(--border); }
.cbl3-wchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.cbl3-wchip { font-size: 10px; color: var(--text); display: inline-flex; align-items: center; gap: 3px; }
.cbl3-cdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.cbl3-wacts { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.cbl3-muted-xs { font-size: 10px; color: var(--muted); font-style: italic; }

/* ── My presentations ──────────────────────────────────────────────────── */
.cbl3-prow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.cbl3-prow:last-child { border-bottom: none; }
.cbl3-pdate { text-align: center; width: 34px; flex-shrink: 0; }
.cbl3-pd { font-size: 17px; font-weight: 700; line-height: 1.05; color: var(--text); }
.cbl3-pm { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 1px; }
.cbl3-pinfo { flex: 1; min-width: 0; }
.cbl3-ptop { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; line-height: 1.35; }
.cbl3-psub { font-size: 11px; color: var(--muted); }
.cbl3-spill {
  display: inline-flex;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 9px;
  background: #faeeda;
  color: #633806;
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Study focus list ──────────────────────────────────────────────────── */
.cbl3-fi {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--border);
  gap: 0;
}
.cbl3-fi:last-child { border-bottom: none; }
.cbl3-fi-bullet {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal, #22c55e);
  flex-shrink: 0;
  margin-top: 6px;
  margin-right: 10px;
}
.cbl3-fi-text { flex: 1; min-width: 0; }
.cbl3-fi-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 2px;
  word-break: break-word;
}
.cbl3-fi-meta { font-size: 10px; color: var(--muted); }
.cbl3-fi-copy, .cbl3-fi-del {
  flex-shrink: 0;
  margin-left: 6px;
  margin-top: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 5px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-family: inherit;
}
.cbl3-fi-copy:hover { background: var(--surface2); color: var(--text); }
.cbl3-fi-del { color: #a32d2d; font-size: 11px; }
.cbl3-fi-del:hover { background: rgba(163, 45, 45, 0.08); }
.cbl3-cpok { font-size: 10px; color: var(--teal, #22c55e); font-weight: 700; white-space: nowrap; }

.cbl3-empty {
  padding: 14px 14px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

/* ── Modals (local, keep away from app .modal-overlay system) ──────────── */
.cbl3-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.cbl3-modal-overlay.open { display: flex; }
.cbl3-modal {
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 440px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.cbl3-modal-hdr {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cbl3-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  line-height: 1;
  font-family: inherit;
}
.cbl3-modal-close:hover { color: var(--text); }
.cbl3-modal-field { margin-bottom: 12px; }
.cbl3-modal-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 700;
}
.cbl3-modal-field input,
.cbl3-modal-field select,
.cbl3-modal-field textarea {
  width: 100%;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}
.cbl3-modal-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cbl3-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cbl3-modal-err {
  font-size: 11px;
  color: #a32d2d;
  background: rgba(163, 45, 45, 0.08);
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  display: none;
}

/* ── Excel import drop zone + review table ─────────────────────────────── */
.cbl3-xls-drop {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cbl3-xls-drop:hover { border-color: var(--teal, #22c55e); background: var(--surface2); }
.cbl3-xls-ico { font-size: 28px; margin-bottom: 8px; }
.cbl3-xls-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.cbl3-xls-sub { font-size: 11px; color: var(--muted); }
.cbl3-xls-note {
  font-size: 11px;
  color: var(--text);
  margin: 4px 0 10px;
  line-height: 1.4;
}
.cbl3-xls-tbl { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.cbl3-xls-tbl th {
  text-align: left;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  padding: 6px 6px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  position: sticky;
  top: 0;
}
.cbl3-xls-tbl td {
  padding: 6px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.cbl3-xls-tbl td.cbl3-xls-note-cell { white-space: normal; font-size: 10px; color: var(--muted); }
.cbl3-rok   { background: rgba(34, 197, 94, 0.06); }
.cbl3-rwarn { background: rgba(245, 158, 11, 0.06); }
.cbl3-rerr  { background: rgba(163, 45, 45, 0.06); }

.cbl3-stat-pill {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cbl3-sok   { background: #c0dd97; color: #27500a; }
.cbl3-swarn { background: #fac775; color: #633806; }
.cbl3-serr  { background: #f09595; color: #791f1f; }

/* ── Warning badges on rendered sessions (FAR-on-Thursday, weekend, etc.) ─ */
.cbl3-warn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9px;
  background: rgba(245, 158, 11, 0.12);
  color: #b4591c;
  border: 1px solid rgba(245, 158, 11, 0.3);
  margin-left: 6px;
  margin-bottom: 4px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbl3-wpill-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 2px; }

/* ── Pretest post / edit modal ────────────────────────────────────────── */
.cbl3-pp-ctx {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface2);
  padding: 7px 10px;
  border-radius: 6px;
}
.cbl3-pp-optrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cbl3-pp-optrow input[type="radio"] { flex-shrink: 0; width: 16px; height: 16px; margin: 0; }
.cbl3-pp-optrow input[type="text"] {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: inherit;
  box-sizing: border-box;
}
.cbl3-pp-del {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  line-height: 1;
  font-family: inherit;
}
.cbl3-pp-del:hover { background: rgba(163, 45, 45, 0.08); color: #a32d2d; }

/* ── Pretest attempt modal ────────────────────────────────────────────── */
.cbl3-pa-ctx {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.cbl3-pa-question {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
  margin: 4px 0 14px;
}
.cbl3-pa-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
  transition: background 0.12s, border-color 0.12s;
}
.cbl3-pa-opt:hover { background: var(--surface2); }
.cbl3-pa-opt input[type="radio"] { margin: 2px 0 0; flex-shrink: 0; }
.cbl3-pa-result {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.5;
}
.cbl3-pa-ok  { background: rgba(34, 197, 94, 0.1); color: #0f6e56; border: 1px solid rgba(34, 197, 94, 0.25); }
.cbl3-pa-bad { background: rgba(163, 45, 45, 0.08); color: #a32d2d; border: 1px solid rgba(163, 45, 45, 0.25); }

/* ── Pretest bank modal ───────────────────────────────────────────────── */
.cbl3-pb-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.cbl3-pb-filter input {
  flex: 1;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: inherit;
}
.cbl3-pb-list {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
}
.cbl3-pb-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.cbl3-pb-item:last-child { border-bottom: none; }
.cbl3-pb-item-ctx {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 3px;
}
.cbl3-pb-item-q {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 4px;
  font-weight: 500;
}
.cbl3-pb-item-meta { font-size: 10px; color: var(--muted); margin-bottom: 8px; }
.cbl3-pb-item-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Responsive: stack columns on narrow viewports ─────────────────────── */
@media (max-width: 780px) {
  .cbl3-root { flex-direction: column; }
  .cbl3-left { width: 100%; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Community v3 — WardWisdom + LearnLink minimalist redesign (v3.2.0)
   Flat cards, single-row page header, quiet typography. Prefix .cc-* so the
   legacy .ww-card / .ll-card / .ww-accent-* rules still cascade for anything
   not yet rewritten, but our overrides win on the new markup.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Page header ──────────────────────────────────────────────────────── */
.cc-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cc-page-title h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.2px;
}
.cc-page-title p {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
}
.cc-page-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Segmented scope toggle (Global / My class) */
.cc-scope-seg {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
}
.cc-scope-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cc-scope-btn:hover { color: var(--text); }
.cc-scope-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Search + admin filter */
.cc-search,
.cc-admin-filter {
  font-size: 12px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--text);
  font-family: inherit;
  width: 170px;
  box-sizing: border-box;
}
.cc-search:focus,
.cc-admin-filter:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

/* Meta line under header: count + scope hint */
.cc-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 11px;
  color: var(--muted);
}
.cc-count { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.2px; }
.cc-scope-hint { font-size: 11px; color: var(--muted); }

/* ── Card list spacing ────────────────────────────────────────────────── */
.cc-list { display: flex; flex-direction: column; gap: 10px; }

/* ── Cards: flat, quiet, no rotating accent ───────────────────────────── */
.cc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cc-card:hover { border-color: var(--accent-bg, var(--border)); }

/* Kill the legacy 5-colour accent stripes on the new markup. */
.cc-card.ww-card,
.cc-card.ll-card {
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: none;
}

/* Head row */
.cc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cc-head-spacer { flex: 1; }
.cc-author-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--surface2);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border: 1px solid var(--border);
}
.cc-date {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1px;
}
.cc-cohort-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-bg, rgba(34, 197, 94, 0.08));
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: 0.2px;
}

/* Head action link buttons */
.cc-link-btn {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  font-family: inherit;
  line-height: 1.2;
  transition: background 0.12s, color 0.12s;
}
.cc-link-btn:hover { background: var(--surface2); color: var(--text); }
.cc-link-danger { color: var(--red); }
.cc-link-danger:hover { background: rgba(239, 68, 68, 0.08); color: var(--red); }

/* Body text */
.cc-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 4px;
  word-break: break-word;
}
.cc-body.ww-truncated,
.cc-body.ll-truncated {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-read-more {
  display: inline-block;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  margin: 4px 0 2px;
  user-select: none;
  font-weight: 500;
}
.cc-read-more:hover { text-decoration: underline; }

/* Verdict row (WardWisdom) */
.cc-verdict-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.cc-verdict {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cc-verdict:hover { background: var(--surface2); color: var(--text); }
.cc-verdict .cc-v-icon { font-size: 13px; line-height: 1; }
.cc-verdict.cc-voted-ok {
  background: rgba(34, 197, 94, 0.1);
  color: #0f6e56;
  border-color: rgba(34, 197, 94, 0.3);
}
.cc-verdict.cc-voted-bad {
  background: rgba(239, 68, 68, 0.08);
  color: #a32d2d;
  border-color: rgba(239, 68, 68, 0.28);
}
.cc-toggle-expand { margin-left: auto; font-size: 11px; }

/* Card foot (LearnLink) */
.cc-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.cc-count-pill {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 500;
}
.cc-toggle-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.cc-toggle-btn:hover { background: var(--surface2); border-color: var(--accent); }

/* ── Expanded sections (sources, comments) ───────────────────────────── */
.cc-expand {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-own-source {
  padding: 10px 12px;
  background: var(--surface2);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.cc-own-false { border-left-color: var(--red); }
.cc-own-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}
.cc-own-body { font-size: 13px; line-height: 1.55; color: var(--text); }

.cc-source-form {
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.cc-source-form-ok  { border-color: rgba(34, 197, 94, 0.25); }
.cc-source-form-warn {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.3);
}
.cc-form-note {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.cc-form-hint {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding: 6px 4px;
}
.cc-source-input {
  width: 100%;
  min-height: 48px;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}
.cc-source-input:focus { outline: none; border-color: var(--accent); }
.cc-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.cc-file-chip {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  transition: background 0.12s;
}
.cc-file-chip:hover { background: var(--surface2); }
.cc-file-hint { font-size: 10px; color: var(--muted); }
.cc-file-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  margin-top: 6px;
}
.cc-file-link:hover { text-decoration: underline; }
.cc-submit-btn {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.cc-submit-btn:hover { background: var(--accent-hover, var(--accent)); filter: brightness(0.95); }
.cc-submit-warn { background: var(--red); }
.cc-submit-warn:hover { filter: brightness(0.92); }
.cc-form-err {
  font-size: 11px;
  color: var(--red);
  min-height: 14px;
  margin-top: 4px;
}

/* Others' comments/sources block */
.cc-others {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-other-item {
  padding: 8px 10px;
  background: var(--surface2);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
}
.cc-other-author {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  margin-right: 6px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid var(--border);
  vertical-align: middle;
}
.cc-other-verdict {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9px;
  margin-right: 4px;
  letter-spacing: 0.3px;
  vertical-align: middle;
}
.cc-other-verdict.cc-ok {
  background: rgba(34, 197, 94, 0.12);
  color: #0f6e56;
}
.cc-other-verdict.cc-bad {
  background: rgba(239, 68, 68, 0.1);
  color: #a32d2d;
}
.cc-other-body { margin-top: 4px; color: var(--text); word-break: break-word; }

/* ── Responsive: stack header on narrow viewports ───────────────────── */
@media (max-width: 640px) {
  .cc-page-head { flex-direction: column; align-items: stretch; }
  .cc-page-controls { justify-content: space-between; }
  .cc-search { flex: 1; width: auto; min-width: 100px; }
  .cc-card { padding: 12px 14px; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Mobile optimisation sweep (v3.2.1)
   Closes the gaps in the newer .cc-* (community v3) and .cbl3-* (CBL Rota v3)
   blocks that shipped without the app's mobile conventions:
     • bump every interactive input to 16px font so iOS Safari doesn't zoom
       the viewport on focus;
     • enforce ≥40px tap targets on buttons and calendar cells so fingers
       can actually land on them (WCAG 2.5.5 / Apple HIG guidance);
     • widen calendar day cells and month-nav chevrons;
     • keep touch-action: manipulation so the 300ms double-tap delay is
       already killed (handled globally at line 3055).
   ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Inputs — iOS zooms on focus below 16px, which shoves the UI off-screen. */
  .cc-search,
  .cc-admin-filter,
  .cc-source-input,
  .cbl3-modal-field input,
  .cbl3-modal-field select,
  .cbl3-modal-field textarea,
  .cbl3-pb-filter input,
  .cbl3-pp-optrow input[type="text"] {
    font-size: 16px;
  }

  /* ── Community v3 tap targets ──────────────────────────────────────── */
  .cc-scope-btn {
    min-height: 40px;
    padding: 9px 16px;
    font-size: 13px;
  }
  .cc-toggle-btn,
  .cc-verdict {
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px;
  }
  .cc-submit-btn {
    min-height: 40px;
    padding: 9px 16px;
    font-size: 12px;
  }
  .cc-link-btn {
    min-height: 36px;
    min-width: 44px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .cc-file-chip {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12px;
  }
  /* Header segmented control sits comfortably at touch size */
  .cc-scope-seg { padding: 3px; }

  /* Stack card verdict / foot so thumbs aren't competing for a single row */
  .cc-verdict-row,
  .cc-card-foot { gap: 8px; }

  /* ── CBL Rota v3 tap targets ───────────────────────────────────────── */
  .cbl3-btn {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .cbl3-btn-sm {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .cbl3-btn-xs {
    min-height: 32px;
    padding: 7px 12px;
    font-size: 12px;
  }
  .cbl3-cnb {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .cbl3-cal-day {
    min-height: 40px;
    font-size: 13px;
    padding: 7px 2px 10px;
  }
  .cbl3-cal-dow { font-size: 10px; padding: 5px 0; }

  /* Pretest attempt option rows — stack radio + label with room to tap */
  .cbl3-pa-opt {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
  }
  /* Pretest option edit rows in the post modal */
  .cbl3-pp-optrow { gap: 10px; }
  .cbl3-pp-optrow input[type="radio"] { width: 22px; height: 22px; }
  .cbl3-pp-del { min-height: 36px; min-width: 36px; }

  /* Modals get fuller width on phones and stop clipping action rows */
  .cbl3-modal { max-width: 100%; padding: 16px; }
  .cbl3-modal-close { min-height: 44px; min-width: 44px; font-size: 22px; }
  .cbl3-modal-foot { gap: 10px; }

  /* Card densification: the card body itself stays quiet, but give the
     top-bar row room so "Import Excel" + "Schedule session" wrap cleanly */
  .cbl3-topbar { gap: 10px; }
  .cbl3-top-actions { gap: 6px; width: 100%; }
  .cbl3-top-actions .cbl3-btn { flex: 1; justify-content: center; }
}

/* ── Very small phones (≤ 380px): one more tightening pass ─────────────── */
@media (max-width: 380px) {
  .cbl3-cal-grid { gap: 1px; padding: 2px 4px 6px; }
  .cbl3-cal-day { min-height: 38px; font-size: 12px; }
  .cc-head { gap: 6px; }
  .cc-date { font-size: 10px; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Topbar v3.5.0 — dashboard layout redesign
   Single-row header with three zones:
     [Zone 1: logo] [divider] [Zone 2: tabs, flex:1] [divider] [Zone 3: controls]
   Collapses the retired standalone tabs row + Search + FAR chip row into one
   52-pixel bar. Tagline, View-As chip, sync chip and "1 pending" chip have
   all moved elsewhere (About footer, user dropdown, sidebar, bell icon).
   ═════════════════════════════════════════════════════════════════════════════ */

/* Zone 1 (logo) + Zone 2 (primary tab bar) DELETED 2026-07-19 with the primary
   tab bar — the header is now [logo] … [controls], the controls pinned right by
   the margin-left:auto rule below. .nav-tab is retired (only the tab bar used it). */

/* ── Zone 3: right controls ──────────────────────────────────────────── */
/* margin-left:auto pins the right zone to the viewport edge regardless of
   how the middle tabs row sizes itself. flex-shrink:0 + no max-width
   means the zone keeps its natural width; no slide-away when a tab is
   active and the main scrollbar flickers. */
header .topbar-controls { flex-shrink: 0; gap: 8px; margin-left: auto; }

/* FAR link in topbar — quiet bordered chip (not a CTA). */
.topbar-far {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.topbar-far:hover { background: var(--surface2); color: var(--text); border-color: var(--teal); }
.topbar-far .far-zoom-mark { display: inline-flex; align-items: center; }

/* Quick Log — primary CTA. Orange, warm, obvious. */
.topbar-quick-log {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.12s, transform 0.08s;
}
.topbar-quick-log:hover { filter: brightness(0.95); }
.topbar-quick-log:active { transform: translateY(1px); }
.topbar-quick-ico { font-size: 13px; line-height: 1; }

/* Notification bell + dot */
.topbar-bell {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  padding: 0;
}
.topbar-bell:hover { background: var(--surface2); color: var(--text); border-color: var(--teal); }
.topbar-bell-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--surface);
  pointer-events: none;
}

/* ── Sidebar sync section (moved from topbar) ────────────────────────── */
.sidebar-sync { padding-top: 8px; margin-top: auto; }
.sidebar-sync-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  padding: 4px 0;
}
.sidebar-sync-label { white-space: nowrap; }
/* If both Float-quick-log AND sync are visible, sync sits below float button. */
#sbFloatBtn + .sidebar-sync { margin-top: 8px; }

/* ── Responsive: tabs scroll horizontally on narrow screens ──────────── */
@media (max-width: 900px) {
  header { padding: 0 12px; }
  header .logo { margin-right: 8px; }
  /* Hide FAR on narrow screens — still reachable via sidebar/dashboard */
  .topbar-far { display: none; }
  /* Shift chip shrinks */
  .rota-today-chip { padding: 4px 8px; font-size: 10px; }
}
@media (max-width: 640px) {
  /* v3.5.12: KEEP the topbar tabs visible on phones. They are now the
     primary navigation after v3.5.10 removed the bottom nav. The prior
     rule hid them in favour of the hamburger/drawer, which is fine as a
     shortcut but inadequate as the only path — users need one-tap access
     to the main sections. The tabs already scroll horizontally, so they
     coexist with the right-side quick-action buttons. */
  .topbar-quick-log { padding: 6px 10px; }
  .topbar-quick-log span:not(.topbar-quick-ico) { display: none; }   /* icon only */
  .topbar-quick-log { min-width: 36px; justify-content: center; }
  .topbar-bell { width: 36px; height: 36px; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Skeleton screens (v3.4.0) — guide §3
   Perceived-performance primitive: while a panel waits on the network, show
   a dimensioned placeholder with a subtle shimmer instead of a spinner or
   empty box. The brain reads it as "this is loading, and it's about to look
   like that" rather than "nothing is happening".

   Usage:
     <div class="skel-card">
       <div class="skel skel-line skel-line-lg"></div>
       <div class="skel skel-line"></div>
       <div class="skel skel-line skel-line-sm"></div>
     </div>
   Respects prefers-reduced-motion.
   ═════════════════════════════════════════════════════════════════════════════ */

.skel {
  background: linear-gradient(
    90deg,
    var(--surface2) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    var(--surface2) 100%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}
.skel-line {
  height: 12px;
  margin-bottom: 8px;
  width: 100%;
}
.skel-line-sm  { height: 10px; width: 40%; }
.skel-line-md  { height: 14px; width: 70%; }
.skel-line-lg  { height: 18px; width: 60%; }
.skel-line-xl  { height: 24px; width: 50%; }
.skel-block    { height: 120px; }
.skel-avatar   { width: 40px; height: 40px; border-radius: 50%; }
.skel-chip     { width: 72px; height: 22px; border-radius: 11px; display: inline-block; margin-right: 6px; }

/* Card-shaped skeleton group — matches .cc-card padding so we can swap in. */
.skel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.skel-card-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   MOBILE RESCUE LAYER — v3.5.8
   Catch-all hardening added after mobile-portrait "no touch/scroll/zoom"
   reports. Intentionally placed last so it overrides every earlier rule.

   Design principles:
   1. No fixed-position element may swallow input unless it's actively visible.
      The JS watchdog (mobile_safety.js) forces `data-mobile-rescue="1"` onto
      the <body> if it detects a frozen scroll-lock that no modal is owning.
   2. Portrait viewports under 600px tall need extra vertical breathing room
      — the stat-row and tab bar collapse to full-width lists.
   3. Safari iOS specific: `-webkit-text-size-adjust: 100%` prevents text
      zoom on orientation change, and `-webkit-tap-highlight-color` kills
      the ugly grey flash on tap.
   ═════════════════════════════════════════════════════════════════════════════ */

/* A. (removed — display:none already blocks pointer events by spec.)    */

/* B. iOS text-zoom / tap-flash fixes — applied to the whole document. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* C. When the JS watchdog detects a stuck scroll-lock it sets this attribute.
      CSS then forcibly un-freezes the body until the real owner re-locks. */
body[data-mobile-rescue="1"] {
  overflow: auto !important;
  position: static !important;
  height: auto !important;
  touch-action: pan-y pinch-zoom !important;
}

/* D. Scrollable content must never have `touch-action: none`. This guards
      against any inline style that might accidentally ship it. */
[style*="touch-action:none"],
[style*="touch-action: none"] {
  touch-action: pan-y pinch-zoom !important;
}

/* E. Portrait-only tweaks — the pain-point the user called out.
      Tightens padding, ensures the main scroll container always has room
      after the fixed header (52px) and mobile bottom nav (~56px + safe area). */
@media (max-width: 768px) and (orientation: portrait) {
  .main {
    /* Absolute minimum height so short pages still scroll naturally.
       `0` is fine because flex:1 on .layout already gives us space. */
    min-height: 0;
    /* Bottom padding clears the mobile nav + home-indicator safe area. */
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  /* Sub-tabs in portrait often wrap awkwardly — force single-line scroll. */
  .sub-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Stat cards: on very narrow portrait viewports, two cards per row fit
     better than the default three. Only applies below 360px wide. */
  @media (max-width: 360px) {
    .stats-row {
      grid-template-columns: 1fr 1fr;
    }
    .stats-row .stat-card:nth-child(3) {
      grid-column: span 2;
    }
  }

  /* Short portrait viewports (landscape phones flipped, ≤560px tall):
     collapse the header logo text so the topbar stays usable. */
  @media (max-height: 560px) {
    .logo-text { font-size: 13px; }
    .page-title { font-size: 18px; }
  }
}

/* F. (removed — empty-overlay sweep handled in js/mobile_safety.js so we
      don't risk a CSS rule inadvertently hiding a legit initial-state
      overlay before JS populates its children.) */

/* G. Ensure the mobile drawer backdrop doesn't stay interactive after a
      failed close. `.open` is the positive signal — anything else off. */
.mobile-drawer-overlay:not(.open) { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   v3.5.9: MOBILE BOTTOM NAV + QUICK-LOG REMOVAL
   The primary-nav tabs in the topbar already cover Home / Procedures /
   Learning / Study / Progress / Feedback / Rota / Guide, so the bottom
   .mobile-nav was redundant — and its buttons were reported unresponsive
   in the wild. Hiding it reclaims ~72px of vertical space per page.
   The topbar Quick-Log pill is also hidden on mobile per user request
   (the floating/PiP patterns are desktop ergonomics). The Quick-Log FAB
   was removed entirely in v3.5.41.
   If we ever want the bottom nav back, remove this block — the HTML is
   still in index.html and the handlers are still wired in app.js.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-nav,
  #mobileBottomNav          { display: none !important; }

  /* Topbar Quick-Log pill (#pipTriggerBtn / .topbar-quick-log).
     QL.5 (2026-08-27): un-hidden. This was `display:none !important` because
     Quick Log only existed as a Document-PiP window, which no mobile browser
     supports — tapping it could only ever raise an error toast. It now falls
     back to an in-page docked bottom-sheet, so the CTA works here and the
     rule is gone. Visibility is JS-driven again (see updatePipButtonState /
     shell_navigation.js), matching desktop. */
  #pipTriggerBtn,
  .topbar-quick-log         { padding: 6px 12px; font-size: 12px; }

  /* Sidebar's "Float quick log" entry — the sidebar itself is already hidden
     at mobile (see line 540); this is belt-and-suspenders in case someone
     surfaces it through the drawer. */
  .sb-float-log-btn         { display: none !important; }

  /* With the bottom nav gone, .main no longer needs 80–88px bottom padding
     to clear it. 24px + safe-area is enough for the home-indicator.
     `flex: 1` is the actual scroll-enabler — .layout is now a flex column
     on mobile (see the flex override earlier in this file), so .main gets
     a definite flex-distributed height. `min-height: 0` disables the
     flex-item implicit min-content sizing that would otherwise let .main
     grow to content height and defeat overflow:auto. */
  .main {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Peer verification v2.5.2
   Picker + status pills + request/decline cards + modals.
   All tokens (--accent, --blue, --red, --green, --muted, --surface, --surface2,
   --border, --blue-bg, etc.) come from the three theme blocks at the top of
   this file; this block adds no new tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Row in the log / OSATS modal — matches the form-field rhythm. */
.pv-row { margin: 10px 0; }
.pv-row-label { display:flex; align-items:center; gap:6px; font-size:11px;
                color:var(--muted); font-weight:600; text-transform:uppercase;
                letter-spacing:.6px; margin-bottom:5px; }
.pv-row-label .pv-opt { font-size:9.5px; font-weight:500; text-transform:none;
                        letter-spacing:normal; margin-left:2px; }

/* Dropdown trigger — styled like .form-input but clickable, not a real <select>. */
.pv-picker { position:relative; }
.pv-picker-trigger {
  width:100%; padding:10px 12px;
  background:var(--surface2); border:1px solid var(--border); border-radius:7px;
  color:var(--text); font-family:inherit; font-size:13.5px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  cursor:pointer; transition:border-color .15s; user-select:none;
}
.pv-picker-trigger:hover { border-color:var(--blue); }
.pv-picker-trigger.open  { border-color:var(--accent); }
.pv-picker-trigger.placeholder { color:var(--muted); }
.pv-picker-trigger .pv-picker-chev { color:var(--muted); flex-shrink:0;
                                     transition:transform .18s; font-size:12px; }
.pv-picker-trigger.open .pv-picker-chev { transform:rotate(180deg); }

.pv-dropdown-panel {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  z-index:100; max-height:320px; display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  animation:pv-fadedown .16s ease-out;
}
@keyframes pv-fadedown {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}
.pv-dropdown-search {
  padding:10px 10px 8px; border-bottom:1px solid var(--border);
}
.pv-dropdown-search-inner {
  display:flex; align-items:center; gap:7px;
  background:var(--surface2); border:1px solid var(--border); border-radius:6px;
  padding:6px 9px;
}
.pv-dropdown-search-inner input {
  flex:1; border:none; outline:none; background:transparent;
  font-size:12.5px; color:var(--text); font-family:inherit;
}
.pv-dropdown-caption { font-size:10px; color:var(--muted); margin-top:6px;
                       padding-left:2px; letter-spacing:.3px; }
.pv-dropdown-list { overflow-y:auto; flex:1; }
.pv-dropdown-empty { padding:20px; text-align:center; font-size:12px;
                     color:var(--muted); }

.pv-resident-row {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  cursor:pointer; transition:background .12s;
  border-bottom:1px solid var(--border);
}
.pv-resident-row:last-child { border-bottom:none; }
.pv-resident-row:hover,
.pv-resident-row.focused { background:var(--surface2); }

.pv-avatar {
  width:26px; height:26px; border-radius:50%;
  color:#fff; font-size:11px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; background:var(--accent);
}
.pv-avatar.b1 { background:var(--accent); }
.pv-avatar.b2 { background:var(--blue); }
.pv-avatar.b3 { background:var(--green); }
.pv-avatar.b4 { background:var(--purple); }

.pv-resident-name { flex:1; min-width:0; }
.pv-resident-name-line { font-size:13px; font-weight:500; }
.pv-resident-email     { font-size:10.5px; color:var(--muted); margin-top:1px;
                         white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.pv-pgy-chip { font-size:10px; padding:1px 6px; background:var(--surface2);
               color:var(--muted); border-radius:99px; font-weight:500;
               letter-spacing:.4px; flex-shrink:0; }

/* Helper text shown when no peer selected, under the trigger. */
.pv-helper { font-size:11.5px; color:var(--muted); margin-top:5px;
             line-height:1.5; }

/* Info chip shown when a peer IS selected. */
.pv-info-chip {
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  padding:7px 11px; background:var(--blue-bg);
  border:1px solid var(--blue); border-color:var(--blue);
  border-radius:7px; font-size:12px; color:var(--text); line-height:1.4;
}
.pv-info-chip-text { flex:1; }
.pv-info-chip-x    { cursor:pointer; color:var(--muted); padding:1px;
                     border-radius:4px; display:inline-flex; align-items:center;
                     transition:background .12s; }
.pv-info-chip-x:hover { background:var(--surface2); color:var(--text); }

/* Status pills on MY OSATS cards. */
.pv-status-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:6px;
  font-size:11px; font-weight:600;
  border:1px solid transparent;
}
.pv-status-awaiting-peer { background:var(--blue-bg); color:var(--blue);
                           border-color:var(--blue); }
.pv-status-peer-declined { background:var(--red-bg);  color:var(--red);
                           border-color:var(--red); }
.pv-status-peer-verified { background:var(--green-bg); color:var(--green);
                           border-color:var(--green); }

/* Left-border accents on resident's own OSATS cards when they are in a
   peer-verification state. Works with the existing .osats-entry-card shell. */
.osats-entry-card.pv-card-awaiting { border-left:3px solid var(--blue); }
.osats-entry-card.pv-card-declined { border-left:3px solid var(--red); }

/* Inline status blocks (below card header on resident's own OSATS cards). */
.pv-inline-block {
  padding:9px 12px; border-radius:7px; font-size:12px; line-height:1.5;
  display:flex; gap:7px; align-items:flex-start; margin-top:8px;
}
.pv-inline-block.awaiting  { background:var(--blue-bg); color:var(--blue);
                             border:1px solid var(--blue); }
.pv-inline-block.declined  { background:var(--red-bg);  color:var(--red);
                             border:1px solid var(--red); }
.pv-inline-block.verified  { background:var(--green-bg);color:var(--green);
                             border:1px solid var(--green); }

/* Incoming verification request cards (on OSATs subtab → To verify). */
.pv-req-card {
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--blue); border-radius:12px;
  padding:16px 18px; margin-bottom:10px;
  transition:box-shadow .12s, border-color .12s;
}
.pv-req-card:hover { box-shadow:0 2px 10px rgba(0,0,0,.05); }
.pv-req-hdr-row { display:flex; align-items:flex-start; gap:14px;
                  margin-bottom:10px; flex-wrap:wrap; }
.pv-req-body { flex:1; min-width:0; }
.pv-req-title-row { display:flex; align-items:center; gap:9px;
                    flex-wrap:wrap; margin-bottom:6px; }
.pv-req-title { font-size:15.5px; font-weight:600; margin:0; }
.pv-req-type  { font-size:12px; color:var(--muted); }
.pv-req-requester-row { display:flex; align-items:center; gap:10px;
                        margin-bottom:10px; font-size:12.5px; }
.pv-req-meta-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.pv-meta-chip { display:inline-flex; align-items:center; gap:5px;
                padding:3px 8px; background:var(--surface2);
                border-radius:6px; font-size:11px; color:var(--muted);
                font-weight:500; }
.pv-req-note-quote {
  padding:10px 12px; background:var(--surface2);
  border-left:3px solid var(--blue); border-radius:0 7px 7px 0;
  font-size:12.5px; line-height:1.5; font-style:italic;
  color:var(--text); margin-bottom:6px;
}
.pv-req-complications {
  padding:7px 10px; background:var(--amber-bg);
  border:1px solid var(--amber); border-radius:7px;
  font-size:11.5px; color:var(--amber); margin-bottom:10px;
  display:flex; gap:7px; align-items:flex-start;
}
.pv-req-actions {
  display:flex; gap:8px; justify-content:flex-end;
  padding-top:10px; border-top:1px solid var(--border);
  flex-wrap:wrap;
}

/* Blue pill for the "To verify" filter (distinct from accent-coloured pills). */
.pv-pill-blue-active {
  background:var(--blue-bg); color:var(--blue);
  border-color:var(--blue);
}
.pv-badge-count {
  min-width:18px; height:18px; padding:0 5px; border-radius:99px;
  background:var(--red); color:#fff;
  font-size:10.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:2px;
}

/* Callout banner at the top of OSATs subtab when there are incoming requests. */
.pv-banner {
  background:var(--blue-bg); border:1px solid var(--blue);
  border-radius:12px; padding:14px 18px; margin-bottom:14px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.pv-banner-icon {
  width:36px; height:36px; border-radius:99px; background:var(--blue);
  color:#fff; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:16px;
}
.pv-banner-text { flex:1; min-width:180px; font-size:12.5px; }
.pv-banner-text strong { display:block; font-weight:600; margin-bottom:1px; }
.pv-banner-text .pv-banner-sub { color:var(--muted); }

/* Verify / Decline modals (overlay + card). Reuses .modal-overlay vibes
   but is self-contained so we don't clash with existing modal styles. */
.pv-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:2500;
  padding:20px;
}
.pv-modal {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; width:440px; max-width:100%;
  padding:22px 24px 18px;
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  animation:pv-fadedown .2s ease-out;
}
.pv-modal h3 { font-size:18px; margin:0 0 4px; font-weight:600; }
.pv-modal-sub { font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.pv-modal-info {
  padding:10px 12px; background:var(--green-bg); border-radius:7px;
  font-size:12px; color:var(--green);
  margin:12px 0 16px; display:flex; gap:7px; align-items:flex-start;
  line-height:1.5;
  border:1px solid var(--green);
}
.pv-modal-summary {
  padding:12px; background:var(--surface2); border-radius:8px;
  margin-bottom:14px; font-size:12.5px;
}
.pv-modal-summary-title { font-weight:600; margin-bottom:4px; }
.pv-modal-summary-sub { color:var(--muted); }
.pv-modal-foot { display:flex; justify-content:flex-end; gap:8px;
                 margin-top:14px; }
textarea.pv-textarea {
  width:100%; padding:10px 12px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:7px; color:var(--text); font-family:inherit;
  font-size:13px; resize:vertical; min-height:68px; outline:none;
  transition:border-color .15s;
}
textarea.pv-textarea:focus { border-color:var(--accent); }

/* Buttons reused across modals + cards. */
.pv-btn {
  font-family:inherit; padding:8px 14px; border-radius:7px;
  font-size:13px; font-weight:500; cursor:pointer;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text); transition:all .12s;
  display:inline-flex; align-items:center; gap:6px;
}
.pv-btn:hover { background:var(--surface2); }
.pv-btn:disabled { opacity:.45; cursor:not-allowed; }
.pv-btn-verify {
  background:var(--green); border-color:var(--green); color:#fff; font-weight:600;
}
.pv-btn-verify:hover { filter:brightness(.92); }
.pv-btn-decline {
  background:transparent; border-color:var(--border); color:var(--red);
}
.pv-btn-decline:hover { background:var(--red-bg); border-color:var(--red); }
.pv-btn-ghost {
  background:transparent; border-color:transparent; color:var(--muted);
}
.pv-btn-ghost:hover { background:var(--surface2); color:var(--text); }
.pv-btn-primary {
  background:transparent; border:1.5px solid var(--accent);
  color:var(--accent); font-weight:600;
}
.pv-btn-primary:hover { background:var(--accent-bg); }

/* Supervisor view — "Peer verified by …" attribution pill + optional note. */
.pv-supervisor-attribution {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:500;
  padding:3px 8px; border-radius:6px;
  background:var(--green-bg); color:var(--green);
  border:1px solid var(--green);
}
.pv-supervisor-note {
  margin-top:6px; padding:8px 10px;
  background:var(--surface2); border-radius:6px;
  font-size:11.5px; color:var(--muted); line-height:1.5;
  border-left:2px solid var(--blue);
}

/* Responsive tweaks. */
@media (max-width: 600px) {
  .pv-req-actions { justify-content:stretch; }
  .pv-req-actions .pv-btn { flex:1; justify-content:center; }
  .pv-modal { padding:18px 16px 14px; }
}
/* End Peer verification v2.5.2 */

/* ═══════════════════════════════════════════════════════════════════════════
   Milestones v2.6.0
   Resident milestone view (mobile-first), supervisor attestation view, and
   CCC Chair review workspace (desktop). Per-domain colours inlined at render
   time via CSS custom props set on the strip/card element.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Level dot indicators ────────────────────────────────────────────────── */
.lvl-dot {
  display:inline-block;
  width:9px; height:9px; border-radius:50%;
  background:var(--surface2); border:1px solid var(--border);
}
.lvl-dot + .lvl-dot { margin-left:3px; }
.lvl-dot.on { background:var(--accent); border-color:var(--accent); }
.lvl-dot.on.purple { background:var(--purple); border-color:var(--purple); }
.lvl-dot.half {
  background:linear-gradient(90deg, var(--purple) 50%, var(--surface2) 50%);
  border-color:var(--purple);
}
.ms-dot-row { display:inline-flex; align-items:center; gap:3px; }

/* ─── Shared — overall position card on resident view ─────────────────────── */
.ms-overall-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:14px; margin-bottom:14px;
}
.ms-overall-big {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:32px; line-height:1; color:var(--accent);
}
.ms-overall-den { font-size:16px; color:var(--muted); }
.ms-overall-bar {
  height:6px; background:var(--surface2); border-radius:99px;
  overflow:hidden; margin:10px 0;
}
.ms-overall-bar > span {
  display:block; height:100%; background:var(--accent);
  border-radius:99px; transition:width .4s;
}
.ms-overall-legend {
  display:flex; flex-wrap:wrap; gap:10px;
  font-size:11.5px; color:var(--muted);
}
.ms-overall-ccc {
  margin-top:14px; padding:10px 12px; border-radius:8px;
  background:var(--purple-bg, rgba(123,94,167,.1));
  color:var(--purple);
  display:flex; gap:8px; align-items:flex-start;
  font-size:11.5px; line-height:1.45;
  border:1px solid rgba(123,94,167,.25);
}

/* ─── Domain strip (resident view) ────────────────────────────────────────── */
.ms-domain-strip {
  padding:11px 13px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
  cursor:pointer; transition:all .15s;
  margin-bottom:8px;
}
.ms-domain-strip.open {
  background:var(--ms-domain-bg, var(--surface2));
  border-color:var(--ms-domain-bd, var(--border));
}
.ms-domain-code {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; padding:2px 9px; border-radius:99px;
  background:var(--ms-domain-color, var(--accent));
  color:#fff; font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10px; font-weight:600;
}
.ms-domain-body { flex:1; min-width:0; }
.ms-domain-name { font-size:13px; font-weight:500; }
.ms-domain-meta { font-size:11px; color:var(--muted); margin-top:1px; }
.ms-domain-avg {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:19px; line-height:1;
  color:var(--ms-domain-color, var(--accent));
}
.ms-domain-chev { color:var(--muted); font-size:14px; }

/* ─── Subcompetency card (inside an expanded domain) ──────────────────────── */
.ms-sub-wrap { padding-left:4px; margin-top:6px; }
.ms-sub-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px; margin-bottom:6px;
  transition:border-color .15s;
}
.ms-sub-card.expanded { border-color:var(--ms-domain-color, var(--accent)); }
.ms-sub-head {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
}
.ms-sub-title-row {
  display:flex; gap:7px; align-items:center; margin-bottom:3px;
  flex-wrap:wrap;
}
.ms-sub-code {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10.5px; font-weight:600;
  color:var(--ms-domain-color, var(--accent));
}
.ms-sub-title { font-size:12.5px; font-weight:500; }
.ms-sub-meta {
  display:flex; gap:8px; align-items:center;
  font-size:11px; color:var(--muted);
}
.ms-sub-chip {
  font-size:10.5px; padding:2px 8px; border-radius:6px;
  background:var(--surface2); color:var(--muted); font-weight:500;
}

.ms-sub-body {
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--border);
}
.ms-sub-intent {
  font-size:12px; line-height:1.45; font-style:italic;
  margin-bottom:12px;
}
.ms-sub-lbl {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:500; margin-bottom:6px;
}
.ms-sub-levels { margin-bottom:12px; }
.ms-level-row {
  display:flex; gap:9px; padding:6px 0;
  font-size:11.5px; line-height:1.4;
}
.ms-level-row.dim { opacity:.55; }
.ms-level-row.current { font-weight:500; opacity:1; }
.ms-level-label {
  flex-shrink:0; min-width:24px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:600;
}
.ms-level-row.current .ms-level-label { color:var(--ms-domain-color, var(--accent)); }
.ms-level-row.dim .ms-level-label { color:var(--muted); }

.ms-evidence-timeline { margin-bottom:12px; }
.ms-evidence-row {
  display:flex; gap:9px; padding:5px 0;
  font-size:11.5px;
  border-bottom:1px solid var(--border);
}
.ms-evidence-row:last-child { border-bottom:none; }
.ms-evidence-date {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  color:var(--muted); min-width:72px; font-size:10.5px;
}
.ms-evidence-kind {
  display:inline-flex; align-items:center;
  padding:1px 6px; border-radius:6px;
  background:var(--surface2); color:var(--muted);
  font-size:9.5px; font-weight:500;
}

.ms-sub-actions { display:flex; gap:6px; flex-wrap:wrap; }

/* ─── Resident — request-attestation bottom-sheet modal ───────────────────── */
.ms-sheet-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  display:flex; align-items:flex-end; justify-content:center;
  z-index:2500;
}
.ms-sheet {
  background:var(--surface); width:100%; max-width:540px;
  border-radius:16px 16px 0 0; padding:18px;
  box-shadow:0 -12px 40px rgba(0,0,0,.2);
  animation:ms-sheet-up .22s ease-out;
}
@keyframes ms-sheet-up {
  from { transform:translateY(20px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
.ms-sheet-head {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px;
}
.ms-sheet-title {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:18px;
}

/* ─── Level picker (1–5 buttons, resident view) ───────────────────────────── */
.ms-level-picker { display:flex; gap:8px; margin-bottom:14px; }
.ms-level-picker .ms-lvl-btn {
  flex:1; padding:9px 0;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); border-radius:7px;
  font-family:inherit; font-size:13px; cursor:pointer;
  transition:all .15s;
}
.ms-level-picker .ms-lvl-btn:hover { background:var(--surface2); }
.ms-level-picker .ms-lvl-btn.sel {
  background:var(--accent-bg); border-color:var(--accent);
  color:var(--accent); font-weight:600;
}

/* ─── Supervisor attestation view ─────────────────────────────────────────── */
.att-wrap {
  display:grid; grid-template-columns:280px 1fr; gap:14px;
  height:calc(100vh - 160px); min-height:520px;
}
.att-residents-list {
  border-right:1px solid var(--border); padding-right:10px;
  overflow-y:auto;
}
.att-resident-row {
  padding:9px 10px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; margin-bottom:4px;
}
.att-resident-row:hover { background:var(--surface2); }
.att-resident-row.sel {
  background:var(--surface); border-color:var(--accent);
  border-left:3px solid var(--accent);
}
.att-resident-name { font-size:13px; font-weight:500; }
.att-resident-sub { font-size:11px; color:var(--muted); margin-top:2px; }

.att-grid { overflow-y:auto; padding-right:6px; }
.att-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:12px 14px; margin-bottom:8px;
}
.att-card-top {
  display:flex; gap:10px; align-items:center;
  margin-bottom:6px; flex-wrap:wrap;
}
.att-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:99px;
  font-size:10.5px; font-weight:500;
}
.att-digest {
  padding:9px 11px; border-radius:8px;
  background:var(--purple-bg, rgba(123,94,167,.08));
  border:1px dashed rgba(123,94,167,.4);
  font-size:11.5px; line-height:1.5;
  margin:6px 0;
}
.att-digest-head {
  display:flex; gap:6px; align-items:center; margin-bottom:4px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--purple); font-weight:500;
}
.att-attest-btn {
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  padding:7px 14px; border-radius:7px; font-size:12.5px; cursor:pointer;
}
.att-attest-btn:hover { filter:brightness(.92); }

/* Attestation modal — fuller than a bottom sheet; centred card. */
.att-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:2500; padding:20px;
}
.att-modal {
  background:var(--surface); width:540px; max-width:100%;
  max-height:85vh; overflow-y:auto;
  border-radius:14px; padding:22px 24px 18px;
  border:1px solid var(--border);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}
.att-modal h3 { font-size:20px; font-weight:600; margin:0 0 4px; }
.att-modal-sub { font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.att-field-lbl {
  font-size:11px; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px;
  display:block;
}
.att-textarea {
  width:100%; min-height:100px;
  padding:10px 12px; border:1px solid var(--border);
  background:var(--surface2); border-radius:7px;
  font-family:inherit; font-size:13px; color:var(--text);
  resize:vertical; outline:none; transition:border-color .15s;
}
.att-textarea:focus { border-color:var(--accent); }

/* ─── CCC Review workspace ────────────────────────────────────────────────── */
.ccc-header {
  padding:16px 22px 12px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.ccc-header-title-row {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-bottom:4px;
}
.ccc-header-title {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:26px; margin:0;
}
.ccc-header-sub { font-size:12px; color:var(--muted); }
.ccc-header-actions {
  display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;
}

.ccc-grid {
  display:grid; grid-template-columns:260px 1fr 300px;
  min-height:540px;
}
.ccc-left, .ccc-right {
  padding:14px 12px; background:var(--bg);
}
.ccc-left  { border-right:1px solid var(--border); }
.ccc-right { border-left:1px solid var(--border); }
.ccc-center {
  padding:16px 20px; overflow-y:auto; max-height:calc(100vh - 240px);
}

.ccc-label {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:500; margin-bottom:10px; padding:0 4px;
}
.ccc-resident-row {
  padding:9px 10px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; margin-bottom:4px;
  transition:background .12s;
}
.ccc-resident-row:hover { background:var(--surface2); }
.ccc-resident-row.sel {
  background:var(--surface);
  border:1px solid rgba(123,94,167,.35);
  border-left:3px solid var(--purple);
}
.ccc-resident-name-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:3px;
}
.ccc-resident-name { font-size:12.5px; font-weight:500; }
.ccc-resident-pgy {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10px; color:var(--muted);
}
.ccc-status-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:99px;
  font-size:10px; font-weight:500;
}
.ccc-status-pending   { background:var(--surface2); color:var(--muted); }
.ccc-status-progress  { background:var(--amber-bg); color:var(--amber); }
.ccc-status-review    { background:var(--purple-bg, rgba(123,94,167,.1)); color:var(--purple); }
.ccc-status-locked    { background:var(--green-bg); color:var(--green); }

.ccc-resident-head {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:6px; flex-wrap:wrap; gap:8px;
}
.ccc-resident-head-name {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:22px; line-height:1.1;
}
.ccc-resident-head-meta { font-size:12px; color:var(--muted); }

.ccc-domain-band { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.ccc-domain-chip {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:8px;
  background:var(--surface); border:1px solid var(--ms-domain-color, var(--border));
}
.ccc-domain-chip-code {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10.5px; font-weight:600;
  color:var(--ms-domain-color, var(--accent));
}
.ccc-domain-chip-avg {
  font-family:'DM Serif Display', Georgia, serif; font-size:15px;
}

/* Sub review card (center column) — 2-column split */
.ccc-sub-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:14px; margin-bottom:10px;
}
.ccc-sub-card.locked {
  border-color:rgba(42,107,58,.25); opacity:.88;
}
.ccc-sub-row { display:flex; gap:14px; flex-wrap:wrap; }
.ccc-sub-left { flex:1; min-width:280px; }
.ccc-sub-right {
  width:240px; flex-shrink:0; padding-left:14px;
  border-left:1px solid var(--border);
}

.ccc-sub-title-row {
  display:flex; gap:8px; align-items:center; margin-bottom:5px;
  flex-wrap:wrap;
}

.ccc-committee-big {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:26px; line-height:1; color:var(--purple);
}
.ccc-committee-big.locked { color:var(--green); }

/* half-step slider */
.half-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px;
  background:var(--surface2); border-radius:99px; outline:none;
  margin:4px 0;
}
.half-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--purple); cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.half-slider::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:var(--purple); cursor:pointer; border:none;
}
.half-slider:disabled::-webkit-slider-thumb { background:var(--green); }
.half-slider:disabled::-moz-range-thumb     { background:var(--green); }

.ccc-slider-legend {
  display:flex; justify-content:space-between;
  font-size:9px; color:var(--muted); margin-bottom:8px;
}

.ccc-notes-ta {
  width:100%; min-height:56px; padding:8px 10px;
  border:1px solid var(--border); background:var(--surface2);
  border-radius:7px; font-family:inherit; font-size:11.5px;
  color:var(--text); resize:vertical; outline:none;
}
.ccc-notes-ta:focus { border-color:var(--purple); }

.ccc-sub-actions { display:flex; gap:5px; margin-top:8px; }
.ccc-btn-purple {
  background:var(--purple); color:#fff; border:1px solid var(--purple);
  padding:5px 10px; border-radius:6px; font-size:11px; cursor:pointer;
  flex:1; justify-content:center; display:inline-flex; align-items:center;
}
.ccc-btn-purple:hover { filter:brightness(.92); }
.ccc-btn-purple:disabled { opacity:.6; cursor:not-allowed; }

/* AI digest card on CCC surface */
.ccc-ai-digest {
  padding:10px; border-radius:8px;
  background:var(--purple-bg, rgba(123,94,167,.1));
  border:1px dashed rgba(123,94,167,.4);
  margin:8px 0 10px; font-size:11.5px; line-height:1.5;
}
.ccc-ai-digest-lbl {
  display:flex; gap:6px; align-items:center; margin-bottom:4px;
  font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--purple); font-weight:500;
}
.ccc-ai-digest-foot {
  display:flex; gap:10px; align-items:center;
  font-size:10.5px; margin-top:4px;
}

/* Minutes drawer */
.ccc-minutes-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; justify-content:flex-end; z-index:2500;
}
.ccc-minutes-drawer {
  width:480px; max-width:100%; background:var(--surface);
  padding:22px 20px; overflow-y:auto;
  animation:ccc-drawer-in .2s ease-out;
}
@keyframes ccc-drawer-in {
  from { transform:translateX(30px); opacity:0; }
  to   { transform:translateX(0);    opacity:1; }
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .att-wrap { grid-template-columns:1fr; height:auto; }
  .att-residents-list { max-height:220px; border-right:none; border-bottom:1px solid var(--border); padding:0 0 10px; }
  .ccc-grid { grid-template-columns:1fr; }
  .ccc-left, .ccc-right { border:none; border-top:1px solid var(--border); }
  .ccc-center { max-height:none; }
  .ccc-sub-right { width:100%; padding-left:0; border-left:none; padding-top:10px; border-top:1px solid var(--border); }
}
/* End Milestones v2.6.0 */

/* ═══════════════════════════════════════════════════════════════════════════
   Onboarding gate — two-tier scope radio cards (v2.10)
   Used on #gateStep1 to replace the programme-specific <select>. Residents
   see PGME + UGME (2 cards); faculty see PGME + UGME + "both" (3 cards).
   ═══════════════════════════════════════════════════════════════════════════ */

.scope-radio-stack {
  display:flex; flex-direction:column; gap:8px;
}
.scope-radio-card {
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 14px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:10px; cursor:pointer;
  transition:background .15s, border-color .15s;
  text-align:left;
}
.scope-radio-card:hover { background:var(--surface2); }
.scope-radio-card.sel {
  background:var(--accent-bg); border-color:var(--accent);
}
.scope-radio-card.sel .scope-radio-dot {
  background:var(--accent); border-color:var(--accent);
}
.scope-radio-card.sel .scope-radio-dot::after {
  content:''; width:6px; height:6px; border-radius:50%; background:#fff;
}
/* Purple accent for the faculty-only "both" card */
.scope-radio-card.both.sel {
  background:var(--purple-bg); border-color:var(--purple);
}
.scope-radio-card.both.sel .scope-radio-dot {
  background:var(--purple); border-color:var(--purple);
}

.scope-radio-dot {
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--border); background:var(--surface);
  flex-shrink:0; margin-top:2px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.scope-radio-body { flex:1; min-width:0; }
.scope-radio-title {
  font-size:14.5px; font-weight:600; color:var(--text);
  margin-bottom:2px; line-height:1.3;
}
.scope-radio-desc {
  font-size:12.5px; color:var(--muted); line-height:1.45;
}
.scope-radio-chip {
  display:inline-block; padding:2px 8px; border-radius:99px;
  font-size:10px; font-weight:600; letter-spacing:.04em;
  margin-left:8px; vertical-align:middle;
  background:var(--blue-bg); color:var(--blue);
}

/* Divider row separating the "both" card from the first two */
.scope-divider {
  display:flex; align-items:center; gap:10px;
  margin:8px 0 2px;
}
.scope-divider-line { flex:1; height:1px; background:var(--border); }
.scope-divider-label {
  font-size:10.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
/* End v2.10 scope radios */

/* ═══════════════════════════════════════════════════════════════════════════
   Site-paused notice (v2.10.2)
   Minimal replacement for the auth-card when window.SITE_PAUSED === true.
   Label + single sentence, matching the existing auth-card chrome so the
   page remains visually anchored.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The page-level `.hidden` class is scoped to a few specific IDs (see
   :top of this file). Add the two we need for the site-paused swap. */
#authCard.hidden,
#siteNoticeCard.hidden { display:none !important; }

.site-notice-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:34px 32px 30px;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
  /* match .auth-card placement within the auth-shell grid */
  align-self:start;
  max-width:460px;
  width:100%;
  margin:0 auto;
}
.site-notice-label {
  font-size:11px; color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  margin:18px 0 8px;
}
.site-notice-title {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:24px; line-height:1.25;
  font-weight:400; color:var(--text);
  margin:0;
}
/* End site-paused notice */

/* ═══════════════════════════════════════════════════════════════════════════
   Auth panels — rotation fade (v2.10.3)
   The five text elements cycle every 8s. auth_panels.js toggles .ap-fading
   on each to fade OUT → swap text → fade IN. Keep the duration in sync with
   FADE_DURATION_MS in js/auth_panels.js (currently 300ms).
   ═══════════════════════════════════════════════════════════════════════════ */
#panelFactTag,
#panelFactText,
#panelQuote,
#panelAuthor,
#panelEra {
  transition: opacity .3s ease-in-out;
}
#panelFactTag.ap-fading,
#panelFactText.ap-fading,
#panelQuote.ap-fading,
#panelAuthor.ap-fading,
#panelEra.ap-fading {
  opacity: 0;
}
/* End auth-panels fade */

/* ═════════════════════════════════════════════════════════════════════════════
   AI Rota Assistant — v2.12.0
   Slide-over panel (right-aligned) used by js/rota_assistant.js. Shares the
   anthropic theme tokens defined at the top of this stylesheet.
   ═════════════════════════════════════════════════════════════════════════════ */
.ra-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(28, 25, 21, 0.45);
  display: flex; justify-content: flex-end;
  animation: raFadeIn .18s ease-out;
}
@keyframes raFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ra-panel {
  width: min(1080px, 96vw); height: 100vh;
  background: var(--surface); border-left: 1px solid var(--border);
  display: grid; grid-template-columns: 220px 1fr; overflow: hidden;
  animation: raSlideIn .22s ease-out;
  box-shadow: -8px 0 32px rgba(0, 0, 0, .16);
}
@keyframes raSlideIn { from { transform: translateX(24px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
@media (max-width: 860px) {
  .ra-panel { grid-template-columns: 1fr; width: 100vw; }
  .ra-sidebar { display: none; }
}

.ra-sidebar {
  background: var(--surface2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.ra-brand { padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.ra-brand-name { font-weight: 700; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.ra-sparkle { filter: drop-shadow(0 0 3px rgba(123, 94, 167, .35)); color: var(--purple, #7B5EA7); }
.ra-brand-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ra-nav { list-style: none; padding: 6px 0; margin: 0; flex: 1; overflow-y: auto; }
.ra-nav li {
  padding: 9px 16px; font-size: 13px; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  border-left: 3px solid transparent; user-select: none;
}
.ra-nav li:hover { background: rgba(123, 94, 167, 0.06); color: var(--text); }
.ra-nav li.active { background: var(--surface); color: var(--text); font-weight: 600; border-left-color: var(--purple, #7B5EA7); }
.ra-foot { padding: 10px 16px; border-top: 1px solid var(--border); font-size: 10.5px; line-height: 1.55; }
.ra-foot-muted { color: var(--muted); }

.ra-main-wrap { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.ra-head {
  padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ra-head h3 { font-size: 15px; font-weight: 700; margin: 0; color: var(--text); }
.ra-close {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--muted);
  cursor: pointer; font-size: 14px;
}
.ra-close:hover { background: var(--surface); color: var(--text); }

.ra-main { padding: 18px 20px; overflow-y: auto; flex: 1; }

/* Cards — used on overview */
.ra-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 720px) { .ra-cards { grid-template-columns: 1fr; } }
.ra-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px;
}
.ra-card h4 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; font-weight: 700; }
.ra-card-big { font-size: 17px; font-weight: 700; color: var(--text); }
.ra-card-hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.ra-card-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.ra-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 99px; border: 1px solid var(--border); background: var(--surface2);
  font-size: 11.5px; font-weight: 500; color: var(--text);
}
.ra-chip strong { color: var(--text); font-weight: 700; }

.ra-quick { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.ra-btn {
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.ra-btn:hover:not(:disabled) { background: var(--surface2); }
.ra-btn:disabled { opacity: .6; cursor: not-allowed; }
.ra-btn-ai { background: var(--accent-bg, rgba(201, 106, 42, .1)); border-color: rgba(201, 106, 42, .35); color: var(--accent, #C96A2A); }
.ra-btn-primary {
  background: linear-gradient(135deg, var(--purple, #7B5EA7) 0%, #6A4F96 100%);
  border-color: #6A4F96; color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.ra-btn-primary:hover:not(:disabled) { filter: brightness(1.05); }

/* Rules tab */
.ra-rules-grid { display: grid; grid-template-columns: 1fr 280px; gap: 14px; }
@media (max-width: 860px) { .ra-rules-grid { grid-template-columns: 1fr; } }
.ra-rules-source {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; font-size: 12px; margin-bottom: 10px; gap: 10px; flex-wrap: wrap;
}
.ra-rules-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ra-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 6px 0; }
.ra-textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 12.5px; line-height: 1.55;
  color: var(--text); resize: vertical;
}
.ra-textarea:focus { outline: 2px solid rgba(123, 94, 167, .3); outline-offset: -1px; }
.ra-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; }

.ra-quick-toggles {
  margin-top: 12px; padding: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
}
.ra-section-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 8px; }
.ra-qt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font-size: 11.5px; }
@media (max-width: 720px) { .ra-qt-grid { grid-template-columns: repeat(2, 1fr); } }
.ra-qt-grid label { display: flex; flex-direction: column; gap: 3px; }
.ra-qt-grid span { color: var(--muted); font-weight: 600; }
.ra-qt-grid input {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface2); font-family: inherit; font-size: 12px; color: var(--text);
}
.ra-error { color: var(--red); font-size: 11px; margin-top: 6px; }
.ra-row-end { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }

.ra-ai-summary {
  background: var(--purple-bg, rgba(123, 94, 167, .1));
  border: 1px solid rgba(123, 94, 167, .25);
  border-radius: 10px; padding: 12px;
}
.ra-ai-summary h4 { font-size: 11px; color: var(--purple, #7B5EA7); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; font-weight: 700; }
.ra-parsed { list-style: none; padding: 0; margin: 0; font-size: 11.5px; line-height: 1.55; }
.ra-parsed li { padding: 4px 0; border-bottom: 1px dashed rgba(123, 94, 167, .2); color: var(--text); }
.ra-parsed li:last-child { border-bottom: none; }
.ra-tag {
  display: inline-block; background: var(--surface); border: 1px solid var(--border);
  padding: 0 6px; border-radius: 4px; font-size: 10px; color: var(--muted);
  margin-right: 5px; font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ra-tag-amber { background: var(--amber-bg, rgba(160, 98, 10, .12)); color: var(--amber, #A0620A); border-color: rgba(160, 98, 10, .35); }
.ra-confidence { margin-top: 10px; font-size: 11px; color: var(--muted); }

/* Staff & Leave tab */
.ra-sl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .ra-sl-grid { grid-template-columns: 1fr; } }
.ra-staff-list, .ra-leave {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px;
}
.ra-staff-list h4, .ra-leave h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 10px; font-weight: 700;
}
.ra-staff-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 12px;
}
.ra-staff-row:last-child { border-bottom: none; }
.ra-pgy {
  font-size: 10px; padding: 1px 6px; border-radius: 99px;
  background: var(--surface2); border: 1px solid var(--border);
  font-weight: 700; color: var(--muted);
}
.ra-staff-name { flex: 1; }

/* Review Upload tab */
.ra-drop {
  border: 2px dashed rgba(123, 94, 167, .35); border-radius: 10px; padding: 16px;
  background: var(--purple-bg, rgba(123, 94, 167, .08));
  font-size: 12.5px; color: var(--purple, #7B5EA7);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.ra-drop strong { color: #6A4F96; }
.ra-drop-badge {
  background: var(--surface); border: 1px solid rgba(123, 94, 167, .25);
  padding: 3px 10px; border-radius: 99px; color: #6A4F96; font-weight: 600; font-size: 11px;
}
.ra-flags-head { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; font-size: 13px; }

.ra-flag {
  border-left: 3px solid var(--border); padding: 8px 10px; margin-bottom: 8px;
  background: var(--surface); border-radius: 0 6px 6px 0; font-size: 12px; line-height: 1.55;
}
.ra-flag-red { border-left-color: var(--red); background: var(--red-bg, rgba(192, 57, 43, .09)); }
.ra-flag-amber { border-left-color: var(--amber, #A0620A); background: var(--amber-bg, rgba(160, 98, 10, .09)); }
.ra-flag-note { border-left-color: var(--muted); background: var(--surface2); }
.ra-flag-head { font-weight: 600; }
.ra-flag-date { font-weight: 700; margin-right: 6px; }
.ra-flag-rule {
  display: inline-block; font-size: 10px; background: var(--surface); color: var(--muted);
  padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); margin-left: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ra-flag-msg { margin-top: 4px; color: var(--text); }
.ra-flag-suggest { margin-top: 4px; color: var(--muted); }
.ra-flag-suggest strong { color: var(--text); }
.ra-flag-cell { margin-top: 4px; font-size: 11px; color: var(--muted); }
.ra-flag-cell code { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Chat tab */
.ra-chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 100%; }
.ra-msg {
  max-width: 82%; padding: 10px 14px; border-radius: 14px;
  font-size: 13px; line-height: 1.55;
}
.ra-msg-user {
  align-self: flex-end;
  background: var(--accent-bg, rgba(201, 106, 42, .1));
  border: 1px solid rgba(201, 106, 42, .25);
  color: var(--text);
}
.ra-msg-ai {
  align-self: flex-start;
  background: var(--surface); border: 1px solid var(--border);
}
.ra-msg-who {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 4px; font-weight: 700;
}
.ra-msg-ai .ra-msg-who { color: var(--purple, #7B5EA7); }
.ra-msg-body code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; background: var(--surface2);
  padding: 1px 5px; border-radius: 4px;
}

/* Generic note callout */
.ra-note {
  margin: 10px 0; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px; color: var(--muted); line-height: 1.55;
}
.ra-note strong { color: var(--text); }

/* Composer */
.ra-composer {
  padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface);
}
.ra-composer-box {
  display: flex; gap: 8px; align-items: flex-end;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px 8px;
}
.ra-composer-icon { color: var(--muted); padding: 10px 4px 0 4px; line-height: 1; }
.ra-composer-box textarea {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13px; padding: 8px 4px; color: var(--text);
  resize: none; min-height: 22px; max-height: 180px; line-height: 1.45;
  /* Wrap long lines so nothing is hidden off-screen. */
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.ra-composer-box textarea:focus { outline: none; }
.ra-composer-send {
  background: var(--purple, #7B5EA7); color: #fff; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  align-self: flex-end;
}
.ra-composer-send:hover:not(:disabled) { background: #6A4F96; }
.ra-composer-send:disabled { opacity: .6; cursor: not-allowed; }
.ra-composer-perms {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 8px; padding: 0 4px; flex-wrap: wrap;
}
.ra-auto-apply {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text); cursor: pointer; user-select: none;
}
.ra-auto-apply input[type="checkbox"] {
  width: 14px; height: 14px; margin: 0; accent-color: var(--purple, #7B5EA7);
}
.ra-auto-apply strong { color: var(--purple-strong, #6A4F96); font-weight: 600; }
.ra-composer-hint { font-size: 10.5px; color: var(--muted); }

/* Thinking bubble (shown while the assistant is processing) */
.ra-msg-thinking .ra-thinking-body {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-style: italic; font-size: 12.5px;
}
.ra-thinking-dots { display: inline-flex; gap: 4px; }
.ra-thinking-dots > span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple, #7B5EA7);
  animation: raThinking 1.4s infinite ease-in-out both;
}
.ra-thinking-dots > span:nth-child(2) { animation-delay: .16s; }
.ra-thinking-dots > span:nth-child(3) { animation-delay: .32s; }
@keyframes raThinking {
  0%, 80%, 100% { transform: scale(0.55); opacity: .4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Ensure rendered chat messages wrap nicely when users send long inputs or
   the model returns long code/text lines. */
.ra-msg-body { white-space: normal; word-break: break-word; overflow-wrap: break-word; }
.ra-msg-body code { white-space: pre-wrap; word-break: break-word; }
/* ── Phase B additions ──────────────────────────────────────────────────── */

/* Leave calendar (Staff & Leave tab) */
.ra-staff-row-selected {
  background: var(--purple-bg, rgba(123, 94, 167, .12));
  border-radius: 6px;
}
.ra-swatch {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, .15);
}
.ra-leave-count {
  font-size: 10px; color: var(--amber, #A0620A); font-weight: 700;
  background: var(--amber-bg, rgba(160, 98, 10, .12));
  padding: 1px 6px; border-radius: 99px;
}
.ra-cal-grid-head, .ra-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.ra-cal-dow {
  font-size: 10px; color: var(--muted); text-align: center;
  padding: 4px 0; font-weight: 700; text-transform: uppercase;
}
.ra-cal-cell {
  aspect-ratio: 1;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface2);
  display: flex; flex-direction: column; align-items: center;
  padding: 4px; font-weight: 600; color: var(--text);
  cursor: pointer; user-select: none;
  font-size: 11px; position: relative; transition: background .12s;
}
.ra-cal-cell:hover { background: var(--surface); }
.ra-cal-cell.ra-cal-pad { background: transparent; border-color: transparent; cursor: default; }
.ra-cal-cell.ra-cal-on {
  background: var(--purple-bg, rgba(123, 94, 167, .18));
  border-color: rgba(123, 94, 167, .45);
}
.ra-cal-num { font-size: 12px; margin-top: 2px; }
.ra-cal-dots { display: flex; gap: 2px; margin-top: auto; flex-wrap: wrap; justify-content: center; }
.ra-cal-dot {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .15);
}

/* Generate pipeline */
.ra-gen-grid { display: grid; grid-template-columns: 1fr 280px; gap: 14px; }
@media (max-width: 860px) { .ra-gen-grid { grid-template-columns: 1fr; } }
.ra-gen-panel, .ra-gen-side > * {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px;
}
.ra-gen-side { display: flex; flex-direction: column; gap: 10px; }
.ra-gen-side > * { padding: 12px; }
.ra-gen-out-card h5 {
  font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .06em;
  font-weight: 700; margin: 0 0 8px;
}
.ra-stat {
  display: flex; justify-content: space-between; padding: 4px 0;
  border-bottom: 1px dashed var(--border); font-size: 12px;
}
.ra-stat:last-child { border-bottom: none; }
.ra-stat strong { font-weight: 700; }

.ra-progress {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; margin-top: 12px;
}
.ra-step { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; padding: 6px 0; }
.ra-step-mark {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff; flex-shrink: 0; margin-top: 1px;
  background: var(--border);
}
.ra-step-pending .ra-step-mark { background: var(--border); color: var(--muted); }
.ra-step-active .ra-step-mark { background: var(--purple, #7B5EA7); animation: raPulse 1.2s infinite; }
.ra-step-done .ra-step-mark    { background: var(--green, #2A6B3A); }
.ra-step-warn .ra-step-mark    { background: var(--amber, #A0620A); }
.ra-step-fail .ra-step-mark    { background: var(--red, #C0392B); }
.ra-step-label { color: var(--text); }
.ra-step-detail { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
@keyframes raPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Thread strip */
.ra-thread-strip {
  display: flex; gap: 8px; align-items: center; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.ra-thread-list { display: flex; gap: 5px; flex-wrap: nowrap; }
.ra-thread-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 2px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  font-family: inherit; cursor: pointer;
  font-size: 11.5px; color: var(--text); max-width: 180px;
  white-space: nowrap; overflow: hidden;
}
.ra-thread-chip:hover { background: var(--surface2); }
.ra-thread-chip-active {
  background: var(--purple-bg, rgba(123, 94, 167, .12));
  border-color: rgba(123, 94, 167, .35); color: #6A4F96;
}
.ra-thread-chip > span:first-child { font-weight: 600; }
.ra-thread-meta { font-size: 10px; color: var(--muted); }

/* Reset button in the thread strip — visually distinct from "+ New thread"
   so the editor doesn't confuse a destructive wipe with a harmless fork. */
.ra-btn-reset { color: var(--red); border-color: rgba(163,45,45,.35); }
.ra-btn-reset:hover:not(:disabled) { background: rgba(163,45,45,.08); }

/* ── v2.14+ rules editor: view toggle, structured editor, monthly overrides ── */
.ra-rules-view-toggle {
  display: flex; gap: 6px; padding: 0 0 12px;
  border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.ra-btn-active { background: var(--purple, #534AB7); color: #fff; border-color: transparent; }
.ra-btn-active:hover { background: var(--purple, #534AB7); filter: brightness(1.05); }

.ra-structured-wrap {
  margin-top: 18px; padding: 12px 14px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 10px;
}
.ra-structured-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.ra-structured-empty {
  margin-top: 18px; padding: 14px; background: var(--surface2);
  border: 1px dashed var(--border); border-radius: 10px;
  font-size: 12px; color: var(--muted);
}

.ra-struct-section {
  margin-bottom: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
}
.ra-struct-section > summary {
  padding: 8px 12px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  user-select: none;
}
.ra-struct-section > summary::-webkit-details-marker { display: none; }
.ra-struct-section > summary::before {
  content: '▸'; color: var(--muted); font-size: 10px;
  transition: transform .15s;
}
.ra-struct-section[open] > summary::before { transform: rotate(90deg); }
.ra-struct-title { font-weight: 600; }
.ra-struct-badge {
  margin-left: auto; font-size: 10px; padding: 1px 8px;
  background: var(--surface2); border-radius: 10px; color: var(--muted);
}
.ra-struct-body {
  padding: 10px 12px; border-top: 1px solid var(--border); font-size: 11.5px;
}

.ra-struct-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; font-size: 11px;
}
@media (max-width: 820px) {
  .ra-struct-grid { grid-template-columns: repeat(2, 1fr); }
}
.ra-struct-grid label {
  display: flex; flex-direction: column; gap: 3px;
}
.ra-struct-grid label.ra-struct-wide { grid-column: 1 / -1; }
.ra-struct-grid span { color: var(--muted); font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em; }
.ra-struct-grid input, .ra-struct-grid select, .ra-struct-grid textarea {
  font-family: inherit; font-size: 11.5px; padding: 4px 7px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text);
}

.ra-struct-table {
  width: 100%; border-collapse: collapse; font-size: 11px;
}
.ra-struct-table th, .ra-struct-table td {
  padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle;
  text-align: left;
}
.ra-struct-table th {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; background: var(--surface2);
}
.ra-struct-table input[type="text"],
.ra-struct-table input[type="number"] {
  font-family: inherit; font-size: 11px; padding: 3px 6px; width: 100%;
  border: 1px solid var(--border); border-radius: 3px; background: var(--surface);
}

.ra-struct-rolelist { display: flex; flex-direction: column; gap: 8px; }
.ra-struct-role {
  padding: 10px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px;
}
.ra-struct-role-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px dashed var(--border);
}

/* Monthly override sub-view */
.ra-rules-monthly { padding: 6px 0; }
.ra-rules-monthly-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.ra-input {
  font-family: inherit; font-size: 12px; padding: 6px 10px; width: 100%;
  border: 1px solid var(--border); border-radius: 5px; background: var(--surface);
  color: var(--text); margin-top: 4px;
}

/* Solver trace viewer */
.ra-trace-panel {
  padding: 12px 14px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; margin-top: 14px;
}
.ra-trace-day {
  margin-bottom: 4px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
}
.ra-trace-day > summary {
  padding: 6px 10px; font-size: 11.5px; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.ra-trace-day > summary::-webkit-details-marker { display: none; }
.ra-trace-day > summary::before {
  content: '▸'; color: var(--muted); font-size: 10px; transition: transform .15s;
}
.ra-trace-day[open] > summary::before { transform: rotate(90deg); }

/* Rules quick-edit card on the rota view */
.rota-rules-card { grid-column: 1 / -1; }
.rota-rules-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.rota-rules-card-title {
  font-size: 13px; font-weight: 700; color: var(--text);
}
.rota-rules-card-sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.rota-rules-card-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px; margin: 8px 0;
}
.rota-rules-card-stat {
  padding: 8px 10px; background: var(--surface2); border-radius: 6px;
  text-align: center;
}
.rota-rules-card-stat strong {
  display: block; font-size: 16px; font-weight: 700; color: var(--text);
  line-height: 1.1;
}
.rota-rules-card-stat span {
  display: block; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px; margin-top: 2px;
}
.rota-rules-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding-top: 6px; border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.rota-rules-card-meta {
  font-size: 11px; color: var(--muted); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Proposal cards */
.ra-prop-card {
  margin-top: 10px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: 12px;
}
.ra-prop-applied { background: var(--green-bg, rgba(42, 107, 58, .09)); border-color: rgba(42, 107, 58, .35); }
.ra-prop-rejected { opacity: .7; }
.ra-prop-failed  { background: var(--red-bg, rgba(192, 57, 43, .08)); border-color: rgba(192, 57, 43, .35); }
.ra-prop-reverted { opacity: .7; }
.ra-prop-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 700; margin-bottom: 4px;
}
.ra-prop-desc { font-weight: 600; color: var(--text); margin-bottom: 6px; line-height: 1.4; }
.ra-prop-diff { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; margin: 6px 0; }
.ra-diff-line { display: flex; gap: 6px; padding: 1px 0; color: var(--text); }
.ra-diff-op { width: 14px; font-weight: 900; }
.ra-diff-rem .ra-diff-op { color: var(--red); }
.ra-diff-rem code { color: var(--red); text-decoration: line-through; opacity: .85; }
.ra-diff-add .ra-diff-op { color: var(--green); }
.ra-diff-add code { color: var(--green); }
.ra-prop-reason {
  margin-top: 6px; font-size: 11.5px; color: var(--muted);
  padding-top: 6px; border-top: 1px dashed var(--border); line-height: 1.5;
}
.ra-prop-verify {
  margin-top: 6px; padding: 6px 8px; font-size: 11px; line-height: 1.55;
  background: var(--green-bg, rgba(42, 107, 58, .09));
  border: 1px solid rgba(42, 107, 58, .25); border-radius: 6px;
  color: var(--text);
}
.ra-prop-verify strong { color: var(--green, #2A6B3A); font-weight: 700; }
.ra-prop-verify code {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  background: var(--surface); padding: 0 4px; border-radius: 3px;
  border: 1px solid var(--border); margin-right: 4px;
}
.ra-prop-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.ra-prop-apply {
  background: var(--green, #2A6B3A) !important; color: #fff !important;
  border-color: var(--green, #2A6B3A) !important;
}
.ra-prop-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  padding: 2px 8px; border-radius: 99px; background: var(--surface);
  border: 1px solid var(--border); color: var(--muted); font-weight: 700;
}
.ra-prop-badge-ok { background: var(--green-bg, rgba(42, 107, 58, .12)); border-color: rgba(42, 107, 58, .35); color: var(--green); }
.ra-prop-badge-err { background: var(--red-bg, rgba(192, 57, 43, .1)); border-color: rgba(192, 57, 43, .35); color: var(--red); }

/* End AI Rota Assistant */

/* ─────────────────────────────────────────────────────────────────────────
   Phase 1.5 (v3.0.0-rc2) — Admin Cross-Department Home Console
   Rendered by renderAdminCrossDeptHome() into #dashboardView when
   isCrossDeptAdmin() is true (admin + dept preview = 'live').
   ───────────────────────────────────────────────────────────────────────── */
.xdept-group-head{display:flex;align-items:center;gap:10px;margin:18px 0 10px;}
.xdept-group-head:first-child{margin-top:4px;}
.xdept-group-head .title{font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--text);font-weight:700;}
.xdept-group-head .sub{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);}
.xdept-group-head .count-pill{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:99px;padding:1px 8px;}
.xdept-group-head .divider{flex:1;height:1px;background:var(--border);}

.xdept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.xdept-card{background:var(--surface2);border:1px solid var(--border);border-top:3px solid var(--card-accent,var(--accent));border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;}
.xdept-card.unconfigured{background:transparent;border-style:dashed;border-color:var(--border);border-top-style:solid;opacity:.9;}
.xdept-card.unconfigured .xdept-stats{opacity:.6;}
.xdept-card.unconfigured:hover{border-color:var(--card-accent);opacity:1;}
.xdept-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.xdept-card-name{font-size:13px;font-weight:600;color:var(--text);}
.xdept-card-status{font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.xdept-card-status.live{background:var(--green-bg);color:var(--green);}
.xdept-card-status.seed{background:rgba(88,166,255,.14);color:var(--accent);}
.xdept-card-status.todo{background:var(--surface);color:var(--muted);border:1px solid var(--border);}
.xdept-stats{display:flex;gap:10px;font-size:11px;color:var(--muted);margin-top:4px;}
.xdept-stat strong{color:var(--text);font-size:13px;font-weight:600;display:block;font-family:'JetBrains Mono',monospace;}
.xdept-cta{margin-top:10px;padding:7px 10px;font-size:12px;font-weight:500;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-family:inherit;text-align:center;}
.xdept-cta:hover{border-color:var(--card-accent);color:var(--card-accent);}
.xdept-card.unconfigured .xdept-cta{color:var(--muted);}
.xdept-card.unconfigured .xdept-cta:hover{color:var(--card-accent);border-color:var(--card-accent);}

.xdept-footnote{margin-top:16px;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;font-size:11.5px;color:var(--muted);line-height:1.55;}
.xdept-footnote strong{color:var(--text);}
.xdept-footnote code{background:var(--surface);padding:1px 5px;border-radius:3px;color:var(--accent);font-size:10.5px;}
/* End Admin Cross-Department Home Console */

/* ── G.5.1 Notification Preferences modal ───────────────────────────────── */
.npref-section{margin-bottom:20px;}
.npref-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.npref-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;}
.npref-row:last-child{border-bottom:none;}
.npref-row:hover{background:var(--surface2);margin:0 -8px;padding:8px 8px;border-radius:6px;}
.npref-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.npref-label{font-size:13px;font-weight:500;color:var(--text);}
.npref-desc{font-size:11px;color:var(--muted);line-height:1.4;}
.npref-toggle{flex-shrink:0;margin-top:2px;accent-color:var(--accent);cursor:pointer;width:16px;height:16px;}
/* End Notification Preferences */

/* Phase AS — My Widgets: shortcut list flows into up to 3 columns depending on
   viewport width. column-count (not grid-template-columns) so the browser
   balances however many rows exist into however many columns fit — no JS
   recompute needed on resize, and it never leaves an awkward empty column
   when there are only a few widgets. */
.widgets-columns{column-count:3;column-gap:28px;max-width:920px;}
.widgets-columns .widget-row{break-inside:avoid;}
@media (max-width: 900px){.widgets-columns{column-count:2;max-width:620px;}}
@media (max-width: 480px){.widgets-columns{column-count:1;max-width:420px;}}

/* ── Admin Console band + preview banner (super-user role/dept preview, 2026-07-21) ──
   Persistent sticky footer in the sidebar for super-users/devs: switch role,
   switch dept, reach key admin tools, and exit while previewing (which scopes the
   sidebar body to the previewed role). Purple rgba tints work on light + dark. */
.admin-console-band{
  position:sticky; bottom:0; z-index:5;
  margin-top:8px; padding:9px 11px 11px;
  background:rgba(124,58,237,.07);
  border-top:1px solid rgba(124,58,237,.22);
  backdrop-filter:saturate(1.2) blur(2px);
}
.admin-console-band.previewing{ box-shadow:0 -3px 14px rgba(124,58,237,.16); }
.acb-h{ display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--purple,#7c3aed); margin-bottom:8px; }
.acb-mode{ margin-left:auto; font-size:9px; font-weight:700; background:var(--surface2,var(--surface,#fff)); border:1px solid rgba(124,58,237,.22); border-radius:12px; padding:1px 7px; color:var(--purple,#7c3aed); }
.acb-sw{ display:flex; align-items:center; gap:7px; background:var(--surface2,var(--surface,#fff)); border:1px solid rgba(124,58,237,.22); border-radius:8px; padding:5px 9px; margin-bottom:6px; }
.acb-lbl{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--purple,#7c3aed); width:44px; flex-shrink:0; }
.acb-sw select{ flex:1; min-width:0; border:none; background:transparent; font-size:12px; font-weight:600; color:var(--text); cursor:pointer; outline:none; }
.acb-links{ display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 8px; }
.acb-link{ font-size:11px; font-weight:600; color:var(--purple,#7c3aed); background:var(--surface2,var(--surface,#fff)); border:1px solid rgba(124,58,237,.22); border-radius:7px; padding:4px 8px; cursor:pointer; }
.acb-link:hover{ filter:brightness(.97); }
.acb-exit{ width:100%; font-size:12px; font-weight:700; color:#fff; background:var(--purple,#7c3aed); border:none; border-radius:8px; padding:8px; cursor:pointer; }
.acb-exit:hover{ filter:brightness(1.07); }
.sidebar-preview-banner{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:8px;
  margin:0 0 8px; padding:8px 10px;
  background:rgba(124,58,237,.11); border:1px solid rgba(124,58,237,.28);
  border-radius:10px; font-size:12px; font-weight:600; color:var(--purple,#7c3aed);
}
.sidebar-preview-banner b{ font-weight:800; }
.spb-eye{ font-size:14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   KEYBOARD FOCUS INDICATOR — standards review 2026-08-02, theme T6
   ═══════════════════════════════════════════════════════════════════════════
   WCAG 2.4.7 (Focus Visible) is a Level-AA failure app-wide: ~25 rules do
   `:focus{outline:none}` and nothing restores an indicator, so a keyboard-only
   user has no idea where they are. Those rules pair the removed outline with a
   border-colour change, which works for text inputs but leaves every div, tab,
   sidebar item and icon button with no cue at all.

   `:focus-visible` only matches keyboard/programmatic focus, never a mouse
   click, so this restores the indicator for keyboard users without putting a
   ring around everything the mouse touches — i.e. it fixes the accessibility
   failure without changing the pointer-driven look the design intends.

   `!important` is deliberate and load-bearing: the existing `.form-input:focus`
   rules have specificity (0,2,0) and would otherwise beat a bare
   `:focus-visible` (0,1,0) regardless of source order. Keep this block LAST. */
*:focus-visible {
  outline: 3px solid var(--accent, #2563eb) !important;
  outline-offset: 2px !important;
}
/* Inside modals/overlays the accent can sit on a similar ground — widen the
   contrast with a paired inset ring so the indicator survives either backdrop. */
.modal-overlay *:focus-visible,
.sidebar *:focus-visible {
  box-shadow: 0 0 0 2px var(--surface, #fff) !important;
}
@media (prefers-contrast: more) {
  *:focus-visible { outline-width: 4px !important; }
}