/* iGiveTest design system — single source of truth. Mobile-first: base rules are the phone layout; min-width queries add desktop. Raw #hex colours are legal ONLY inside :root below. Everything else uses var(). Enforced by bin/check-design-system.sh. */ :root { /* Two themes, ONE token block: every colour is a light-dark() pair, resolved by color-scheme. Default follows the OS; :root[data-theme] (set from the ui_theme cookie server-side, toggled by [data-theme-toggle]) pins it. */ color-scheme: light dark; /* Surfaces & text */ --bg: light-dark(#f7f8fb, #10151d); --surface: light-dark(#ffffff, #171e29); --surface-muted: light-dark(#f1f4f8, #1c2431); --surface-hover: light-dark(#eef2f6, #212b3a); --border: light-dark(#d8dee8, #2c3747); --border-strong: light-dark(#78839a, #697986); --row-border: light-dark(#e3e8ef, #232d3c); --row-alt: light-dark(#fafbfd, #141b25); --row-active: light-dark(#eef6ff, #1a2940); --text: light-dark(#17202c, #e6ebf2); --muted: light-dark(#526071, #94a3b8); --inverse: light-dark(#ffffff, #0f141c); /* Intent */ --link: light-dark(#145db8, #6ea8ff); --link-strong: light-dark(#0f4b94, #8dbcff); --success: light-dark(#176b3a, #7ee2a8); --success-bg: light-dark(#f0fff4, #10231a); --success-border: light-dark(#9fd7b1, #245a3c); --danger: light-dark(#b42318, #f88b84); --danger-bg: light-dark(#fff5f5, #2a1615); --danger-border: light-dark(#f2b8b5, #6b2b28); --warning: light-dark(#946200, #f0c25e); --warning-bg: light-dark(#fff9e8, #292112); --warning-border: light-dark(#f7d58a, #6b5720); --info: light-dark(#243b53, #c4d9f7); --info-bg: light-dark(#f3f8ff, #16202e); --info-border: light-dark(#b9d5ff, #2f4468); --focus: light-dark(#0b63ce, #6ea8ff); --shadow: 0 1px 2px light-dark(rgba(23, 32, 44, 0.08), rgba(0, 0, 0, 0.45)); /* Space scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; /* Radius */ --radius-1: 6px; --radius-2: 8px; --radius-pill: 999px; /* Controls — 44px touch target is the mobile-first default. */ --control-h: 44px; --control-h-sm: 36px; /* Type */ --text-xs: 12px; --text-sm: 13px; --text-md: 15px; --text-lg: 19px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* Explicit theme choice (ui_theme cookie → data-theme on ) pins the scheme; without it light-dark() follows prefers-color-scheme. No hex here. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: var(--text-md) / 1.5 var(--font); } a { color: var(--link); text-decoration: none; } a:hover, a:focus { color: var(--link-strong); text-decoration: underline; } button, input, select, textarea { font: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } button:disabled, input:disabled, select:disabled, textarea:disabled, .is-disabled { cursor: not-allowed; opacity: 0.55; } p { margin: var(--space-2) 0; } /* The visible page heading is the

;

is a section heading within it. The page title used to live in the header chrome, where it duplicated the breadcrumb leaf. */ h1 { margin: var(--space-4) 0 var(--space-3); color: var(--text); font-size: var(--text-lg); font-weight: 650; line-height: 1.3; } h2 { margin: var(--space-4) 0 var(--space-2); color: var(--text); font-size: var(--text-md); font-weight: 700; line-height: 1.3; } table { border-collapse: collapse; max-width: 100%; } td, th { padding: var(--space-2) var(--space-3); overflow-wrap: break-word; vertical-align: top; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; margin: -1px !important; padding: 0 !important; border: 0 !important; white-space: nowrap !important; } /* ── Action primitive ────────────────────────────────────────────────────── ONE control primitive for every clickable thing, whatever the element. Shape: .action (chip) | .action--quiet (borderless) Intent: (default) | .action--primary | .action--danger They compose: .action.action--quiet.action--danger `white-space: nowrap` is the invariant that keeps a control's label on one line: it also raises the control's min-content width, so table auto-layout can no longer squeeze the cell down and shatter the label. */ /* `:where()` zeroes the element selectors' specificity, so a bare button still gets the primitive by default without out-specifying intent modifiers. */ .action, :where(button, input[type="button"], input[type="reset"]) { display: inline-flex; min-height: var(--control-h); max-width: 100%; align-items: center; justify-content: center; gap: var(--space-1); border: 1px solid var(--border-strong); border-radius: var(--radius-1); background: var(--surface); color: var(--text); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; } .action:hover, .action:focus, :where(button, input[type="button"], input[type="reset"]):hover, :where(button, input[type="button"], input[type="reset"]):focus { border-color: var(--muted); background: var(--surface-hover); color: var(--text); text-decoration: none; } .action--primary { border-color: var(--link); background: var(--link); color: var(--inverse); } .action--primary:hover, .action--primary:focus { border-color: var(--link-strong); background: var(--link-strong); color: var(--inverse); } .action--danger { border-color: var(--danger-border); background: var(--surface); color: var(--danger); } .action--danger:hover, .action--danger:focus { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); } .action--quiet { border-color: transparent; background: transparent; color: var(--link); padding: var(--space-2); } .action--quiet:hover, .action--quiet:focus { border-color: transparent; background: var(--surface-hover); color: var(--link-strong); text-decoration: underline; } .action--quiet.action--danger { background: transparent; color: var(--danger); } .action--quiet.action--danger:hover, .action--quiet.action--danger:focus { border-color: transparent; background: var(--danger-bg); color: var(--danger); } .action--block { width: 100%; } .action--icon-only { min-width: var(--control-h); min-height: var(--control-h); } /* `.pagination a` (0,1,1) out-specifies `.action--icon-only` (0,1,0) and would pin the icon-only chips to --control-h-sm; the compound selector restores the touch target. */ .pagination .action--icon-only { min-height: var(--control-h); } .icon { inline-size: 1em; block-size: 1em; flex: none; vertical-align: -0.125em; } /* Section disclosure header (config panels, user edit, question editor). */ .section-toggle { width: 100%; justify-content: flex-start; background: var(--surface-muted); border-color: var(--border); color: var(--text); font-weight: 700; white-space: normal; } .form-fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; } .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; } .form-actions > * { flex: 1 1 auto; } .inline-form { display: inline; } /* ── Layout ────────────────────────────────────────────────────────────── */ .l-wrap { width: min(100% - var(--space-4), 1200px); margin: 0 auto; } .l-main { min-width: 0; padding: var(--space-4) 0 var(--space-5); } .l-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--border); padding: var(--space-3) 0; } .l-header__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); font-size: 17px; font-weight: 700; white-space: nowrap; } .l-header__logo { display: block; max-height: 32px; width: auto; } .l-header__actions { display: inline-flex; align-items: center; gap: var(--space-1); } .l-footer { margin-top: var(--space-3); border-top: 1px solid var(--border); padding: var(--space-4) 0 var(--space-5); color: var(--muted); font-size: var(--text-xs); text-align: center; } .skip-link { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 10; transform: translateY(-160%); border: 1px solid var(--link); border-radius: var(--radius-1); background: var(--surface); padding: var(--space-2) var(--space-3); color: var(--link); font-weight: 700; } .skip-link:focus { transform: translateY(0); } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; color: var(--muted); font-size: var(--text-sm); list-style: none; } .breadcrumbs li + li::before { content: "/"; margin-right: var(--space-1); color: var(--muted); } /* ── Getting-started checklist (home; hides itself once every task is done) ─ */ .getting-started { margin: var(--space-3) 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--info-border); border-radius: var(--radius-2); background: var(--info-bg); } .getting-started h2 { margin: 0 0 var(--space-1); font-size: var(--text-md); } .getting-started__list { margin: var(--space-2) 0 0; padding: 0; list-style: none; } .getting-started__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--info-border); } .getting-started__state { color: var(--muted); font-size: var(--text-sm); } .getting-started__state--done { color: var(--success); } .getting-started__note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: var(--text-sm); } /* ── Help journey ribbon (the guided walkthrough, on the working screen) ─── */ .help-journey-ribbon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--info-border); border-radius: var(--radius-2); background: var(--info-bg); color: var(--info); } .help-journey-ribbon p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; } .help-journey-ribbon__where { font-size: var(--text-sm); } .help-journey-ribbon__next { color: var(--muted); } .section-heading { margin: var(--space-3) 0 var(--space-2); color: var(--text); font-size: var(--text-md); font-weight: 700; } .section-divider { border: 0; border-top: 1px solid var(--border); margin: var(--space-3) 0; } /* ── Primary navigation (mobile-first disclosure) ──────────────────────── */ .nav-bar { border-bottom: 1px solid var(--border); padding: var(--space-2) 0; } .nav-bar__toggle { width: 100%; } .nav-bar__list { display: none; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; } .nav-bar[data-open] .nav-bar__list { display: flex; } .nav-bar__link { display: flex; min-height: var(--control-h); align-items: center; border: 1px solid transparent; border-radius: var(--radius-1); padding: var(--space-2) var(--space-3); color: var(--text); font-weight: 600; } .nav-bar__link:hover, .nav-bar__link:focus { border-color: var(--border); background: var(--surface-muted); color: var(--text); text-decoration: none; } .nav-bar__link[aria-current="page"] { border-color: transparent; background: var(--row-active); color: var(--link-strong); } .panel-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--border); margin: var(--space-3) 0; padding-bottom: var(--space-2); } .panel-tabs a, .panel-tabs span { display: inline-flex; min-height: var(--control-h); align-items: center; border: 1px solid transparent; border-radius: var(--radius-1); padding: var(--space-2) var(--space-3); color: var(--text); font-weight: 600; } .panel-tabs a:hover, .panel-tabs a:focus { border-color: var(--border); background: var(--surface-muted); text-decoration: none; } .panel-tabs__active { border-color: transparent !important; background: var(--row-active); color: var(--link-strong) !important; } /* ── Toolbar, filters, pagination ──────────────────────────────────────── */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-2); background: var(--surface); box-shadow: var(--shadow); margin: var(--space-3) 0; padding: var(--space-2); } .toolbar__spacer { flex: 1 1 auto; } .filter-panel { border: 1px solid var(--border); border-radius: var(--radius-2); background: var(--surface); box-shadow: var(--shadow); margin: var(--space-3) 0; padding: var(--space-3); } .filter-panel summary { display: list-item; min-height: var(--control-h-sm); cursor: pointer; color: var(--muted); font-weight: 700; } .filter-panel summary:hover, .filter-panel[open] summary { color: var(--text); } .filter-panel__fields { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-3); } .filter-panel__field { display: grid; gap: var(--space-1); } .filter-panel__field label, .form-label-cell, .settings-label-cell { color: var(--muted); font-size: var(--text-sm); font-weight: 700; } /* Required marker. aria-hidden in _form-field.twig — `required`/`aria-required` carry the semantics, so this is purely the sighted cue. */ .mark { color: var(--danger); } .pagination { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .pagination a, .pagination span, .currentitem { display: inline-flex; min-height: var(--control-h-sm); align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-1); background: var(--surface); padding: var(--space-1) var(--space-2); } .pagination .currentitem, .currentitem { border-color: transparent; background: var(--row-active); color: var(--link-strong); font-weight: 700; } .pagination__status { color: var(--muted); } /* ── Tables ─────────────────────────────────────────────────────────────── `.table-scroll` wraps a data table so narrow viewports scroll the table instead of the page — and the keeps its ARIA table semantics (setting display:block on the table itself would destroy them). */ .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .legacy-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .rowtable2, .rowtable3 { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-2); background: var(--surface); box-shadow: var(--shadow); } .rowhdr1, .rowhdr2 { border: 1px solid var(--border); background: var(--surface-muted); color: var(--text); font-weight: 700; } a.rowhdr2, a.bar2 { color: var(--text); font-weight: 700; } .rowone { background: var(--surface); } .rowtwo { background: var(--row-alt); } .rowone td, .rowtwo td, .rowone th, .rowtwo th { border: 1px solid var(--row-border); } tr.igt_row_hover:hover, .igt-row-hover-js, .igt-row-selected { background: var(--row-active) !important; } .empty-table-cell { padding: var(--space-5); text-align: center; } .center { text-align: center; } .cell-text { text-align: left; } .cell-number { text-align: right; } .narrow-cell { width: 22px; text-align: center; } .nowrap { white-space: nowrap; } .hidden { display: none; } /* Row actions sit on one line, wrapping as a group on narrow screens. */ .row-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; } /* ── Stacked list tables (mobile-first) ──────────────────────────────────── The phone is the base: a `.stackable` list table renders one card per row, each cell a "Heading: value" line (heading = shared.js `data-label`, drawn via ::before). shared.js pins role="table"/row/cell before adding `.stackable--ready`; without JS, the ordinary table remains horizontally scrollable with native semantics. Sort and select-all header controls stay visible above the cards. Desktop table layout returns at min-width: 48em. */ .stackable.stackable--ready { display: block; border: 0; box-shadow: none; background: transparent; } .stackable--ready thead, .stackable--ready tbody, .stackable--ready tr, .stackable--ready td { display: block; width: auto; } .stackable--ready tr { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--shadow); } .stackable--ready td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border: 0; border-bottom: 1px solid var(--row-border); padding: var(--space-2) 0; } .stackable--ready td::before { content: attr(data-label); font-weight: 700; text-align: left; color: var(--muted); } .stackable--ready td[colspan]::before { content: none; } .stackable--ready td.empty-table-cell { display: block; text-align: center; } /* Header rows become a mobile sort/bulk-action bar. Non-interactive column names stay visually hidden for table semantics; links and select-all remain visible and tabbable. */ .stackable--ready tr:has(> th):has(a, input, button) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .stackable--ready tr:has(> th):not(:has(a, input, button)), .stackable--ready tr:has(> th) > th:not(:has(a, input, button)) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .stackable--ready tr:has(> th) > th:has(a, input, button) { display: flex; position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; clip-path: none; border: 0; background: transparent; } .stackable-select-all { display: flex; align-items: center; gap: var(--space-2); } .stackable--ready tr:has(> th) a { min-width: 44px; } /* ── Status pill ───────────────────────────────────────────────────────── */ .status-pill { display: inline-flex; min-height: 30px; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: 700; line-height: 1.2; white-space: nowrap; } button.status-pill { min-height: var(--control-h); } .status-pill--yes { border-color: var(--success-border); background: var(--success-bg); color: var(--success); } .status-pill--no { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); } .status-pill--partial, .status-pill--undefined { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning); } /* ── Form controls ─────────────────────────────────────────────────────── */ input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea { max-width: 100%; min-height: var(--control-h); border: 1px solid var(--border-strong); border-radius: var(--radius-1); background: var(--surface); color: var(--text); padding: var(--space-2) var(--space-3); } textarea { min-height: 120px; } input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--link); } .igt-editor { width: 100%; min-height: 10rem; resize: vertical; } .calendar-trigger { margin-left: var(--space-2); } .calendar-fields { border-collapse: collapse; } .calendar-fields td { padding-right: var(--space-1); } .form-label-cell, .form-value-cell, .settings-label-cell, .settings-value-cell, .fixed-label-cell, .fixed-value-cell { display: block; width: auto; } .form-control-stack, .settings-control-list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); /* Reset the
defaults so a grouped settings-control-list renders identically whether it is a
(single control) or a
(radio/ checkbox group carrying an accessible ). */ min-width: 0; margin: 0; padding: 0; border: 0; } .form-control-stack__secondary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .settings-control { display: flex; width: 100%; max-width: 100%; flex-wrap: wrap; align-items: center; gap: var(--space-2); overflow-wrap: break-word; } .settings-control--section-end { margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); } .form-value-cell input[type="text"], .form-value-cell select, .form-value-cell textarea, .settings-value-cell input[type="text"], .settings-value-cell select, .settings-value-cell textarea { width: 100%; min-width: 0; } /* Legacy `size=50` / `cols=70` attributes give a control a large intrinsic width, which an auto-layout table propagates into page-level horizontal overflow. A percentage width contributes nothing to intrinsic sizing, so the cell collapses and CSS owns the width. Direct children only: controls inside a .settings-control flex row keep natural widths. */ td > input[type="text"], td > input[type="password"], td > input[type="email"], td > input[type="number"], td > select, td > textarea { width: 100%; min-width: 0; } .field-hint { color: var(--muted); font-size: var(--text-sm); } .signin { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .signin1, .signin2 { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-2); background: var(--surface); box-shadow: var(--shadow); padding: var(--space-4); } .signin-table { width: 100%; border-collapse: separate; border-spacing: var(--space-1); } .signin-field { margin: var(--space-2) 0; } /* Same story as the table cells above: a legacy `size=20` decides the field width and leaves it stranded at ~40% of a phone-width card. CSS owns the width. */ .signin1 input[type="text"], .signin1 input[type="password"] { width: 100%; } .stacked-line { display: block; } /* ── Alerts ───────────────────────────────────────────────────────────── */ .alert, #errors, #notifications, .bar-info, .bar-error { border: 1px solid var(--info-border); border-radius: var(--radius-2); margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); } .alert__list { margin: 0; padding-left: var(--space-4); } .alert--error, #errors, .bar-error { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); } .alert--notice, #notifications, .bar-info { border-color: var(--info-border); background: var(--info-bg); color: var(--info); } .error { color: var(--danger); font-weight: 700; } .notification { color: var(--link); } .summary-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); } .summary-list > div { border: 1px solid var(--border); border-radius: var(--radius-1); background: var(--surface); padding: var(--space-3); } .summary-list dt { color: var(--muted); font-size: var(--text-sm); } .summary-list dd { margin: var(--space-1) 0 0; font-size: 20px; font-weight: 700; } /* ── Test taking ───────────────────────────────────────────────────────── */ .test-panel { border: 1px solid var(--border); border-radius: var(--radius-2); background: var(--surface); box-shadow: var(--shadow); margin: var(--space-3) 0; overflow: hidden; } .test-panel__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; border-bottom: 1px solid var(--border); background: var(--surface-muted); padding: var(--space-3); color: var(--text); font-weight: 700; } /* Meta items never wrap: a shattered countdown is unreadable mid-exam. */ .test-panel__timer, .test-panel__counter { white-space: nowrap; } .test-panel__name { min-width: 0; flex: 1 1 auto; margin: 0; font-size: inherit; font-weight: inherit; overflow-wrap: break-word; } .test-panel__body { padding: var(--space-3); } .test-panel__review { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; border-top: 1px solid var(--border); background: var(--row-active); padding: var(--space-3); } .test-panel__actions { border-top: 1px solid var(--border); background: var(--row-alt); padding: var(--space-3); } /* Actions row: primary group left, destructive escape right on wide screens. No cell widths — nothing can squeeze a label. */ .test-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .test-actions__primary { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .test-actions__secondary { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .question-block, .rationale-block { margin: 0 0 var(--space-3); } .question { font-size: var(--text-md); } .rationale { border-left: 3px solid var(--info-border); background: var(--info-bg); padding: var(--space-2) var(--space-3); color: var(--info); } .answer-group { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; border: 0; margin: 0; padding: 0; } /* The leading slot sizes to its content, so a radio and a "Not selected" status pill can both live there without a width assumption. */ .answer-option { display: flex; gap: var(--space-3); align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-1); background: var(--surface); padding: var(--space-3); } .answer-option__control { flex: 0 0 auto; display: flex; align-items: center; min-height: 24px; } .answer-option__body { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; } .answer-option__body label { display: block; cursor: pointer; } .answer-option__feedback { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); } .answer-limit-feedback { color: var(--danger); font-weight: 700; } .question-list { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: 0; list-style: none; } .question-list__item { display: flex; gap: var(--space-3); align-items: flex-start; } .question-list__number { flex: 0 0 auto; font-weight: 700; } .question-list__body { min-width: 0; flex: 1 1 auto; } .question-list__review { margin-top: var(--space-2); } .question-edit-answer, .question-edit-answer__editor { width: 100%; } .question-edit-answer__meta { vertical-align: middle; } .p-test-timer { font-weight: 700; } .p-test-timer--red { color: var(--danger); } .question-index { display: flex; flex-wrap: wrap; gap: var(--space-1); } .question-index__item { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-1); padding: var(--space-1); font-size: var(--text-xs); } .question-index__item--current { border-color: var(--text); background: var(--text); color: var(--inverse); font-weight: 700; } .question-index__item--answered { background: var(--surface-muted); } /* ── Widgets ──────────────────────────────────────────────────────────── */ .stat-gauge { display: inline-block; width: 120px; height: 10px; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--surface-muted); overflow: hidden; vertical-align: middle; } .stat-gauge--wide { width: 300px; } .stat-gauge__bar { display: block; width: var(--stat-gauge-value, 0%); height: 100%; } .stat-gauge__bar--blue { background: var(--link); } .stat-gauge__bar--green { background: var(--success); } .stat-gauge__bar--gray { background: var(--muted); } .stat-gauge__bar--red { background: var(--danger); } .stat-gauge__bar--yellow { background: var(--warning); } .stat-metric-cell { text-align: right; } .test-list__status, .test-list__action { text-align: center; } .scorm-player { width: 100%; max-width: 1024px; margin: 0 auto; } .scorm-player__frame { width: 100%; height: 600px; border: 1px solid var(--border-strong); border-radius: var(--radius-1); } .scorm-player__nav { margin-top: var(--space-3); } .scorm-player__completion { display: none; margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-1); text-align: center; } .scorm-completion--done { border: 1px solid var(--success-border); background: var(--success-bg); } .scorm-import { max-width: 600px; margin: var(--space-5) auto; } .scorm-import__hint { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-sm); } .confirm-panel { width: 100%; height: 100%; } .confirm-panel__body { height: 100%; padding: var(--space-5) 0; text-align: center; vertical-align: middle; } .result-detail-table { width: 100%; border-collapse: collapse; } .auto-post-panel { width: min(100% - var(--space-5), 520px); margin: 15vh auto 0; border: 1px solid var(--border); border-radius: var(--radius-2); background: var(--surface); padding: var(--space-4); text-align: center; } .email-template-editor-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: start; } .email-template-editor-grid textarea, .email-template-editor-grid input[type="text"] { width: 100%; } .print-page { background: var(--surface); } .text-success { color: var(--success); } .money-amount--ok { color: var(--success); } .money-amount--low, .text-danger { color: var(--danger); } .gray { color: var(--muted); } .note-text { font-size: var(--text-sm); } .is-system-record { font-style: italic; } .igt_hand { cursor: pointer; } .igt-hidden { display: none !important; } .toggle-section--hidden { display: none; } .igt-spacer { display: block; height: 7px; } .top_section { color: var(--text); font-size: var(--text-md); font-weight: 700; } nobr { white-space: nowrap; } /* ── Desktop enhancements ──────────────────────────────────────────────── */ @media (min-width: 48em) { :root { --control-h: 40px; } /* Restore the desktop table layout for the mobile-first stacked list tables. Selectors mirror the base ones so equal specificity + later source order wins. */ .stackable.stackable--ready { display: table; border: 1px solid var(--border); border-radius: var(--radius-2); background: var(--surface); box-shadow: var(--shadow); } .stackable--ready tr:has(> th), .stackable--ready tr:has(> th):has(a, input, button), .stackable--ready tr:has(> th):not(:has(a, input, button)) { position: static; display: table-row; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } .stackable--ready tr:has(> th) > th, .stackable--ready tr:has(> th) > th:has(a, input, button), .stackable--ready tr:has(> th) > th:not(:has(a, input, button)) { position: static; display: table-cell; width: auto; height: auto; margin: 0; padding: var(--space-2) var(--space-3); overflow: visible; clip: auto; clip-path: none; white-space: normal; border: 1px solid var(--border); background: var(--surface-muted); } .stackable--ready thead { display: table-header-group; } .stackable--ready tbody { display: table-row-group; } .stackable--ready tr { display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; } .stackable--ready td { display: table-cell; border: 1px solid var(--row-border); padding: var(--space-2) var(--space-3); } .stackable--ready td::before { content: none; } .nav-bar__toggle { display: none; } .nav-bar__list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; } .nav-bar__item--end { margin-left: auto; } .filter-panel__fields { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .signin { grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr); gap: var(--space-5); align-items: start; } .email-template-editor-grid { grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); } .form-actions > * { flex: 0 0 auto; } .form-label-cell, .settings-label-cell { display: table-cell; width: 25%; } .form-value-cell, .settings-value-cell { display: table-cell; width: 75%; } .fixed-label-cell { display: table-cell; width: 20%; } .fixed-value-cell { display: table-cell; width: 80%; } /* Destructive escape hatch sits opposite the primary actions. */ .test-actions__secondary { margin-left: auto; } .stat-label-cell { width: 20%; } .stat-gauge-cell, .stat-subject-cell { width: 60%; } .stat-metric-cell { width: 10%; } .stat-wide-heading { width: 80%; } .test-list__details { width: 60%; } .test-list__status, .test-list__action { width: 20%; } .signin-table .signin1 { width: 35%; } }