/* Blue theme ported from open-notebook (NotebookLM-style): Inter, action blue #1a73e8,
   hairline borders, near-zero shadows, light sidebar. --navy/--accent keep their
   names because tenant branding overrides them in base.html. */
:root {
  --navy: #1a73e8;          /* primary / headings accent (tenant-overridable) */
  --accent: #1a73e8;        /* action blue (tenant-overridable) */
  --accent-hover: #185abc;
  --accent-light: #e8f0fe;
  --cyan: #1a73e8;
  --surface: #f8f9fa;
  --sunken: #f1f3f4;
  --text: #202124;
  --ink-soft: #5f6368;
  --muted: #5f6368;
  --line: #dadce0;
  --line-soft: #e8eaed;
  --success: #188038;
  --success-tint: #e6f4ea;
  --warn: #b06000;
  --warn-tint: #fef7e0;
  --danger: #d93025;
  --danger-tint: #fce8e6;
  --shadow-soft: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --surface-recessed: #f8f9fa;
  --track: #e8eaed;
  --ink-faint: #9aa0a6;
  --ink-faintest: #bdc1c6;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: var(--text); background: #ffffff; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.brand-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Uploaded logos come in any shape: fixed height, width capped so a wide logo never pushes the header off-screen */
.brand-logo { display: block; flex-shrink: 0; height: 36px; width: auto; max-width: min(200px, 45vw); object-fit: contain; object-position: left center; }
.wrap { max-width: 680px; margin: 0 auto; padding: 40px 20px; }
.card { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 16px; transition: box-shadow 0.15s, border-color 0.15s; }
.grid-cards .card:hover { box-shadow: var(--shadow-soft); border-color: transparent; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s;
}
.btn:hover { background: var(--accent-light); text-decoration: none; }
.btn-primary { border: 0; background: var(--accent); color: #ffffff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.likert, .mcq { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }

.likert button, .mcq button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.likert button b, .mcq button b {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--sunken);
  color: var(--ink-soft);
  flex-shrink: 0;
}

.likert button:hover, .mcq button:hover { background: var(--surface); }
.likert button.selected, .mcq button.selected { border-color: var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 500; }
.likert button.selected b, .mcq button.selected b { background: var(--accent); color: #ffffff; }
.likert button:disabled, .mcq button:disabled { cursor: default; }

.progress { height: 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; margin-bottom: 20px; }
.progress > div { height: 4px; background: var(--accent); transition: width 0.25s; }
.stem { font-size: 24px; font-weight: 600; color: var(--text); line-height: 1.35; letter-spacing: -0.01em; }
.muted { color: var(--muted); font-size: 13px; }
.notice { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; line-height: 1.5; }
.warn { padding: 12px 16px; background: var(--surface); border-radius: 8px; color: var(--muted); font-size: 14px; }
button:focus-visible, a:focus-visible, .field:focus { outline: none; box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.35); }

/* --- admin --- */
.admin { display: flex; min-height: calc(100vh - 56px); align-items: stretch; }
/* Admin app shell: header stays put; sidebar and content each scroll on their own. */
.admin-body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.admin-body > .top { flex-shrink: 0; }
.admin-body > .admin { flex: 1; min-height: 0; }
.admin-body .admin-side, .admin-body .admin-content { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.brand-mark { color: var(--accent); font-weight: 700; margin-right: 4px; }
.top-user:hover { text-decoration: none; background: var(--accent); color: #ffffff; }
.top-user { margin-left: auto; width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); font-size: 13px; font-weight: 600; }
.admin-section { margin: 16px 0 6px; padding: 0 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.admin-section:first-child { margin-top: 4px; }
.admin-side { width: 240px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); color: var(--text); display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; }
.admin-brand { font-size: 16px; font-weight: 600; margin-bottom: 20px; padding: 4px 12px; color: var(--text); }
.admin-brand small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.admin-link { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 14px; transition: background-color 0.15s; }
.admin-link:hover { background: var(--sunken); text-decoration: none; }
.admin-link.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.admin-tenant { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.admin-tenant strong { display: block; color: var(--text); font-weight: 600; }
.admin-signout { margin-top: 8px; background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; }
.admin-content { flex: 1; min-width: 0; padding: 32px 40px; }
.admin-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.admin-title { font-size: 28px; line-height: 36px; font-weight: 600; color: var(--text); margin: 0 0 4px; letter-spacing: -0.01em; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.badge-blue { background: var(--accent-light); color: var(--accent); }
.badge-amber { background: var(--warn-tint); color: var(--warn); }
.badge-green { background: var(--success-tint); color: var(--success); }
.badge-gray { background: var(--sunken); color: var(--ink-soft); }
.badge-red { background: var(--danger-tint); color: var(--danger); }

.admin-table { border-collapse: collapse; width: 100%; font-size: 14px; background: #ffffff; }
.admin-table-wrap { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; overflow-x: auto; }
.admin-table th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: var(--surface); }
.sten { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 6px; font-weight: 600; border: 1px solid var(--line); color: var(--text); background: #ffffff; }
.chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #ffffff; border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; }
.chip:hover { background: var(--sunken); text-decoration: none; }
.chip.active { background: var(--accent-light); border-color: var(--accent-light); color: var(--accent); }
textarea.field { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--text); }
input[type="text"].field, input[type="password"].field, input[type="email"].field, input[type="number"].field, select.field { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; color: var(--text); background: #ffffff; }
.field:focus { border-color: var(--accent); }
label { color: var(--text); font-weight: 500; }

/* --- figural items --- */
.figure { display: block; width: 100%; max-width: 440px; margin: 12px 0 4px; }
.figure-option { width: 64px; height: 64px; flex-shrink: 0; }

/* --- candidate question page --- */
.item-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.timer { margin: 0; padding: 4px 10px; border-radius: 6px; background: var(--sunken); font-size: 14px; font-variant-numeric: tabular-nums; }
.timer-low { background: var(--danger-tint); color: var(--danger); }

/* --- invites page --- */
.admin-header-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cand-card { min-width: 0; }  /* lets the candidates table scroll inside its card instead of widening the page */
.link-short { font-family: Consolas, ui-monospace, monospace; font-size: 12px; color: var(--accent); margin-right: 6px; }
/* Bulk add: Paste / Upload tabs, file chip, then a review panel (ready vs skipped rows) before anything is added. */
.tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--sunken); border-radius: 10px; }
.tabs button { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-soft); cursor: pointer; }
.tabs button[aria-selected="true"] { background: #ffffff; color: var(--text); box-shadow: 0 1px 2px rgba(60, 64, 67, 0.2); }
.add-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.add-card .fld-hint, .add-card .fld-error { margin-top: 8px; }
.file-chip { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.file-chip[hidden], .dropzone[hidden] { display: none; }
.file-chip .meta { flex: 1; min-width: 0; }
.file-chip .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review { margin-bottom: 20px; }
.review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.review-head h2 { margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.stat b { display: block; font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat.ok b { color: var(--success); }
.stat.skip b { color: var(--warn); }
.review .alert { margin-bottom: 16px; }
.review-table { max-height: min(50vh, 480px); overflow: auto; }
.review-table thead th { position: sticky; top: 0; z-index: 1; background: #ffffff; }
.line-no { font-family: Consolas, ui-monospace, monospace; font-size: 12px; color: var(--ink-soft); }
.check-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-weight: 400; cursor: pointer; }
.check-row:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.check-row input { margin-top: 3px; }
.check-row b { font-weight: 500; }
.review-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.review-btns { display: flex; gap: 8px; margin-left: auto; }
.btn-sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn-icon { width: 40px; height: 40px; padding: 0; justify-content: center; }
.assess-table td .btn-icon { width: 40px; height: 40px; padding: 0; }
.btn-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Icon button: 32px square, hairline border, same hover as .btn. Used for reload and pagination. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover:not(:disabled) { background: var(--accent-light); color: var(--accent); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn.spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icon-btn.spinning svg { animation: none; } }

/* --- candidates card (invites page) --- */
.cand-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cand-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--text); }
.cand-total { padding: 1px 8px; border-radius: 999px; background: var(--sunken); color: var(--ink-soft); font-size: 12px; font-weight: 500; }
.cand-sub { margin-top: 2px; }
.cand-head-actions { display: flex; gap: 8px; align-items: center; }
.cand-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.select-sm.field { height: 36px; padding: 0 10px; font-size: 13px; cursor: pointer; }

/* Search: leading icon, clear button, "/" shortcut hint. */
.search-box { position: relative; flex: 1 1 220px; min-width: 0; display: flex; align-items: center; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; transition: border-color 0.15s, box-shadow 0.15s; }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2); }
.search-box input { flex: 1; min-width: 0; height: 100%; padding: 0 8px 0 36px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); }
.search-box input::placeholder { color: var(--ink-soft); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-ico { position: absolute; left: 11px; width: 16px; height: 16px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search-clear { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 6px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.search-clear:hover { background: var(--sunken); color: var(--text); }
.search-clear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-kbd { margin-right: 8px; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink-soft); font: 500 11px/1 Consolas, ui-monospace, monospace; }
.search-clear[hidden], .search-kbd[hidden] { display: none; }

/* Candidate table scrolls inside its card; header row stays visible. */
.cand-scroll { max-height: min(60vh, 640px); overflow: auto; }
.cand-scroll thead th { position: sticky; top: 0; z-index: 1; }
.cand-check { width: 36px; }
.cand-name { font-weight: 600; }
.cand-name mark, .cand-email mark { background: #fde293; color: inherit; border-radius: 2px; padding: 0 1px; }
.cand-empty { display: flex; gap: 12px; align-items: flex-start; padding: 24px 16px; }
.cand-empty[hidden] { display: none; }
.cand-empty > svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; }
.cand-empty strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }

/* Pagination: rows-per-page · range · first/prev/numbers/next/last. */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 12px; }
.pager-size { display: flex; align-items: center; gap: 8px; }
.pager-size .select-sm.field { height: 32px; }
.pager-range { font-variant-numeric: tabular-nums; }
.pager-btns { display: flex; align-items: center; gap: 4px; }
.pager-pages { display: flex; align-items: center; gap: 4px; }
.pager-num { font-variant-numeric: tabular-nums; border-color: transparent; }
.pager-num.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 600; }
.pager-gap { min-width: 20px; text-align: center; color: var(--ink-soft); }
/* Send buttons stay pinned to the bottom of the visible area while the card scrolls past;
   bottom: -32px pushes the bar into .admin-content's 32px bottom padding so it sits flush with the screen edge. */
.cand-actions { position: sticky; bottom: -32px; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0 0; padding: 12px 20px; background: #ffffff; border-top: 1px solid var(--line-soft); border-radius: 0 0 12px 12px; box-shadow: 0 -4px 8px -6px rgba(60, 64, 67, 0.2); }
@media (max-width: 560px) {
  .pager { justify-content: center; }
  .pager-range { order: -1; width: 100%; text-align: center; }
}

@media (max-width: 860px) {
  .admin { flex-direction: column; }
  .admin-side { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-section { display: none; }
  .admin-tenant { margin: 0 0 0 auto; border-top: 0; }
  .admin-content { padding: 24px 16px; }
  .admin-body .admin-side { flex-shrink: 0; max-height: 40vh; max-height: 40dvh; }
  .admin-body .admin-content { flex: 1; min-height: 0; }
  .cand-actions { bottom: -24px; }  /* matches the smaller 24px content padding here */
}

/* --- branding page (docs/ui-ux-guide.md: 12px cards, labels above fields, tints only on discs/badges/alerts) --- */
.brand-page { max-width: 1120px; }
.brand-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.brand-grid > * { min-width: 0; }
.brand-form { display: flex; flex-direction: column; gap: 16px; }
.set-card { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.set-card-head { margin-bottom: 20px; }
.set-card-title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); text-wrap: balance; }
.set-card-desc { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-soft); }

/* Field stack: label -> input -> hint/error 6px apart, fields 20px apart. */
.fields { display: flex; flex-direction: column; gap: 20px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); }
/* A radio/checkbox group is a fieldset.fld: no browser border, same label-to-control gap as other fields */
fieldset.fld { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.fld > legend { margin-bottom: 6px; padding: 0; }
.fld-hint { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.fld-error { margin: 0; font-size: 14px; line-height: 20px; color: var(--danger); }
.fld-error[hidden] { display: none; }
.fld[hidden] { display: none; }
.tabular { font-variant-numeric: tabular-nums; }
.field-wrap { position: relative; }
.field-wrap .field { width: 100%; padding-right: 64px; }
.field-count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink-soft); pointer-events: none; }

/* Logo: current logo row + dropzone. Only the icon disc is tinted. */
.logo-current[hidden] { display: none; }
.logo-current { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.logo-thumb { width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--line-soft); background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.logo-thumb img { max-width: 40px; max-height: 40px; }
.logo-meta { flex: 1; min-width: 0; font-size: 14px; }
.logo-meta strong { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-current.removing .logo-thumb, .logo-current.removing .logo-meta { opacity: 0.5; }
.logo-remove { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--danger); cursor: pointer; }
.logo-remove:hover { background: var(--danger-tint); }
.logo-remove input { margin: 0; accent-color: var(--danger); }
.dropzone { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-recessed); cursor: pointer; transition: border-color 0.15s; }
.dropzone:hover, .dropzone.drag { border-color: var(--accent); }
.dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.icon-disc { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.icon-disc svg, .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dz-text { font-size: 14px; line-height: 20px; }
.dz-text strong { font-weight: 500; color: var(--accent); }

/* Colours: native picker swatch + editable hex, presets, contrast note. */
.swatch-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.swatch { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; }
.swatch:focus-within { border-color: var(--accent); }
.swatch input[type="color"] { -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.swatch input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; }
.swatch input[type="color"]::-moz-color-swatch { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; }
.swatch-hex { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0 8px 0 4px; background: transparent; font: 500 14px Consolas, ui-monospace, monospace; color: var(--text); text-transform: uppercase; outline: 0; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.preset { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff; font: inherit; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.preset:hover { background: var(--sunken); }
.preset[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.preset-dots { display: inline-flex; }
.preset-dots i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 0 0 1px var(--line-soft); }
.preset-dots i + i { margin-left: -6px; }
.contrast { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.contrast:empty { display: none; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.pill-success { background: var(--success-tint); color: var(--success); }
.pill-warn { background: var(--warn-tint); color: var(--warn); }
.pill-danger { background: var(--danger-tint); color: var(--danger); }

/* Sticky action bar: status left, Discard (outline) then Save (primary) right. */
.set-actions { position: sticky; bottom: -32px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 0; background: #ffffff; border-top: 1px solid var(--line); }
.dirty { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.dirty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dirty:empty { visibility: hidden; }
.dirty.on { color: var(--warn); }
.dirty.on::before { background: var(--warn); }
.set-actions-btns { display: flex; gap: 8px; margin-left: auto; }

/* Page-level alert (role="alert"). */
.alert { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 24px; padding: 12px; border-radius: 8px; font-size: 14px; line-height: 20px; }
.alert-danger { background: var(--danger-tint); color: var(--danger); }
.alert-warn { background: var(--warn-tint); color: var(--warn); }
.alert-success { background: var(--success-tint); color: var(--success); }
.alert .ico { flex-shrink: 0; }
.alert p { margin: 0; }
.alert strong { font-weight: 600; }

/* Live candidate preview: recessed panel, hairline, no resting shadow. */
.pv-panel { background: var(--surface-recessed); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pv-title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.pv-frame { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #ffffff; }
.pv-top { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.pv-top img { height: 32px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
.pv-top img[hidden] { display: none; }
.pv-body { padding: 20px; }
.pv-progress { height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; margin-bottom: 16px; }
.pv-progress div { width: 38%; height: 100%; background: var(--pv-accent); }
.pv-kicker { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pv-accent); margin-bottom: 4px; }
.pv-inst { font-weight: 600; color: var(--pv-primary); font-size: 13px; margin-bottom: 4px; }
.pv-stem { font-size: 18px; font-weight: 600; line-height: 24px; margin: 0 0 16px; }
.pv-opt { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; margin-bottom: 8px; }
.pv-opt b { width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; background: var(--sunken); color: var(--ink-soft); }
.pv-opt.sel { border-color: var(--pv-accent); background: color-mix(in srgb, var(--pv-accent) 10%, #ffffff); color: var(--pv-accent); font-weight: 500; }
.pv-opt.sel b { background: var(--pv-accent); color: #ffffff; }
.pv-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; margin-top: 8px; border-radius: 8px; background: var(--pv-accent); color: #ffffff; font-size: 14px; font-weight: 500; }
.pv-note { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-soft); }

@media (min-width: 480px) { .swatch-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .brand-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .pv-panel { position: sticky; top: 0; }
}
@media (max-width: 860px) { .set-actions { bottom: -24px; } }  /* matches the smaller content padding, like .cand-actions */
@media (max-width: 479px) {
  .set-card { padding: 20px; }
  .set-actions-btns { width: 100%; }
  .set-actions-btns .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .dropzone, .preset { transition: none; } }

/* --- assessments page (docs/ui-ux-guide.md 7.2: header + primary action, table card, create dialog) --- */
.page { max-width: 1120px; display: flex; flex-direction: column; gap: 32px; }
.page :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.page > .admin-header { margin-bottom: 0; align-items: flex-start; }
/* New assessment: breadcrumb and title span the content area; the form is one centred column */
.page.new-assess { max-width: none; }
.new-assess > .alert, .new-assess > form { width: 100%; max-width: 800px; margin: 0 auto; }
/* Instruments: two-column grid of compact cards so nine instruments fit with little scrolling */
.inst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.inst-compact { gap: 10px; padding: 10px 12px; }
.inst-compact .inst-body { flex: 1; min-width: 0; }
.inst-compact .inst-name { display: block; font-size: 14px; line-height: 20px; }
.inst-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.inst-warn { color: var(--warn); font-weight: 500; }
.inst-compact .inst-links { margin-top: 2px; font-size: 12px; line-height: 18px; }
@media (max-width: 639px) { .inst-grid { grid-template-columns: minmax(0, 1fr); } }
.admin-desc { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-soft); max-width: 60ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section { display: flex; flex-direction: column; gap: 12px; }
.section-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text); }

/* Stat tiles: label caption, value display/tabular, delta micro. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat { border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; background: #ffffff; }
.stat-label { font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.stat-value { margin-top: 4px; font-size: 28px; line-height: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-delta { margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--ink-soft); }
.stat-delta.good { color: var(--success); }

.pill-info { background: var(--accent-light); color: var(--accent); }
.pill-neutral { background: var(--sunken); color: var(--ink-soft); }

/* Buttons: tonal = highlighted secondary action (one primary per region), ghost = quiet. */
.btn-tonal { border-color: transparent; background: var(--accent-light); color: var(--accent); font-weight: 600; }
.btn-tonal:hover { background: var(--accent); color: #ffffff; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--sunken); color: var(--text); }
.btn-del { color: var(--danger); }
.btn-del:hover { background: var(--danger-tint); color: var(--danger); }
.assess-table td .btn-sm { height: 36px; padding: 0 12px; }
.del-locked { display: inline-block; cursor: not-allowed; }
.del-locked .btn:disabled { opacity: 0.5; pointer-events: none; }

/* Table recipe */
.assess-table th, .assess-table td { padding-left: 16px; padding-right: 16px; }
.assess-table td { padding-top: 14px; padding-bottom: 14px; }
.assess-name { font-weight: 600; }
.assess-meta { margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.assess-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.completion { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.bar { flex: 1; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.4s ease-out; }
.bar.done > span { background: var(--success); }
.completion-count { min-width: 48px; text-align: right; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.row-actions { display: flex; justify-content: flex-end; gap: 8px; }
.row-actions .btn { height: 36px; padding: 0 12px; }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; text-align: center; border: 1px solid var(--line); border-radius: 12px; background: #ffffff; }
.empty-disc { width: 48px; height: 48px; border-radius: 12px; background: var(--sunken); display: flex; align-items: center; justify-content: center; }
.empty-disc svg { width: 24px; height: 24px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.empty h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.empty p { margin: 0; max-width: 44ch; font-size: 13px; line-height: 20px; color: var(--ink-soft); }

/* Dialog: scrolls within 100dvh - 2rem, flex column (head / scrolling body / footer). */
dialog.dlg { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 12px; color: var(--text); box-shadow: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px rgba(60, 64, 67, 0.3); }
dialog.dlg::backdrop { background: rgba(32, 33, 36, 0.5); }
dialog.dlg :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.dlg-form { display: flex; flex-direction: column; max-height: inherit; }
.dlg-head { display: flex; justify-content: space-between; gap: 12px; padding: 24px 24px 0; }
.dlg-head h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.dlg-head p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.dlg-close { flex-shrink: 0; width: 40px; height: 40px; margin: -8px -8px 0 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.dlg-close:hover { background: var(--sunken); }
.dlg-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dlg-body { display: flex; flex-direction: column; gap: 20px; padding: 20px 24px; overflow-y: auto; }
.dlg-body .alert { margin: 0; }
.dlg-body .field { width: 100%; }
.dlg-body .field[aria-invalid="true"] { border-color: var(--danger); }
.dlg-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--line-soft); }
.dlg-btns { display: flex; gap: 8px; margin-left: auto; }
.sel-count { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Multiselect: chips for what's picked, an "Add" button that opens the option list in place (inline, so dialogs don't clip it). */
.ms-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; }
.ms-box:focus-within { border-color: var(--accent); }
.ms-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--accent-light); color: var(--accent); font-size: 13px; font-weight: 500; }
.ms-chip.locked { padding: 0 10px 0 8px; background: var(--sunken); color: var(--ink-soft); }
.ms-chip.new { box-shadow: inset 0 0 0 1px var(--accent); }
.ms-chip svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-chip button { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.ms-chip button:hover { background: rgba(26, 115, 232, 0.16); }
.ms-tag { padding: 0 6px; border-radius: 999px; background: var(--accent); color: #ffffff; font-size: 11px; line-height: 16px; }
.ms-empty { padding: 0 4px; font-size: 13px; color: var(--ink-soft); }
.ms-add { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.ms-add:hover { background: var(--accent-light); }
.ms-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ms-list { margin-top: 6px; max-height: 240px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; box-shadow: 0 2px 6px rgba(60, 64, 67, 0.15); }
.ms-list[hidden], .ms-opt[hidden] { display: none; }
.ms-q.field { width: 100%; height: 36px; margin-bottom: 4px; }
.ms-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-weight: 400; cursor: pointer; }
.ms-opt:hover { background: var(--surface); }
.ms-opt:has(input:disabled) { cursor: default; color: var(--ink-soft); }
.ms-opt input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.ms-opt .muted { margin-left: auto; font-size: 12px; }

/* Choice cards: audience (radio) and instruments (checkbox); selected = primary-light. */
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg label, .inst { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-weight: 400; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.seg label:hover, .inst:hover { background: var(--surface); }
.seg label:has(input:checked), .inst:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.seg input, .inst input { flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.seg strong { display: block; font-size: 14px; font-weight: 600; }
.seg span { font-size: 13px; color: var(--ink-soft); }
.inst { gap: 12px; padding: 14px 16px; }
.inst-name { font-size: 14px; font-weight: 600; }
.inst-links { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.inst.locked { opacity: 0.7; cursor: not-allowed; }
.inst.locked:hover { background: transparent; }

@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .col-inst { display: none; } }
@media (max-width: 479px) {
  .stats, .seg { grid-template-columns: minmax(0, 1fr); }
  .dlg-btns { width: 100%; }
  .dlg-btns .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .bar > span, .seg label, .inst, .btn { transition: none; } }

/* --- institutes page (reuses the assessments primitives: .page, .stats, .section, .empty, dialog.dlg) --- */
.mono { font: 500 13px Consolas, ui-monospace, monospace; color: var(--ink-soft); }
.mono-field.field { font-family: Consolas, ui-monospace, monospace; }
.org-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.org-stat-name { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.org-search { flex: 0 1 280px; height: 40px; }
.org-table th, .org-table td { padding-left: 16px; padding-right: 16px; }
.org-table td { padding-top: 12px; padding-bottom: 12px; }
.org-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.org-table .row-actions form { margin: 0; }
.org-table .row-actions .btn { height: 36px; padding: 0 12px; font-size: 14px; }
.org-table .row-actions .btn-icon { width: 36px; padding: 0; }
.org-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.org-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.org-name { font-weight: 600; }
.org-date { color: var(--ink-soft); white-space: nowrap; }

/* One-time API key (info alert) */
.alert-info { background: var(--accent-light); color: var(--accent); }
.org-key { flex: 1; min-width: 0; }
.org-key p + p { margin-top: 2px; }
.org-key-note, .org-key-note .mono { color: var(--text); }
.org-key-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.org-key-code { flex: 1 1 280px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; font: 500 13px/20px Consolas, ui-monospace, monospace; color: var(--text); overflow-wrap: anywhere; }
.org-key-row .btn { height: 36px; padding: 0 12px; background: #ffffff; }

/* Narrow form dialog (guide: forms use max-w-md) */
dialog.dlg-sm { width: min(448px, calc(100vw - 32px)); }

/* Toast: top-right, 72px down so it clears the header, dismissable, auto-hides in 10 s */
.toast { position: fixed; top: 72px; right: 24px; z-index: 50; display: flex; align-items: flex-start; gap: 12px; width: min(380px, calc(100vw - 24px)); padding: 12px 8px 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; box-shadow: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px rgba(60, 64, 67, 0.3); font-size: 14px; line-height: 20px; animation: toast-in 0.2s ease-out; }
.toast > span { flex: 1; min-width: 0; padding-top: 4px; }
.toast-ico { flex-shrink: 0; width: 20px; height: 20px; margin-top: 4px; fill: none; stroke: var(--success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast-err .toast-ico { stroke: var(--danger); }
.toast-close { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; }
.toast-close:hover { background: var(--sunken); }
.toast-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 1100px) { .org-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: each institute becomes a stacked card */
@media (max-width: 639px) {
  .org-search { flex-basis: 100%; }
  .org-table thead { display: none; }
  .org-table, .org-table tbody, .org-table tr, .org-table td { display: block; width: 100%; }
  .org-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  .org-table tr:last-child { border-bottom: 0; }
  .org-table tr[hidden] { display: none; }
  .org-table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: left; }
  .org-table td.num { text-align: left; }
  .org-table td[data-label]::before { content: attr(data-label); color: var(--ink-soft); font-size: 13px; }
  .org-table td:first-child { padding-bottom: 8px; }
  .org-table td:last-child { padding-top: 8px; }
  .org-table tbody tr:hover td { background: transparent; }
  .org-table .row-actions { width: 100%; justify-content: flex-start; }
  .toast { right: 12px; }
}
@media (max-width: 479px) { .org-stats { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* --- candidate pages (templates/candidate/*; docs/ui-ux-guide.md) ---
   --on-accent and --accent-light come from the institute's accent (app/candidate.py _accent_extras),
   so button text stays readable on light accents such as amber. */
:root { --on-accent: #ffffff; }
.ex-body { background: #ffffff; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-size: 15px; line-height: 24px; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "calt"; }
.ex-body p { text-wrap: pretty; }
.ex-body :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }

/* Call-to-action: 48px, centred label + arrow */
.ex-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; min-width: 240px; padding: 12px 24px; text-align: center; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: filter 0.15s; }
.ex-btn:hover { filter: brightness(0.93); text-decoration: none; }
.ex-btn:disabled { opacity: 0.7; cursor: default; }
.ex-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.ex-btn:hover svg { transform: translateX(2px); }
.ex-btn-block { width: 100%; }
.ex-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* Header: 64px, logo 36px or brand name, status on the right; progress bar under it on question pages */
.ex-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 32px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.ex-brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.ex-brand .brand-logo { height: 44px; max-width: min(240px, 45vw); }
.ex-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ex-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.ex-saved svg { width: 16px; height: 16px; fill: none; stroke: var(--success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ex-lang select { height: 36px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--text); background: #ffffff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.ex-lang select:hover { border-color: var(--ink-soft); }
.ex-lang { display: inline-flex; align-items: center; gap: 6px; }
.ex-lang svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.lang-grid .check-row { margin-top: 0; }
.lang-grid .check-row.off { opacity: .55; cursor: not-allowed; }
.lang-grid .lang-native { color: var(--ink-soft); }
.lang-grid .check-row small { display: block; color: var(--ink-soft); font-size: 12px; }
.lang-default { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.lang-default select { min-width: 200px; }
.ex-progress-top { height: 4px; background: var(--track); }
.ex-progress-top > div { height: 100%; background: var(--accent); transition: width 0.4s ease-out; }

/* Page column, 8px rhythm */
.ex-main { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 56px 32px 96px; }
.ex-main.wide { max-width: 1120px; }
.ex-group { display: flex; flex-direction: column; gap: 16px; }

/* Type scale */
.ex-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.ex-dot { width: 3px; height: 3px; border-radius: 50%; background: #9aa0a6; }
/* Indic scripts stack marks above and below the line: tight Latin line-heights make wrapped headings collide */
:is(:lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(kn), :lang(ta), :lang(te)) :is(.ex-h1, .ex-h2, .ex-sub) { line-height: 1.5; }
.ex-h1 { margin: 0; font-size: 36px; line-height: 44px; font-weight: 600; letter-spacing: -0.025em; color: var(--text); text-wrap: balance; }
.ex-sub { margin: 0; max-width: 52ch; font-size: 17px; line-height: 28px; color: var(--ink-soft); }
.ex-h2 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.ex-h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); }
.ex-kicker { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.ex-fineprint { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-soft); text-align: center; }
.ex-body .pill { height: 26px; line-height: 16px; white-space: nowrap; }
.ex-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Landing: hero + consent first in source order (phones reach Start without scrolling);
   from 900px the consent card sits in a sticky right column. */
.ex-landing { display: flex; flex-direction: column; gap: 32px; }
.ex-hero .ex-meta { margin-bottom: 4px; }
.ex-details { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 900px) {
  .ex-landing { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "hero consent" "details consent"; column-gap: 64px; row-gap: 48px; align-items: start; }
  .ex-hero { grid-area: hero; padding-top: 8px; }
  .ex-landing .ex-consent { grid-area: consent; position: sticky; top: 96px; }
  .ex-details { grid-area: details; }
}
.ex-consent { display: flex; flex-direction: column; gap: 20px; padding: 28px; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 12px; background: #ffffff; }
.ex-consent > .ex-h2 { font-size: 20px; line-height: 28px; }
.ex-fields { display: flex; flex-direction: column; gap: 16px; }
.ex-field { display: flex; flex-direction: column; gap: 6px; }
.ex-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); }
.ex-input { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; font: inherit; font-size: 15px; color: var(--text); }
.ex-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.25); }
.ex-input[aria-invalid="true"] { border-color: var(--danger); }
.ex-field .ex-error { margin: 0; font-size: 13px; }
.ex-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ex-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.ex-facts b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ex-consent-text { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 96px; padding: 16px; border-radius: 8px; background: var(--surface-recessed); }
.ex-consent-text p { margin: 0; font-size: 14px; line-height: 22px; color: var(--text); }
.ex-check { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text); cursor: pointer; transition: border-color 0.15s; }
.ex-check:hover { border-color: var(--ink-soft); }
.ex-check:has(input:checked) { border-color: var(--accent); }
.ex-check input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.ex-check[aria-invalid="true"] { border-color: var(--danger); }
.ex-error { margin: -8px 0 0; font-size: 14px; line-height: 20px; color: var(--danger); }
.ex-error[hidden] { display: none; }

/* Section list (landing) and next steps (done) */
.ex-steps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; }
.ex-step { display: flex; align-items: center; gap: 16px; padding: 18px 24px; }
.ex-step + .ex-step { border-top: 1px solid var(--line-soft); }
.ex-step-no { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--sunken); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ex-step-no.ok { background: var(--success-tint); color: var(--success); }
.ex-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ex-step-name { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); }
.ex-step-desc { font-size: 13px; line-height: 20px; color: var(--ink-soft); }


/* Section intro (left-aligned) */
.ex-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.ex-intro > * { width: 100%; }
.ex-intro > form { width: auto; }
.ex-track { display: flex; gap: 6px; margin-bottom: 8px; }
.ex-track span { flex: 1; height: 6px; border-radius: 999px; background: var(--track); }
.ex-track span.done { background: var(--success); }
.ex-track span.now { background: var(--accent); }
.ex-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 8px; font-size: 14px; line-height: 22px; }
.ex-note .ex-ico { margin-top: 2px; flex-shrink: 0; }
.ex-note-info { background: var(--sunken); color: var(--text); }
.ex-note-warn { background: var(--warn-tint); color: var(--warn); }
.ex-note strong { font-weight: 600; }
.ex-intro .ex-group:has(.ex-tips) { gap: 12px; }
.ex-tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 22px; color: var(--text); }
.ex-tips li { display: flex; gap: 12px; }
.ex-tips li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--accent); }

/* Question */
.ex-item { display: flex; flex-direction: column; gap: 32px; }
.ex-q-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 32px; }
.ex-count { font-size: 13px; line-height: 20px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ex-timer { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0 12px; border-radius: 999px; background: var(--sunken); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ex-timer.timer-warn { background: var(--warn-tint); color: var(--warn); }
.ex-timer.timer-low { background: var(--danger-tint); color: var(--danger); animation: timer-blink 1s steps(1, end) infinite; }
@keyframes timer-blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ex-timer.timer-low { animation: none; } }
.ex-stem { margin: 0; font-size: 28px; line-height: 38px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.ex-item .figure { margin: 0; }
.ex-opts { display: flex; flex-direction: column; gap: 10px; }
.ex-opt { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 10px 16px 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff; color: var(--text); font: inherit; font-size: 16px; line-height: 24px; text-align: left; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.ex-opt:hover { border-color: var(--ink-soft); }
.ex-opt b { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--sunken); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; transition: background-color 0.15s, color 0.15s; }
.ex-opt.selected { border-color: var(--accent); background: var(--accent-light); font-weight: 500; }
.ex-opt.selected b { background: var(--accent); color: var(--on-accent); }
.ex-opt:disabled { cursor: default; }
.ex-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: -16px; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.ex-status { min-height: 20px; margin: 0; }
.ex-item[hidden], .ex-offline[hidden] { display: none; }

/* Done (centred) */
.ex-done { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 520px; margin: 0 auto; padding-top: 16px; text-align: center; }
.ex-done-disc { width: 72px; height: 72px; border-radius: 50%; background: var(--success-tint); color: var(--success); display: flex; align-items: center; justify-content: center; }
.ex-done-disc svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ex-done-disc.expired { background: var(--warn-tint); color: var(--warn); }
.ex-done .ex-group { align-items: center; gap: 12px; }
.ex-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ex-btn-sec { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--line); }
.ex-btn-sec:hover { background: var(--accent-light); filter: none; }
.ex-wait { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--ink-soft); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.ex-foot { margin: 0; font-size: 14px; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

@media (max-width: 639px) {
  .ex-top { height: 56px; padding: 0 16px; }
  .ex-brand { font-size: 16px; }
  .ex-brand .brand-logo { height: 36px; max-width: 45vw; }
  .ex-saved span { display: none; }
  .ex-main { padding: 24px 16px 64px; }
  .ex-h1 { font-size: 26px; line-height: 34px; letter-spacing: -0.02em; }
  .ex-sub { font-size: 16px; line-height: 24px; }
  .ex-stem { font-size: 22px; line-height: 30px; }
  .ex-landing { gap: 24px; }
  .ex-hero.ex-group { gap: 8px; }
  .ex-details { gap: 32px; padding-top: 8px; }
  .ex-consent { gap: 16px; padding: 20px 16px; }
  .ex-consent .ex-fineprint { display: none; }  /* repeated in "Before you start" below */
  .ex-step { padding: 14px 16px; gap: 12px; }
  .ex-intro, .ex-done, .ex-item { gap: 24px; }
  .ex-intro > form { width: 100%; }
  .ex-btn { width: 100%; min-width: 0; }
  .ex-opt { min-height: 56px; font-size: 15px; }
  .ex-kbd-hint { display: none; }
  .ex-hint { margin-top: -8px; }
}
/* Short phones (e.g. 375×667): drop the subline so Start stays on the first screen */
@media (max-width: 639px) and (max-height: 760px) { .ex-hero .ex-sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .ex-opt, .ex-opt b, .ex-check, .ex-btn, .ex-btn svg, .ex-progress-top > div { transition: none; } }

/* --- results page: breadcrumb, filter chips, compact table, expandable score panel --- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--text); text-decoration: none; }
.crumbs svg { width: 14px; height: 14px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; }
.crumbs [aria-current] { color: var(--text); font-weight: 500; }
.title-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.res-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
button.chip { font-family: inherit; cursor: pointer; }
.chip .n { margin-left: 6px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chip.active .n { color: var(--accent); }
.res-tools .search-box { flex: 0 1 280px; }

.res-table th, .res-table td { padding-left: 16px; padding-right: 16px; }
.res-table td { padding-top: 14px; padding-bottom: 14px; }
.res-table .col-x { width: 48px; padding-right: 0; }
.res-row.can-open { cursor: pointer; }
.res-row.open td { background: var(--surface); border-bottom-color: transparent; }
.cand-e { font-size: 13px; color: var(--ink-soft); }
.dash { color: var(--ink-faint); }
.x-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.x-btn:hover { background: var(--sunken); color: var(--text); }
.x-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform 0.15s; }
.x-btn[aria-expanded="true"] svg { transform: rotate(90deg); }
.reports { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rep-btn { height: 36px; padding: 0 12px; gap: 6px; }
.rep-wait { font-size: 13px; color: var(--ink-soft); }
/* Report viewer (admin/report_view.html) */
.rep-frame-wrap { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #ffffff; }
.rep-frame { display: block; width: 100%; height: max(600px, calc(100vh - 260px)); border: 0; }
.rep-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: #ffffff; color: var(--ink-soft); font-size: 14px; }
.rep-loading[hidden] { display: none; }
.no-match { padding: 32px 16px; text-align: center; color: var(--ink-soft); }
.no-match[hidden] { display: none; }
.link-btn { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

.det-row > td { padding: 4px 16px 20px 64px !important; background: var(--surface); }
.res-table tbody tr.det-row:hover td { background: var(--surface); }
.det { display: flex; flex-direction: column; gap: 12px; }
.det-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.det-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff; }
.det-card h4 { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; }
.det-card h4 span { font-size: 12px; font-weight: 400; color: var(--ink-soft); white-space: nowrap; }
.det-card p { margin: -8px 0 0; font-size: 12px; color: var(--ink-soft); }
.big { font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mono { font-family: Consolas, ui-monospace, monospace; letter-spacing: 0.12em; }
.sc { display: grid; grid-template-columns: minmax(0, 130px) 1fr 20px; align-items: center; gap: 10px; font-size: 13px; }
.sc-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.sc b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.sc-bar span { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--accent) 45%, #ffffff); }
.sc-bar span.hi { background: var(--accent); }
.sc-bar span.lo { background: var(--ink-faintest); }
.det-flag { display: flex; gap: 10px; padding: 10px 14px; border-radius: 8px; background: var(--warn-tint); color: var(--warn); font-size: 13px; line-height: 20px; }
.det-flag svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.det-foot { margin: 0; font-size: 12px; color: var(--ink-soft); }

.note { font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.note summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; color: var(--text); font-weight: 500; cursor: pointer; }
.note summary::-webkit-details-marker { display: none; }
.note summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform 0.15s; }
.note[open] summary svg { transform: rotate(90deg); }
.note p { margin: 8px 0 0; max-width: 80ch; }

@media (max-width: 760px) {
  .col-date { display: none; }
  .det-row > td { padding-left: 16px !important; }
}
@media (prefers-reduced-motion: reduce) { .x-btn svg, .note summary svg { transition: none; } }

/* Info tooltip: an (i) next to a title or label holds the help text that used to sit under it (templates/admin/_tip.html).
   Opens on hover, keyboard focus or tap (static/tip.js); fixed position so cards and dialogs can't clip it. */
.tip { display: inline-flex; vertical-align: middle; margin-left: 2px; }
.tip-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-faint); cursor: help; }
.tip-btn:hover, .tip.open .tip-btn { color: var(--text); background: var(--sunken); }
.tip-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tip-bubble { position: fixed; z-index: 1000; top: 0; left: 0; width: max-content; max-width: min(280px, calc(100vw - 32px)); padding: 8px 10px; border-radius: 6px;
  background: #3c4043; color: #fff; font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  box-shadow: 0 2px 6px rgba(60, 64, 67, 0.3); visibility: hidden; opacity: 0; transition: opacity 0.12s; pointer-events: none; }
.tip:hover .tip-bubble, .tip.open .tip-bubble, .tip-btn:focus-visible + .tip-bubble { visibility: visible; opacity: 1; }
.fld-label-row { display: flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .tip-bubble { transition: none; } }
.tip-bubble.btn-tip.show { visibility: visible; opacity: 1; }

/* Sign-in page, ported from open-notebook's AuthBackdrop + LoginForm: drifting colour washes,
   a dot field that fades toward a frosted card. */
.auth-page { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; background: #ffffff; }
.auth-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 110%, var(--surface), transparent 70%), #ffffff; }
.auth-blob { position: absolute; border-radius: 9999px; filter: blur(80px); will-change: transform; animation: auth-drift 26s ease-in-out infinite alternate; }
.auth-blob-a { width: 44vw; height: 44vw; min-width: 420px; min-height: 420px; left: -10vw; top: -8vh; background: radial-gradient(circle, var(--accent) 0%, transparent 65%); opacity: 0.22; }
.auth-blob-b { width: 38vw; height: 38vw; min-width: 360px; min-height: 360px; right: -6vw; bottom: -14vh; background: radial-gradient(circle, #5d4991 0%, transparent 65%); opacity: 0.18; animation-delay: -9s; animation-direction: alternate-reverse; }
.auth-blob-c { width: 26vw; height: 26vw; min-width: 260px; min-height: 260px; left: 36vw; bottom: -10vh; background: radial-gradient(circle, #4e6b84 0%, transparent 65%); opacity: 0.14; animation-delay: -17s; }
@keyframes auth-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4vw, 3vh, 0) scale(1.08); } }
.auth-dots { position: absolute; inset: 0; background-image: radial-gradient(var(--ink-faintest) 1px, transparent 1px); background-size: 22px 22px; opacity: 0.45; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 25%, black 80%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 25%, black 80%); }
@media (prefers-reduced-motion: reduce) { .auth-blob { animation: none; } }
.auth-card { position: relative; width: 100%; max-width: 400px; padding: 40px; border: 1px solid rgba(218, 220, 224, 0.7); border-radius: 12px; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(60, 64, 67, 0.12), 0 24px 60px -24px rgba(26, 115, 232, 0.25); }
.auth-card h1 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
.auth-card .lead { margin: 0 0 32px; font-size: 14px; color: var(--ink-soft); }
.auth-field { margin-bottom: 20px; }
.auth-field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.auth-card input.field { width: 100%; height: 44px; padding: 0 14px; background: rgba(255, 255, 255, 0.7); }
.auth-alert { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 10px 12px; border: 1px solid rgba(217, 48, 37, 0.3); border-radius: 8px; background: var(--danger-tint); color: var(--danger); font-size: 14px; }
.auth-alert svg { flex: none; width: 16px; height: 16px; }
.auth-ok { border-color: rgba(24, 128, 56, 0.3); background: var(--success-tint); color: var(--success); }
.auth-captcha { margin-bottom: 20px; }
.auth-submit.btn { width: 100%; height: 44px; font-size: 15px; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.auth-foot { margin: 20px 0 0; text-align: center; }
@media (max-width: 480px) { .auth-card { padding: 32px 24px; } }

/* Show/hide password button (static/pwtoggle.js wraps every password field) */
.pw-wrap { position: relative; display: block; }
.pw-wrap input.field { width: 100%; padding-right: 44px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.pw-toggle:hover { background: var(--sunken); color: var(--text); }
.pw-toggle svg { width: 18px; height: 18px; }

/* Advanced configuration (New / Edit assessment): collapsed card holding the Time Limit */
details.adv summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
details.adv summary::-webkit-details-marker { display: none; }
details.adv summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
details.adv[open] summary svg { transform: rotate(90deg); }
.adv-body { margin-top: 20px; }
.tl-custom { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.tl-custom .field { width: 80px; height: 32px; padding: 0 8px; text-align: right; }
@media (prefers-reduced-motion: reduce) { details.adv summary svg { transition: none; } }

/* Invites page: the email preview popup */
/* Invites: status strip; its chips filter the table (the Assessment picker sits in the table toolbar) */
.inv-status { padding: 16px 20px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff; }
.inv-status-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.inv-status-top strong { font-size: 16px; }
.inv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.inv-chip:hover { background: var(--surface); }
.inv-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inv-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.inv-chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-chip.zero:not([aria-pressed="true"]) { color: var(--ink-faint); }
.inv-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-warn { background: var(--warn); } .dot-wait { background: var(--ink-faintest); } .dot-prog { background: var(--accent); } .dot-done { background: var(--success); }
.inv-assess { max-width: 240px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .inv-chip { transition: none; } }
.row-act { white-space: nowrap; text-align: right; }
.dlg-mail { width: calc(100% - 32px); max-width: 640px; }
.mail { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.mail-hdr { display: grid; grid-template-columns: 80px 1fr; gap: 4px 12px; margin: 0; padding: 12px 16px; background: var(--sunken); font-size: 13px; }
.mail-hdr dt { color: var(--ink-soft); }
.mail-hdr dd { margin: 0; overflow-wrap: anywhere; }
.mail-subj { font-weight: 600; }
.mail-body { padding: 16px 20px; font: 14px/1.5 Arial, sans-serif; color: #202124; background: #ffffff; overflow-wrap: anywhere; }
.mail-btn { display: inline-block; color: #ffffff; padding: 10px 18px; border-radius: 6px; }
.mail-foot { color: #64748B; font-size: 13px; }

/* Batch field in Add / Edit candidate */
.batch-fld { margin-top: 16px; }
.fld-opt { font-weight: 400; }

/* Toolbar dropdowns: the dropdown's name sits on its top border (Batch, Assessment, Status, Sort by) */
.fsel { position: relative; display: inline-flex; margin-top: 6px; }
.fsel > select { width: 100%; }
.fsel-label { position: absolute; top: -8px; left: 9px; z-index: 1; padding: 0 4px; background: #ffffff; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink-soft); pointer-events: none; }
.cand-tools { align-items: flex-end; }

/* --- New assessment: 3 steps (Describe, Review, Permissions); the form keeps every field, the script shows one step at a time --- */
.wz { gap: 16px; }
.wz-step { display: flex; flex-direction: column; gap: 16px; }
.stepper { display: flex; align-items: center; margin: 0; padding: 16px 20px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: #ffffff; }
.stepper li { display: flex; align-items: center; flex: 1; min-width: 0; }
.stepper li:last-child { flex: 0 0 auto; }
.stepper li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 16px; border-radius: 2px; background: var(--line-soft); transition: background-color .3s; }
.stepper li:has(> .done):not(:last-child)::after { background: var(--accent); }
.stepper button { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.stepper button:disabled { cursor: default; }
.stepper .n { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #ffffff; font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: background-color .2s, box-shadow .2s, color .2s; }
.stepper .n svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.stepper .lbl { display: flex; flex-direction: column; min-width: 0; }
.stepper .lbl b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.stepper .lbl small { font-size: 12px; line-height: 16px; color: var(--ink-faint); white-space: nowrap; }
.stepper [aria-current=step] .n { border-color: var(--accent); background: var(--accent); color: #ffffff; box-shadow: 0 0 0 4px var(--accent-light); }
.stepper [aria-current=step] .lbl b, .stepper .done .lbl b { color: var(--text); }
.stepper .done .n { border-color: var(--accent-light); background: var(--accent-light); color: var(--accent); }
.stepper button:not(:disabled):hover .lbl b { color: var(--accent); }
.card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.card-head > div { flex: 1; min-width: 0; }
.card-head .disc { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: var(--accent-light); color: var(--accent); }
.card-head .disc .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.req { margin-left: 2px; color: var(--danger); }
.ai-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--accent-light); color: var(--accent); font-size: 11px; font-weight: 500; }
.cnt-wrap { position: relative; }
.cnt-wrap .field { width: 100%; padding-right: 72px; }
.cnt-wrap .cnt { position: absolute; right: 12px; top: 10px; font-size: 12px; color: var(--ink-faint); pointer-events: none; }
.cnt-wrap textarea.field { min-height: 120px; padding-right: 12px; padding-bottom: 28px; resize: vertical; }
.cnt-wrap textarea + .cnt { top: auto; bottom: 10px; }
.wz .field[aria-invalid=true] { border-color: var(--danger); }
.ex { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.ex-title { margin: 0 0 12px; text-align: center; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.ex-center { display: flex; justify-content: center; }
.ex-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sunken); }
.ex-tabs button { min-width: 132px; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.ex-tabs button:hover { color: var(--text); }
.ex-tabs button[aria-selected=true] { background: #ffffff; color: var(--accent); box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.ch { height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff; font: inherit; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.ch:hover { border-color: var(--accent); color: var(--accent); }
.ch[aria-pressed=true] { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.editable.is-view .edit-part, .editable:not(.is-view) .view-part { display: none; }
.rows { display: grid; grid-template-columns: 140px 1fr; margin: 0; border: 1px solid var(--line-soft); border-radius: 8px; }
.rows > * { padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: 14px; line-height: 22px; }
.rows > :nth-child(-n+2) { border-top: 0; }
.rows > dt { background: var(--surface-recessed); color: var(--ink-soft); }
.rows > dd { margin: 0; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.age-in { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.age-in .field { width: 72px; }
.edit-foot { display: flex; justify-content: flex-end; gap: 8px; }
#aiNotes .alert { margin: 12px 0 0; }
.seg-one { grid-template-columns: 1fr; }
.summary { display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; margin: 0; font-size: 14px; line-height: 22px; }
.summary dt { color: var(--ink-soft); }
.summary dd { margin: 0; font-weight: 500; }
.sel-count b { color: var(--text); font-weight: 600; }
@media (max-width: 760px) {
  .stepper { padding: 12px 16px; } .stepper .lbl small { display: none; } .stepper li:not(:last-child)::after { margin: 0 10px; }
  .stepper button:not([aria-current=step]) .lbl { display: none; }
}
@media (max-width: 560px) { .rows, .summary, .fields-2 { grid-template-columns: 1fr; } .rows > dt { padding-bottom: 4px; } .rows > dd { border-top: 0; padding-top: 0; } .ex-tabs, .ex-tabs button { flex: 1; min-width: 0; } .ex-center .ex-tabs { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .stepper .n, .stepper li::after, .ex-tabs button, .ch { transition: none; } }
.wz [hidden] { display: none !important; }  /* steps, Back/Next/Create and notes hide with the hidden attribute even where a class sets display */
#chips { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ex-acc + .ex-acc { border-top: 1px solid var(--line); }
.ex-acc summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; list-style: none; cursor: pointer; }
.ex-acc summary::-webkit-details-marker { display: none; }
.ex-acc summary:hover { background: var(--surface-recessed); }
.ex-cat { flex: 1; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); }
.ex-n { min-width: 24px; height: 22px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--sunken); font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.ex-chev { width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.ex-acc[open] .ex-chev { transform: rotate(180deg); }
.ex-acc[open] summary { background: var(--surface-recessed); }
.ex-acc .chip-row { justify-content: flex-start; margin: 0; padding: 12px 16px 16px; }
.locked-insts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .ex-chev { transition: none; } }