/* assets/base.css — the rules every surface of The Ontology shares, stated once.
 *
 * WHAT BELONGS HERE: the box-sizing reset, the base typography a page inherits (body, links, headings,
 * paragraphs), the text utilities every surface uses (.muted / .small / code / .vh), the one
 * focus-visible ring, the .btn family, and .toast. The bar is "every surface draws this the same way".
 * Each of these was written out twice — once in assets/site.css and once in enroll/src/styles.css — and
 * kept in sync by hand, which is the same failure assets/tokens.css was created to end for the palette.
 *
 * WHAT DOES NOT: anything a surface means differently. Layout (the site's sections and grids, enroll's
 * sheet), the per-surface `html` rule (the site scroll-behavior:smooth; enroll does not scroll), and the
 * classes that share a NAME but not a style — .chip, .eyebrow, .footlinks, .disclaimer, .cardcanvas.
 * A class that reads the same on both surfaces by coincidence is not shared; one that would be wrong if
 * the two ever diverged is not shared either. When in doubt it stays in the surface stylesheet.
 *
 * LOAD ORDER: assets/tokens.css must load FIRST — every colour and both font stacks below are var()
 * references into it and there are no fallbacks. Then this file. Then the surface's own stylesheet,
 * which is where an override of a rule here belongs (e.g. site.css's coarse-pointer .btn-mini height).
 *   - the public site   <link rel="stylesheet" href="/assets/base.css"> after tokens.css, before site.css
 *   - enroll/           @import '../../assets/base.css' after the tokens import in enroll/src/styles.css
 * The desk (desk/desk.html) deliberately does NOT load this file: its buttons, pills and labels are an
 * operator console's own system, visually distinct and used nowhere else. It consumes tokens.css only.
 *
 * The layers, and what stays per-surface, are written up in docs/design/design-system.md.
 * tests/base.test.mjs pins the load order and fails on a rule here being restated below it.
 */

/* ---- reset ---------------------------------------------------------------------------------- */
*{box-sizing:border-box}
/* !important because it has to beat a class that sets display on the same element — .cardcanvas and
   .cardactions on both surfaces. Without it, `hidden` on a canvas is silently ignored. */
[hidden]{display:none!important}

/* ---- base typography ------------------------------------------------------------------------ */
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--display);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ice)}
/* One ring for every focusable thing. The selector is the union of what the two surfaces listed
   separately, plus textarea — a control that grows one later should not have to remember to add it. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
h1,h2,h3{margin:0;letter-spacing:-.01em;line-height:1.1}
p{margin:0 0 12px}
.muted{color:var(--slate)}
.small{font-size:.8125rem}
code{font-family:var(--mono)}

/* Off-screen but still read aloud, and still in the heading outline. Not [hidden] and not
   display:none — either of those takes it out of the accessibility tree too. It carries the "Loading"
   behind a hero tile's em dash and the site's skip-link label; on enroll it is the wallet page's h1
   (audit H6), a title that exists for the outline and nowhere else.
   `clip-path` is the modern half and `clip` the fallback; `white-space:nowrap` stops a 1px-wide box
   wrapping its text into a tall column that some browsers then expose as off-screen content. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- buttons -------------------------------------------------------------------------------- */
/* `inline-flex` with centring and a gap, which is what enroll had; the site had a bare `inline-block`.
   The flex version is the one that survives a second child — a spinner or an icon beside the label —
   and it is what centres the label when a caller adds a min-height (the site's coarse-pointer
   .btn-mini). It was checked against the site before it went in: every one of the home page's twelve
   .btn boxes keeps its exact x/y/w/h at 1280 and 375, and the full-page render is pixel-identical,
   because each of them is either a <button> (whose UA style already centres its content) or an <a>
   with no min-height (whose height is its content). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:6px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--display);font-size:.9375rem}
/* Disabled dims through --disabled-alpha (assets/tokens.css): the lowest .01 step at which the dimmest
   label on any surface (slate on --ink) still clears 3:1. Both public surfaces sit in this state during
   ordinary windows, so it is not exempt in practice. The desk dims chrome instead (its own rule). */
.btn:disabled{opacity:var(--disabled-alpha);cursor:default}
/* --blue-deep under white text is 5.7:1; the lighter --blue fails 4.5:1. The hover shades and the
   `:not(:disabled)` guard are here so a disabled button never lights up under the pointer. */
.btn-primary{background:var(--blue-deep);color:var(--white)}
.btn-primary:hover:not(:disabled){background:var(--blue-deep-hover)}
.btn-secondary{background:transparent;color:var(--ice);border-color:var(--rule-control)}
.btn-secondary:hover:not(:disabled){border-color:var(--ice)}
/* Pressed. --ice-08 is the palette's quiet fill and the only pressed step either surface needs: an
   outlined button has a transparent background to fill, so the press is visible without moving the
   box. .btn-primary has no :active of its own on purpose — it is already filled --blue-deep and the
   palette holds exactly one step under it (--blue-deep-hover), which its :hover has; a pressed state
   there would have to invent a shade, so the hover shade is the pressed shade. */
.btn-secondary:active:not(:disabled){background:var(--ice-08)}
/* The small type is the point of this variant; a small tap target never was (audit M16). The 44px
   minimum is NOT here, because the two surfaces want it at different times: enroll is touch-first and
   sets it always, the site sets it only under (max-width:700px),(pointer:coarse) so desktop density is
   kept. Both overrides live in the surface stylesheets, after this file in the cascade. */
.btn-mini{padding:6px 10px;font-size:.75rem;background:transparent;color:var(--ice);border-color:var(--rule-control)}
/* .btn-mini is the same outlined shape as .btn-secondary at a smaller size, so it takes the same two
   states. It had neither: the home page's Copy button and enroll's copy-address button were the only
   buttons on either surface that did not answer a pointer at all. */
.btn-mini:hover:not(:disabled){border-color:var(--ice)}
.btn-mini:active:not(:disabled){background:var(--ice-08)}

/* ---- status line ---------------------------------------------------------------------------- */
/* The line a copy-to-clipboard confirmation is announced into. `min-height:1em` reserves its row so
   the content below never jumps when the message appears. */
.toast{font-family:var(--mono);font-size:.6875rem;color:var(--ice);min-height:1em}