@property --p { syntax: ""; inherits: true; initial-value: 0; } /* Logo base styles live in @layer base so shell.css (@layer layout) can show or hide the lockup and the mark. */ @layer base { /* Brand logo (_Logo.cshtml): the original cap mark as plus the name as live text in the app font. Lockup = mark + name in a row; Stacked = white mark over white name (solid-teal sign-in panel); Mark = icon only. Size with --sb-logo-h (mark height); the name scales from it. Light/dark mark follows the theme. Never mirrored. */ .sb-logo { display: inline-flex; flex: none; align-items: center; gap: calc(var(--sb-logo-h, 28px) * 0.36); color: var(--sb-logo); } .sb-logo__img { display: block; inline-size: auto; block-size: max(var(--sb-logo-h, 28px), 24px); } .sb-logo__word { font-weight: 800; font-size: calc(var(--sb-logo-h, 28px) * 0.72); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; color: inherit; } .sb-logo--stacked { flex-direction: column; gap: calc(var(--sb-logo-h, 72px) * 0.22); color: var(--sb-on-accent); } .sb-logo--stacked .sb-logo__img { block-size: var(--sb-logo-h, 72px); } .sb-logo--stacked .sb-logo__word { font-size: calc(var(--sb-logo-h, 72px) * 0.42); } .sb-logo--on-dark { display: none; } :root[data-theme="dark"] .sb-logo--on-light { display: none; } :root[data-theme="dark"] .sb-logo--on-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sb-logo--on-light { display: none; } :root:not([data-theme="light"]) .sb-logo--on-dark { display: block; } } } @layer components { .sb-icon { inline-size: 1.25em; block-size: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } [dir="rtl"] .sb-icon--flip { scale: -1 1; } .sb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sb-space-2); min-block-size: 44px; padding: var(--sb-space-2) var(--sb-space-5); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); background: var(--sb-surface); color: var(--sb-ink); font-weight: 700; font-size: var(--sb-fs-sm); line-height: 1.2; text-align: center; text-wrap: balance; transition: transform var(--sb-dur-fast) var(--sb-ease), box-shadow var(--sb-dur) var(--sb-ease), background-color var(--sb-dur-fast) var(--sb-ease); } .sb-btn:hover { background: var(--sb-hover); } .sb-btn:active { transform: scale(0.97); } .sb-btn:disabled, .sb-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } .sb-btn--primary { --sb-spinner: var(--sb-on-accent); background: var(--sb-teal-strong); color: var(--sb-on-accent); border-color: transparent; } .sb-btn--primary:hover { background: var(--sb-teal-dark); } .sb-btn--secondary { background: var(--sb-teal-surface); color: var(--sb-teal-ink); border-color: transparent; } .sb-btn--secondary:hover { background: var(--sb-active-surface); } .sb-btn--ghost { background: transparent; border-color: transparent; color: var(--sb-ink-2); } .sb-btn--danger { --sb-spinner: var(--sb-on-accent); background: var(--sb-error-strong); color: var(--sb-on-accent); border-color: transparent; } .sb-btn--danger:hover { background: var(--sb-error-strong); filter: brightness(1.06); } .sb-btn--icon { inline-size: 44px; padding: 0; } .sb-btn--sm { min-block-size: 44px; padding: var(--sb-space-1) var(--sb-space-3); } .sb-btn--lg { min-block-size: 52px; padding-inline: var(--sb-space-6); font-size: var(--sb-fs-md); border-radius: var(--sb-radius-lg); } .sb-btn--block { inline-size: 100%; } .sb-btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; } .sb-btn[aria-busy="true"]::after { content: ""; position: absolute; inline-size: 18px; block-size: 18px; border-radius: 50%; border: 2px solid var(--sb-spinner, var(--sb-ink-2)); border-block-start-color: transparent; animation: sb-spin 0.8s linear infinite; } @keyframes sb-spin { to { rotate: 1turn; } } .sb-card { container-type: inline-size; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); padding: var(--sb-space-4); box-shadow: var(--sb-shadow-sm); } /* Shrink-to-fit cards (flex/grid items sized by content) must not use size containment. */ .sb-card--intrinsic { container-type: normal; } .sb-card--pad-lg { padding: var(--sb-space-6); border-radius: var(--sb-radius-xl); } /* Hero (next up, rank): a solid card with the teal start-side accent bar; ink text, the action is a primary button. */ .sb-hero { border: 1px solid var(--sb-border); border-inline-start: var(--sb-accent-bar); border-radius: var(--sb-radius-xl); padding: var(--sb-space-6); color: var(--sb-ink); background: var(--sb-surface); box-shadow: var(--sb-shadow-sm); } .sb-hero__eyebrow { font-size: var(--sb-fs-sm); font-weight: 700; color: var(--sb-teal-ink); } .sb-hero__title { font-size: var(--sb-fs-2xl); font-weight: 800; letter-spacing: -0.02em; color: var(--sb-teal-ink); } .sb-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sb-space-4); } .sb-page-header__subtitle { color: var(--sb-ink-2); margin-block-start: var(--sb-space-1); } .sb-section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-3); margin-block-end: var(--sb-space-3); } .sb-section-header a { color: var(--sb-teal-ink); font-weight: 700; font-size: var(--sb-fs-sm); } .sb-chip { display: inline-flex; align-items: center; gap: var(--sb-space-1); min-block-size: 44px; padding: var(--sb-space-1) var(--sb-space-3); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-pill); background: var(--sb-surface); color: var(--sb-ink-2); font-weight: 700; font-size: var(--sb-fs-sm); } .sb-chip[aria-pressed="true"], .sb-chip--active { background: var(--sb-teal-strong); color: var(--sb-on-accent); border-color: transparent; } .sb-badge { display: inline-flex; align-items: center; gap: var(--sb-space-1); padding: 2px var(--sb-space-2); border-radius: var(--sb-radius-pill); font-size: var(--sb-fs-xs); font-weight: 800; background: var(--sb-neutral-surface); color: var(--sb-neutral-ink); } .sb-badge[data-tone="success"] { background: var(--sb-success-surface); color: var(--sb-success-ink); } .sb-badge[data-tone="warning"] { background: var(--sb-warning-surface); color: var(--sb-warning-ink); } .sb-badge[data-tone="error"] { background: var(--sb-error-surface); color: var(--sb-error-ink); } .sb-badge[data-tone="info"] { background: var(--sb-info-surface); color: var(--sb-info-ink); } .sb-badge[data-tone="teal"] { background: var(--sb-teal-surface); color: var(--sb-teal-ink); } .sb-count-badge, .sb-nav__badge .fu-nav-badge, .sb-tabbar__badge .fu-nav-badge { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: 6px; border-radius: var(--sb-radius-pill); background: var(--sb-error-strong); color: var(--sb-on-accent); font-size: var(--sb-fs-xs); font-weight: 800; } .sb-segmented { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); background: var(--sb-surface-2); } .sb-segmented__item { display: inline-flex; align-items: center; min-block-size: 44px; padding: var(--sb-space-2) var(--sb-space-4); border-radius: calc(var(--sb-radius-md) - 3px); font-weight: 700; font-size: var(--sb-fs-sm); color: var(--sb-ink-2); } .sb-segmented__item[aria-current="page"], .sb-segmented__item[aria-current="true"], .sb-segmented__item[aria-selected="true"] { background: var(--sb-teal-strong); color: var(--sb-on-accent); } .sb-stat { display: flex; flex-direction: column; gap: var(--sb-space-1); } .sb-stat__label { display: flex; align-items: center; gap: var(--sb-space-2); color: var(--sb-ink-2); font-size: var(--sb-fs-sm); font-weight: 600; } .sb-stat__value { font-size: var(--sb-fs-3xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .sb-stat__hint { color: var(--sb-ink-2); font-size: var(--sb-fs-xs); } @container (max-width: 180px) { .sb-stat__value { font-size: var(--sb-fs-2xl); } } /* Ring (ruling F2): ONE solid arc colour over the solid track. conic-gradient is only the drawing technique, never a colour transition; this is the one allowed gradient function in the student UI (FlatStyleGuardTests). The centre is a solid circle in the surface colour (--sb-ring-hole), not a gradient mask. */ .sb-ring { --size: 56px; --thick: 6px; --ring: var(--sb-teal); position: relative; inline-size: var(--size); block-size: var(--size); flex: none; display: grid; place-items: center; border-radius: 50%; } .sb-ring::before, .sb-ring::after { content: ""; position: absolute; border-radius: 50%; } .sb-ring::before { inset: 0; background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--sb-track) 0); } .sb-ring::after { inset: var(--thick); background: var(--sb-ring-hole); } .sb-ring__value { position: relative; z-index: 1; font-weight: 800; font-size: calc(var(--size) * 0.28); line-height: 1; text-align: center; font-variant-numeric: tabular-nums; } .sb-ring__unit { display: block; font-size: 0.45em; font-weight: 600; color: var(--sb-ink-2); } .sb-ring[data-band="good"] { --ring: var(--sb-success); } .sb-ring[data-band="mid"] { --ring: var(--sb-warning); } .sb-ring[data-band="low"] { --ring: var(--sb-error); } .sb-ring[data-band="none"] { --ring: transparent; } .sb-ring[data-course="0"], .sb-course-dot[data-course="0"] { --ring: var(--sb-course-0); } .sb-ring[data-course="1"], .sb-course-dot[data-course="1"] { --ring: var(--sb-course-1); } .sb-ring[data-course="2"], .sb-course-dot[data-course="2"] { --ring: var(--sb-course-2); } .sb-ring[data-course="3"], .sb-course-dot[data-course="3"] { --ring: var(--sb-course-3); } .sb-ring[data-course="4"], .sb-course-dot[data-course="4"] { --ring: var(--sb-course-4); } .sb-ring[data-course="5"], .sb-course-dot[data-course="5"] { --ring: var(--sb-course-5); } .sb-course-dot { --ring: var(--sb-teal); inline-size: 10px; block-size: 10px; flex: none; border-radius: 50%; background: var(--ring); } .sb-ring--sm { --size: 36px; --thick: 4px; } .sb-ring--lg { --size: 128px; --thick: 12px; } /* Brand ring: always teal, whatever the score band. */ .sb-ring.sb-ring--teal { --ring: var(--sb-teal); } .sb-progress { --p: 0; block-size: 8px; border-radius: var(--sb-radius-pill); background: var(--sb-track); overflow: hidden; } .sb-progress::before { content: ""; display: block; block-size: 100%; inline-size: calc(var(--p) * 1%); border-radius: inherit; background: var(--sb-teal); } .sb-state { display: flex; flex-direction: column; align-items: center; gap: var(--sb-space-3); padding: var(--sb-space-8) var(--sb-space-4); text-align: center; } .sb-state__icon { inline-size: 64px; block-size: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--sb-teal-surface); color: var(--sb-teal-ink); } .sb-state__icon .sb-icon { inline-size: 28px; block-size: 28px; } .sb-state[data-kind="error"] .sb-state__icon { background: var(--sb-error-surface); color: var(--sb-error-ink); } .sb-state__title { font-size: var(--sb-fs-lg); font-weight: 800; } .sb-state__text { max-inline-size: 42ch; color: var(--sb-ink-2); } /* Skeleton: a solid block that pulses its opacity (no shimmer gradient); still under reduced motion. */ .sb-skeleton { display: block; block-size: 12px; border-radius: var(--sb-radius-sm); background: var(--sb-track); } @media (prefers-reduced-motion: no-preference) { .sb-skeleton { animation: sb-skeleton-pulse 1.4s ease-in-out infinite; } } .sb-skeleton + .sb-skeleton { margin-block-start: var(--sb-space-2); } .sb-skeleton--short { inline-size: 40%; } .sb-skeleton--mid { inline-size: 70%; } @keyframes sb-skeleton-pulse { 50% { opacity: 0.5; } } /* Question image frame (core/image-frame.js): a pulsing block with a spinner until the image arrives, then the image fades in. The image is never stretched: it keeps its ratio, fitted and centred in the frame. */ .sb-img-frame { position: relative; display: grid; place-items: center; max-inline-size: 100%; } .sb-img-frame > img { display: block; max-inline-size: 100%; block-size: auto; object-fit: contain; object-position: center; } .sb-img-frame[data-state="loading"] { min-block-size: min(40dvh, 280px); inline-size: 100%; border-radius: var(--sb-radius-lg); background: var(--sb-track); } .sb-img-frame[data-state="loading"] > img { position: absolute; opacity: 0; pointer-events: none; } .sb-img-frame[data-state="loading"]::after { content: ""; inline-size: 32px; block-size: 32px; border-radius: 50%; border: 3px solid var(--sb-teal); border-block-start-color: transparent; animation: sb-spin 0.8s linear infinite; } @media (prefers-reduced-motion: no-preference) { .sb-img-frame[data-state="loading"] { animation: sb-skeleton-pulse 1.4s ease-in-out infinite; } .sb-img-frame[data-state="ready"] > img { animation: sb-img-in var(--sb-dur) var(--sb-ease) both; } } @keyframes sb-img-in { from { opacity: 0; } } .sb-toasts { position: fixed; z-index: 100; inset-block-end: var(--sb-space-6); inset-inline-end: var(--sb-space-6); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sb-space-2); pointer-events: none; } .sb-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--sb-space-2); max-inline-size: min(420px, calc(100vw - 2 * var(--sb-space-4))); padding: var(--sb-space-3) var(--sb-space-4); border-radius: var(--sb-radius-md); background: var(--sb-toast-bg); color: var(--sb-toast-ink); font-weight: 600; font-size: var(--sb-fs-sm); box-shadow: var(--sb-shadow-lg); animation: sb-toast-in var(--sb-dur-slow) var(--sb-ease) both; } .sb-toast[data-tone="success"] .sb-icon { color: var(--sb-success); } .sb-toast[data-tone="error"] .sb-icon { color: var(--sb-error); } .sb-toast[data-tone="info"] .sb-icon { color: var(--sb-teal-accent); } .sb-toast[data-leaving] { animation: sb-toast-out var(--sb-dur) var(--sb-ease) both; } @keyframes sb-toast-in { from { opacity: 0; translate: 0 8px; } } @keyframes sb-toast-out { to { opacity: 0; translate: 0 8px; } } .sb-dialog { padding: var(--sb-space-6); border-radius: var(--sb-radius-xl); background: var(--sb-surface); color: var(--sb-ink); inline-size: min(480px, calc(100vw - 2 * var(--sb-space-4))); margin: auto; border: 1px solid var(--sb-border); box-shadow: var(--sb-shadow-lg); } .sb-dialog::backdrop { background: var(--sb-scrim); } .sb-dialog[open] { animation: sb-dialog-in var(--sb-dur-slow) var(--sb-ease); } .sb-dialog__title { font-size: var(--sb-fs-xl); font-weight: 800; } .sb-dialog__text { margin-block: var(--sb-space-2) var(--sb-space-5); color: var(--sb-ink-2); } .sb-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sb-space-2); } @keyframes sb-dialog-in { from { opacity: 0; scale: 0.96; } } @keyframes sb-sheet-in { from { translate: 0 100%; } } .sb-menu { position: fixed; inset: auto; inset-block-start: calc(var(--sb-topbar) + var(--sb-space-1)); inset-inline-end: var(--sb-gutter); margin: 0; inline-size: 288px; padding: var(--sb-space-2); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-lg); } .sb-menu__section { padding: var(--sb-space-2); } .sb-menu__section + .sb-menu__section { border-block-start: 1px solid var(--sb-border); } .sb-menu__label { margin-block-end: var(--sb-space-2); font-size: var(--sb-fs-xs); font-weight: 700; color: var(--sb-ink-2); text-transform: uppercase; letter-spacing: 0.06em; } .sb-menu__item { display: flex; align-items: center; gap: var(--sb-space-2); inline-size: 100%; min-block-size: 44px; padding: var(--sb-space-2); border-radius: var(--sb-radius-sm); font-weight: 600; text-align: start; } .sb-menu__item:hover { background: var(--sb-hover); } .sb-menu__item[aria-checked="true"], .sb-menu__item[aria-current="true"] { background: var(--sb-active-surface); color: var(--sb-teal-ink); } .sb-menu__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sb-space-1); } .sb-menu__row .sb-menu__item { flex-direction: column; justify-content: center; font-size: var(--sb-fs-xs); } .sb-palette { margin-block: 12vh auto; margin-inline: auto; padding: 0; inline-size: min(640px, calc(100vw - 2 * var(--sb-space-4))); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-xl); background: var(--sb-surface); color: var(--sb-ink); box-shadow: var(--sb-shadow-lg); overflow: hidden; } .sb-palette::backdrop { background: var(--sb-scrim); } .sb-palette__search { display: flex; align-items: center; gap: var(--sb-space-3); padding: var(--sb-space-4); border-block-end: 1px solid var(--sb-border); } .sb-palette__search:focus-within { box-shadow: inset 0 -2px 0 var(--sb-focus); } .sb-palette__input { flex: 1; border: 0; background: transparent; font-size: var(--sb-fs-lg); } .sb-palette__input:focus-visible { outline: none; } .sb-palette__list { max-block-size: min(60vh, 420px); overflow-y: auto; margin: 0; padding: var(--sb-space-2); list-style: none; } .sb-palette__group { padding: var(--sb-space-2) var(--sb-space-3) var(--sb-space-1); font-size: var(--sb-fs-xs); font-weight: 700; color: var(--sb-ink-2); text-transform: uppercase; letter-spacing: 0.06em; } .sb-palette__item { display: flex; align-items: center; gap: var(--sb-space-3); padding: var(--sb-space-3); border-radius: var(--sb-radius-md); font-weight: 600; cursor: pointer; } .sb-palette__item[aria-selected="true"] { background: var(--sb-active-surface); color: var(--sb-teal-ink); } .sb-palette__empty { padding: var(--sb-space-6); color: var(--sb-ink-2); text-align: center; } .sb-palette__loading { padding: var(--sb-space-1) var(--sb-space-5) var(--sb-space-4); } .sb-palette__loading[hidden] { display: none; } .sb-kbd { display: inline-flex; align-items: center; min-block-size: 20px; padding: 0 6px; border: 1px solid var(--sb-border); border-block-end-width: 2px; border-radius: 6px; font-family: inherit; font-size: var(--sb-fs-xs); font-weight: 700; color: var(--sb-ink-2); } .sb-search-trigger { display: flex; align-items: center; gap: var(--sb-space-2); inline-size: min(320px, 40vw); min-block-size: 44px; padding: var(--sb-space-2) var(--sb-space-3); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); background: var(--sb-surface); color: var(--sb-ink-2); font-size: var(--sb-fs-sm); } .sb-search-trigger .sb-kbd { margin-inline-start: auto; } .sb-avatar { inline-size: 44px; block-size: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sb-teal-strong); color: var(--sb-on-accent); font-weight: 800; font-size: var(--sb-fs-sm); } .sb-timer { display: inline-flex; align-items: center; gap: var(--sb-space-1); padding: var(--sb-space-1) var(--sb-space-3); border-radius: var(--sb-radius-pill); background: var(--sb-teal-surface); color: var(--sb-teal-ink); font-weight: 800; font-variant-numeric: tabular-nums; } .sb-timer[data-level="warn"] { background: var(--sb-warning-surface); color: var(--sb-warning-ink); } .sb-timer[data-level="danger"] { background: var(--sb-error-surface); color: var(--sb-error-ink); } .sb-save { display: inline-flex; align-items: center; gap: var(--sb-space-1); color: var(--sb-ink-2); font-size: var(--sb-fs-sm); font-weight: 600; } .sb-save[data-state="offline"] { color: var(--sb-warning-ink); } .sb-answers { display: grid; gap: var(--sb-space-3); grid-template-columns: minmax(0, 1fr); } .sb-answers--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .sb-answer { position: relative; display: flex; align-items: center; gap: var(--sb-space-3); min-block-size: 56px; padding: var(--sb-space-3) var(--sb-space-4); border: 1.5px solid var(--sb-border); border-radius: var(--sb-radius-lg); background: var(--sb-surface); font-weight: 600; cursor: pointer; transition: border-color var(--sb-dur-fast) var(--sb-ease), background-color var(--sb-dur-fast) var(--sb-ease); } .sb-answer__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; } .sb-answer__letter { inline-size: 32px; block-size: 32px; flex: none; display: grid; place-items: center; border-radius: var(--sb-radius-sm); background: var(--sb-surface-2); color: var(--sb-ink-2); font-weight: 800; } .sb-answer__text { flex: 1; } .sb-answer__key { margin-inline-start: auto; } .sb-answer:has(:focus-visible) { outline: 3px solid var(--sb-focus); outline-offset: 2px; } /* Selected: 2px solid teal-strong border, soft teal tint, solid letter badge. No glow. The padding drops by the extra half pixel so the tile does not shift. */ .sb-answer:has(:checked) { border: 2px solid var(--sb-teal-line); padding: calc(var(--sb-space-3) - 0.5px) calc(var(--sb-space-4) - 0.5px); background: var(--sb-teal-surface); } .sb-answer:has(:checked) .sb-answer__letter { background: var(--sb-teal-strong); color: var(--sb-on-accent); } .sb-answer:has(:disabled) { cursor: default; opacity: 0.7; } @media (hover: hover) { .sb-answer:not(:has(:checked, :disabled)):hover { border-color: var(--sb-teal); } } .sb-qmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: var(--sb-space-1); margin: 0; padding: 0; list-style: none; } .sb-qmap__cell { inline-size: 100%; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); background: var(--sb-surface); color: var(--sb-ink-2); font-size: var(--sb-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; } .sb-qmap__cell[data-state="answered"] { background: var(--sb-teal-strong); color: var(--sb-on-accent); border-color: transparent; } .sb-qmap__cell[data-flagged="true"] { background: var(--sb-warning-surface); color: var(--sb-warning-ink); border-color: var(--sb-warning); } .sb-qmap__cell[data-state="answered"][data-flagged="true"] { background: var(--sb-teal-strong); color: var(--sb-on-accent); border-color: var(--sb-warning); box-shadow: inset 0 0 0 2px var(--sb-warning); } .sb-qmap__cell[aria-current="step"] { outline: 2.5px solid var(--sb-teal-line); outline-offset: 1.5px; } .sb-qmap-legend { display: flex; flex-wrap: wrap; gap: var(--sb-space-3); margin-block-start: var(--sb-space-3); font-size: var(--sb-fs-xs); color: var(--sb-ink-2); } .sb-qmap-legend__dot { display: inline-block; inline-size: 10px; block-size: 10px; margin-inline-end: var(--sb-space-1); vertical-align: -1px; border: 1px solid var(--sb-border); border-radius: 3px; background: var(--sb-surface); } .sb-qmap-legend__dot[data-state="answered"] { background: var(--sb-teal-strong); border-color: transparent; } .sb-qmap-legend__dot[data-flagged="true"] { background: var(--sb-warning); border-color: transparent; } /* Continue banner: soft teal tint with the teal start-side accent bar, ink text, solid primary action. */ .sb-continue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-4); padding: var(--sb-space-4) var(--sb-space-5); border-radius: var(--sb-radius-lg); border-inline-start: var(--sb-accent-bar); color: var(--sb-ink); background: var(--sb-teal-surface); } .sb-continue > .sb-icon { color: var(--sb-teal-strong); } .sb-continue__body { flex: 1; min-inline-size: 0; } .sb-continue__eyebrow { font-size: var(--sb-fs-sm); font-weight: 700; color: var(--sb-teal-ink); } .sb-continue__title { font-size: var(--sb-fs-lg); font-weight: 800; } .sb-continue .sb-btn { background: var(--sb-teal-strong); color: var(--sb-on-accent); border-color: transparent; } .sb-continue .sb-btn:hover { background: var(--sb-teal-dark); } /* Compact data table (statistics, results). Markup: table.sb-table > thead/tbody > tr > th/td; numbers get .sb-nums. */ .sb-table { inline-size: 100%; border-collapse: collapse; font-size: var(--sb-fs-sm); } .sb-table :is(th, td) { padding: var(--sb-space-2) var(--sb-space-3); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--sb-border); } .sb-table thead th { color: var(--sb-ink-2); font-size: var(--sb-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .sb-table--compact :is(th, td) { padding-block: var(--sb-space-1); } .sb-stripe { block-size: 4px; border-radius: var(--sb-radius-pill); background: var(--sb-course, var(--sb-teal)); } .sb-stripe[data-course="0"] { --sb-course: var(--sb-course-0); } .sb-stripe[data-course="1"] { --sb-course: var(--sb-course-1); } .sb-stripe[data-course="2"] { --sb-course: var(--sb-course-2); } .sb-stripe[data-course="3"] { --sb-course: var(--sb-course-3); } .sb-stripe[data-course="4"] { --sb-course: var(--sb-course-4); } .sb-stripe[data-course="5"] { --sb-course: var(--sb-course-5); } @media (max-width: 767.98px) { .sb-toasts { inset-inline: var(--sb-space-3); inset-block-end: calc(var(--sb-tabbar) + var(--sb-space-3) + env(safe-area-inset-bottom)); align-items: stretch; } .sb-dialog--sheet { margin-block: auto 0; margin-inline: 0; inline-size: 100%; max-inline-size: 100%; border-end-start-radius: 0; border-end-end-radius: 0; padding-block-end: calc(var(--sb-space-6) + env(safe-area-inset-bottom)); } .sb-dialog--sheet[open] { animation-name: sb-sheet-in; } .sb-dialog__actions { flex-direction: column-reverse; } .sb-dialog__actions .sb-btn { inline-size: 100%; } .sb-search-trigger { inline-size: auto; } .sb-search-trigger :is(.sb-search-trigger__text, .sb-kbd) { display: none; } .sb-answer__key { display: none; } } } /* Form controls (W1). Markup contract:
[

…

…

(empty = hidden)
*/ @layer components { .sb-field { display: flex; flex-direction: column; gap: var(--sb-space-2); min-inline-size: 0; } .sb-field__label { font-size: var(--sb-fs-sm); font-weight: 700; color: var(--sb-ink); } .sb-field__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sb-space-2); } .sb-field__hint { font-size: var(--sb-fs-sm); color: var(--sb-ink-2); } .sb-field__hint:empty, .sb-field__error:empty { display: none; } .sb-field__error { display: flex; align-items: center; gap: var(--sb-space-1); font-size: var(--sb-fs-sm); font-weight: 600; color: var(--sb-error-ink); } .sb-input { display: flex; align-items: center; gap: var(--sb-space-2); min-block-size: 52px; padding-inline: var(--sb-space-4) var(--sb-space-1); border: 1.5px solid var(--sb-border); border-radius: var(--sb-radius-md); background: var(--sb-surface); color: var(--sb-ink-2); transition: border-color var(--sb-dur-fast) var(--sb-ease), box-shadow var(--sb-dur-fast) var(--sb-ease); } .sb-input:focus-within { border-color: var(--sb-teal-line); box-shadow: 0 0 0 4px var(--sb-active-surface); } .sb-input:has(.sb-input__control:focus-visible) { outline: 3px solid var(--sb-focus); outline-offset: 2px; } .sb-input__control { flex: 1; min-inline-size: 0; min-block-size: 48px; padding: 0; border: 0; background: transparent; color: var(--sb-ink); font-size: var(--sb-fs-md); } .sb-input__control:focus { outline: none; } .sb-input__control::placeholder { color: var(--sb-ink-3); } .sb-input__action { display: inline-grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border-radius: var(--sb-radius-sm); color: var(--sb-ink-2); } .sb-input__action:hover { background: var(--sb-hover); color: var(--sb-ink); } .sb-input:has([aria-invalid="true"]) { border-color: var(--sb-error-strong); } .sb-input:has([aria-invalid="true"]):focus-within { box-shadow: 0 0 0 4px var(--sb-error-surface); } /* Native select (W3, shared since W6):