/* Showcase features: one stylesheet for many-layouts, student-list and converters. Site tokens only (WS2 navy and orange, vendor/site/tokens.css). No raw colour values, no gradients, no inline styles. Every colour pair used here is listed and checked by scripts/check-contrast.mjs (WS2's ratios: 4.5 text, 3 non-text). */ .sf-page { font-family: var(--font-sans); font-size: var(--fs-0); line-height: var(--lh-body); color: var(--c-text); background: var(--c-bg); max-width: var(--content-max); margin-inline: auto; padding: var(--sp-5) var(--gutter) var(--sp-8); } .sf-page *, .sf-page *::before, .sf-page *::after, .sf-layouts *, .sf-roster *, .sf-converters *, .sf-conv * { box-sizing: border-box; } .sf-page h1 { font-size: var(--fs-4); line-height: var(--lh-tight); margin: 0 0 var(--sp-3); } .sf-page h2 { font-size: var(--fs-2); line-height: var(--lh-snug); margin: var(--sp-6) 0 var(--sp-3); } .sf-page h3 { font-size: var(--fs-1); line-height: var(--lh-snug); margin: 0 0 var(--sp-2); } .sf-lead { font-size: var(--fs-1); color: var(--c-text-muted); max-width: var(--measure); margin: 0 0 var(--sp-4); } .sf-hint, .sf-note { color: var(--c-text-muted); font-size: var(--fs-n1); margin: 0; } .sf-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .sf-page [hidden], .sf-layouts [hidden], .sf-roster [hidden], .sf-conv [hidden] { display: none; } /* author display rules (flex, grid) would otherwise beat the UA [hidden] rule */ .sf-skip { position: absolute; left: var(--sp-3); top: -4rem; background: var(--c-accent); color: var(--c-on-accent); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); } .sf-skip:focus { top: var(--sp-3); } .sf-notice { background: var(--c-warn-bg); color: var(--c-text); border: 1px solid var(--c-warn); border-radius: var(--r-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-n1); margin: 0 0 var(--sp-4); } .sf-banner { background: var(--c-warn-bg); color: var(--c-text); border: 2px solid var(--c-warn); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-5); } .sf-banner strong { color: var(--c-warn); } /* focus: one ring everywhere */ .sf-btn:focus-visible, .sf-tab:focus-visible, .sf-filter:focus-visible, .sf-input:focus-visible, .sf-select:focus-visible, .sf-opt__input:focus-visible + .sf-opt__id, .sf-tablewrap:focus-visible, .sf-how summary:focus-visible, .sf-link:focus-visible, .sf-page a:focus-visible, .sf-title:focus-visible, .sf-focus-target:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--c-bg); } .sf-focus-target { outline: none; } /* buttons */ .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 2.75rem; padding: 0 var(--sp-4); border-radius: var(--r-2); border: 2px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text); font: inherit; font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer; transition: background var(--dur-1) var(--ease); } .sf-btn:hover { background: var(--c-surface-2); } .sf-btn--quiet { background: transparent; } .sf-btn--small { padding: 0 var(--sp-3); font-size: var(--fs-n1); } .sf-btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } .sf-btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); } .sf-btn--cta { background: var(--c-cta); border-color: var(--c-cta); color: var(--c-on-cta); } .sf-btn--cta:hover { background: var(--c-cta-hover); border-color: var(--c-cta-hover); } .sf-btn[aria-pressed="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-text); } .sf-btn[aria-disabled="true"] { border-style: dashed; color: var(--c-text-muted); cursor: default; } /* ========== many layouts ========== */ .sf-layouts__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .sf-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); } .sf-tab { flex: 1; min-height: 2.75rem; padding: 0 var(--sp-3); border: 2px solid var(--c-border-strong); border-radius: var(--r-2); background: var(--c-surface); color: var(--c-text); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; } .sf-tab[aria-selected="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); } .sf-shells { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 64rem) { .sf-shells { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } } .sf-layouts[data-mode="tabs"] .sf-shell[data-active="false"] { display: none; } .sf-shell__name { margin: 0 0 var(--sp-2); } .sf-frame { background: var(--c-bg); border: 2px solid var(--c-border-strong); border-radius: var(--r-3); overflow: hidden; } .sf-header, .sf-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-surface); } .sf-header { border-bottom: 1px solid var(--c-border); } /* WS4 (reviewer R-14, WSF1 browser item): in a narrow frame the three header zones overlapped and the timer pill wrapped into a circle. The header now wraps its zones onto further rows instead of squeezing them, and the timer never breaks inside its pill. */ .sf-header { display: flex; flex-wrap: wrap; justify-content: space-between; } .sf-header .sf-zone--center { flex: 1 1 auto; justify-content: center; } .sf-timer { white-space: nowrap; } .sf-footer { border-top: 1px solid var(--c-border); } .sf-zone { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; } .sf-zone--center { justify-content: center; } .sf-zone--right { justify-content: flex-end; } .sf-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border); background: var(--c-surface); } .sf-title, .sf-position { margin: 0; font-weight: var(--fw-semibold); font-size: var(--fs-n1); } .sf-timer { margin: 0; font-family: var(--font-mono); font-weight: var(--fw-semibold); background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); min-width: 6rem; min-height: 1.75rem; text-align: center; font-size: var(--fs-n1); } .sf-timer[data-hidden="true"] { color: var(--c-text-muted); } .sf-body { display: grid; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3); } .sf-body--split { grid-template-columns: minmax(0, 1fr); } @media (min-width: 48rem) { .sf-body--split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } } @media (min-width: 64rem) { .sf-body--split { grid-template-columns: minmax(0, 1fr); } } .sf-stimulus { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2); padding: var(--sp-2) var(--sp-3); } .sf-table, .sf-datatable { width: 100%; border-collapse: collapse; font-size: var(--fs-n1); } .sf-table caption, .sf-datatable caption { text-align: left; font-weight: var(--fw-semibold); padding-bottom: var(--sp-2); color: var(--c-text); } .sf-table th, .sf-table td, .sf-datatable th, .sf-datatable td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border); vertical-align: top; } .sf-table thead th, .sf-datatable thead th { background: var(--c-surface-2); color: var(--c-text); } .sf-question { border: 0; margin: 0; padding: 0; min-width: 0; } .sf-question__legend { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 0; margin-bottom: var(--sp-3); font-size: var(--fs-0); line-height: var(--lh-snug); } .sf-qnum { flex: none; font-weight: var(--fw-bold); } .sf-qnum--badge { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: var(--r-2); background: var(--c-text); color: var(--c-bg); } .sf-opts { display: grid; gap: var(--sp-2); } .sf-opt { position: relative; display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); min-height: 2.75rem; border: 2px solid var(--c-border-strong); border-radius: var(--r-3); background: var(--c-bg); color: var(--c-text); cursor: pointer; } .sf-opt:hover { background: var(--c-surface-2); } .sf-opt:has(.sf-opt__input:checked) { background: var(--c-accent-soft); border-color: var(--c-accent); } .sf-opt__input { position: absolute; opacity: 0; width: 1px; height: 1px; } .sf-opt__id { flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill); border: 2px solid var(--c-border-strong); font-weight: var(--fw-bold); font-size: var(--fs-n1); background: var(--c-bg); color: var(--c-text); } .sf-opt__input:checked + .sf-opt__id { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } .sf-explain { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); background: var(--c-success-bg); color: var(--c-text); border: 1px solid var(--c-success); border-radius: var(--r-2); font-size: var(--fs-n1); } .sf-chips { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); background: var(--c-surface); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } .sf-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-n1); font-weight: var(--fw-semibold); background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border-strong); } .sf-chip[data-on="true"] { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success); } .sf-qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; } .sf-chip-q { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 2rem; height: 2rem; padding: 0 var(--sp-2); border-radius: var(--r-2); background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border-strong); font-size: var(--fs-n1); font-weight: var(--fw-semibold); justify-content: center; } .sf-chip-q.is-current { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); } .sf-chip-q[data-answered="true"] { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success); } .sf-caption { font-size: var(--fs-n1); color: var(--c-text-muted); margin: var(--sp-2) 0 0; } .sf-caption strong { color: var(--c-text); } /* ========== student list ========== */ .sf-tools { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: flex-end; margin-bottom: var(--sp-4); } .sf-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .sf-filter { min-height: 2.75rem; padding: 0 var(--sp-3); border: 2px solid var(--c-border-strong); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-text); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; } .sf-filter[aria-pressed="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); } .sf-field { display: grid; gap: var(--sp-1); font-weight: var(--fw-semibold); } .sf-field--inline { display: flex; align-items: center; gap: var(--sp-2); } .sf-select, .sf-input { min-height: 2.75rem; padding: 0 var(--sp-3); border: 2px solid var(--c-border-strong); border-radius: var(--r-2); background: var(--c-bg); color: var(--c-text); font: inherit; } .sf-input[aria-invalid="true"] { border-color: var(--c-error); } .sf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: 0; list-style: none; } .sf-stat { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-3); padding: var(--sp-3); } .sf-stat__n { display: block; font-size: var(--fs-3); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-text); } .sf-stat__l { color: var(--c-text-muted); font-size: var(--fs-n1); } .sf-tablewrap { position: relative; overflow-x: auto; border: 1px solid var(--c-border-strong); border-radius: var(--r-2); background: var(--c-bg); } .sf-datatable { min-width: 40rem; } .sf-datatable td .sf-btn { min-height: 2.75rem; } .sf-badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); } .sf-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-n1); font-weight: var(--fw-semibold); border: 1px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-text); } .sf-badge--slow { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn); } .sf-badge--attn { background: var(--c-error-bg); color: var(--c-error); border-color: var(--c-error); } .sf-badge--new { background: var(--c-surface-2); color: var(--c-text-muted); } .sf-badge--ok { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success); } .sf-addform { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-3); margin-top: var(--sp-5); } .sf-error { color: var(--c-error); font-size: var(--fs-n1); margin: 0; font-weight: var(--fw-semibold); } .sf-why { margin: var(--sp-3) 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); } .sf-why li { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); background: var(--c-surface); border: 1px solid var(--c-border); } .sf-bar { display: block; min-width: 6rem; height: 0.75rem; background: var(--c-surface-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); overflow: hidden; } .sf-bar__fill { display: block; height: 100%; background: var(--c-accent); width: 0; } .sf-bar[data-w="0"] .sf-bar__fill { width: 0; } .sf-bar[data-w="5"] .sf-bar__fill { width: 5%; } .sf-bar[data-w="10"] .sf-bar__fill { width: 10%; } .sf-bar[data-w="15"] .sf-bar__fill { width: 15%; } .sf-bar[data-w="20"] .sf-bar__fill { width: 20%; } .sf-bar[data-w="25"] .sf-bar__fill { width: 25%; } .sf-bar[data-w="30"] .sf-bar__fill { width: 30%; } .sf-bar[data-w="35"] .sf-bar__fill { width: 35%; } .sf-bar[data-w="40"] .sf-bar__fill { width: 40%; } .sf-bar[data-w="45"] .sf-bar__fill { width: 45%; } .sf-bar[data-w="50"] .sf-bar__fill { width: 50%; } .sf-bar[data-w="55"] .sf-bar__fill { width: 55%; } .sf-bar[data-w="60"] .sf-bar__fill { width: 60%; } .sf-bar[data-w="65"] .sf-bar__fill { width: 65%; } .sf-bar[data-w="70"] .sf-bar__fill { width: 70%; } .sf-bar[data-w="75"] .sf-bar__fill { width: 75%; } .sf-bar[data-w="80"] .sf-bar__fill { width: 80%; } .sf-bar[data-w="85"] .sf-bar__fill { width: 85%; } .sf-bar[data-w="90"] .sf-bar__fill { width: 90%; } .sf-bar[data-w="95"] .sf-bar__fill { width: 95%; } .sf-bar[data-w="100"] .sf-bar__fill { width: 100%; } .sf-attempts { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .sf-link-btn { background: none; border: 0; padding: 0; color: var(--c-accent); font: inherit; font-weight: var(--fw-semibold); text-decoration: underline; cursor: pointer; min-height: 2.75rem; } .sf-how { border: 1px solid var(--c-border-strong); border-radius: var(--r-2); background: var(--c-surface); padding: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0; } .sf-how summary { cursor: pointer; font-weight: var(--fw-semibold); min-height: 2.75rem; display: flex; align-items: center; color: var(--c-text); } .sf-how[open] summary { margin-bottom: var(--sp-2); } .sf-how ul, .sf-how ol { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); } /* ========== converters ========== */ .sf-converters { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 48rem) { .sf-converters { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } .sf-conv { background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-3); padding: var(--sp-5); display: grid; gap: var(--sp-3); } .sf-conv h2 { margin: 0; } .sf-conv__form { display: grid; gap: var(--sp-2); } .sf-conv__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; } .sf-fixed-label { margin: 0; padding: var(--sp-2) var(--sp-3); border: 2px solid var(--c-accent); border-radius: var(--r-2); background: var(--c-accent-soft); color: var(--c-text); font-weight: var(--fw-bold); font-size: var(--fs-n1); } .sf-result { background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4); min-height: 4rem; } .sf-score { display: block; font-size: var(--fs-4); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-text); } .sf-cta { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--c-bg); border: 1px dashed var(--c-border-strong); border-radius: var(--r-2); } .sf-cta p { margin: 0; } @media (prefers-reduced-motion: reduce) { .sf-btn { transition: none; } } @media (forced-colors: active) { .sf-chip[data-on="true"], .sf-badge, .sf-opt:has(.sf-opt__input:checked), .sf-filter[aria-pressed="true"], .sf-btn[aria-pressed="true"], .sf-tab[aria-selected="true"] { border-width: 3px; } } /* WS4: without JavaScript the converter cannot work, so hide the form, the result box and the working (the fixed label, the