@echodial/deck 0.1.0

package/dist/layers/components.css

@@ -0,0 +1,868 @@
+/* ==========================================================================
+   Deck — 07 Components
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* --- Card --------------------------------------------------------------- */
+  /* A surface with a border, radius and shadow. It brings no padding of its
+     own — put .card-body inside so the header, body and footer can each own
+     their spacing. */
+  .card {
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    box-shadow: var(--shadow-1);
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    overflow: clip;
+  }
+  /* The bottom region. margin-block-start: auto pins it to the bottom of
+     the card, so a row of cards of unequal length still has its footers
+     level without anything being measured. */
+  /* The top region of a card. A flex row, so a title and a control sit
+     on one line; the divider below it belongs to the header, so a card
+     with no header has no stray line. */
+  .card-header, .card-footer {
+    padding: var(--space-4) var(--space-5);
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+  .card-header { border-block-end: 1px solid var(--line); }
+  .card-footer { border-block-start: 1px solid var(--line); background: var(--surface-2); margin-block-start: auto; }
+  /* The padded region of a card. A column with a gap, so children stack
+     without margins. */
+  .card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
+  /* The heading inside a card. Sized independently of h1-h6 so the same
+     card works at any heading level. */
+  .card-title { font-size: var(--text-md); font-weight: 620; letter-spacing: -.012em; }
+  /* An image region that reaches the card's edges. The card's own
+     overflow: clip does the rounding, so the image needs no radius.
+     Put it beside .card-body, never inside it. */
+  .card-media { margin: 0; }
+  .card-media img { inline-size: 100%; object-fit: cover; }
+
+  /* Whole card is the link, but nested links still work */
+  .card-link { position: relative; transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
+  .card-link:hover { box-shadow: var(--shadow-3); border-color: var(--line-strong); }
+  .card-link .stretch::after { content: ""; position: absolute; inset: 0; }
+
+  /* A card with no border, shadow or background. Grouping without a box
+     drawn around it. */
+  .card-flush { border: 0; box-shadow: none; background: none; }
+  /* A deeper shadow and no visible border, for a surface that should read
+     as floating above the page. */
+  .card-raised { box-shadow: var(--shadow-3); border-color: transparent; }
+  /* Brand-tinted fill and border, for the one card on a page that is an
+     offer rather than a record. */
+  .card-brand { border-color: var(--brand-200); background: var(--brand-soft); }
+
+  /* --- Panel: a card that goes edge to edge on a phone --------------------- */
+  .panel {
+    background: var(--surface);
+    border-block: 1px solid var(--line);
+    padding: var(--space-5) var(--space-gutter);
+    margin-inline: calc(var(--space-gutter) * -1);
+  }
+  @media (min-width: 40rem) {
+    .panel {
+      border: 1px solid var(--line);
+      border-radius: var(--r-md);
+      margin-inline: 0;
+      padding-inline: var(--space-5);
+    }
+  }
+
+  /* --- Badge and chip ----------------------------------------------------- */
+  /* A small inline status pill. Sized in em, so it tracks whatever text it
+     sits next to rather than needing a size variant per context. */
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: .18em .55em;
+    border-radius: var(--r-xs);
+    background: var(--surface-2);
+    color: var(--text-muted);
+    border: 1px solid var(--line);
+    font-size: var(--text-xs);
+    font-weight: 580;
+    line-height: 1.45;
+    white-space: nowrap;
+  }
+  /* Brand tint. For a label that names a category rather than a status. */
+  .badge-brand { background: var(--brand-soft); color: var(--brand-soft-text); border-color: transparent; }
+  /* Paid, shipped, passing, active. */
+  .badge-good  { background: var(--good-100); color: var(--good-700); border-color: transparent; }
+  /* Pending, expiring: needs attention, nothing is broken. */
+  .badge-warn  { background: var(--warn-100); color: var(--warn-700); border-color: transparent; }
+  /* Failed, overdue, rejected. */
+  .badge-bad   { background: var(--bad-100);  color: var(--bad-700);  border-color: transparent; }
+  /* Filled with the brand colour. The highest-emphasis badge; use one per
+     view or it stops meaning anything. */
+  .badge-solid { background: var(--brand-600); color: var(--text-on-brand); border-color: transparent; }
+  /* Adds a leading dot in currentColor, so it takes the tone's text colour
+     without a second class. The dot is decoration — never ship one with no
+     text beside it, because colour alone is not a status. */
+  .badge-dot::before {
+    content: "";
+    inline-size: 6px; block-size: 6px;
+    border-radius: var(--r-full);
+    background: currentColor;
+  }
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-block-size: 34px;
+    padding-inline: var(--space-3);
+    border-radius: var(--r-full);
+    border: 1px solid var(--line-strong);
+    background: var(--surface);
+    font-size: var(--text-sm);
+    font-weight: 520;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
+  }
+  .chip:hover { background: var(--surface-hover); }
+  .chip[aria-pressed="true"], .chip.is-active {
+    background: var(--brand-600);
+    border-color: var(--brand-600);
+    color: var(--text-on-brand);
+  }
+  .chip-remove { display: grid; place-items: center; opacity: .6; }
+  .chip-remove:hover { opacity: 1; }
+
+  /* --- Alert -------------------------------------------------------------- */
+  /* A block of prose the reader is meant to stop and read. The tone is a
+     three-pixel border-inline-start, so it moves to the right edge under
+     dir="rtl" with no second rule. Deck sets no ARIA role: role="alert" on
+     a message that is present at page load interrupts a screen reader
+     before it has read anything. */
+  .alert {
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    border-radius: var(--r-md);
+    border: 1px solid var(--line);
+    background: var(--surface-2);
+    border-inline-start: 3px solid var(--ink-400);
+  }
+  /* The first line of an alert. A weight change, not a heading — if it
+     belongs in the document outline, put this class on a real h2-h4. */
+  .alert-title { font-weight: 620; margin-block-end: 2px; }
+  /* The explanatory line. min-inline-size: 0 so a long unbroken string
+     cannot push the alert wider than its container. */
+  .alert-body { font-size: var(--text-sm); color: var(--text-muted); min-inline-size: 0; }
+  .alert > .icon { flex: 0 0 auto; margin-block-start: 1px; }
+  /* Something the reader should know before continuing. */
+  .alert-info { background: var(--brand-soft); border-color: transparent; border-inline-start-color: var(--brand-500); color: var(--brand-soft-text); }
+  /* Confirmation that something worked. */
+  .alert-good { background: var(--good-100); border-color: transparent; border-inline-start-color: var(--good-500); color: var(--good-700); }
+  /* A consequence the reader should understand first. */
+  .alert-warn { background: var(--warn-100); border-color: transparent; border-inline-start-color: var(--warn-500); color: var(--warn-700); }
+  /* Something failed, or is about to. */
+  .alert-bad  { background: var(--bad-100);  border-color: transparent; border-inline-start-color: var(--bad-500);  color: var(--bad-700); }
+  .alert :is(.alert-body, p) { color: inherit; opacity: .9; }
+
+  /* --- Avatar ------------------------------------------------------------- */
+  /* A round box holding an image or initials. --size drives the width, the
+     height and the font size together, so a size variant is one
+     declaration and the initials can never overflow the circle. */
+  .avatar {
+    --size: 40px;
+    inline-size: var(--size);
+    block-size: var(--size);
+    border-radius: var(--r-full);
+    background: var(--brand-soft);
+    color: var(--brand-soft-text);
+    display: grid;
+    place-items: center;
+    font-size: calc(var(--size) * .38);
+    font-weight: 620;
+    overflow: hidden;
+    flex: 0 0 auto;
+    user-select: none;
+  }
+  .avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
+  /* 24px. */
+  .avatar-xs { --size: 24px; }
+  /* 32px. */
+  .avatar-sm { --size: 32px; }
+  /* 56px. */
+  .avatar-lg { --size: 56px; }
+  /* 80px. */
+  .avatar-xl { --size: 80px; }
+  /* A square avatar, for anything that is not a person — an organisation,
+     a project, a repository. */
+  .avatar-square { border-radius: var(--r-sm); }
+
+  /* Overlapping avatars. The offset is a fraction of --size, so it stays
+     proportional at every size, and the ring is the surface colour, which
+     is wrong on any other background. */
+  .avatar-stack { display: flex; }
+  .avatar-stack > .avatar + .avatar { margin-inline-start: calc(var(--size, 40px) * -.32); }
+  .avatar-stack > .avatar { box-shadow: 0 0 0 2px var(--surface); }
+
+  .presence { position: relative; }
+  .presence::after {
+    content: "";
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inline-size: 30%;
+    block-size: 30%;
+    border-radius: var(--r-full);
+    background: var(--good-500);
+    box-shadow: 0 0 0 2px var(--surface);
+  }
+  .presence-away::after { background: var(--warn-500); }
+  .presence-off::after { background: var(--ink-400); }
+
+  /* --- Table -------------------------------------------------------------- */
+  /* The scroll container for a table, and not optional. It carries the
+     border, radius, background and overflow-x, without which a wide table
+     pushes the whole page sideways. Add tabindex="0" when the table
+     overflows, or a keyboard user cannot scroll it. */
+  .table-wrap {
+    inline-size: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    background: var(--surface);
+  }
+  /* A real table, kept a table at every width, because values in a column
+     are only comparable while the columns exist. */
+  .table { inline-size: 100%; font-size: var(--text-sm); }
+  .table :is(th, td) {
+    padding: var(--space-3) var(--space-4);
+    text-align: start;
+    vertical-align: middle;
+  }
+  .table thead th {
+    background: var(--surface-2);
+    font-weight: 600;
+    color: var(--text-muted);
+    font-size: var(--text-xs);
+    letter-spacing: .01em;
+    white-space: nowrap;
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+  }
+  .table tbody tr + tr { border-block-start: 1px solid var(--line); }
+  .table tbody tr:hover { background: var(--surface-hover); }
+  /* A numeric table cell: aligned to the end edge with tabular figures, so
+     digits line up down the column. */
+  .table .num { text-align: end; font-variant-numeric: tabular-nums; }
+  /* Tighter cell padding, for a table the reader scans rather than reads. */
+  .table-compact :is(th, td) { padding: var(--space-2) var(--space-3); }
+
+  /* Below 40rem the table restacks into labelled rows.
+     Put the column name in data-label on each cell. */
+  @media (max-width: 39.999rem) {
+    .table-stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
+    /* Below 40rem, restacks each row into labelled lines, taking the label
+       from data-label on the cell. Every cell needs one. The thead is
+       clipped rather than removed, so header association survives; print
+       undoes the whole thing, because paper is never narrow. */
+    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; inline-size: 100%; }
+    .table-stack tr {
+      border: 1px solid var(--line);
+      border-radius: var(--r-sm);
+      padding: var(--space-2);
+      margin-block-end: var(--space-3);
+    }
+    .table-stack tbody tr + tr { border-block-start: 1px solid var(--line); }
+    .table-stack td {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--space-4);
+      padding: var(--space-2) var(--space-3);
+      text-align: end;
+    }
+    .table-stack td::before {
+      content: attr(data-label);
+      font-weight: 580;
+      color: var(--text-muted);
+      text-align: start;
+    }
+  }
+
+  /* --- List rows ---------------------------------------------------------- */
+  /* A bordered, clipped column of rows. Use it when the reader reads one
+     row at a time; if they compare values down a column, that is a table. */
+  .list {
+    display: flex;
+    flex-direction: column;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    overflow: clip;
+  }
+  /* One row. min-block-size: var(--tap) puts every row at the touch
+     target, and the colour and text-decoration resets mean the row can be
+     an <a> directly — one element, one tab stop, the whole row clickable. */
+  .list-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    min-block-size: var(--tap);
+    color: inherit;
+    text-decoration: none;
+    transition: background-color var(--dur-1) var(--ease-out);
+  }
+  .list-row + .list-row { border-block-start: 1px solid var(--line); }
+  .list-row:hover { background: var(--surface-hover); }
+  /* The text column of a row. min-inline-size: 0 is the important half: a
+     flex item's minimum is its content by default, so without it a long
+     value pushes the trailing content off the end of the row. */
+  .list-row .list-main { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 1px; }
+  /* The first line of a row. */
+  .list-row .list-title { font-weight: 560; }
+  /* The second, muted line of a row. */
+  .list-row .list-sub { font-size: var(--text-sm); color: var(--text-muted); }
+  /* What sits at the end of a row — a time, a count, a chevron. Faint and
+     never shrinking. Below 4.5:1 by design, so nothing load-bearing
+     belongs here. */
+  .list-row .list-trail { color: var(--text-faint); flex: 0 0 auto; font-size: var(--text-sm); }
+  /* A group heading inside a list. Styling only: a screen reader hears
+     ordinary text, so if the grouping is meaningful use a real heading. */
+  .list-header {
+    padding: var(--space-2) var(--space-4);
+    background: var(--surface-2);
+    font-size: var(--text-xs);
+    font-weight: 620;
+    color: var(--text-muted);
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+  }
+
+  /* --- Tabs --------------------------------------------------------------- */
+  /* The strip. Scrolls sideways rather than wrapping, because tabs that wrap
+     stop reading as a strip. Deck styles the tabs and ships no keyboard
+     behaviour: if you use role="tablist" you must add the roving tabindex and
+     the arrow keys yourself, or the role promises what the page does not do. */
+  .tabs {
+    display: flex;
+    gap: var(--space-1);
+    border-block-end: 1px solid var(--line);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .tabs::-webkit-scrollbar { display: none; }
+  /* One trigger. Styled from [aria-selected="true"], so the visual state and
+     the accessible state are the same attribute and cannot disagree. The
+     unselected state carries the same transparent border, so selecting one
+     changes a colour and never moves anything. */
+  .tab {
+    padding: var(--space-3) var(--space-4);
+    min-block-size: var(--tap);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--text-muted);
+    font-weight: 560;
+    font-size: var(--text-sm);
+    white-space: nowrap;
+    cursor: pointer;
+    border-block-end: 2px solid transparent;
+    margin-block-end: -1px;
+    text-decoration: none;
+    transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
+  }
+  .tab:hover { color: var(--text); }
+  .tab[aria-selected="true"], .tab.is-active {
+    color: var(--brand);
+    border-block-end-color: var(--brand);
+  }
+
+  /* --- Segmented control (iOS-style, good on a phone) --------------------- */
+  /* A one-of-N control: equal-width children in a sunken track with the
+     selected one raised. Styled from [aria-selected="true"] or .is-active.
+     Built from radio inputs it needs no JavaScript and gets arrow keys free —
+     but Deck does not style :has(:checked), so that version needs one rule of
+     your own. */
+  .segmented {
+    display: inline-flex;
+    padding: 3px;
+    gap: 2px;
+    background: var(--bg-sunken);
+    border-radius: var(--r-sm);
+    border: 1px solid var(--line);
+    inline-size: 100%;
+  }
+  .segmented > * {
+    flex: 1 1 0;
+    min-block-size: 36px;
+    padding-inline: var(--space-3);
+    border-radius: calc(var(--r-sm) - 2px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+    font-weight: 560;
+    color: var(--text-muted);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
+  }
+  .segmented > [aria-selected="true"], .segmented > .is-active {
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: var(--shadow-1);
+  }
+
+  /* --- Accordion (native details, animates open) -------------------------- */
+  /* A bordered container for native <details>. The open state, the keyboard
+     and the accessible name are the element's. Deck restyles the summary,
+     replaces the marker with a chevron, and animates the height using
+     ::details-content plus the interpolate-size opt-in in 02-reset.css — the
+     first time a disclosure could animate to auto height without JavaScript.
+     Give the details elements a shared name attribute for one-at-a-time. */
+  .accordion { border: 1px solid var(--line); border-radius: var(--r-md); overflow: clip; background: var(--surface); }
+  .accordion > details + details { border-block-start: 1px solid var(--line); }
+  .accordion summary, .disclosure summary {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    min-block-size: var(--tap);
+    font-weight: 560;
+    cursor: pointer;
+    list-style: none;
+    transition: background-color var(--dur-1) var(--ease-out);
+  }
+  .accordion summary::-webkit-details-marker, .disclosure summary::-webkit-details-marker { display: none; }
+  .accordion summary:hover, .disclosure summary:hover { background: var(--surface-hover); }
+  .accordion summary::after, .disclosure summary::after {
+    content: "";
+    margin-inline-start: auto;
+    inline-size: 8px;
+    block-size: 8px;
+    border-inline-end: 2px solid var(--text-faint);
+    border-block-end: 2px solid var(--text-faint);
+    rotate: 45deg;
+    translate: 0 -2px;
+    transition: rotate var(--dur-2) var(--ease-out);
+  }
+  .accordion details[open] summary::after, .disclosure[open] summary::after { rotate: 225deg; translate: 0 2px; }
+  /* The padded region below a summary. Indented to line up with the summary
+     text rather than the chevron. */
+  .accordion .accordion-body, .disclosure .disclosure-body {
+    padding: 0 var(--space-4) var(--space-4);
+    color: var(--text-muted);
+    font-size: var(--text-sm);
+  }
+  .accordion details::details-content, .disclosure::details-content {
+    block-size: 0;
+    overflow: hidden;
+    transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
+  }
+  .accordion details[open]::details-content, .disclosure[open]::details-content { block-size: auto; }
+
+  /* --- Breadcrumb --------------------------------------------------------- */
+  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
+  .breadcrumb a { color: var(--text-muted); text-decoration: none; }
+  .breadcrumb a:hover { color: var(--brand); }
+  .breadcrumb li + li::before { content: "/"; color: var(--text-faint); margin-inline-end: var(--space-2); }
+  .breadcrumb li { display: flex; align-items: center; }
+  .breadcrumb [aria-current] { color: var(--text); font-weight: 560; }
+
+  /* --- Pagination --------------------------------------------------------- */
+  .pagination { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; }
+  .pagination > * {
+    min-inline-size: var(--control-h-sm);
+    min-block-size: var(--control-h-sm);
+    padding-inline: var(--space-2);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--r-xs);
+    color: var(--text-muted);
+    font-size: var(--text-sm);
+    font-variant-numeric: tabular-nums;
+    text-decoration: none;
+  }
+  .pagination > a:hover { background: var(--surface-hover); color: var(--text); }
+  .pagination > [aria-current="page"] { background: var(--brand-600); color: var(--text-on-brand); font-weight: 600; }
+
+  /* --- Progress, ring, spinner, skeleton ---------------------------------- */
+
+  /* Three ways to say "something is happening", and the choice is only ever
+     about one thing: whether you know how much is left. .progress and .ring
+     do, .spinner does not. There is no standalone meter -- a bar drawn from a
+     value rather than from an element is .chart-meter, in 14-charts.css.
+
+     .progress goes on a real <progress>, so the element carries the value, the
+     maximum and the role. The two vendor pseudo-elements have to be written as
+     separate rules: a vendor pseudo-element in a shared selector invalidates
+     the whole rule for the other engine. Same constraint as .range. */
+  .progress {
+    inline-size: 100%;
+    block-size: 8px;
+    border-radius: var(--r-full);
+    background: var(--ink-200);
+    overflow: hidden;
+    appearance: none;
+    border: 0;
+  }
+  .progress::-webkit-progress-bar { background: var(--ink-200); }
+  .progress::-webkit-progress-value { background: var(--brand-600); border-radius: var(--r-full); transition: inline-size var(--dur-3) var(--ease-out); }
+  .progress::-moz-progress-bar { background: var(--brand-600); border-radius: var(--r-full); }
+
+  /* A conic gradient for the fill, a radial mask for the hole. Three custom
+     properties shape it: --value, --size, --thickness.
+
+     The mask is the thing to understand. It applies to this element AND its
+     whole subtree, so a label centred inside a .ring is punched out along with
+     the middle -- it renders, it takes up space, it is in the accessibility
+     tree, and it is invisible. That is what .ring-wrap and .ring-label below
+     exist for: an unmasked wrapper that stacks the label over the ring as a
+     sibling rather than a child.
+
+     FINDINGS 60: place-items and the three font declarations here are the
+     fossil of the approach that does not work. They style a child nobody can
+     see -- .ring-label repeats all three on the sibling, which is the tell.
+     Due for removal; kept for now because the API is frozen. */
+  .ring {
+    --value: 0;
+    --thickness: 6px;
+    --size: 56px;
+    inline-size: var(--size);
+    block-size: var(--size);
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-full);
+    font-size: var(--text-xs);
+    font-weight: 620;
+    font-variant-numeric: tabular-nums;
+    background: conic-gradient(var(--brand-600) calc(var(--value) * 1%), var(--ink-200) 0);
+    mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
+    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
+  }
+  .ring-wrap { position: relative; display: inline-grid; place-items: center; }
+  .ring-wrap > .ring-label { position: absolute; font-size: var(--text-xs); font-weight: 620; font-variant-numeric: tabular-nums; }
+
+  /* Exempt from the reduced-motion reset in 02-reset.css: instead of freezing
+     it slows to 2.4s. A frozen spinner reads as a hung page, which is worse
+     for everyone than a slow one. Note border-block-start-color rather than
+     border-top-color -- the lit segment starts at the block start in any
+     writing mode. */
+  .spinner {
+    inline-size: 20px;
+    block-size: 20px;
+    border: 2px solid var(--ink-200);
+    border-block-start-color: var(--brand-600);
+    border-radius: var(--r-full);
+    animation: dk-spin .62s linear infinite;
+  }
+  .spinner-lg { inline-size: 34px; block-size: 34px; border-width: 3px; }
+
+  .skeleton {
+    background: linear-gradient(100deg,
+      var(--ink-100) 30%, var(--ink-200) 48%, var(--ink-100) 66%);
+    background-size: 300% 100%;
+    animation: dk-shimmer 1.4s var(--ease-in-out) infinite;
+    border-radius: var(--r-xs);
+    block-size: 1em;
+    color: transparent;
+    user-select: none;
+  }
+  .skeleton-text { block-size: .8em; margin-block: .35em; }
+  .skeleton-circle { border-radius: var(--r-full); }
+  @keyframes dk-shimmer { to { background-position: -300% 0; } }
+
+  /* --- Tooltip ------------------------------------------------------------ */
+  /* A CSS-only tooltip: the text comes from data-tip through ::after, so there
+     is no second element. It cannot flip near a window edge, cannot escape an
+     overflow:hidden ancestor, and is hidden entirely on a coarse pointer. Never
+     put anything essential in it, and pair it with aria-label — generated
+     content is not a reliable accessible name. */
+  .tooltip { position: relative; }
+  .tooltip::after {
+    content: attr(data-tip);
+    position: absolute;
+    inset-block-end: calc(100% + 8px);
+    inset-inline-start: 50%;
+    translate: -50% 4px;
+    background: var(--ink-900);
+    color: var(--ink-50);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    line-height: 1.4;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--r-xs);
+    inline-size: max-content;
+    max-inline-size: 16rem;
+    box-shadow: var(--shadow-3);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
+    z-index: var(--z-toast);
+  }
+  .tooltip:is(:hover, :focus-visible)::after { opacity: 1; translate: -50% 0; }
+  @media (pointer: coarse) { .tooltip::after { display: none; } }
+
+  /* --- Menu / dropdown, built on the native popover ----------------------- */
+  /* A dropdown built on the native popover attribute: light dismiss, Escape,
+     the top layer and one-at-a-time behaviour all come from the platform.
+     25-anchor.css positions it against its trigger with anchor positioning and
+     a fallback chain, so it flips when there is no room below. */
+  .menu {
+    position: absolute;
+    margin: 0;
+    padding: var(--space-1);
+    inline-size: max-content;
+    min-inline-size: 12rem;
+    max-inline-size: min(20rem, calc(100vw - var(--space-8)));
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    box-shadow: var(--shadow-4);
+    inset: auto;
+    opacity: 0;
+    translate: 0 -6px;
+    transition: opacity var(--dur-2) var(--ease-out),
+                translate var(--dur-2) var(--ease-out),
+                overlay var(--dur-2) allow-discrete,
+                display var(--dur-2) allow-discrete;
+  }
+  .menu:popover-open { opacity: 1; translate: 0; }
+  @starting-style { .menu:popover-open { opacity: 0; translate: 0 -6px; } }
+  .menu::backdrop { background: transparent; }
+
+  /* One row in a menu. Works on a button or an anchor — colour and
+     text-decoration are reset so a link needs no help. Hover and focus share a
+     style, so a keyboard user sees what a mouse user sees. 40px tall, which is
+     under the 44px target: a deliberate density trade for a list of eight. */
+  .menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    inline-size: 100%;
+    min-block-size: 40px;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--r-xs);
+    color: var(--text);
+    font-size: var(--text-sm);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color var(--dur-1) var(--ease-out);
+  }
+  .menu-item:hover, .menu-item:focus-visible { background: var(--surface-hover); }
+  /* A destructive item. Red is not announced, so the label has to say what it
+     does and a confirmation should stand behind it. */
+  .menu-item-danger { color: var(--bad-700); }
+  .menu-item-danger:hover { background: var(--bad-100); }
+  .menu-item .push { margin-inline-start: auto; color: var(--text-faint); }
+  /* A one-pixel divider between groups of items. */
+  .menu-sep { block-size: 1px; background: var(--line); margin: var(--space-1) 0; }
+  /* A small heading above a group of items. Styling only — a screen reader
+     hears ordinary text. */
+  .menu-label { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-xs); font-weight: 620; color: var(--text-faint); }
+
+  /* --- Modal, built on native dialog -------------------------------------- */
+  /* A native <dialog>. Open it with showModal(), never show() and never the
+     open attribute: only showModal() gives the top layer, the backdrop, the
+     focus trap and an inert background. The open and close animate because
+     display and overlay are in the transition with allow-discrete, which is
+     what keeps the element rendered long enough to fade out. */
+  .modal {
+    inline-size: min(34rem, calc(100vw - var(--space-8)));
+    max-block-size: min(85dvh, 48rem);
+    padding: 0;
+    border: 1px solid var(--line);
+    border-radius: var(--r-lg);
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: var(--shadow-4);
+    overflow: clip;
+    opacity: 0;
+    scale: .97;
+    translate: 0 8px;
+    transition: opacity var(--dur-2) var(--ease-out),
+                scale var(--dur-2) var(--ease-spring),
+                translate var(--dur-2) var(--ease-spring),
+                overlay var(--dur-2) allow-discrete,
+                display var(--dur-2) allow-discrete;
+  }
+  .modal[open] { opacity: 1; scale: 1; translate: 0; }
+  @starting-style { .modal[open] { opacity: 0; scale: .97; translate: 0 8px; } }
+  .modal::backdrop {
+    background: oklch(18% .02 var(--hue-neutral) / .48);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);
+    opacity: 0;
+    transition: opacity var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete;
+  }
+  .modal[open]::backdrop { opacity: 1; }
+  @starting-style { .modal[open]::backdrop { opacity: 0; } }
+
+  /* The title row. A flex row aligned to flex-start, so a long title and a
+     close button line up on the first line. */
+  .modal-header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-5);
+    border-block-end: 1px solid var(--line);
+  }
+  /* The dialog's heading. Give it an id and point aria-labelledby at it, or
+     the dialog is announced with no name. */
+  .modal-title { font-size: var(--text-lg); font-weight: 640; letter-spacing: -.018em; }
+  /* The scrolling region. The modal caps at min(85dvh, 48rem) and clips, so a
+     long body scrolls while the header and footer stay put — which is what
+     keeps the actions above the fold. */
+  .modal-body { padding: var(--space-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }
+  /* The action row, end-aligned. Below 32rem it becomes column-reverse with
+     full-width buttons, so the primary action — last in the markup — is on top
+     where a thumb reaches it, without changing DOM order. */
+  .modal-footer {
+    display: flex;
+    gap: var(--space-3);
+    justify-content: flex-end;
+    padding: var(--space-4) var(--space-5);
+    border-block-start: 1px solid var(--line);
+    background: var(--surface-2);
+    flex-wrap: wrap;
+  }
+  @media (max-width: 32rem) {
+    .modal-footer { flex-direction: column-reverse; }
+    .modal-footer > .btn { inline-size: 100%; }
+  }
+
+  /* --- Empty state -------------------------------------------------------- */
+  .empty {
+    display: grid;
+    place-items: center;
+    gap: var(--space-3);
+    padding: var(--space-12) var(--space-5);
+    text-align: center;
+    color: var(--text-muted);
+  }
+  .empty-art {
+    inline-size: 56px;
+    block-size: 56px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-full);
+    background: var(--brand-soft);
+    color: var(--brand);
+    font-size: 26px;
+  }
+  .empty-title { font-size: var(--text-md); font-weight: 620; color: var(--text); }
+  .empty p { max-inline-size: 34ch; }
+
+  /* --- Stat --------------------------------------------------------------- */
+  .stat { display: flex; flex-direction: column; gap: var(--space-1); }
+  .stat-value {
+    font-size: var(--text-2xl);
+    font-weight: 660;
+    letter-spacing: -.03em;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.05;
+  }
+  .stat-label { font-size: var(--text-sm); color: var(--text-muted); }
+  .stat-delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: 560; }
+  .stat-delta-up { color: var(--good-700); }
+  .stat-delta-down { color: var(--bad-700); }
+
+  /* --- Timeline ----------------------------------------------------------- */
+  .timeline { display: flex; flex-direction: column; }
+  .timeline-item {
+    display: grid;
+    grid-template-columns: 22px 1fr;
+    gap: var(--space-3);
+    padding-block-end: var(--space-5);
+    position: relative;
+  }
+  .timeline-item:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    inset-block: 22px 0;
+    inset-inline-start: 10px;
+    inline-size: 2px;
+    background: var(--line);
+  }
+  .timeline-dot {
+    inline-size: 22px;
+    block-size: 22px;
+    border-radius: var(--r-full);
+    background: var(--surface);
+    border: 2px solid var(--line-strong);
+    display: grid;
+    place-items: center;
+    z-index: 1;
+  }
+  .timeline-item.is-done .timeline-dot { background: var(--brand-600); border-color: var(--brand-600); color: var(--text-on-brand); }
+
+  /* --- Nav bar ------------------------------------------------------------ */
+  .navbar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    min-block-size: var(--control-h-lg);
+    padding-block: var(--space-2);
+    border-block-end: 1px solid var(--line);
+  }
+  .navbar-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-weight: 680;
+    font-size: var(--text-md);
+    letter-spacing: -.024em;
+    color: var(--text);
+    text-decoration: none;
+  }
+  .navbar-links { display: none; gap: var(--space-1); align-items: center; }
+  @media (min-width: 48rem) { .navbar-links { display: flex; } }
+  /* One destination in a .navbar. Carries the hover and current-page
+     states; use .btn only for actions, never for navigation. */
+  .nav-link {
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--r-sm);
+    color: var(--text-muted);
+    font-size: var(--text-sm);
+    font-weight: 540;
+    text-decoration: none;
+    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
+  }
+  .nav-link:hover { background: var(--surface-hover); color: var(--text); }
+  .nav-link[aria-current] { color: var(--brand); background: var(--brand-soft); }
+
+  /* --- Sidebar ------------------------------------------------------------ */
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-3);
+  }
+  .sidebar-group { font-size: var(--text-xs); font-weight: 620; color: var(--text-faint); padding: var(--space-3) var(--space-3) var(--space-1); }
+  .sidebar-link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-block-size: 40px;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--r-sm);
+    color: var(--text-muted);
+    font-size: var(--text-sm);
+    font-weight: 540;
+    text-decoration: none;
+    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
+  }
+  .sidebar-link:hover { background: var(--surface-hover); color: var(--text); }
+  .sidebar-link[aria-current] { background: var(--brand-soft); color: var(--brand-soft-text); font-weight: 600; }
+  .sidebar-link .push { margin-inline-start: auto; }
+}