/* Fluent (Fluency Tracker) — tokens, base, components. Mobile-first, light theme only (FEATURES F-60). Values from mockups/. */

/* ---- Fonts ------------------------------------------------------------------------------- */

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("../fonts/figtree-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;
}

/* ---- Tokens ------------------------------------------------------------------------------ */

:root {
    color-scheme: light;

    /* Surfaces and text */
    --color-bg: #f1f2f4;
    --color-surface: #ffffff;
    --color-surface-muted: #e6e8ec;
    --color-border: #d9dce2;
    --color-text: #1b1d22;
    --color-text-muted: #636874;
    --color-primary: #263a5c;
    --color-primary-hover: #1d2e4a;
    --color-primary-contrast: #ffffff;
    --color-link: #2b4e86;
    --color-focus: #3d6fdb;
    --color-danger: #b3261e;
    --color-danger-soft: #fbe3e1;
    --color-success: #3f5c2a;
    --color-success-soft: #e3ecd8;
    --color-filter-chip: #dbe8f8;

    /* Skills: solid colour and soft tint (chips, tiles) */
    --color-listening: #4a6532;
    --color-listening-soft: #e3ecd8;
    --color-listening-ink: #4a6532; /* text on the soft tint, WCAG AA */
    --color-reading: #3f86c4;
    --color-reading-soft: #dcebf8;
    --color-reading-ink: #326b9d; /* text on the soft tint, WCAG AA */
    --color-speaking: #d98a3d;
    --color-speaking-soft: #fbe8c8;
    --color-speaking-ink: #8f5b28; /* text on the soft tint, WCAG AA */
    --color-writing: #9a6aa8;
    --color-writing-soft: #f1e1f4;
    --color-writing-ink: #7a4a88; /* text on the soft tint, WCAG AA */
    --color-unattributed: #c9cbc6;

    /* Heatmap shades, none to most */
    --color-heat-0: #e4e6e1;
    --color-heat-1: #c5d9a9;
    --color-heat-2: #8fae63;
    --color-heat-3: #4f6e33;
    --color-heat-4: #2c3f1d;

    /* Roadmap levels 1–7 (F-42): solid, and the soft tint used for cards and upcoming levels */
    --color-level-1: #c0504d;
    --color-level-1-soft: #f6dedd;
    --color-level-1-ink: #a54542; /* text on the soft tint, WCAG AA */
    --color-level-2: #b9506e;
    --color-level-2-soft: #f5dde5;
    --color-level-2-ink: #9f455f; /* text on the soft tint, WCAG AA */
    --color-level-3: #9b59b0;
    --color-level-3-soft: #ecdff2;
    --color-level-3-ink: #854d97; /* text on the soft tint, WCAG AA */
    --color-level-4: #4c79c4;
    --color-level-4-soft: #dde7f7;
    --color-level-4-ink: #4066a5; /* text on the soft tint, WCAG AA */
    --color-level-5: #2a9d9d;
    --color-level-5-soft: #d6efef;
    --color-level-5-ink: #1e7171; /* text on the soft tint, WCAG AA */
    --color-level-6: #3f8f5a;
    --color-level-6-soft: #d9eedf;
    --color-level-6-ink: #327248; /* text on the soft tint, WCAG AA */
    --color-level-7: #7fb069;
    --color-level-7-soft: #e3efd9;
    --color-level-7-ink: #517143; /* text on the soft tint, WCAG AA */

    /* Streak card */
    --color-streak: #b5782a;
    --color-streak-soft: #fbe9be;
    --color-streak-ink: #6b4a14; /* text on the soft tint, WCAG AA */

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Radii */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-full: 999px;

    /* Type */
    --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.9375rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.375rem;
    --font-size-xl: 1.75rem;
    --font-size-2xl: 2.5rem;

    /* Sizing */
    --tap-target: 44px;
    /* Desktop uses the full page width; narrow pages (sign-in, editors, the log form) set their own max-width. */
    --content-max: none;
    --tabbar-height: 64px;
}

/* ---- Base -------------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    line-height: 1.45;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

a {
    color: var(--color-link);
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* ---- App shell (F-63) -------------------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + env(safe-area-inset-top));
    padding-left: calc(var(--space-4) + env(safe-area-inset-left));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right));
}

.topbar__brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    font-size: var(--font-size-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-decoration: none;
}

.topbar__nav {
    display: none;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.topbar .topbar__log {
    display: none;
}

.topbar__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    text-decoration: none;
}

.topbar__link[aria-current="page"] {
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-weight: 700;
}

/* Language switcher: a <details> menu, so it works without JS. */
.switcher {
    position: relative;
}

.switcher__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: 0 var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

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

.switcher__chevron {
    width: 16px;
    height: 16px;
}

.switcher__menu {
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 220px;
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgb(20 30 50 / 0.16);
}

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

.switcher__option,
.switcher__manage {
    display: flex;
    align-items: center;
    min-height: var(--tap-target);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
}

.switcher__option[aria-current="true"] {
    font-weight: 700;
    background: var(--color-bg);
}

.switcher__manage {
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    color: var(--color-link);
}

/* Bottom tab bar (phones). */
.tabbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    padding: var(--space-2) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.tabbar__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-target);
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    text-decoration: none;
}

.tabbar__link[aria-current="page"] {
    color: var(--color-text);
    font-weight: 700;
}

.tabbar__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: -2px;
    width: 40px;
    height: 5px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
}

/* Floating + Log (phones), above the tab bar and clear of the safe area. */
.fab {
    position: fixed;
    right: calc(var(--space-4) + env(safe-area-inset-right));
    bottom: calc(var(--tabbar-height) + var(--space-4) + env(safe-area-inset-bottom));
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 56px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px rgb(20 30 50 / 0.28);
}

.app-main {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-4) var(--space-6);
    padding-left: calc(var(--space-4) + env(safe-area-inset-left));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right));
}

.has-nav .app-main {
    padding-bottom: calc(var(--tabbar-height) + 96px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
    .topbar:not(.topbar--plain) {
        gap: var(--space-5);
        padding: var(--space-4) var(--space-6);
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
    }

    .topbar__nav {
        display: flex;
        gap: var(--space-2);
    }

    .topbar .topbar__log {
        display: inline-flex;
    }

    .tabbar,
    .fab {
        display: none;
    }

    .app-main {
        padding: var(--space-6) var(--space-6) var(--space-7);
    }

    .has-nav .app-main {
        padding-bottom: var(--space-7);
    }
}

/* ---- Page headings ----------------------------------------------------------------------- */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-2) 0 var(--space-5);
}

.page-head__title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
}

.page-head__sub {
    flex-basis: 100%;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.page-head__actions {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

.back-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
}

.section-title {
    margin: var(--space-6) 0 var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.muted {
    color: var(--color-text-muted);
}

/* ---- Cards ------------------------------------------------------------------------------- */

.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.card + .card {
    margin-top: var(--space-4);
}

.card__title {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.card--narrow {
    max-width: 520px;
    margin: var(--space-4) auto;
}

.card--danger {
    border: 1.5px solid var(--color-danger-soft);
}

.empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}

/* ---- Buttons ----------------------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: 0 var(--space-5);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.button[hidden] {
    display: none;
}

.button:hover {
    background: var(--color-surface-muted);
}

.button--primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.button--primary:hover {
    background: var(--color-primary-hover);
}

.button--danger {
    border-color: var(--color-danger);
    background: var(--color-danger);
    color: #fff;
}

.button--block {
    width: 100%;
    min-height: 56px;
    font-size: var(--font-size-lg);
}

.button--small {
    position: relative;
    min-height: 36px;
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
}

/* Looks 36px tall, but the tap target is 44px (F-60). */
.button--small::after {
    content: "";
    position: absolute;
    inset: -4px 0;
}

.button--link {
    border: 0;
    background: none;
    color: var(--color-link);
    padding: 0 var(--space-2);
}

.button--link:hover {
    background: none;
    text-decoration: underline;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.inline-form {
    display: inline;
}

/* ---- Forms ------------------------------------------------------------------------------- */

.form {
    display: grid;
    gap: var(--space-4);
}

.field {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.field__label {
    font-size: var(--font-size-md);
    font-weight: 600;
}

.field__optional {
    color: var(--color-text-muted);
    font-weight: 400;
}

.field__hint {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.field__error,
.validation-summary-errors {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: var(--space-5);
}

.validation-summary-valid {
    display: none;
}

.input,
.select,
.textarea {
    width: 100%;
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgb(61 111 219 / 0.4);
}

/* Keyboard users can jump past the nav (F-60); shown only when focused. */
.skip-link {
    position: absolute;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    top: var(--space-2);
    left: var(--space-2);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

.input-validation-error {
    border-color: var(--color-danger);
}

.textarea {
    min-height: 120px;
    resize: vertical;
}

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231b1d22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right var(--space-4) center;
    background-repeat: no-repeat;
    background-size: 18px;
    padding-right: var(--space-7);
}

.input-unit {
    position: relative;
}

.input-unit .input {
    padding-right: 3.5rem;
}

.input-unit__suffix {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-target);
    cursor: pointer;
}

.checkbox input {
    width: 22px;
    height: 22px;
    accent-color: var(--color-primary);
}

/* Segmented control and chips are radio/checkbox labels, so they work without JS. */
.segmented {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

.segmented__option {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 56px;
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
    cursor: pointer;
}

.segmented__option strong {
    display: block;
    color: var(--color-text);
    font-size: var(--font-size-lg);
}

.segmented__option input,
.chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented__option:has(input:checked) {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 2px 6px rgb(20 30 50 / 0.12);
}

.segmented__option:has(input:focus-visible),
.chip:has(input:focus-visible) {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: 0 var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-md);
    text-decoration: none;
    cursor: pointer;
}

.chip:has(input:checked),
.chip--active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 700;
}

.chip--filter {
    border-color: transparent;
    background: var(--color-filter-chip);
    color: var(--color-link);
}

/* ---- Lists (settings, languages, categories) --------------------------------------------- */

.list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    min-height: 64px;
    padding: var(--space-3) var(--space-5);
}

.list__item + .list__item {
    border-top: 1px solid var(--color-bg);
}

.list__main {
    flex: 1 1 12rem;
    min-width: 0;
}

.list__title {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}

a.list__title::after {
    content: " ›";
    color: var(--color-text-muted);
}

.list__meta {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.list__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 64px;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
}

.list__link::after {
    content: "›";
    color: var(--color-text-muted);
    font-size: var(--font-size-xl);
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 var(--space-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
}

.badge--soft {
    border-color: transparent;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.badge--success {
    border-color: transparent;
    background: var(--color-success-soft);
    color: var(--color-success);
}

.badge--danger {
    border-color: transparent;
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* ---- Tables (admin, log on desktop) ------------------------------------------------------ */

.table-wrap {
    /* relative: absolutely positioned children (visually hidden labels) stay inside the scroller, not past the page edge */
    position: relative;
    overflow-x: auto;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.table th {
    padding: var(--space-4) var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
}

.table td {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-bg);
    vertical-align: middle;
}

.table .num {
    text-align: right;
    white-space: nowrap;
}

/* ---- Flash / toast ----------------------------------------------------------------------- */

.flash {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-weight: 600;
}

.flash--toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--tabbar-height) + 96px + env(safe-area-inset-bottom));
    z-index: 30;
    max-width: calc(100% - 2 * var(--space-4));
    margin: 0;
    transform: translateX(-50%);
    box-shadow: 0 10px 24px rgb(20 30 50 / 0.2);
    transition: opacity 0.3s;
}

.flash--hidden {
    opacity: 0;
}

@media (min-width: 900px) {
    .flash--toast {
        bottom: var(--space-6);
    }
}

.alert {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.code-box {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-size: var(--font-size-xl);
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ---- Auth pages -------------------------------------------------------------------------- */

.auth {
    max-width: 440px;
    margin: var(--space-4) auto;
}

.auth__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-2xl);
    font-weight: 800;
}

.auth__lead {
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
}

.auth__footer {
    margin-top: var(--space-5);
    color: var(--color-text-muted);
    text-align: center;
}

/* ---- Dashboard greeting (F-39) ----------------------------------------------------------- */

.greeting {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin: var(--space-2) 0 var(--space-5);
}

.greeting__hello {
    flex-basis: 100%;
    font-size: var(--font-size-2xl);
    font-weight: 800;
}

.greeting__goal {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

@media (min-width: 900px) {
    .greeting__hello {
        flex-basis: auto;
        width: 100%;
    }
}

/* ---- Skills: chips and tiles ------------------------------------------------------------- */

.skill-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    white-space: nowrap;
}

.skill-chip--l { background: var(--color-listening-soft); color: var(--color-listening-ink); }
.skill-chip--r { background: var(--color-reading-soft); color: var(--color-reading-ink); }
.skill-chip--s { background: var(--color-speaking-soft); color: var(--color-speaking-ink); }
.skill-chip--w { background: var(--color-writing-soft); color: var(--color-writing-ink); }

.skill-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

.skill-tile {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-1);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.skill-tile__label {
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.skill-tile__input {
    width: 100%;
    min-height: var(--tap-target);
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-xl);
    font-weight: 800;
    text-align: center;
}

.skill-tile__input:focus {
    outline: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
}

.skill-tile--l.is-filled { background: var(--color-listening-soft); }
.skill-tile--r.is-filled { background: var(--color-reading-soft); }
.skill-tile--s.is-filled { background: var(--color-speaking-soft); }
.skill-tile--w.is-filled { background: var(--color-writing-soft); }

.skill-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
}

/* ---- Log form (F-20) --------------------------------------------------------------------- */

.log-form__columns {
    display: grid;
    gap: var(--space-4);
}

.log-form__column {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.log-form__actions {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.log-form__desktop-cancel {
    display: none;
}

.range {
    width: 100%;
    height: var(--tap-target);
    accent-color: var(--color-listening);
}

.range-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.range-head output {
    font-size: var(--font-size-xl);
    font-weight: 800;
}

@media (min-width: 900px) {
    .log-form {
        max-width: 1100px;
        margin: 0 auto;
    }

    .log-form__columns {
        grid-template-columns: 1.25fr 1fr;
        gap: var(--space-6);
    }

    .log-form__actions {
        grid-auto-flow: column;
        justify-content: end;
    }

    .log-form__actions .button--block {
        width: auto;
        padding: 0 var(--space-6);
    }

    .log-form__desktop-cancel {
        display: inline-flex;
        min-height: 56px;
        padding: 0 var(--space-6);
        font-size: var(--font-size-lg);
    }
}

/* ---- Log list (F-25) --------------------------------------------------------------------- */

.summary-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
}

.summary-bar strong {
    color: var(--color-text);
    font-size: var(--font-size-lg);
}

.summary-bar__progress strong {
    color: var(--color-success);
}

.day {
    margin-bottom: var(--space-5);
}

.day__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 var(--space-2) var(--space-3);
}

.day__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.day__total {
    color: var(--color-text-muted);
}

.entry {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
}

.entry + .entry {
    margin-top: var(--space-3);
}

.entry__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.entry__time {
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-align: right;
}

.entry__category {
    grid-column: 1 / -1;
    color: var(--color-text-muted);
}

.entry__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    grid-column: 1 / -1;
    margin-top: var(--space-2);
}

.log-table {
    display: none;
}

@media (min-width: 900px) {
    .log-cards {
        display: none;
    }

    .log-table {
        display: block;
    }

    .log-table .table td {
        font-size: var(--font-size-md);
    }

    .log-table__group td {
        background: #f6f7f8;
        font-weight: 700;
    }

    .log-table__row {
        position: relative;
        cursor: pointer;
    }

    .log-table__row:hover td {
        background: #fafbfc;
    }

    .log-table__title {
        color: var(--color-text);
        font-weight: 600;
        text-decoration: none;
    }

    .log-table__title::after {
        content: "";
        position: absolute;
        inset: 0;
    }

}

/* ---- Category editor (F-10) -------------------------------------------------------------- */

/* One line per skill: name, share, and its "counts toward progress" checkbox. */
.split-table {
    display: grid;
    margin-top: var(--space-2);
}

.split-table__head,
.split-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 4rem;
    align-items: center;
    gap: var(--space-2);
}

.split-table__head {
    padding-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.2;
}

.split-table__row {
    min-height: 60px;
    border-top: 1px solid var(--color-border);
}

.split-table__skill {
    font-weight: 700;
}

.split-table__share {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.split-table__counts {
    text-align: center;
}

.split-table .stepper__button {
    width: 32px;
}

.split-table .stepper__input {
    width: 3.25rem;
    padding: 0;
}

/* The − / + buttons replace the browser's own spinners, which would eat the room "100" needs. */
.stepper__input {
    appearance: textfield;
    -moz-appearance: textfield;
}

.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.split-summary[hidden] {
    display: none;
}

.split-table__checkbox {
    width: 24px;
    height: 24px;
    margin: 10px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
}

.stepper__button {
    width: var(--tap-target);
    height: var(--tap-target);
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--font-size-lg);
    font-weight: 700;
    cursor: pointer;
}

.stepper__input {
    width: 3.5rem;
    min-height: var(--tap-target);
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    text-align: center;
}

.split-summary {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-weight: 600;
}

.split-summary.is-error {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* ---- Settings hub (F-63) ----------------------------------------------------------------- */

.settings-grid {
    display: grid;
    gap: var(--space-4);
}

/* Cards in the grid are spaced by its gap, not by the stacked-card margin. */
.settings-grid > .card + .card {
    margin-top: 0;
}

.settings-grid__actions {
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 900px) {
    .settings-grid {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .settings-grid__actions {
        grid-column: 1 / -1;
    }
}

/* Starting hours: one compact row per skill (F-05). */
.offset-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-bg);
}

.offset-row__skill {
    grid-column: 1 / -1;
    font-weight: 700;
}

.offset-row__counts,
.offset-row__error {
    grid-column: 1 / -1;
}

.offset-row__counts {
    min-height: 36px;
    font-size: var(--font-size-sm);
}

@media (min-width: 600px) {
    .offset-row {
        grid-template-columns: 6rem 1fr 1fr;
        align-items: center;
    }

    .offset-row__skill {
        grid-column: auto;
    }

    .offset-row__counts {
        grid-column: 2 / -1;
    }
}

.card__lead {
    margin: 0;
}

.card--spaced {
    margin-top: var(--space-5);
}

.card--spaced-bottom {
    margin-bottom: var(--space-5);
}

.button-row--center {
    justify-content: center;
}

/* The date input shows only when "Pick date" is chosen; :has() keeps this working without JS. */
.date-picker {
    display: none;
}

.field:has(input[data-date-choice][value="pick"]:checked) .date-picker {
    display: block;
}

.range--unset {
    opacity: 0.45;
}

/* ---- Log screen (F-25) ------------------------------------------------------------------- */

.log-head {
    display: grid;
    grid-template-areas:
        "title"
        "search"
        "sort";
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-2) 0 var(--space-4);
}

.log-head__title {
    grid-area: title;
    font-size: var(--font-size-2xl);
    font-weight: 800;
}

.log-head__search {
    grid-area: search;
    display: flex;
    gap: var(--space-3);
}

.log-head__sort {
    grid-area: sort;
}

.log-head__filters {
    flex-shrink: 0;
    min-height: 56px;
}

.input--search {
    border-radius: var(--radius-full);
    padding-left: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23636874' stroke-width='2.4'/%3E%3Cpath d='M16.5 16.5L21 21' stroke='%23636874' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: 1.1rem center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.select--compact {
    width: auto;
    min-height: var(--tap-target);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    border-color: transparent;
    background-color: transparent;
    color: var(--color-text-muted);
}

.count-badge {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background: #e8b64c;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.active-chips .chip {
    font-weight: 600;
}

.active-chips__clear {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    padding: 0 var(--space-2);
    font-weight: 600;
}

/* Filters panel: a sidebar on wide screens; inline on phones without JS, a sheet with JS. */
.filters {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
}

.filters__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.filters__head[hidden] {
    display: none;
}

.filters__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.filters__clear {
    font-weight: 600;
    text-decoration: none;
}

.filters__group {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* Stacked: date inputs have a wide built-in minimum and overlap side by side in the 340px sidebar. */
.filters__custom {
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

.filters__custom .input {
    min-width: 0;
}

.filters__group:has(input[data-range][value="custom"]:checked) .filters__custom {
    display: grid;
}

.filters__categories {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filters__category {
    display: grid;
    grid-template-columns: auto 1fr auto;
}

.filters__count {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.chips--small .chip {
    min-height: var(--tap-target);
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
}

.chip--skill {
    border-color: transparent;
    font-weight: 700;
}

.chip--skill-l { background: var(--color-listening-soft); color: var(--color-listening-ink); }
.chip--skill-r { background: var(--color-reading-soft); color: var(--color-reading-ink); }
.chip--skill-s { background: var(--color-speaking-soft); color: var(--color-speaking-ink); }
.chip--skill-w { background: var(--color-writing-soft); color: var(--color-writing-ink); }

.chip--skill:has(input:checked) {
    outline: 2.5px solid currentColor;
    outline-offset: -2.5px;
    background-color: var(--color-surface);
    color: inherit;
}

.chip--skill-l:has(input:checked) { color: var(--color-listening-ink); }
.chip--skill-r:has(input:checked) { color: var(--color-reading-ink); }
.chip--skill-s:has(input:checked) { color: var(--color-speaking-ink); }
.chip--skill-w:has(input:checked) { color: var(--color-writing-ink); }

.segmented--compact .segmented__option {
    min-height: var(--tap-target);
}

.segmented--compact .segmented__option strong {
    font-size: var(--font-size-md);
}

.difficulty-picks {
    display: flex;
    gap: var(--space-2);
}

.difficulty-pick {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tap-target);
    height: var(--tap-target);
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
    font-weight: 700;
    cursor: pointer;
}

.difficulty-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.difficulty-pick:has(input:checked) {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.difficulty-pick:has(input:focus-visible) {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.log-layout__filters {
    margin-bottom: var(--space-4);
}

/* With JS on phones, the filters open in a sheet instead of sitting inline. */
@media (max-width: 899.98px) {
    html.has-js .log-layout__filters {
        display: none;
    }
}

@media (min-width: 900px) {
    .log-layout {
        display: grid;
        grid-template-columns: 340px 1fr;
        align-items: start;
        gap: var(--space-5);
    }

    .log-layout__filters {
        margin: 0;
    }

    /* Sticky with JS only: log-list.js sets --filters-top so a panel taller than the window scrolls with the page
       until its end is in view, then sticks. Without JS it just scrolls with the page. */
    html.has-js .log-layout__filters {
        position: sticky;
        top: var(--filters-top, var(--space-4));
    }

    html.has-js .filters__apply {
        display: none;
    }

    .log-head {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "title search sort";
        margin-top: 0;
    }

    .log-head__filters,
    .active-chips {
        display: none;
    }

    .select--compact {
        border-color: var(--color-border);
        background-color: var(--color-bg);
        color: var(--color-text);
        font-weight: 600;
    }
}

/* ---- Sheet (sheet.js) -------------------------------------------------------------------- */

.sheet {
    width: 100%;
    max-width: 560px;
    max-height: 90dvh;
    margin: auto auto 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-bg);
    color: var(--color-text);
    overflow: auto;
}

.sheet::backdrop {
    background: rgb(20 30 50 / 0.45);
}

.sheet__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg);
}

.sheet__title {
    font-size: var(--font-size-xl);
    font-weight: 800;
}

.sheet__close {
    width: var(--tap-target);
    height: var(--tap-target);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-size: var(--font-size-lg);
    cursor: pointer;
}

.sheet__body {
    padding: 0 var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
}

.sheet .card--narrow {
    margin: 0;
}

@media (min-width: 900px) {
    .sheet {
        margin: auto;
        border-radius: var(--radius-lg);
    }
}

@media (min-width: 900px) {
    .log-table .entry__chips {
        flex-wrap: nowrap;
        margin-top: 0;
    }

    .summary-bar {
        justify-content: flex-start;
        gap: var(--space-7);
    }
}

/* ---- Dashboard (F-39 to F-49) ------------------------------------------------------------ */

.greeting__edit[hidden],
.dashboard__edit-phone[hidden] {
    display: none;
}

.greeting__edit {
    display: none;
}

.dashboard__edit-phone {
    margin-top: var(--space-5);
}

@media (min-width: 900px) {
    .greeting {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "hello edit" "goal edit";
        align-items: end;
    }

    .greeting__hello { grid-area: hello; }
    .greeting__goal { grid-area: goal; }

    .greeting__edit:not([hidden]) {
        display: inline-flex;
        grid-area: edit;
        align-self: center;
    }

    .dashboard__edit-phone {
        display: none;
    }
}

/* Size grid: 4 columns on wide screens, 2 below; small = 1 column, others full width on phones (F-40). */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.widget {
    position: relative;
    grid-column: span 2;
    min-width: 0;
    container-type: inline-size;
}

.widget--small {
    grid-column: span 1;
}

@media (min-width: 900px) {
    .widget-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-5);
    }

    .widget--small { grid-column: span 1; }
    .widget--medium { grid-column: span 2; }
    .widget--large { grid-column: span 3; }
    .widget--full { grid-column: span 4; }
}

.widget-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
}

.widget-card__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
}

.widget-card__title {
    font-size: var(--font-size-xl);
    font-weight: 800;
}

.widget-card__aside {
    font-size: var(--font-size-md);
    text-decoration: none;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: var(--space-2);
    border-radius: var(--radius-full);
}

.dot--l { background: var(--color-listening); }
.dot--r { background: var(--color-reading); }
.dot--s { background: var(--color-speaking); }
.dot--w { background: var(--color-writing); }
.dot--u { background: var(--color-unattributed); }

/* Level colours: soft tint for cards and upcoming levels, solid fill for badges and bars. */
.level-tint-1 { background: var(--color-level-1-soft); color: var(--color-level-1-ink); }
.level-tint-2 { background: var(--color-level-2-soft); color: var(--color-level-2-ink); }
.level-tint-3 { background: var(--color-level-3-soft); color: var(--color-level-3-ink); }
.level-tint-4 { background: var(--color-level-4-soft); color: var(--color-level-4-ink); }
.level-tint-5 { background: var(--color-level-5-soft); color: var(--color-level-5-ink); }
.level-tint-6 { background: var(--color-level-6-soft); color: var(--color-level-6-ink); }
.level-tint-7 { background: var(--color-level-7-soft); color: var(--color-level-7-ink); }
.level-fill-1 { background: var(--color-level-1); color: #fff; }
.level-fill-2 { background: var(--color-level-2); color: #fff; }
.level-fill-3 { background: var(--color-level-3); color: #fff; }
.level-fill-4 { background: var(--color-level-4); color: #fff; }
.level-fill-5 { background: var(--color-level-5); color: #fff; }
.level-fill-6 { background: var(--color-level-6); color: #fff; }
.level-fill-7 { background: var(--color-level-7); color: var(--color-text); } /* white on this light green is 2.5:1 */

/* Level progress card (F-42): the tinted block fills the widget; the breakdown, if shown, sits inside it. */
.level-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius-lg);
}

.level-card {
    display: flex;
    flex: 1;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
}

.level-card__number {
    font-size: clamp(4rem, 14cqi, 7.5rem);
    font-weight: 900;
    line-height: 0.9;
}

.level-card__body {
    display: grid;
    flex: 1;
    gap: var(--space-2);
    min-width: 0;
}

.level-card__eyebrow {
    margin: 0;
    color: var(--color-text);
}

.level-card__name {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: 800;
}

.level-card__bar {
    display: block;
    height: 12px;
    border-radius: var(--radius-full);
    background: rgb(255 255 255 / 0.8);
    overflow: hidden;
}

.level-card__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
}

.level-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--color-text);
}

.level-card__hours {
    display: none;
}

.level-card__breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: calc(-1 * var(--space-3)) 0 0;
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text);
    list-style: none;
}

@container (min-width: 420px) {
    .level-card__name { font-size: var(--font-size-xl); }
    .level-card__hours { display: inline; }
}

@container (max-width: 300px) {
    .level-card { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* Roadmap overview (F-49) */
.roadmap-mini__title {
    font-weight: 700;
}

.roadmap-mini__bars {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: 120px;
}

.roadmap-mini__bar {
    position: relative;
    flex: 1;
    border-radius: var(--radius-sm) var(--radius-sm) 4px 4px;
    background: var(--color-surface-muted);
}

.roadmap-mini__bar.is-reached {
    background: var(--color-success-soft);
}

.roadmap-mini__label {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-align: center;
}

/* Streak (F-43) */
.streak-card {
    background: var(--color-streak-soft);
}

.streak-card__eyebrow,
.streak-card__count,
.streak-card__hint,
.streak-dots__letter {
    color: var(--color-streak-ink);
}

.streak-card__count {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 700;
}

.streak-card__count strong {
    color: var(--color-streak);
    font-size: clamp(3rem, 22cqi, 4.5rem);
    font-weight: 900;
    line-height: 1;
}

.streak-card__hint {
    margin: 0;
    font-weight: 600;
}

.streak-dots {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}

.streak-dots__day {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
}

.streak-dots__dot {
    width: 100%;
    max-width: 34px;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: #fff;
}

.streak-dots__dot--filled { background: var(--color-streak); }
.streak-dots__dot--today { background: #e8c983; box-shadow: inset 0 0 0 2px var(--color-streak); }

.streak-dots__letter {
    font-size: var(--font-size-xs);
    font-weight: 700;
}

/* Goal ring (F-47) */
.goal-ring {
    position: relative;
    width: min(100%, 180px);
    margin: auto;
    /* The text scales with the ring (cqi), so "165 of 60 min" fits a phone-size card too. */
    container-type: inline-size;
}

.goal-ring svg {
    display: block;
    width: 100%;
}

.goal-ring__track,
.goal-ring__value {
    fill: none;
    stroke-width: 12;
}

.goal-ring__track { stroke: var(--color-surface-muted); }

.goal-ring__value {
    stroke: var(--color-listening);
    stroke-linecap: round;
}

.goal-ring__text {
    position: absolute;
    inset: 16%; /* inside the ring's hole, clear of the stroke */
    display: grid;
    place-content: center;
    color: var(--color-text-muted);
    font-size: clamp(0.6875rem, 9cqi, var(--font-size-sm));
    line-height: 1.2;
    text-align: center;
}

.goal-ring__text strong {
    color: var(--color-text);
    font-size: clamp(1.25rem, 22cqi, var(--font-size-2xl));
    font-weight: 800;
    line-height: 1;
}

.goal-ring__check {
    color: var(--color-success);
    font-weight: 800;
}

/* Week summary (F-48): change chip when narrow, daily bars when wide. */
.week-card {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.week-card__numbers {
    display: grid;
    align-content: start;
    gap: var(--space-2);
}

.week-card__total,
.week-card__progress {
    margin: 0;
}

.week-card__total strong {
    font-size: clamp(2.5rem, 12cqi, 3.5rem);
    font-weight: 900;
    line-height: 1;
}

.week-card__change {
    justify-self: start;
}

.week-bars {
    display: none;
    flex: 1;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
    min-height: 140px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.week-bars__day {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    gap: var(--space-1);
}

.week-bars__track {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
}

.week-bars__bar {
    width: 100%;
    min-height: 4px;
    border-radius: var(--radius-sm);
    background: var(--color-listening);
}

.is-future .week-bars__bar { background: var(--color-surface-muted); }
.is-today .week-bars__bar { background: var(--color-heat-2); }

.week-bars__letter {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

@container (min-width: 520px) {
    .week-bars { display: grid; }
    .week-card__change { display: none; }
}

/* Heatmap (F-41): dots in a CSS grid; older weeks hide when the card is narrow, so it never scrolls sideways. */
.heatmap {
    position: relative;
    container-type: inline-size;
}

.heatmap__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
}

.heatmap__title {
    margin-right: auto;
    font-size: var(--font-size-xl);
    font-weight: 800;
}

.heatmap__span {
    display: none;
}

.heatmap__legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
}

.heatmap__legend .hm-dot {
    width: 12px;
}

.heatmap__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 3px;
    margin-top: var(--space-3);
}

.hm-week {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1.2em repeat(7, auto);
    gap: 3px;
    min-width: 0;
}

/* Zero width, so a label like "May" spills over the next columns instead of widening its own. */
.hm-month {
    width: 0;
    overflow: visible;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.hm-dot {
    display: block;
    width: 100%;
    max-width: 22px;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
}

.hm-out { background: transparent; }
.hm-b0 { background: var(--color-heat-0); }
.hm-b1 { background: var(--color-heat-1); }
.hm-b2 { background: var(--color-heat-2); }
.hm-b3 { background: var(--color-heat-3); }
.hm-b4 { background: var(--color-heat-4); }

@container (max-width: 640px) {
    .hm-week--old39 { display: none; }
    .heatmap__span--39 { display: inline; }
}

@container (max-width: 420px) {
    .hm-week--old26 { display: none; }
    .heatmap__span--39 { display: none; }
    .heatmap__span--26 { display: inline; }
}

.hm-tip {
    position: absolute;
    z-index: 5;
    display: grid;
    gap: var(--space-1);
    min-width: 180px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: #fff;
    font-size: var(--font-size-sm);
    transform: translate(-50%, calc(-100% - 8px));
}

.hm-tip[hidden] {
    display: none;
}

.hm-tip a {
    color: #bcd2ff;
    font-weight: 700;
}

/* Where the hours went (F-45) */
.stacked-bar {
    display: flex;
    gap: 3px;
    height: 24px;
    margin: var(--space-2) 0;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.stacked-bar__part {
    width: auto;
    height: 100%;
    margin: 0;
    border-radius: 0;
    flex-basis: 0;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.totals-card__progress {
    margin: auto 0 0;
}

/* Hours by category (F-46) */
.hbars {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.hbars__row {
    display: grid;
    grid-template-columns: minmax(6rem, 38%) 1fr auto;
    align-items: center;
    gap: var(--space-3);
}

.hbars__name {
    overflow: hidden;
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.hbars__name:hover {
    text-decoration: underline;
}

.hbars__track {
    height: 14px;
}

.hbars__bar {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-listening);
}

.hbars__value {
    font-weight: 700;
    white-space: nowrap;
}

/* Edit mode */
.widget__tools {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 3;
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-full);
    background: rgb(255 255 255 / 0.95);
    box-shadow: 0 4px 14px rgb(20 30 50 / 0.18);
}

.widget__tools[hidden] {
    display: none;
}

.widget__tool {
    width: var(--tap-target);
    height: var(--tap-target);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    font: inherit;
    font-size: var(--font-size-lg);
    cursor: pointer;
}

.widget__tool:hover {
    background: var(--color-surface-muted);
}

.widget__drag {
    cursor: grab;
    touch-action: none;
}

.is-editing .widget {
    border-radius: var(--radius-lg);
    outline: 2px dashed var(--color-border);
    outline-offset: 4px;
}

.widget.is-dragging {
    opacity: 0.6;
}

.dashboard__edit-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.dashboard__edit-bar[hidden] {
    display: none;
}

.catalog {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog__item {
    display: grid;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.catalog__item span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.widget-settings {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.field-row--3 {
    grid-template-columns: repeat(3, 1fr);
}

.flash--error {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* Roadmap (F-42) */
.roadmap__title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
}

.roadmap__sub {
    margin: var(--space-1) 0 var(--space-4);
}

.roadmap__levels {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.roadmap__level {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: start;
    gap: var(--space-4);
    padding: var(--space-3);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
}

.roadmap__level.is-current {
    border-color: var(--color-level-4);
    background: var(--color-surface);
}

.roadmap__badge {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-lg);
    font-weight: 800;
}

.roadmap__text {
    display: grid;
    gap: var(--space-1);
}

.roadmap__name {
    font-weight: 700;
}

.roadmap__desc {
    color: var(--color-text-muted);
}

.roadmap__hours {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.roadmap__credit {
    margin: var(--space-4) 0 0;
    font-size: var(--font-size-sm);
}

.sheet .roadmap.card--narrow {
    padding: 0;
    background: transparent;
}

/* On desktop the roadmap sheet is wider and its rows tighter, so all seven levels fit without scrolling on common
   laptop screens down to 1280x720, with a little slack (it still scrolls if the window is very short). */
@media (min-width: 900px) {
    .sheet:has(.roadmap) {
        max-width: 860px;
        max-height: calc(100dvh - 2 * var(--space-4));
    }

    .sheet:has(.roadmap) .sheet__head {
        padding-block: var(--space-2);
    }

    /* card--narrow caps the page version at 520px; in the sheet the levels use the sheet's width. */
    .sheet:has(.roadmap) .roadmap.card--narrow {
        max-width: none;
    }

    .sheet:has(.roadmap) .roadmap__sub {
        margin-bottom: var(--space-3);
    }

    .sheet:has(.roadmap) .roadmap__levels {
        gap: var(--space-1);
    }

    .sheet:has(.roadmap) .roadmap__level {
        grid-template-columns: 40px 1fr auto;
        align-items: center;
        gap: var(--space-3);
        padding: 6px var(--space-3);
    }

    /* Numbers stay 22px bold: large text, which white on levels 4-6 needs for AA contrast. */
    .sheet:has(.roadmap) .roadmap__badge {
        width: 40px;
        height: 40px;
    }

}

/* Not in the roadmap sheet; the credit stays on the full roadmap page (and in the README). */
.sheet .roadmap__credit {
    display: none;
}


/* ---- Media card on the log form (F-20) --------------------------------------------------- */

/* Two-step confirmation (a <details>, so it works without JS): Delete… reveals the real button. */
.confirm {
    margin-top: var(--space-5);
}

.confirm > summary {
    list-style: none;
    cursor: pointer;
}

.confirm > summary::-webkit-details-marker {
    display: none;
}

.confirm__open {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.confirm[open] > .confirm__open {
    opacity: 0.6;
}

.confirm__body {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    margin-top: var(--space-3);
}

.confirm__body p {
    margin: 0;
}

.confirm--menu {
    margin: 0;
}

.confirm--menu .confirm__body {
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
}

/* Error and 404 pages */
.error-page {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
    text-align: center;
}

.error-page__code {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xl);
    font-weight: 800;
}

.error-page__title {
    font-size: var(--font-size-xl);
    font-weight: 800;
}

.error-page .button-row {
    justify-content: center;
}

/* An activity's own page (F-24) */
.activity-view {
    display: grid;
    gap: var(--space-4);
    max-width: 760px;
    margin-inline: auto;
}

.activity-view__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}

.activity-view__title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    overflow-wrap: anywhere;
}

@media (min-width: 900px) {
    .activity-view__title {
        font-size: var(--font-size-2xl);
    }
}

.activity-view__total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.activity-view__total strong {
    font-size: var(--font-size-2xl);
    font-weight: 800;
}

.activity-view__skills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-view__skill {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    font-weight: 700;
}

.activity-view__skill strong {
    font-size: var(--font-size-xl);
}

.activity-view__skill.is-filled {
    background: var(--color-success-soft);
}

.activity-view__no-progress {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.activity-view__media {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    background: var(--color-success-soft);
    color: var(--color-text);
    text-decoration: none;
}

.activity-view__media > span:last-child {
    display: grid;
}

.activity-view__facts {
    display: grid;
    gap: var(--space-4);
    margin: 0;
}

.activity-view__facts dt {
    color: var(--color-text-muted);
}

.activity-view__facts dd {
    margin: var(--space-1) 0 0;
}

.activity-view__url {
    overflow-wrap: anywhere;
}

.activity-view__notes {
    white-space: pre-wrap;
}

.media-card__open {
    display: inline-block;
    margin-bottom: var(--space-3);
    font-weight: 700;
}

/* Link + Fetch (F-23), as in mockups/mobile-log-activity.png */
.url-fetch__row {
    display: flex;
    gap: var(--space-3);
}

.url-fetch__row .input {
    flex: 1;
    min-width: 0;
    border-radius: var(--radius-full);
    background: var(--color-bg);
}

.url-fetch__button {
    flex-shrink: 0;
    border-radius: var(--radius-full);
}

.url-fetch__status {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-weight: 600;
}

.url-fetch__status.is-ok {
    color: var(--color-success);
}

.url-fetch__status.is-ok::before {
    content: "✓ ";
}

.media-card {
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.media-card.is-linked {
    background: var(--color-success-soft);
}

.media-card__summary {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
}

.media-card__summary::-webkit-details-marker {
    display: none;
}

.media-card__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: var(--color-listening);
    color: #fff;
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.media-card:not(.is-linked) .media-card__icon {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.media-card__text {
    display: grid;
    gap: var(--space-1);
}

.media-card__text strong {
    font-size: var(--font-size-lg);
}

.media-card__body {
    display: grid;
    gap: var(--space-3);
    padding: 0 var(--space-5) var(--space-5);
}

.media-card__new {
    display: none;
    gap: var(--space-3);
}

.media-card__body:has(option[value="new"]:checked) .media-card__new {
    display: grid;
}

.media-card__new-pass[hidden],
.media-card__filter[hidden] {
    display: none;
}

/* ---- Media (F-31 to F-33) ---------------------------------------------------------------- */

.media-filters {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.media-head {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-2) 0 var(--space-5);
}

.media-head__text {
    display: grid;
    gap: var(--space-2);
}

.media-head__title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
}

.media-head__url {
    overflow-wrap: anywhere;
    text-decoration: none;
}

.media-head__stats {
    display: flex;
    gap: var(--space-6);
    margin: var(--space-2) 0 0;
}

.media-head__stats div {
    display: flex;
    flex-direction: column-reverse;
}

.media-head__stats dt {
    color: var(--color-text-muted);
}

.media-head__stats dd {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 800;
}

.media-head__actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.media-head__main {
    flex: 1;
    min-height: 56px;
    font-size: var(--font-size-lg);
}

/* A <details> menu, so it works without JS. */
.menu {
    position: relative;
}

.menu__button {
    width: 56px;
    min-height: 56px;
    padding: 0;
    font-size: var(--font-size-xl);
    list-style: none;
}

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

.menu__list {
    position: absolute;
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 230px;
    margin-top: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 12px 32px rgb(20 30 50 / 0.16);
}

.menu__form {
    display: contents;
}

.menu__item {
    display: flex;
    align-items: center;
    min-height: var(--tap-target);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu__item:hover {
    background: var(--color-bg);
}

.menu__item--danger {
    color: var(--color-danger);
}

.media-layout {
    display: grid;
    /* minmax(0, …): a column must not grow to its content's minimum width (the tiles and chart pushed it past 375px). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.media-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* see .media-layout: the tiles and chart canvas mustn't widen the card */
    gap: var(--space-4);
}

.media-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-3);
}

.media-tile {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-md);
}

.media-tile strong {
    font-size: var(--font-size-lg);
}

.media-tile--difficulty {
    background: var(--color-streak-soft);
    color: var(--color-streak-ink);
}

.media-tile--comprehension {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.media-tile__chip {
    justify-self: start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: #fff;
    font-weight: 700;
}

.chart {
    position: relative;
}

.chart__canvas {
    display: none;
}

.chart--drawn .chart__canvas {
    display: block;
}

/* The hidden fallback table keeps its full width (tables ignore width: 1px), so clip it here or it widens the page. */
.chart--drawn {
    overflow: hidden;
}

.media-chart.chart--drawn {
    height: 280px;
}

.chart--drawn .chart__fallback {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.media-passes__title {
    margin-top: 0;
}

.pass-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pass {
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.pass__summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
}

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

.pass__badge {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-size: var(--font-size-lg);
    font-weight: 800;
}

.pass__badge--latest {
    background: var(--color-listening);
    color: #fff;
}

.pass__main,
.pass__metrics {
    display: grid;
    gap: var(--space-1);
}

.pass__metrics {
    text-align: right;
}

.pass__sessions {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0 var(--space-5) var(--space-4);
    list-style: none;
}

.pass__sessions li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
}

.media-passes__note {
    margin-top: var(--space-3);
}

@media (min-width: 900px) {
    .media-head {
        grid-template-columns: 1fr auto;
        align-items: end;
    }

    .media-head__main {
        flex: none;
        padding: 0 var(--space-6);
    }

    .media-layout {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* Recently logged media (F-44) */
.recent-media {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.recent-media__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-3);
    align-items: center;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-bg);
}

.recent-media__title {
    overflow: hidden;
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-media__meta {
    grid-column: 1;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.recent-media__relog {
    grid-row: 1 / span 2;
    grid-column: 2;
}

/* The skip link focuses <main>; no ring around the whole page. */
.app-main:focus {
    outline: none;
}

/* Inline text links that are tap targets on their own (F-60: at least 44px): padding grows the target, and the
   matching negative margin keeps the layout where it was. */
a.list__title,
.widget-card__aside,
.recent-media__title,
a.field__hint {
    padding-block: 12px;
    margin-block: -12px;
}

.widget-card__aside,
a.field__hint {
    display: inline-block;
}

.split-table__hit {
    display: grid;
    place-items: center;
    min-height: var(--tap-target);
    cursor: pointer;
}

/* Admin → Diagnostics */
.diagnostics {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.diagnostics dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.diagnostics dd {
    margin: var(--space-1) 0 0;
    overflow-wrap: anywhere;
}