/* Hearth core components. Built only from tokens.css: no colour, size or
 * font is written here directly. Load tokens.css first, then this, then the
 * project's own stylesheet (which may override tokens, never these rules).
 *
 * Class names are short and plain, prefixed h- so they never collide with a
 * project's own. specimen.html shows every one of them in use.
 */

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-ui); font-size: var(--t-md); line-height: 1.5; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ type */
/* A thing's name, in a list or atop its own page. Small text above is one
   weight lighter than it was: at 14px and under, 600 read as shouting. */
.h-name { font-family: var(--f-name); font-weight: var(--w-name); letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.h-title, .h-heading { font-family: var(--f-head); font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; margin: 0; }
.h-title { font-size: var(--t-4xl); line-height: 1.02; }
.h-heading { font-size: var(--t-2xl); line-height: 1.12; }
.h-kicker { font: 500 var(--t-xs)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.h-meta { font: var(--t-xs)/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.h-muted { color: var(--muted); }
.h-prose { font-family: var(--body-font); font-size: var(--body-size); line-height: var(--body-lh); max-width: var(--measure); }
.h-prose p { margin: 0 0 1.05em; }
.h-prose a { color: var(--accent); text-underline-offset: 3px; }
.h-stand { font-family: var(--f-read); font-style: italic; font-size: var(--t-xl); line-height: 1.45; color: var(--muted); margin: 0; max-width: 40ch; }
.h-pull { font-family: var(--f-head); font-size: var(--t-2xl); line-height: 1.22; margin: var(--s-2) 0; max-width: 24ch; padding-left: var(--s-4); border-left: 3px solid var(--accent); }
.h-dropcap > p:first-child::first-letter { font-family: var(--f-head); float: left; font-size: 3.4em; line-height: .82; padding: .06em .1em 0 0; color: var(--accent); }

/* ------------------------------------------------------------------ buttons
   Primary: the one thing to do now. Secondary: everything else. Quiet: a
   text action. Never two primaries side by side. */
.h-btn { font: 600 var(--t-md)/1 var(--f-ui); min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r-pill);
         border: 1.5px solid var(--accent); background: var(--accent); color: var(--on-accent);
         display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); cursor: pointer; text-decoration: none;
         transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.h-btn:active { transform: translateY(1px); }
.h-btn--sec { background: transparent; color: var(--ink); border-color: var(--edge); }
.h-btn--quiet { background: transparent; border-color: transparent; color: var(--accent); padding: 0 var(--s-2); }
.h-btn[disabled] { opacity: .45; cursor: not-allowed; }
[data-set="reading"] .h-btn { font-size: var(--t-sm); }
.h-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ------------------------------------------------------------------ inputs */
.h-field { display: grid; gap: var(--s-2); }
.h-field > label { font-size: var(--t-sm); color: var(--muted); }
.h-input { font: var(--t-md) var(--f-ui); min-height: var(--tap); padding: 0 var(--s-4); width: 100%;
           border-radius: var(--r-sm); border: 1.5px solid var(--edge); background: var(--surface); color: var(--ink); }
.h-input::placeholder { color: var(--muted); }
.h-hint { font-size: var(--t-sm); color: var(--muted); }
.h-error { font-size: var(--t-sm); color: var(--accent); }
.h-check { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); cursor: pointer; }
.h-check input { appearance: none; width: 26px; height: 26px; margin: 0; flex: none; border-radius: var(--r-sm); border: 2px solid var(--edge);
                 display: grid; place-items: center; background: var(--surface); }
.h-check input:checked { background: var(--accent); border-color: var(--accent); }
.h-check input:checked::after { content: ""; width: 7px; height: 13px; border: solid var(--on-accent); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); }
.h-check input:checked + span { color: var(--muted); text-decoration: line-through; }

/* ------------------------------------------------------------------ chips and pills */
.h-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.h-chip { font: 500 var(--t-sm)/1 var(--f-ui); padding: 9px 13px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--ink); border: 0; cursor: pointer; }
.h-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.h-fact { font: 500 var(--t-xs)/1 var(--f-mono); padding: 8px 10px; border-radius: var(--r-pill); background: var(--raised); color: var(--ink); }

/* ------------------------------------------------------------------ surfaces */
.h-card { background: var(--surface); border-radius: var(--r); box-shadow: var(--depth); padding: var(--s-5); }
.h-now { background: var(--accent); color: var(--on-accent); border-radius: var(--r); padding: var(--s-5) var(--s-4); display: grid; gap: var(--s-2); }
.h-now > small { font: 500 var(--t-xs) var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.h-now > p { margin: 0; font: 600 23px/1.32 var(--f-ui); }
.h-empty { border: 1.5px dashed var(--edge); border-radius: var(--r); padding: var(--s-6) var(--s-5); text-align: center; color: var(--muted);
           display: grid; gap: var(--s-2); justify-items: center; }
.h-empty > strong { font-family: var(--f-head); font-weight: 400; font-size: var(--t-xl); color: var(--ink); }

/* ------------------------------------------------------------------ navigation */
.h-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
         min-height: var(--tap); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
.h-nav__brand { font-family: var(--f-head); font-size: var(--t-lg); color: var(--ink); text-decoration: none; }
.h-nav__links { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.h-nav__links a { color: var(--muted); text-decoration: none; font-weight: 400; }
.h-nav__links a[aria-current="page"] { color: var(--ink); box-shadow: 0 2px 0 var(--accent); }
.h-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); max-width: var(--measure); }
.h-pager a { text-decoration: none; color: var(--ink); display: grid; gap: 2px; }
.h-pager a span { font: var(--t-xs) var(--f-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.h-pager a b { font-family: var(--f-head); font-weight: 400; font-size: var(--t-lg); line-height: 1.2; }
.h-pager a:last-child { text-align: right; }

/* ------------------------------------------------------------------ lists and tables */
.h-list { list-style: none; margin: 0; padding: 0; }
.h-list > li { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) var(--s-1); border-top: 1px solid var(--line); }
.h-list__group { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: var(--s-4) var(--s-1) var(--s-2); }
.h-table-wrap { overflow-x: auto; }
.h-table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.h-table th { text-align: left; font: 500 var(--t-xs)/1.2 var(--f-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: var(--s-2) var(--s-3); }
.h-table td { padding: var(--s-3); border-top: 1px solid var(--line); }
.h-num { font-family: var(--f-mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }