@font-face {
  font-family: "Roboto";
  src: url("/img/roboto-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
    --page-bg: #0d0f14;
    /* mains */
    --nux-accent-color: 55, 181, 255;        /* pvi light blue: tabs, headings */
    --nux-background-color: 29, 29, 31;      /* charcoal page */
    --nux-text-color: 255, 255, 255;         /* pvi body text is pure white */
    --nux-surface-mult: 2;
    --nux-border-mult: 2;
    --nux-accent-mult: 1.5;
    --nux-contrast-mult: 1.5;
    --nux-shadows-opacity: 0.4;
    --nux-shadow-mult: 0.2;

    --nux-color-scheme: dark;

    --nux-block-bg-1: #2c2c2e;
    --nux-block-bg-2: #303032;
    --nux-block-bg-3: #343436;
    --nux-block-bg-4: #38383a;

    --nux-field-bg: #303032;
    --nux-field-bg-hover: #363638;
    --nux-field-bg-active: #2c363e;
    --nux-field-line: #4f4f4f;
    --nux-field-line-hover: #6f6f6f;

    --nux-caption-color: #818181;
    --nux-caption-active-color: #519cda;
    --nux-block-stripe-color: transparent;
    --nux-block-stripe-nested-color: #242f39;
}
nux-block {
    background-image: none;
}
nux-block,
nux-block nux-block {
    --nux-block-stripe-width: 0.2rem;
}

/* ── <span> inside nux ──────────────────────────────────────────────────────
   nux resets the CONTENTS of its containers with a wildcard — `nux-row *`,
   `nux-list *`, `nux-tabs *`, `nux-elm *`, `nux-block *`, `nux-modal *` …
   (nux.css 229 and again at 1771): padding and margin zeroed, font-size 1rem,
   line-height 1.2. That is aimed at the markup inside its OWN components, but
   a module's explanatory note is a bare `ƒ.row(_N('span', …))` and the wildcard
   flattens it too — whole sentences set at 1.2 line-height, sitting flush
   against the block edge while every field beside them carries nux-elm's
   0.6rem of padding.

   ⚠️ nux NEVER emits or styles a <span>: the string does not occur once in
   nux.min.js or nux.min.css. So span is ours alone, and a rule on it cannot
   reach inside a component — which is what makes this safe to do globally.
   ⚠️ It has to be `nux-row span`, never a bare `span`: the wildcard reset is
   (0,0,2) and a lone element selector is (0,0,1), so a bare rule would simply
   lose however far down the file it sat. At EQUAL specificity the later sheet
   wins, and index.html links global.css after nux.min.css. Module CSS is
   spliced in after both (server.js, `<style id="p7css">`), so a module can
   still override any of this — and an inline $style always could.

   The numbers are nux's own note recipe (`nux-tabpanel > p`, nux.css 2468), so
   a note reads the same whichever of the two elements it is written as. Colour
   is deliberately NOT set: the modules dim these with an inline `opacity`, and
   a dimmed colour underneath that would stack into a whisper. */
nux-row span,
nux-block span,
nux-tabpanel span,
nux-modbody span {
    font-size: 0.86rem;
    line-height: 1.45;
}

/* ⚠️ The OTHER job a span does here is the wrapper a list's displayFn returns
   (the completeness pips, a coloured money cell) — that one is not a note and
   must keep the cell's own metrics. These are the leaf components that own
   their innards; the containers above are layout. Same specificity, later in
   the file, so a span nested inside one of these wins back `inherit`. Keep
   nux-row / nux-block / nux-rearrange OUT of this list — they are layout, and
   a note inside one is still a note. */
nux-elm span,
nux-list span,
nux-buttons span,
nux-switches span,
nux-tablist span {
    font-size: inherit;
    line-height: inherit;
}

/* A note that IS the row reads as a paragraph: line it up with the text in the
   fields above and below it, and let it take the width it is given.
   ⚠️ `1 1 auto`, not `1 1 100%` — the map dialog's coordinate readout shares a
   row with the two zoom buttons and belongs on their line, not under them. */
nux-row > span {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 0.6rem;
}

/* Boot splash — held invisible for the first 30% of the animation, so a channel
   that comes up quickly replaces it before it was ever seen; only a slow one
   fades it in. Modules clear document.body when they render. */
boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    animation: bootfade 1.2s ease-in both;
}
boot .bootlogo {
    width: 12rem;
    max-width: 60vw;
}
boot .boot-text {
    margin: 0;
    min-height: 1.2em;
    color: #b9c0cc;
    font-size: 0.85rem;
    text-align: center;
}
@keyframes bootfade {
    0%, 30% { opacity: 0; }
    100%    { opacity: 1; }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--page-bg);
  color: rgb(var(--nux-text-color));
  font: 15px/1.5 Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}