/* ========================================================================== 9ThirtyOne — design system Theming is driven by two attributes on : data-theme : light | dark (resolved from the "system" setting) data-palette : default | deuteranopia | protanopia | tritanopia | mono Plus data-contrast="high" and data-textsize="sm|md|lg". ========================================================================== */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; margin: 0; } img, svg { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } :where(a) { color: var(--accent); } /* ---------- tokens ---------- */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --step--1: 0.8125rem; --step-0: 0.9375rem; --step-1: 1.0625rem; --step-2: 1.375rem; --step-3: 1.75rem; --step-4: 2.25rem; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08); --shadow-2: 0 4px 12px rgb(0 0 0 / 0.10), 0 2px 4px rgb(0 0 0 / 0.06); --shadow-3: 0 18px 48px rgb(0 0 0 / 0.18); --header-h: 3.5rem; --content-max: 68rem; --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- light ---------- */ [data-theme="light"] { --bg: #f4f6f9; --bg-elevated: #ffffff; --bg-sunken: #e9edf3; --surface: #ffffff; --surface-hover: #f2f5f9; --border: #d8dee8; --border-strong: #b6c0cf; --text: #14181f; --text-muted: #5a6572; --text-faint: #626b78; /* AA on every light surface: 5.4:1 on white, 5.0:1 on the page, 4.6:1 on the elevated tint */ --text-on-accent:#ffffff; --accent: #1c4f8b; --accent-hover: #163f70; --accent-soft: #e4edf9; --accent-border: #a8c4e6; --ok: #1c6b3f; --ok-soft: #e2f2e8; --warn: #8a5a05; --warn-soft: #fbf0da; --danger: #a02724; --danger-soft: #fbe6e5; --info: #1c4f8b; --info-soft: #e4edf9; --focus: #2f7fd6; color-scheme: light; } /* ---------- dark ---------- */ [data-theme="dark"] { --bg: #0d1117; --bg-elevated: #161b22; --bg-sunken: #090c11; --surface: #161b22; --surface-hover: #1e252f; --border: #2a3038; --border-strong: #3d4650; --text: #e8edf4; --text-muted: #9aa6b4; --text-faint: #808b99; /* 4.9:1 on the dark ground; #6d7885 was 3.8:1 */ /* Dark text on the accent, not white. The dark theme's accent is a bright blue so that it still reads as a link and an active tab against a dark ground — and white on that blue is only 3.2:1. Flipping the text instead of dulling the accent keeps both jobs legible: 5.7:1 here, and the accent stays bright enough to use as text elsewhere. */ --text-on-accent:#0c1219; --accent: #4d94e0; --accent-hover: #6aa8e8; --accent-soft: #16283d; --accent-border: #2c4d73; --ok: #4cc07d; --ok-soft: #10291b; --warn: #d9a441; --warn-soft: #2c2210; --danger: #e5706c; --danger-soft: #331716; --info: #4d94e0; --info-soft: #16283d; --focus: #6aa8e8; color-scheme: dark; } /* ---------- color-vision palettes ---------- Status hues are remapped to pairs that stay separable. Every status in the markup also carries an icon + text label, so hue is never the only cue. */ [data-palette="deuteranopia"], [data-palette="protanopia"] { --ok: #0072b2; --warn: #e69f00; --danger: #cc3311; --accent: #0072b2; --accent-hover: #005b8f; } [data-palette="deuteranopia"][data-theme="dark"], [data-palette="protanopia"][data-theme="dark"] { --ok: #56b4e9; --warn: #f0c05a; --danger: #ff8a75; --accent: #56b4e9; --accent-hover: #7cc6ef; } [data-palette="tritanopia"] { --ok: #009e73; --warn: #cc79a7; --danger: #d55e00; --accent: #b3446c; --accent-hover: #8e3455; } [data-palette="tritanopia"][data-theme="dark"] { --ok: #3fc9a0; --warn: #e79bc0; --danger: #ef8043; --accent: #e79bc0; --accent-hover: #f0b4d1; } [data-palette="mono"] { --ok: var(--text); --warn: var(--text); --danger: var(--text); --accent: var(--text); --accent-hover: var(--text-muted); --ok-soft: var(--bg-sunken); --warn-soft: var(--bg-sunken); --danger-soft: var(--bg-sunken); --accent-soft: var(--bg-sunken); --accent-border: var(--border-strong); } [data-contrast="high"] { --border: var(--text-muted); --border-strong: var(--text); --text-muted: var(--text); --shadow-1: 0 0 0 1px var(--border-strong); --shadow-2: 0 0 0 1px var(--border-strong); } [data-textsize="sm"] { font-size: 93.75%; } [data-textsize="md"] { font-size: 100%; } [data-textsize="lg"] { font-size: 112.5%; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- base ---------- */ body { font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.55; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* On navigation the router moves focus to the page heading so screen readers announce the new view. The heading is not tab-reachable, so drawing a ring around it only adds visual noise. */ h1[tabindex="-1"]:focus { outline: none; } .skip-link { position: absolute; left: var(--sp-3); top: -100px; z-index: 100; background: var(--accent); color: var(--text-on-accent); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); } .skip-link:focus { top: var(--sp-3); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* ---------- app frame ---------- */ .app { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; } .appbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); background: var(--bg-elevated); border-bottom: 1px solid var(--border); } .appbar__title { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar__sub { font-size: var(--step--1); color: var(--text-muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar__spacer { flex: 1; } .appbar__brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .appbar__mark { width: 2rem; height: 2rem; flex: none; border-radius: var(--radius-sm); background: var(--accent); color: var(--text-on-accent); display: grid; place-items: center; font-weight: 700; font-size: var(--step--1); letter-spacing: -0.02em; } .main { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-7); /* `.app` is a grid, so this is a grid item, and grid items default to `min-width: auto` — they refuse to shrink below their min-content width. One `white-space: nowrap` tab bar inside is then enough to push the whole page wider than a phone, which is exactly what happened: 390px viewport, 570px page, every screen with tabs scrolling sideways. */ min-width: 0; } .appfoot { padding: var(--sp-4); padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); text-align: center; font-size: var(--step--1); color: var(--text-faint); border-top: 1px solid var(--border); background: var(--bg-elevated); } /* ---------- typography ---------- */ .page-head { margin-bottom: var(--sp-5); } .page-title { font-size: var(--step-3); font-weight: 680; letter-spacing: -0.02em; } .page-sub { color: var(--text-muted); margin-top: var(--sp-1); } .section-title { font-size: var(--step-1); font-weight: 640; letter-spacing: -0.01em; margin-bottom: var(--sp-3); } .eyebrow { font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .mono { font-family: var(--font-mono); font-size: 0.9em; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nowrap { white-space: nowrap; } /* ---------- layout helpers ---------- */ .stack > * + * { margin-top: var(--sp-4); } .stack-sm > * + * { margin-top: var(--sp-2); } .stack-lg > * + * { margin-top: var(--sp-6); } .row { display: flex; align-items: center; gap: var(--sp-3); } .row--wrap { flex-wrap: wrap; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } .grid { display: grid; gap: var(--sp-4); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .spacer { flex: 1; } /* ---------- cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-1); } /* ---------- big role buttons (home) ---------- */ .role-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .role-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); text-align: left; width: 100%; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition); } .role-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent-border); } .role-card:active { transform: translateY(0); } .role-card__icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); } .role-card__icon svg { width: 1.5rem; height: 1.5rem; } .role-card__title { font-size: var(--step-2); font-weight: 660; letter-spacing: -0.02em; } .role-card__desc { color: var(--text-muted); font-size: var(--step--1); } .role-card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: var(--sp-4) var(--sp-5); } .role-card--wide .role-card__title { font-size: var(--step-1); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.55rem 0.95rem; min-height: 2.5rem; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: var(--step-0); font-weight: 550; white-space: nowrap; /* Anchors styled as buttons inherit the global link underline otherwise. */ text-decoration: none; transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition); } .btn:hover:not(:disabled) { background: var(--surface-hover); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn svg { width: 1.05em; height: 1.05em; flex: none; } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } .btn--ghost { background: transparent; border-color: transparent; } .btn--ghost:hover:not(:disabled) { background: var(--surface-hover); } .btn--danger { color: var(--danger); border-color: var(--danger); background: transparent; } .btn--danger:hover:not(:disabled) { background: var(--danger-soft); } .btn--lg { min-height: 3rem; padding: 0.75rem 1.35rem; font-size: var(--step-1); } .btn--sm { min-height: 2rem; padding: 0.3rem 0.6rem; font-size: var(--step--1); } .btn--block { width: 100%; } .btn--icon { padding: 0; width: 2.5rem; min-height: 2.5rem; } /* ---------- forms ---------- */ .field { display: block; } .field + .field { margin-top: var(--sp-4); } .field__label { display: block; font-weight: 570; font-size: var(--step--1); margin-bottom: var(--sp-2); } .field__hint { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--sp-2); } .field__error { font-size: var(--step--1); color: var(--danger); margin-top: var(--sp-2); } .field__req { color: var(--danger); margin-left: 2px; } .input, .select, .textarea { width: 100%; padding: 0.55rem 0.7rem; min-height: 2.5rem; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); transition: border-color var(--transition), box-shadow var(--transition); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); } .textarea { min-height: 6rem; resize: vertical; line-height: 1.5; } .select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.7rem) 55%; background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.2rem; } .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); } .check { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; /* The label is the tap target, not the 17px box it contains. A single-line row came out a shade under the WCAG 2.5.8 minimum of 24px. */ min-height: 1.5rem; } .check input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--accent); } .check__text { font-size: var(--step-0); } .check__desc { font-size: var(--step--1); color: var(--text-muted); } /* segmented control — theme / palette / text size */ .segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius); flex-wrap: wrap; } .segmented__opt { position: relative; } .segmented__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .segmented__opt span { display: block; padding: 0.35rem 0.75rem; border-radius: var(--radius-sm); font-size: var(--step--1); font-weight: 550; color: var(--text-muted); transition: background var(--transition), color var(--transition); } .segmented__opt input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); } .segmented__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; } /* filter bar */ .filters { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; } .filters .field + .field { margin-top: 0; } /* ---------- tabs ---------- */ .tabs { display: flex; gap: var(--sp-1); overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: var(--sp-3) var(--sp-4); font-weight: 550; font-size: var(--step-0); color: var(--text-muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--transition), border-color var(--transition); } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); } /* ---------- list rows ---------- */ .list { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } .list__item { display: flex; align-items: center; gap: var(--sp-4); width: 100%; text-align: left; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); transition: background var(--transition); } .list__item:last-child { border-bottom: 0; } button.list__item:hover { background: var(--surface-hover); } .list__main { min-width: 0; flex: 1; } .list__title { font-weight: 570; } .list__meta { font-size: var(--step--1); color: var(--text-muted); margin-top: 2px; } .list__aside { flex: none; display: flex; align-items: center; gap: var(--sp-2); } .list__chev { color: var(--text-faint); width: 1.1rem; height: 1.1rem; flex: none; } /* On a phone the aside never yields — `flex: none` is what keeps the badges readable on a desktop — so the title is squeezed into whatever is left, which is about a hundred pixels. "Cadre climate check — Fall term" then wraps over five lines beside two badges sitting in open space. Below this width the row stacks and the title gets the full measure. */ @media (max-width: 34rem) { .list__item { flex-direction: column; align-items: stretch; gap: var(--sp-2); } .list__aside { width: 100%; } .list__chev { margin-left: auto; } } /* ---------- badges / pills ---------- */ .badge { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); font-size: var(--step--1); font-weight: 570; line-height: 1.5; border: 1px solid transparent; } .badge svg { width: 0.85em; height: 0.85em; } .badge--ok { background: var(--ok-soft); color: var(--ok); border-color: currentColor; } .badge--warn { background: var(--warn-soft); color: var(--warn); border-color: currentColor; } .badge--danger { background: var(--danger-soft); color: var(--danger); border-color: currentColor; } .badge--info { background: var(--info-soft); color: var(--info); border-color: currentColor; } .badge--neutral { background: var(--bg-sunken); color: var(--text-muted); border-color: var(--border); } .chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); background: var(--bg-sunken); border: 1px solid var(--border); font-size: var(--step--1); color: var(--text-muted); } /* ---------- stats ---------- */ .stat { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .stat__label { font-size: var(--step--1); color: var(--text-muted); font-weight: 550; } .stat__value { font-size: var(--step-3); font-weight: 680; letter-spacing: -0.02em; margin-top: var(--sp-1); font-variant-numeric: tabular-nums; } .stat__note { font-size: var(--step--1); color: var(--text-faint); } .meter { height: 0.5rem; border-radius: var(--radius-pill); background: var(--bg-sunken); overflow: hidden; border: 1px solid var(--border); } .meter__fill { height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--transition); } /* horizontal bar rows for report distributions */ .bars { display: grid; gap: var(--sp-2); } .bar-row { display: grid; grid-template-columns: minmax(5rem, 11rem) 1fr auto; gap: var(--sp-3); align-items: center; font-size: var(--step--1); } .bar-row__track { height: 1.1rem; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .bar-row__fill { height: 100%; background: var(--accent); } .bar-row__val { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: right; } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } table.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); } .table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border); } .table th { font-weight: 600; color: var(--text-muted); background: var(--bg-sunken); white-space: nowrap; } .table tbody tr:last-child td { border-bottom: 0; } .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- empty / notice ---------- */ .empty { text-align: center; padding: var(--sp-7) var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted); background: var(--surface); } .empty__icon { width: 2.5rem; height: 2.5rem; margin: 0 auto var(--sp-3); color: var(--text-faint); } .empty__title { font-weight: 600; color: var(--text); margin-bottom: var(--sp-1); } .notice { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-sunken); font-size: var(--step--1); } .notice svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.1rem; } .notice--info { background: var(--info-soft); border-color: var(--accent-border); } .notice--warn { background: var(--warn-soft); border-color: var(--warn); } .notice--danger { background: var(--danger-soft); border-color: var(--danger); } .notice--ok { background: var(--ok-soft); border-color: var(--ok); } .notice__title { font-weight: 620; display: block; margin-bottom: 2px; } /* ---------- setup wizard ---------- */ .wizard { max-width: 42rem; margin: 0 auto; } .steps { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); } .step { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--step--1); color: var(--text-faint); } .step__dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1px solid var(--border-strong); font-size: var(--step--1); font-weight: 600; } .step[data-state="active"] { color: var(--text); font-weight: 600; } .step[data-state="active"] .step__dot { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .step[data-state="done"] .step__dot { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); } .step__bar { flex: 1; height: 1px; background: var(--border); min-width: var(--sp-2); } .step__label { display: none; } @media (min-width: 40rem) { .step__label { display: inline; } } .choice-list { display: grid; gap: var(--sp-3); } .choice { position: relative; display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color var(--transition), background var(--transition); } .choice:hover { border-color: var(--accent-border); background: var(--surface-hover); } .choice input { position: absolute; opacity: 0; } .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; } .choice__mark { width: 1.15rem; height: 1.15rem; border-radius: 50%; flex: none; margin-top: 0.2rem; border: 2px solid var(--border-strong); display: grid; place-items: center; } .choice:has(input:checked) .choice__mark { border-color: var(--accent); } .choice:has(input:checked) .choice__mark::after { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); } /* An with only a viewBox falls back to the replaced-element default of 300x150, so every context that holds one has to state a size. */ .choice .row > svg { width: 1.15rem; height: 1.15rem; flex: none; } .choice__title { font-weight: 600; } .choice__desc { font-size: var(--step--1); color: var(--text-muted); margin-top: 2px; } .choice:has(input:disabled) { opacity: 0.55; cursor: not-allowed; } /* folder tree preview */ .tree { font-family: var(--font-mono); font-size: var(--step--1); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); white-space: pre; overflow-x: auto; color: var(--text-muted); line-height: 1.7; } /* ---------- modal ---------- */ dialog.modal { padding: 0; border: 0; background: transparent; max-width: min(38rem, calc(100vw - 2rem)); width: 100%; color: var(--text); } dialog.modal::backdrop { background: rgb(0 0 0 / 0.5); } .modal__panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); max-height: min(85vh, 48rem); display: flex; flex-direction: column; } .modal__head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--sp-3); } .modal__title { font-size: var(--step-1); font-weight: 620; } .modal__body { padding: var(--sp-5); overflow-y: auto; } .modal__foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; } /* ---------- toast ---------- */ .toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); display: grid; gap: var(--sp-2); width: min(28rem, calc(100vw - 2rem)); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); box-shadow: var(--shadow-2); background: var(--surface); border: 1px solid var(--border-strong); font-size: var(--step--1); pointer-events: auto; animation: toast-in 180ms cubic-bezier(0.2, 0.8, 0.3, 1); } .toast svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.1rem; } .toast--ok { border-color: var(--ok); } .toast--ok svg { color: var(--ok); } .toast--danger { border-color: var(--danger); } .toast--danger svg { color: var(--danger); } .toast--warn { border-color: var(--warn); } .toast--warn svg { color: var(--warn); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } /* ---------- connection indicator ---------- */ .conn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg-sunken); font-size: var(--step--1); color: var(--text-muted); } .conn__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-faint); flex: none; } .conn[data-status="ready"] .conn__dot { background: var(--ok); } .conn[data-status="offline"] .conn__dot { background: var(--warn); } .conn[data-status="error"] .conn__dot { background: var(--danger); } .conn__label { display: none; } @media (min-width: 34rem) { .conn__label { display: inline; } } /* ---------- loading ---------- */ .spinner { width: 1.1rem; height: 1.1rem; border-radius: 50%; flex: none; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin 700ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-muted); padding: var(--sp-6); justify-content: center; } /* ---------- form renderer (feedback forms) ---------- */ .formset { border: 0; padding: 0; margin: 0; } .formset + .formset { margin-top: var(--sp-6); } .formset__legend { font-size: var(--step-1); font-weight: 620; padding: 0; margin-bottom: var(--sp-1); width: 100%; } .formset__desc { color: var(--text-muted); font-size: var(--step--1); margin-bottom: var(--sp-4); } .q { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); } .q:last-child { border-bottom: 0; } .q__label { font-weight: 570; display: block; margin-bottom: var(--sp-1); } .q__help { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--sp-3); } .scale { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .scale__opt { position: relative; flex: 1 1 3rem; min-width: 2.75rem; } .scale__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .scale__opt span { display: grid; place-items: center; min-height: 2.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius); font-weight: 600; background: var(--surface); transition: background var(--transition), color var(--transition), border-color var(--transition); } .scale__opt input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .scale__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; } .scale__ends { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--text-faint); margin-top: var(--sp-2); } /* Word scale: students choose a word, never a number. Grid rather than flex so every point is exactly one equal column — no rating looks more prominent than another, and the row cannot wrap mid-scale into what would read as two separate groups. --scale-count is set by the renderer. */ .scale--words { display: grid; grid-template-columns: repeat(var(--scale-count, 5), minmax(0, 1fr)); gap: var(--sp-2); } .scale--words .scale__opt span { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: var(--sp-2) var(--sp-1); font-size: var(--step--1); font-weight: 560; line-height: 1.2; text-align: center; hyphens: auto; overflow-wrap: anywhere; } /* Too narrow for one column per point: fall back to even rows, then to a single stack where each option keeps a full-width touch target. */ @media (max-width: 52rem) { .scale--words { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); } .scale--words .scale__opt span { font-size: var(--step-0); } } @media (max-width: 30rem) { .scale--words { grid-template-columns: 1fr; } .scale--words .scale__opt span { min-height: 2.75rem; justify-content: flex-start; padding-left: var(--sp-4); text-align: left; } } /* Read-only preview of the scale inside the form creator. */ .scale-preview { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .scale-preview__opt { display: flex; align-items: center; gap: var(--sp-2); padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--step--1); } .opts { display: grid; gap: var(--sp-2); } .opt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; background: var(--surface); } .opt:hover { background: var(--surface-hover); } .opt input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex: none; } .opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } /* ---------- form creator ---------- */ .qrow { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); background: var(--bg-sunken); } .qrow + .qrow { margin-top: var(--sp-3); } .qrow .field + .field { margin-top: var(--sp-3); } .qrow__num { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; border-radius: var(--radius-sm); background: var(--accent); color: var(--text-on-accent); font-size: var(--step--1); font-weight: 650; } /* student multi-select in the form creator */ .picker { max-height: 20rem; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .picker__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line, var(--border)); cursor: pointer; } .picker__row:last-child { border-bottom: 0; } .picker__row:hover { background: var(--surface-hover); } .picker__row input { accent-color: var(--accent); width: 1rem; height: 1rem; flex: none; } /* ---------- word counter on limited text blocks ---------- */ .wordcount { margin-top: var(--sp-2); font-size: var(--step--1); font-variant-numeric: tabular-nums; color: var(--text-faint); text-align: right; } .wordcount[data-state="near"] { color: var(--warn); } .wordcount[data-state="over"] { color: var(--danger); font-weight: 600; } /* ---------- pending-write pill ---------- */ .queue-pill { cursor: pointer; gap: var(--sp-2); } .queue-pill svg { width: 0.85rem; height: 0.85rem; } .queue-pill:hover { background: var(--surface-hover); } /* ---------- distribution histogram ---------- */ .hist { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-1); align-items: end; min-height: 9rem; } .hist__col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; } .hist__bar-wrap { height: 6.5rem; display: flex; align-items: flex-end; } .hist__bar { width: 100%; min-height: 2px; background: var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; position: relative; transition: height var(--transition); } .hist__bar--empty { background: var(--bg-sunken); border: 1px dashed var(--border); } .hist__count { position: absolute; top: -1.25rem; left: 0; right: 0; text-align: center; font-size: var(--step--1); font-variant-numeric: tabular-nums; color: var(--text-muted); } .hist__label { font-size: 0.6875rem; line-height: 1.2; text-align: center; color: var(--text-muted); overflow-wrap: anywhere; hyphens: auto; } /* Nine anchor words across a phone gives each column about 38px, which turns "Detrimental" into "Detri-mental" and "Unfavourable" into three stacked fragments. The anchors are the point of the scale, so keep the words whole and let the chart scroll — the same move the tab bar already makes. The padding is load-bearing: `.hist__count` sits at `top: -1.25rem`, and a scroll container clips on both axes, so without room above it the counts would vanish the moment this became scrollable. */ @media (max-width: 34rem) { .hist { overflow-x: auto; grid-auto-columns: minmax(4rem, 1fr); padding-top: 1.5rem; } /* Whole words, and enough air that neighbouring anchors do not read as one. */ .hist__label { overflow-wrap: normal; hyphens: manual; padding: 0 0.2rem; } } /* ---------- word cloud ---------- */ .cloud { width: 100%; height: auto; display: block; } .cloud__word { fill: var(--text-muted); transition: fill var(--transition); } .cloud__word--t1 { fill: var(--text); } .cloud__word--t2 { fill: var(--accent); } .cloud__word--t3 { fill: var(--accent); } .cloud__word:hover, .cloud__word:focus-visible { fill: var(--danger); outline: none; } .cloud__word:focus-visible { text-decoration: underline; } /* ---------- quoted feedback ---------- */ .quote { margin: 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--accent-border); background: var(--bg-sunken); border-radius: var(--radius-sm); white-space: pre-wrap; } .quote footer { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--text-faint); } /* A flagged answer is bordered in the danger colour AND labelled with badges, so the state never depends on hue alone. */ .quote--flagged { border-left-color: var(--danger); background: var(--danger-soft); } .quote mark { background: var(--warn); color: #14181f; padding: 0 0.15em; border-radius: 3px; font-weight: 600; } details > summary { cursor: pointer; } /* ---------- misc ---------- */ hr.rule { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; } .link-btn { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; padding: 0; } @media print { .appbar, .appfoot, .tabs, .btn, .toasts, .filters { display: none !important; } body { background: #fff; color: #000; } .card, .table-wrap { box-shadow: none; border-color: #999; break-inside: avoid; } } /* ------------------------------------------------------------------ * * QR join screen * * Built to be pointed at by a room: a laptop on a projector, or a phone held up. * * The code is capped against the viewport height rather than the screen being * pinned to it. Pinning meant subtracting the header, the footer and the * padding by hand, and any of those changing silently pushed the code off the * bottom. Capping needs no arithmetic and cannot overflow. * * It stays black on white in every theme — contrast is a scanning requirement, * not a style choice, so a dark-mode QR code would simply be a broken one. * ------------------------------------------------------------------ */ .qr-screen { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-4); max-width: 60rem; margin: 0 auto; } .qr-screen__head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; width: 100%; } .qr-screen__title h1 { margin: 0; font-size: var(--step-3); line-height: 1.15; letter-spacing: -0.02em; } .qr-screen__title .eyebrow { font-size: var(--step--1); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .qr-screen__code { display: flex; justify-content: center; width: 100%; min-width: 0; } /* The white plate carries the quiet zone, which scanners use to find the code's edges — without it a perfectly valid code often will not read. */ .qr-screen__code svg { width: auto; height: auto; max-width: 100%; max-height: min(62vh, 30rem); background: #ffffff; padding: var(--sp-2); border-radius: var(--radius); box-shadow: var(--shadow-2); } .qr-screen__foot { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; width: 100%; min-width: 0; } .qr-screen__hint { margin: 0; color: var(--text-muted); max-width: 34rem; } .qr-screen__link { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-faint); /* A join link is one long unbroken token; without these it forces the page sideways on a narrow phone. */ overflow-wrap: anywhere; word-break: break-all; max-width: 100%; min-width: 0; background: none; padding: 0; } /* On a short window — a laptop driving a projector — the code is the only thing that matters, so the supporting text gets out of its way. */ @media (max-height: 34rem) { .qr-screen__link, .qr-screen__hint { display: none; } .qr-screen__code svg { max-height: 72vh; } }