/* qÚčto design system 2026 — base.css (ADR-0223; direction A, ADR-0225;
 * docs/DESIGN_SYSTEM.md).
 *
 * @layer reset: box model, margins, form-control font inheritance, [hidden].
 * @layer base:  document typography, links, focus, bare elements that the
 *               templates use without classes (h1–h4, p, lists, dl, fieldset,
 *               code, kbd, table basics), skip link and visually-hidden.
 * Colours only via tokens.css. Monospace only for <code> (technical ids).
 */

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

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

    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
    }

    img,
    video,
    canvas {
        max-width: 100%;
        height: auto;
    }

    svg {
        flex-shrink: 0;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
        letter-spacing: inherit;
        color: inherit;
    }

    button {
        cursor: pointer;
    }

    table {
        border-collapse: collapse;
    }

    /* `hidden` must beat every component display value (utility-grade rule). */
    [hidden]:not([hidden='until-found']) {
        display: none !important;
    }
}

@layer base {
    html {
        color-scheme: light;
        font-family: var(--font-sans);
        font-optical-sizing: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        /* Geist: tabular figures where numbers align are set per component;
           the shell (layout.css) adds the frame/sticky-bar offset for 2.4.11. */
        scroll-padding-top: var(--sp-4);
        scroll-padding-bottom: var(--sp-6);
    }

    body {
        min-height: 100vh;
        min-height: 100dvh;
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        font-weight: var(--fw-regular);
        color: var(--text);
        background: var(--canvas);
    }

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

    /* ---- headings: fixed scale, balanced wrapping ---- */
    h1,
    h2,
    h3,
    h4 {
        font-weight: var(--fw-semibold);
        color: var(--text);
        text-wrap: balance;
    }

    h1 {
        font-size: var(--fs-h1);
        line-height: var(--lh-h1);
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-h1);
    }

    h2 {
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        letter-spacing: var(--tracking-title);
    }

    h3 {
        font-size: var(--fs-base);
        line-height: var(--lh-base);
    }

    h4 {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
    }

    p {
        text-wrap: pretty;
    }

    strong,
    b {
        font-weight: var(--fw-semibold);
    }

    small {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    hr {
        height: 0;
        margin: var(--sp-4) 0;
        border: 0;
        border-top: 1px solid var(--border);
    }

    abbr[title] {
        text-decoration: underline dotted;
        text-underline-offset: 2px;
        cursor: help;
    }

    mark {
        padding: 0 2px;
        border-radius: var(--r-xs);
        background: var(--accent-100);
        color: var(--text);
    }

    /* ---- links: ink text + quiet underline (amber is never a text colour on light) ---- */
    a {
        color: var(--link);
        text-decoration-line: underline;
        text-decoration-thickness: 1px;
        text-decoration-color: var(--link-underline);
        text-underline-offset: 0.2em;
        transition: text-decoration-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    a:hover {
        text-decoration-color: var(--link-underline-hover);
    }

    /* ---- focus: one amber-700 ring everywhere (4.07:1 white, 3.73:1 canvas) ---- */
    :focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    :focus:not(:focus-visible) {
        outline: none;
    }

    /* The skip target and headings focused by script need no ring. */
    [tabindex='-1']:focus:not(:focus-visible) {
        outline: none;
    }

    /* ---- code & kbd ---- */
    /* Monospace is allowed ONLY here: technical identifiers meant to be copied. */
    code {
        padding: 1px 5px;
        font-family: var(--font-code);
        font-size: 0.8571em;
        line-height: 1;
        color: var(--text);
        background: var(--surface-2);
        border: 1px solid var(--border-subtle);
        border-radius: var(--r-xs);
        overflow-wrap: anywhere;
    }

    kbd {
        display: inline-block;
        min-width: 1.5em;
        padding: 0 var(--sp-1-5);
        font-family: var(--font-sans);
        font-size: var(--fs-2xs);
        line-height: 18px;
        font-weight: var(--fw-medium);
        font-variant-numeric: tabular-nums;
        text-align: center;
        color: var(--text-secondary);
        background: var(--surface-2);
        border: 1px solid transparent;
        border-radius: var(--r-xs);
        box-shadow: inset 0 -1px 0 var(--ring-color-hover);
    }

    /* ---- lists inside content ---- */
    :where(.qucto-main, .qucto-card) :is(ul, ol):not([class]) {
        margin: 0;
        padding-left: 1.25rem;
    }

    :where(.qucto-main, .qucto-card) :is(ul, ol):not([class]) > li + li {
        margin-top: var(--sp-1);
    }

    :where(.qucto-main, .qucto-card) :is(ul, ol):not([class]) > li::marker {
        color: var(--text-muted);
    }

    /* ---- label–value lists: bare <dl> reads as a quiet two-column table ---- */
    .qucto-main dl:not([class]) {
        display: grid;
        grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
        column-gap: var(--sp-6);
        margin: 0 0 var(--sp-4);
    }

    .qucto-main dl:not([class]) > :is(dt, dd) {
        padding-block: var(--sp-2);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-main dl:not([class]) > :is(dt, dd):nth-child(-n + 2) {
        border-top: 0;
        padding-top: 0;
    }

    .qucto-main dl:not([class]) > dt {
        color: var(--text-muted);
    }

    .qucto-main dl:not([class]) > dd {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* ---- native fieldsets (checkbox groups, form sections) ---- */
    fieldset:not([class]) {
        min-width: 0;
        margin: 0 0 var(--sp-4);
        padding: var(--sp-3) var(--sp-4) var(--sp-4);
        border: 1px solid var(--border);
        border-radius: var(--r-card-nested);
    }

    fieldset:not([class]) > legend {
        padding: 0 var(--sp-1);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        color: var(--text-secondary);
    }

    fieldset:not([class]) > label:has(> input[type='checkbox'], > input[type='radio']) {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        min-height: 24px;
        margin: var(--sp-1) var(--sp-5) var(--sp-1) 0;
    }

    /* ---- form controls (element level; .qucto-form-* in components.css) ----
       36 px high (44 px + 16 px text on touch), radius 10, white, 3:1 control
       border (WCAG 1.4.11 — the edge identifies the field), amber-700 focus
       ring 1 px off the edge, invalid = danger border. */
    :where(
        input:not([type]),
        input[type='text'],
        input[type='email'],
        input[type='password'],
        input[type='date'],
        input[type='datetime-local'],
        input[type='number'],
        input[type='search'],
        input[type='tel'],
        input[type='url'],
        input[type='time'],
        input[type='month'],
        input[type='week'],
        select,
        textarea
    ) {
        width: 100%;
        min-height: var(--control-h);
        padding: 0 var(--sp-2-5);
        font-size: var(--input-fs);
        line-height: var(--lh-base);
        color: var(--text);
        background-color: var(--surface);
        border: 1px solid var(--border-control);
        border-radius: var(--r-control);
        transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
    }

    :is(input, select, textarea):hover:not(:disabled, [readonly], [type='checkbox'], [type='radio'], [type='file'], [type='color']) {
        border-color: var(--border-control-hover);
    }

    :is(input, select, textarea):focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset-input);
    }

    :is(input, select, textarea)[aria-invalid='true'],
    :is(input, select, textarea):user-invalid {
        border-color: var(--danger-solid);
    }

    :is(input, select, textarea):disabled {
        color: var(--text-muted);
        background-color: var(--surface-2);
        border-color: var(--border);
        cursor: not-allowed;
    }

    :is(input, textarea)[readonly] {
        background-color: var(--surface-sunken);
    }

    ::placeholder {
        color: var(--text-muted);
        opacity: 1;
    }

    textarea {
        min-height: 5.5rem;
        padding-block: var(--sp-2);
        resize: vertical;
        field-sizing: content;
        max-height: 32rem;
    }

    /* Amounts type right-aligned in tabular figures. */
    input[inputmode='decimal'] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    input[type='number'] {
        font-variant-numeric: tabular-nums;
        appearance: textfield;
        -moz-appearance: textfield;
    }

    input[type='number']::-webkit-outer-spin-button,
    input[type='number']::-webkit-inner-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }

    input[type='date'],
    input[type='month'],
    input[type='week'],
    input[type='time'],
    input[type='datetime-local'] {
        font-variant-numeric: tabular-nums;
    }

    input::-webkit-calendar-picker-indicator {
        width: 16px;
        height: 16px;
        margin-left: var(--sp-1);
        cursor: pointer;
        opacity: 1;
        background: var(--img-calendar) center / 16px 16px no-repeat;
        border-radius: var(--r-xs);
    }

    input[type='time']::-webkit-calendar-picker-indicator {
        background-image: var(--img-clock);
    }

    select {
        padding-right: var(--sp-8);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        background-image: var(--img-select-chevron);
        background-position: right var(--sp-2-5) center;
        background-repeat: no-repeat;
        background-size: 16px 16px;
        appearance: none;
        -webkit-appearance: none;
    }

    select[multiple],
    select[size]:not([size='1']) {
        min-height: 0;
        padding: var(--sp-1);
        white-space: normal;
        background-image: none;
        cursor: default;
    }

    input[type='file'] {
        width: 100%;
        min-height: var(--control-h);
        padding: var(--sp-1);
        font-size: var(--fs-sm);
        color: var(--text-secondary);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-control);
    }

    input[type='file']::file-selector-button {
        height: 26px;
        margin-right: var(--sp-2-5);
        padding: 0 var(--sp-2-5);
        font: inherit;
        font-weight: var(--fw-semibold);
        color: var(--text);
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-sm);
        cursor: pointer;
    }

    input[type='file']::file-selector-button:hover {
        background: var(--row-hover);
    }

    input[type='color'] {
        inline-size: 44px;
        block-size: 32px;
        padding: 2px;
        background: var(--surface);
        border: 1px solid var(--border-control);
        border-radius: var(--r-sm);
        cursor: pointer;
    }

    /* Checkbox & radio: 16 px, amber fill + ink mark when on (8.4:1). */
    input[type='checkbox'],
    input[type='radio'] {
        display: inline-grid;
        place-content: center;
        flex: none;
        width: 16px;
        height: 16px;
        margin: 0;
        vertical-align: -3px;
        background: var(--surface);
        border: 1px solid var(--border-control);
        border-radius: var(--r-xs);
        box-shadow: var(--e1);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
    }

    input[type='radio'] {
        border-radius: 50%;
    }

    input[type='checkbox']::before {
        content: '';
        width: 12px;
        height: 12px;
        background: var(--accent-ink);
        mask: var(--i-check) center / 12px 12px no-repeat;
        transform: scale(0);
        transition: transform var(--dur-1) var(--ease-out);
    }

    input[type='radio']::before {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--accent-ink);
        border-radius: 50%;
        transform: scale(0);
        transition: transform var(--dur-1) var(--ease-out);
    }

    input[type='checkbox']:hover:not(:disabled, :checked, :indeterminate),
    input[type='radio']:hover:not(:disabled, :checked) {
        border-color: var(--border-control-hover);
    }

    input[type='checkbox']:is(:checked, :indeterminate),
    input[type='radio']:checked {
        background: var(--accent);
        border-color: var(--accent-700);
    }

    input[type='checkbox']:is(:checked, :indeterminate)::before,
    input[type='radio']:checked::before {
        transform: scale(1);
    }

    input[type='checkbox']:indeterminate::before {
        mask-image: var(--i-dash);
    }

    input[type='checkbox']:disabled,
    input[type='radio']:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    input[type='checkbox']:focus-visible,
    input[type='radio']:focus-visible {
        outline-offset: var(--focus-offset);
    }

    label:has(> input[type='checkbox'], > input[type='radio']) {
        cursor: pointer;
    }

    @media (forced-colors: active) {
        input[type='checkbox'],
        input[type='radio'] {
            appearance: auto;
            -webkit-appearance: auto;
        }

        input[type='checkbox']::before,
        input[type='radio']::before {
            content: none;
        }
    }

    /* ---- table basics (the component lives in components.css) ---- */
    th {
        text-align: left;
        font-weight: var(--fw-semibold);
    }

    caption {
        text-align: left;
    }

    summary {
        cursor: pointer;
    }

    /* Bare disclosures („Nevím, který režim zvolit"): a quiet chevron row. */
    details:not([class]) > summary:not([class]) {
        display: flex;
        align-items: center;
        gap: var(--sp-1-5);
        width: fit-content;
        min-height: 28px;
        font-weight: var(--fw-medium);
        color: var(--text-secondary);
        list-style: none;
        border-radius: var(--r-xs);
    }

    details:not([class]) > summary:not([class])::-webkit-details-marker {
        display: none;
    }

    details:not([class]) > summary:not([class])::before {
        content: '';
        flex: none;
        width: 16px;
        height: 16px;
        background: currentColor;
        mask: var(--i-chevron-right) center / 16px no-repeat;
        transition: transform var(--dur-3) var(--ease-out);
    }

    details:not([class]) > summary:not([class]):hover {
        color: var(--text);
    }

    details:not([class])[open] > summary:not([class]) {
        margin-bottom: var(--sp-2);
    }

    details:not([class])[open] > summary:not([class])::before {
        transform: rotate(90deg);
    }

    /* ---- accessibility helpers ---- */
    .qucto-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .skip-link {
        position: fixed;
        top: var(--sp-2);
        left: var(--sp-2);
        z-index: var(--z-skip);
        padding: var(--sp-2) var(--sp-4);
        font-weight: var(--fw-semibold);
        color: var(--accent-ink);
        background: var(--btn-primary-bg-flat);
        border-radius: var(--r-control);
        text-decoration: none;
        transform: translateY(calc(-100% - var(--sp-4)));
    }

    /* The shadow only when shown — off screen it would bleed into the frame. */
    .skip-link:focus,
    .skip-link:focus-visible {
        box-shadow: var(--btn-primary-shadow), var(--e2);
        transform: none;
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    @media (forced-colors: active) {
        :focus-visible {
            outline-color: Highlight;
        }
    }
}

/* Cross-document navigation: a short crossfade while the shell stays put
   (progressive — Chromium/Safari; nothing happens elsewhere). */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: var(--dur-2);
        animation-timing-function: var(--ease-out);
    }
}