/* ============================================================================
   FAHO — Tactical Command theme
   Dark olive command-post aesthetic. Single typeface throughout: UAFSans (the
   Armed Forces of Ukraine face) — no fallbacks, used for display, body and the
   former-mono readouts alike. Soft rounded panels, signal-amber accents.
   ========================================================================== */

/* Colours live in themes.css (the single source); only theme-agnostic tokens
   — geometry and fonts — are defined here. */
:root {
  --radius: 3px;       /* general controls — buttons, inputs, badges */
  --radius-sm: 3px;
  --radius-lg: 3px;    /* panels & stat cards — the soft rounded surfaces */
  --radius-pill: 3px; /* status chips, tags, roster pills */

  /* Narrowest a panel in a multi-panel row may get before the row reflows. Shared
     by the role editor's column flow and the access-group editor's panel pair —
     they are different layout mechanisms answering to the same measurement, and
     these used to be one rule specifically so the number could not drift. */
  --panel-col: 320px;

  /* Widest a *single* column of panels grows before the forms and readouts inside it
     stop being readable — a `.dl` whose values start at 200px reads as a stretched
     table across a 1400px screen. Here for the same reason as `--panel-col` above:
     the settings page applies it to two different layouts (its one-column tabs and
     its first tab collapsed to one track), and the two must not drift apart. */
  --panel-measure: 880px;

  /* One typeface everywhere — UAFSans, no fallbacks. All three roles resolve to
     the same family so display, body and former-mono contexts are identical. */
  --font-display: "UAF Sans";
  --font-mono: "UAF Sans";
  --font-body: "UAF Sans";

  /* ── Paper: the background layers a flat surface lays over its own fill ──────
     Two tokens, and the difference between them is what the surface IS:

       --paper    the speckle alone. What the PAGE takes: a wash sized to the
                  document is a gradient nobody can see the ends of.
       --surface  the speckle plus the wash. What a CARD takes — every
                  panel-like surface in the app, each naming only its own fill:
                  `background: var(--surface), var(--panel)`.

     Layer *lists* rather than a helper class, because a fill and its texture are
     one declaration: a class setting `background` would give every card two
     answers to «what colour am I», and which won would depend on the order of the
     stylesheet list — see the header of `common/shell/_styles.html` for why that
     order is not something to make a rule depend on.

     `--grain` (the specks) and `--lift` / `--shade` (the two neutral wash stops)
     are colours and live in themes.css, per mode — and, for the khaki drab
     chrome, per surface. Here is only the geometry: how big the tile is, and that
     the light comes from the top.

     140px is a compromise: large enough that the eye reads texture rather than a
     pattern, small enough that the browser rasterises one small tile.

     The wash is TWO stops and no more, so it runs the full height of whatever box
     it is in, evenly, and the sheet reads as one plane tilted into the light. It
     used to hold the highlight and the shadow to the outer thirds with a flat band
     between them, which on a 100vh sidebar drew a bright cap and a dark foot with
     nothing joining them — two effects rather than one surface.

     The type's half of this is `text-shadow: var(--letterpress)` — see base/relief.css. */
  --paper: var(--grain) 0 0 / 140px 140px repeat;
  --surface: var(--paper), linear-gradient(180deg, var(--lift), var(--shade));
}

/* Repaint smoothly when the theme switches (disabled under reduced-motion). */
:root { --theme-transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
@media (prefers-reduced-motion: reduce) { :root { --theme-transition: none; } }
body, .sidebar, .panel, .stat, .btn, input, select, textarea, .badge, th, .topbar {
  transition: var(--theme-transition);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* The page's own scrollbar is not drawn — and, the load-bearing half, takes no width
   either, so opening a modal (which locks the root via `html.modal-open`,
   components/tags.css) cannot shift the page sideways.

   That guarantee used to be arranged the other way round: `overflow-y: scroll` +
   `scrollbar-gutter: stable` kept a bar permanently on screen precisely so there was
   always one to keep. A gutter that is never occupied gives the same promise without a
   strip down the right of every screen. The page scrolling is not something the app has
   to advertise — unlike the framed inner scrollers below, whose whole point is that
   there is more inside the box. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }

body {
  font-family: var(--font-body);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  /* The page is the sheet everything else is laid on: the speckle, and not the
     wash — `--surface` would size a gradient to the whole document. See above. */
  background: var(--paper), var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* `.btn` etc. set display, which would otherwise win over the `hidden` attribute. */
[hidden] { display: none !important; }

::selection { background: color-mix(in srgb, var(--signal) 30%, transparent); }

/* ── Scrollbars ───────────────────────────────────────────────────────────────
   Everything that scrolls keeps its bar, but leaves it unpainted until the pointer is
   on the thing that scrolls (`:focus-within` is the keyboard's half of the same
   reveal). The affordance is wanted at the moment somebody is about to scroll, not as
   a lit strip down the sidebar all day.

   Revealed on hover rather than removed outright, because three of these scrollers —
   the check-tree box, a picker's results, the import rules — are framed panels whose
   content is *meant* to be read past the fold, and layout/responsive.css records what a
   scroller with no affordance already cost once: the drawer's last three sections, i.e.
   the administrative half of the navigation, reachable only by guessing you could drag.

   Both spellings are here on purpose. `scrollbar-color` is the standard one (Chrome
   121+, Safari 18.2+, Firefox); the WebKit pseudo-elements are what older Safari still
   reads. And note *that* pair is how the permanent bars got here in the first place:
   defining `::-webkit-scrollbar` at all opts macOS out of its own fading overlay bars,
   so the resting state has to be transparent rather than merely thin. */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover, *:focus-within { scrollbar-color: var(--border-bright) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
*:hover::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb { background: var(--border-bright); }