/* =====================================================================
   Clare design system: shared components ("Instrument", web redesign)
   docs/design/web-redesign-handoff/README.md, "Shared components (spec)",
   and design-system/components/** (React reference, behaviour only).

   Loaded last so ties go to the components; screens adopting a component
   delete or rename the legacy rule it replaces (e.g. .response-action-btn,
   .search-input), never fight it with !important.

   Design tokens only (theme.css), never the transitional aliases. Square
   (radius 0; buttons --radius-1, 2px), flat (only dialogs carry
   --shadow-modal), cobalt (--accent) for guidance and violet (--research)
   for Research only, never both in one rule. Markup is sentence case; the
   mono labels are uppercased here. Screens adopt these in Tasks 4-13.

   State: prefer the ARIA attribute or native state on the control
   (aria-pressed, aria-checked, aria-invalid, aria-disabled, :checked,
   :disabled); use .is-selected only on a host that is not a button and has
   no such state.

   Tones: a component sets its own --c-tone (the field: --c-field-tone) and
   its parts read it with the component's default as the fallback.

   Guarded by tests/js/test_redesign_components.js; the .c- alias guard in
   tests/unit/test_theme_contrast.py reads this file too.
   ===================================================================== */

/* ----- Button: .c-btn (+ size and variant modifiers) ----- */
.c-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-1);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: filter var(--dur-fast) var(--ease-standard);
}
.c-btn--sm { padding: 7px 12px; font-size: 11px; }
.c-btn--md { padding: 10px 16px; font-size: 13px; }
.c-btn--lg { padding: 14px 20px; font-size: 13px; }
.c-btn--block { width: 100%; }

.c-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.c-btn--secondary {
    background: var(--surface-card);
    border-color: var(--border);
    color: var(--text-primary);
}
.c-btn--inverse {
    background: var(--surface-inverse);
    border-color: var(--surface-inverse);
    color: var(--text-inverse);
}
/* On the inverse band (landing CTA). */
.c-btn--outline-inverse {
    background: transparent;
    border-color: var(--text-inverse);
    color: var(--text-inverse);
}
.c-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-primary);
}
.c-btn--danger {
    background: var(--status-danger);
    border-color: var(--status-danger);
    color: var(--danger-ink);
}
/* Outline danger (Settings: Delete account), the fill kept for the dialog's
   own Delete account. */
.c-btn--danger-outline {
    background: transparent;
    border-color: var(--status-danger);
    color: var(--status-danger);
}
/* Ok fill (Sign-up review: Approve this user). */
.c-btn--ok {
    background: var(--status-ok);
    border-color: var(--status-ok);
    color: var(--ok-ink);
}
.c-btn--research {
    background: var(--research);
    border-color: var(--research);
    color: var(--research-ink);
}
.c-btn--research-soft {
    background: var(--research-tint);
    border-color: var(--research);
    color: var(--research);
}
/* A secondary toggle that is on (aria-pressed), e.g. Bookmark once the
   answer is bookmarked: the accent edge and text. */
.c-btn--secondary[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.c-btn:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(1.1); }
/* Brighter, white on the light danger red falls to 4.47:1; darken instead
   (4.99:1 light, 6.17:1 dark, the filter darkening the text too). The ok
   fill likewise (white on a brighter green would fall under 5.2:1). */
.c-btn--danger:hover:not(:disabled):not([aria-disabled="true"]),
.c-btn--ok:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(0.9); }
.c-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    filter: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.c-btn:disabled,
.c-btn[aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
    filter: none;
    text-decoration: none;
}
.c-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* (0,3,0): above research.css's .research-overlay button:focus-visible
   (0,2,1), which would otherwise draw the cobalt ring on a research button. */
.c-btn.c-btn--research:focus-visible,
.c-btn.c-btn--research-soft:focus-visible {
    outline: 2px solid var(--research);
    outline-offset: 2px;
}
.c-btn--outline-inverse:focus-visible { outline-color: var(--text-inverse); }

/* ----- Text input: .c-field ----- */
.c-field {
    --c-field-tone: initial;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.c-field__label {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-field-tone, var(--text-muted));
}
.c-field__input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 11px 12px;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--surface-page);
    border: 1px solid var(--c-field-tone, var(--border-control));
    border-radius: 0;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-standard);
}
textarea.c-field__input { resize: vertical; min-height: 96px; }
/* A select drawn square like the other fields (owner, 2026-10-29): the
   native control is rounded in Safari and Chrome on macOS. The chevron is two
   gradients in the muted ink, so it follows the theme; forced colours keep
   the native control, where gradients are not drawn. */
select.c-field__input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
@media (forced-colors: active) {
    select.c-field__input {
        -webkit-appearance: auto;
        appearance: auto;
        padding-right: 12px;
    }
}
.c-field__input::placeholder { color: var(--text-muted); opacity: 1; }
/* Focus: the border turns cobalt, and a 1px inner line doubles it (no glow). */
.c-field__input:focus {
    border-color: var(--c-field-tone, var(--accent));
    outline: 1px solid var(--c-field-tone, var(--accent));
    outline-offset: -2px;
}
.c-field__input:disabled { opacity: .4; cursor: not-allowed; }
.c-field__message {
    font-size: 13px;
    line-height: 1.4;
    color: var(--c-field-tone, var(--text-muted));
}
/* Error: label, border, focus ring and message in danger. */
.c-field--error { --c-field-tone: var(--status-danger); }
.c-field__input[aria-invalid="true"],
.c-field__input[aria-invalid="true"]:focus {
    border-color: var(--status-danger);
    outline-color: var(--status-danger);
}

/* ----- Hero search: .c-hero-search (Ask start, Research start) ----- */
.c-hero-search {
    display: flex;
    align-items: stretch;
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: 0;
}
.c-hero-search:focus-within {
    border-color: var(--accent);
    outline: 1px solid var(--accent);
    outline-offset: -2px;
}
.c-hero-search__input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 17px 18px;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.4;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: none;
    resize: none;
}
.c-hero-search__input::placeholder { color: var(--text-muted); opacity: 1; }
.c-hero-search__button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 22px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--accent);
    color: var(--accent-ink);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease-standard);
}
/* Inset, inside the box's own :focus-within ring, in the button's ink. */
.c-hero-search__button:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: -4px;
}
.c-hero-search--research:focus-within {
    border-color: var(--research);
    outline-color: var(--research);
}
.c-hero-search--research .c-hero-search__button {
    background: var(--research);
    color: var(--research-ink);
}
.c-hero-search--research .c-hero-search__button:focus-visible { outline-color: var(--research-ink); }

/* ----- Docked follow-up: .c-dock (Ask and Research answers) ----- */
.c-dock {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    padding: 18px 24px;
    background: var(--surface-page);
    border-top: 1px solid var(--border);
}
.c-dock:focus-within { border-top-color: var(--accent); }
.c-dock--research:focus-within { border-top-color: var(--research); }
.c-dock__input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 8px 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: 0;
    resize: none;
}
.c-dock__input::placeholder { color: var(--text-muted); opacity: 1; }
.c-dock__input:focus { outline: none; }
.c-dock__input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.c-dock__button {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 auto;
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    border-radius: var(--radius-1);
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease-standard);
}
.c-dock__button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.c-dock--research .c-dock__input:focus-visible { outline-color: var(--research); }
.c-dock--research .c-dock__button {
    background: var(--research);
    border-color: var(--research);
    color: var(--research-ink);
}
.c-dock--research .c-dock__button:focus-visible { outline-color: var(--research); }

.c-hero-search__button:hover:not(:disabled),
.c-dock__button:hover:not(:disabled) { filter: brightness(1.1); }
.c-hero-search__button:disabled,
.c-dock__button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ----- Segmented control: .c-seg ----- */
.c-seg {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 0;
}
.c-seg__option {
    position: relative;
    margin: 0;
    padding: 7px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--text-muted);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.c-seg__option + .c-seg__option { border-left: 1px solid var(--border); }
.c-seg__option:hover { color: var(--text-primary); }
/* The chosen option: cobalt, the accent fill with its ink, as the other
   chosen states (owner, 2026-10-28, Task 19). */
.c-seg__option[aria-pressed="true"],
.c-seg__option[aria-checked="true"],
.c-seg__option.is-selected {
    background: var(--accent);
    color: var(--accent-ink);
}
.c-seg__option:focus-visible {
    z-index: 1;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ----- Toggle: .c-toggle (a real <input type="checkbox" role="switch">)
   <label class="c-toggle"><input class="c-toggle__input" type="checkbox" role="switch">
     <span class="c-toggle__track" aria-hidden="true"></span> Label</label>
   The off track's edge is --text-muted, not the hairline, so the control's
   boundary reaches 3:1 (WCAG 1.4.11). ----- */
.c-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.c-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.c-toggle__track {
    box-sizing: border-box;
    flex: none;
    display: flex;
    justify-content: flex-start;
    width: 44px;
    height: 24px;
    padding: 2px;
    background: var(--surface-sunken);
    border: 1px solid var(--text-muted);
    border-radius: 0;
    transition: background var(--dur-fast) var(--ease-standard);
}
.c-toggle__track::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: var(--text-muted);
}
.c-toggle__input:checked + .c-toggle__track {
    justify-content: flex-end;
    background: var(--accent);
    border-color: var(--accent);
}
.c-toggle__input:checked + .c-toggle__track::after { background: var(--accent-ink); }
.c-toggle__input:focus-visible + .c-toggle__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.c-toggle__input:disabled + .c-toggle__track { opacity: .4; }
.c-toggle:has(.c-toggle__input:disabled) { cursor: not-allowed; }

/* ----- Checkbox: .c-check (on the <input type="checkbox"> itself)
   <label class="c-check-row"><input type="checkbox" class="c-check"> Label</label>
   Unchecked edge in --text-muted for the 3:1 boundary. ----- */
.c-check {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 16px;
    height: 16px;
    margin: 0;
    background: var(--surface-card);
    border: 1px solid var(--text-muted);
    border-radius: 0;
    cursor: pointer;
}
.c-check:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.c-check:checked::after {
    content: "\2713";
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1;
    color: var(--accent-ink);
}
.c-check:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.c-check:disabled { opacity: .4; cursor: not-allowed; }
.c-check-row {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
    cursor: pointer;
}
.c-check-row .c-check { margin-top: 2px; }

/* ----- Chip: .c-chip (source filters, calculator names, topics) ----- */
.c-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 11px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
}
/* Topics and calculator names read as words: sans 13, as typed. */
.c-chip--sans {
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
}
.c-chip:hover { border-color: var(--text-muted); }
.c-chip.is-selected,
.c-chip[aria-pressed="true"],
.c-chip[aria-checked="true"] {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--accent);
}
.c-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.c-chip--research.is-selected,
.c-chip--research[aria-pressed="true"],
.c-chip--research[aria-checked="true"] {
    background: var(--research-tint);
    border-color: var(--research);
    color: var(--research);
}
.c-chip.c-chip--research:focus-visible {
    outline: 2px solid var(--research);
    outline-offset: 2px;
}

/* ----- Summary panel: .c-summary (answer summary; research bottom line) ----- */
.c-summary {
    --c-tone: var(--accent);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--c-tone, var(--accent));
}
.c-summary--research { --c-tone: var(--research); }
.c-summary__label {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-tone, var(--accent));
}
.c-summary__body {
    font-size: 19px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-primary);
    text-wrap: pretty;
}

/* ----- Cited point: .c-cited ----- */
.c-cited {
    display: grid;
    /* 28px, widening for a multi-source ref such as "[2,3]". */
    grid-template-columns: minmax(28px, max-content) minmax(0, 1fr);
    gap: 4px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-primary);
}
.c-cited__ref {
    padding-top: 3px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    color: var(--accent);
    text-decoration: none;
}

/* ----- Source card (rail): .c-source ----- */
.c-source {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.c-source__ref {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
}
.c-source__title {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--text-primary);
}
.c-source__section {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-muted);
}
.c-source__link {
    font-size: 13px;
    line-height: 1.4;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ----- State panel: .c-state (errors, empty results, limits, ended trial) ----- */
.c-state {
    --c-tone: var(--text-muted);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 820px;
    padding: 22px 24px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--c-tone, var(--text-muted));
}
.c-state--danger { --c-tone: var(--status-danger); }
.c-state--caution { --c-tone: var(--status-caution); }
.c-state--ok { --c-tone: var(--status-ok); }
.c-state--accent { --c-tone: var(--accent); }
.c-state--research { --c-tone: var(--research); }
.c-state__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-tone, var(--text-muted));
}
.c-state__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.c-state__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-muted);
    text-wrap: pretty;
}
.c-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 6px;
}

/* ----- Dialog: .c-dialog-scrim > .c-dialog (560 single column; 800 with a
   300px inverse aside). Scrim click and the close button close it. ----- */
.c-dialog-scrim {
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--scrim);
}
.c-dialog-scrim[hidden] { display: none; }
.c-dialog {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    background: var(--surface-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-modal);
}
.c-dialog--460 { max-width: 460px; }  /* account dialogs (SCREENS.md 3) */
.c-dialog--560 { max-width: 560px; }
.c-dialog--800 {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    /* One row the dialog's height: the body scrolls and the footer stays
       reachable however long the content. */
    grid-template-rows: minmax(0, 1fr);
    max-width: 800px;
}
.c-dialog--danger { border-top: 3px solid var(--status-danger); }
.c-dialog--accent { border-top: 3px solid var(--accent); }
.c-dialog--caution { border-top: 3px solid var(--status-caution); }
.c-dialog__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    overflow-y: auto;
    background: var(--surface-inverse);
    color: var(--text-inverse);
}
.c-dialog__aside .c-label { color: var(--text-inverse); }
/* Cobalt is under 3:1 on the inverse fill (2.96:1 light, 1.93:1 dark). */
.c-dialog__aside :focus-visible { outline-color: var(--text-inverse); }
/* (0,3,0) and after the research focus rules, so a research button or chip
   on the aside gets the inverse ring too (violet is 2.75:1 / 1.87:1 there). */
.c-dialog__aside .c-btn:focus-visible,
.c-dialog__aside .c-chip:focus-visible {
    outline-color: var(--text-inverse);
}
/* The column beside the aside, holding header, body and footer (and the
   close button, so it never sits on the aside when the sheet stacks). */
.c-dialog__main {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.c-dialog__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px 56px 0 32px;
}
.c-dialog__title {
    margin: 0;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.c-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 32px;
    font-size: 15px;
    line-height: 1.5;
}
.c-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 32px 32px;
}
.c-dialog__close {
    position: absolute;
    /* Above the dialog's content: it comes first in the markup, so a later
       positioned sibling (.c-dialog__main, position: relative, in an 800
       dialog) painted over it and took a real click, while .click() and the
       keyboard still worked (Task 17). Local to the dialog: the scrim, at
       --z-dialog, is the stacking context. */
    z-index: 1;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1;
    background: transparent;
    color: var(--text-muted);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.c-dialog__close:hover { color: var(--text-primary); }
.c-dialog__close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ----- Icon button: .c-icon-btn (web redesign Task 13) -----
   A 44 x 44 ghost button holding one mono glyph (☰, ←), its ring inside
   its box; --muted for a dismiss (×, sans, muted until hovered). Name it
   with aria-label; the glyph is aria-hidden. */
.c-icon-btn {
    box-sizing: border-box;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 20px;
    line-height: 1;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.c-icon-btn--muted {
    font-family: var(--font-sans);
    font-size: 22px;
    color: var(--text-muted);
}
.c-icon-btn--muted:hover { color: var(--text-primary); }
.c-icon-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ----- Dots: .c-dots (searching / writing), three 6px squares
   <span class="c-dots" aria-hidden="true"><span class="c-dots__dot"></span>
     <span class="c-dots__dot"></span><span class="c-dots__dot"></span></span> ----- */
.c-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.c-dots__dot {
    display: block;
    width: 6px;
    height: 6px;
    background: currentColor;
    animation: clare-pulse 1s var(--ease-standard) infinite;
}
.c-dots__dot:nth-child(2) { animation-delay: .15s; }
.c-dots__dot:nth-child(3) { animation-delay: .3s; }

/* ----- Mode chip: .c-mode-chip (app bar: "Ask · guidance") ----- */
.c-mode-chip {
    --c-tone: var(--accent);
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-tone, var(--accent));
    border: 1px solid var(--c-tone, var(--accent));
}
.c-mode-chip--research { --c-tone: var(--research); }

/* ----- Tag: .c-tag (bookmark kind, study flags) ----- */
.c-tag {
    --c-tone: var(--text-muted);
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-tone, var(--text-muted));
    border: 1px solid var(--border);
}
.c-tag--guidance { --c-tone: var(--accent); }
.c-tag--research { --c-tone: var(--research); }
.c-tag--guidance,
.c-tag--research { border-color: var(--c-tone, var(--text-muted)); }

/* ----- Reduced motion: the dots hold still ----- */
@media (prefers-reduced-motion: reduce) {
    .c-dots__dot { animation: none; opacity: .6; }
}

/* ----- Phone width (web redesign Task 13, SCREENS.md section 16) ----- */
@media (max-width: 600px) {
    /* Every button but the small and the ghost (text-like) ones. */
    .c-btn:not(.c-btn--sm):not(.c-btn--ghost) {
        min-height: 48px;
    }
    .c-field__input {
        font-size: 16px;
        min-height: 52px;
    }
    .c-hero-search__input { font-size: 16px; }
    /* The docked follow-up: the field 52px, the button 48px, clear of the
       home bar. */
    .c-dock {
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    }
    .c-dock__input {
        min-height: 52px;
        padding: 14px 0;
    }
    .c-dock__button {
        min-height: 48px;
    }
    .c-dialog-scrim {
        align-items: flex-end;
        padding: 0;
    }
    /* A full-width bottom sheet. Its header (with the close button) and its
       footer stay put; the body between them is the only part that scrolls,
       so the close button and the footer's buttons are on screen from the
       start and never cover the text. A dialog whose form holds header,
       body and footer passes the column on through the form. */
    .c-dialog,
    .c-dialog--460,
    .c-dialog--560,
    .c-dialog--800 {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        max-height: 90dvh;
        overflow: hidden;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
    .c-dialog > form,
    .c-dialog__main {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    .c-dialog__header,
    .c-dialog__footer {
        flex: none;
    }
    .c-dialog__header { padding: 24px 56px 0 16px; }
    .c-dialog__body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 16px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .c-dialog__footer {
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
    }
    .c-dialog__title { font-size: 22px; }
    /* An 800 dialog: its aside and its column scroll together under the
       close button, which stays at the sheet's top right, over the aside
       (in the aside's ink). The dialog's markup wraps them in
       .c-dialog__scroll for this (display: contents wider). */
    .c-dialog__scroll {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .c-dialog--800 .c-dialog__scroll > .c-dialog__main {
        flex: none;
        min-height: auto;
    }
    .c-dialog__aside {
        flex: none;
        gap: 12px;
        padding: 20px 56px 20px 16px;
        overflow: visible;
    }
    /* On the inverse fill: its own square of the aside's colours, so the ×
       stays legible once the white form column scrolls under it (Task 17
       review); over the aside it reads as part of it. */
    .c-dialog--800 > .c-dialog__close {
        color: var(--text-inverse);
        background: var(--surface-inverse);
    }
    .c-dialog--800 > .c-dialog__close:focus-visible {
        outline-color: var(--text-inverse);
    }
}

/* Wider than a phone an 800 dialog's scroll wrapper takes no part in its
   grid: the aside and the column are the grid's items. */
@media (min-width: 600.02px) {
    .c-dialog__scroll {
        display: contents;
    }
}

/* ----- Forced colours (Windows High Contrast): the browser repaints fills
   as Canvas, so the states drawn by a fill (toggle, checkbox, selected
   segment and chip, dots) are repainted here in system colours. System
   colours appear only in this block. ----- */
@media (forced-colors: active) {
    .c-toggle__track {
        forced-color-adjust: none;
        background: Canvas;
        border-color: CanvasText;
    }
    .c-toggle__track::after { background: CanvasText; }
    .c-toggle__input:checked + .c-toggle__track {
        background: Highlight;
        border-color: Highlight;
    }
    .c-toggle__input:checked + .c-toggle__track::after { background: HighlightText; }
    .c-toggle__input:focus-visible + .c-toggle__track { outline-color: CanvasText; }
    .c-toggle__input:disabled + .c-toggle__track { border-color: GrayText; }
    .c-toggle__input:disabled + .c-toggle__track::after { background: GrayText; }

    .c-check {
        forced-color-adjust: none;
        background: Canvas;
        border-color: CanvasText;
    }
    .c-check:checked {
        background: Highlight;
        border-color: Highlight;
    }
    .c-check:checked::after { color: HighlightText; }

    .c-seg__option[aria-pressed="true"],
    .c-seg__option[aria-checked="true"],
    .c-seg__option.is-selected,
    .c-chip.is-selected,
    .c-chip[aria-pressed="true"],
    .c-chip[aria-checked="true"] {
        forced-color-adjust: none;
        background: Highlight;
        border-color: Highlight;
        color: HighlightText;
    }

    .c-dots__dot {
        forced-color-adjust: none;
        background: CanvasText;
    }
}