/* Nosum UI theme (docs/adr/ADR-017): the only file with colours, sizes and fonts.
   The shared controls read these variables; panels use the controls and add none of their own.
   The sprites (--nosum-img-*) are published by nosum-theme.js; without them the controls fall back to plain borders. */

/* The UI font: VT323, a 5 x 7 pixel font (SIL OFL 1.1, fonts/OFL-VT323.txt) with every Vietnamese diacritic. Bundled, never fetched from a CDN. */
@font-face {
    font-family: "VT323";
    src: url("fonts/VT323-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

:root {
    /* One UI pixel in CSS pixels = one WORLD pixel (engine zoom of the open map, ADR-017 D2). nosum-theme.js recomputes it on resize;
       these are the values it would pick for common sizes, used until the script ran. */
    --u: 3px;

    /* One pixel of the UI font in CSS pixels (about 2/3 of --u, whole numbers only). A VT323 pixel is 0.08 em, so a size is 12.5 * --tp. */
    --tp: 2px;

    --nosum-font: "VT323", "Courier New", monospace;

    /* Type scale. Everything in the UI is one of these three; sizes are whole font pixels so glyphs never blur. */
    --nosum-fs-title: calc(var(--tp) * 12.5 + 12.5px);
    --nosum-fs-body: calc(var(--tp) * 12.5);
    --nosum-fs-small: calc(max(var(--tp) - 1px, 2px) * 12.5);
    --nosum-lh: calc(var(--tp) * 11);

    /* Parchment and wood, sampled from MenuTiles.png. */
    --nosum-parchment: #fdbc6e;
    --nosum-parchment-deep: #ecac66;
    --nosum-cream: #ffe4a1;
    --nosum-edge: #853605;
    --nosum-wood: #b14e05;
    --nosum-wood-light: #dc7b05;
    --nosum-gold: #fa9305;
    --nosum-line: #d49667;

    /* Text. Every text colour is at least 4.5:1 on the parchment and its deeper shade (WCAG AA, ADR-033 D4); tests/…/ThemeContrastTests checks it. */
    --nosum-ink: #4a2209;
    --nosum-ink-soft: #6b3a12;
    --nosum-ink-faint: #6d3c13;
    --nosum-ink-on-dark: #fff3d6;
    --nosum-heading: #7a3204;

    /* Meaning. */
    --nosum-danger: #8a0023;
    --nosum-danger-bg: rgba(150, 0, 39, 0.14);
    --nosum-ok: #235211;
    --nosum-ok-bg: rgba(47, 107, 23, 0.16);
    --nosum-warn: #a86400;
    --nosum-focus: #be3248;

    /* Surfaces. */
    --nosum-slot-bg: rgba(120, 58, 8, 0.2);
    --nosum-backdrop: rgba(26, 12, 2, 0.4);
    --nosum-shine: rgba(255, 244, 214, 0.55);

    /* Layout: one grid. Gaps are 2 u inside a group, 4 u between groups; the screen edge is 4 u. */
    --nosum-gap: calc(var(--u) * 2);
    --nosum-gap-group: calc(var(--u) * 4);
    --nosum-gutter: calc(var(--u) * 4);

    /* The menu window is 200 u wide and as tall as its page (at least min-h, at most h; longer pages scroll inside). Its top edge is fixed
       (the tabs never move), see hud-center. */
    --nosum-menu-w: calc(var(--u) * 200);
    --nosum-menu-h: calc(var(--u) * 186);
    --nosum-menu-min-h: calc(var(--u) * 64);
}

html,
body {
    margin: 0;
    height: 100%;
    background: #000;
    overflow: hidden;
    font: 400 var(--nosum-fs-body) / var(--nosum-lh) var(--nosum-font);
    cursor: var(--nosum-cursor, default);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: none;
}

* {
    scrollbar-color: var(--nosum-wood) transparent;
    scrollbar-width: thin;
}

/* The page heading takes focus on navigation (FocusOnNavigate); it is not a control. */
h1[tabindex="-1"]:focus {
    outline: none;
}

/* A pixel-sized focus ring for anything that can be reached with the keyboard. */
:focus-visible {
    outline: var(--u) solid var(--nosum-focus);
    outline-offset: var(--u);
}

@keyframes nosum-blink {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

/* The one tooltip (created and moved by nosum-theme.js for any element with data-tip). First line is the name, the rest the description. */
#nosum-tip {
    --tip-edge: calc(var(--u) * 4);

    position: fixed;
    z-index: 100;
    box-sizing: border-box;
    max-width: calc(var(--u) * 90);
    padding: calc(var(--u) * 1) calc(var(--u) * 2);
    border: var(--tip-edge) solid var(--nosum-edge);
    border-image: var(--nosum-img-panel) 16 / var(--tip-edge) stretch;
    background: var(--nosum-parchment) padding-box;
    color: var(--nosum-ink);
    font: 400 var(--nosum-fs-body) / var(--nosum-lh) var(--nosum-font);
    image-rendering: pixelated;
    white-space: pre-line;
    pointer-events: none;
    visibility: hidden;
}

#nosum-tip.shown {
    visibility: visible;
}

#nosum-tip .tip-name {
    display: block;
    color: var(--nosum-heading);
}

#nosum-tip .tip-text {
    display: block;
    color: var(--nosum-ink-soft);
    font-size: var(--nosum-fs-small);
}

/* High contrast (settings page, ADR-033 D4): the darkest ink for every text colour, a thicker focus ring. */
:root[data-contrast="high"] {
    --nosum-ink: #140902;
    --nosum-ink-soft: #240f04;
    --nosum-ink-faint: #2c1405;
    --nosum-heading: #3d1300;
    --nosum-danger: #6b0017;
    --nosum-ok: #123a08;
    --nosum-focus: #7a0018;
}

:root[data-contrast="high"] :focus-visible {
    outline-width: calc(var(--u) * 2);
}

/* Reduced motion: the system preference, or the switch on the settings page. No animation runs longer than a single frame. */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

:root[data-motion="reduced"] * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}