/* Marker - Generation Schools shell, lifted from leave/purchase tokens.  No inline styles
   anywhere in the templates by rule, so everything a page needs is here. */
:root {
  --navy: #0f1e3d; --navy-mid: #172645; --navy-light: #1e3060; --navy-muted: #2a3f6f;
  --gs-teal: #1a6b8a; --gs-teal-lt: #7dc4d8; --gold: #c9a84c; --gold-light: #e2c472; --gold-pale: #fdf6e3;
  --success: #16a34a; --success-bg: #dcfce7; --danger: #dc2626; --danger-bg: #fee2e2;
  --warning: #d97706; --warning-bg: #fef3c7; --info: #0284c7; --info-bg: #e0f2fe; --purple: #7c3aed; --purple-bg: #ede9fe;
  --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8;
  --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --white: #fff;
  --sidebar-w: 256px; --topbar-h: 60px; --radius: 10px; --radius-lg: 14px;
  --shadow: 0 4px 20px rgba(15,30,61,.10); --shadow-card: 0 2px 8px rgba(15,30,61,.06), 0 0 0 1px rgba(15,30,61,.04);
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-display: 'DM Serif Display', Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); background: #edf2f7; color: var(--gray-800); min-height: 100vh; display: flex; -webkit-font-smoothing: antialiased; }
a { color: var(--gs-teal); text-decoration: none; } a:hover { color: var(--navy); }

/* sidebar */
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); background: var(--navy); display: flex; flex-direction: column; z-index: 100; }
.sb-head { padding: 18px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(26,107,138,.18) 0%, transparent 100%); }
.brand-icon { width: 36px; height: 36px; background: #fff; border-radius: 9px; padding: 3px; object-fit: contain; box-shadow: 0 4px 14px rgba(26,107,138,.45); }
.brand-name { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; display: block; }
.brand-sub { font-size: 10px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .07em; display: block; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-muted), var(--gs-teal)); border: 2px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.user-name { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }
.user-role { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 1px; }
.sb-nav { flex: 1; padding: 10px 10px 0; display: flex; flex-direction: column; }
.nav-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.25); padding: 14px 10px 5px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 9px; border-radius: 8px; color: rgba(255,255,255,.65); font-size: 13px; font-weight: 500; margin-bottom: 1px; border-left: 2.5px solid transparent; }
.nav-item svg { width: 18px; height: 18px; opacity: .7; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.active { background: linear-gradient(90deg, rgba(26,107,138,.32), rgba(26,107,138,.10)); color: #fff; font-weight: 600; border-left-color: var(--gs-teal-lt); }
.nav-item.muted { color: rgba(255,255,255,.28); cursor: default; }
.nav-item.muted:hover { background: none; color: rgba(255,255,255,.28); }

/* main */
.main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { position: sticky; top: 0; height: var(--topbar-h); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15,30,61,.08); display: flex; align-items: center; padding: 0 24px; gap: 16px; z-index: 50; box-shadow: 0 1px 0 rgba(15,30,61,.05), 0 2px 12px rgba(15,30,61,.04); }
.page-title { font-size: 15px; font-weight: 700; color: var(--gray-900); white-space: nowrap; }
.page-sub { font-size: 12px; color: var(--gray-500); margin-top: 1px; }
/* In a card head the subtitle sits directly under the title and reads as cramped;
   the topbar keeps the tighter 1px because it is a fixed-height strip. */
.card-head .page-sub { margin-top: 5px; line-height: 1.45; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top-right form { margin: 0; }
.back { color: var(--gray-500); font-size: 18px; line-height: 1; }
.content { padding: 28px; flex: 1; display: flex; flex-direction: column; gap: 20px; }
.flash { padding: 12px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 500; }
.flash-ok { background: var(--success-bg); color: #166534; } .flash-error { background: var(--danger-bg); color: #991b1b; }

/* buttons, badges, cards */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; white-space: nowrap; font-family: inherit; }
.btn-primary { background: linear-gradient(135deg, var(--gs-teal) 0%, #1e87b0 100%); color: #fff; box-shadow: 0 2px 8px rgba(26,107,138,.28); }
.btn-gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); color: var(--navy); box-shadow: 0 2px 8px rgba(201,168,76,.3); }
.btn-ghost { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-200); }
.btn-sm { padding: 6px 13px; font-size: 12px; }
.btn:hover { transform: translateY(-1px); } .btn-primary:hover, .btn-gold:hover { color: inherit; }
.btn-primary:hover { color: #fff; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.b-success { background: var(--success-bg); color: var(--success); } .b-danger { background: var(--danger-bg); color: var(--danger); }
.b-warning { background: var(--warning-bg); color: var(--warning); } .b-info { background: var(--info-bg); color: var(--info); }
.b-neutral { background: var(--gray-100); color: var(--gray-500); }
.b-navy { background: var(--gray-100); color: var(--navy); }
.b-gold { background: var(--gold-pale); color: #8a6f22; }
.card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid rgba(15,30,61,.07); display: flex; flex-direction: column; min-height: 0; }
.card-narrow { max-width: 640px; }
.card-head { padding: 15px 22px; min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--gray-100); }
.card-title { font-size: 15px; font-weight: 700; color: var(--gray-900); }
.card-body { padding: 22px; }
.prose { font-size: 13px; line-height: 1.65; color: var(--gray-700); }
.prose p { margin: 0 0 12px; } .prose p:last-child { margin-bottom: 0; }
.prose code, .card-foot code, .form-note code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
  background: var(--gray-100); padding: 1px 5px; border-radius: 4px; }
.code-block { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6;
  background: var(--navy); color: #dbe6f5; padding: 14px 16px; border-radius: 8px; margin: 12px 0 0;
  overflow-x: auto; white-space: pre; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--gray-700); line-height: 1.45; cursor: pointer; }
.check input { margin: 2px 0 0; flex-shrink: 0; accent-color: var(--gs-teal); }
.empty { padding: 28px 22px; color: var(--gray-500); font-size: 13px; }
.muted-text { font-size: 12px; color: var(--gray-500); margin-left: 8px; }
.error-text { color: var(--danger); font-family: monospace; font-size: 12px; white-space: pre-wrap; }
.strong { font-weight: 600; color: var(--gray-900); }
.right { text-align: right; }

/* stats and tables */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.stat { background: #fff; border-radius: var(--radius-lg); padding: 20px; border: 1px solid rgba(15,30,61,.07); box-shadow: var(--shadow-card); border-left: 4px solid var(--gs-teal); }
.stat-info { border-left-color: var(--info); } .stat-success { border-left-color: var(--success); } .stat-danger { border-left-color: var(--danger); }
.stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-500); margin-bottom: 6px; }
.stat-value { font-size: 28px; font-weight: 800; color: var(--gray-900); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); padding: 10px 22px; border-bottom: 1px solid var(--gray-100); }
.table td { padding: 12px 22px; border-bottom: 1px solid var(--gray-50); vertical-align: middle; }
.table form { margin: 0; display: inline; }

/* forms */
.form { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gray-600); min-width: 0; }
/* An input carries an intrinsic width from its `size` attribute, and a grid or flex
   item defaults to min-width:auto, so a two-up row of fields is pushed wider than its
   track and overflows the container.  In the profile drawer that showed as the Role
   field touching the edge and a horizontal scrollbar under the form. */
.field input, .field select { min-width: 0; width: 100%; }
/* background-color, NOT the `background` shorthand: the shorthand resets every
   background longhand it does not mention, so it was quietly setting
   background-repeat back to `repeat` and background-size to `auto` on every select
   below, and the chevron tiled across the whole control. */
.field input, .field select, .j-form select, .j-form textarea { font: inherit; font-size: 13px; padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 8px; background-color: #fff; color: var(--gray-800); }

/* One look for every select on the site.  A native select is drawn by the operating
   system, border, chevron and all, which is why an unstyled one reads as older than
   everything around it.  appearance:none plus a drawn chevron fixes that in one place
   rather than per form, and the chevron is a data URI so nothing extra is fetched. */
select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 13px; color: var(--gray-800);
  padding: 9px 34px 9px 12px;
  border: 1px solid var(--gray-200); border-radius: 8px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px;
  cursor: pointer; line-height: 1.35;
}
select:hover { border-color: var(--gray-300); }
select:focus-visible { outline: 2px solid var(--gs-teal); outline-offset: 1px; border-color: var(--gs-teal); }
select:disabled { background-color: var(--gray-50); color: var(--gray-400); cursor: default; }
/* Inside a table row or a topbar the control has to sit on one line with buttons. */
.inline-form select, .filter-form select { font-size: 12.5px; padding: 6px 30px 6px 10px; background-position: right 10px center; }
.field select { padding-right: 34px; }
.form-actions { display: flex; gap: 10px; }

/* workbench */
.workbench { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 20px; align-items: start; }
.doc-card, .judge-card { max-height: calc(100vh - var(--topbar-h) - 56px); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--gray-600); }
.legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.dot-blocking { background: var(--danger-bg); box-shadow: inset 0 -2px 0 var(--danger); }
.dot-needs { background: var(--warning-bg); box-shadow: inset 0 -2px 0 var(--warning); }
.dot-praise { background: var(--success-bg); box-shadow: inset 0 -2px 0 var(--success); }
.dot-admin { background: var(--info-bg); box-shadow: inset 0 -2px 0 var(--info); }
.doc { padding: 22px 30px; overflow-y: auto; font-family: 'Times New Roman', Georgia, serif; font-size: 14px; line-height: 1.7; color: var(--gray-800); }
.doc p { margin: 0 0 10px; position: relative; padding-left: 38px; }
.doc p.doc-cell { color: var(--gray-600); }

/* Page view: the submission as an assessor sees it, on an A4 sheet at the centre rules'
   own formatting - Times New Roman 12pt, 1.5 line spacing, 2.54cm margins.  The point is
   that a formatting judgement is easier to agree with when the page looks like the page.
   The highlights stay, because they are the reason to be on this screen at all. */
.doc-page { background: var(--gray-100); padding: 26px 0; }
.doc-page .doc-sheet { width: min(794px, 100%); margin: 0 auto; background: #fff; padding: 96px 96px 110px;
                       box-shadow: 0 2px 18px rgba(15,30,61,.14); border-radius: 2px; }
.doc-page p { font-size: 12pt; line-height: 1.5; padding-left: 0; margin: 0 0 12pt; text-align: justify; }
.doc-page .pnum { display: none; }
.doc-page p.doc-cell { color: var(--gray-800); }
.seg-sm .seg-item { font-size: 11.5px; padding: 4px 10px; }
.seg-sm button.seg-item { background: none; border: 0; font: inherit; cursor: pointer; }
@media (max-width: 900px) { .doc-page .doc-sheet { padding: 40px 34px 50px; } }
.pnum { position: absolute; left: 0; top: 2px; font-family: var(--font-body); font-size: 10px; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.mark { padding: 1px 3px; border-radius: 3px; color: inherit; }
.mark-blocking { background: var(--danger-bg); box-shadow: inset 0 -2px 0 var(--danger); }
.mark-needs_fixing { background: var(--warning-bg); box-shadow: inset 0 -2px 0 var(--warning); }
.mark-strengthen { background: var(--info-bg); box-shadow: inset 0 -2px 0 var(--info); }
.mark-achieved { background: var(--success-bg); box-shadow: inset 0 -2px 0 var(--success); }
.mark-none { background: var(--gray-100); }
.counts { display: flex; justify-content: space-around; padding: 14px 18px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
.count { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.count b { font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.count span { font-size: 10.5px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; }
.count-present b { color: var(--success); } .count-partial b { color: var(--warning); } .count-missing b { color: var(--danger); } .count-blocking b { color: var(--navy); }
.judge-list { overflow-y: auto; }
.grp { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); padding: 12px 18px 4px; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; }
.j-row { border-bottom: 1px solid var(--gray-100); }
.j-row summary { display: flex; gap: 10px; align-items: flex-start; padding: 10px 18px; cursor: pointer; list-style: none; }
.j-row summary::-webkit-details-marker { display: none; }
.j-code { font-size: 11px; font-weight: 700; color: var(--gray-900); width: 88px; flex-shrink: 0; padding-top: 2px; font-variant-numeric: tabular-nums; }
.j-text { font-size: 12px; color: var(--gray-600); line-height: 1.45; flex: 1; min-width: 0; }
.pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.p-present { background: var(--success-bg); color: var(--success); } .p-partial { background: var(--warning-bg); color: var(--warning); }
.p-missing { background: var(--danger-bg); color: var(--danger); } .p-not_applicable { background: var(--gray-100); color: var(--gray-500); }
.p-block { background: var(--navy); color: #fff; } .p-edited { background: var(--purple-bg); color: var(--purple); }
.j-form { padding: 0 18px 14px 116px; display: flex; flex-direction: column; gap: 8px; }
.j-selects { display: flex; gap: 10px; flex-wrap: wrap; }
.j-selects label { font-size: 11px; font-weight: 600; color: var(--gray-500); display: flex; flex-direction: column; gap: 3px; }
.j-selects select { padding: 5px 8px; font-size: 12px; }
.j-note { font-size: 11.5px; color: var(--gray-500); background: var(--gray-50); border-radius: 6px; padding: 6px 10px; line-height: 1.45; }
.j-form textarea { width: 100%; line-height: 1.5; resize: vertical; font-family: inherit; }
.j-foot { display: flex; justify-content: space-between; align-items: center; }
.j-anchor { font-size: 11.5px; color: var(--gray-500); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--gray-200); border-top-color: var(--gs-teal); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .workbench { grid-template-columns: 1fr; } .doc-card, .judge-card { max-height: none; } }

/* sign in: full-bleed backdrop, brand top left, intro beside a card, admin link in the footer */
.auth-body { display: block; background: var(--navy); }
.auth-page { position: relative; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; color: #fff; overflow: hidden; }
.auth-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.auth-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,30,61,.55) 0%, rgba(15,30,61,.25) 55%, rgba(15,30,61,.55) 100%); }
.auth-brand, .auth-main, .auth-foot { position: relative; z-index: 2; }
.auth-brand { display: flex; align-items: center; gap: 10px; padding: 26px 48px; }
.auth-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 440px); gap: 64px; align-items: center; padding: 20px 48px 40px; max-width: 1280px; width: 100%; margin: 0 auto; }
.auth-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 14px; }
.auth-title { font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 1.08; margin: 0 0 18px; max-width: 14ch; text-wrap: balance; }
.auth-lead { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 52ch; margin: 0; }
.auth-card { background: #fff; color: var(--gray-800); border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.35); padding: 28px 28px 22px; }
.auth-card-brand { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--gray-100); }
.auth-card-brand img { border-radius: 9px; flex-shrink: 0; }
.auth-card-brand-name { display: block; font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.auth-card-brand-sub { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.auth-card-lead { margin: 0 0 18px; font-size: 12.5px; line-height: 1.55; color: var(--gray-600); }
.auth-card-title { font-size: 20px; font-weight: 700; color: var(--gray-900); margin: 0 0 16px; }
.auth-card-title + .auth-card-sub { margin: -12px 0 16px; font-size: 13px; color: var(--gray-500); }
.role-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.role-tab { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 12px; border-radius: 12px; border: 1.5px solid var(--gray-200); background: var(--gray-50); color: var(--gray-600); font-size: 14px; font-weight: 600; min-height: 52px; }
.role-tab svg { width: 20px; height: 20px; }
.role-tab:hover { border-color: var(--gs-teal-lt); color: var(--gs-teal); }
.role-tab.on { border-color: var(--gs-teal); background: var(--info-bg); color: var(--gs-teal); box-shadow: inset 0 0 0 1px var(--gs-teal); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field input { padding: 12px 14px; font-size: 14px; }
.btn-wide { width: 100%; justify-content: center; padding: 13px 18px; font-size: 14px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--gray-400); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.auth-help { font-size: 12.5px; color: var(--gray-500); line-height: 1.5; margin: 4px 0 0; text-align: center; }
.auth-foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 48px 26px; font-size: 12.5px; color: rgba(255,255,255,.55); }
.auth-admin { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.6); font-weight: 600; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); }
.auth-admin svg { width: 15px; height: 15px; }
.auth-admin:hover, .auth-admin.on { color: #fff; border-color: var(--gold); background: rgba(201,168,76,.15); }
@media (max-width: 960px) { .auth-main { grid-template-columns: 1fr; gap: 28px; padding: 12px 24px 32px; } .auth-title { font-size: 38px; } .auth-brand, .auth-foot { padding-left: 24px; padding-right: 24px; } }

/* sign out is a POST, so it is a button styled as a nav item */
.nav-form { margin: 0; }
.nav-button { width: 100%; background: none; border: none; border-left: 2.5px solid transparent; cursor: pointer; font-family: inherit; text-align: left; }

/* toasts: top centre, slide in, fade out on a timer or a click (see main.js) */
.toasts { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(560px, calc(100vw - 32px)); }
.toast { pointer-events: auto; cursor: pointer; padding: 12px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.45; text-align: center; box-shadow: 0 10px 30px rgba(15,30,61,.25); border: 1px solid transparent; opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-ok { background: #ecfdf3; color: #166534; border-color: #bbf7d0; }
.toast-error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* with a photograph that carries its own headline: no veil, no duplicate intro, card to the right */
.auth-photo .auth-veil { background: linear-gradient(90deg, rgba(15,30,61,0) 0%, rgba(15,30,61,0) 60%, rgba(15,30,61,.28) 100%); }
.auth-photo .auth-brand { visibility: hidden; }
.auth-photo .auth-intro { visibility: hidden; }
.auth-photo .auth-card { background: rgba(255,255,255,.96); backdrop-filter: blur(6px); }
.auth-photo .auth-foot { color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(15,30,61,.6); }
.auth-photo .auth-admin { border-color: rgba(255,255,255,.45); color: #fff; background: rgba(15,30,61,.35); }
.auth-photo .auth-foot > span { visibility: hidden; }
.auth-photo .auth-main { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 24px; max-width: none; padding-right: 32px; align-items: start; padding-top: 52px; }

/* admin pages */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.card-side { position: sticky; top: calc(var(--topbar-h) + 20px); }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.inline-form input { font: inherit; font-size: 12px; padding: 6px 9px; border: 1px solid var(--gray-200); border-radius: 7px; width: 150px; }
.muted-cell { color: var(--gray-500); font-size: 12.5px; }
.row-inactive td { opacity: .55; }
.form-note { font-size: 12.5px; color: var(--gray-500); line-height: 1.5; margin: 0; }
.item-list { margin: 0; padding: 6px 22px 12px 22px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.item-list li { display: flex; gap: 10px; font-size: 13px; color: var(--gray-700); line-height: 1.5; }
.item-list .j-code { width: 110px; padding-top: 1px; }
.part-label { color: var(--gray-500); font-size: 12px; margin-right: 6px; white-space: nowrap; }
.note-line { margin: 0 0 8px; font-size: 13px; color: var(--gray-700); line-height: 1.5; }
.note-pad { padding: 10px 22px 0; }
.note-row { display: flex; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--gray-100); align-items: flex-start; }
.note-row .pill { margin-top: 2px; }
.note-source { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); margin-bottom: 3px; }
.note-text { font-size: 13px; color: var(--gray-700); line-height: 1.5; white-space: pre-line; }
.note-intro { font-size: 13px; color: var(--gray-600); line-height: 1.55; padding-bottom: 10px; }
.card-foot { padding: 12px 22px; border-top: 1px solid var(--gray-100); font-size: 13px; font-weight: 600; }
@media (max-width: 1100px) { .two-col { grid-template-columns: 1fr; } .card-side { position: static; } }

/* admin dashboard */
.seg { display: inline-flex; background: var(--gray-100); border-radius: 9px; padding: 3px; gap: 2px; }
.seg-item { padding: 6px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--gray-500); }
.seg-item:hover { color: var(--gray-900); }
.seg-item.on { background: #fff; color: var(--gray-900); box-shadow: 0 1px 3px rgba(15,30,61,.10); }
.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-gold { border-left-color: var(--gold); }
.stat-unit { font-size: 13px; font-weight: 600; color: var(--gray-500); margin-left: 4px; }
.chart-wrap { padding: 10px 18px 14px; }
.chart { width: 100%; height: auto; display: block; font-family: var(--font-body); }
.chart .grid { stroke: var(--gray-100); stroke-width: 1; }
.chart .axis { stroke: var(--gray-300); stroke-width: 1; }
.chart .tick { font-size: 10.5px; fill: var(--gray-500); }
.chart .bar { fill: var(--gs-teal); }
.chart .hit { fill: transparent; }
.chart .bar-hit:hover .bar, .chart .bar-hit:focus .bar { fill: #1e87b0; }
.chart .bar-hit:hover .hit, .chart .bar-hit:focus .hit { fill: rgba(26,107,138,.06); }
.chart .bar-hit:focus { outline: none; }
.table-toggle summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--gs-teal); list-style: none; padding: 6px 10px; border: 1px solid var(--gray-200); border-radius: 7px; }
.table-toggle summary::-webkit-details-marker { display: none; }
.table-toggle[open] { width: 100%; }
.table-toggle[open] summary { display: inline-block; margin-bottom: 8px; }
.table-mini th, .table-mini td { padding: 8px 14px; font-size: 12.5px; }
.findings { list-style: none; margin: 0; padding: 8px 22px 14px; display: flex; flex-direction: column; gap: 8px; }
.findings li { display: grid; grid-template-columns: 96px 1fr 32px; align-items: center; gap: 10px; font-size: 12.5px; }
.findings-bar { height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
.findings-fill { display: block; height: 100%; background: var(--warning); border-radius: 4px; width: 0; }
.findings-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-600); }
@media (max-width: 1200px) { .stats-5 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }

/* the 2026-09-04 replacement is wider than 16:10; keep its left edge, crop under the card */
/* The photograph is 1672x941, a 16:9 artwork that carries its own logo at the top left
   and its tagline along the bottom.  `cover` therefore crops exactly the two things that
   must not be cropped as soon as the window is wider than 16:9: at 1908x981 it loses 93
   vertical pixels, about 46 off each edge.

   So `cover` only while the window is narrower than the artwork, where it trims the right
   hand side and the right hand side is just more classroom.  Once the window is wider,
   switch to `contain`: the image then fills the height, nothing is lost, and the spare
   width falls on the right, which is where the sign-in card already sits.  The band behind
   it is painted with a gradient sampled from the artwork's own right edge, so the seam
   does not read as a letterbox. */
.auth-photo .auth-bg { object-position: left center; }
.auth-photo { background: linear-gradient(180deg, #083a6d 0%, #003a76 50%, #081734 72%, #070a13 100%); }
@media (min-aspect-ratio: 16 / 9) {
  .auth-photo .auth-bg { object-fit: contain; }
}

/* dashboard tiles are links; the right column is wider so the model table reads on one line */
.stat-link { display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.stat-link:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--shadow); }
.two-col-wide { grid-template-columns: minmax(0, 1fr) 440px; }
/* Pages whose side column is a form, not a summary: the cohort qualification select
   carries a full qualification title and was truncating at 360px. */
.two-col-forms { grid-template-columns: minmax(0, 1fr) 480px; }
.two-col-attention { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }

/* Per-client theming.  A class on <body>, so no template ever carries an inline style.
   Only the sidebar changes: the content area stays neutral so a mentor moving between
   clients is not reading two different colour languages for the same states. */
.theme-teal .sidebar { background: #10454f; }
.theme-plum .sidebar { background: #3b1f3f; }
.theme-moss .sidebar { background: #1e3a2b; }
.sb-switch { padding: 4px 14px 10px; }
.sb-switch select { width: 100%; font-size: 12px; padding: 7px 30px 7px 10px; border-radius: 7px;
                    background-color: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.16);
                    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
                    background-repeat: no-repeat; background-size: 10px 6px;
                    background-position: right 10px center; }
.sb-switch select:hover { background-color: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.sb-switch select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sb-switch select option { color: var(--gray-800); background: #fff; }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Needs your attention */
.attention-list { list-style: none; margin: 0; padding: 6px 0; }
.attention-item { display: flex; align-items: center; gap: 12px; padding: 11px 22px; border-bottom: 1px solid var(--gray-100); }
.attention-item:last-child { border-bottom: 0; }
.attention-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.attention-title { font-size: 13px; font-weight: 600; color: var(--gray-900); }
.attention-title:hover { color: var(--gs-teal); }
.attention-sub { font-size: 12px; color: var(--gray-500); }
.avatar-sm { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; }

/* Cohort progress grid */
.grid-scroll { overflow-x: auto; }
.table-grid th.cell-head { text-align: center; width: 40px; font-size: 11px; }
.table-grid td.cell-td { text-align: center; padding: 6px 4px; }
.cell { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px;
        border-radius: 7px; font-size: 12px; font-weight: 700; background: var(--gray-100); color: var(--gray-500); }
a.cell:hover { outline: 2px solid var(--gs-teal); outline-offset: 1px; }
.cell-done { background: var(--success-bg); color: var(--success); }
.cell-review { background: var(--warning-bg); color: var(--warning); }
.cell-working { background: var(--info-bg); color: var(--info); }
.cell-failed { background: var(--danger-bg); color: var(--danger); }
.cell-uploaded { background: var(--gray-100); color: var(--gray-600); }
.cell-none { background: var(--gray-50); color: transparent; }
.legend-key { display: inline-flex; align-items: center; gap: 5px; }
.legend-key .cell { width: 12px; height: 12px; border-radius: 4px; }
.pct-bar { display: inline-block; width: 54px; height: 5px; background: var(--gray-100); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 7px; }
.pct-fill { display: block; height: 100%; background: var(--success); border-radius: 4px; width: 0; }
.pct-n { font-size: 12px; color: var(--gray-600); }
.field-inline { flex-direction: row; align-items: center; gap: 8px; }
.filter-form { margin-right: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1240px) { .two-col-attention { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .stats-4 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
/* These two modifiers are declared after the collapse rule above, so they would win
   at narrow widths and the columns would never stack.  Restate the collapse here.
   The forms variant needs the wider breakpoint because its side column is wider. */
@media (max-width: 1100px) { .two-col-wide { grid-template-columns: 1fr; } }
@media (max-width: 1240px) { .two-col-forms { grid-template-columns: 1fr; } }
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
.findings .j-code { color: var(--gs-teal); }
.findings .j-code:hover { text-decoration: underline; }
.grp[id] { scroll-margin-top: calc(var(--topbar-h) + 12px); }
[id] .card-head, .card[id] { scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* profile drawer: slides in from the right over a dimmed page, like the other apps */
.sb-user-btn { width: 100%; background: none; border: none; text-align: left; cursor: pointer; font-family: inherit; color: inherit; }
.sb-user-btn:hover { background: rgba(255,255,255,.05); }
.avatar-img { object-fit: cover; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(15,30,61,.45); z-index: 900; opacity: 0; transition: opacity .25s ease; }
.drawer-backdrop.show { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: #fff; box-shadow: -12px 0 48px rgba(15,30,61,.22); z-index: 950; transform: translateX(100%); transition: transform .28s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; visibility: hidden; }
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--gray-100); }
.drawer-title { font-size: 16px; font-weight: 700; color: var(--gray-900); margin: 0; }
.drawer-body { padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.avatar-form { margin: 0; }
.dropzone { display: flex; align-items: center; gap: 16px; padding: 14px; border: 2px dashed var(--gray-300); border-radius: 14px; cursor: pointer; background: var(--gray-50); transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--gs-teal); background: var(--info-bg); }
.dropzone-img, .dropzone-initials { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.dropzone-initials { background: linear-gradient(135deg, var(--navy-muted), var(--gs-teal)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.dropzone-text { font-size: 13px; color: var(--gray-700); line-height: 1.5; }
.dropzone-text small { color: var(--gray-500); }
.dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.avatar-remove { margin: -6px 0 0; }
.drawer-form { padding: 0; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field-help { font-weight: 400; color: var(--gray-400); font-size: 11.5px; }
.field input:disabled { background: var(--gray-50); color: var(--gray-500); }
.drawer-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gs-teal); list-style: none; padding: 4px 0; }
.drawer-more summary::-webkit-details-marker { display: none; }
.drawer-more[open] { display: flex; flex-direction: column; gap: 12px; }
body.drawer-locked { overflow: hidden; }

/* right-aligned headers must win over the table's left default; clickable rows */
.table th.right, .table td.right { text-align: right; }
.row-link { cursor: pointer; }
.row-more summary { cursor: pointer; font-size: 11.5px; color: var(--gray-500); list-style: none; padding: 4px 0; }
.row-more summary::-webkit-details-marker { display: none; }
.row-more summary:hover { color: var(--gs-teal); }
.row-link:hover td { background: #e8f5f9; }