/* qÚčto design system 2026 — features.css (R4; direction A „Temný rám,
 * plovoucí list", ADR-0225): domain blocks on top of the generic components.
 * Direction A: surfaces are white with a soft ink ring (--e0) and a
 * transparent 1px border for forced colours, plates nested in a card are the
 * canvas colour (--surface-inset, radius 12), period switches are segmented
 * controls (--seg-*), revenue bars are the brand colour and costs the dark
 * --chart-cost. Tokens only (tokens.css); no colour literals, no inline
 * styles (CSP), no !important. Test hooks from AUDIT §6 stay untouched:
 * .qucto-client-calendar, svg.qucto-chart path, .qucto-comparison-bars[aria-hidden],
 * .qucto-indicators, [data-payment-panel] .qucto-badge, .qucto-payment-history li,
 * .questionnaire-messages li.
 *
 * Contents
 *   1. Charts — marks, axes, legends, donut, in-table bars (RESEARCH D4 „Grafy“)
 *   2. Finance numbers — comparisons, monthly series, delta arrows
 *   3. Accounting overview, structure, dashboard tile
 *   4. Indicators and Du Pont
 *   5. Statutory statements
 *   6. Long client text containers (tax evidence, segments, e-mail, VAT check…)
 *   7. Payments — instruction panel with QR, pending state, dashboard money
 *   8. Month switch (payroll, calendar)
 *   9. Client calendar — month grid + agenda
 *  10. Questionnaire — client vs advisor, attachments, discussion
 *  11. Payroll and attendance
 *  12. Accountant dashboard slots, system census
 *  13. Forced colours and print
 */
@layer features {
    /* =================================================================
       1. Charts
       Colour follows the entity, never its rank (dataviz). Palette order was
       validated for adjacent-pair CVD separation on white:
         two measures      income/revenue --chart-revenue (brand) · expense
                           --chart-cost (dark neutral; ΔL ≈ 0.45, CVD-safe)
         A / B comparison  A --chart-1 (current) · B --chart-compare
         third measure     result/difference --chart-3
         shares (≤ 6)      --chart-1, -3, -4, -5, -6 (-2 as a 6th), „Ostatní“ --chart-other
         effect on result  up --chart-up · down --chart-down (+ ▲/▼ in text)
       Every chart sits next to a table with the exact values (the WCAG
       alternative), so marks may stay below 3:1 (amber-600 is 2.7:1).
       ================================================================= */
    /* Column chart (ReportCharts::columns): the outer svg is sized in CSS
       pixels and places every x as a percentage, so text never scales; the
       bars live in a nested .qucto-chart-plot whose viewBox stretches
       horizontally only. A fluid chart (≤ 12 groups) fills its card and,
       narrower than the natural 640px, scrolls in its region. */
    .qucto-chart {
        --chart-min-w: 640px; /* = ReportCharts::WIDTH */

        display: block;
        max-width: none;
        overflow: visible;
        font-family: var(--font-sans);
    }

    .qucto-chart-fluid {
        width: 100%;
        min-width: var(--chart-min-w);
    }

    .qucto-chart-plot {
        overflow: visible;
    }

    .qucto-chart-grid {
        stroke: var(--chart-grid);
        stroke-width: 1;
        shape-rendering: crispEdges;
    }

    .qucto-chart-axis {
        stroke: var(--chart-baseline);
        stroke-width: 1;
        shape-rendering: crispEdges;
    }

    .qucto-chart-text {
        fill: var(--chart-axis);
        font-size: var(--fs-2xs);
        font-weight: var(--fw-medium);
        font-variant-numeric: tabular-nums;
    }

    /* The latest month shown reads first (the concept's current month). */
    .qucto-chart-text-current {
        fill: var(--text);
        font-weight: var(--fw-semibold);
    }

    /* Hovering one column dims the others: the native <title> tooltip then
       clearly belongs to the highlighted mark. Opacity only (reduced motion safe). */
    .qucto-chart path,
    .qucto-donut circle {
        transition: opacity var(--dur-1) var(--ease-out);
    }

    @media (hover: hover) {
        .qucto-chart:has(path:hover) path:not(:hover),
        .qucto-donut:has(circle:not(.qucto-donut-track):hover) circle:not(:hover, .qucto-donut-track) {
            opacity: 0.4;
        }
    }

    /* Series (identity) — marks only; text keeps the text tokens. Revenue /
       income is the brand colour, costs / expense the dark neutral. */
    .qucto-series-1,
    .qucto-bar-revenue,
    .qucto-bar-income,
    .qucto-cashflow-income {
        fill: var(--chart-revenue);
    }

    .qucto-bar-a,
    .qucto-share-value {
        fill: var(--chart-1);
    }

    .qucto-series-2,
    .qucto-bar-expense,
    .qucto-cashflow-expense {
        fill: var(--chart-cost);
    }

    .qucto-bar-b {
        fill: var(--chart-compare);
    }

    .qucto-bar-result,
    .qucto-bar-difference {
        fill: var(--chart-3);
    }

    .qucto-effect-up {
        fill: var(--chart-up);
    }

    .qucto-effect-down {
        fill: var(--chart-down);
    }

    /* Share classes colour both donut rings (stroke) and legend swatches (fill). */
    .qucto-share-1 { fill: var(--chart-1); stroke: var(--chart-1); }
    .qucto-share-2 { fill: var(--chart-3); stroke: var(--chart-3); }
    .qucto-share-3 { fill: var(--chart-4); stroke: var(--chart-4); }
    .qucto-share-4 { fill: var(--chart-5); stroke: var(--chart-5); }
    .qucto-share-5 { fill: var(--chart-6); stroke: var(--chart-6); }
    /* Sixth named group only when there are exactly six (no „Ostatní“); slate
       reads near-neutral, so it sits last, next to amber around the ring. */
    .qucto-share-6 { fill: var(--chart-2); stroke: var(--chart-2); }
    .qucto-share-other { fill: var(--chart-other); stroke: var(--chart-other); }

    /* Legend: always present for two or more series; swatch + text label. */
    .qucto-chart-legend {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-1) var(--sp-3-5);
        margin: var(--sp-2) 0 var(--sp-3);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        color: var(--text-secondary);
    }

    .qucto-chart-legend > span {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1-5);
    }

    /* 8px rounded swatches (the 12px svg box keeps its markup). */
    .qucto-chart-legend svg {
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 2px;
        overflow: hidden;
    }

    .qucto-chart-legend .qucto-chart-unit {
        color: var(--text-muted);
    }

    /* Donut: part-to-whole of at most six segments (ReportCharts::SLICES). The
       track shows through the 0.5 % gaps between slices, so it is the surface
       colour — the 2px „surface gap“ of the mark spec. */
    .qucto-donut {
        display: block;
        width: 200px;
        height: 200px;
        margin-block: var(--sp-2) var(--sp-4);
    }

    .qucto-donut circle {
        fill: none;
        stroke-width: 4.2;
    }

    .qucto-donut .qucto-donut-track {
        stroke: var(--surface);
    }

    /* viewBox 42 → 200px: 3.4 units ≈ 16px, 2.6 units ≈ 12px. */
    .qucto-donut-total {
        fill: var(--text);
        font-size: 3.4px;
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-title);
        font-variant-numeric: tabular-nums;
    }

    .qucto-donut-caption {
        fill: var(--text-muted);
        font-size: 2.6px;
    }

    .qucto-legend-swatch {
        flex: none;
        vertical-align: -1px;
        margin-inline-end: var(--sp-2);
    }

    .qucto-legend-table tbody th {
        font-weight: var(--fw-regular);
    }

    /* In-cell share bar (breakdowns): track + value, one colour per column. */
    .qucto-share-cell {
        white-space: nowrap;
        text-align: end;
        font-variant-numeric: tabular-nums;
    }

    /* The svg box itself is the track, so the value is the only (first) rect. */
    .qucto-share-bar {
        display: block;
        width: 100px;
        height: 6px;
        margin: var(--sp-1) 0 0 auto;
        border-radius: var(--r-pill);
        background: var(--surface-2);
    }

    /* Horizontal A/B and monthly bars inside tables (decorative, aria-hidden;
       exact values are in the neighbouring cells). The centre line is zero. */
    .qucto-comparison-bars {
        display: block;
        max-width: none;
        color: var(--chart-2);
        overflow: visible;
    }

    .qucto-comparison-bars line {
        stroke: var(--chart-baseline);
        stroke-width: 1;
        shape-rendering: crispEdges;
    }

    /* Soft data ends (progressive: engines without CSS rx keep square bars). */
    .qucto-comparison-bars rect {
        rx: 2px;
    }

    /* Top-aligned like the values: the A bar (y 5–19) lines up with the first
       text line of the row, B sits below it. */
    td:has(> .qucto-comparison-bars) {
        width: 1%;
        padding-block-start: calc(var(--cell-py) - var(--sp-0-5));
        vertical-align: top;
    }

    /* =================================================================
       2. Finance numbers — comparisons, monthly series, deltas
       ================================================================= */
    .qucto-comparison td,
    .qucto-comparison tfoot th {
        font-variant-numeric: tabular-nums;
    }

    .qucto-comparison td:is([data-value], [data-monthly-side], [data-monthly-difference], [data-monthly-value], [data-tax-month-value], [data-indicator-side], [data-indicator-difference], [data-dupont-effect], [data-dupont-difference], [data-dupont-rounding]) {
        text-align: end;
        white-space: nowrap;
    }

    .qucto-monthly time,
    .qucto-monthly tbody th {
        white-space: nowrap;
    }

    /* Sub-rows („— z toho …“) and the rowgroup caption of paired months. */
    .qucto-comparison th[scope='rowgroup'] {
        padding-block: var(--sp-3) var(--sp-2);
        background: var(--row-hover);
        font-weight: var(--fw-semibold);
        color: var(--text);
        text-align: start;
    }

    .qucto-comparison small,
    .qucto-statutory small {
        display: inline-block;
        margin-top: var(--sp-0-5);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        font-weight: var(--fw-regular);
        color: var(--text-muted);
    }

    /* Delta arrow: direction by shape (▲/▼) and sign, never by colour alone.
       The value keeps its own minus; a positive change gets a generated „+“.
       Alt text after „/“ keeps the arrow out of the accessible name. Cells opt
       in by carrying data-amount (the machine value); empty/zero shows nothing. */
    :is([data-value='difference'], [data-value$='-effect'], [data-monthly-difference], [data-indicator-difference], [data-indicator-effect], [data-dupont-difference], [data-dupont-effect])[data-amount]:not([data-amount=''], [data-amount='0'], [data-amount='0.00'], [data-amount='-0.00'])::before {
        content: '▲\2009+' / '+';
        margin-inline-end: var(--sp-0-5);
        color: var(--text-muted);
    }

    :is([data-value='difference'], [data-value$='-effect'], [data-monthly-difference], [data-indicator-difference], [data-indicator-effect], [data-dupont-difference], [data-dupont-effect])[data-amount^='-']:not([data-amount='-0.00'])::before {
        content: '▼\2009' / '';
    }

    /* A factor that raised ROE is good news, one that lowered it is not. */
    [data-dupont-effect][data-amount]:not([data-amount^='-'], [data-amount='0.00'])::before {
        color: var(--success-ink);
    }

    [data-dupont-effect][data-amount^='-']:not([data-amount='-0.00'])::before {
        color: var(--danger-ink);
    }

    /* =================================================================
       3. Accounting overview, structure, dashboard tile
       ================================================================= */
    /* Page-level wrappers (one <div> around the whole content block) keep the
       column rhythm of .qucto-main, which only reaches its direct children. */
    .qucto-main > :is(.qucto-overview, .qucto-tax-evidence, .qucto-document-activity, .qucto-accounting-segments) {
        display: flex;
        flex-direction: column;
        gap: var(--sp-5);
    }

    .qucto-main > :is(.qucto-overview, .qucto-tax-evidence, .qucto-document-activity, .qucto-accounting-segments) > * {
        margin-block: 0;
    }

    .qucto-overview {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Accounting vs tax evidence: the segmented control of the design system
       (track + white thumb), not two pills. */
    .qucto-overview-kinds {
        display: inline-flex;
        flex-wrap: wrap;
        align-self: flex-start;
        gap: var(--sp-0-5);
        padding: var(--seg-pad);
        border: 1px solid transparent; /* forced-colours edge */
        border-radius: var(--seg-radius);
        background: var(--seg-track);
    }

    .qucto-overview-kinds a {
        display: inline-flex;
        align-items: center;
        min-height: var(--seg-item-h);
        padding: 0 var(--sp-3);
        border: 1px solid transparent;
        border-radius: var(--seg-item-radius);
        color: var(--seg-fg);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        text-decoration: none;
        transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    .qucto-overview-kinds a:hover {
        color: var(--seg-fg-hover);
    }

    .qucto-overview-kinds a[aria-current='page'] {
        background: var(--seg-thumb);
        color: var(--seg-fg-active);
        box-shadow: var(--seg-thumb-shadow);
    }

    .qucto-overview-filter {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
        gap: var(--sp-3) var(--sp-4);
        align-items: end;
    }

    .qucto-overview-filter > * {
        min-width: 0;
        margin: 0;
    }

    .qucto-overview-filter select {
        width: 100%;
        max-width: 100%;
    }

    .qucto-overview-filter-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2) var(--sp-4);
        min-height: var(--control-h);
    }

    .qucto-overview-warning {
        padding: var(--sp-3) var(--sp-4);
        border: 1px solid var(--warning-border);
        border-radius: var(--r-card-nested);
        background: var(--warning-wash);
        color: var(--warning-ink);
    }

    .qucto-overview-warning a {
        color: inherit;
    }

    .qucto-overview > section:not(.qucto-card) > h2 {
        margin: 0 0 var(--sp-3);
    }

    .qucto-overview .qucto-num {
        white-space: nowrap;
        overflow-wrap: normal;
    }

    /* `anywhere` on the wrappers would shrink table columns to one character;
       inside tables long words may still break, but never set the width. */
    :is(.qucto-overview, .qucto-document-activity, .qucto-accounting-segments, .qucto-tax-evidence) .qucto-table :is(th, td) {
        overflow-wrap: break-word;
    }

    [data-overview-months] tbody th {
        white-space: nowrap;
    }

    /* Money totals: the KPI figure with a smaller muted unit (.qucto-kpi-unit);
       in a narrow tile the figure steps down with the tile width, and the
       amount (no-break spaces) never breaks — only the unit may wrap. */
    [data-overview-totals] .qucto-stat {
        container-type: inline-size;
    }

    [data-overview-totals] .qucto-stat-value {
        font-size: clamp(1.25rem, 13cqi, var(--fs-kpi));
        overflow-wrap: normal;
    }

    .qucto-amount {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* The chart region scrolls on narrow screens; keep a little air below it. */
    .qucto-table-scroll:has(> .qucto-chart) {
        margin-block-end: var(--sp-4);
    }

    .qucto-structure {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
        gap: var(--sp-8) var(--sp-6);
        margin-top: var(--sp-4);
    }

    .qucto-structure-chart {
        display: flex;
        flex-direction: column;
        margin: 0;
        min-width: 0;
    }

    .qucto-structure-chart h3 {
        margin: 0;
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
    }

    .qucto-accounting-tile [data-accounting-tile-kind] {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
    }

    .qucto-accounting-tile [data-accounting-tile-kind] > * {
        margin: 0;
    }

    .qucto-accounting-tile [data-accounting-tile-kind] + [data-accounting-tile-kind] {
        margin-top: var(--sp-5);
        padding-top: var(--sp-5);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-accounting-tile [data-accounting-tile-kind] > h3 {
        font-size: var(--fs-base);
        font-weight: var(--fw-semibold);
    }

    .qucto-accounting-tile .qucto-stat-value {
        font-size: var(--fs-title);
        line-height: var(--lh-title);
        letter-spacing: var(--tracking-title);
    }

    /* =================================================================
       4. Indicators and Du Pont — tiles per group, value as the lead figure
       ================================================================= */
    .qucto-indicators {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
        gap: var(--sp-4);
        align-items: start;
    }

    .qucto-indicators > * {
        margin-block: 0;
    }

    .qucto-indicators > :not(.qucto-indicator),
    .qucto-indicators > [data-dupont] {
        grid-column: 1 / -1;
    }

    .qucto-indicator-group {
        margin-top: var(--sp-4);
        padding-top: var(--sp-4);
        border-top: 1px solid var(--border-subtle);
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
    }

    /* An indicator is a KPI plate: canvas-coloured inside its card. */
    .qucto-indicator {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        min-width: 0;
        height: 100%;
        padding: var(--sp-4) 18px var(--sp-3-5);
        border: 1px solid transparent; /* forced-colours edge */
        border-radius: var(--r-card-nested);
        background: var(--surface-inset);
        overflow-wrap: anywhere;
    }

    @media (max-width: 640px) {
        .qucto-indicator {
            padding: var(--sp-3);
        }
    }

    .qucto-indicator > * {
        margin: 0;
    }

    .qucto-indicator > :is(h3, h4) {
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    .qucto-indicator > p {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
    }

    .qucto-indicator > p:has(> [data-indicator-value]) {
        color: var(--text-muted);
    }

    /* The period sits on its own line under the figure; the dash separating
       them in the text stays for assistive tech and copy-paste only. */
    .qucto-indicator-period {
        display: block;
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
    }

    .qucto-indicator-dash {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Standalone lead figure: proportional digits read tighter than tabular. */
    .qucto-indicator [data-indicator-value] {
        display: block;
        font-size: var(--fs-kpi);
        line-height: var(--lh-kpi);
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-kpi);
        color: var(--text);
    }

    .qucto-indicator [data-indicator-reason] {
        padding: var(--sp-2) var(--sp-3);
        border-radius: var(--r-sm);
        background: var(--warning-pill);
        color: var(--warning-ink);
    }

    .qucto-indicator > details {
        margin-top: auto;
        padding-top: var(--sp-2);
        border-top: 1px solid var(--border-subtle);
        font-size: var(--fs-sm);
    }

    .qucto-indicator > details > summary {
        cursor: pointer;
        color: var(--text-secondary);
    }

    .qucto-indicator details ul {
        margin: var(--sp-1) 0 0;
        padding-inline-start: var(--sp-4);
        color: var(--text-muted);
    }

    /* Du Pont: ROE = margin × turnover × leverage as one readable equation,
       the three factors as a row of tiles (dt/dd pairs flow into columns). */
    [data-dupont] {
        gap: var(--sp-3);
    }

    .qucto-indicator[data-dupont] > h3 {
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-indicator > [data-dupont-equation] {
        padding: var(--sp-3) var(--sp-4);
        border-radius: var(--r-md);
        background: var(--surface);
        border: 1px solid transparent;
        box-shadow: var(--surface-ring);
        font-size: var(--fs-title);
        line-height: var(--lh-title);
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
    }

    [data-dupont-equation] strong {
        color: var(--text);
        font-weight: var(--fw-semibold);
    }

    [data-dupont] > dl {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: auto auto;
        grid-auto-columns: minmax(0, 1fr);
        gap: var(--sp-1) var(--sp-3);
        margin: 0;
    }

    /* The dt/dd pair reads as one white tile on the indicator plate. */
    [data-dupont] > dl > dt {
        padding: var(--sp-3) var(--sp-3) 0;
        border: 1px solid transparent;
        border-bottom: 0;
        border-radius: var(--r-md) var(--r-md) 0 0;
        background: var(--surface);
        font-size: var(--fs-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    [data-dupont] > dl > dd {
        margin: calc(-1 * var(--sp-1)) 0 0;
        padding: var(--sp-1) var(--sp-3) var(--sp-3);
        border: 1px solid transparent;
        border-top: 0;
        border-radius: 0 0 var(--r-md) var(--r-md);
        background: var(--surface);
        font-size: var(--fs-sm);
        color: var(--text-secondary);
    }

    .qucto-dupont-value {
        display: block;
        margin-bottom: var(--sp-1);
        font-size: var(--fs-title);
        line-height: var(--lh-title);
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-title);
        font-variant-numeric: tabular-nums;
        color: var(--text);
    }

    @media (max-width: 640px) {
        [data-dupont] > dl {
            grid-auto-flow: row;
            grid-template-rows: none;
            grid-template-columns: minmax(0, 1fr);
        }

        [data-dupont] > dl > dd + dt {
            margin-top: var(--sp-2);
        }
    }

    [data-dupont-summary] {
        font-size: var(--fs-md);
        line-height: var(--lh-md);
    }

    /* =================================================================
       5. Statutory statements (vyhláška 500/2002 Sb. layout)
       Levels: 0 totals, 1 sections, 2–3 indented items; sums weight 600.
       ================================================================= */
    .qucto-statutory td,
    .qucto-statutory th {
        font-variant-numeric: tabular-nums;
    }

    .qucto-statutory th[scope='row'] {
        width: 1%;
        white-space: nowrap;
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    .qucto-statutory .qucto-statutory-level-2 td:first-of-type {
        padding-inline-start: calc(var(--cell-px) + var(--sp-4));
    }

    .qucto-statutory .qucto-statutory-level-3 td:first-of-type {
        padding-inline-start: calc(var(--cell-px) + 2 * var(--sp-4));
    }

    .qucto-statutory .qucto-statutory-level-3 > * {
        color: var(--text-secondary);
    }

    .qucto-statutory .qucto-statutory-sum > *,
    .qucto-statutory .qucto-statutory-level-0 > * {
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-statutory .qucto-statutory-level-0 > * {
        background: var(--row-hover);
        border-top: 1px solid var(--border);
    }

    .qucto-statutory tbody .qucto-statutory-level-0:first-child > * {
        border-top: 0;
    }

    .qucto-statutory details {
        margin-top: var(--sp-0-5);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        font-weight: var(--fw-regular);
    }

    .qucto-statutory details > summary {
        cursor: pointer;
        color: var(--text-muted);
    }

    .qucto-statutory details ul {
        margin: var(--sp-1) 0 0;
        padding-inline-start: var(--sp-4);
        color: var(--text-secondary);
    }

    .qucto-statutory-state {
        margin-block: var(--sp-4);
        padding: var(--sp-4);
        border: 1px solid var(--info-border);
        border-radius: var(--r-card-nested);
        background: var(--info-wash);
    }

    .qucto-statutory-state > :first-child {
        margin-top: 0;
    }

    .qucto-statutory-state > :last-child {
        margin-bottom: 0;
    }

    /* =================================================================
       6. Containers of long client-supplied text
       ================================================================= */
    .qucto-document-activity,
    .qucto-accounting-segments,
    .qucto-tax-evidence {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .qucto-document-activity select,
    .qucto-accounting-segments select,
    .qucto-tax-evidence select {
        min-width: 0;
        max-width: 100%;
    }

    .qucto-accounting-segments td {
        font-variant-numeric: tabular-nums;
    }

    .qucto-accounting-segments [data-segment-results] tbody th {
        min-width: 10rem;
    }

    .qucto-accounting-segments [data-segment-results] tbody td:last-child {
        min-width: 16rem;
    }

    .qucto-accounting-segments [data-value],
    .qucto-accounting-segments [data-segment-total] {
        white-space: nowrap;
    }

    .qucto-tax-evidence .qucto-table :is(th, td) {
        min-width: 8rem;
        max-width: 20rem;
    }

    .qucto-tax-evidence .qucto-table td:has(> .qucto-comparison-bars) {
        max-width: none;
    }

    .qucto-tax-evidence .qucto-num {
        white-space: nowrap;
    }

    .qucto-tax-evidence .qucto-table .qucto-tax-description {
        min-width: 16rem;
    }

    .qucto-email-body,
    .qucto-information-body,
    .questionnaire-explanation {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .qucto-email-attempt,
    .qucto-vat-check {
        padding-block: var(--sp-4);
        overflow-wrap: anywhere;
    }

    .qucto-email-attempt + .qucto-email-attempt,
    .qucto-vat-check + .qucto-vat-check {
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-information-body {
        max-width: 72ch;
    }

    /* =================================================================
       7. Payments — instruction panel, QR, pending state
       QR is always black on white with its 4-module quiet zone (inside the
       PNG), ≥ 200px on screen, never inverted or tinted.
       ================================================================= */
    .qucto-payment + .qucto-payment {
        margin-top: var(--sp-6);
        padding-top: var(--sp-6);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-payment-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2) var(--sp-3);
        margin-bottom: var(--sp-4);
    }

    .qucto-payment-title {
        margin: 0;
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
        overflow-wrap: anywhere;
    }

    .qucto-payment-body {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--sp-5) var(--sp-8);
        align-items: start;
    }

    .qucto-payment-body > .qucto-payment-details:only-child {
        grid-column: 1 / -1;
    }

    .qucto-payment-qr {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        width: 210px;
        margin: 0;
    }

    .qucto-payment-qr img {
        display: block;
        width: 208px;
        height: 208px;
        border: 1px solid transparent; /* forced-colours edge */
        border-radius: var(--r-card-nested);
        box-shadow: var(--surface-ring);
        /* The code's own white quiet zone; neutral-0 stays white in any theme. */
        background: var(--neutral-0);
        image-rendering: pixelated;
    }

    .qucto-payment-qr figcaption {
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        color: var(--text-muted);
        text-wrap: pretty;
    }

    /* Rows, borders and the phone layout come from .qucto-meta-list; the panel
       adds the hierarchy: how much (hero) → where to (account, symbols) → rest. */
    .qucto-payment-details {
        align-items: baseline;
        align-content: start;
    }

    .qucto-payment-details > dt {
        font-size: var(--fs-sm);
    }

    .qucto-payment-details > .qucto-payment-amount-label {
        grid-column: 1 / -1;
        padding-bottom: 0;
        font-weight: var(--fw-medium);
    }

    .qucto-payment-details > .qucto-payment-amount {
        grid-column: 1 / -1;
        padding-block: var(--sp-1) var(--sp-4);
        font-size: var(--fs-kpi);
        line-height: var(--lh-kpi);
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-kpi);
        font-variant-numeric: tabular-nums;
        color: var(--text);
        text-align: start;
    }

    .qucto-payment-details > .qucto-payment-key {
        font-size: var(--fs-md);
        font-weight: var(--fw-medium);
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }

    .qucto-payment-details > .qucto-payment-key .qucto-table-secondary {
        font-size: var(--fs-sm);
        font-weight: var(--fw-regular);
    }

    .qucto-payment-details > .qucto-payment-source {
        font-size: var(--fs-sm);
        color: var(--text-secondary);
    }

    /* „Kopírovat" after the amount, account, IBAN and VS. js/copy-to-clipboard.js
       creates it only where the Clipboard API works, so it is never a dead
       control; the value itself stays selectable text. */
    .qucto-copy-button {
        margin-inline-start: var(--sp-2);
        vertical-align: middle;
        letter-spacing: normal;
        font-variant-numeric: normal;
    }

    .qucto-copy-button.is-copied {
        --btn-fg: var(--success-ink);
        --btn-fg-hover: var(--success-ink);
    }

    .qucto-payment-amount > .qucto-copy-button {
        vertical-align: 0.2em;
    }

    .qucto-payment > .qucto-callout,
    .qucto-payment > .qucto-form-hint {
        margin-top: var(--sp-3);
    }

    /* Declared as paid (F12.02): the QR is gone and the item waits for the
       accounting data. The callout above says why; this line records who and
       when, with a state dot (info = waiting, success = confirmed). */
    .qucto-payment-mark {
        display: flex;
        gap: var(--sp-2);
        margin: var(--sp-3) 0 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
    }

    .qucto-payment-mark::before {
        content: '';
        flex: none;
        width: 8px;
        height: 8px;
        margin-top: calc((var(--lh-sm) - 8px) / 2);
        border-radius: 50%;
        background: var(--info-solid);
    }

    .qucto-payment[data-payment-status='confirmed'] .qucto-payment-mark::before {
        background: var(--success-solid);
    }

    .qucto-payment[data-payment-status='pending'] .qucto-payment-amount,
    .qucto-payment[data-payment-status='paid'] .qucto-payment-amount,
    .qucto-payment[data-payment-status='cancelled'] .qucto-payment-amount {
        color: var(--text-secondary);
    }

    .qucto-payment-action {
        display: inline-block;
        margin: var(--sp-4) var(--sp-2) 0 0;
        vertical-align: top;
    }

    .qucto-payment-action > summary {
        list-style: none;
        cursor: pointer;
    }

    .qucto-payment-action > summary::-webkit-details-marker {
        display: none;
    }

    .qucto-payment-action[open] {
        display: block;
    }

    .qucto-payment-action > form {
        max-width: var(--form-max);
        margin-top: var(--sp-3);
        padding: var(--sp-4);
        border: 1px solid transparent; /* forced-colours edge */
        border-radius: var(--r-card-nested);
        background: var(--surface-inset);
    }

    .qucto-payment-action > form > .qucto-form-hint:first-child {
        margin-top: 0;
    }

    .qucto-payment-history {
        margin-top: var(--sp-4);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    .qucto-payment-history > summary {
        cursor: pointer;
        width: fit-content;
        color: var(--text-secondary);
        font-weight: var(--fw-medium);
    }

    .qucto-payment-history ul {
        margin: var(--sp-2) 0 0;
        padding: 0;
        list-style: none;
    }

    .qucto-payment-history li {
        padding: var(--sp-2) 0;
        border-top: 1px solid var(--border-subtle);
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
    }

    @media (max-width: 640px) {
        .qucto-payment-body {
            grid-template-columns: minmax(0, 1fr);
        }

        .qucto-payment-qr {
            justify-self: center;
            align-items: center;
            text-align: center;
        }

        .qucto-payment-action {
            display: block;
            margin-right: 0;
        }
    }

    /* Dashboard money tiles: several currencies / accounts in one tile. */
    [data-finance-overview] > .qucto-form-hint,
    .qucto-stat-grid + .qucto-form-hint {
        margin-block: var(--sp-3);
    }

    [data-money-tile] .qucto-stat-meta + .qucto-stat-value {
        margin-top: var(--sp-3);
    }

    .qucto-stat-list {
        display: grid;
        gap: var(--sp-1-5);
        margin: var(--sp-2) 0 0;
        padding: 0;
        list-style: none;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    .qucto-stat-list li {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-3);
        overflow-wrap: anywhere;
        color: var(--text-secondary);
    }

    .qucto-stat-list .qucto-num {
        white-space: nowrap;
        color: var(--text);
        font-weight: var(--fw-medium);
        font-variant-numeric: tabular-nums;
    }

    /* =================================================================
       8. Month switch — payroll month, calendar month (prev · label · next)
       ================================================================= */
    /* A white control on the ring (prev · month · next), radius of a plate. */
    .qucto-month-switch {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-1);
        width: fit-content;
        max-width: 100%;
        margin-bottom: var(--sp-5);
        padding: var(--seg-pad);
        border: 1px solid transparent; /* forced-colours edge */
        border-radius: var(--r-card-nested);
        background: var(--surface);
        box-shadow: var(--surface-ring);
    }

    /* The content column spaces its children with a gap already. */
    .qucto-main > .qucto-month-switch {
        margin-bottom: 0;
    }

    .qucto-month-switch-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-2);
        min-width: 11rem;
        padding: 0 var(--sp-3);
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }

    .qucto-month-switch .qucto-button svg {
        flex: none;
        width: var(--icon-sm);
        height: var(--icon-sm);
    }

    .qucto-month-switch-label svg {
        flex: none;
        width: var(--icon-sm);
        height: var(--icon-sm);
        color: var(--text-muted);
    }

    @media (max-width: 640px) {
        .qucto-month-switch {
            width: 100%;
            flex-wrap: nowrap;
        }

        .qucto-month-switch-label {
            flex: 1;
            min-width: 0;
            padding: 0;
        }

        /* Icon-only arrows on phones; the text stays as the accessible name. */
        .qucto-month-switch .qucto-button > span {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }
    }

    /* =================================================================
       9. Client calendar — month grid (desktop) / numbers + dots and the
       agenda list below (phone). Today = filled accent disc + „dnes“ for AT.
       ================================================================= */
    .qucto-client-calendar {
        width: 100%;
        min-width: 56rem;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
    }

    .qucto-client-calendar caption {
        text-align: start;
    }

    .qucto-client-calendar thead th {
        padding: var(--sp-2) var(--sp-3);
        border-bottom: 1px solid var(--border-subtle);
        background: none;
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
        text-align: start;
    }

    .qucto-client-calendar td {
        height: 7.5rem;
        padding: var(--sp-1-5) var(--sp-2);
        border-top: 1px solid var(--border-subtle);
        border-bottom: 0;
        border-inline-start: 1px solid var(--border-subtle);
        vertical-align: top;
        overflow-wrap: anywhere;
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
    }

    .qucto-client-calendar tbody tr:first-child td {
        border-top: 0;
    }

    .qucto-client-calendar td:first-child {
        border-inline-start: 0;
    }

    .qucto-client-calendar td:nth-child(n + 6) {
        background: var(--surface-sunken);
    }

    .qucto-client-calendar tbody tr:hover > td {
        background: none;
    }

    .qucto-client-calendar tbody tr:hover > td:nth-child(n + 6) {
        background: var(--surface-sunken);
    }

    /* Day number: a 28px disc, the whole disc is the link to the day's agenda. */
    .qucto-client-calendar td > a:first-child,
    .qucto-client-calendar td > span:only-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        padding: 0 var(--sp-1);
        border-radius: var(--r-pill);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        color: var(--text);
        font-variant-numeric: tabular-nums;
        text-decoration: none;
    }

    .qucto-client-calendar td > a:first-child:hover {
        background: var(--hover);
    }

    .qucto-client-calendar td > a[aria-current='date'] {
        border: 1px solid transparent;
        background: var(--btn-primary-bg);
        box-shadow: var(--btn-primary-shadow);
        color: var(--accent-ink);
    }

    .qucto-client-calendar td > a[aria-current='date']:hover {
        background: var(--btn-primary-bg-hover);
    }

    .qucto-client-calendar .qucto-calendar-today {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .qucto-calendar-outside,
    .qucto-client-calendar .qucto-calendar-outside:nth-child(n + 6),
    .qucto-client-calendar tbody tr:hover > .qucto-calendar-outside {
        background: var(--surface-inset);
    }

    .qucto-client-calendar .qucto-calendar-outside > span {
        color: var(--text-muted);
        font-weight: var(--fw-regular);
    }

    /* Event chips: title + origin/state; long titles clamp to two lines. */
    .qucto-client-calendar ul {
        display: grid;
        gap: var(--sp-1);
        margin: var(--sp-1) 0 0;
        padding: 0;
        list-style: none;
    }

    /* Event chip: a soft plate with a slate edge mark (origin stays in text). */
    .qucto-client-calendar li {
        padding: var(--sp-1) var(--sp-1-5) var(--sp-1) var(--sp-2);
        border: 1px solid transparent; /* forced-colours edge */
        border-radius: var(--r-sm);
        background: var(--surface-inset);
        box-shadow: inset 3px 0 0 var(--chart-2);
    }

    .qucto-client-calendar li > a {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        font-weight: var(--fw-medium);
        color: var(--text);
        text-decoration: none;
    }

    .qucto-client-calendar li > a:hover {
        text-decoration: underline;
    }

    .qucto-client-calendar li > .qucto-table-secondary {
        display: block;
        margin-top: var(--sp-0-5);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        color: var(--text-muted);
    }

    .qucto-client-calendar td > a:not(:first-child) {
        display: inline-block;
        margin-top: var(--sp-1);
        font-size: var(--fs-xs);
        font-weight: var(--fw-medium);
    }

    .qucto-weekday-short {
        display: none;
    }

    /* The month grid is not a data table: no inner vertical scroller and no
       sticky first column (components.css gives those to wide tables). */
    .qucto-table-scroll:has(> .qucto-client-calendar) {
        max-height: none;
    }

    .qucto-table-scroll > .qucto-client-calendar > * > tr > :first-child {
        position: static;
        box-shadow: none;
    }

    /* Agenda: the complete list of the month/day under the grid. */
    .qucto-calendar-agenda [data-agenda='date'] {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .qucto-calendar-agenda [data-agenda='source'] .qucto-table-secondary {
        display: block;
    }

    .qucto-calendar-agenda tr[data-overdue] [data-agenda='state'] {
        color: var(--danger-ink);
    }

    @media (max-width: 640px) {
        .qucto-client-calendar {
            min-width: 0;
        }

        /* Agenda as a list of event cards: date · title · origin · state. */
        .qucto-calendar-agenda,
        .qucto-calendar-agenda tbody,
        .qucto-calendar-agenda caption {
            display: block;
        }

        .qucto-calendar-agenda thead {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .qucto-calendar-agenda tbody tr {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--sp-0-5);
            padding: var(--sp-3) 0;
            border-bottom: 1px solid var(--border-subtle);
        }

        .qucto-calendar-agenda tbody tr:last-child {
            border-bottom: 0;
        }

        .qucto-table-scroll > .qucto-calendar-agenda > tbody > tr > :is(th, td) {
            position: static;
            display: block;
            padding: 0;
            border: 0;
            background: none;
            box-shadow: none;
            white-space: normal;
        }

        .qucto-calendar-agenda [data-agenda='date'] {
            order: -1;
            font-size: var(--fs-xs);
            line-height: var(--lh-xs);
            font-weight: var(--fw-medium);
            color: var(--text-muted);
        }

        .qucto-calendar-agenda [data-agenda='title'] {
            font-size: var(--fs-md);
            line-height: var(--lh-md);
            font-weight: var(--fw-semibold);
        }

        .qucto-calendar-agenda :is([data-agenda='source'], [data-agenda='state']) {
            font-size: var(--fs-sm);
            line-height: var(--lh-sm);
            color: var(--text-secondary);
        }

        .qucto-calendar-agenda [data-agenda='source'] .qucto-table-secondary {
            display: inline;
        }

        .qucto-calendar-agenda [data-agenda='source'] .qucto-table-secondary::before {
            content: ' · ' / ', ';
        }

        .qucto-client-calendar thead th {
            padding: var(--sp-2) 0;
            text-align: center;
        }

        .qucto-client-calendar td {
            height: auto;
            padding: var(--sp-1) 0 var(--sp-1-5);
            text-align: center;
        }

        .qucto-client-calendar td:nth-child(n + 6),
        .qucto-client-calendar tbody tr:hover > td:nth-child(n + 6) {
            background: none;
        }

        .qucto-client-calendar ul,
        .qucto-client-calendar td > a:not(:first-child) {
            display: none;
        }

        .qucto-client-calendar td > a:first-child,
        .qucto-client-calendar td > span:only-child {
            flex-direction: column;
            min-width: 36px;
            height: 40px;
            padding: 0;
            border-radius: var(--r-md);
        }

        /* Event dot under the number; the agenda list below has the details. */
        .qucto-client-calendar td:has(ul) > a:first-child::after {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            margin-top: var(--sp-0-5);
            border-radius: 50%;
            background: var(--chart-2);
        }

        .qucto-client-calendar td:has(ul) > a[aria-current='date']::after {
            background: var(--accent-ink);
        }

        .qucto-weekday-long {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .qucto-weekday-short {
            display: inline;
        }
    }

    /* =================================================================
       10. Questionnaire — client answer vs advisor assessment side by side
       ================================================================= */
    .questionnaire-comparison {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-4);
        margin-block: var(--sp-2) var(--sp-4);
    }

    /* break-word (not anywhere): answer tables inside keep real column widths. */
    .questionnaire-comparison > div {
        min-width: 0;
        padding: var(--sp-4);
        border: 1px solid transparent; /* forced-colours edge */
        border-radius: var(--r-card-nested);
        background: var(--surface-inset);
        overflow-wrap: break-word;
    }

    /* The advisor's assessment: a white plate on the ring with a slate edge. */
    .questionnaire-comparison > div + div {
        background: var(--surface);
        box-shadow: inset 3px 0 0 var(--chart-2), var(--surface-ring);
    }

    .questionnaire-comparison > div > :first-child {
        margin-top: 0;
    }

    .questionnaire-comparison > div > :last-child {
        margin-bottom: 0;
    }

    .questionnaire-comparison h3 {
        margin: 0 0 var(--sp-2);
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    .questionnaire-explanation {
        margin-top: var(--sp-2);
        padding: var(--sp-2) var(--sp-3);
        border-radius: var(--r-sm);
        background: var(--surface-inset);
        color: var(--text-secondary);
    }

    .questionnaire-attachments {
        margin-top: var(--sp-4);
        padding-top: var(--sp-4);
        border-top: 1px solid var(--border-subtle);
    }

    .questionnaire-attachments > h3 {
        margin: 0 0 var(--sp-2);
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    .questionnaire-attachments > p {
        margin: 0;
        font-size: var(--fs-sm);
        color: var(--text-muted);
    }

    .questionnaire-attachments > ul {
        display: grid;
        gap: var(--sp-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .questionnaire-attachments > ul > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-1) var(--sp-3);
        padding: var(--sp-2) var(--sp-3);
        border: 1px solid transparent; /* forced-colours edge */
        border-radius: var(--r-card-nested);
        background: var(--surface);
        box-shadow: var(--surface-ring);
        font-size: var(--fs-sm);
        color: var(--text-secondary);
    }

    .questionnaire-attachments > ul > li > a {
        font-weight: var(--fw-medium);
    }

    .questionnaire-attachments > ul > li > form {
        margin-inline-start: auto;
    }

    .questionnaire-attachments > form,
    .questionnaire-attachments + form,
    .questionnaire-attachments + .questionnaire-attachments {
        margin-top: var(--sp-4);
    }

    /* Discussion: one card per message, meta line above the body. */
    .questionnaire-messages {
        display: grid;
        gap: var(--sp-3);
        margin: 0 0 var(--sp-4);
        padding: 0;
        list-style: none;
    }

    .questionnaire-messages > li {
        padding: var(--sp-3) var(--sp-4);
        border: 1px solid transparent; /* forced-colours edge */
        border-radius: var(--r-task);
        background: var(--surface);
        box-shadow: var(--surface-ring);
        scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
    }

    .questionnaire-messages > li:target {
        background: var(--accent-wash);
        box-shadow: 0 0 0 1px var(--accent-line), var(--e1);
    }

    .questionnaire-messages > li > p:first-child {
        margin: 0 0 var(--sp-1);
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        color: var(--text-muted);
    }

    .questionnaire-messages > li > p:first-child strong {
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .questionnaire-messages .questionnaire-explanation {
        margin: 0;
        padding: 0;
        background: none;
        color: var(--text);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
    }

    @media (max-width: 640px) {
        .questionnaire-comparison {
            grid-template-columns: minmax(0, 1fr);
        }

        .questionnaire-attachments > ul > li > form {
            margin-inline-start: 0;
        }
    }

    /* =================================================================
       11. Payroll and attendance
       ================================================================= */
    /* Generic cell input, ctxmenu form and row actions live in components.css;
       here only what the payroll amount cell adds. */
    .qucto-amount-cell {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* Attendance day grid: H:MM inputs per day, compact and aligned. */
    /* Docházka (2026-09-24): toolbar with the month switch and a jump field,
       states as segmented links with counts, the handover as one bar whose
       forms wait in popovers, the save bar kept in view under the day table. */
    .qucto-attendance-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2) var(--sp-3);
    }

    .qucto-attendance-toolbar > .qucto-month-switch {
        margin: 0;
    }

    .qucto-month-jump {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }

    .qucto-month-jump input {
        width: auto;
    }

    .qucto-seg-links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-0-5);
        width: fit-content;
        max-width: 100%;
        padding: var(--seg-pad);
        background: var(--seg-track);
        border: 1px solid transparent;
        border-radius: var(--seg-radius);
    }

    .qucto-seg-links > a {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1-5);
        min-height: var(--seg-item-h);
        padding: 0 var(--sp-3);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        color: var(--seg-fg);
        text-decoration: none;
        border-radius: var(--seg-item-radius);
        transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    .qucto-seg-links > a:hover {
        color: var(--seg-fg-hover);
    }

    .qucto-seg-links > a[aria-current] {
        color: var(--seg-fg-active);
        background: var(--seg-thumb);
        box-shadow: var(--seg-thumb-shadow);
    }

    .qucto-seg-count {
        font-variant-numeric: tabular-nums;
        color: var(--text-muted);
    }

    /* The month's totals: five in a row on a desktop, two columns on a phone. */
    .qucto-attendance-summary {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    }

    .qucto-form-popover .qucto-form-hint {
        margin-block: var(--sp-1) var(--sp-3);
    }

    .qucto-attendance-flow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
    }

    .qucto-attendance-flow .qucto-form-hint {
        margin: var(--sp-1) 0 0;
    }

    .qucto-attendance-flow-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2);
    }

    .qucto-confirm-check {
        display: flex;
        align-items: flex-start;
        gap: var(--sp-2);
        margin-block: var(--sp-3);
    }

    .qucto-attendance-savebar {
        position: sticky;
        bottom: 0;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--sp-3);
        margin: var(--sp-3) calc(-1 * var(--card-px)) calc(-1 * var(--card-py));
        padding: var(--sp-3) var(--card-px) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
        border-top: 1px solid var(--border-subtle);
        border-radius: 0 0 var(--r-card) var(--r-card);
    }

    .qucto-attendance-savebar > .qucto-form-field {
        flex: 1 1 18rem;
        margin: 0;
    }

    .qucto-attendance-savebar textarea {
        min-height: var(--control-h);
        resize: vertical;
    }

    .qucto-attendance-history > summary {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        cursor: pointer;
    }

    .qucto-attendance-history > summary .qucto-card-title {
        margin: 0;
    }

    .qucto-attendance-history[open] > summary {
        margin-bottom: var(--sp-3);
    }

    /* The export menu opens under its button where anchoring is supported. */
    .qucto-menu-popover {
        width: min(22rem, calc(100vw - 2 * var(--sp-4)));
        padding: var(--sp-4);
    }

    .qucto-menu-popover-list {
        display: grid;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-menu-popover-list a {
        display: block;
        padding: var(--sp-2) var(--sp-2);
        font-weight: var(--fw-medium);
        color: var(--text);
        text-decoration: none;
        border-radius: var(--r-sm);
    }

    .qucto-menu-popover-list a:hover {
        background: var(--hover);
    }

    @supports (anchor-name: --x) {
        [data-attendance-export-toggle] {
            anchor-name: --attendance-export;
        }

        .qucto-menu-popover {
            position-anchor: --attendance-export;
            inset: auto;
            top: anchor(bottom);
            right: anchor(right);
            margin: var(--sp-2) 0 0;
            position-try-fallbacks: flip-block;
        }
    }

    @media (max-width: 640px) {
        .qucto-attendance-summary {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--sp-2);
        }

        .qucto-attendance-summary .qucto-stat {
            padding: var(--sp-3) var(--sp-3-5);
        }

        .qucto-attendance-summary .qucto-stat-value {
            font-size: var(--fs-title);
            line-height: var(--lh-title);
        }

        .qucto-attendance-summary .qucto-stat:last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }

        .qucto-month-jump {
            flex: 1 1 100%;
        }

        .qucto-month-jump input {
            flex: 1;
        }

        .qucto-menu-popover,
        .qucto-menu-popover:popover-open {
            inset: auto 0 0 0;
            width: 100%;
            max-width: none;
            margin: 0;
            padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
            border-radius: var(--r-card) var(--r-card) 0 0;
        }
    }

    /* Mzdové výsledky (2026-09-25): the view switch with the accountant's
       primary action, a compact selection — fields in rows of a grid, items
       and columns folded — and the period under the result title. */
    .qucto-results-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2) var(--sp-3);
    }

    .qucto-results-filter-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
        gap: var(--sp-3);
    }

    .qucto-results-filter > .qucto-form-actions {
        margin-top: var(--sp-4);
    }

    .qucto-results-filter-row + .qucto-results-filter-row {
        margin-top: var(--sp-3);
    }

    .qucto-results-filter-row > .qucto-form-field {
        margin: 0;
    }

    .qucto-results-filter-more {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--sp-2) var(--sp-6);
        margin-top: var(--sp-3);
    }

    .qucto-results-filter-picked {
        margin-inline-start: var(--sp-1);
        font-weight: var(--fw-regular);
        color: var(--text-muted);
    }

    .qucto-results-components {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2) var(--sp-4);
        margin: var(--sp-2) 0 0;
        padding: 0;
        border: 0;
    }

    .qucto-results-components label {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1-5);
    }

    .qucto-results-period {
        margin: var(--sp-0-5) 0 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    .qucto-attendance-time {
        width: 5.5rem;
        min-width: 5rem;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

    .qucto-table:has(.qucto-attendance-time) tbody :is(th, td) {
        padding-block: var(--sp-1);
        vertical-align: middle;
    }

    .qucto-table:has(.qucto-attendance-time) tbody th {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .qucto-table:has(.qucto-attendance-time) .qucto-form-field {
        margin: 0;
    }

    .qucto-table:has(.qucto-attendance-time) input[readonly] {
        border-color: transparent;
        background: transparent;
    }

    /* Weekends read as a band (with the day name in text, not by tint alone). */
    .qucto-table:has(.qucto-attendance-time) tbody tr[data-weekend] > * {
        background: var(--surface-sunken);
    }

    .qucto-attendance-weekday {
        font-weight: var(--fw-regular);
        color: var(--text-muted);
    }

    /* Payroll hours × rate grid: inputs and amounts share one line per row. */
    .qucto-table:has(.qucto-cell-input) :is(th, td) {
        vertical-align: middle;
    }

    /* =================================================================
       12. Accountant dashboard slots, system census
       ================================================================= */
    .qucto-obligation-slots {
        display: grid;
        gap: var(--sp-1);
        margin: 0 0 var(--sp-1);
        padding: 0;
        list-style: none;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    .qucto-obligation-slots > li {
        position: relative;
        padding-inline-start: var(--sp-4);
    }

    /* State dot supplements the state text (never the only carrier). */
    .qucto-obligation-slots > li::before {
        content: '';
        position: absolute;
        inset-inline-start: 0;
        top: calc((var(--lh-sm) - 8px) / 2);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--neutral-solid);
    }

    .qucto-obligation-slots > li:is([data-state='done'], [data-state='approved'])::before {
        background: var(--success-solid);
    }

    .qucto-obligation-slots > li[data-state='missing']::before {
        background: var(--warning-solid);
    }

    .qucto-obligation-slots > li:is([data-state='rejected'], [data-state='changes_requested'])::before {
        background: var(--danger-solid);
    }

    .qucto-obligation-slots > li:is([data-state='preparation'], [data-state='pending'], [data-state='submitted'])::before {
        background: var(--info-solid);
    }

    .qucto-census-list {
        display: grid;
        gap: var(--sp-0-5);
        margin: var(--sp-2) 0 0;
        padding-inline-start: var(--sp-5);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    .qucto-census-count {
        display: inline-block;
        min-width: 4ch;
        font-weight: var(--fw-semibold);
        font-variant-numeric: tabular-nums;
        text-align: end;
    }


    /* =================================================================
       13. Forced colours (Windows High Contrast) and print
       ================================================================= */
    @media (forced-colors: active) {
        .qucto-chart path,
        .qucto-comparison-bars rect,
        .qucto-share-value,
        .qucto-chart-legend rect,
        .qucto-legend-swatch rect {
            fill: CanvasText;
        }

        /* Second series / comparison period: the other system colour, so two
           series stay apart even without the palette. */
        .qucto-chart .qucto-series-2,
        .qucto-comparison-bars :is(.qucto-bar-b, .qucto-bar-expense, .qucto-cashflow-expense),
        .qucto-chart-legend :is(.qucto-series-2, .qucto-bar-b, .qucto-bar-expense, .qucto-cashflow-expense) {
            fill: GrayText;
        }

        .qucto-share-bar {
            border: 1px solid GrayText;
        }

        .qucto-donut circle:not(.qucto-donut-track) {
            stroke: CanvasText;
        }

        .qucto-donut .qucto-donut-track {
            stroke: Canvas;
        }

        .qucto-chart-grid,
        .qucto-chart-axis,
        .qucto-comparison-bars line {
            stroke: GrayText;
        }

        .qucto-chart-text,
        .qucto-donut-total,
        .qucto-donut-caption {
            fill: CanvasText;
        }

        .qucto-client-calendar td > a[aria-current='date'] {
            border-color: CanvasText;
        }

        .qucto-overview-warning,
        .qucto-overview-kinds a[aria-current='page'] {
            border-color: CanvasText;
        }

        .qucto-overview-kinds a[aria-current='page'] {
            outline: 2px solid Highlight;
            outline-offset: -2px;
        }

        .qucto-chart-text-current {
            fill: CanvasText;
        }
    }

    @media print {
        .qucto-chart path,
        .qucto-donut circle {
            opacity: 1;
        }

        .qucto-payment-action,
        .qucto-month-switch .qucto-button {
            display: none;
        }
    }
}

/* === Dashboard 2026 (R5b) ===
 * Client/accountant/employee dashboard (templates/dashboard/index.html.twig) and
 * Přehled firem (templates/dashboard/companies.html.twig). Direction A
 * „Temný rám, plovoucí list" (ADR-0225, concept A): greeting H1 in the shell,
 * tasks as a row of white tiles, KPI tiles with soft pills and a sparkline
 * only from a real published series, „Výnosy a náklady" columns from the
 * published monthly series, deadlines with date blocks. Layout follows the
 * `main` container, never the viewport. Tokens only; amber stays for the one
 * primary action and the main data series (revenue bars, the trend).
 */
@layer features {
    /* ---- page head: firm · today · latest accounting date, actions ---- */
    .qucto-dash-head {
        align-items: center;
    }

    .qucto-dash-context {
        font-variant-numeric: tabular-nums;
    }

    .qucto-dash-firm {
        font-weight: var(--fw-medium);
        color: var(--text-secondary);
    }

    /* ---- section heads (Čeká na vás, Finanční přehled): quiet, one line ---- */
    .qucto-dash-section {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        min-width: 0;
    }

    .qucto-dash-section-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-1) var(--sp-4);
    }

    .qucto-dash-section-title {
        margin: 0;
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
        color: var(--text);
    }

    .qucto-dash-section-note,
    .qucto-tasks-total {
        margin: 0;
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    /* ---- „Čeká na vás": one grid of tiles across the task groups ---- */
    .qucto-task-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
        gap: var(--card-gap);
    }

    /* Groups keep their heading, disclosure and ids in the DOM; their tiles
       flow in the one grid. */
    .qucto-task-group,
    .qucto-task-items,
    .qucto-task-group > .qucto-task-list,
    .qucto-task-items > .qucto-task-list {
        display: contents;
    }

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

    .qucto-task-group-title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .qucto-task-list > li {
        display: flex;
        min-width: 0;
    }

    /* The whole tile is the link; no levitation — the ring sharpens on hover. */
    .qucto-task {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: var(--sp-2);
        min-width: 0;
        padding: var(--sp-3-5) var(--sp-4);
        color: var(--text);
        text-decoration: none;
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-task);
        box-shadow: var(--e0);
        transition: box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
    }

    .qucto-task:hover {
        box-shadow: var(--e0-hover);
    }

    .qucto-task:active {
        transform: scale(var(--press-scale));
    }

    .qucto-task:focus-visible {
        outline-offset: var(--focus-offset);
    }

    .qucto-task-kicker {
        display: flex;
        align-items: center;
        gap: var(--sp-1-5);
        min-width: 0;
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .qucto-task-dot {
        flex: none;
        width: 7px;
        height: 7px;
        background: var(--neutral-400);
        border-radius: 50%;
    }

    .qucto-task-dot-warning {
        background: var(--accent);
    }

    .qucto-task-dot-danger {
        background: var(--danger-solid);
    }

    .qucto-task-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        font-weight: var(--fw-semibold);
        letter-spacing: -0.005em;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    #work-questions .qucto-task-title {
        font-weight: var(--fw-medium);
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .qucto-task-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        margin-top: auto;
        font-size: var(--fs-label);
        line-height: var(--lh-label);
    }

    .qucto-task-meta {
        min-width: 0;
        overflow: hidden;
        color: var(--text-muted);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-task-cta {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: var(--sp-1);
        font-weight: var(--fw-semibold);
        color: var(--text);
        white-space: nowrap;
    }

    .qucto-task-cta::after {
        content: '';
        width: 13px;
        height: 13px;
        background: currentColor;
        mask: var(--i-arrow-right) center / 13px no-repeat;
        transition: transform var(--dur-1) var(--ease-out);
    }

    .qucto-task:hover .qucto-task-cta::after {
        transform: translateX(calc(var(--motion-shift) / 2));
    }

    /* More than four in a group: the rest behind a disclosure (all stay in the DOM). */
    .qucto-task-rest,
    .qucto-task-all {
        grid-column: 1 / -1;
    }

    .qucto-task-rest > .qucto-task-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
        gap: var(--card-gap);
        margin-top: var(--sp-2);
    }

    .qucto-task-rest > summary {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        min-height: var(--control-h-sm);
        padding: 0 var(--sp-2-5);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        color: var(--text-secondary);
        list-style: none;
        border-radius: var(--r-md);
        cursor: pointer;
        transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    .qucto-task-rest > summary::-webkit-details-marker {
        display: none;
    }

    .qucto-task-rest > summary::after {
        content: '';
        width: 14px;
        height: 14px;
        background: currentColor;
        mask: var(--i-chevron-down) center / 14px no-repeat;
        transition: transform var(--dur-2) var(--ease-out);
    }

    .qucto-task-rest[open] > summary::after {
        transform: rotate(180deg);
    }

    .qucto-task-rest > summary:hover {
        color: var(--text);
        background: var(--hover);
    }

    .qucto-task-all {
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    /* „Vše vyřízeno" (also reused by the empty deadline panel). */
    .qucto-tasks-done,
    .qucto-dash-panel-empty {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        margin: 0;
        color: var(--text-secondary);
    }

    .qucto-tasks-done {
        padding: var(--sp-3-5) var(--sp-4);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-task);
        box-shadow: var(--e0);
    }

    .qucto-tasks-done strong {
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-tasks-done-icon {
        display: grid;
        flex: none;
        place-items: center;
        width: 28px;
        height: 28px;
        color: var(--success-ink);
        background: var(--success-pill);
        border-radius: var(--r-pill);
    }

    .qucto-tasks-done-icon::before {
        content: '';
        width: 14px;
        height: 14px;
        background: currentColor;
        mask: var(--i-check) center / 14px no-repeat;
    }

    .qucto-dash-panel-empty .qucto-tasks-done-icon {
        width: 24px;
        height: 24px;
    }

    /* ---- Finanční přehled: KPI row ---- */
    /* One column on a phone, two from 34rem (an odd last tile takes the row),
       then per count: 3 → 3, 4 → 4, 5 → 2 + 3 (receivables and payables lead),
       6 → 3 + 3; five in one row once every tile gets ≥ 16rem. */
    .qucto-kpis {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--card-gap);
    }

    @container main (min-width: 34rem) {
        .qucto-kpis {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .qucto-kpis > :last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }
    }

    @container main (min-width: 56rem) {
        .qucto-kpis:has(> :nth-child(3):last-child),
        .qucto-kpis:has(> :nth-child(6):last-child) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .qucto-kpis:has(> :nth-child(4):last-child) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .qucto-kpis:has(> :nth-child(5):last-child) {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }

        .qucto-kpis:has(> :nth-child(3):last-child) > :nth-child(3):last-child {
            grid-column: auto;
        }

        .qucto-kpis:has(> :nth-child(5):last-child) > :nth-child(n + 3) {
            grid-column: span 2;
        }

        .qucto-kpis:has(> :nth-child(5):last-child) > :nth-child(-n + 2) {
            grid-column: span 3;
        }
    }

    @container main (min-width: 84rem) {
        .qucto-kpis:has(> :nth-child(5):last-child) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }

        .qucto-kpis:has(> :nth-child(5):last-child) > :is(:nth-child(-n + 2), :nth-child(n + 3)) {
            grid-column: auto;
        }
    }

    /* A tile is a white card-level surface; its one link stretches over it,
       hover only sharpens the ring — no levitation. */
    .qucto-kpi {
        container: dash-kpi / inline-size;
        position: relative;
        gap: var(--sp-1);
        padding: var(--sp-4) 18px var(--sp-3);
        transition: box-shadow var(--dur-1) var(--ease-out);
    }

    .qucto-kpi:has(.qucto-kpi-link):hover {
        box-shadow: var(--e0-hover);
    }

    .qucto-kpi:has(.qucto-kpi-link:focus-visible) {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .qucto-kpi .qucto-stat-label {
        color: var(--text-muted);
    }

    /* The dominant number: the fixed KPI size, stepping down only when the
       tile itself is narrow; groups never break (no-break spaces), the unit may. */
    .qucto-kpi .qucto-stat-value {
        margin-top: var(--sp-0-5);
        font-size: clamp(1.375rem, 12cqi, var(--fs-kpi));
        line-height: var(--lh-kpi);
        overflow-wrap: normal;
    }

    .qucto-kpi .qucto-stat-meta + .qucto-stat-value {
        margin-top: var(--sp-3);
    }

    .qucto-kpi-unit {
        margin-left: 1px;
        font-size: var(--fs-kpi-unit);
        font-weight: var(--fw-medium);
        letter-spacing: 0;
        color: var(--text-muted);
    }

    .qucto-kpi .qucto-kpi-minor {
        font-size: var(--fs-title);
        line-height: var(--lh-title);
        letter-spacing: var(--tracking-title);
    }

    .qucto-kpi .qucto-kpi-minor .qucto-kpi-unit {
        font-size: var(--fs-sm);
    }

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

    /* Facts line: pills lead visually, the sentence stays intact in the DOM. */
    .qucto-kpi-facts {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-1) var(--sp-1-5);
    }

    /* The separator stays readable before plain text, hides before a pill. */
    .qucto-kpi-sep:has(+ :is(.qucto-kpi-alert, .qucto-kpi-pending)) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .qucto-kpi-alert,
    .qucto-kpi-pending {
        order: -1;
        display: inline-flex;
        align-items: center;
        min-height: var(--pill-h);
        padding: 0 var(--pill-px);
        font-size: var(--pill-fs);
        line-height: 1.25;
        font-weight: var(--fw-semibold);
        border: 1px solid transparent;
        border-radius: var(--r-md);
    }

    .qucto-kpi-alert {
        color: var(--danger-ink);
        background: var(--danger-pill);
    }

    .qucto-kpi-pending {
        color: var(--warning-ink);
        background: var(--warning-pill);
    }

    .qucto-kpi-asof {
        margin-top: var(--sp-0-5);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
    }

    .qucto-kpi-note {
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        color: var(--text-secondary);
    }

    .qucto-kpi-note[role='status'] {
        color: var(--warning-ink);
    }

    .qucto-kpi-loss,
    .qucto-kpi .qucto-kpi-loss {
        color: var(--danger-ink);
    }

    .qucto-kpi .qucto-stat-list {
        margin-top: var(--sp-1);
    }

    /* Sparkline of a real published series (the cumulative result per month). */
    .qucto-kpi-spark {
        display: block;
        width: 100%;
        height: auto;
        margin-top: var(--sp-1-5);
        overflow: visible;
    }

    .qucto-kpi-spark-line {
        fill: none;
        stroke: var(--chart-line);
        stroke-width: 1.8;
        stroke-linejoin: round;
        stroke-linecap: round;
    }

    .qucto-kpi-spark-stop-top {
        stop-color: var(--chart-revenue);
        stop-opacity: 0.35;
    }

    .qucto-kpi-spark-stop-end {
        stop-color: var(--chart-revenue);
        stop-opacity: 0;
    }

    .qucto-kpi-spark-dot {
        fill: var(--chart-line);
    }

    .qucto-kpi-link,
    .qucto-stat > a.qucto-kpi-link:last-child {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        align-self: flex-start;
        margin-top: auto;
        padding-top: var(--sp-2-5);
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
        text-decoration: none;
    }

    .qucto-kpi-link::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--r-card);
    }

    .qucto-kpi-link::after {
        content: '';
        width: 13px;
        height: 13px;
        background: currentColor;
        mask: var(--i-arrow-right) center / 13px no-repeat;
        transition: transform var(--dur-1) var(--ease-out);
    }

    .qucto-kpi-link:focus-visible {
        outline: none;
    }

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

    .qucto-kpi:hover .qucto-kpi-link::after {
        transform: translateX(calc(var(--motion-shift) / 2));
    }

    /* Issued-invoice counters: a quiet white strip of chips under the KPI row. */
    .qucto-kpi-strip {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card);
        box-shadow: var(--e0);
    }

    .qucto-kpi-strip-title {
        margin: 0 var(--sp-2) 0 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        letter-spacing: 0;
        color: var(--text);
    }

    .qucto-kpi-mini {
        display: inline-flex;
        align-items: baseline;
        gap: var(--sp-1-5);
        min-height: var(--control-h-sm);
        padding: var(--sp-1-5) var(--sp-3);
        color: var(--text);
        text-decoration: none;
        background: var(--surface-inset);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
    }

    a.qucto-kpi-mini:hover {
        background: var(--hover);
    }

    .qucto-kpi-mini .qucto-stat-value {
        font-size: var(--fs-md);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        letter-spacing: 0;
    }

    .qucto-kpi-mini .qucto-stat-label {
        font-size: var(--fs-sm);
        font-weight: var(--fw-regular);
        color: var(--text-secondary);
    }

    .qucto-kpi-mini.is-alert {
        background: var(--danger-pill);
    }

    .qucto-kpi-mini.is-alert :is(.qucto-stat-value, .qucto-stat-label) {
        color: var(--danger-ink);
    }

    .qucto-kpi-mini-wide {
        flex-wrap: wrap;
        column-gap: var(--sp-2);
        border-radius: var(--r-card-nested);
    }

    .qucto-kpi-mini-wide .qucto-stat-meta {
        flex-basis: 100%;
    }

    @container main (max-width: 40rem) {
        .qucto-kpi-strip-title {
            flex-basis: 100%;
            margin-block: var(--sp-1) 0;
        }
    }

    .qucto-kpi-strip-note {
        flex-basis: 100%;
        margin: 0 var(--sp-1) var(--sp-1) 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
    }

    /* ---- the 2/3 + 1/3 grid (chart + invoices | deadlines + news) ---- */
    .qucto-dash-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: var(--card-gap);
    }

    .qucto-dash-main,
    .qucto-dash-aside {
        display: flex;
        flex-direction: column;
        gap: var(--card-gap);
        min-width: 0;
    }

    .qucto-dash-main:not(:has(> *)) {
        display: none;
    }

    /* The column gap already separates the cards (layout.css adds a margin between sibling cards). */
    .qucto-main :is(.qucto-dash-main, .qucto-dash-aside) > .qucto-card + .qucto-card {
        margin-top: 0;
    }

    /* Lists of records: the underline appears on hover, like a table row link. */
    .qucto-dash-table td[data-column='number'] a,
    .qucto-timeline-body > a,
    .qucto-news-title a {
        text-decoration-color: transparent;
    }

    .qucto-dash-table td[data-column='number'] a:hover,
    .qucto-timeline-body > a:hover,
    .qucto-news-title a:hover {
        text-decoration-color: var(--link-underline-hover);
    }

    @container main (min-width: 52rem) {
        .qucto-dash-grid.has-aside:has(> .qucto-dash-main > *) {
            grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
        }
    }

    .qucto-dash-muted {
        margin: 0;
        color: var(--text-secondary);
    }

    .qucto-dash-note {
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--warning-ink);
    }

    .qucto-dash-invoices > .qucto-card-header > .qucto-button svg,
    .qucto-dash-result > .qucto-card-header > .qucto-button svg,
    .qucto-dash-panel-action svg {
        width: 14px;
        height: 14px;
    }

    /* ---- Poslední faktury: compact table, two-line cards on a narrow card ---- */
    .qucto-dash-invoices {
        container: dash-invoices / inline-size;
    }

    .qucto-dash-table td[data-column='due_date'] {
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .qucto-dash-table td[data-column='status'] {
        white-space: nowrap;
    }

    .qucto-dash-source-problem {
        display: block;
        margin-bottom: var(--sp-0-5);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        font-weight: var(--fw-medium);
        color: var(--danger-ink);
    }

    @container dash-invoices (max-width: 48rem) {
        .qucto-dash-table > thead {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .qucto-dash-table,
        .qucto-dash-table > tbody {
            display: block;
        }

        .qucto-dash-table > tbody > tr {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas:
                'number total'
                'type status'
                'due due';
            gap: var(--sp-0-5) var(--sp-3);
            padding: var(--sp-3) var(--card-px);
            border-top: 1px solid var(--border-subtle);
            transition: background-color var(--dur-1) var(--ease-out);
        }

        .qucto-dash-table > tbody > tr:hover {
            background: var(--row-hover);
        }

        .qucto-dash-table > tbody > tr > td,
        .qucto-card-flush .qucto-dash-table > tbody > tr > td:is(:first-child, :last-child) {
            display: block;
            padding: 0;
            background: none;
            border: 0;
        }

        .qucto-dash-table td[data-column='number'] { grid-area: number; }
        .qucto-dash-table td[data-column='type'] { grid-area: type; color: var(--text-secondary); }
        .qucto-dash-table td[data-column='due_date'] { grid-area: due; font-size: var(--fs-sm); }
        .qucto-dash-table td[data-column='status'] { grid-area: status; align-self: start; justify-self: end; text-align: right; }
        .qucto-dash-table td[data-column='total'] { grid-area: total; }

        .qucto-dash-table td[data-column='due_date']::before {
            content: attr(data-label) ' ';
        }

        /* Type and partner on one line: „Vydaná faktura · Odběratel: …". */
        .qucto-dash-table td[data-column='type'] > .qucto-table-secondary {
            display: inline;
            font-size: inherit;
            line-height: inherit;
        }

        .qucto-dash-table td[data-column='type'] > .qucto-table-secondary::before {
            content: ' · ';
        }
    }

    /* ---- Hospodaření / Výnosy a náklady ---- */
    .qucto-result {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
    }

    .qucto-result + .qucto-result {
        margin-top: var(--sp-5);
        padding-top: var(--sp-5);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-result > :is(h3, p) {
        margin: 0;
    }

    .qucto-result-kind {
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        font-weight: var(--fw-semibold);
    }

    .qucto-result-period {
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        color: var(--text-muted);
    }

    .qucto-result-flows {
        display: grid;
        gap: var(--sp-3);
        margin: 0;
    }

    .qucto-result-flow {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'label amount'
            'bar bar';
        align-items: baseline;
        gap: var(--sp-1-5) var(--sp-3);
    }

    .qucto-result-flow > dt {
        display: inline-flex;
        grid-area: label;
        align-items: center;
        gap: var(--sp-1-5);
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-regular);
        color: var(--text-secondary);
    }

    .qucto-result-swatch {
        display: none;
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 2px;
    }

    .qucto-swatch-revenue {
        background: var(--chart-revenue);
    }

    .qucto-swatch-expense {
        background: var(--chart-cost);
    }

    .qucto-result-amount {
        grid-area: amount;
        margin: 0;
        font-weight: var(--fw-semibold);
        font-variant-numeric: tabular-nums;
        text-align: right;
        white-space: nowrap;
    }

    .qucto-result-bar {
        grid-area: bar;
        margin: 0;
    }

    .qucto-result-track {
        display: block;
        width: 100%;
        height: 8px;
        overflow: hidden;
        background: var(--surface-2);
        border-radius: var(--r-pill);
    }

    .qucto-bar-revenue {
        fill: var(--chart-revenue);
    }

    .qucto-bar-expense {
        fill: var(--chart-cost);
    }

    /* With the monthly chart the two flows become the legend line. */
    .qucto-result.has-chart > .qucto-result-period {
        order: -2;
    }

    .qucto-result.has-chart .qucto-result-flows {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-1) var(--sp-4);
        order: -1;
    }

    .qucto-result.has-chart .qucto-result-flow {
        display: inline-flex;
        align-items: baseline;
        gap: var(--sp-1-5);
    }

    .qucto-result.has-chart .qucto-result-flow > dt {
        font-size: var(--fs-label);
        color: var(--text-muted);
    }

    .qucto-result.has-chart .qucto-result-swatch {
        display: inline-block;
    }

    .qucto-result.has-chart .qucto-result-amount {
        font-size: var(--fs-label);
        font-weight: var(--fw-semibold);
        text-align: left;
    }

    .qucto-dash-chart {
        container: dash-chart / inline-size;
        margin-inline: calc(-1 * var(--sp-1));
    }

    .qucto-dash-chart-svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
        font-variant-numeric: tabular-nums;
    }

    .qucto-dash-chart .qucto-chart-grid {
        stroke: var(--chart-grid);
        stroke-width: 1;
    }

    .qucto-dash-chart .qucto-chart-baseline {
        stroke: var(--chart-baseline);
        stroke-width: 1;
    }

    .qucto-dash-chart-tick,
    .qucto-dash-chart-month {
        font-size: 12px;
        font-weight: var(--fw-medium);
        fill: var(--chart-axis);
    }

    .qucto-dash-chart-month.is-current {
        font-weight: var(--fw-semibold);
        fill: var(--text);
    }

    /* A narrow card scales the chart down: bigger user units keep the months
       legible, the value axis gives way to the legend and the bar titles. */
    @container dash-chart (max-width: 30rem) {
        .qucto-dash-chart-month {
            font-size: 20px;
        }

        .qucto-dash-chart-tick {
            display: none;
        }
    }

    .qucto-result-total {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-1) var(--sp-3);
        padding-top: var(--sp-3);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-result-total strong {
        font-size: var(--fs-title);
        line-height: var(--lh-title);
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-title);
        font-variant-numeric: tabular-nums;
        color: var(--text);
    }

    .qucto-result-total strong.qucto-kpi-loss {
        color: var(--danger-ink);
    }

    /* ---- aside panels: heading + one quiet action on one line ---- */
    .qucto-dash-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--sp-3);
    }

    .qucto-dash-panel > * {
        grid-column: 1 / -1;
        margin: 0;
    }

    .qucto-dash-panel > h2 {
        grid-column: 1;
        grid-row: 1;
    }

    .qucto-dash-panel > .qucto-dash-panel-action {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-2)) calc(-1 * var(--sp-1)) 0;
    }

    .qucto-dash-panel-note,
    .qucto-dash-panel-foot {
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        color: var(--text-muted);
    }

    .qucto-dash-panel-foot {
        padding-top: var(--sp-3);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-dash-panel-empty {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    /* Deadlines: date blocks, rows split by hairlines; overdue in the danger
       tone and with its own text („Termín uplynul"). */
    .qucto-timeline {
        display: grid;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-timeline-item {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: center;
        gap: var(--sp-3);
        padding: 9px 0;
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-timeline-item:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .qucto-timeline-date {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: var(--sp-1) 0;
        line-height: 1.1;
        background: var(--surface-inset);
        border: 1px solid transparent;
        border-radius: var(--r-md);
    }

    .qucto-timeline-day {
        font-size: var(--fs-md);
        font-weight: var(--fw-bold);
        font-variant-numeric: tabular-nums;
        color: var(--text);
    }

    .qucto-timeline-month {
        font-size: 11px;
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    .qucto-timeline-item.is-overdue .qucto-timeline-date {
        background: var(--danger-pill);
    }

    .qucto-timeline-item.is-overdue :is(.qucto-timeline-day, .qucto-timeline-month) {
        color: var(--danger-ink);
    }

    .qucto-timeline-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-0-5);
        min-width: 0;
    }

    .qucto-timeline-body > a {
        font-size: var(--fs-nav);
        line-height: var(--lh-nav);
        font-weight: var(--fw-medium);
        overflow-wrap: anywhere;
    }

    .qucto-timeline-meta {
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        color: var(--text-muted);
    }

    .qucto-timeline-body > .qucto-badge {
        margin-top: var(--sp-0-5);
    }

    /* News: title, three-line excerpt, source. */
    .qucto-news-list {
        display: grid;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-news-list > li + li {
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-news-item {
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
        padding: var(--sp-3) 0;
    }

    .qucto-news-list > li:first-child > .qucto-news-item {
        padding-top: 0;
    }

    .qucto-news-list > li:last-child > .qucto-news-item {
        padding-bottom: 0;
    }

    .qucto-news-item > * {
        margin: 0;
    }

    .qucto-news-title {
        font-size: var(--fs-nav);
        line-height: var(--lh-nav);
        font-weight: var(--fw-semibold);
        letter-spacing: 0;
    }

    .qucto-news-excerpt {
        display: -webkit-box;
        overflow: hidden;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .qucto-news-meta {
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        color: var(--text-muted);
    }

    /* ---- limited roles (employee, no finance): welcome + own sections ---- */
    .qucto-dash-welcome-head {
        display: flex;
        align-items: flex-start;
        gap: var(--sp-4);
    }

    .qucto-dash-welcome-head .qucto-emptystate-icon {
        flex: none;
        margin: 0;
    }

    .qucto-dash-welcome-head .qucto-card-title {
        margin: 0 0 var(--sp-1);
    }

    .qucto-shortcuts {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
        gap: var(--card-gap);
        margin: var(--sp-5) 0 0;
        padding: 0;
        list-style: none;
    }

    .qucto-shortcut {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        min-height: 56px;
        padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
        font-weight: var(--fw-medium);
        color: var(--text);
        text-decoration: none;
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-task);
        box-shadow: var(--e0);
        transition: box-shadow var(--dur-1) var(--ease-out);
    }

    .qucto-shortcut:hover {
        box-shadow: var(--e0-hover);
    }

    .qucto-shortcut-icon {
        display: grid;
        flex: none;
        place-items: center;
        width: 32px;
        height: 32px;
        color: var(--text-secondary);
        background: var(--surface-inset);
        border-radius: var(--r-md);
    }

    .qucto-shortcut svg {
        width: var(--icon-sm);
        height: var(--icon-sm);
        stroke-width: 1.8;
    }

    .qucto-shortcut-label {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
    }

    .qucto-shortcut-area {
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        font-weight: var(--fw-regular);
        color: var(--text-muted);
    }

    .qucto-shortcut > svg:last-child {
        color: var(--text-muted);
    }

    /* ---- Přehled firem ---- */
    .qucto-portfolio-filter {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--sp-3);
        padding-block: var(--sp-4);
    }

    .qucto-portfolio-filter > .qucto-form-field {
        flex: 0 1 10rem;
        min-width: 0;
        margin: 0;
    }

    .qucto-portfolio-filter > .qucto-portfolio-search {
        flex: 1 1 16rem;
    }

    .qucto-portfolio-filter > .qucto-portfolio-year {
        flex-basis: 7rem;
    }

    .qucto-portfolio-filter > .qucto-button {
        margin: 0;
    }

    .qucto-portfolio-prepare {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3) var(--sp-6);
    }

    .qucto-portfolio-prepare-text {
        flex: 1 1 28rem;
        min-width: 0;
    }

    .qucto-portfolio-prepare-text > * {
        margin: 0;
    }

    .qucto-portfolio-prepare-text > p {
        margin-top: var(--sp-1);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
        text-wrap: pretty;
    }

    .qucto-portfolio-prepare > .qucto-button {
        margin: 0;
    }

    /* Period switch: arrows around the month on the segmented track. */
    .qucto-portfolio-period {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-0-5);
        padding: var(--seg-pad);
        background: var(--seg-track);
        border: 1px solid transparent;
        border-radius: var(--seg-radius);
    }

    .qucto-portfolio-period > .qucto-icon-btn {
        width: var(--seg-item-h);
        height: var(--seg-item-h);
        border-radius: var(--seg-item-radius);
    }

    .qucto-portfolio-period > .qucto-icon-btn:hover {
        background: var(--seg-thumb);
        box-shadow: var(--seg-thumb-shadow);
    }

    /* Count chip beside a card title („Firmy 12"); the parentheses stay for screen readers. */
    .qucto-task-count {
        display: inline-grid;
        place-items: center;
        min-width: 22px;
        height: var(--pill-h);
        padding: 0 var(--sp-1-5);
        font-size: var(--pill-fs);
        line-height: 1;
        font-weight: var(--fw-semibold);
        font-variant-numeric: tabular-nums;
        vertical-align: 0.1em;
        color: var(--text-secondary);
        background: var(--surface-2);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
    }

    .qucto-portfolio-period-label {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1-5);
        min-width: 8.5rem;
        min-height: var(--seg-item-h);
        padding: 0 var(--sp-2);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        justify-content: center;
        color: var(--text);
        background: var(--seg-thumb);
        border-radius: var(--seg-item-radius);
        box-shadow: var(--seg-thumb-shadow);
    }

    .qucto-portfolio-period-label svg {
        width: 14px;
        height: 14px;
        color: var(--text-muted);
    }

    .qucto-portfolio-table > tbody > tr > th[scope='row'] {
        font-weight: var(--fw-semibold);
    }

    .qucto-portfolio-table td[data-column='documents'] {
        width: 1%;
    }

    .qucto-portfolio-table td[data-column='cash'] {
        min-width: 8rem;
    }

    .qucto-portfolio-table td[data-column='obligations'] {
        min-width: 17rem;
    }

    .qucto-portfolio-table td[data-column='actions'] {
        min-width: 15.5rem;
    }

    .qucto-portfolio-count {
        font-weight: var(--fw-medium);
        font-variant-numeric: tabular-nums;
        color: var(--text-muted);
    }

    .qucto-portfolio-count.is-active {
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-portfolio-cash > .qucto-portfolio-count {
        margin-inline-end: var(--sp-1-5);
    }

    .qucto-portfolio-state {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
    }

    .qucto-portfolio-na {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    /* Obligation slots: name + state pill, detail line below. */
    .qucto-portfolio-table .qucto-obligation-slots {
        gap: var(--sp-2);
        margin: 0;
    }

    .qucto-portfolio-table .qucto-obligation-slots + .qucto-obligation-slots {
        margin-top: var(--sp-2);
        padding-top: var(--sp-2);
        border-top: 1px dashed var(--border);
    }

    .qucto-portfolio-table .qucto-obligation-slots > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-0-5) var(--sp-2);
        padding: 0;
    }

    .qucto-portfolio-table .qucto-obligation-slots > li::before {
        content: none;
    }

    .qucto-slot-name {
        min-width: 8.5rem;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        color: var(--text);
    }

    .qucto-slot-detail {
        flex-basis: 100%;
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        color: var(--text-muted);
    }

    /* A missing slot reads as missing without relying on colour: dashed edge. */
    .qucto-obligation-slots > li[data-state='missing'] > .qucto-slot-state {
        border-color: var(--border-control);
        border-style: dashed;
    }

    .qucto-portfolio-table td[data-column='obligations'] > .qucto-table-secondary {
        margin-top: var(--sp-2);
    }

    .qucto-portfolio-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-1-5);
        max-width: 18rem;
    }

    .qucto-portfolio-actions > .qucto-button {
        margin: 0;
    }

    /* Phone: firm cards (qucto-table-cards); the multi-line cells take the full width under their label. */
    @container qucto-list (max-width: 40rem) {
        .qucto-portfolio-table > tbody > tr > td:is([data-column='obligations'], [data-column='actions']) {
            display: block;
            padding-top: var(--sp-2);
            text-align: left;
        }

        .qucto-portfolio-table > tbody > tr > td:is([data-column='obligations'], [data-column='actions'])::before {
            display: block;
            margin-bottom: var(--sp-1-5);
        }

        .qucto-portfolio-table > tbody > tr > :is(td, th),
        .qucto-portfolio-table td[data-column='documents'] {
            width: auto;
            min-width: 0;
        }

        .qucto-portfolio-actions {
            max-width: none;
        }
    }

    /* ---- forced colours: mask icons, dots and bars keep a system colour ---- */
    @media (forced-colors: active) {
        .qucto-tasks-done-icon::before,
        .qucto-task-rest > summary::after,
        .qucto-task-cta::after,
        .qucto-kpi-link::after,
        .qucto-task-dot,
        .qucto-result-swatch {
            background: CanvasText;
            forced-color-adjust: none;
        }

        .qucto-result-track {
            border: 1px solid CanvasText;
        }

        .qucto-result-track rect,
        .qucto-bar-revenue {
            fill: CanvasText;
        }

        .qucto-result-track .qucto-bar-expense,
        .qucto-bar-expense {
            fill: GrayText;
        }

        .qucto-kpi-spark-line {
            stroke: CanvasText;
        }

        .qucto-kpi-spark-area {
            display: none;
        }

        .qucto-kpi:has(.qucto-kpi-link:focus-visible) {
            outline-color: Highlight;
        }
    }
}

/* === Doklady po měsících (Phase 225, layout Phase 236–238) ===
 * templates/documents/_months.html.twig, _month_tab, _month, _month_doc,
 * _month_doc_card, js/document-upload.js (ADR-0226). Direction A: on top the
 * picker — the list / grid switch on the right, below it the months as white
 * tiles with the soft ring (--e0; the period itself is a pill in the top bar,
 * Phase 239); then
 * the chosen month as one white card: header with counts and deadline, a
 * canvas-coloured drop zone (the nested plate, radius 12; a one-line bar once
 * the month has documents) and the documents as quiet rows or a grid of cards.
 * Amber marks the chosen tile (selection), the primary „Odeslat" button, the
 * drag-over state and the upload progress. Layout follows the width of `main`
 * (container queries), not the window.
 */
@layer features {
    /* ---- the page: picker on top, the chosen month below ---- */
    .qucto-doc-months {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        min-width: 0;
    }

    .qucto-doc-picker {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        min-width: 0;
    }

    /* ---- top bar of Doklady (Phase 239/241): tools and the period as pills ---- */
    .qucto-doc-topbar {
        display: flex;
        flex: none;
        align-items: center;
        gap: var(--sp-2);
    }

    .qucto-doc-top-tool {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        min-height: var(--control-h);
        padding: 0 var(--sp-3);
        font: inherit;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        color: var(--text);
        white-space: nowrap;
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        box-shadow: var(--btn-secondary-shadow);
        cursor: pointer;
        transition: box-shadow var(--dur-1) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }

    .qucto-doc-top-tool {
        text-decoration: none;
    }

    /* „Napojení (API)" (Phase 252): the same pill, icon only. */
    .qucto-doc-top-tool-icon {
        justify-content: center;
        width: var(--control-h);
        padding: 0;
    }

    .qucto-doc-top-tool:hover {
        box-shadow: var(--btn-secondary-shadow-hover);
    }

    .qucto-doc-top-tool:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .qucto-doc-top-tool svg {
        flex: none;
        width: 16px;
        height: 16px;
        stroke-width: 1.8;
        color: var(--text-muted);
    }

    /* The year of the month view (Phase 259): the same pill, the year and a chevron. */
    .qucto-doc-year {
        display: inline-flex;
        flex: none;
    }

    .qucto-doc-year-toggle {
        gap: var(--sp-1-5);
        padding: 0 var(--sp-2-5) 0 var(--sp-3);
        font-variant-numeric: tabular-nums;
    }

    .qucto-doc-year-toggle svg {
        width: 14px;
        height: 14px;
        transition: transform var(--dur-2) var(--ease-out);
    }

    .qucto-doc-year:has(.qucto-doc-year-menu:popover-open) .qucto-doc-year-toggle svg {
        transform: rotate(180deg);
    }

    .qucto-doc-year-menu {
        min-width: 14rem;
    }

    .qucto-doc-month-years-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-doc-month-year-label {
        flex: 1 1 auto;
    }

    .qucto-doc-month-year-count {
        font-size: var(--fs-label);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .qucto-doc-month-year[aria-current='page'] {
        font-weight: var(--fw-semibold);
        background: var(--surface-2);
    }

    /* The chosen period carries a check at the end of its row. */
    .qucto-doc-month-year::after {
        content: '';
        flex: none;
        width: 14px;
        height: 14px;
    }

    .qucto-doc-month-year[aria-current='page']::after {
        background: currentColor;
        mask: var(--i-check) center / 14px no-repeat;
    }

    @supports (anchor-name: --x) {
        .qucto-doc-year-toggle {
            anchor-name: --document-year;
        }

        .qucto-doc-year-menu {
            position-anchor: --document-year;
            inset: auto;
            top: anchor(bottom);
            right: anchor(right);
            margin: var(--sp-2) 0 0;
            position-try-fallbacks: flip-block;
        }
    }

    /* The page-head copy of the tools is for phones only (see _top_tools). */
    .qucto-doc-tools-phone {
        display: none;
    }

    @media (max-width: 767.98px) {
        .qucto-doc-topbar .qucto-doc-top-tool:not([data-document-tool="area"]),
        .qucto-doc-topbar .qucto-doc-year:not([data-document-tool="area"]) {
            display: none;
        }

        .qucto-doc-tools-phone {
            display: contents;
        }
    }

    /* Phone: the menu rises from the bottom, like the other menus. */
    @media (max-width: 640px) {
        .qucto-doc-year-menu,
        .qucto-doc-year-menu:popover-open {
            inset: auto 0 0 0;
            width: 100%;
            max-width: none;
            margin: 0;
            padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
            border-radius: var(--r-card) var(--r-card) 0 0;
        }
    }

    /* The list / grid switch on the right above the tiles (Phase 237). */
    .qucto-doc-picker-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--sp-2) var(--sp-3);
    }

    .qucto-doc-layout-switch {
        display: inline-flex;
        flex: none;
        gap: var(--sp-0-5);
        padding: var(--seg-pad);
        background: var(--seg-track);
        border: 1px solid transparent; /* forced-colours edge */
        border-radius: var(--seg-radius);
    }

    .qucto-doc-layout-switch a {
        display: grid;
        place-items: center;
        width: calc(var(--seg-item-h) + var(--sp-2));
        height: var(--seg-item-h);
        color: var(--seg-fg);
        border: 1px solid transparent;
        border-radius: var(--seg-item-radius);
        transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    .qucto-doc-layout-switch a:hover {
        color: var(--seg-fg-hover);
    }

    .qucto-doc-layout-switch a[aria-current='true'] {
        color: var(--seg-fg-active);
        background: var(--seg-thumb);
        box-shadow: var(--seg-thumb-shadow);
    }

    .qucto-doc-layout-switch a:focus-visible {
        outline-offset: -2px;
    }

    .qucto-doc-layout-switch svg {
        width: 16px;
        height: 16px;
    }

    /* ---- months as tiles: name, count, the one thing it waits for ---- */
    .qucto-doc-month-tabs-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
        gap: var(--sp-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-doc-month-tab {
        display: flex;
        flex-direction: column;
        gap: 2px;
        height: 100%;
        min-width: 0;
        padding: var(--sp-2-5) var(--sp-3);
        color: var(--text);
        text-decoration: none;
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
        box-shadow: var(--e0);
        transition: box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }

    .qucto-doc-month-tab:hover {
        box-shadow: var(--e0-hover);
    }

    .qucto-doc-month-tab:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .qucto-doc-month-tab:active {
        transform: scale(var(--press-scale));
    }

    .qucto-doc-month-tab[aria-current='page'] {
        background: var(--accent-wash);
        box-shadow: 0 0 0 1.5px var(--accent-edge);
    }

    .qucto-doc-month-tab-name {
        overflow: hidden;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-doc-month-tab-count {
        font-size: var(--fs-label);
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
    }

    .qucto-doc-month-tab.is-empty .qucto-doc-month-tab-count {
        color: var(--text-muted);
    }

    .qucto-doc-month-tab-state {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1-5);
        margin-top: var(--sp-0-5);
        font-size: var(--fs-xs);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
        white-space: nowrap;
    }

    .qucto-doc-month-tab-state::before {
        content: '';
        flex: none;
        width: 6px;
        height: 6px;
        background: currentColor;
        border-radius: 50%;
    }

    .qucto-doc-month-tab-state.is-danger {
        font-weight: var(--fw-semibold);
        color: var(--danger-ink);
    }

    .qucto-doc-month-tab-state.is-due {
        color: var(--text-secondary);
    }

    .qucto-doc-month-tab-state.is-done {
        color: var(--success-ink);
    }

    /* ---- the chosen month: one card ---- */
    .qucto-doc-month {
        min-width: 0;
        scroll-margin-top: var(--sp-4);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card);
        box-shadow: var(--e0);
    }

    .qucto-doc-month-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2) var(--sp-4);
        padding: var(--sp-4) var(--sp-5);
        border-bottom: 1px solid var(--border-subtle);
    }

    .qucto-doc-month-title {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--sp-1) var(--sp-2);
        min-width: 0;
    }

    .qucto-doc-month-name {
        margin: 0;
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
        color: var(--text);
        white-space: nowrap;
    }

    .qucto-doc-month-now {
        display: inline-flex;
        align-items: center;
        min-height: var(--pill-h);
        padding: 0 var(--pill-px);
        font-size: var(--fs-xs);
        line-height: 1;
        font-weight: var(--fw-medium);
        color: var(--text-muted);
        white-space: nowrap;
        background: var(--surface-inset);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
    }

    .qucto-doc-month-counts {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-1-5);
        min-width: 0;
    }

    .qucto-doc-month-none {
        font-size: var(--fs-sm);
        color: var(--text-muted);
    }

    .qucto-doc-month-period {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1-5);
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
        white-space: nowrap;
    }

    .qucto-doc-month-period::before {
        content: '';
        flex: none;
        width: 14px;
        height: 14px;
        background: currentColor;
        mask: var(--img-calendar) center / 14px no-repeat;
    }

    .qucto-doc-month-period.is-overdue {
        font-weight: var(--fw-semibold);
        color: var(--danger-ink);
    }

    .qucto-doc-month-period.is-closed {
        color: var(--success-ink);
    }

    .qucto-doc-month-period.is-closed::before {
        mask: var(--i-success) center / 14px no-repeat;
    }

    .qucto-doc-month-body {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        padding: var(--sp-4) var(--sp-5) var(--sp-5);
    }

    .qucto-doc-month-wanted {
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
    }

    .qucto-doc-month-wanted-label {
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-doc-month-wanted-label::after {
        content: ':';
    }

    /* ---- drop zone of the month ---- */
    .qucto-doc-month-upload {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        min-width: 0;
    }

    .qucto-doc-month-drop {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-1);
        padding: var(--sp-6) var(--sp-5);
        text-align: center;
        background: var(--surface-inset);
        border: 1px dashed var(--border-control);
        border-radius: var(--r-card-nested);
        transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
    }

    .qucto-doc-month.is-empty .qucto-doc-month-drop {
        padding-block: var(--sp-10);
    }

    .qucto-doc-month-drop-icon {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-bottom: var(--sp-2);
        color: var(--text-secondary);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
        box-shadow: var(--e0);
        transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
    }

    .qucto-doc-month-drop-icon svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.8;
    }

    .qucto-doc-month-drop-title {
        max-width: 36rem;
        margin: 0;
        font-size: var(--fs-md);
        line-height: var(--lh-md);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
        color: var(--text);
        text-wrap: balance;
    }

    .qucto-doc-month-drop-active,
    .qucto-doc-month-drop-touch {
        display: none;
    }

    /* A phone does not drag files: it takes a photo or picks one. */
    @media (hover: none) and (pointer: coarse) {
        .qucto-doc-month-drop-idle {
            display: none;
        }

        .qucto-doc-month-drop-touch {
            display: inline;
        }
    }

    .qucto-doc-month-drop-hint {
        max-width: 36rem;
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
        text-wrap: pretty;
    }

    .qucto-doc-month-drop-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sp-2);
        margin-top: var(--sp-3);
    }

    /* The label is the button; its file input stays focusable (visually hidden). */
    .qucto-doc-month-pick,
    .qucto-doc-month-camera {
        position: relative;
    }

    .qucto-doc-month-pick:has(input:focus-visible),
    .qucto-doc-month-camera:has(input:focus-visible) {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .qucto-doc-month-pick:active,
    .qucto-doc-month-camera:active {
        transform: scale(var(--press-scale));
    }

    /* The camera button is for phones; on a mouse-driven screen it would only open the file picker again. */
    @media (hover: hover) and (pointer: fine) {
        .qucto-doc-month-camera {
            display: none;
        }
    }

    /* Script present: the empty zone background opens the picker too. */
    .qucto-doc-month-drop.is-live {
        cursor: pointer;
    }

    .qucto-doc-month-drop.is-live:hover {
        border-color: var(--text-muted);
    }

    /* Files dragged anywhere over the page: the open zones say „here". */
    :root.is-dragging-files .qucto-doc-month-drop {
        border-color: var(--accent-hover);
    }

    .qucto-doc-month-drop.is-dragover {
        background: var(--accent-wash);
        border-style: solid;
        border-color: var(--accent-hover);
    }

    .qucto-doc-month-drop.is-dragover .qucto-doc-month-drop-icon {
        color: var(--accent-text);
        background: var(--accent-soft);
        transform: translateY(calc(-1 * var(--motion-shift)));
    }

    .qucto-doc-month-drop.is-dragover :is(.qucto-doc-month-drop-idle, .qucto-doc-month-drop-touch) {
        display: none;
    }

    .qucto-doc-month-drop.is-dragover .qucto-doc-month-drop-active {
        display: inline;
    }

    /* ---- a month with documents: the zone is one bar (icon · text · buttons) ---- */
    .qucto-doc-month-upload.is-compact .qucto-doc-month-drop {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2) var(--sp-4);
        padding: var(--sp-3) var(--sp-4);
        text-align: left;
    }

    .qucto-doc-month-upload.is-compact .qucto-doc-month-drop-icon {
        width: 36px;
        height: 36px;
        margin: 0;
    }

    .qucto-doc-month-upload.is-compact .qucto-doc-month-drop-text {
        flex: 1 1 16rem;
        min-width: 0;
    }

    .qucto-doc-month-upload.is-compact .qucto-doc-month-drop-title {
        font-size: var(--fs-base);
        line-height: var(--lh-base);
    }

    .qucto-doc-month-upload.is-compact .qucto-doc-month-drop-actions {
        margin: 0;
    }

    /* With the script, note and „Odeslat" wait until files are chosen; without
       it they stay, the plain form needs its button. */
    .qucto-doc-month-upload.is-compact:has(.qucto-doc-month-drop.is-live):has(.qucto-doc-upload-queue[hidden]) .qucto-doc-month-upload-foot {
        display: none;
    }

    /* Busy: only the zone steps back; the per-file progress stays fully readable
       (overrides the generic dimmed [aria-busy] of components.css). */
    .qucto-doc-month-upload[aria-busy='true'] {
        opacity: 1;
    }

    .qucto-doc-month-upload.is-busy .qucto-doc-month-drop {
        opacity: 0.55;
        pointer-events: none;
    }

    /* ---- chosen files, their progress and result ---- */
    .qucto-doc-upload-queue {
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
    }

    .qucto-doc-upload-queue-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2);
    }

    .qucto-doc-upload-queue-title {
        margin: 0;
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    /* Two columns where there is room: twenty photos stay one screen tall. */
    .qucto-doc-upload-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
        column-gap: var(--sp-6);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-doc-upload-item {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--sp-3);
        min-width: 0;
        min-height: 52px;
        padding: var(--sp-2) 0;
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-doc-upload-icon {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        color: var(--text-muted);
        background: var(--surface-inset);
        border-radius: var(--r-sm);
    }

    .qucto-doc-upload-icon svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.75;
    }

    .qucto-doc-upload-main {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .qucto-doc-upload-name {
        overflow: hidden;
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        font-weight: var(--fw-medium);
        color: var(--text);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-doc-upload-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--sp-2);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .qucto-doc-upload-state:empty {
        display: none;
    }

    .qucto-doc-upload-state::before {
        content: '·';
        margin-right: var(--sp-2);
        color: var(--text-muted);
    }

    /* A reason is a sentence: its own line, no separator dot. */
    .qucto-doc-upload-item:is([data-state='invalid'], [data-state='error']) .qucto-doc-upload-state {
        flex-basis: 100%;
        font-weight: var(--fw-medium);
        color: var(--danger-ink);
    }

    .qucto-doc-upload-item:is([data-state='invalid'], [data-state='error']) .qucto-doc-upload-state::before {
        content: none;
    }

    .qucto-doc-upload-item[data-state='done'] .qucto-doc-upload-state {
        font-weight: var(--fw-medium);
        color: var(--success-ink);
    }

    .qucto-doc-upload-item:is([data-state='invalid'], [data-state='error']) .qucto-doc-upload-icon {
        color: var(--danger-ink);
        background: var(--danger-wash);
    }

    .qucto-doc-upload-item[data-state='done'] .qucto-doc-upload-icon {
        color: var(--success-ink);
        background: var(--success-wash);
    }

    .qucto-doc-upload-item[data-state='invalid'] .qucto-doc-upload-name {
        color: var(--text-muted);
    }

    /* Progress: a hairline track; the fill scales (transform only, no layout). */
    .qucto-doc-upload-bar {
        display: block;
        height: 4px;
        margin-top: 2px;
        overflow: hidden;
        background: var(--seg-track);
        border-radius: var(--r-pill);
    }

    .qucto-doc-upload-bar[hidden] {
        display: none;
    }

    .qucto-doc-upload-bar-fill {
        display: block;
        height: 100%;
        background: var(--accent);
        border-radius: inherit;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--dur-2) linear;
    }

    .qucto-doc-upload-item[data-state='done'] .qucto-doc-upload-bar-fill {
        background: var(--success-solid);
    }

    .qucto-doc-upload-item[data-state='error'] .qucto-doc-upload-bar-fill {
        background: var(--danger-solid);
    }

    .qucto-doc-upload-message {
        margin: 0;
        padding: var(--sp-2-5) var(--sp-3);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--danger-ink);
        background: var(--danger-wash);
        border: 1px solid transparent;
        border-radius: var(--r-md);
    }

    .qucto-doc-month-upload-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--sp-3) var(--sp-4);
    }

    .qucto-doc-month-upload-foot > .qucto-form-field {
        flex: 1 1 18rem;
        min-width: 0;
        margin: 0;
    }

    .qucto-doc-month-upload-foot > .qucto-button {
        flex: none;
    }

    /* ---- documents of the month ---- */
    .qucto-doc-month-docs-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-1) var(--sp-3);
        margin-top: var(--sp-1);
    }

    .qucto-doc-month-docs-title {
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        letter-spacing: 0;
        color: var(--text);
    }

    .qucto-doc-month-docs-count {
        font-size: var(--fs-label);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .qucto-doc-month-docs {
        margin: calc(-1 * var(--sp-3)) 0 0;
        padding: 0;
        list-style: none;
    }

    .qucto-doc-month-doc {
        position: relative;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--sp-3);
        min-height: 48px;
        margin: 0 calc(-1 * var(--sp-2));
        padding: var(--sp-2);
        border-radius: var(--r-md);
        transition: background-color var(--dur-1) var(--ease-out);
    }

    /* Hairline between rows, straight even though the hover plate is rounded. */
    .qucto-doc-month-doc + .qucto-doc-month-doc::before {
        content: '';
        position: absolute;
        top: 0;
        right: var(--sp-2);
        left: var(--sp-2);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-doc-month-doc:hover::before,
    .qucto-doc-month-doc:hover + .qucto-doc-month-doc::before {
        border-top-color: transparent;
    }

    .qucto-doc-month-doc:hover {
        background: var(--row-hover);
    }

    .qucto-doc-month-doc-icon {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        color: var(--text-muted);
        background: var(--surface-inset);
        border-radius: var(--r-sm);
    }

    .qucto-doc-month-doc-icon svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.75;
    }

    .qucto-doc-month-doc.is-returned .qucto-doc-month-doc-icon {
        color: var(--danger-ink);
        background: var(--danger-wash);
    }

    .qucto-doc-month-doc-main {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    /* The name is the link, stretched over the row: the whole row opens the detail. */
    .qucto-doc-month-doc-name {
        overflow: hidden;
        font-weight: var(--fw-strong);
        color: var(--text);
        white-space: nowrap;
        text-decoration: none;
        text-overflow: ellipsis;
    }

    .qucto-doc-month-doc-name::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
    }

    .qucto-doc-month-doc-name:hover,
    .qucto-doc-month-doc-name:focus-visible {
        text-decoration: underline;
        text-decoration-color: var(--link-underline);
        text-underline-offset: 2px;
    }

    .qucto-doc-month-doc-name:focus-visible {
        outline: none;
    }

    .qucto-doc-month-doc:has(.qucto-doc-month-doc-name:focus-visible) {
        outline: var(--focus-ring);
        outline-offset: 0;
    }

    .qucto-doc-month-doc-meta,
    .qucto-doc-month-doc-note {
        overflow: hidden;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-doc-month-doc-reason {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        color: var(--danger-ink);
    }

    .qucto-doc-month-doc-side {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--sp-2);
    }

    /* „Opravit" stays its own target above the stretched row link. */
    .qucto-doc-month-doc-side .qucto-button {
        position: relative;
        z-index: 1;
    }

    /* ---- grid of cards (Phase 237): preview on top, name, date, state ---- */
    .qucto-doc-month-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        gap: var(--sp-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-doc-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
        box-shadow: var(--e0);
        transition: box-shadow var(--dur-1) var(--ease-out);
    }

    .qucto-doc-card:hover {
        box-shadow: var(--e0-hover);
    }

    .qucto-doc-card.is-returned {
        box-shadow: 0 0 0 1.5px var(--danger-border);
    }

    .qucto-doc-card:has(.qucto-doc-card-name:focus-visible) {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    /* The type tile is always there; a thumbnail, when it loads, covers it. */
    .qucto-doc-card-preview {
        position: relative;
        display: grid;
        place-items: center;
        aspect-ratio: 4 / 3;
        background: var(--surface-inset);
        border-bottom: 1px solid var(--border-subtle);
    }

    .qucto-doc-card-type {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-1);
        color: var(--text-muted);
    }

    .qucto-doc-card-type svg {
        width: 30px;
        height: 30px;
        stroke-width: 1.5;
    }

    .qucto-doc-card.is-returned .qucto-doc-card-type {
        color: var(--danger-ink);
    }

    .qucto-doc-card-type-label {
        font-size: var(--fs-xs);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.04em;
    }

    .qucto-doc-card-thumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* A PDF page shows its top — the issuer and the number are there. */
        object-position: top;
    }

    .qucto-doc-card-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        padding: var(--sp-2-5) var(--sp-3) var(--sp-3);
    }

    /* The name is the link, stretched over the card: the whole card opens the detail. */
    .qucto-doc-card-name {
        display: -webkit-box;
        overflow: hidden;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-strong);
        color: var(--text);
        text-decoration: none;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .qucto-doc-card-name::after {
        content: '';
        position: absolute;
        inset: 0;
    }

    .qucto-doc-card-name:hover {
        text-decoration: underline;
        text-decoration-color: var(--link-underline);
        text-underline-offset: 2px;
    }

    .qucto-doc-card-name:focus-visible {
        outline: none;
    }

    .qucto-doc-card-meta {
        font-size: var(--fs-label);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .qucto-doc-card-reason {
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--danger-ink);
    }

    .qucto-doc-card-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-1-5);
        margin-top: auto;
        padding-top: var(--sp-2);
    }

    /* „Opravit" stays its own target above the stretched card link. */
    .qucto-doc-card-foot .qucto-button {
        position: relative;
        z-index: 1;
    }

    .qucto-doc-month-rest > .qucto-doc-month-grid {
        margin-top: var(--sp-3);
    }

    /* The documents past the first dozen fold away behind one line. */
    .qucto-doc-month-rest > .qucto-doc-month-docs {
        margin-top: var(--sp-1);
    }

    .qucto-doc-month-rest-toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1-5);
        min-height: var(--control-h-sm);
        padding: 0 var(--sp-3);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        color: var(--text);
        list-style: none;
        cursor: pointer;
        background: var(--surface-inset);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        transition: background-color var(--dur-1) var(--ease-out);
    }

    .qucto-doc-month-rest-toggle::-webkit-details-marker {
        display: none;
    }

    .qucto-doc-month-rest-toggle::after {
        content: '';
        width: 14px;
        height: 14px;
        background: currentColor;
        mask: var(--i-chevron-down) center / 14px no-repeat;
    }

    .qucto-doc-month-rest-toggle:hover {
        background: var(--hover);
    }

    .qucto-doc-month-rest-toggle:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .qucto-doc-month-rest[open] > .qucto-doc-month-rest-toggle {
        display: none;
    }

    .qucto-doc-month-emptystate {
        padding-block: var(--sp-6);
    }

    /* ---- narrow main: smaller tiles, header and rows stack ---- */
    /* Phone: the sticky bar covers the top of the sheet. */
    @media (max-width: 767.98px) {
        .qucto-doc-month {
            scroll-margin-top: calc(var(--topbar-h) + var(--sp-3));
        }
    }

    @container main (max-width: 40rem) {
        .qucto-doc-month-tabs-list {
            grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
            gap: var(--sp-1-5);
        }

        .qucto-doc-month-grid {
            grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
            gap: var(--sp-2);
        }

        .qucto-doc-card-body {
            padding: var(--sp-2) var(--sp-2-5) var(--sp-2-5);
        }

        .qucto-doc-month-tab {
            padding: var(--sp-2) var(--sp-2-5);
        }

        .qucto-doc-month-head {
            gap: var(--sp-1-5) var(--sp-2);
            padding: var(--sp-3) var(--sp-4);
        }

        .qucto-doc-month-counts:not(:has(> *)) {
            display: none;
        }

        .qucto-doc-month-period {
            white-space: normal;
        }

        .qucto-doc-month-body {
            padding: var(--sp-3) var(--sp-4) var(--sp-4);
        }        .qucto-doc-month-body {
            padding: var(--sp-3) var(--sp-4) var(--sp-4);
        }

        .qucto-doc-month-drop,
        .qucto-doc-month.is-empty .qucto-doc-month-drop {
            padding: var(--sp-5) var(--sp-4);
        }

        .qucto-doc-month-upload.is-compact .qucto-doc-month-drop {
            padding: var(--sp-3);
        }

        .qucto-doc-month-upload.is-compact .qucto-doc-month-drop-icon {
            display: none;
        }

        .qucto-doc-month-drop-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
            width: 100%;
        }

        .qucto-doc-month-upload-foot > .qucto-button {
            flex: 1 1 100%;
        }

        .qucto-doc-month-doc {
            grid-template-columns: 32px minmax(0, 1fr);
            align-items: start;
        }

        .qucto-doc-month-doc-side {
            grid-column: 2;
            justify-content: flex-start;
        }
    }

    /* ---- forced colours: the cards and plates get real edges ---- */
    @media (forced-colors: active) {
        .qucto-doc-month,
        .qucto-doc-month-drop,
        .qucto-doc-top-tool,
        .qucto-doc-month-tab,
        .qucto-doc-layout-switch,
        .qucto-doc-card {
            border-color: CanvasText;
        }

        .qucto-doc-month-year[aria-current='page'],
        .qucto-doc-month-tab[aria-current='page'],
        .qucto-doc-layout-switch a[aria-current='true'] {
            outline: 2px solid Highlight;
            outline-offset: -2px;
        }

        .qucto-doc-month-rest-toggle::after,
        .qucto-doc-month-year[aria-current='page']::after,
        .qucto-doc-month-tab-state::before,
        .qucto-doc-month-period::before {
            background: CanvasText;
            forced-color-adjust: none;
        }

        .qucto-doc-upload-bar {
            border: 1px solid CanvasText;
        }

        .qucto-doc-upload-bar-fill {
            background: Highlight;
            forced-color-adjust: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .qucto-doc-month-tab:active {
            transform: none;
        }

        .qucto-doc-upload-bar-fill {
            transition-duration: 0ms;
        }
    }

    @media print {
        .qucto-doc-month-upload,
        .qucto-doc-year,
        .qucto-doc-picker,
        .qucto-doc-month-rest-toggle {
            display: none;
        }
    }
}

/* === Nahrát z mobilu (Phase 226) ===
 * templates/documents/_mobile_{trigger,dialogs,link,link_status,sheet} and
 * mobile_upload(_unavailable).html.twig, js/mobile-upload.js (ADR-0227).
 * Three pieces in direction A:
 *   - the phone button: a square secondary button with a tooltip;
 *   - the QR dialog (desktop): the code on a nested plate with viewfinder
 *     corners, three numbered steps, a live status plate (waiting dot →
 *     received list) and the expiry as a pill that turns warning near the end;
 *   - the sheet (phone, in a full-screen dialog or as the link's own page):
 *     dark frame header with the firm and the month, the light sheet rising
 *     over it (radius 18 on top), two big choices — the camera is the one
 *     primary, tactile amber plate — a thumbnail grid with per-file progress
 *     and a sticky send bar above the home indicator (safe areas).
 * Motion: tooltip and pill fades (--dur-2), the sheet slides up (--dur-4,
 * --ease-drawer), the done tick pops once; reduced motion keeps opacity only.
 */
@layer features {
    /* ---- the phone button ---- */
    .qucto-mobile-trigger {
        position: relative;
        flex: none;
        inline-size: var(--control-h);
        padding: 0;
    }

    .qucto-mobile-trigger svg {
        width: 18px;
        height: 18px;
    }

    /* Anchored to the button's right edge: it sits at the end of its row (page head, month actions). */
    .qucto-mobile-trigger-tip {
        position: absolute;
        top: calc(100% + var(--sp-2));
        right: 0;
        z-index: var(--z-popover);
        padding: var(--sp-1) var(--sp-2);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        white-space: nowrap;
        color: var(--surface);
        background: var(--neutral-900);
        border: 1px solid transparent;
        border-radius: var(--r-sm);
        box-shadow: var(--e2);
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(-1 * var(--motion-shift)));
        transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
    }

    /* A beat before it shows on hover (no flicker while the mouse passes), at once on keyboard focus. */
    @media (hover: hover) and (pointer: fine) {
        .qucto-mobile-trigger:hover .qucto-mobile-trigger-tip {
            opacity: 1;
            transform: none;
            transition-delay: 350ms;
        }
    }

    .qucto-mobile-trigger:focus-visible .qucto-mobile-trigger-tip {
        opacity: 1;
        transform: none;
    }

    /* A narrow month card stacks its upload buttons (Phase 225); the phone
       button then sits beside „Vyfotit doklad" instead of on a row of its own. */
    @container main (max-width: 40rem) {
        .qucto-doc-month-drop-actions:has(.qucto-mobile-trigger:not([hidden])) {
            grid-template-columns: minmax(0, 1fr) auto;
        }

        .qucto-doc-month-drop-actions:has(.qucto-mobile-trigger:not([hidden])) .qucto-doc-month-pick {
            grid-column: 1 / -1;
        }

        .qucto-doc-month-drop-actions .qucto-mobile-trigger {
            grid-column: 2;
        }
    }

    /* ---- QR dialog (computer) ---- */
    .qucto-mqr-dialog {
        padding: var(--sp-6) var(--sp-6) var(--sp-5);
    }

    .qucto-mqr-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--sp-4);
        margin-bottom: var(--sp-5);
    }

    .qucto-mqr-head .qucto-dialog-title {
        margin-bottom: var(--sp-1);
    }

    .qucto-mqr-sub {
        margin: 0;
        font-size: var(--fs-nav);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    .qucto-mqr-close {
        margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-2)) 0 0;
    }

    .qucto-mqr-body {
        min-height: 13.5rem;
    }

    .qucto-mqr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: var(--sp-6);
    }

    /* The code sits on a nested plate framed by viewfinder corners — „aim here". */
    .qucto-mqr-code {
        position: relative;
        margin: 0;
        padding: var(--sp-4);
        background:
            linear-gradient(var(--text), var(--text)) top left / 20px 2px no-repeat,
            linear-gradient(var(--text), var(--text)) top left / 2px 20px no-repeat,
            linear-gradient(var(--text), var(--text)) top right / 20px 2px no-repeat,
            linear-gradient(var(--text), var(--text)) top right / 2px 20px no-repeat,
            linear-gradient(var(--text), var(--text)) bottom left / 20px 2px no-repeat,
            linear-gradient(var(--text), var(--text)) bottom left / 2px 20px no-repeat,
            linear-gradient(var(--text), var(--text)) bottom right / 20px 2px no-repeat,
            linear-gradient(var(--text), var(--text)) bottom right / 2px 20px no-repeat,
            var(--surface-inset);
        border: 1px solid transparent;
        border-radius: var(--r-sm);
    }

    .qucto-mqr-code img {
        display: block;
        width: 176px;
        height: 176px;
        border-radius: var(--r-xs);
        /* The QR is black on white whatever the theme; the SVG carries both. */
        image-rendering: pixelated;
    }

    /* A cancelled or expired link: the code fades behind a note, so nobody scans a dead one. */
    .qucto-mqr-code-dead {
        position: absolute;
        inset: var(--sp-4);
        display: none;
        place-items: center;
        padding: var(--sp-4);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        text-align: center;
        color: var(--text);
        background: color-mix(in oklch, var(--surface) 86%, transparent);
        border-radius: var(--r-xs);
    }

    .qucto-mqr-body:has(.qucto-mqr-status:is([data-state='expired'], [data-state='revoked'])) .qucto-mqr-code-dead {
        display: grid;
    }

    .qucto-mqr-body:has(.qucto-mqr-status:is([data-state='expired'], [data-state='revoked'])) .qucto-mqr-code img {
        filter: blur(3px);
    }

    .qucto-mqr-steps {
        display: grid;
        gap: var(--sp-3);
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: qct-mqr-step;
    }

    .qucto-mqr-steps li {
        position: relative;
        padding-left: var(--sp-8);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        color: var(--text-secondary);
        counter-increment: qct-mqr-step;
    }

    .qucto-mqr-steps li::before {
        content: counter(qct-mqr-step);
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        font-size: var(--fs-xs);
        font-weight: var(--fw-semibold);
        font-variant-numeric: tabular-nums;
        color: var(--text);
        background: var(--surface-inset);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        box-shadow: var(--e0);
    }

    .qucto-mqr-steps strong {
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-mqr-scope {
        margin: var(--sp-4) 0 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
        text-wrap: pretty;
    }

    /* Live status plate */
    .qucto-mqr-live {
        margin-top: var(--sp-5);
    }

    .qucto-mqr-status {
        padding: var(--sp-3) var(--sp-4);
        background: var(--surface-inset);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
    }

    .qucto-mqr-status-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2) var(--sp-3);
    }

    .qucto-mqr-dot {
        position: relative;
        flex: none;
        width: 8px;
        height: 8px;
        color: var(--neutral-solid);
        background: currentColor;
        border-radius: var(--r-pill);
    }

    .qucto-mqr-status[data-state='waiting'] .qucto-mqr-dot::after {
        content: '';
        position: absolute;
        inset: 0;
        background: currentColor;
        border-radius: inherit;
        animation: qct-mqr-pulse 1.8s var(--ease-out) infinite;
    }

    @keyframes qct-mqr-pulse {
        from {
            opacity: 0.55;
            transform: scale(1);
        }

        to {
            opacity: 0;
            transform: scale(2.8);
        }
    }

    .qucto-mqr-status[data-state='opened'] .qucto-mqr-dot {
        color: var(--info-solid);
    }

    .qucto-mqr-status[data-state='received'] .qucto-mqr-dot {
        color: var(--success-solid);
    }

    .qucto-mqr-status-title {
        flex: 1 1 12rem;
        margin: 0;
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-mqr-status:is([data-state='expired'], [data-state='revoked']) .qucto-mqr-status-title {
        color: var(--text-secondary);
    }

    .qucto-mqr-expiry {
        display: inline-flex;
        align-items: center;
        min-height: var(--pill-h);
        padding: 0 var(--pill-px);
        font-size: var(--pill-fs);
        font-weight: var(--fw-semibold);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        color: var(--neutral-ink);
        background: var(--neutral-pill);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
    }

    .qucto-mqr-expiry.is-ending {
        color: var(--warning-ink);
        background: var(--warning-pill);
    }

    .qucto-mqr-status-hint {
        margin: var(--sp-2) 0 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    .qucto-mqr-docs {
        display: grid;
        margin: var(--sp-3) 0 0;
        padding: 0;
        max-height: 12.5rem;
        overflow-y: auto;
        list-style: none;
        overscroll-behavior: contain;
    }

    .qucto-mqr-doc {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--sp-2-5);
        min-height: 40px;
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-mqr-doc.is-new {
        animation: qct-mqr-arrive var(--dur-4) var(--ease-out);
    }

    @keyframes qct-mqr-arrive {
        from {
            opacity: 0;
            transform: translateY(var(--motion-shift));
        }
    }

    .qucto-mqr-doc-icon {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        color: var(--success-ink);
        background: var(--success-wash);
        border-radius: var(--r-sm);
    }

    .qucto-mqr-doc-icon svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.8;
    }

    .qucto-mqr-doc-name {
        overflow: hidden;
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        color: var(--text);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-mqr-doc-time {
        font-size: var(--fs-sm);
        font-variant-numeric: tabular-nums;
        color: var(--text-muted);
    }

    .qucto-mqr-problem {
        margin: 0;
        padding: var(--sp-3) var(--sp-4);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--danger-ink);
        background: var(--danger-wash);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
    }

    .qucto-mqr-loading {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: var(--sp-6);
        color: var(--text-muted);
    }

    .qucto-mqr-loading p {
        margin: 0;
    }

    .qucto-mqr-placeholder {
        width: 208px;
        height: 208px;
        background: var(--surface-inset);
        border-radius: var(--r-sm);
        animation: qct-mqr-wait 1.2s var(--ease-inout) infinite alternate;
    }

    @keyframes qct-mqr-wait {
        to {
            opacity: 0.55;
        }
    }

    .qucto-mqr-actions {
        align-items: center;
    }

    .qucto-mqr-actions-gap {
        flex: 1;
    }

    @media (max-width: 35.99rem) {
        .qucto-mqr,
        .qucto-mqr-loading {
            grid-template-columns: minmax(0, 1fr);
            justify-items: center;
            gap: var(--sp-4);
        }

        .qucto-mqr-guide {
            justify-self: stretch;
        }

        .qucto-mqr-actions-gap {
            display: none;
        }
    }

    /* ---- the sheet (phone) ---- */
    .qucto-msheet {
        --msheet-px: max(var(--sp-4), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

        display: flex;
        flex-direction: column;
        min-block-size: 100%;
        color: var(--text);
        background: var(--sheet-bg);
    }

    /* The dark frame reaches under the sheet's rounded top corners. */
    .qucto-msheet-head {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        padding: calc(env(safe-area-inset-top, 0px) + var(--sp-4)) var(--msheet-px) calc(var(--sp-6) + var(--r-sheet));
        overflow: clip;
        color: var(--sb-text);
        background: var(--frame-bg);
    }

    /* The frame's brand glow, as on every standalone page. */
    .qucto-msheet-head::before {
        content: '';
        position: absolute;
        inset-block-start: calc(-0.35 * var(--frame-glow-h));
        inset-inline-start: calc(-0.3 * var(--frame-glow-w));
        z-index: -1;
        inline-size: var(--frame-glow-w);
        block-size: var(--frame-glow-h);
        background: var(--frame-glow);
        pointer-events: none;
    }

    .qucto-msheet-brand {
        display: flex;
        align-items: center;
        gap: var(--sp-2-5);
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--sb-muted);
    }

    .qucto-msheet-brand .qucto-brand-logo {
        display: block;
        block-size: 26px;
        inline-size: auto;
    }

    .qucto-msheet-brand span {
        padding-inline-start: var(--sp-2-5);
        border-inline-start: 1px solid var(--sb-border);
    }

    .qucto-msheet-headline {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--sp-3);
    }

    .qucto-msheet-firm {
        margin: 0 0 var(--sp-1);
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--sb-muted);
    }

    .qucto-msheet-title {
        margin: 0;
        font-size: 1.625rem;
        line-height: 2rem;
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-h1);
        color: var(--frame-ink);
        text-wrap: balance;
    }

    .qucto-msheet-close {
        display: grid;
        flex: none;
        place-items: center;
        width: 44px;
        height: 44px;
        margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-1)) 0 0;
        padding: 0;
        color: var(--frame-ink);
        background: var(--sb-raised);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        box-shadow: var(--sb-raised-ring);
        cursor: pointer;
        transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
    }

    .qucto-msheet-close:hover {
        background: var(--sb-raised-hover);
    }

    .qucto-msheet-close:active {
        transform: scale(var(--press-scale));
    }

    .qucto-msheet-close:focus-visible {
        outline: 2px solid var(--sb-focus);
        outline-offset: 2px;
    }

    .qucto-msheet-close:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .qucto-msheet-close svg {
        width: 20px;
        height: 20px;
    }

    /* The light sheet rises over the dark frame. */
    .qucto-msheet-body {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: var(--sp-4);
        margin-top: calc(-1 * var(--r-sheet));
        padding: var(--sp-5) var(--msheet-px) var(--sp-6);
        background: var(--sheet-bg);
        border: 1px solid transparent;
        border-bottom: 0;
        border-radius: var(--r-sheet) var(--r-sheet) 0 0;
        box-shadow: var(--sheet-edge);
    }

    .qucto-msheet-pick {
        display: grid;
        gap: var(--sp-3);
    }

    /* A choice is a whole plate; its file input stays focusable (visually hidden). */
    .qucto-msheet-action {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--sp-4);
        min-block-size: 80px;
        padding: var(--sp-4) var(--sp-5);
        color: var(--text);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card);
        box-shadow: var(--e0);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
    }

    .qucto-msheet-action:active {
        transform: scale(var(--press-scale));
    }

    .qucto-msheet-action:has(input:focus-visible) {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .qucto-msheet-action:has(input:disabled) {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* The camera is THE action on a phone: the tactile brand plate, twice the height. */
    .qucto-msheet-action.is-primary {
        min-block-size: 124px;
        color: var(--accent-ink);
        background: var(--btn-primary-bg);
        box-shadow: var(--btn-primary-shadow);
    }

    .qucto-msheet-action.is-primary:active {
        box-shadow: var(--btn-primary-shadow-pressed);
    }

    .qucto-msheet-action-icon {
        display: grid;
        flex: none;
        place-items: center;
        width: 52px;
        height: 52px;
        color: var(--text-secondary);
        background: var(--surface-inset);
        border-radius: var(--r-task);
    }

    .qucto-msheet-action.is-primary .qucto-msheet-action-icon {
        width: 64px;
        height: 64px;
        color: var(--accent-ink);
        background: color-mix(in oklch, var(--surface) 38%, transparent);
    }

    .qucto-msheet-action-icon svg {
        width: 24px;
        height: 24px;
        stroke-width: 1.8;
    }

    .qucto-msheet-action.is-primary .qucto-msheet-action-icon svg {
        width: 30px;
        height: 30px;
    }

    .qucto-msheet-action-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .qucto-msheet-action-label {
        font-size: var(--fs-md);
        line-height: var(--lh-md);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
    }

    .qucto-msheet-action.is-primary .qucto-msheet-action-label {
        font-size: 1.375rem;
        line-height: 1.75rem;
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-h1);
    }

    .qucto-msheet-action-hint {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    .qucto-msheet-action.is-primary .qucto-msheet-action-hint {
        color: var(--accent-ink);
    }

    .qucto-msheet-when-more {
        display: none;
    }

    .qucto-msheet-limits {
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        text-align: center;
        color: var(--text-muted);
        text-wrap: balance;
    }

    /* With files chosen the two choices step back into one compact row. */
    .qucto-msheet.has-files .qucto-msheet-pick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qucto-msheet.has-files .qucto-msheet-action {
        gap: var(--sp-2-5);
        min-block-size: 56px;
        padding: var(--sp-2-5) var(--sp-3);
        border-radius: var(--r-card-nested);
    }

    /* „Odeslat" is the one primary now; the camera steps down to a plain plate. */
    .qucto-msheet.has-files .qucto-msheet-action.is-primary {
        color: var(--text);
        background: var(--surface);
        box-shadow: var(--e0);
    }

    .qucto-msheet.has-files .qucto-msheet-action.is-primary .qucto-msheet-action-icon {
        color: var(--text-secondary);
        background: var(--surface-inset);
    }

    .qucto-msheet.has-files .qucto-msheet-action-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--r-md);
    }

    .qucto-msheet.has-files .qucto-msheet-action-icon svg {
        width: 20px;
        height: 20px;
    }

    .qucto-msheet.has-files .qucto-msheet-action-label {
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        font-weight: var(--fw-semibold);
        letter-spacing: normal;
    }

    .qucto-msheet.has-files :is(.qucto-msheet-action-hint, .qucto-msheet-when-empty, .qucto-msheet-limits) {
        display: none;
    }

    .qucto-msheet.has-files .qucto-msheet-when-more {
        display: inline;
    }

    .qucto-msheet.has-files .qucto-msheet-limits {
        grid-column: 1 / -1;
    }

    .qucto-msheet-message {
        margin: 0;
        padding: var(--sp-3) var(--sp-4);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--danger-ink);
        background: var(--danger-wash);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
    }

    .qucto-msheet-message.is-partial {
        color: var(--warning-ink);
        background: var(--warning-wash);
    }

    /* Chosen files: a grid of thumbnails */
    .qucto-msheet-chosen {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
    }

    .qucto-msheet-chosen-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2);
    }

    .qucto-msheet-chosen-title {
        margin: 0;
        font-size: var(--fs-title-sm);
        line-height: var(--lh-base);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
        font-variant-numeric: tabular-nums;
    }

    .qucto-msheet-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.25rem), 1fr));
        gap: var(--sp-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-msheet-thumb {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .qucto-msheet-thumb-media {
        position: relative;
        display: block;
        aspect-ratio: 1;
        overflow: hidden;
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
        box-shadow: var(--e0);
        transition: box-shadow var(--dur-2) var(--ease-out);
    }

    .qucto-msheet-thumb-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity var(--dur-3) var(--ease-out);
    }

    .qucto-msheet-thumb-file {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--sp-1);
        color: var(--text-muted);
        background: var(--surface-inset);
    }

    .qucto-msheet-thumb-file[hidden] {
        display: none;
    }

    .qucto-msheet-thumb-file svg {
        width: 28px;
        height: 28px;
        stroke-width: 1.6;
    }

    .qucto-msheet-thumb-ext {
        font-size: var(--fs-2xs);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-xs);
        color: var(--text-secondary);
    }

    .qucto-msheet-thumb-name {
        overflow: hidden;
        margin-top: var(--sp-1);
        font-size: var(--fs-xs);
        line-height: 1rem;
        color: var(--text-secondary);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-msheet-thumb-state {
        font-size: var(--fs-xs);
        line-height: 1rem;
        color: var(--text-muted);
    }

    .qucto-msheet-thumb-state:empty {
        display: none;
    }

    /* Remove: a 44 px target around a 28 px dark disc that reads on any photo. */
    .qucto-msheet-thumb-remove {
        position: absolute;
        top: -6px;
        right: -6px;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        color: var(--surface);
        background: transparent;
        border: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .qucto-msheet-thumb-remove::before {
        content: '';
        position: absolute;
        inset: 8px;
        background: color-mix(in oklch, var(--neutral-900) 72%, transparent);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        transition: transform var(--dur-1) var(--ease-out);
    }

    .qucto-msheet-thumb-remove:active::before {
        transform: scale(0.92);
    }

    .qucto-msheet-thumb-remove:focus-visible {
        outline: none;
    }

    .qucto-msheet-thumb-remove:focus-visible::before {
        outline: var(--focus-ring);
        outline-offset: 2px;
    }

    .qucto-msheet-thumb-remove svg {
        position: relative;
        width: 15px;
        height: 15px;
        stroke-width: 2.4;
    }

    /* Per-file progress: a pill track at the bottom of the tile; the fill scales. */
    .qucto-msheet-thumb-bar {
        position: absolute;
        right: var(--sp-2);
        bottom: var(--sp-2);
        left: var(--sp-2);
        display: block;
        height: 5px;
        overflow: hidden;
        background: color-mix(in oklch, var(--surface) 78%, transparent);
        border-radius: var(--r-pill);
        box-shadow: var(--e1);
    }

    .qucto-msheet-thumb-bar[hidden] {
        display: none;
    }

    .qucto-msheet-thumb-fill {
        display: block;
        height: 100%;
        background: var(--accent);
        border-radius: inherit;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--dur-2) linear;
    }

    .qucto-msheet-thumb-badge {
        position: absolute;
        top: var(--sp-2);
        left: var(--sp-2);
        display: none;
        width: 24px;
        height: 24px;
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        box-shadow: var(--e1);
    }

    .qucto-msheet-thumb-badge::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--text-on-strong);
        mask: var(--i-check) center / 14px no-repeat;
    }

    .qucto-msheet-thumb[data-state='queued'] .qucto-msheet-thumb-media {
        opacity: 0.72;
    }

    .qucto-msheet-thumb[data-state='done'] .qucto-msheet-thumb-badge {
        display: block;
        background: var(--success-strong);
        animation: qct-msheet-pop var(--dur-4) var(--ease-out);
    }

    .qucto-msheet-thumb[data-state='done'] .qucto-msheet-thumb-fill {
        background: var(--success-solid);
    }

    .qucto-msheet-thumb[data-state='done'] .qucto-msheet-thumb-state {
        font-weight: var(--fw-medium);
        color: var(--success-ink);
    }

    .qucto-msheet-thumb:is([data-state='error'], [data-state='invalid'], [data-state='rejected']) .qucto-msheet-thumb-media {
        box-shadow: 0 0 0 2px var(--danger-solid);
    }

    .qucto-msheet-thumb:is([data-state='error'], [data-state='invalid'], [data-state='rejected']) .qucto-msheet-thumb-badge {
        display: block;
        background: var(--danger-strong);
    }

    .qucto-msheet-thumb:is([data-state='error'], [data-state='invalid'], [data-state='rejected']) .qucto-msheet-thumb-badge::before {
        mask-image: var(--i-close);
        mask-size: 12px;
    }

    .qucto-msheet-thumb:is([data-state='error'], [data-state='invalid'], [data-state='rejected']) .qucto-msheet-thumb-fill {
        background: var(--danger-solid);
    }

    .qucto-msheet-thumb:is([data-state='error'], [data-state='invalid'], [data-state='rejected']) .qucto-msheet-thumb-state {
        display: -webkit-box;
        overflow: hidden;
        font-weight: var(--fw-medium);
        color: var(--danger-ink);
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .qucto-msheet-thumb[data-state='invalid'] .qucto-msheet-thumb-img {
        opacity: 0.45;
    }

    @keyframes qct-msheet-pop {
        from {
            opacity: 0;
            transform: scale(0.6);
        }
    }

    /* Done */
    .qucto-msheet-done {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-2);
        padding: var(--sp-8) var(--sp-5) var(--sp-6);
        text-align: center;
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card);
        box-shadow: var(--e0);
    }

    /* Focused only so a screen reader lands on the result; not a control, so no ring. */
    .qucto-msheet-done:focus,
    .qucto-msheet-done:focus-visible {
        outline: none;
    }

    .qucto-msheet-done-icon {
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        margin-bottom: var(--sp-2);
        color: var(--success-ink);
        background: var(--success-wash);
        border-radius: var(--r-pill);
    }

    .qucto-msheet-done:not([hidden]) .qucto-msheet-done-icon {
        animation: qct-msheet-pop var(--dur-4) var(--ease-out);
    }

    .qucto-msheet-done-icon svg {
        width: 30px;
        height: 30px;
        stroke-width: 2.4;
    }

    .qucto-msheet-done-title {
        margin: 0;
        font-size: var(--fs-title);
        line-height: var(--lh-title);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
        color: var(--text);
    }

    .qucto-msheet-done-text {
        max-width: 22rem;
        margin: 0 0 var(--sp-3);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        color: var(--text-secondary);
        text-wrap: pretty;
    }

    /* Sticky send bar above the home indicator */
    .qucto-msheet-foot {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: var(--sp-3) var(--msheet-px) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
        background: color-mix(in oklch, var(--sheet-bg) 90%, transparent);
        border-top: 1px solid var(--border-subtle);
        backdrop-filter: blur(12px);
    }

    .qucto-msheet-submit {
        width: 100%;
        min-block-size: 52px;
        font-size: var(--fs-md);
        font-variant-numeric: tabular-nums;
        border-radius: var(--r-card-nested);
    }

    .qucto-msheet-submit svg {
        width: 18px;
        height: 18px;
    }

    /* Busy: only the choices step back; the tiles' progress stays readable. */
    .qucto-msheet.is-busy .qucto-msheet-pick {
        opacity: 0.55;
        pointer-events: none;
    }

    /* In the app: a full-screen dialog that slides up */
    .qucto-msheet-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        color: var(--text);
        background: var(--frame-bg);
        border: 0;
        opacity: 1;
        transform: none;
        transition:
            opacity var(--dur-4) var(--ease-drawer),
            transform var(--dur-4) var(--ease-drawer),
            overlay var(--dur-4) allow-discrete,
            display var(--dur-4) allow-discrete;
    }

    .qucto-msheet-dialog:not([open]) {
        opacity: 0;
        transform: translateY(var(--motion-shift-lg));
    }

    @starting-style {
        .qucto-msheet-dialog[open] {
            opacity: 0;
            transform: translateY(var(--motion-shift-lg));
        }
    }

    .qucto-msheet-dialog::backdrop {
        background: var(--backdrop);
    }

    .qucto-msheet-dialog > .qucto-msheet {
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* The link's own page: edge to edge on a phone, a centred sheet on anything wider. */
    .qucto-mpage {
        display: flex;
        justify-content: center;
        min-block-size: 100vh;
        min-block-size: 100dvh;
        background: var(--frame-bg);
    }

    .qucto-mpage > .qucto-msheet {
        width: 100%;
        max-width: 32rem;
        min-block-size: 100vh;
        min-block-size: 100dvh;
    }

    @media (min-width: 48rem) {
        .qucto-mpage {
            align-items: flex-start;
            padding-block: var(--sp-10);
        }

        .qucto-mpage > .qucto-msheet {
            min-block-size: 0;
            overflow: clip;
            border: 1px solid transparent;
            border-radius: var(--r-sheet);
            box-shadow: var(--dialog-shadow);
        }
    }

    /* ---- the gone page ---- */
    .qucto-mgone-icon {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        margin-bottom: var(--sp-5);
        color: var(--text-secondary);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-task);
        box-shadow: var(--e0);
    }

    .qucto-mgone-icon svg {
        width: 24px;
        height: 24px;
        stroke-width: 1.8;
    }

    .qucto-mgone-steps {
        display: grid;
        gap: var(--sp-2);
        margin: 0;
        padding-left: var(--sp-5);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        color: var(--text-secondary);
    }

    .qucto-mgone-steps strong {
        color: var(--text);
    }

    /* ---- forced colours, reduced motion ---- */
    @media (forced-colors: active) {
        .qucto-mqr-code,
        .qucto-mqr-status,
        .qucto-msheet-action,
        .qucto-msheet-thumb-media,
        .qucto-msheet-done {
            border-color: CanvasText;
        }

        .qucto-mqr-dot,
        .qucto-msheet-thumb-fill {
            background: Highlight;
            forced-color-adjust: none;
        }

        .qucto-msheet-thumb-badge::before {
            background: CanvasText;
        }

        .qucto-mobile-trigger-tip {
            border-color: CanvasText;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .qucto-mqr-status[data-state='waiting'] .qucto-mqr-dot::after,
        .qucto-mqr-placeholder {
            animation: none;
        }

        .qucto-mqr-doc.is-new,
        .qucto-msheet-thumb[data-state='done'] .qucto-msheet-thumb-badge,
        .qucto-msheet-done:not([hidden]) .qucto-msheet-done-icon {
            animation-name: qct-mobile-fade;
        }

        .qucto-msheet-thumb-fill {
            transition-duration: 0ms;
        }
    }

    @keyframes qct-mobile-fade {
        from {
            opacity: 0;
        }
    }
}

/* === API dokladů (Phase 227) ===
 * templates/documents/api/*.html.twig (ADR-0228) — Doklady › „Napojení
 * (API)": developer documentation with the firm's own values and the key
 * management. Direction A: white cards with the soft ring on the sheet; code
 * is a dark plate in the colour of the frame (the one surface on the page
 * that is „machine", and the only monospace besides copyable <code>
 * identifiers); HTTP methods and scopes are sans-serif pills. Amber stays for
 * the one primary action. A quiet table of contents sits in a sticky right
 * column when `main` is wide, above the reference when it is not. The secret
 * of a new key sits in a card ringed in the warning tone.
 */
@layer features {
    /* ---- layout: reference + table of contents ---- */
    .qucto-api-doc {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--page-gap);
        align-items: start;
    }

    .qucto-api-body {
        display: flex;
        flex-direction: column;
        gap: var(--page-gap);
        min-width: 0;
    }

    .qucto-api-toc {
        min-width: 0;
    }

    .qucto-api-toc-title {
        margin: 0 0 var(--sp-2);
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    /* Narrow: one scrollable row of section chips instead of a wall of them. */
    .qucto-api-toc ol {
        display: flex;
        gap: var(--sp-1-5);
        margin: 0 calc(-1 * var(--sp-1));
        padding: var(--sp-1);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        list-style: none;
    }

    .qucto-api-toc li {
        flex: none;
    }

    .qucto-api-toc a {
        display: inline-flex;
        align-items: center;
        min-height: var(--control-h-sm);
        padding: 0 var(--sp-2-5);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
        text-decoration: none;
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        box-shadow: var(--e0);
        transition: color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
    }

    .qucto-api-toc a:hover {
        color: var(--text);
        box-shadow: var(--e0-hover);
    }

    @container main (min-width: 56rem) {
        .qucto-api-doc {
            grid-template-columns: minmax(0, 1fr) 13.5rem;
        }

        .qucto-api-toc {
            position: sticky;
            top: var(--sp-6);
            grid-column: 2;
            grid-row: 1;
        }

        .qucto-api-body {
            grid-column: 1;
            grid-row: 1;
        }

        .qucto-api-toc ol {
            flex-direction: column;
            gap: 0;
            margin: 0;
            padding: 0 0 0 var(--sp-3);
            overflow: visible;
            border-left: 1px solid var(--border);
        }

        .qucto-api-toc a {
            min-height: 30px;
            padding: 0 var(--sp-2);
            background: transparent;
            border-radius: var(--r-xs);
            box-shadow: none;
        }

        .qucto-api-toc a:hover {
            background: var(--hover);
            box-shadow: none;
        }
    }

    /* ---- reading comfort: prose lines stay short, tables use the width ---- */
    .qucto-api-prose > :is(p, ul, ol),
    .qucto-api-endpoint > p {
        max-width: 76ch;
    }

    .qucto-api-prose > ul {
        padding-left: 1.15rem;
    }

    .qucto-api-prose > ul > li + li {
        margin-top: var(--sp-1-5);
    }

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

    .qucto-api-http > p {
        max-width: 90ch;
    }

    /* ---- the firm's values ---- */
    .qucto-api-facts code,
    .qucto-api-secret code {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    .qucto-api-keyids {
        display: flex;
        flex-direction: column;
        gap: var(--sp-1-5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* ---- once-shown secret ---- */
    .qucto-api-issued {
        box-shadow: 0 0 0 1px var(--warning-border), var(--e1);
    }

    .qucto-api-issued .qucto-card-title {
        color: var(--warning-ink);
    }

    .qucto-api-secret-token code {
        display: inline-block;
        padding: var(--sp-1-5) var(--sp-2);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        color: var(--text);
        background: var(--warning-wash);
        border-color: var(--warning-border);
    }

    /* ---- keys: one block per key, the risky actions behind a floating confirm step ---- */
    .qucto-api-keylist {
        margin: var(--sp-2) 0 0;
        padding: 0;
        list-style: none;
    }

    .qucto-api-key {
        padding: var(--sp-4) 0;
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-api-key:last-child {
        padding-bottom: var(--sp-1);
    }

    .qucto-api-key-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2) var(--sp-4);
    }

    .qucto-api-key-name {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
        margin: 0;
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
    }

    .qucto-api-key-name > strong {
        font-weight: var(--fw-semibold);
    }

    .qucto-api-key.is-inactive :is(.qucto-api-key-name > strong, dd) {
        color: var(--text-muted);
    }

    .qucto-api-key-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-1-5);
    }

    .qucto-api-key-meta {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        gap: var(--sp-3) var(--sp-5);
        margin: var(--sp-3) 0 0;
    }

    .qucto-api-key-meta > div {
        min-width: 0;
    }

    .qucto-api-key-meta dt {
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        color: var(--text-muted);
    }

    .qucto-api-key-meta dd {
        margin: var(--sp-0-5) 0 0;
        overflow-wrap: anywhere;
    }

    .qucto-api-key-meta code {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    .qucto-api-meta-line {
        display: block;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    .qucto-api-scopes {
        display: inline-flex;
        flex-wrap: wrap;
        gap: var(--sp-1);
    }

    @container main (min-width: 44rem) {
        .qucto-api-key-id {
            grid-column: span 2;
        }
    }

    .qucto-api-confirm {
        position: relative;
    }

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

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

    .qucto-api-confirm-panel {
        position: absolute;
        z-index: 5;
        top: calc(100% + var(--sp-1-5));
        right: 0;
        width: min(20rem, calc(100vw - 3rem));
        padding: var(--sp-3);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-pop);
        box-shadow: var(--pop-shadow);
    }

    .qucto-api-confirm-panel > p {
        margin: 0 0 var(--sp-2-5);
        color: var(--text-secondary);
    }

    /* Narrow: the step spans the key's block under the buttons instead of
       hanging off a button that may sit near the edge. */
    @container main (max-width: 40rem) {
        .qucto-api-key {
            position: relative;
        }

        .qucto-api-confirm {
            position: static;
        }

        .qucto-api-confirm-panel {
            top: auto;
            right: 0;
            left: 0;
            width: auto;
            margin-top: var(--sp-1-5);
        }
    }

    .qucto-api-new {
        margin-top: var(--sp-4);
        padding-top: var(--sp-4);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-api-new > h3 {
        margin: 0 0 var(--sp-3);
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
    }

    .qucto-api-new > .qucto-form-field,
    .qucto-api-new > fieldset {
        max-width: var(--form-max);
    }

    .qucto-api-new > * + :is(.qucto-form-field, fieldset, details, .qucto-form-actions) {
        margin-top: var(--sp-4);
    }

    .qucto-api-new .qucto-checklist-hint {
        overflow-wrap: anywhere;
    }

    /* ---- steps ---- */
    .qucto-api-steps {
        counter-reset: api-step;
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-api-steps > li {
        counter-increment: api-step;
        position: relative;
        min-width: 0;
        padding-left: calc(24px + var(--sp-3));
    }

    .qucto-api-steps > li::before {
        content: counter(api-step);
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        font-size: var(--fs-xs);
        font-weight: var(--fw-semibold);
        font-variant-numeric: tabular-nums;
        color: var(--frame-ink);
        background: var(--frame-bg);
        border-radius: var(--r-pill);
    }

    .qucto-api-steps > li > p {
        margin: 0;
        max-width: 76ch;
    }

    .qucto-api-steps > li > * + * {
        margin-top: var(--sp-2-5);
    }

    /* ---- endpoints ---- */
    .qucto-api-endpoint {
        padding-top: var(--sp-5);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-card > .qucto-api-endpoint + .qucto-api-endpoint,
    .qucto-card > p + .qucto-api-endpoint {
        margin-top: var(--sp-5);
    }

    .qucto-api-endpoint > * + * {
        margin-top: var(--sp-3);
    }

    .qucto-api-endpoint-title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
        margin: 0;
        font-size: var(--fs-md);
        line-height: var(--lh-md);
        font-weight: var(--fw-semibold);
    }

    .qucto-api-endpoint-title > code {
        padding: 2px var(--sp-1-5);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
    }

    .qucto-api-method {
        display: inline-flex;
        align-items: center;
        min-height: var(--pill-h);
        padding: 0 var(--sp-2);
        font-size: var(--fs-2xs);
        line-height: 1;
        font-weight: var(--fw-bold);
        letter-spacing: 0.06em;
        color: var(--info-ink);
        background: var(--info-pill);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
    }

    .qucto-api-method-post {
        color: var(--success-ink);
        background: var(--success-pill);
    }

    .qucto-api-endpoint-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
    }

    .qucto-api-params td[data-column='description'],
    .qucto-api-problems td[data-column='description'],
    .qucto-api-section td[data-column='description'] {
        min-width: 16rem;
        white-space: normal;
    }

    .qucto-api-exchange {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-3);
    }

    .qucto-api-code-label {
        margin: 0 0 var(--sp-1-5);
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    /* ---- code plates (real code: monospace allowed) ---- */
    .qucto-api-code-wrap {
        position: relative;
        min-width: 0;
    }

    .qucto-api-code {
        margin: 0;
        padding: var(--sp-3-5) var(--sp-4);
        overflow-x: auto;
        font-family: var(--font-code);
        font-size: 0.8125rem;
        line-height: 1.6;
        color: var(--frame-ink);
        white-space: pre;
        tab-size: 4;
        background: var(--frame-bg);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
        scrollbar-color: var(--sb-muted) transparent;
    }

    .qucto-api-code:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .qucto-api-code > code {
        padding: 0;
        font-size: inherit;
        line-height: inherit;
        color: inherit;
        background: none;
        border: 0;
        border-radius: 0;
        overflow-wrap: normal;
    }

    /* The copy button sits in the plate's top strip, never over the code. */
    .qucto-api-code-wrap:has(> .qucto-copy-button) > .qucto-api-code {
        padding-top: calc(var(--control-h-sm) + var(--sp-3));
    }

    .qucto-api-code-wrap > .qucto-copy-button {
        --btn-fg: var(--sb-text);
        --btn-bg: var(--sb-raised);
        --btn-shadow: var(--sb-raised-ring);
        --btn-bg-hover: var(--sb-raised-hover);
        --btn-shadow-hover: var(--sb-raised-ring);
        --btn-fg-hover: var(--frame-ink);

        position: absolute;
        top: var(--sp-2);
        right: var(--sp-2);
        margin: 0;
    }

    .qucto-api-code-wrap > .qucto-copy-button:focus-visible {
        outline-color: var(--sb-focus);
    }

    .qucto-api-code-wrap > .qucto-copy-button.is-copied {
        --btn-fg: var(--sb-text-active);
        --btn-fg-hover: var(--sb-text-active);
    }

    /* ---- script examples: one open at a time (details[name]) ---- */
    .qucto-api-example {
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-api-example:last-child {
        border-bottom: 1px solid var(--border-subtle);
    }

    .qucto-card > .qucto-api-example + .qucto-api-example {
        margin-top: 0;
    }

    .qucto-api-example > summary {
        display: flex;
        align-items: baseline;
        gap: var(--sp-2);
        min-height: 44px;
        padding: var(--sp-2-5) 0;
        font-weight: var(--fw-semibold);
        cursor: pointer;
    }

    .qucto-api-example > summary .qucto-api-muted {
        font-size: var(--fs-sm);
        font-weight: var(--fw-regular);
    }

    .qucto-api-example > .qucto-api-code-wrap {
        margin-bottom: var(--sp-3);
    }

    .qucto-api-changelog {
        margin: 0;
    }

    .qucto-api-changelog > div + div {
        margin-top: var(--sp-3);
    }

    .qucto-api-changelog dt {
        font-weight: var(--fw-semibold);
    }

    .qucto-api-changelog dd {
        margin: var(--sp-1) 0 0;
        max-width: 76ch;
        color: var(--text-secondary);
    }

    /* ---- anchors land below the sticky phone bar ---- */
    .qucto-api-section,
    .qucto-api-endpoint,
    .qucto-api-problems tr[id] {
        scroll-margin-top: calc(var(--topbar-h, 0px) + var(--sp-4));
    }

    .qucto-api-problems tr:target > td {
        background: var(--selected);
    }

    @container main (max-width: 40rem) {
        .qucto-api-code {
            padding-inline: var(--sp-3);
            font-size: 0.75rem;
        }


        .qucto-api-steps > li {
            padding-left: 0;
            padding-top: calc(24px + var(--sp-2));
        }

    }

    @media (forced-colors: active) {
        .qucto-api-code {
            border-color: CanvasText;
        }

        .qucto-api-issued {
            border: 2px solid CanvasText;
        }

        .qucto-api-steps > li::before,
        .qucto-api-method {
            border: 1px solid CanvasText;
        }
    }

    @media print {
        .qucto-api-toc,
        .qucto-api-key-actions,
        .qucto-api-new,
        .qucto-copy-button {
            display: none;
        }

        .qucto-api-code {
            color: CanvasText;
            background: none;
            border: 1px solid;
            white-space: pre-wrap;
        }
    }
}

/* === Hledání (Phase 240) ===
 * templates/search/index.html.twig, _hit.html.twig (ADR-0240). Direction A:
 * a large search field as the page's one control, the kinds as a segmented
 * row with counts, each kind a white card of quiet rows — title with the typed
 * words marked, facts under it, the matched text last. Layout follows `main`.
 */
@layer features {
    .qucto-search-form {
        position: relative;
        display: flex;
        gap: var(--sp-2);
        max-width: 48rem;
    }

    .qucto-search-form-icon {
        position: absolute;
        top: 50%;
        left: var(--sp-3-5);
        display: inline-flex;
        color: var(--text-muted);
        transform: translateY(-50%);
        pointer-events: none;
    }

    .qucto-search-form-icon svg {
        width: 18px;
        height: 18px;
    }

    .qucto-search-form input[type='search'] {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 44px;
        padding-left: calc(var(--sp-3-5) + 18px + var(--sp-2-5));
        font-size: var(--fs-md);
    }

    .qucto-search-form .qucto-button {
        min-height: 44px;
    }

    .qucto-search-intro {
        max-width: 48rem;
        padding: var(--sp-5);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card);
        box-shadow: var(--e0);
    }

    .qucto-search-intro p {
        margin: var(--sp-2) 0 0;
    }

    .qucto-search-intro-title {
        margin: 0;
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-search-tips {
        display: grid;
        gap: var(--sp-1-5);
        margin: var(--sp-3) 0 0;
        padding: 0;
        list-style: none;
    }

    .qucto-search-tips strong {
        color: var(--text);
    }

    .qucto-search-intro-kinds {
        color: var(--text-muted);
    }

    .qucto-search-kinds {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-0-5);
        width: fit-content;
        max-width: 100%;
        padding: var(--seg-pad);
        background: var(--seg-track);
        border: 1px solid transparent;
        border-radius: var(--seg-radius);
    }

    .qucto-search-kinds a {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1-5);
        min-height: var(--seg-item-h);
        padding: 0 var(--sp-3);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        color: var(--seg-fg);
        text-decoration: none;
        white-space: nowrap;
        border-radius: var(--seg-item-radius);
    }

    .qucto-search-kinds a:hover {
        color: var(--seg-fg-hover);
    }

    .qucto-search-kinds a[aria-current='page'] {
        color: var(--seg-fg-active);
        background: var(--seg-thumb);
        box-shadow: var(--seg-thumb-shadow);
    }

    .qucto-search-kind-count {
        font-size: var(--fs-label);
        font-weight: var(--fw-regular);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .qucto-search-group {
        padding: var(--sp-2) var(--sp-2) var(--sp-3);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card);
        box-shadow: var(--e0);
    }

    .qucto-search-group-head {
        display: flex;
        align-items: baseline;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-3) var(--sp-1);
    }

    .qucto-search-group-title {
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-search-group-count {
        font-size: var(--fs-label);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .qucto-search-hits {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-search-hit {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--sp-3);
        min-height: 52px;
        padding: var(--sp-2) var(--sp-3);
        color: var(--text);
        text-decoration: none;
        border-radius: var(--r-md);
        transition: background-color var(--dur-1) var(--ease-out);
    }

    .qucto-search-hit:hover {
        background: var(--row-hover);
    }

    .qucto-search-hit:focus-visible {
        outline: var(--focus-ring);
        outline-offset: -2px;
    }

    .qucto-search-hit-icon {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        color: var(--text-muted);
        background: var(--surface-inset);
        border-radius: var(--r-sm);
    }

    .qucto-search-hit-icon svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.75;
    }

    .qucto-search-hit-main {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .qucto-search-hit-title {
        overflow: hidden;
        font-weight: var(--fw-strong);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-search-hit-meta {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .qucto-search-hit-snippet {
        overflow: hidden;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-secondary);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-search-hit-go {
        display: inline-flex;
        color: var(--text-muted);
    }

    .qucto-search-hit-go svg {
        width: 16px;
        height: 16px;
    }

    .qucto-search-group-more {
        margin: var(--sp-1) 0 0;
        padding: 0 var(--sp-3);
        font-size: var(--fs-sm);
        color: var(--text-muted);
    }

    .qucto-search-empty {
        padding-block: var(--sp-10);
    }

    @container main (max-width: 40rem) {
        .qucto-search-hit {
            grid-template-columns: 28px minmax(0, 1fr);
            gap: var(--sp-2-5);
        }

        .qucto-search-hit-go {
            display: none;
        }

        .qucto-search-hit-title {
            display: -webkit-box;
            white-space: normal;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
        }
    }

    @media (forced-colors: active) {
        .qucto-search-group,
        .qucto-search-kinds,
        .qucto-search-intro {
            border-color: CanvasText;
        }

        .qucto-search-kinds a[aria-current='page'] {
            outline: 2px solid Highlight;
            outline-offset: -2px;
        }
    }
}

/* === Mzdy — ukládání celé tabulky (Phase 244) ===
 * templates/payroll/payroll.html.twig, js/payroll-sheet.js. No Save column:
 * the bar at the bottom of the card appears with the first change and stays
 * in view (sticky) while the table is on screen; a changed row carries a thin
 * warning-coloured edge. Without the script the bar is simply always shown.
 */
@layer features {
    .qucto-payroll-sheet tr.is-changed > td:first-child {
        box-shadow: inset 3px 0 0 var(--warning-solid);
    }

    .qucto-payroll-savebar {
        position: sticky;
        bottom: 0;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2) var(--sp-4);
        padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
        border-top: 1px solid var(--border-subtle);
        border-radius: 0 0 var(--r-card) var(--r-card);
        box-shadow: 0 -6px 16px -12px color-mix(in oklch, var(--qct-ink) 30%, transparent);
    }

    .qucto-payroll-savebar[hidden] {
        display: none;
    }

    .qucto-payroll-savebar:not([hidden]) {
        animation: qct-payroll-savebar-in var(--dur-2) var(--ease-out);
    }

    @keyframes qct-payroll-savebar-in {
        from {
            opacity: 0;
            transform: translateY(var(--motion-shift));
        }
    }

    .qucto-payroll-savebar-text {
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        color: var(--text);
    }

    .qucto-payroll-savebar-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2);
        margin-left: auto;
    }

    @media (prefers-reduced-motion: reduce) {
        .qucto-payroll-savebar:not([hidden]) {
            animation: none;
        }
    }

    @media (forced-colors: active) {
        .qucto-payroll-sheet tr.is-changed > td:first-child {
            border-left: 3px solid Highlight;
            box-shadow: none;
        }
    }
}


/* === Hodinová sazba zaměstnance (Phase 245) ===
 * templates/payroll/employee.html.twig: the rate is set on the employee card
 * and only shown in Mzdy. The current rate reads as a value; the form keeps
 * the rate and its month narrow instead of spanning the whole card.
 */
@layer features {
    .qucto-employee-rate {
        color: var(--text-muted);
    }

    .qucto-employee-rate strong {
        font-size: var(--fs-title);
        line-height: var(--lh-title);
        font-weight: var(--fw-bold);
        font-variant-numeric: tabular-nums;
        color: var(--text);
    }

    .qucto-employee-rate-form .qucto-form-row {
        max-width: 32rem;
    }
}

/* === Potvrzení nevratných akcí (Phase 249) ===
 * js/confirm-action.js builds one .qucto-dialog for every button with
 * data-confirm (and hx-confirm): the question as the title, the consequence
 * below it, „Zpět" and the danger button.
 */
@layer features {
    .qucto-confirm .qucto-dialog-title {
        margin-bottom: var(--sp-2);
        overflow-wrap: anywhere;
    }

    .qucto-confirm-detail {
        margin: 0;
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        color: var(--text-muted);
    }

    .qucto-confirm .qucto-dialog-actions {
        margin-top: var(--sp-5);
    }
}

/* === Karta zaměstnance (Phase 250) ===
 * templates/payroll/employee.html.twig: documents and payroll on the left,
 * the person's data and hourly rate on the right; on narrow screens the data
 * come first. Row actions are icon buttons, forms open as dialogs.
 */
@layer features {
    .qucto-employee-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
        grid-template-areas: "main facts";
        gap: var(--sp-4);
        align-items: start;
    }

    .qucto-employee-main {
        grid-area: main;
    }

    .qucto-employee-facts {
        grid-area: facts;
    }

    .qucto-employee-main,
    .qucto-employee-facts {
        display: grid;
        gap: var(--sp-4);
        min-width: 0;
    }

    .qucto-main .qucto-employee-main > .qucto-card + .qucto-card,
    .qucto-main .qucto-employee-facts > .qucto-card + .qucto-card {
        margin-top: 0;
    }

    @container main (max-width: 52rem) {
        .qucto-employee-layout {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas: "facts" "main";
        }
    }

    /* Narrow label column in the side card; a phone keeps the stacked rows of .qucto-meta-list. */
    @container main (min-width: 36.01rem) {
        .qucto-employee-facts .qucto-meta-list {
            grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
            column-gap: var(--sp-4);
        }
    }

    .qucto-employee-facts .qucto-meta-list > dd {
        overflow-wrap: anywhere;
    }

    .qucto-employee-rate-history :is(th, td) {
        padding-inline: 0;
    }

    .qucto-employee-doc-name {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        font-weight: var(--fw-medium);
        color: var(--text);
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    .qucto-employee-doc-name > svg {
        flex: none;
        width: 16px;
        height: 16px;
        color: var(--text-muted);
    }

    .qucto-employee-doc-name:hover > span {
        text-decoration: underline;
    }

    .qucto-employee-docs td:first-child .qucto-table-secondary {
        padding-left: calc(16px + var(--sp-2));
    }

    .qucto-employee-doc-history {
        margin-top: var(--sp-1);
        padding-left: calc(16px + var(--sp-2));
        font-size: var(--fs-sm);
    }

    .qucto-employee-doc-actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: var(--sp-1);
    }

    .qucto-employee-doc-actions form {
        margin: 0;
    }

    /* =====================================================================
       Phase 258: a detail with its document on the right — the pages as
       pictures in a sticky column; on a narrow screen the preview comes
       first and scrolls in its own box.
       ===================================================================== */
    .qucto-with-preview {
        display: grid;
        grid-template-areas: 'preview' 'main';
        gap: var(--page-gap);
        align-items: start;
    }

    .qucto-with-preview-main {
        grid-area: main;
        display: flex;
        flex-direction: column;
        gap: var(--page-gap);
        min-width: 0;
    }

    .qucto-with-preview-main > p {
        margin: 0;
    }

    .qucto-main .qucto-with-preview-main > .qucto-card + .qucto-card {
        margin-top: 0;
    }

    .qucto-preview {
        grid-area: preview;
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        min-width: 0;
        padding: var(--sp-4);
        background: var(--surface);
        border-radius: var(--r-card);
        box-shadow: var(--e0);
    }

    .qucto-preview-title {
        margin: 0;
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
        color: var(--text);
    }

    .qucto-preview-body {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        min-height: 0;
    }

    .qucto-preview-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2);
    }

    .qucto-preview-label {
        flex: 1 1 10rem;
        min-width: 0;
        overflow: hidden;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .qucto-preview-links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-1);
        margin-left: auto;
    }

    .qucto-preview-pages {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        max-height: 70svh;
        margin: 0;
        padding: var(--sp-3);
        overflow-y: auto;
        overscroll-behavior: contain;
        list-style: none;
        background: var(--surface-inset);
        border-radius: var(--r-md);
    }

    .qucto-preview-pages a {
        display: block;
        border-radius: var(--r-xs);
    }

    .qucto-preview-pages img {
        display: block;
        width: 100%;
        height: auto;
        background: #fff;
        border-radius: var(--r-xs);
        box-shadow: var(--e1), 0 0 0 1px var(--border-subtle);
    }

    .qucto-preview-loading,
    .qucto-preview-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--sp-2);
        margin: 0;
        padding: var(--sp-6) var(--sp-4);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        text-align: center;
        color: var(--text-muted);
        background: var(--surface-inset);
        border-radius: var(--r-md);
    }

    .qucto-preview-loading {
        aspect-ratio: 1 / 1.414;
        max-height: 60svh;
    }

    .qucto-preview-empty > p {
        margin: 0;
        max-width: 22rem;
    }

    .qucto-preview-empty > svg {
        width: 24px;
        height: 24px;
    }

    @media (prefers-reduced-motion: no-preference) {
        .qucto-preview-loading {
            animation: qucto-preview-pulse 1.4s ease-in-out infinite alternate;
        }
    }

    @keyframes qucto-preview-pulse {
        to {
            opacity: 0.55;
        }
    }

    @container main (min-width: 52rem) {
        .qucto-with-preview {
            grid-template-columns: minmax(0, 1fr) clamp(18rem, 38%, 40rem);
            grid-template-areas: 'main preview';
        }

        .qucto-preview {
            position: sticky;
            top: var(--sp-4);
            max-height: calc(100dvh - 2 * var(--sp-4));
        }

        .qucto-preview-body {
            flex: 1 1 auto;
        }

        .qucto-preview-pages {
            flex: 1 1 auto;
            max-height: none;
            min-height: 0;
        }
    }
}