/* GENERATED by tests/visual/tools/bundle-css.mjs, do not edit. Mock ref da6c2fe. Flavour: page.
 * e858beda7792904f9fc43e8d7af4a0b236f5dd2d9de4fdc0770d5c959d93c2b4  base.css
 */
/* =========================================================================
   Base: fonts, reset, element defaults and the shared patterns every partial uses
   (container, section, ledger head, button, chip, field, icon, overlay, utilities).
   Tokens only: no colour, size or radius literal (scan.mjs).
   Layer order is declared once in each page <head>: @layer reset, tokens, base, components, utilities;
   ========================================================================= */

/* Graphik, Devir's own typeface (owner O-Q2). Only the two files that exist: 400 and 900. */
/* Comic Hunter (Maldito display face, Diana). One weight, declared 400-900 so a role asking for 900 never gets synthetic bold. Web licence UNCONFIRMED: local mock use only (fonts/NOTICE.md). */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[role="list"], ol[role="list"], .dv-list { list-style: none; padding: 0; }
  img, svg, picture { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
}

@layer base {
  /* Mode: html[data-theme] (include.js). Light is the default look; dark and auto resolve the --dv-* and --mg-* light-dark() roles. */
  html { color-scheme: light; }
  html[data-theme="dark"] { color-scheme: dark; }
  html[data-theme="auto"] { color-scheme: light dark; }

  body {
    min-height: 100dvh;
    background: var(--s-surface);
    color: var(--s-text);
    font: var(--t-body);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }

  a { color: inherit; text-decoration-color: var(--s-accent); text-underline-offset: var(--p-4); transition: color var(--s-dur) var(--s-ease), text-decoration-color var(--s-dur) var(--s-ease), background-color var(--s-dur) var(--s-ease); }
  a:active { text-decoration-thickness: var(--s-rule-w-2); }
  h1, h2, h3, h4, h5, h6, b, strong, th, dt { font-weight: var(--s-weight-strong); }
  h1, h2, h3, h4 { overflow-wrap: anywhere; }

  :focus-visible { outline: var(--s-ring-w) solid var(--s-focus-on-light); outline-offset: var(--s-ring-offset); }
  .is-dark :focus-visible { outline-color: var(--s-focus-on-dark); }

  /* Skip link: out of flow so it never adds to the header height. */
  .dv-skip { position: absolute; inset-inline-start: var(--s-sp-4); inset-block-start: 0; z-index: 90; padding: var(--s-sp-3) var(--s-sp-4); background: var(--s-surface); color: var(--s-text); transform: translateY(-120%); }
  .dv-skip:focus-visible { transform: none; }

  .dv-icon { flex: none; width: var(--p-20); height: var(--p-20); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .dv-icon--sm { width: var(--p-16); height: var(--p-16); }
  .dv-icon--lg { width: var(--p-24); height: var(--p-24); }

  /* ---- Frames ------------------------------------------------------------ */
  .dv-wrap { width: min(100% - 2 * var(--s-gutter), var(--s-wrap)); margin-inline: auto; }
  .dv-section { padding-block: var(--s-section); background: var(--s-surface); color: var(--s-text); }
  .dv-section.is-tint { background: var(--s-surface-tint); }
  .dv-section.is-navy { background: var(--s-surface-navy); color: var(--s-text-on-dark); }
  .dv-section.is-black { background: var(--s-surface-black); color: var(--s-text-on-dark); }
  .dv-section.is-flush-top { padding-block-start: 0; }
  .dv-muted { color: var(--s-text-muted); }
  .is-dark .dv-muted, .is-navy .dv-muted, .is-black .dv-muted { color: var(--s-text-on-dark-muted); }
  .dv-stack { display: grid; gap: var(--s-sp-4); }

  /* ---- Ledger head (the signature): 1 px navy rule, title above, count and
     "View all" right, 24x4 pink tick at the rule's left end. White ground only. ---- */
  .dv-ledger-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-sp-2) var(--s-sp-4);
    padding-block-end: var(--s-sp-3);
    border-block-end: var(--s-rule-w) solid var(--s-rule-strong);
    margin-block-end: var(--s-sp-4);
  }
  .dv-ledger-head::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: calc(-1 * var(--c-tick-h)); width: var(--c-tick-w); height: var(--c-tick-h); background: var(--s-accent); }
  .dv-ledger-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sp-2) var(--s-sp-4); font: var(--t-small); font-variant-numeric: tabular-nums; }
  .dv-more { display: inline-flex; align-items: center; gap: var(--s-sp-1); min-height: var(--s-target); font: var(--t-small); color: var(--s-text); text-decoration: underline var(--s-rule-w-2) var(--s-accent); text-underline-offset: var(--p-6); transition: color var(--s-dur) var(--s-ease); }
  button.dv-more { background: none; border: 0; padding: 0; cursor: pointer; text-align: start; }
  .dv-more:hover { text-underline-offset: var(--p-8); color: var(--s-text); }
  .dv-more:active { text-decoration-thickness: var(--p-3); }

  /* ---- Buttons (D-9): primary navy fill, secondary 2 px navy border, tertiary text, inverse for dark grounds.
     Pink is never a fill (O-2). 48 px, 2 px corners. ------------------------------------ */
  .dv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sp-2);
    min-height: var(--c-btn-h); min-width: var(--s-target);
    padding: var(--s-sp-2) var(--c-btn-pad);
    border: var(--s-rule-w-2) solid var(--c-btn-bg);
    border-radius: var(--s-radius);
    background: var(--c-btn-bg); color: var(--c-btn-fg);
    font: var(--t-button); text-decoration: none; white-space: nowrap;
    transition: transform var(--s-dur) var(--s-ease), background-color var(--s-dur) var(--s-ease), color var(--s-dur) var(--s-ease), border-color var(--s-dur) var(--s-ease), text-decoration-color var(--s-dur) var(--s-ease);
  }
  .dv-btn:hover { background: var(--c-btn-hover-bg); border-color: var(--c-btn-hover-bg); }
  .dv-btn:active { transform: translateY(var(--p-1)); }
  .dv-btn.is-secondary { background: transparent; color: var(--s-text); border-color: var(--s-text); }
  .dv-btn.is-secondary:hover { background: var(--s-text); color: var(--s-surface); border-color: var(--s-text); }
  .dv-btn.is-tertiary { background: transparent; border-color: transparent; color: var(--s-text); text-decoration: underline var(--s-rule-w) currentColor; text-underline-offset: var(--p-4); padding-inline: var(--s-sp-2); }
  .dv-btn.is-tertiary:hover { background: var(--c-hover-tint); border-color: transparent; text-decoration-color: var(--s-accent); text-decoration-thickness: var(--s-rule-w-2); }
  .is-dark .dv-btn.is-inverse, .dv-btn.is-inverse { background: var(--c-btn-inverse-bg); color: var(--c-btn-inverse-fg); border-color: var(--c-btn-inverse-bg); }
  .dv-btn.is-inverse:hover { background: var(--p-slate-200); border-color: var(--p-slate-200); color: var(--p-navy-900); }
  .dv-btn.is-inverse-outline { background: transparent; color: var(--s-text-on-dark); border-color: var(--s-text-on-dark); }
  .dv-btn.is-inverse-outline:hover { background: var(--p-white-a24); border-color: var(--s-text-on-dark); }
  .dv-btn:disabled, .dv-btn[aria-disabled="true"], .dv-btn:disabled:hover, .dv-btn:disabled:active { background: var(--c-btn-disabled-bg); color: var(--c-btn-disabled-fg); border-color: var(--c-btn-disabled-edge); cursor: not-allowed; transform: none; }
  .dv-btn.is-block { width: 100%; }
  .dv-btn.is-sm { min-height: var(--s-target); padding-inline: var(--s-sp-4); }
  .dv-btn__label { display: inline-flex; align-items: center; gap: var(--s-sp-2); }
  .dv-btn .dv-btn__done { display: none; }
  .dv-btn.is-done .dv-btn__label { display: none; }
  .dv-btn.is-done .dv-btn__done { display: inline-flex; align-items: center; gap: var(--s-sp-2); }

  /* ---- Icon button (44 px hit box) ---------------------------------------------- */
  .dv-iconbtn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: var(--s-target); height: var(--s-target); padding: 0; border: 0; background: transparent; color: inherit; border-radius: var(--s-radius); text-decoration: none; transition: transform var(--s-dur) var(--s-ease), background-color var(--s-dur) var(--s-ease), color var(--s-dur) var(--s-ease); }
  .dv-iconbtn:hover { background: var(--c-hover-tint); }
  .dv-iconbtn:active { transform: translateY(var(--p-1)); }
  .dv-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
  .is-dark .dv-iconbtn:hover { background: var(--p-white-a12); }

  /* ---- Chip (44 px tall, toggle) -------------------------------------------------- */
  .dv-chip { display: inline-flex; align-items: center; gap: var(--s-sp-2); min-height: var(--s-target); min-width: var(--s-target); justify-content: center; padding-inline: var(--s-sp-4); border: var(--s-rule-w) solid var(--s-edge); border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-text); font: var(--t-small); text-decoration: none; white-space: nowrap; }
  .dv-chip { transition: background-color var(--s-dur) var(--s-ease), color var(--s-dur) var(--s-ease), border-color var(--s-dur) var(--s-ease), transform var(--s-dur) var(--s-ease); }
  .dv-chip:hover { border-color: var(--s-text); background: var(--c-hover-tint); }
  .dv-chip:active { transform: translateY(var(--p-1)); }
  .dv-chip[aria-pressed="true"]:hover, .dv-chip.is-on:hover { background: var(--c-btn-hover-bg); border-color: var(--c-btn-hover-bg); color: var(--c-btn-hover-fg, var(--c-btn-fg)); }
  .dv-chip[aria-pressed="true"], .dv-chip.is-on { background: var(--s-text); color: var(--s-surface); border-color: var(--s-text); }

  /* ---- Status badge (D-7: 20% tint + navy text, never coloured text on white) ---- */
  .dv-badge { display: inline-flex; align-items: center; gap: var(--s-sp-1); min-height: var(--p-24); padding-inline: var(--s-sp-2); border-radius: var(--s-radius); background: var(--c-chip-bg); color: var(--c-badge-fg); font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; white-space: nowrap; }
  .dv-badge.is-in { background: var(--c-chip-in); }
  .dv-badge.is-out { background: transparent; box-shadow: inset 0 0 0 var(--s-rule-w) var(--s-edge); color: var(--s-text-muted); }
  .dv-badge.is-warn { background: var(--c-chip-warn); }
  .dv-badge.is-info { background: var(--c-chip-info); }

  /* ---- Overlay base: hairline + one elevation token (O-Q4 variants A / B) ---------- */
  .dv-overlay { background: var(--s-surface); color: var(--s-text); border: var(--s-rule-w) solid var(--c-overlay-edge); border-block-start: var(--c-overlay-top-w) solid var(--c-overlay-top); box-shadow: var(--c-overlay-shadow); }
  [hidden] { display: none !important; }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
    .dv-btn:active { transform: none; }
  }
  .dv-sr { position: absolute; width: var(--p-1); height: var(--p-1); margin: calc(-1 * var(--p-1)); padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .dv-nowrap { white-space: nowrap; }
}

@layer base {
  .is-dark .dv-overlay :focus-visible { outline-color: var(--s-focus-on-light); }
  html.is-locked { overflow: hidden; }
}

@layer base {
  .is-dark .dv-overlay .dv-muted, .is-navy .dv-overlay .dv-muted, .is-black .dv-overlay .dv-muted { color: var(--s-text-muted); }
}

/* Scroll reveal: home only, once, 8 px rise, 240 ms, view() timeline, static fallback (DIRECTION motion). */
@layer base {
  @keyframes dv-rise { from { opacity: 0; transform: translateY(var(--p-8)); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .dv-reveal { animation: dv-rise var(--p-dur-reveal) var(--s-ease) both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    }
  }
  .dv-devnote { position: absolute; inset-block-start: var(--s-sp-2); inset-inline-end: var(--s-gutter); padding: var(--p-2) var(--s-sp-2); border: var(--s-rule-w) dashed var(--s-edge); border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-text-muted); font: var(--t-label); z-index: 2; }
  html[data-devnotes="off"] .dv-devnote { display: none; }
  .dv-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(62%, var(--p-240)); gap: var(--s-sp-4); overflow-x: auto; scroll-snap-type: x proximity; padding-block-end: var(--s-sp-2); }
  .dv-rail > * { scroll-snap-align: start; }
  @media (min-width: 768px) {
    .dv-rail { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: var(--s-sp-5); }
  }
  html[data-reveal="off"] .dv-reveal { animation: none; }
  .dv-section { position: relative; }
}

/* No flash, no jump: a page built from partials stays invisible until include.js has mounted all of them (html[data-ready]), then shows complete.
   Hidden nodes are not counted as layout shift. If the scripts fail, the page shows itself after 3 s instead of staying blank. */
@layer base {
  html:has(script[src*="include.js"]):not([data-ready]) body { visibility: hidden; animation: dv-ready-fallback 0s 3s forwards; }
  @keyframes dv-ready-fallback { to { visibility: visible; } }
}

/* Data failure (include.js dataError): the catalogue did not load, so the count, the toolbar and the pager that describe it are hidden and one alert explains it. */
.dv-dataerr { display: grid; gap: var(--s-sp-4); justify-items: start; padding-block: var(--s-sp-8); }
html[data-data-failed] .dv-ledger-head__meta .dv-num,
html[data-data-failed] .dv-toolbar,
html[data-data-failed] nav.dv-pager { display: none !important; }