/* GENERATED by tests/visual/tools/bundle-css.mjs, do not edit. Mock ref da6c2fe. Flavour: chrome.
 * e858beda7792904f9fc43e8d7af4a0b236f5dd2d9de4fdc0770d5c959d93c2b4  base.css
 */
/* Luma styles buttons and fields globally. Reverting them to the browser defaults reproduces the environment the mock CSS was written for; component rules (higher specificity) and the reset below still apply. */
.dv-chrome button, .dv-chrome input, .dv-chrome select, .dv-chrome textarea { all: revert; box-sizing: border-box; }

/* =========================================================================
   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). */

.dv-chrome *, .dv-chrome *::before, .dv-chrome *::after { box-sizing: border-box; }

.dv-chrome h1, .dv-chrome h2, .dv-chrome h3, .dv-chrome h4, .dv-chrome h5, .dv-chrome p, .dv-chrome figure, .dv-chrome blockquote, .dv-chrome dl, .dv-chrome dd, .dv-chrome ul, .dv-chrome ol { margin: 0; }

.dv-chrome ul[role="list"], .dv-chrome ol[role="list"], .dv-chrome .dv-list { list-style: none; padding: 0; }

.dv-chrome img { display: block; max-width: 100%; }

.dv-chrome img { height: auto; }

.dv-chrome input, .dv-chrome button { font: inherit; color: inherit; }

.dv-chrome button { cursor: pointer; }

/* Mode: html[data-theme] (include.js). Light is the default look; dark and auto resolve the --dv-* and --mg-* light-dark() roles. */

.dv-chrome 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); }

.dv-chrome a:active { text-decoration-thickness: var(--s-rule-w-2); }

.dv-chrome h1, .dv-chrome h2, .dv-chrome h3, .dv-chrome h4, .dv-chrome h5 { font-weight: var(--s-weight-strong); }

.dv-chrome h1, .dv-chrome h2, .dv-chrome h3, .dv-chrome h4 { overflow-wrap: anywhere; }

.dv-chrome :focus-visible { outline: var(--s-ring-w) solid var(--s-focus-on-light); outline-offset: var(--s-ring-offset); }

.dv-chrome .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-chrome .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-chrome .dv-skip:focus-visible { transform: none; }

.dv-chrome .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-chrome .dv-icon--sm { width: var(--p-16); height: var(--p-16); }

.dv-chrome .dv-icon--lg { width: var(--p-24); height: var(--p-24); }

/* ---- Frames ------------------------------------------------------------ */

.dv-chrome .dv-wrap { width: min(100% - 2 * var(--s-gutter), var(--s-wrap)); margin-inline: auto; }

.dv-chrome .dv-muted { color: var(--s-text-muted); }

.dv-chrome .is-dark .dv-muted { color: var(--s-text-on-dark-muted); }

/* ---- 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-chrome button.dv-more { background: none; border: 0; padding: 0; cursor: pointer; text-align: start; }

/* ---- 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-chrome .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-chrome .dv-btn:hover { background: var(--c-btn-hover-bg); border-color: var(--c-btn-hover-bg); }

.dv-chrome .dv-btn:active { transform: translateY(var(--p-1)); }

.dv-chrome .dv-btn.is-secondary { background: transparent; color: var(--s-text); border-color: var(--s-text); }

.dv-chrome .dv-btn.is-secondary:hover { background: var(--s-text); color: var(--s-surface); border-color: var(--s-text); }

.dv-chrome .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-chrome .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); }

.dv-chrome .is-dark .dv-btn.is-inverse, .dv-chrome .dv-btn.is-inverse { background: var(--c-btn-inverse-bg); color: var(--c-btn-inverse-fg); border-color: var(--c-btn-inverse-bg); }

.dv-chrome .dv-btn.is-inverse:hover { background: var(--p-slate-200); border-color: var(--p-slate-200); color: var(--p-navy-900); }

.dv-chrome .dv-btn.is-inverse-outline { background: transparent; color: var(--s-text-on-dark); border-color: var(--s-text-on-dark); }

.dv-chrome .dv-btn.is-inverse-outline:hover { background: var(--p-white-a24); border-color: var(--s-text-on-dark); }

.dv-chrome .dv-btn:disabled, .dv-chrome .dv-btn[aria-disabled="true"], .dv-chrome .dv-btn:disabled:hover, .dv-chrome .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-chrome .dv-btn.is-block { width: 100%; }

.dv-chrome .dv-btn.is-sm { min-height: var(--s-target); padding-inline: var(--s-sp-4); }

.dv-chrome .dv-btn__label { display: inline-flex; align-items: center; gap: var(--s-sp-2); }

.dv-chrome .dv-btn .dv-btn__done { display: none; }

.dv-chrome .dv-btn.is-done .dv-btn__label { display: none; }

.dv-chrome .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-chrome .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-chrome .dv-iconbtn:hover { background: var(--c-hover-tint); }

.dv-chrome .dv-iconbtn:active { transform: translateY(var(--p-1)); }

.dv-chrome .dv-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.dv-chrome .is-dark .dv-iconbtn:hover { background: var(--p-white-a12); }

/* ---- Chip (44 px tall, toggle) -------------------------------------------------- */

.dv-chrome .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-chrome .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-chrome .dv-chip:hover { border-color: var(--s-text); background: var(--c-hover-tint); }

.dv-chrome .dv-chip:active { transform: translateY(var(--p-1)); }

.dv-chrome .dv-chip[aria-pressed="true"]:hover, .dv-chrome .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-chrome .dv-chip[aria-pressed="true"], .dv-chrome .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-chrome .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-chrome .dv-badge.is-in { background: var(--c-chip-in); }

.dv-chrome .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-chrome .dv-badge.is-warn { background: var(--c-chip-warn); }

.dv-chrome .dv-badge.is-info { background: var(--c-chip-info); }

/* ---- Overlay base: hairline + one elevation token (O-Q4 variants A / B) ---------- */

.dv-chrome .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); }

.dv-chrome [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .dv-chrome *, .dv-chrome *::before, .dv-chrome *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
    .dv-chrome .dv-btn:active { transform: none; }
  }

.dv-chrome .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-chrome .dv-nowrap { white-space: nowrap; }

.dv-chrome .is-dark .dv-overlay :focus-visible { outline-color: var(--s-focus-on-light); }

.dv-chrome .is-dark .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). */
@keyframes dv-rise { from { opacity: 0; transform: translateY(var(--p-8)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  }

/* 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. */
@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. */

/* hand-authored tail (bundles.json) */
.dv-chrome { color: var(--s-text); font: var(--t-body); font-synthesis: none; -webkit-font-smoothing: antialiased; }
/* Luma resets bleed into the chrome: list items and definition terms carry margins there. Chrome follows the OS colour scheme on Luma routes (the body below stays light). */
.dv-chrome li, .dv-chrome dt { margin: 0; }
body:not(.dv-page) .dv-chrome { color-scheme: light dark; }