/* base.css — reset, document, scrollbars, focus and selection. */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:root[data-theme="light"] { color-scheme: light; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: var(--text-1);
  background: var(--bg-1);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}
#w2-root { position: fixed; inset: 0; overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
svg.ui-icon { display: inline-block; flex: none; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--selection); color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
kbd { font-family: var(--font-ui); }
.ui-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabular, .ui-tabular { font-variant-numeric: tabular-nums; }

/* scrollbars: slim, warm, never loud */
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid transparent; background-clip: padding-box; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: padding-box; border: 3px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* the eyebrow and running head (§9.1; R9 plan §2.2.1 and the approved comps): true small capitals in the reading serif, 11 px,
   +.06em. Palatino Linotype draws real small caps (the glyph check, G0.D); a world that wants tracked uppercase (the Counting
   House) scopes its own rule in designs.css. The size follows --font-scale. */
.w2-eyebrow {
  font-family: var(--font-serif);
  font-size: calc(11px * var(--font-scale));
  font-weight: var(--fw-medium);
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--text-3);
}
.w2-noscript { padding: 40px; font-family: var(--font-serif); color: var(--text-1); }

/* the boot splash */
.w2-splash { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; background: radial-gradient(ellipse at 30% 20%, rgba(212, 169, 79, .08), transparent 60%), var(--bg-1); }
.w2-splash__seal { width: 72px; height: 72px; animation: w2-breathe 2.4s var(--ease-inout) infinite; filter: drop-shadow(0 6px 24px rgba(212, 169, 79, .25)); }
.w2-splash__title { font-family: var(--font-serif); font-size: var(--fs-xl); letter-spacing: .02em; color: var(--text-2); }
@keyframes w2-breathe { 0%, 100% { opacity: .75; transform: scale(.97); } 50% { opacity: 1; transform: scale(1); } }

@keyframes w2-spin { to { transform: rotate(360deg); } }
@keyframes w2-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes w2-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes w2-flash { 0% { background-color: var(--accent-weak); box-shadow: 0 0 0 3px var(--accent-weak); } 100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; } }
.is-flash { animation: w2-flash 1.4s var(--ease-out); border-radius: var(--r-1); }

:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}
:root[data-motion="reduced"] .ui-spinner, :root[data-motion="reduced"] .w2-splash__seal { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }

/* printing: only .w2-print-root is shown (os.print) */
.w2-print-root { display: none; }
@media print {
  html.w2-printing, html.w2-printing body { overflow: visible !important; height: auto !important; background: #fff !important; color: #111 !important; }
  html.w2-printing #w2-root, html.w2-printing body > *:not(.w2-print-root) { display: none !important; }
  html.w2-printing .w2-print-root { display: block !important; color: #111; font-family: var(--font-serif); }
  /* paper is white whatever the theme: the printed clone takes the light (Parchment & Ink) token values, so nothing
     token-coloured comes out near-white on white (round 1 — printing from the dark theme) */
  html.w2-printing .w2-print-root {
    color-scheme: light;
    --bg-0: #fff; --bg-1: #fff; --bg-2: #fff;
    --surface-1: #fff; --surface-2: #fff; --surface-3: #fff; --surface-solid: #fff; --surface-content: #fff;
    --surface-sunken: #f4f1ea;
    --line-1: rgba(27, 34, 51, .14); --line-2: rgba(27, 34, 51, .22); --line-3: rgba(27, 34, 51, .32);
    --text-1: #111; --text-2: #333; --text-3: #555; --text-4: #777; --text-on-accent: #fff;
    --ok: #1b714a; --ok-bg: rgba(39, 122, 82, .1); --warn: #8d5800; --warn-bg: rgba(149, 96, 10, .1);
    --danger: #b8322a; --danger-bg: rgba(184, 50, 42, .08); --info: #2866ac; --info-bg: rgba(47, 109, 179, .08);
    --flag-family: #8d3fa3; --flag-family-bg: rgba(141, 63, 163, .08); --flag-verified: #1b7a5a; --flag-checked: #4e774b;
    --flag-pending: #6b7385; --flag-retired: #8a8a93; --flag-urgent: #b44f0c; --flag-live: #1f6fb0;
    --chart-1: #956e1e; --chart-2: #1f7a6d; --chart-3: #2d5fbf; --chart-4: #a4382c; --chart-5: #5b8a4a; --chart-6: #56627a;
    /* Vellum Day and the path tints, as in the light theme (the plate numeral on a printed tint is light ink) */
    --surface-paper: #fff; --text-paper: #111;
    --path-1: var(--chart-3); --path-2: var(--chart-4); --path-3: var(--chart-1); --path-4: #457276; --path-5: #4d4b6e;
    --path-6: #795965; --path-7: #6a6c45; --path-8: #68625b; --path-f: var(--chart-6);
    --accent: #6b4f12; --accent-strong: #573f0c; --accent-weak: rgba(107, 79, 18, .08); --accent-ring: rgba(107, 79, 18, .3);
    --shadow-1: none; --shadow-2: none; --shadow-3: none; --selection: transparent;
  }
  .w2-print-root pre, .w2-print-root code { background: #f4f1ea !important; color: #111 !important; }
  .w2-print-root * { box-shadow: none !important; text-shadow: none !important; }
  .w2-print-root__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #999; padding-bottom: 6px; margin-bottom: 6px; }
  .w2-print-root__title { font-family: var(--font-ui); font-size: 14pt; font-weight: 600; }
  .w2-print-root__meta, .w2-print-root__conf, .w2-print-root__foot { font-family: var(--font-ui); font-size: 8pt; color: #555; }
  .w2-print-root__conf { margin-bottom: 14px; letter-spacing: .04em; }
  .w2-print-root__foot { margin-top: 18px; border-top: 1px solid #bbb; padding-top: 6px; }
  .w2-print-root .ui-md { max-width: none; color: #111; }
  .w2-print-root a { color: #111; }
  .w2-print-root .ui-token { border: 1px solid #aaa; background: none !important; color: #111 !important; }
  /* round 3 (Appendix Q.4): the module-root wrapper lets `.m-<id> …` print rules match; its own box never shapes the
     page (a root rule such as display:grid, height:100% or overflow:hidden would clip or squeeze the printout) */
  .w2-print-root .w2-print-module {
    display: block !important; position: static !important; inset: auto !important; height: auto !important;
    min-height: 0 !important; max-height: none !important; overflow: visible !important; transform: none !important;
    padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important;
  }
  /* a content button printed as a span keeps its words, never a control's chrome */
  .w2-print-root .w2-print-btn { background: none !important; border-color: transparent !important; cursor: auto; }
  /* a chip that was a button keeps a word space from what follows it ("rule (a) These …", not "rule (a)These …") */
  .w2-print-root .w2-print-btn:not(:last-child) { margin-inline-end: .3em; }
}

/* ══ Round 3 (WP-ACCESS) — reduced transparency, high contrast, forced colours ═══════════════════════════════════ */
/* glass off everywhere (the shell, the kit and every module): opaque tokens come from tokens.css */
:root[data-transparency="reduced"] *, :root[data-transparency="reduced"] *::before, :root[data-transparency="reduced"] *::after {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* high contrast: a thicker, offset focus ring that never hides behind an element's own border */
:root[data-contrast="high"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:root[data-contrast="high"] input:focus-visible, :root[data-contrast="high"] textarea:focus-visible, :root[data-contrast="high"] select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
:root[data-contrast="high"] ::selection { color: var(--text-1); }
:root[data-contrast="high"] a { text-decoration: underline; text-underline-offset: 2px; }
:root[data-contrast="high"] * { text-shadow: none; }
:root[data-contrast="high"] { scrollbar-color: var(--text-3) transparent; }
:root[data-contrast="high"] ::-webkit-scrollbar-thumb { background: var(--text-3); background-clip: padding-box; }

/* Windows forced colours (a Windows contrast theme): the browser repaints every colour from the user's palette.
   Shadows and backgrounds that carried meaning disappear, so the shell restores it with real lines in system
   colours; states that were only a tint get a Highlight outline. */
@media (forced-colors: active) {
  :focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; }
  .w2-wallpaper > div { display: none; }
  .w2-window { border: 1px solid CanvasText !important; }
  .w2-window.is-focused { border: 2px solid Highlight !important; }
  .w2-titlebar { border-bottom: 1px solid CanvasText; }
  .w2-taskbar, .w2-start, .w2-palette, .w2-centre, .w2-flyout, .w2-preview, .w2-toast, .w2-scenes, .w2-keys, .w2-wg, .w2-wg-gallery,
  .ui-menu, .ui-dialog, .ui-tooltip, .ui-popover, .w2-auth__card, .w2-lock__card { border: 1px solid CanvasText !important; }
  .is-active, .is-selected, .is-current, [aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"]) {
    outline: 2px solid Highlight; outline-offset: -2px;
  }
  .w2-status-dot { forced-color-adjust: none; border: 1px solid CanvasText; }   /* its hue is the message (with its label) */
  .ui-badge, .ui-token, .w2-tray__count, .w2-titlebar__badge, .w2-gtab__badge { border: 1px solid CanvasText; }
  .w2-wg-ghost, .w2-snap-preview { border: 2px dashed Highlight !important; background: Canvas !important; }
  svg.ui-icon { forced-color-adjust: auto; }
}