/* Base layer — the reset, and nothing that is not genuinely foundational.

   Layer order: CSS/tokens.css (palette), then this file (reset, box sizing, element
   defaults), then the page's own <style> (layout, components, theme overrides).

   Small on purpose — h1/h2/h3, `a` and most else differ per page and are not a shared base.
   `:focus-visible`, `::placeholder` and the disabled-control rule stay OFF this file: both
   are (0,1,1) and must load last (sys_design-system.md §2) — a file loaded FIRST would
   invert that and silently un-style every disabled control.

   Verified with _docs/tests/css-resolved-check.py and css-tokens-check.py --rules. */

*{ box-sizing:border-box; }

/* The base layer's answer to `[hidden]` — sys_design-system.md §2. `!important` is the
   point rather than a shortcut: the whole problem is an author `display` winning, and
   nothing else outranks one. Do not add a per-component `[hidden]` rule beside this one. */
[hidden]{ display:none !important; }

html,body{ margin:0; padding:0; }

/* Buttons take the page's font rather than the platform's — sys_design-system.md §2. */
button{ cursor:pointer; font-family:inherit; }

/* Form controls, same reason and same place — sys_design-system.md §2. `optgroup` is
   listed because a grouped <select> draws its headings from its OWN font, not the
   select's. Family only: sizing is a component decision, not a base-layer one. */
input, select, textarea, optgroup{ font-family:inherit; }

/* The scrollbar, once, for every page with this palette — sys_design-system.md §2.
   Deliberately unscoped so a new scroll area inherits it automatically. `--border` and
   `--border-strong` keep both themes in step; `scrollbar-color` answers Firefox, the
   WebKit rules answer Chrome/Safari — one appearance, two mechanisms. */
*{scrollbar-width:thin; scrollbar-color:var(--border) transparent;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;}
/* Visible on hover without becoming a second colour scheme: the same token one tier up. */
::-webkit-scrollbar-thumb:hover{background:var(--border-strong);}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-corner{background:transparent;}


/* Native date/time controls follow `color-scheme`, not our tokens — sys_design-system.md
   §2. The glyph and the popup are the browser's own; a `filter:invert` fixes only the
   glyph and double-inverts wherever the platform already matched. The class sits on
   :root as well as body because the boot script sets it on <html> before <body> exists. */
input[type=date], input[type=time], input[type=datetime-local], input[type=month]{
  color-scheme: dark;
}
:root.theme-light input[type=date], :root.theme-light input[type=time],
:root.theme-light input[type=datetime-local], :root.theme-light input[type=month],
body.theme-light input[type=date], body.theme-light input[type=time],
body.theme-light input[type=datetime-local], body.theme-light input[type=month]{
  color-scheme: light;
}

/* Native select popups — sys_design-system.md §2. `optgroup` needs its own colours or a
   grouped heading draws as the browser's bare default. `--text-dim` on `--panel` is the
   quieter tier this app already uses for a label over its own rows; weight carries the
   grouping, since the indent is already the browser's. */
select option{ background:var(--panel-2); color:var(--text); }
select optgroup{ background:var(--panel); color:var(--text-dim); font-weight:600; font-style:normal; }