/* =====================================================================================================================
   App kit - components
   ---------------------------------------------------------------------------------------------------------------------
   The building blocks every productivity / science / game app was writing for itself under its own prefix (.hr-card,
   .ci-card, .mg-card ...): panels, stat tiles, form rows and fields, buttons, a segmented control, tables, chart frames
   with a legend, messages, empty states, list rows, chips, progress bars and icons. All colours come from tokens.css,
   so a component looks right in both themes and in every category's accent without extra CSS.

   Markup reference, a full example and the migration guide: ComponentCreator/docs/app-kit.md.

   Conventions
     .ak-x            block            .ak-x--y    variant           .is-y       state set by script
     Everything is scoped under .ak-app, so the kit never touches the rest of the site, and an app's own CSS (loaded
     after this file in apps.css) can override any of it with one extra class.
   ===================================================================================================================== */

.ak-app [hidden] {
    display: none !important;
}

/* header.css styles every <header> as the site's blue gradient bar. A <header> inside an app (a column or card
   heading) starts plain; zero specificity, so any class of the app styles it. */
:where(.ak-app) header {
    position: static;
    z-index: auto;
    display: block;
    padding: 0;
    background: none;
    font-size: inherit;
}

/* --- Stage: a column of full-width panels (the shared stage centres its children by default) ---------------------- */

.ak-app > .filter-landing-stage.ak-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--ak-space-4);
    padding: var(--ak-space-4);
    background: var(--ak-bg);
    color: var(--ak-text);
    font-family: var(--ak-font);
}

/* A stage whose one job is a big centred thing (a timer dial, a calculator, a game board). "safe" keeps the top of
   content taller than the stage reachable instead of pushing it out of view (phones cap the stage's height). */
.ak-app > .filter-landing-stage.ak-stage--center {
    align-items: center;
    justify-content: safe center;
}

/* The children set their own alignment: on phones the shared app layout (seo-pages.css, max-width 960px) gives the
   stage place-items: start center through a selector of some 27 classes, which would shrink the panels to their
   content. align-self on the children wins over any align-items on the stage. */
.ak-app > .filter-landing-stage.ak-stage > * {
    align-self: stretch;
}

.ak-app > .filter-landing-stage.ak-stage--center > * {
    align-self: center;
}

/* That phone layout also caps the stage at the screen's width in height and hides the overflow. A kit stage scrolls
   instead, so a result further down (a table, a list) stays within reach. */
@media (max-width: 960px) {
    body.filter-app-mode .ak-app > .filter-landing-stage.ak-stage {
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}

.ak-app > .filter-landing-stage.ak-stage *,
.ak-app > .filter-landing-controls .ak-form * {
    box-sizing: border-box;
}

/* --- Panel --------------------------------------------------------------------------------------------------------- */

.ak-app .ak-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    padding: var(--ak-space-4);
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-lg);
    background: var(--ak-panel);
    color: var(--ak-text);
}

/* A panel that only groups (no frame), e.g. the row of stat tiles. */
.ak-app .ak-panel--bare {
    padding: 0;
    border: 0;
    background: none;
}

/* The answer of the page: an accent edge and a faint accent fill. */
.ak-app .ak-panel--accent {
    border-color: color-mix(in srgb, var(--ak-accent) 40%, var(--ak-border));
    border-inline-start: 4px solid var(--ak-accent);
    background: color-mix(in srgb, var(--ak-accent) 7%, var(--ak-panel));
}

.ak-app .ak-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ak-space-2);
}

/* A panel head with only buttons (no title) keeps them at the end of the row. */
.ak-app .ak-panel-head > .ak-btn:first-child,
.ak-app .ak-panel-head > .ak-panel-actions:first-child {
    margin-inline-start: auto;
}

.ak-app .ak-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ak-space-2);
}

.ak-app .ak-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--ak-text);
    font-size: var(--ak-fs-md);
    font-weight: 700;
    line-height: 1.3;
}

.ak-app .ak-title .ak-icon {
    color: var(--ak-accent);
}

.ak-app .ak-subtitle {
    margin: 0;
    color: var(--ak-muted);
    font-size: var(--ak-fs-sm);
    font-weight: 600;
}

/* Two or three panels side by side on a wide stage, stacked on a narrow one. */
.ak-app .ak-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--ak-space-4);
    min-width: 0;
}

/* --- Stat tiles: the key figures. The first (or --main) one is the answer and gets the accent. -------------------- */

.ak-app .ak-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: var(--ak-space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* A fixed number of columns (four tiles that must stay in one row on a wide stage). */
.ak-app .ak-stats[data-ak-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ak-app .ak-stats[data-ak-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ak-app .ak-stats[data-ak-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ak-app .ak-stat {
    /* The strip colour: a chart series or a semantic colour, e.g. style="--ak-stat-color: var(--ak-series-2)". */
    --ak-stat-color: var(--ak-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.35rem;
    min-width: 0;
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--ak-border);
    border-inline-start: 4px solid var(--ak-stat-color);
    border-radius: var(--ak-radius);
    background: var(--ak-panel);
}

.ak-app .ak-stat--main {
    --ak-stat-color: var(--ak-accent);
    border-color: color-mix(in srgb, var(--ak-stat-color) 45%, var(--ak-border));
    border-inline-start-color: var(--ak-stat-color);
    background: color-mix(in srgb, var(--ak-stat-color) 10%, var(--ak-panel));
}

.ak-app .ak-stat-label {
    color: var(--ak-muted);
    font-size: 0.8rem;
    line-height: 1.3;
}

.ak-app .ak-stat-value {
    display: block;
    color: var(--ak-text);
    font-size: var(--ak-fs-lg);
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.ak-app .ak-stat--main .ak-stat-value {
    color: var(--ak-stat-color);
    font-size: var(--ak-fs-xl);
}

/* Long values (AppKit.fitValue sets these) step down instead of breaking a number over two lines. */
.ak-app .ak-stat--main .ak-stat-value.is-long { font-size: var(--ak-fs-lg); }
.ak-app .ak-stat .ak-stat-value.is-xlong { font-size: 1.05rem; }

.ak-app .ak-stat-hint {
    color: var(--ak-muted);
    font-size: var(--ak-fs-xs);
}

/* --- Form: the inputs, in the control panel or on the stage -------------------------------------------------------- */

.ak-app .ak-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.ak-app .ak-fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ak-app .ak-legend-title {
    margin: 0 0 0.1rem;
    padding: 0;
    color: var(--ak-muted);
    font-size: var(--ak-fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ak-app .ak-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* A checkbox (or a switch) with its label on one line, the whole row clickable. */
.ak-app .ak-row--check {
    flex-direction: row;
    align-items: center;
    gap: var(--ak-space-2);
    cursor: pointer;
}

.ak-app .ak-row--check input {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--ak-accent);
}

.ak-app .ak-label {
    color: var(--ak-text);
    font-size: var(--ak-fs-sm);
    font-weight: 600;
}

.ak-app .ak-help {
    margin: 0;
    color: var(--ak-muted);
    font-size: var(--ak-fs-xs);
    line-height: 1.4;
}

/* A field with a unit or a select beside it: [ 4000 ] [ per month v ]. */
.ak-app .ak-pair {
    display: flex;
    gap: 0.4rem;
    min-width: 0;
}

.ak-app .ak-pair > .ak-field:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.ak-app .ak-pair > select.ak-field,
.ak-app .ak-pair > .ak-field--auto {
    flex: none;
    width: auto;
}

/* A field with a fixed suffix inside its frame: [ 21 % ]. */
.ak-app .ak-affix {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* The long selector beats the input rule further down, which sets the padding of every kit text field. */
.ak-app .ak-affix > .ak-field,
.ak-app .ak-affix > input.ak-field:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    padding-inline-end: 2.4rem;
}

.ak-app .ak-affix-text {
    position: absolute;
    inset-inline-end: 0.6rem;
    color: var(--ak-muted);
    font-size: var(--ak-fs-sm);
    pointer-events: none;
}

/* site.css styles every input (colour, border: specificity 0,4,1) and gives text inputs a 32px height and
   margin-left: auto. Inside the kit the fields follow the app's palette and size, hence the long selector. */
.ak-app .ak-field,
.ak-app input.ak-field:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    display: block;
    width: 100%;
    height: auto;
    min-height: 2.25rem;
    margin: 0;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-sm);
    background: var(--ak-field);
    color: var(--ak-text);
    font: inherit;
    font-size: var(--ak-fs-sm);
    line-height: 1.35;
    box-shadow: none;
    transition: border-color var(--ak-duration) var(--ak-ease), box-shadow var(--ak-duration) var(--ak-ease);
}

.ak-app textarea.ak-field {
    min-height: 5rem;
    resize: vertical;
}

.ak-app .ak-field::placeholder {
    color: var(--ak-muted);
    opacity: 1;
}

.ak-app .ak-field--num {
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.ak-app .ak-field--short {
    max-width: 6.5rem;
}

.ak-app .ak-field:hover,
.ak-app input.ak-field:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]):hover {
    border-color: color-mix(in srgb, var(--ak-accent) 45%, var(--ak-border));
}

.ak-app .ak-field:focus,
.ak-app input.ak-field:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]):focus {
    outline: 2px solid var(--ak-accent);
    outline-offset: 1px;
    border-color: var(--ak-accent);
    box-shadow: none;
}

/* Invalid input (AppKit.invalid sets aria-invalid): a red frame, also when the field has focus. */
.ak-app .ak-field[aria-invalid="true"],
.ak-app input.ak-field[aria-invalid="true"]:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    border-color: var(--ak-danger);
    box-shadow: 0 0 0 1px var(--ak-danger);
}

.ak-app .ak-field:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Native parts (date picker icon, number spinners, select arrow) follow the scope's colour-scheme from tokens.css. */
.ak-app select.ak-field {
    cursor: pointer;
}

.ak-app input[type="range"].ak-range {
    width: 100%;
    accent-color: var(--ak-accent);
}

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

.ak-app .ak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    margin: 0;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-sm);
    background: var(--ak-field);
    color: var(--ak-text);
    font: inherit;
    font-size: var(--ak-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ak-duration) var(--ak-ease), border-color var(--ak-duration) var(--ak-ease),
        color var(--ak-duration) var(--ak-ease);
}

.ak-app .ak-btn:hover {
    background: var(--ak-hover);
}

.ak-app .ak-btn:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 2px;
}

.ak-app .ak-btn:disabled,
.ak-app .ak-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* The main action of the app: Start, Calculate, Add. */
.ak-app .ak-btn--primary {
    border-color: var(--ak-accent);
    background: var(--ak-accent);
    color: var(--ak-on-accent);
}

.ak-app .ak-btn--primary:hover {
    border-color: color-mix(in srgb, var(--ak-accent) 85%, var(--ak-text));
    background: color-mix(in srgb, var(--ak-accent) 85%, var(--ak-text));
}

/* A quiet action without a frame: Clear, Reset. */
.ak-app .ak-btn--ghost {
    border-color: transparent;
    background: transparent;
}

.ak-app .ak-btn--ghost:hover {
    background: var(--ak-hover);
}

/* Delete, Clear all. */
.ak-app .ak-btn--danger {
    color: var(--ak-danger);
}

.ak-app .ak-btn--danger:hover {
    border-color: var(--ak-danger);
    background: color-mix(in srgb, var(--ak-danger) 10%, var(--ak-field));
}

.ak-app .ak-btn--sm {
    min-height: 1.85rem;
    padding: 0.2rem 0.55rem;
    font-size: var(--ak-fs-xs);
}

.ak-app .ak-btn--lg {
    min-height: 2.9rem;
    padding: 0.6rem 1.3rem;
    font-size: var(--ak-fs-md);
}

.ak-app .ak-btn--block {
    width: 100%;
}

/* A square button with only an icon; it needs an aria-label. */
.ak-app .ak-btn--icon {
    width: 2.25rem;
    min-width: 2.25rem;
    padding: 0;
}

.ak-app .ak-btn--icon.ak-btn--sm {
    width: 1.85rem;
    min-width: 1.85rem;
}

/* After Copy / Save worked (AppKit.flash): the accent for a moment; the label says it in words. */
.ak-app .ak-btn.is-done {
    border-color: var(--ak-success);
    color: var(--ak-success);
}

.ak-app .ak-btn--primary.is-done {
    background: var(--ak-success);
    color: var(--ak-on-accent);
}

/* A toggle button that stays pressed (aria-pressed="true"); a primary button keeps its fill. */
.ak-app .ak-btn:not(.ak-btn--primary)[aria-pressed="true"] {
    border-color: var(--ak-accent);
    background: color-mix(in srgb, var(--ak-accent) 14%, var(--ak-field));
    color: var(--ak-text);
}

.ak-app .ak-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ak-space-2);
}

/* --- Segmented control: two to five exclusive choices (mode, direction, unit system) ------------------------------- */

.ak-app .ak-seg {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    padding: 3px;
    gap: 3px;
    border: 1px solid var(--ak-border);
    border-radius: calc(var(--ak-radius-sm) + 3px);
    background: var(--ak-panel);
}

.ak-app .ak-seg--block {
    display: flex;
}

.ak-app .ak-seg--block > .ak-seg-btn {
    flex: 1 1 0;
}

.ak-app .ak-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 1.95rem;
    margin: 0;
    padding: 0.25rem 0.75rem;
    border: 0;
    border-radius: var(--ak-radius-sm);
    background: transparent;
    color: var(--ak-muted);
    font: inherit;
    font-size: var(--ak-fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.ak-app .ak-seg-btn:hover {
    color: var(--ak-text);
    background: var(--ak-hover);
}

.ak-app .ak-seg-btn:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 1px;
}

.ak-app .ak-seg-btn[aria-pressed="true"],
.ak-app .ak-seg-btn[aria-checked="true"],
.ak-app .ak-seg-btn[aria-selected="true"] {
    background: var(--ak-accent);
    color: var(--ak-on-accent);
}

/* --- Tables -------------------------------------------------------------------------------------------------------- */

.ak-app .ak-table-wrap {
    max-height: 22rem;
    min-width: 0;
    overflow: auto;
    border: 1px solid var(--ak-border);
    border-radius: 0.5rem;
    background: var(--ak-bg);
}

.ak-app .ak-table-wrap--tall {
    max-height: 36rem;
}

.ak-app .ak-table-wrap:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 1px;
}

.ak-app .ak-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ak-text);
    font-size: var(--ak-fs-sm);
    font-variant-numeric: tabular-nums;
}

.ak-app .ak-table th,
.ak-app .ak-table td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--ak-border);
    text-align: start;
    white-space: nowrap;
}

.ak-app .ak-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ak-panel);
    color: var(--ak-muted);
    font-weight: 600;
}

.ak-app .ak-table tbody th {
    font-weight: 500;
}

.ak-app .ak-table tbody tr:hover {
    background: var(--ak-hover);
}

.ak-app .ak-table tbody tr:last-child > * {
    border-bottom: 0;
}

.ak-app .ak-table .ak-num {
    text-align: end;
}

.ak-app .ak-table tr.ak-strong > * {
    font-weight: 700;
}

/* The bottom line (net income, total): the accent, or --ak-total set on the table. */
.ak-app .ak-table tr.ak-total {
    background: color-mix(in srgb, var(--ak-total, var(--ak-accent)) 8%, transparent);
}

.ak-app .ak-table tr.ak-total > * {
    color: var(--ak-total, var(--ak-accent));
    font-weight: 700;
}

.ak-app .ak-table tr.is-current {
    background: color-mix(in srgb, var(--ak-accent) 12%, transparent);
}

/* --- Charts: a canvas that the script sizes (AppKit.canvas) and draws (AppKit.chart) ------------------------------ */

.ak-app .ak-chart-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.ak-app .ak-chart {
    display: block;
    width: 100%;
    height: 240px;
}

.ak-app .ak-chart--sm { height: 150px; }
.ak-app .ak-chart--lg { height: 340px; }

/* The value under the pointer (AppKit.chart tooltip). */
.ak-app .ak-tip {
    position: absolute;
    z-index: 2;
    min-width: 7rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-sm);
    background: var(--ak-field);
    box-shadow: var(--ak-shadow-lg);
    color: var(--ak-text);
    font-size: var(--ak-fs-xs);
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
    pointer-events: none;
    white-space: nowrap;
}

.ak-app .ak-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ak-muted);
    font-size: var(--ak-fs-sm);
}

.ak-app .ak-legend > li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* style="--ak-swatch: var(--ak-series-2)" */
.ak-app .ak-swatch {
    --ak-swatch: var(--ak-accent);
    display: inline-block;
    flex: none;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 0.2rem;
    background: var(--ak-swatch);
}

.ak-app .ak-swatch--line {
    height: 0;
    border-top: 2px solid var(--ak-swatch);
    border-radius: 0;
    background: none;
}

.ak-app .ak-swatch--dashed {
    height: 0;
    border-top: 2px dashed var(--ak-swatch);
    border-radius: 0;
    background: none;
}

.ak-app .ak-swatch--dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
}

/* --- Messages and notes -------------------------------------------------------------------------------------------- */

/* Why there is no result (role="alert"). */
.ak-app .ak-message {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    color: var(--ak-danger);
    font-size: var(--ak-fs-sm);
    font-weight: 600;
    line-height: 1.4;
}

.ak-app .ak-message--warning { color: var(--ak-warning); }
.ak-app .ak-message--success { color: var(--ak-success); }
.ak-app .ak-message--info { color: var(--ak-info); }

.ak-app .ak-message .ak-icon {
    margin-top: 0.05rem;
}

.ak-app .ak-note {
    margin: 0;
    color: var(--ak-muted);
    font-size: var(--ak-fs-sm);
    line-height: 1.45;
}

/* A sentence that belongs to the result ("Paid off in 23 years and 4 months, 8 months sooner."). */
.ak-app .ak-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--ak-accent) 35%, var(--ak-border));
    border-radius: var(--ak-radius);
    background: color-mix(in srgb, var(--ak-accent) 8%, var(--ak-panel));
    color: var(--ak-text);
    font-size: var(--ak-fs-sm);
    line-height: 1.45;
}

.ak-app .ak-callout > .ak-icon {
    flex: none;
    color: var(--ak-accent);
}

.ak-app .ak-callout--warning {
    border-color: color-mix(in srgb, var(--ak-warning) 40%, var(--ak-border));
    background: color-mix(in srgb, var(--ak-warning) 9%, var(--ak-panel));
}

.ak-app .ak-callout--warning > .ak-icon { color: var(--ak-warning); }

/* --- Text editors: text in, text out (word counter, case converter, JSON formatter, Markdown editor ...) ------------
       <textarea class="ak-field ak-editor">      a big text area (ak-editor--mono: code font; [readonly]: output)
       <pre class="ak-output">                    read-only text in the same frame (a payload, an error snippet)
       <p class="ak-meta"><span>Words <strong class="ak-meta-value">120</strong></span> ...</p>
                                                  a row of small counts by an editor; .ak-meta-status for "Copied" */

.ak-app textarea.ak-editor {
    display: block;
    width: 100%;
    min-height: 12rem;
    padding: 0.6rem 0.75rem;
    font-size: var(--ak-fs-md);
    line-height: 1.5;
    resize: vertical;
    tab-size: 4;
}

/* Code and markup in a code font (wrap="off" on the textarea keeps long lines unbroken). */
.ak-app textarea.ak-editor--mono {
    font-family: var(--ak-font-mono);
    font-size: var(--ak-fs-sm);
}

.ak-app textarea.ak-editor[readonly] {
    background: var(--ak-panel);
}

.ak-app .ak-output {
    max-height: 16rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    overflow: auto;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-sm);
    background: var(--ak-panel);
    color: var(--ak-text);
    font-family: var(--ak-font-mono);
    font-size: var(--ak-fs-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ak-app .ak-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    margin: 0;
    color: var(--ak-muted);
    font-size: var(--ak-fs-sm);
    font-variant-numeric: tabular-nums;
}

.ak-app .ak-meta-value {
    color: var(--ak-text);
    font-weight: 700;
}

/* A status message at the end of the row (Copied, Loaded ...). */
.ak-app .ak-meta-status {
    margin-inline-start: auto;
    color: var(--ak-accent);
    font-weight: 600;
}

/* --- Empty state: nothing to show yet (an empty list, no data) ----------------------------------------------------- */

.ak-app .ak-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ak-space-2);
    padding: var(--ak-space-5) var(--ak-space-4);
    color: var(--ak-muted);
    text-align: center;
}

.ak-app .ak-empty > .ak-icon {
    width: 3rem;
    height: 3rem;
    padding: 0.6rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ak-accent) 12%, var(--ak-panel));
    color: var(--ak-accent);
}

.ak-app .ak-empty-title {
    margin: 0;
    color: var(--ak-text);
    font-size: var(--ak-fs-md);
    font-weight: 700;
}

.ak-app .ak-empty-text {
    max-width: 28rem;
    margin: 0;
    font-size: var(--ak-fs-sm);
    line-height: 1.45;
}

/* --- List rows: tasks, saved items, history ------------------------------------------------------------------------ */

.ak-app .ak-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ak-app .ak-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius);
    background: var(--ak-field);
}

.ak-app .ak-item:hover {
    border-color: color-mix(in srgb, var(--ak-accent) 35%, var(--ak-border));
}

.ak-app .ak-item.is-selected {
    border-color: var(--ak-accent);
    background: color-mix(in srgb, var(--ak-accent) 8%, var(--ak-field));
}

.ak-app .ak-item.is-done .ak-item-title {
    color: var(--ak-muted);
    text-decoration: line-through;
}

.ak-app .ak-item-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ak-app .ak-item-title {
    overflow: hidden;
    color: var(--ak-text);
    font-size: var(--ak-fs-sm);
    font-weight: 600;
    text-overflow: ellipsis;
}

.ak-app .ak-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    color: var(--ak-muted);
    font-size: var(--ak-fs-xs);
}

.ak-app .ak-item-actions {
    display: flex;
    flex: none;
    gap: 0.25rem;
}

/* --- Chips, tags and badges ---------------------------------------------------------------------------------------- */

/* A chip is a button: a preset, an example, a filter. */
.ak-app .ak-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ak-app .ak-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.85rem;
    margin: 0;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-pill);
    background: var(--ak-field);
    color: var(--ak-text);
    font: inherit;
    font-size: var(--ak-fs-xs);
    font-weight: 600;
    cursor: pointer;
}

.ak-app .ak-chip:hover {
    border-color: var(--ak-accent);
}

.ak-app .ak-chip:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 1px;
}

.ak-app .ak-chip[aria-pressed="true"] {
    border-color: var(--ak-accent);
    background: var(--ak-accent);
    color: var(--ak-on-accent);
}

/* A tag or badge is a label, not a button. style="--ak-tag: var(--ak-series-3)" picks its colour. */
.ak-app .ak-tag {
    --ak-tag: var(--ak-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.5rem;
    border-radius: var(--ak-radius-pill);
    background: color-mix(in srgb, var(--ak-tag) 15%, transparent);
    color: color-mix(in srgb, var(--ak-tag) 75%, var(--ak-text));
    font-size: var(--ak-fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.ak-app .ak-tag--success { --ak-tag: var(--ak-success); }
.ak-app .ak-tag--warning { --ak-tag: var(--ak-warning); }
.ak-app .ak-tag--danger { --ak-tag: var(--ak-danger); }
.ak-app .ak-tag--muted { --ak-tag: var(--ak-muted); }

/* --- Progress: style="--ak-value: 42%" ----------------------------------------------------------------------------- */

.ak-app .ak-progress {
    --ak-value: 0%;
    --ak-progress-color: var(--ak-accent);
    position: relative;
    height: 0.5rem;
    overflow: hidden;
    border-radius: var(--ak-radius-pill);
    background: var(--ak-grid);
}

.ak-app .ak-progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--ak-value);
    border-radius: inherit;
    background: var(--ak-progress-color);
    transition: width 240ms var(--ak-ease);
}

[dir="rtl"] .ak-app .ak-progress::after {
    inset: 0 0 0 auto;
}

.ak-app .ak-progress--lg {
    height: 0.8rem;
}

/* --- Key / value list: label on the left, value on the right ------------------------------------------------------- */

.ak-app .ak-kv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: var(--ak-fs-sm);
}

.ak-app .ak-kv > dt {
    min-width: 0;
    color: var(--ak-muted);
}

.ak-app .ak-kv > dd {
    margin: 0;
    color: var(--ak-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

/* --- Icons (wwwroot/svg/icons via <ak-icon>, or AppKit.icon in scripts): 1em, the text colour --------------------- */

.ak-icon {
    display: inline-block;
    flex: none;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    stroke-width: 2;
}

.ak-icon--sm { width: 1em; height: 1em; }
.ak-icon--lg { width: 1.5em; height: 1.5em; }
.ak-icon--xl { width: 2.25em; height: 2.25em; }

/* An icon on a soft disc in the accent: the category or app badge. */
.ak-app .ak-icon-badge {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ak-radius);
    background: color-mix(in srgb, var(--ak-accent) 14%, var(--ak-panel));
    color: var(--ak-accent);
}

/* --- Utilities ----------------------------------------------------------------------------------------------------- */

.ak-app .ak-num {
    font-variant-numeric: tabular-nums;
}

/* Maths and code: always left to right, also on a right-to-left page. */
.ak-app .ak-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

.ak-app .ak-mono {
    font-family: var(--ak-font-mono);
}

.ak-app .ak-muted {
    color: var(--ak-muted);
}

.ak-app .ak-accent {
    color: var(--ak-accent);
}

.ak-app .ak-divider {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--ak-border);
}

.ak-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Narrow stages: tighter spacing, two tiles a row, smaller figures ---------------------------------------------- */

@container (max-width: 640px) {
    .ak-app > .filter-landing-stage.ak-stage {
        gap: var(--ak-space-3);
        padding: 0.6rem;
    }

    .ak-app .ak-panel {
        padding: var(--ak-space-3);
    }

    .ak-app .ak-panel--bare {
        padding: 0;
    }

    .ak-app .ak-stats,
    .ak-app .ak-stats[data-ak-cols] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ak-space-2);
    }

    .ak-app .ak-stat {
        padding: 0.6rem 0.7rem;
    }

    .ak-app .ak-stat-value { font-size: 1.1rem; }
    .ak-app .ak-stat--main .ak-stat-value { font-size: 1.3rem; }
    .ak-app .ak-stat .ak-stat-value.is-long { font-size: 0.95rem; }
    .ak-app .ak-stat--main .ak-stat-value.is-long { font-size: 1.05rem; }
    .ak-app .ak-stat .ak-stat-value.is-xlong { font-size: 0.85rem; }

    /* The answer across the full width above the others. */
    .ak-app .ak-stats > .ak-stat--main:first-child:nth-last-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Only the kit's own elements, so an app that adds ak-app to adopt the tokens keeps its animations as they were. */
@media (prefers-reduced-motion: reduce) {
    .ak-app [class*="ak-"],
    .ak-app [class*="ak-"]::before,
    .ak-app [class*="ak-"]::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    .ak-app .ak-table-wrap {
        max-height: none;
        overflow: visible;
    }
}