/* Rowtrail SQL — base (D.2): the document, type, and the generic components of §15.2 (button, tag, keycap, label, box,
   link, input, data table). Tokens only (build/check-css.js). Raw: D.3 draws the components, C.3b gives them values. */
html { font-size: 100%; height: 100%; }
body { margin: 0; min-height: 100%; background: var(--color-bg); color: var(--color-text); font-family: var(--font-ui); font-size: var(--text-md); line-height: var(--leading-md); }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, ol, ul { margin: 0; }
code, .mono { font-family: var(--font-mono); font-size: var(--text-mono-ratio); }
code { background: var(--color-surface-alt); border-radius: var(--radius-sm); padding: 0 var(--space-1); }
.muted { color: var(--color-text-muted); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Button: primary (one per screen), secondary, tertiary; disabled (§15.2). */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-3); border: var(--border-1) solid transparent; border-radius: var(--radius-md); font: inherit; font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-sm); text-decoration: none; cursor: pointer; background: transparent; color: var(--color-text); }
.btn-primary { background: var(--color-accent); color: var(--color-text-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn-secondary { background: var(--color-surface); border-color: var(--color-border-strong); }
/* Session 43 (Andrea, way A): the tertiary is a thin outline with no fill and text in the normal colour; its rule is
   --color-border, lighter than the secondary's --color-border-strong, so the two grades read apart in grey too. */
.btn-tertiary { border-color: var(--color-border); color: var(--color-text); }
.btn:disabled { opacity: var(--opacity-disabled); cursor: default; }
.btn[aria-pressed="true"] { border-color: var(--color-accent); }

.tag { display: inline-block; font-size: var(--text-xs); line-height: var(--leading-xs); padding: 0 var(--space-2); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); color: var(--color-text-2); }
.keycap { display: inline-block; min-width: var(--keycap-min-width); text-align: center; font-size: var(--text-xs); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); color: var(--color-text-muted); }
.label { font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-sm); font-variant: small-caps; letter-spacing: var(--tracking-label); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.box { border: var(--border-1) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); }
.box-dim { background: var(--color-surface-alt); }
.link, a { color: var(--color-link); text-decoration-color: var(--color-link-underline); }
.input { font: inherit; font-size: var(--text-sm); min-height: var(--control-height); padding: 0 var(--space-2); border: var(--border-1) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); }
.input-num { width: 8em; }

/* Data table (§15.2 "Tabella dei risultati"): rows in excess barred, missing rows muted in italics, marks of a preview. */
.table-wrap { overflow-x: auto; }
.res { border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.res th, .res td { border: var(--border-1) solid var(--color-border-soft); padding: var(--space-1) var(--space-2); text-align: left; vertical-align: top; }
.res th { background: var(--color-surface-alt); font-weight: var(--weight-semibold); }
.res .num { text-align: right; }
.res .cell-null { color: var(--color-text-muted); font-style: italic; }
.res .row-extra td { background: var(--color-surface-mark); color: var(--color-text-muted); text-decoration: line-through; }
.res .row-missing td { color: var(--color-text-muted); font-style: italic; }
.res .is-marked td, .res th.is-marked, .res td[data-mark] { background: var(--color-surface-mark); font-weight: var(--weight-semibold); }
.table-cap { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
/* C.3b: motion only in answer to a gesture, and none at all when the system asks for less. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }