/* Base HTML & Body */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Interactive-state highlight colours (bug: several native/UA affordances
 * were never wired to this app's own accent, so they fell back to the
 * browser's default blue on macOS/Chromium — buttons, selects, canvases and
 * any other focusable element with no dedicated `:focus` rule, plain-text
 * selection, and the mobile tap flash). --accent-color's own doc comment in
 * 01-variables.css already calls it out as "used only for interactive state
 * (focus/active/selected...)", so this restores that intent app-wide
 * instead of leaving it to whichever component happened to override focus
 * itself. Every element-specific `:focus`/`:focus-visible` rule elsewhere in
 * these files is more specific than the bare selectors below and continues
 * to win where it exists; this only fills the gaps.
 *
 * `:focus { outline: none }` + `:focus-visible { outline: ... }` (rather
 * than styling `:focus` directly) means a mouse click no longer draws a
 * ring at all, while Tab/keyboard focus still gets a clearly visible one —
 * satisfying "never remove focus indication for keyboard users" without
 * reintroducing a ring on every click.
 */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

::selection {
    background: var(--accent-color);
    color: var(--bg-color);
}

html {
    /* Not inherited by default in every engine the way normal CSS
       properties are, but WebKit/Blink apply it down the subtree from
       wherever it's set, so one declaration here covers every element that
       doesn't already set its own (a few touch-specific spots already did,
       redundantly but harmlessly, before this existed). */
    -webkit-tap-highlight-color: transparent;
    /* Baseline for any native form control (checkbox/radio/range/progress)
       that isn't already fully custom-styled — every current range input
       in this app already overrides `appearance` and its thumb/track
       colours directly, so this is a defensive fallback rather than a
       visible change today. */
    accent-color: var(--accent-color);
}

body { 
    font-family: "Noto Sans", sans-serif; 
    background: var(--bg-color); 
    color: var(--text-primary); 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    min-height: 100%;
}

/* Headings */
h1, h2, h3 { 
    font-family: "JetBrains Mono", "SF Mono", "Roboto Mono", Menlo, Monaco, "Courier New", monospace; 
    letter-spacing: 1.8px;
}

h1 { 
    text-align: center; 
    color: var(--accent-color); 
    margin: 4px 0; 
    font-size: 1.1em; 
}

/* Hidden utility */
.hidden {
    display: none;
}