/* Base layer, then the shared components (DESIGN_SYSTEM); comments are short for REQ-132 (NOTES › T-159). */

/* Fonts: self-hosted Inter. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* font-family-fallback-metric. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial");
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* Base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
    font-family: var(--font-family-base);
    font-feature-settings: var(--font-feature-default);
    font-synthesis: none;
    scroll-padding-top: var(--space-4);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* The app frame: the page colour under the top-right glow. */
body {
    margin: 0;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-page);
    background-image: var(--color-bg-glow);
    background-repeat: no-repeat;
    color: var(--color-text-primary);
    font-size: var(--font-size-17);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    hyphens: manual;
}

/* Page entry: main fades in once per load (mockup epFade). */
main {
    animation: page-entry var(--motion-duration-entry) var(--motion-ease-entry);
}

@keyframes page-entry {
    from {
        opacity: var(--opacity-hidden);
        transform: translateY(var(--motion-distance-entry));
    }
}

h1,
h2,
h3,
p {
    margin-block: 0;
}

p {
    max-inline-size: var(--size-measure-body);
    text-wrap: pretty;
}

a {
    color: var(--color-text-link);
    text-decoration-line: underline;
    text-decoration-thickness: var(--border-width-hairline);
    text-underline-offset: 0.15em;
}

@media (hover: hover) and (pointer: fine) {
    a:hover {
        color: var(--color-text-link-hover);
        text-decoration-thickness: var(--border-width-selected);
    }
}

::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-text);
}

/* Focus: one ring for every focusable element. */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--color-border-control-hover);
    box-shadow: var(--focus-halo);
}

/* User text never widens or reorders the layout (EF-21). */
.type-prompt,
.type-answer-lg,
.type-content,
.type-reading,
.type-example,
.type-body-ru {
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

/* Type steps (DESIGN_SYSTEM › Typography Scale). */
.type-display,
.type-display-speak,
.type-display-section,
h1,
.type-h1 {
    max-inline-size: var(--size-measure-body);
    font-size: var(--font-size-h1-page);
    font-weight: var(--font-weight-heavy);
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-display);
    text-wrap: balance;
    overflow-wrap: break-word;
}

.type-display {
    font-size: var(--font-size-h1);
}

.type-display-speak {
    font-size: var(--font-size-h1-speak);
}

.type-display-section {
    font-size: var(--font-size-h1-section);
}

h2,
.type-h2 {
    max-inline-size: var(--size-measure-body);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-heavy);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    text-wrap: balance;
}

h3,
.type-h3,
.type-card-title {
    max-inline-size: var(--size-measure-body);
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-title);
}

.type-prompt {
    font-size: var(--font-size-prompt);
    font-weight: var(--font-weight-heavy);
    line-height: var(--line-height-prompt);
    letter-spacing: var(--letter-spacing-title);
    text-wrap: balance;
}

.type-prompt-long {
    font-size: var(--font-size-prompt-long);
    font-weight: var(--font-weight-heavy);
    line-height: var(--line-height-prompt);
    letter-spacing: var(--letter-spacing-title);
}

.type-answer-lg {
    font-size: var(--font-size-answer);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-prompt);
    letter-spacing: var(--letter-spacing-title);
}

.type-lead {
    max-inline-size: var(--size-measure);
    color: var(--color-text-secondary);
    font-size: var(--font-size-lead);
    line-height: var(--line-height-body);
}

.type-content {
    max-inline-size: var(--size-measure);
    font-size: var(--font-size-20);
    line-height: var(--line-height-meta);
}

.type-reading {
    max-inline-size: var(--size-measure);
    font-size: var(--font-size-18);
    line-height: var(--line-height-reading);
}

.type-example {
    max-inline-size: var(--size-measure);
    color: var(--color-text-secondary);
    font-size: var(--font-size-example);
    line-height: var(--line-height-meta);
}

.type-body,
.type-body-ru {
    max-inline-size: var(--size-measure-body);
    font-size: var(--font-size-17);
    line-height: var(--line-height-body);
}

.type-body-ru {
    color: var(--color-text-secondary);
}

.type-label {
    max-inline-size: var(--size-measure-body);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-label);
}

.type-body-sm,
.type-meta {
    max-inline-size: var(--size-measure-body);
    font-size: var(--font-size-16);
    line-height: var(--line-height-meta);
}

.type-meta {
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
}

/* Visually hidden. */
.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* App shell (DESIGN_SYSTEM › 1–5). */
.skip-link {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    z-index: var(--z-skip-link);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width-control) solid var(--color-border-control);
    border-radius: var(--radius-input);
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-label);
}

.skip-link:not(:focus) {
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-header {
    display: flex;
    align-items: center;
    padding: var(--space-7) var(--space-7) 0;
}

.site-main {
    flex: 1 0 auto;
    padding-inline: var(--space-page-inline);
}

.shell .site-main {
    padding-block: var(--space-page-block) var(--space-12);
}

.shell--practice .site-main {
    padding-block-end: var(--space-4);
}

/* Footer time-zone line (DESIGN_SYSTEM › 11): centred under a 1 px rule, the clock, the zone. */
.site-footer {
    margin-block-start: var(--space-section);
    padding-inline: var(--space-page-inline);
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
    line-height: var(--line-height-meta);
    text-align: center;
}

.site-footer__line {
    max-inline-size: none;
    margin: 0;
    padding-block: var(--space-5);
    border-block-start: var(--border-width-hairline) solid var(--color-border-tabs);
}

.site-footer__icon {
    inline-size: var(--size-icon-field);
    block-size: var(--size-icon-field);
    margin-inline-end: var(--space-1);
    vertical-align: -0.15em;
}

.shell .site-footer {
    margin-block-start: 0;
    inline-size: 100%;
    max-inline-size: calc(var(--size-content-max) + 2 * var(--space-page-inline));
}

/* The content column: at most 1150 px, left-aligned. */
.page {
    inline-size: 100%;
    max-inline-size: var(--size-content-max);
}

html.shell {
    scroll-padding-block-end: calc(var(--size-bottom-bar) + var(--space-4));
}

.shell body {
    padding-block-end: var(--size-bottom-bar);
}

html.shell--practice {
    scroll-padding-block-end: var(--space-4);
}

.shell--practice body {
    padding-block-end: 0;
}

/* Below 760 px: the in-flow top row (DESIGN_SYSTEM › 4). */
.shell__header {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-3);
}

.shell__sidebar {
    display: contents;
}

.shell__utility,
.main-nav--header {
    display: none;
}

.main-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav__link,
.utility-item {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    border: 0;
    background-color: transparent;
    color: var(--color-text-strong);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.main-nav__link .main-nav__icon,
.utility-item .utility-item__icon {
    inline-size: var(--size-icon-nav);
    block-size: var(--size-icon-nav);
}

.main-nav__count {
    font-variant-numeric: var(--font-numeric-tabular);
    white-space: nowrap;
}

.main-nav__link:active,
.utility-item:active {
    background-color: var(--color-bg-current);
}

.main-nav__link[aria-current="page"],
.utility-item[aria-current="page"] {
    color: var(--color-text-current);
    font-weight: var(--font-weight-bold);
}

.main-nav__link[aria-current="page"] .main-nav__icon,
.utility-item[aria-current="page"] .utility-item__icon {
    stroke-width: 2.4;
}

@media (hover: hover) and (pointer: fine) {
    .main-nav__link:hover,
    .utility-item:hover {
        background-color: var(--color-bg-hover-quiet);
        color: var(--color-text-strong);
    }

    .main-nav__link[aria-current="page"]:hover,
    .utility-item[aria-current="page"]:hover {
        color: var(--color-text-current);
    }
}

.main-nav--bottom {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-sticky);
    padding: calc(1.5 * var(--space-1)) var(--space-1) calc(1.5 * var(--space-1) + env(safe-area-inset-bottom, 0px));
    border-block-start: var(--border-width-hairline) solid var(--color-border-divider);
    background-color: var(--color-bg-bottom-bar);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Five equal items. */
.main-nav--bottom .main-nav__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3.875rem, 1fr));
}

.main-nav--bottom .main-nav__link {
    position: relative;
    flex-direction: column;
    gap: var(--space-1);
    justify-content: center;
    min-block-size: var(--size-nav-item);
    padding-block: var(--space-1);
    border-radius: var(--radius-row);
    font-size: var(--font-size-14);
    line-height: var(--line-height-heading);
    text-align: center;
}

.main-nav--bottom .main-nav__link:focus-visible {
    outline-offset: var(--focus-ring-offset-inset);
}

/* The solid count on the icon's top-right. */
.main-nav--bottom .main-nav__count {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: min(calc(50% + var(--space-2)), calc(100% - 2.125rem));
    min-inline-size: var(--size-icon-control);
    padding: calc(var(--space-1) / 2) calc(1.5 * var(--space-1));
    border-radius: var(--radius-pill);
    background-color: var(--color-badge-solid-bg);
    color: var(--color-text-inverse);
    font-size: var(--font-size-12);
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--size-icon-control);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.main-nav--bottom .main-nav__count-unit {
    display: none;
}

/* Current: the 3 px bar on the item's top edge. */
.main-nav--bottom .main-nav__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset: 0 var(--space-3) auto;
    border-block-start: var(--border-width-current) solid var(--color-border-selected);
}

.shell--practice .main-nav--bottom {
    position: static;
}

/* Practice mode below 760 px. */
:where(.shell--practice) .shell__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    min-block-size: var(--size-nav-item);
    padding-block: calc(var(--space-1) + env(safe-area-inset-top, 0px)) var(--space-1);
    border-block-end: var(--border-width-hairline) solid var(--color-border-tabs);
}

:where(.shell--practice) .account-menu {
    justify-self: end;
}

.account-menu {
    position: relative;
}

/* Account menu (DESIGN_SYSTEM › 5). */
.account-menu__summary {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    min-block-size: var(--size-control-sm);
    padding: 0 var(--space-3);
    border: var(--border-width-control) solid var(--color-border-control);
    border-radius: var(--radius-row);
    background-color: var(--color-bg-surface);
    color: var(--color-text-strong);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-label);
    list-style: none;
    cursor: pointer;
}

.account-menu__summary::-webkit-details-marker {
    display: none;
}

.account-menu__summary:active,
.account-menu[open] > .account-menu__summary {
    background-color: var(--color-bg-current);
}

.account-menu__chevron {
    transition: transform var(--motion-duration-chevron) var(--motion-ease-standard);
}

.account-menu[open] .account-menu__chevron {
    transform: rotate(180deg);
}

.account-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline-end: 0;
    z-index: var(--z-menu);
    min-inline-size: calc(var(--size-signin-max) / 2);
    margin: 0;
    padding: var(--space-2);
    border: var(--border-width-hairline) solid var(--color-border-card);
    border-radius: var(--radius-row);
    background-color: var(--color-bg-surface);
    box-shadow: var(--shadow-card-hover);
    list-style: none;
}

/* Only an open menu animates: a closed panel is not rendered, so its animation never ends. */
.account-menu[open] .account-menu__panel {
    animation: account-menu-open var(--motion-duration-hover-in) var(--motion-ease-enter);
}

@keyframes account-menu-open {
    from {
        opacity: var(--opacity-hidden);
    }
}

.account-menu__item {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    inline-size: 100%;
    min-block-size: var(--size-input);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-input);
    background-color: transparent;
    color: var(--color-text-strong);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.account-menu__item[aria-current="page"] {
    background-color: var(--color-bg-current);
    color: var(--color-text-current);
    font-weight: var(--font-weight-bold);
}

@media (hover: hover) and (pointer: fine) {
    .account-menu__summary:hover,
    .account-menu__item:hover {
        background-color: var(--color-bg-hover-quiet);
    }
}

.sign-out-form {
    margin: 0;
}

/* From 760 px: the sidebar is a full-height track; its inner block is sticky and scrolls. */
@media (min-width: 47.5em) {
    html.shell {
        scroll-padding-block-end: var(--space-4);
    }

    .shell body {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: var(--size-sidebar-md) minmax(0, 1fr);
        padding-block-end: 0;
    }

    .shell__header {
        display: block;
        grid-row: 1 / -1;
        grid-column: 1;
        padding: 0;
        border-inline-end: var(--border-width-hairline) solid var(--color-border-sidebar);
        background-color: var(--color-bg-sidebar);
    }

    .shell .site-main,
    .shell .site-footer {
        grid-column: 2;
    }

    .shell .site-main {
        padding-block-end: 0;
    }

    .shell .site-footer {
        margin-block-start: var(--space-section);
    }

    .shell__sidebar {
        position: sticky;
        inset-block-start: 0;
        z-index: var(--z-sticky);
        display: flex;
        flex-direction: column;
        block-size: 100dvh;
        padding: var(--space-7) var(--space-4) var(--space-6);
        overflow-y: auto;
    }

    /* The logo row is 36 px tall. */
    .shell__brand {
        display: flex;
        align-items: center;
        min-block-size: var(--size-logo-w);
        margin-block-end: var(--space-7);
        padding-inline: var(--space-3);
    }

    .account-menu,
    .main-nav--bottom {
        display: none;
    }

    .main-nav--header {
        display: block;
    }

    .shell__utility {
        display: block;
        margin-block-start: auto;
        padding-block-start: var(--space-5);
        border-block-start: var(--border-width-hairline) solid var(--color-border-divider);
    }

    .main-nav--header .main-nav__list,
    .shell__utility .main-nav__list {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    /* DS-10: 17 px labels. */
    .main-nav--header .main-nav__link,
    .utility-item {
        inline-size: 100%;
        min-block-size: var(--size-nav-item);
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-row);
        font-size: var(--font-size-17);
        line-height: var(--line-height-label);
        text-align: start;
    }

    .main-nav__text {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-2);
        align-items: center;
        justify-content: space-between;
    }

    .main-nav--header .main-nav__count {
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-pill);
        background-color: var(--color-badge-due-bg);
        color: var(--color-badge-due-text);
        font-size: var(--font-size-15);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-meta);
    }

    .main-nav--header .main-nav__link[aria-current="page"],
    .utility-item[aria-current="page"] {
        background-color: var(--color-bg-current);
    }

    .shell--practice .main-nav--header .main-nav__link,
    .shell--practice .utility-item {
        color: var(--color-nav-dimmed);
    }

    .shell--practice .main-nav--header .main-nav__link[aria-current="page"] {
        background-color: transparent;
    }
}

@media (min-width: 68.75em) {
    .shell body {
        grid-template-columns: var(--size-sidebar-lg) minmax(0, 1fr);
    }

    /* One line from 1100 px. */
    .shell__brand .wordmark__text {
        white-space: nowrap;
    }

    .main-nav--header .main-nav__link,
    .utility-item {
        gap: var(--space-4);
        padding-inline: var(--space-5);
        font-size: var(--font-size-19);
    }

    /* The mockup's badge (4 x 10 px) keeps "Review 30 due" on one line in the 256 px sidebar. */
    .main-nav--header .main-nav__count {
        padding-inline: calc(2.5 * var(--space-1));
    }

    .main-nav__text {
        column-gap: var(--space-1);
    }
}

/* Wordmark (DESIGN_SYSTEM › 2). */
.wordmark {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    color: var(--color-text-primary);
    font-size: var(--font-size-19);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-title);
    line-height: var(--line-height-label);
    text-decoration: none;
}

.wordmark__logo {
    flex: none;
    inline-size: var(--size-logo-w);
    block-size: var(--size-logo-h);
}

.wordmark__cover {
    fill: var(--color-action-primary-bg-active);
}

.wordmark__page {
    fill: var(--color-tile-blue-icon);
}

.wordmark__page--right {
    fill: var(--color-text-link);
}

.wordmark__marked {
    color: var(--color-text-link);
}

/* A linked wordmark is a 44 px target (REQ-158) without moving anything: the extra height is taken
   back by negative margins around the logo's height. */
a.wordmark {
    min-block-size: var(--size-target-min);
    margin-block: calc((var(--size-logo-h) - var(--size-target-min)) / 2);
}

a.wordmark:active .wordmark__text {
    color: var(--color-text-link-hover);
}

@media (hover: hover) and (pointer: fine) {
    a.wordmark:hover {
        color: var(--color-text-primary);
    }

    a.wordmark:hover .wordmark__text {
        text-decoration-line: underline;
        text-decoration-thickness: var(--border-width-hairline);
    }
}

@media (min-width: 47.5em) {
    .wordmark {
        font-size: var(--font-size-21);
    }
}

/* Icons (DESIGN_SYSTEM › Components › Icons). */
.icon {
    flex: none;
    inline-size: var(--size-icon-control);
    block-size: var(--size-icon-control);
    stroke-width: 1.9;
}

/* Notice (DESIGN_SYSTEM › 37). */
.notice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    border-inline-start: var(--border-width-note) solid transparent;
    border-radius: var(--radius-row);
    color: var(--color-text-primary);
}

.notice__icon {
    margin-block-start: calc((var(--line-height-body) * var(--font-size-17) - var(--size-icon-control)) / 2);
}

.notice__body {
    flex: 1 1 auto;
    min-inline-size: 0;
    margin: 0;
}

.notice__heading {
    font-weight: var(--font-weight-bold);
}

.notice--inline {
    padding: var(--space-3) var(--space-4);
}

.notice--info {
    border-color: var(--color-feedback-info-border);
    background-color: var(--color-feedback-info-bg);
}

.notice--info .notice__icon,
.notice--info .notice__heading {
    color: var(--color-feedback-info-text);
}

.notice--success {
    border-color: var(--color-feedback-success-border);
    background-color: var(--color-feedback-success-bg);
}

.notice--success .notice__icon {
    color: var(--color-feedback-success-icon);
}

.notice--success .notice__heading {
    color: var(--color-feedback-success-text);
}

.notice--warning {
    border-color: var(--color-feedback-warning-border);
    background-color: var(--color-feedback-warning-bg);
}

.notice--warning .notice__icon,
.notice--warning .notice__heading {
    color: var(--color-feedback-warning-text);
}

.notice--error {
    border-color: var(--color-feedback-error-border);
    background-color: var(--color-feedback-error-bg);
}

.notice--error .notice__icon,
.notice--error .notice__heading {
    color: var(--color-feedback-error-text);
}

.notice--quiet {
    background-color: var(--color-bg-inset);
}

.notice--quiet,
.notice--status,
.notice--quiet .notice__icon,
.notice--status .notice__icon {
    color: var(--color-text-secondary);
}

/* The status line: no fill or border; its text wraps beside the icon. */
.notice--status {
    flex-wrap: wrap;
    padding: 0;
    border-inline-start: 0;
}

.notice--status > .notice__body {
    flex: 1 1 12rem;
}

/* Card (DESIGN_SYSTEM › 15): one radius and shadow per role; static (no V1 card is one link). */
.card {
    padding: var(--space-6);
    border: var(--border-width-hairline) solid var(--color-border-card);
    border-radius: var(--radius-card);
    background-color: var(--color-bg-surface);
    box-shadow: var(--shadow-card);
}

.card--section {
    padding: var(--space-7);
}

.card--plan {
    padding: var(--space-7) var(--space-8);
}

@media (min-width: 47.5em) {
    .card--form {
        padding: var(--space-8);
    }
}

/* Icon tile (DESIGN_SYSTEM › 16): 52 (r14), 48 (r10) or 66 px (r12); colour by kind. */
.icon-tile {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: var(--size-tile);
    block-size: var(--size-tile);
    border-radius: var(--radius-tile);
    background-color: var(--color-tile-blue-bg);
    color: var(--color-tile-blue-icon);
}

.icon-tile .icon {
    inline-size: var(--size-icon-tile);
    block-size: var(--size-icon-tile);
}

.icon-tile--48 {
    inline-size: var(--size-tile-row);
    block-size: var(--size-tile-row);
    border-radius: var(--radius-button-lg);
}

.icon-tile--48 .icon {
    inline-size: var(--size-icon-nav);
    block-size: var(--size-icon-nav);
}

.icon-tile--66 {
    inline-size: var(--size-tile-stat);
    block-size: var(--size-tile-stat);
    border-radius: var(--radius-row);
}

.icon-tile--66 .icon {
    inline-size: calc(var(--size-icon-tile) + var(--space-1));
    block-size: calc(var(--size-icon-tile) + var(--space-1));
}

.icon-tile--red {
    background-color: var(--color-tile-red-bg);
    color: var(--color-tile-red-icon);
}

.icon-tile--green {
    background-color: var(--color-tile-green-bg);
    color: var(--color-tile-green-icon);
}

.icon-tile--violet {
    background-color: var(--color-tile-violet-bg);
    color: var(--color-tile-violet-icon);
}

.icon-tile--amber {
    background-color: var(--color-tile-amber-bg);
    color: var(--color-tile-amber-icon);
}

/* Chip (DESIGN_SYSTEM › 18): a word on a pill; the transparent hairline shows in forced colours. */
.chip {
    display: inline-flex;
    align-items: center;
    padding: calc(1.5 * var(--space-1)) calc(3.5 * var(--space-1));
    border: var(--border-width-hairline) solid transparent;
    border-radius: var(--radius-pill);
    background-color: var(--color-chip-status-bg);
    color: var(--color-chip-status-text);
    font-size: var(--font-size-15);
    line-height: var(--line-height-meta);
}

.chip--due {
    background-color: var(--color-chip-due-bg);
    color: var(--color-chip-due-text);
}

.chip--category {
    background-color: var(--color-chip-category-bg);
    color: var(--color-chip-category-text);
}

/* Stat tile (DESIGN_SYSTEM › 21): flat, r12; the value, its label and the sub-line. */
.stat-tile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border: var(--border-width-hairline) solid var(--color-border-card);
    border-radius: var(--radius-row);
    background-color: var(--color-bg-surface);
}

/* Beside the icon tile while 7rem of text fit; under it in a narrow tile. */
.stat-tile__text {
    display: flex;
    flex: 1 1 7rem;
    flex-direction: column;
    min-inline-size: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-17);
    line-height: var(--line-height-label);
}

.stat-tile__value {
    color: var(--color-text-primary);
    font-size: var(--font-size-30);
    font-weight: var(--font-weight-heavy);
    font-variant-numeric: var(--font-numeric-tabular);
    line-height: var(--line-height-prompt);
    letter-spacing: var(--letter-spacing-title);
}

.stat-tile--period .stat-tile__value,
.stat-tile--summary .stat-tile__value {
    font-size: var(--font-size-28);
}

.stat-tile__sub {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold);
}

/* Stat tiles grid (DESIGN_SYSTEM › Spacing and Grid): auto-fill from 220 px, never fewer than two columns. */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(13.75rem, calc(50% - var(--space-2))), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Form field (DESIGN_SYSTEM › 26): the 16/600 label, the 15 px help, the control, the message. */
.form-field + .form-field {
    margin-block-start: var(--space-6);
}

.form-field__label {
    display: block;
    margin-block-end: var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-label);
}

/* Field error: 15 px in the error red with the 16 px circle-alert, under its control. */
.form-field__error {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin-block: var(--space-2) 0;
    color: var(--color-feedback-error-text);
    font-size: var(--font-size-15);
    line-height: var(--line-height-meta);
}

.form-field__error .icon {
    inline-size: var(--size-icon-field);
    block-size: var(--size-icon-field);
    margin-block-start: calc((var(--line-height-meta) * var(--font-size-15) - var(--size-icon-field)) / 2);
}

/* Text input, select and textarea (DESIGN_SYSTEM › 27–29). */
.text-input,
.select__control {
    inline-size: 100%;
    min-block-size: var(--size-input);
    padding: 0 calc(3.5 * var(--space-1));
    border: var(--border-width-control) solid var(--color-border-control);
    border-radius: var(--radius-input);
    background-color: var(--color-bg-field);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-17);
    line-height: var(--line-height-label);
}

.text-input[aria-invalid="true"],
.select__control[aria-invalid="true"] {
    border: var(--border-width-selected) solid var(--color-border-invalid);
}

.text-input[readonly] {
    background-color: var(--color-bg-inset);
}

@media (hover: hover) and (pointer: fine) {
    .text-input:hover,
    .select__control:hover {
        border-color: var(--color-border-control-hover);
    }

    .text-input[aria-invalid="true"]:hover,
    .select__control[aria-invalid="true"]:hover {
        border-color: var(--color-border-invalid);
    }
}

.password-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

/* Button (DESIGN_SYSTEM › 12): --row is the 58 px tonal size, --round the 72 px record. */
.button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    border: var(--border-width-control) solid transparent;
    border-radius: var(--radius-input);
    background-color: transparent;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-label);
    text-align: center;
    cursor: pointer;
    transition: transform var(--motion-duration-hover-out) var(--motion-ease-exit);
}

.button::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--border-width-control));
    z-index: -1;
    border-radius: inherit;
    box-shadow: var(--shadow-button-lg);
    opacity: var(--opacity-hidden);
    pointer-events: none;
    transition: opacity var(--motion-duration-hover-out) var(--motion-ease-exit);
}

.button--sm {
    min-block-size: var(--size-control-sm);
    padding: 0 var(--space-4);
    font-size: var(--font-size-16);
}

.button--md {
    min-block-size: var(--size-control-md);
    padding: 0 var(--space-7);
    border-radius: var(--radius-button);
    font-size: var(--font-size-18);
}

.button--lg {
    min-block-size: var(--size-control-lg);
    padding: 0 var(--space-7);
    border-radius: var(--radius-button-lg);
    font-size: var(--font-size-19);
}

.button--answer {
    min-block-size: var(--size-control-answer);
    padding: 0 var(--space-8);
    border-radius: var(--radius-small);
    font-size: var(--font-size-21);
}

.button--row {
    min-block-size: var(--size-control-tonal);
    padding: 0 calc(var(--space-8) + var(--space-1) / 2);
    border-radius: var(--radius-button-lg);
    font-size: var(--font-size-22);
}

.button--xl {
    min-block-size: var(--size-control-xl);
    padding: 0 var(--space-8);
    border-radius: var(--radius-button-lg);
    font-size: var(--font-size-cta-speak);
}

.button--primary {
    background: var(--color-action-primary-bg);
    color: var(--color-action-primary-text);
    box-shadow: var(--shadow-button);
}

.button--primary:is(.button--answer, .button--xl) {
    box-shadow: var(--shadow-button-lg);
}

.button--primary:active {
    background: var(--color-action-primary-bg-active);
    box-shadow: none;
}

.button--secondary,
.button--outline {
    border-color: var(--color-action-secondary-border);
    background-color: var(--color-action-secondary-bg);
    color: var(--color-action-secondary-text);
}

.button--outline {
    border-radius: var(--radius-button-lg);
}

.button--outline .icon {
    color: var(--color-text-link);
}

.button--secondary:active,
.button--outline:active {
    background-color: var(--color-action-secondary-bg-active);
}

.button--tonal {
    background-color: var(--color-action-tonal-bg);
    color: var(--color-action-tonal-text);
}

.button--tonal:active {
    background-color: var(--color-action-tonal-bg-hover);
}

.button--quiet,
.button--quiet-danger {
    border-radius: var(--radius-input);
    color: var(--color-action-quiet-text);
}

.button--quiet-danger {
    color: var(--color-text-danger);
}

.button--quiet:active,
.button--quiet-danger:active {
    background-color: var(--color-bg-current);
}

/* Danger: only the destructive button of SCR-33; no shadow. */
.button--danger {
    background-color: var(--color-action-danger-bg);
    color: var(--color-action-danger-text);
}

.button--danger:active {
    background-color: var(--color-action-danger-bg-hover);
}

@media (hover: hover) and (pointer: fine) {
    .button--primary:hover {
        transform: translateY(var(--motion-distance-lift));
        transition: transform var(--motion-duration-hover-in) var(--motion-ease-enter);
    }

    .button--primary:hover::after {
        opacity: var(--opacity-visible);
        transition: opacity var(--motion-duration-hover-in) var(--motion-ease-enter);
    }

    .button--primary:active {
        transform: none;
        transition-duration: var(--motion-duration-press);
    }

    .button--primary:active::after {
        opacity: var(--opacity-hidden);
    }

    .button--secondary:hover,
    .button--outline:hover {
        border-color: var(--color-action-secondary-border-hover);
        background-color: var(--color-action-secondary-bg-hover);
    }

    .button--tonal:hover {
        background-color: var(--color-action-tonal-bg-hover);
    }

    .button--quiet:hover {
        background-color: var(--color-action-quiet-bg-hover);
        color: var(--color-text-link-hover);
    }

    .button--quiet-danger:hover {
        background-color: var(--color-action-quiet-bg-hover);
        color: var(--color-text-danger-hover);
    }

    .button--danger:hover {
        background-color: var(--color-action-danger-bg-hover);
    }
}

/* Busy (P-B). */
.button[aria-disabled="true"] {
    transform: none;
    cursor: progress;
}

.button[aria-disabled="true"]::after {
    opacity: var(--opacity-hidden);
}

/* Links (DESIGN_SYSTEM › 13). */
a.button {
    text-decoration-line: none;
}

.link-standalone,
.link-danger {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    min-inline-size: var(--size-target-min);
    min-block-size: var(--size-target-min);
}

.link-danger {
    color: var(--color-text-danger);
}

@media (hover: hover) and (pointer: fine) {
    a.button--primary:hover,
    a.button--danger:hover {
        color: var(--color-action-primary-text);
    }

    a.button--secondary:hover,
    a.button--outline:hover {
        color: var(--color-action-secondary-text);
    }

    a.button--tonal:hover {
        color: var(--color-action-tonal-text);
    }

    .link-danger:hover {
        color: var(--color-text-danger-hover);
    }
}

/* Delete confirmation (DESIGN_SYSTEM › 50): one form Card at most 640 px; the h1 inside it. */
.page--form > .form-card.delete-confirmation {
    max-inline-size: var(--size-form-max);
}

.delete-confirmation > .page-head {
    margin-block-end: 0;
}

.delete-confirmation__consequences {
    margin-block: var(--space-4) 0;
    padding-inline-start: var(--space-5);
}

p.delete-confirmation__consequences {
    padding-inline-start: 0;
}

.delete-confirmation__consequences > li + li {
    margin-block-start: var(--space-2);
}

.delete-confirmation__warning {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin-block-start: var(--space-4);
    color: var(--color-feedback-warning-text);
}

/* L-FORM (DESIGN_SPEC › Shared page layouts): the form Card at most 704 px (640 of fields plus the 32 px padding). */
.page--form > .form-card,
.page--form > .form-note {
    max-inline-size: calc(var(--size-form-max) + 2 * var(--space-8));
}

.page--form > .form-note,
.form-card > [data-save-alert],
.form-card > .error-summary {
    margin-block-end: var(--space-5);
}

/* Page header component (DESIGN_SYSTEM › 7; components/page-header). */
.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: flex-end;
    justify-content: space-between;
    margin-block-end: var(--space-stack);
}

.page-head__text {
    flex: 1 1 21.25rem;
    min-inline-size: 0;
}

.page-head__eyebrow {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-block-end: var(--space-2);
    color: var(--color-text-eyebrow);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-label);
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
}

.page-head__sun {
    flex: none;
    inline-size: var(--size-icon-eyebrow);
    block-size: var(--size-icon-eyebrow);
    fill: none;
    stroke: var(--color-icon-sun-stroke);
    stroke-width: 2;
    stroke-linecap: round;
}

.page-head__sun circle {
    fill: var(--color-icon-sun-fill);
    stroke: none;
}

.page-head__lead {
    margin-block-start: var(--space-3);
}

.page-head__notice {
    margin-block-start: var(--space-4);
}

.page-head__aside {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    gap: var(--space-4);
    align-items: stretch;
}

.page-head__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* A group that holds only the hero takes no row (and no gap) where the hero is not shown (T-193). */
@media not (min-width: 75em) {
    .page-head__aside:not(:has(> .page-head__actions)) {
        display: none;
    }
}

.page-head__actions > form {
    display: contents;
}

/* DS-3: a practice question view shows only its h1 on phones. */
.page-head--practice .page-head__eyebrow,
.page-head--practice .page-head__lead {
    display: none;
}

@media (min-width: 47.5em) {
    .page-head__aside {
        flex: 0 1 auto;
        align-items: flex-end;
    }

    .page-head__actions {
        flex-flow: row wrap;
        gap: var(--space-3);
    }

    .page-head--practice .page-head__eyebrow {
        display: flex;
    }

    .page-head--practice .page-head__lead {
        display: block;
    }
}

/* Hero illustration (DESIGN_SYSTEM › 8): hidden below 75em, so its lazy fallback is never fetched. */
.hero {
    display: none;
}

@media (min-width: 75em) {
    .hero {
        display: block;
        align-self: flex-end;
    }

    .hero img {
        display: block;
        inline-size: var(--size-hero-w);
        block-size: auto;
        max-block-size: var(--size-hero-max-h);
        object-fit: contain;
        object-position: bottom;
        mix-blend-mode: multiply;
        mask-image: linear-gradient(to right, transparent, #000 12%, #000 90%, transparent), linear-gradient(transparent, #000 14%, #000 88%, transparent);
        mask-composite: intersect;
    }

    .hero--hero-speak img {
        mask-image: linear-gradient(to right, transparent, #000 14%, #000 80%, transparent), linear-gradient(transparent, #000 14%, #000 88%, transparent);
    }

    .hero--hero-library img {
        inline-size: var(--size-hero-library-w);
    }

    /* The character-free card art fades in from its left and top edges, as in the mockup, so its pale ground never shows as a box. */
    .hero--speak-chat img {
        inline-size: var(--size-speak-chat-w);
        mask-image: linear-gradient(to right, transparent, #000 20%), linear-gradient(transparent, #000 14%, #000 88%, transparent);
    }
}

/* L-LIST and L-DETAIL (DESIGN_SPEC › Shared page layouts). */
@media (min-width: 47.5em) {
    .page--list,
    .page--detail {
        max-inline-size: var(--size-sheet-max);
    }
}

@media (min-width: 68.75em) {
    .page--list,
    .page--detail {
        max-inline-size: var(--size-content-max);
    }
}

/* Breadcrumbs (DESIGN_SYSTEM › 9). */
.breadcrumbs {
    margin-block-end: var(--space-1);
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
    line-height: var(--line-height-meta);
    list-style: none;
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.breadcrumbs__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--size-target-min);
    min-block-size: var(--size-target-min);
    color: var(--color-text-secondary);
}

.breadcrumbs__link:active {
    color: var(--color-text-link-hover);
}

.breadcrumbs__separator {
    padding-inline: var(--space-2);
}

/* Tabs (DESIGN_SYSTEM › 10). */
.sub-nav {
    margin-block-end: var(--space-5);
}

.sub-nav__list {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-1);
    margin: 0;
    padding: 0;
    border-block-end: var(--border-width-hairline) solid var(--color-border-tabs);
    list-style: none;
}

.sub-nav__link {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    min-block-size: var(--size-control-sm);
    margin-block-end: calc(-1 * var(--border-width-hairline));
    padding: 0 var(--space-3);
    border-block-end: var(--border-width-current) solid transparent;
    color: var(--color-text-strong);
    font-size: var(--font-size-16);
    line-height: var(--line-height-label);
    text-decoration-line: none;
}

.sub-nav--review .sub-nav__link {
    font-size: var(--font-size-19);
}

.sub-nav--period .sub-nav__link {
    font-size: var(--font-size-17);
}

.sub-nav__link:active {
    color: var(--color-text-link-hover);
}

.sub-nav__link[aria-current="page"] {
    border-block-end-color: var(--color-border-selected);
    color: var(--color-text-current);
    font-weight: var(--font-weight-bold);
}

/* The due count after each Review kind, in words ("19 due"). */
.sub-nav__count {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
    font-variant-numeric: var(--font-numeric-tabular);
}

@media (hover: hover) and (pointer: fine) {
    .sub-nav__link:hover {
        color: var(--color-text-link);
    }

    .breadcrumbs__link:hover {
        color: var(--color-text-link-hover);
    }
}

/* The Library row's rule spans its tabs only; they fit one line on desktop (T-179, NOTES). */
@media (min-width: 47.5em) {
    .sub-nav__link {
        padding-inline: var(--space-4);
    }

    .sub-nav--library .sub-nav__list {
        inline-size: fit-content;
        max-inline-size: 100%;
    }
}

/* Empty state (DESIGN_SYSTEM › 38): the dashed card, centred; the inline variant is a meta line. */
.empty-state {
    margin-block-start: var(--space-section);
    padding: var(--space-8);
    border: var(--border-width-hairline) dashed var(--color-border-dashed);
    border-radius: var(--radius-row);
    background-color: var(--color-bg-surface);
    color: var(--color-text-tertiary);
    text-align: center;
}

.empty-state > h2 {
    color: var(--color-text-primary);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-label);
    letter-spacing: var(--letter-spacing-title);
}

.empty-state > h2 + p {
    margin: var(--space-2) auto 0;
}

.empty-state--inline {
    margin-block-start: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
    line-height: var(--line-height-meta);
    text-align: start;
}

/* Form field (DESIGN_SYSTEM › Form field). */
.form-field__required {
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-regular);
}

/* L-FORM actions. */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-6);
}

.form-actions > .link-standalone {
    align-self: flex-start;
}

/* Edit forms end with a 1 px rule and the danger link. */
.form-danger {
    margin-block-start: var(--space-section);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-width-hairline) solid var(--color-border-tabs);
}

@media (min-width: 47.5em) {
    .form-actions {
        flex-direction: row;
        gap: var(--space-3) var(--space-5);
        align-items: center;
    }
}

.form-field__hint {
    margin-block: calc(var(--space-2) * -1 + var(--space-1)) var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
    line-height: var(--line-height-meta);
}

/* Field groups. */
.form-field--group {
    min-inline-size: 0;
    margin-inline: 0;
    padding: 0;
    border: 0;
}

.form-field--group > .form-field__label {
    padding: 0;
}

/* Select (DESIGN_SYSTEM › Select). */
.select {
    position: relative;
    display: block;
}

.select__control {
    padding-inline-end: var(--size-target-min);
    appearance: none;
}

.select__icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(3.5 * var(--space-1));
    color: var(--color-text-strong);
    pointer-events: none;
    transform: translateY(-50%);
}

/* Checkbox and radio (DESIGN_SYSTEM › Checkbox and radio). */
.choice-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-block-start: var(--space-2);
}

/* Inline radios (SCR-11's "Save as" Word / Phrase). */
.choice-list--inline {
    flex-flow: row wrap;
    column-gap: var(--space-5);
}

.choice {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-block-size: var(--size-target-min);
    cursor: pointer;
}

.choice__control {
    position: relative;
    flex: none;
    inline-size: var(--size-checkbox);
    block-size: var(--size-checkbox);
    margin: 0;
    border: var(--border-width-control) solid var(--color-border-control);
    background-color: var(--color-bg-field);
    cursor: pointer;
    appearance: none;
}

.choice__control[type="checkbox"] {
    border-radius: var(--radius-small);
}

.choice__control[type="radio"] {
    border-radius: var(--radius-round);
}

.choice__control:active {
    background-color: var(--color-bg-current);
}

.choice__control[type="checkbox"]:checked {
    border-color: var(--color-border-selected);
    background-color: var(--color-border-selected);
}

/* The tick: two 2 px borders of a rotated box. */
.choice__control[type="checkbox"]:checked::before {
    position: absolute;
    inset-block-start: 15%;
    inset-inline-start: 32%;
    inline-size: 30%;
    block-size: 55%;
    border: solid var(--color-text-inverse);
    border-width: 0 var(--border-width-selected) var(--border-width-selected) 0;
    content: "";
    transform: rotate(45deg);
    animation: choice-in var(--motion-duration-press) var(--motion-ease-enter);
}

.choice__control[type="radio"]:checked {
    border: var(--border-width-selected) solid var(--color-border-selected);
}

/* The dot: a 6 px border on a zero-size pseudo-element. */
.choice__control[type="radio"]:checked::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 0;
    block-size: 0;
    border: calc(var(--space-1) + var(--space-1) / 2) solid var(--color-border-selected);
    border-radius: var(--radius-round);
    content: "";
    transform: translate(-50%, -50%);
}

.choice__control[aria-invalid="true"] {
    border-color: var(--color-border-invalid);
}

@keyframes choice-in {
    from {
        opacity: 0;
        transform: rotate(45deg) scale(0.6);
    }
}

@media (hover: hover) and (pointer: fine) {
    .choice__control:hover {
        border-color: var(--color-border-control-hover);
    }

    .choice__control:checked:hover {
        border-color: var(--color-border-selected);
    }
}

/* Form error summary (DESIGN_SYSTEM › 36): the error notice's look, focused on load, a link per field. */
.error-summary {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    border-inline-start: var(--border-width-note) solid var(--color-feedback-error-border);
    border-radius: var(--radius-row);
    background-color: var(--color-feedback-error-bg);
}

.error-summary__icon {
    margin-block-start: calc((var(--line-height-body) * var(--font-size-17) - var(--size-icon-control)) / 2);
    color: var(--color-feedback-error-icon);
}

.error-summary__title {
    color: var(--color-feedback-error-text);
    font-size: var(--font-size-17);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-normal);
}

.error-summary__list {
    margin: var(--space-2) 0 0;
    padding-inline-start: var(--space-5);
}

/* Busy state. */
.utility-item[aria-disabled="true"],
.account-menu__item[aria-disabled="true"] {
    cursor: progress;
}

.busy-line {
    margin-block: var(--space-2) 0;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-14);
    line-height: var(--line-height-meta);
}

/* Disclosure, quiet variant (DESIGN_SYSTEM › Disclosure). */
.disclosure__summary {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    min-block-size: var(--size-control-sm);
    padding: var(--space-2) calc(var(--space-3) + var(--space-1) / 2);
    border-radius: var(--radius-input);
    color: var(--color-action-quiet-text);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-label);
    list-style: none;
    cursor: pointer;
    transition: transform var(--motion-duration-press) var(--motion-ease-enter);
}

.disclosure__summary::-webkit-details-marker {
    display: none;
}

.disclosure__summary:active {
    background-color: var(--color-bg-current);
    transform: translateY(calc(-1 * var(--motion-distance-lift)));
}

.disclosure__chevron {
    transition: transform var(--motion-duration-hover-out) var(--motion-ease-standard);
}

.disclosure[open] > .disclosure__summary .disclosure__chevron {
    transform: rotate(180deg);
}

/* Open: the label swaps "Show" for "Hide" through two spans. */
.disclosure[open] .disclosure__show,
.disclosure:not([open]) .disclosure__hide {
    display: none;
}

.disclosure[open] > :not(summary) {
    animation: disclosure-reveal var(--motion-duration-reveal) var(--motion-ease-enter);
}

@keyframes disclosure-reveal {
    from {
        opacity: var(--opacity-hidden);
    }

    to {
        opacity: var(--opacity-visible);
    }
}

/* Text input, search variant (DESIGN_SYSTEM › Text input). */
.search-input {
    position: relative;
    display: block;
}

.search-input__icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--space-3) + var(--space-1) / 2);
    color: var(--color-text-secondary);
    pointer-events: none;
    transform: translateY(-50%);
}

.search-input__control {
    padding-inline-start: calc(var(--space-3) + var(--space-1) / 2 + var(--size-icon-control) + var(--space-2));
    appearance: none;
}

/* The EF-22 notice and the result line, above the rows. */
.list-notice,
.result-line {
    margin-block-start: var(--space-5);
}

/* Empty state action, 24 px under its text. */
.empty-state__action {
    margin-block-start: var(--space-5);
}

/* All-done Empty state. */
.empty-state__links {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

/* L-SHEET: the practice page is as wide as its sheet. */
.page--practice {
    max-inline-size: var(--size-sheet-max);
    margin-inline: auto;
}

/* Practice bar (DESIGN_SYSTEM › 6). */
.practice-bar {
    align-items: center;
}

.practice-bar--top {
    display: contents;
}

.practice-bar__exit {
    gap: var(--space-2);
    justify-self: start;
    font-size: var(--font-size-17);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-label);
}

.practice-bar__position {
    color: var(--color-text-secondary);
    font-size: var(--font-size-17);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
    line-height: var(--line-height-label);
    text-align: center;
    text-wrap: balance;
}

.practice-bar--main,
.shell--practice .shell__brand {
    display: none;
}

@media (min-width: 47.5em) {
    .practice-bar--top {
        display: none;
    }

    .shell--practice .shell__brand {
        display: flex;
    }

    .shell--practice .shell__header {
        border-block-end: 0;
    }

    /* Practice mode: the 44 px Practice bar row takes main's top padding (NOTES › T-149). */
    .shell--practice .site-main {
        padding-block-start: 0;
    }

    .practice-bar--main {
        display: flex;
        gap: var(--space-3);
        justify-content: space-between;
        min-block-size: var(--size-control-sm);
        margin-block-end: var(--space-2);
    }

    .practice-bar__run {
        margin: 0;
    }

}

/* Plan progress bar (DESIGN_SYSTEM › 19): plan 9 px up to 344 px; part 6 px up to 200 px. */
.bar {
    display: block;
    inline-size: 100%;
    max-inline-size: 15rem;
    block-size: var(--size-bar-height);
    overflow: hidden;
    border-radius: var(--radius-button);
    background-color: var(--color-bar-track);
}

.bar--plan {
    max-inline-size: var(--size-plan-bar-max);
}

.bar--part {
    max-inline-size: 12.5rem;
    block-size: var(--size-bar-height-sm);
}

.bar__fill {
    display: block;
    block-size: 100%;
    background-color: var(--color-bar-fill);
    transform-origin: left center;
    transition: transform var(--motion-duration-progress) var(--motion-ease-standard);
}

.bar--done .bar__fill {
    background-color: var(--color-bar-fill-done);
}

.bar-fill--p0 {
    transform: scaleX(0);
}

.bar-fill--p1 {
    transform: scaleX(0.01);
}

.bar-fill--p2 {
    transform: scaleX(0.02);
}

.bar-fill--p3 {
    transform: scaleX(0.03);
}

.bar-fill--p4 {
    transform: scaleX(0.04);
}

.bar-fill--p5 {
    transform: scaleX(0.05);
}

.bar-fill--p6 {
    transform: scaleX(0.06);
}

.bar-fill--p7 {
    transform: scaleX(0.07);
}

.bar-fill--p8 {
    transform: scaleX(0.08);
}

.bar-fill--p9 {
    transform: scaleX(0.09);
}

.bar-fill--p10 {
    transform: scaleX(0.1);
}

.bar-fill--p11 {
    transform: scaleX(0.11);
}

.bar-fill--p12 {
    transform: scaleX(0.12);
}

.bar-fill--p13 {
    transform: scaleX(0.13);
}

.bar-fill--p14 {
    transform: scaleX(0.14);
}

.bar-fill--p15 {
    transform: scaleX(0.15);
}

.bar-fill--p16 {
    transform: scaleX(0.16);
}

.bar-fill--p17 {
    transform: scaleX(0.17);
}

.bar-fill--p18 {
    transform: scaleX(0.18);
}

.bar-fill--p19 {
    transform: scaleX(0.19);
}

.bar-fill--p20 {
    transform: scaleX(0.2);
}

.bar-fill--p21 {
    transform: scaleX(0.21);
}

.bar-fill--p22 {
    transform: scaleX(0.22);
}

.bar-fill--p23 {
    transform: scaleX(0.23);
}

.bar-fill--p24 {
    transform: scaleX(0.24);
}

.bar-fill--p25 {
    transform: scaleX(0.25);
}

.bar-fill--p26 {
    transform: scaleX(0.26);
}

.bar-fill--p27 {
    transform: scaleX(0.27);
}

.bar-fill--p28 {
    transform: scaleX(0.28);
}

.bar-fill--p29 {
    transform: scaleX(0.29);
}

.bar-fill--p30 {
    transform: scaleX(0.3);
}

.bar-fill--p31 {
    transform: scaleX(0.31);
}

.bar-fill--p32 {
    transform: scaleX(0.32);
}

.bar-fill--p33 {
    transform: scaleX(0.33);
}

.bar-fill--p34 {
    transform: scaleX(0.34);
}

.bar-fill--p35 {
    transform: scaleX(0.35);
}

.bar-fill--p36 {
    transform: scaleX(0.36);
}

.bar-fill--p37 {
    transform: scaleX(0.37);
}

.bar-fill--p38 {
    transform: scaleX(0.38);
}

.bar-fill--p39 {
    transform: scaleX(0.39);
}

.bar-fill--p40 {
    transform: scaleX(0.4);
}

.bar-fill--p41 {
    transform: scaleX(0.41);
}

.bar-fill--p42 {
    transform: scaleX(0.42);
}

.bar-fill--p43 {
    transform: scaleX(0.43);
}

.bar-fill--p44 {
    transform: scaleX(0.44);
}

.bar-fill--p45 {
    transform: scaleX(0.45);
}

.bar-fill--p46 {
    transform: scaleX(0.46);
}

.bar-fill--p47 {
    transform: scaleX(0.47);
}

.bar-fill--p48 {
    transform: scaleX(0.48);
}

.bar-fill--p49 {
    transform: scaleX(0.49);
}

.bar-fill--p50 {
    transform: scaleX(0.5);
}

.bar-fill--p51 {
    transform: scaleX(0.51);
}

.bar-fill--p52 {
    transform: scaleX(0.52);
}

.bar-fill--p53 {
    transform: scaleX(0.53);
}

.bar-fill--p54 {
    transform: scaleX(0.54);
}

.bar-fill--p55 {
    transform: scaleX(0.55);
}

.bar-fill--p56 {
    transform: scaleX(0.56);
}

.bar-fill--p57 {
    transform: scaleX(0.57);
}

.bar-fill--p58 {
    transform: scaleX(0.58);
}

.bar-fill--p59 {
    transform: scaleX(0.59);
}

.bar-fill--p60 {
    transform: scaleX(0.6);
}

.bar-fill--p61 {
    transform: scaleX(0.61);
}

.bar-fill--p62 {
    transform: scaleX(0.62);
}

.bar-fill--p63 {
    transform: scaleX(0.63);
}

.bar-fill--p64 {
    transform: scaleX(0.64);
}

.bar-fill--p65 {
    transform: scaleX(0.65);
}

.bar-fill--p66 {
    transform: scaleX(0.66);
}

.bar-fill--p67 {
    transform: scaleX(0.67);
}

.bar-fill--p68 {
    transform: scaleX(0.68);
}

.bar-fill--p69 {
    transform: scaleX(0.69);
}

.bar-fill--p70 {
    transform: scaleX(0.7);
}

.bar-fill--p71 {
    transform: scaleX(0.71);
}

.bar-fill--p72 {
    transform: scaleX(0.72);
}

.bar-fill--p73 {
    transform: scaleX(0.73);
}

.bar-fill--p74 {
    transform: scaleX(0.74);
}

.bar-fill--p75 {
    transform: scaleX(0.75);
}

.bar-fill--p76 {
    transform: scaleX(0.76);
}

.bar-fill--p77 {
    transform: scaleX(0.77);
}

.bar-fill--p78 {
    transform: scaleX(0.78);
}

.bar-fill--p79 {
    transform: scaleX(0.79);
}

.bar-fill--p80 {
    transform: scaleX(0.8);
}

.bar-fill--p81 {
    transform: scaleX(0.81);
}

.bar-fill--p82 {
    transform: scaleX(0.82);
}

.bar-fill--p83 {
    transform: scaleX(0.83);
}

.bar-fill--p84 {
    transform: scaleX(0.84);
}

.bar-fill--p85 {
    transform: scaleX(0.85);
}

.bar-fill--p86 {
    transform: scaleX(0.86);
}

.bar-fill--p87 {
    transform: scaleX(0.87);
}

.bar-fill--p88 {
    transform: scaleX(0.88);
}

.bar-fill--p89 {
    transform: scaleX(0.89);
}

.bar-fill--p90 {
    transform: scaleX(0.9);
}

.bar-fill--p91 {
    transform: scaleX(0.91);
}

.bar-fill--p92 {
    transform: scaleX(0.92);
}

.bar-fill--p93 {
    transform: scaleX(0.93);
}

.bar-fill--p94 {
    transform: scaleX(0.94);
}

.bar-fill--p95 {
    transform: scaleX(0.95);
}

.bar-fill--p96 {
    transform: scaleX(0.96);
}

.bar-fill--p97 {
    transform: scaleX(0.97);
}

.bar-fill--p98 {
    transform: scaleX(0.98);
}

.bar-fill--p99 {
    transform: scaleX(0.99);
}

.bar-fill--p100 {
    transform: scaleX(1);
}

/* Status lines above the sheet. */
.review-status {
    margin-block-end: var(--space-3);
    transition: opacity var(--motion-duration-hover-out) var(--motion-ease-enter);
}

/* Motion › Question change (review.js). */
.page--practice .practice-sheet,
.page--practice .summary {
    transition: opacity var(--motion-duration-hover-in) var(--motion-ease-enter);
}

.page--practice .practice-sheet.is-leaving {
    opacity: var(--opacity-hidden);
    transition: opacity var(--motion-duration-hover-out) var(--motion-ease-exit);
}

.page--practice.is-entering .practice-sheet,
.page--practice.is-entering .summary,
.page--practice.is-entering .review-status {
    opacity: var(--opacity-hidden);
    transition: none;
}

/* The inline alert under the answer buttons when an answer could not be. */
.review-card__error {
    margin-block-start: var(--space-4);
}

.review-card__error .notice__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.review-card__error .notice__body > p {
    margin: 0;
}

/* Practice sheet (DESIGN_SYSTEM › 39), standard: the white r18 sheet, centred, at most 845 px. */
.practice-sheet {
    max-inline-size: var(--size-sheet-max);
    margin-inline: auto;
    padding: var(--space-sheet-block) var(--space-sheet-inline);
    border: var(--border-width-hairline) solid var(--color-border-card);
    border-radius: var(--radius-sheet);
    background-color: var(--color-bg-surface);
    box-shadow: var(--shadow-sheet);
}

.practice-sheet > :first-child {
    margin-block-start: 0;
}

/* Prompt block (DESIGN_SYSTEM › 40). */
.prompt-block {
    margin-block-start: var(--space-1);
    overflow-wrap: anywhere;
}

.prompt-block__position:not(p) {
    display: block;
    padding-block-start: 0;
}

.prompt-block__prompt,
.prompt-block__label {
    display: block;
    color: var(--color-text-primary);
}

.prompt-block__meta {
    margin-block-start: var(--space-2);
}

.prompt-block__instruction,
.prompt-block__label {
    margin-block-start: var(--space-3);
    color: var(--color-text-secondary);
}

/* The repeat label of a missed card at the end of the round. */
.review-card__repeat {
    margin-block-end: var(--space-4);
}

/* Disclosure, reveal variant (DESIGN_SYSTEM › Disclosure). */
.reveal {
    margin-block-start: var(--space-6);
}

/* The quiet "Show answer" (DESIGN_SYSTEM › 14): 20/600 link blue with the chevron, 44 px tall. */
.reveal__summary {
    display: inline-flex;
    gap: var(--space-3);
    align-items: center;
    min-block-size: var(--size-control-sm);
    margin-inline-start: calc(-1 * calc(3.5 * var(--space-1)));
    padding: calc(1.5 * var(--space-1)) calc(3.5 * var(--space-1));
    border: var(--border-width-control) solid transparent;
    border-radius: var(--radius-input);
    color: var(--color-text-link);
    font-family: var(--font-family-base);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    list-style: none;
    cursor: pointer;
}

.reveal__summary::-webkit-details-marker {
    display: none;
}

.reveal__summary:active {
    background-color: var(--color-bg-current);
}

.reveal__chevron {
    transition: transform var(--motion-duration-chevron) var(--motion-ease-standard);
}

.reveal[open] .reveal__chevron {
    transform: rotate(180deg);
}

.reveal[open] .reveal__show,
.reveal:not([open]) .reveal__hide {
    display: none;
}

.reveal__content {
    margin-block-start: var(--space-3);
    overflow-wrap: anywhere;
    animation: disclosure-reveal var(--motion-duration-reveal) var(--motion-ease-enter);
}

.reveal__heading {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-19);
    font-weight: var(--font-weight-semibold);
}

.review-card__answer {
    margin-block-start: var(--space-2);
}

.review-card__transcription,
.review-card__detail {
    margin-block-start: var(--space-3);
}

@media (hover: hover) and (pointer: fine) {
    .reveal__summary:hover {
        background-color: var(--color-bg-hover-quiet);
    }
}

/* Review card answers (DESIGN_SYSTEM › Review card). */
.review-card__answers {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
}

@media (min-width: 47.5em) {
    .review-card__answers {
        flex-direction: row;
    }

    .review-card__answers > .button {
        min-inline-size: 12rem;
    }
}

/* Practice sheet, inline variant (DESIGN_SYSTEM › Practice sheet). */
.practice-sheet--inline {
    max-inline-size: none;
    margin-inline: 0;
    box-shadow: var(--shadow-card);
}

.practice-sheet--inline + .detail__block {
    margin-block-start: var(--space-6);
}

.item-practice > * + * {
    margin-block-start: var(--space-3);
}

.item-practice__start,
.item-practice__stop {
    margin-block-end: 0;
}

.item-practice__recall > * + * {
    margin-block-start: var(--space-3);
}

.item-practice__recall > .reveal {
    margin-block-start: var(--space-5);
}

.item-practice__front {
    margin-block-end: 0;
    overflow-wrap: anywhere;
}

/* Recall state on item pages (server-rendered at ?mode=practise; display none keeps answers from screen readers). */
main[data-mode="recall"]:not(:has(.review-card details[open])) [data-answer-bearing] {
    display: none;
}

/* Summary (DESIGN_SYSTEM › Summary). */
.summary__sentence {
    margin-block-start: var(--space-3);
}

/* The Summary's plan line. */
.summary__plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-block-start: var(--space-3);
    font-variant-numeric: tabular-nums;
}

.summary__plan > p {
    margin: 0;
}

.summary__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
    margin-block-start: var(--space-6);
}

.summary__actions > .button {
    align-self: stretch;
}

@media (min-width: 47.5em) {
    .summary__actions {
        flex-flow: row wrap;
        gap: var(--space-3) var(--space-5);
        align-items: center;
    }

    .summary__actions > .button {
        align-self: auto;
    }
}

/* Pagination (DESIGN_SYSTEM › 24): "Showing …", Previous, 44 × 44 page links, Next. */
.pagination {
    margin-block-start: var(--space-5);
}

.pagination__showing {
    margin-block-end: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
    font-variant-numeric: var(--font-numeric-tabular);
    line-height: var(--line-height-meta);
}

.pagination__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
}

.pagination__pages {
    display: none;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination__link,
.pagination__current,
.pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--size-target-min);
    min-block-size: var(--size-target-min);
    padding-inline: var(--space-2);
    border-radius: var(--radius-button);
    font-variant-numeric: var(--font-numeric-tabular);
    text-decoration-line: none;
}

.pagination__link:active {
    background-color: var(--color-bg-current);
}

.pagination__current {
    background-color: var(--color-bg-current);
    color: var(--color-text-current);
    font-weight: var(--font-weight-bold);
}

.pagination__gap {
    color: var(--color-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
    .pagination__link:hover {
        background-color: var(--color-bg-hover-quiet);
    }
}

.pagination__summary {
    margin: 0;
    font-variant-numeric: var(--font-numeric-tabular);
}

@media (min-width: 47.5em) {
    .pagination__pages {
        display: flex;
    }

    .pagination__summary {
        display: none;
    }
}

@media (hover: hover) and (pointer: fine) {
    .disclosure__summary:hover {
        background-color: var(--color-action-quiet-bg-hover);
        color: var(--color-text-link-hover);
    }

    .disclosure__summary:hover:active {
        background-color: var(--color-bg-current);
    }
}

/* Content variants (typed answers, examples): 56 px at 20 px; textareas at least 120 px. */
.text-input--content {
    min-block-size: var(--size-control-lg);
}

.text-input--content,
.textarea--content {
    font-size: var(--font-size-20);
    line-height: var(--line-height-meta);
}

.textarea {
    display: block;
    min-block-size: var(--size-textarea-min);
    padding-block: var(--space-3);
    line-height: var(--line-height-body);
    resize: vertical;
}

.textarea--short {
    min-block-size: auto;
}

/* Grows with its text up to 24rem. */
.textarea--grow {
    max-block-size: 24rem;
    field-sizing: content;
}

/* The counter under a long field. */
.field-counter {
    margin-block: var(--space-2) 0;
    max-inline-size: none;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-15);
    line-height: var(--line-height-meta);
    text-align: end;
}

.field-counter--over {
    color: var(--color-feedback-error-text);
}

/* SCR-22, SCR-25. */
.item-form > .form-field + .picker,
.item-form > .picker + .item-form__details {
    margin-block-start: var(--space-5);
}

.item-form__details-body {
    margin-block-start: var(--space-3);
}

.item-form__details-body > .form-field + .form-field {
    margin-block-start: var(--space-5);
}

/* Linked-items picker (DESIGN_SYSTEM › 34). */
.picker__filter {
    margin-block-end: var(--space-3);
}

.picker__count,
.picker__limit {
    margin-block-end: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
}

.picker__list {
    max-block-size: var(--size-picker-max);
    overflow-y: auto;
    border: var(--border-width-control) solid var(--color-border-control);
    border-radius: var(--radius-row);
    background-color: var(--color-bg-field);
    scroll-padding-block: var(--space-2);
}

.picker__row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-block-size: var(--size-control-lg);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
}

.picker__row + .picker__row {
    border-block-start: var(--border-width-hairline) solid var(--color-border-tabs);
}

.picker__row:has(:checked) {
    background-color: var(--color-bg-current);
}

.picker__row[hidden] {
    display: none;
}

.picker__row .choice__control:focus-visible {
    outline-offset: var(--focus-ring-offset-inset);
}

.picker__text {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.picker__english {
    font-size: var(--font-size-17);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-label);
}

.picker__translation {
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
    line-height: var(--line-height-meta);
}

/* At the 50-item limit the unticked boxes are disabled. */
.picker__row:has(.choice__control:disabled) {
    color: var(--color-disabled-text);
    cursor: not-allowed;
}

.picker__row .choice__control:disabled {
    border-style: dashed;
    border-color: var(--color-disabled-border);
    background-color: var(--color-disabled-bg);
    cursor: not-allowed;
}

.picker__no-match {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
}

/* Tag rows (DS-11; form-checks.js): one white 44 px row per tag under the input, 8 px apart. */
.tag-rows {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-rows:not(:empty) {
    margin-block-start: var(--space-2);
}

.tag-rows > li {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    min-block-size: var(--size-control-sm);
    padding-inline-start: var(--space-4);
    border: var(--border-width-hairline) solid var(--color-border-card);
    border-radius: var(--radius-input);
    background-color: var(--color-bg-surface);
    overflow-wrap: anywhere;
}

/* Windows contrast themes. */
@media (forced-colors: active) {
    :focus-visible {
        outline-color: Highlight;
    }

    .skip-link {
        border-color: CanvasText;
    }

    .main-nav--bottom .main-nav__link[aria-current="page"]::before {
        border-color: Highlight;
    }

    .main-nav__count {
        border: var(--border-width-hairline) solid CanvasText;
    }

    /* The current navigation item adds a 3 px Highlight edge. */
    .main-nav--header .main-nav__link[aria-current="page"],
    .utility-item[aria-current="page"] {
        border-inline-start: var(--border-width-current) solid Highlight;
    }

    .notice,
    .error-summary {
        border: var(--border-width-hairline) solid CanvasText;
        border-inline-start-width: var(--border-width-note);
    }

    .select__control,
    .choice__control {
        appearance: auto;
    }

    .select__icon {
        display: none;
    }

    /* Flat bar: the track keeps an outline and the fill is the highlight. */
    .bar {
        outline: var(--border-width-hairline) solid CanvasText;
    }

    .bar__fill,
    .bar--done .bar__fill {
        background-color: Highlight;
        forced-color-adjust: none;
    }

    .sub-nav__link[aria-current="page"] {
        border-block-end-color: Highlight;
    }
}

/* Reduced motion is instantaneous everywhere. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: var(--motion-duration-instant) !important;
        animation-iteration-count: 1 !important;
        transition-duration: var(--motion-duration-instant) !important;
        scroll-behavior: auto !important;
    }
}