/* Rowtrail SQL — the public pages outside the tool (F.4 point 5, session 56; design-system.md §10.14): the root of
   rowtrail.com until the landing (F.8), the verification page of a certificate, the 404. tokens.css, fonts.css and
   base.css are the tool's; this file only lays the pages out. Tokens only (build/check-css.js). */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--layout-bar-height); padding: 0 var(--space-4); border-bottom: var(--border-1) solid var(--color-border); background: var(--color-surface-alt); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-reading); font-weight: var(--weight-semibold); color: var(--color-text); text-decoration: none; }
.brand .mark { width: var(--mark-size); height: var(--mark-size); color: var(--color-accent); flex: none; }
.brand-sql { font-family: var(--font-ui); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.site-lang { display: flex; gap: var(--space-1); }
.site-lang button { font: inherit; font-size: var(--text-sm); background: none; border: var(--border-1) solid transparent; border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); color: var(--color-text-muted); cursor: pointer; min-height: var(--tap-min); }
.site-lang button[aria-pressed="true"] { color: var(--color-text); border-color: var(--color-border-strong); }
.site-main { flex: 1; width: 100%; max-width: calc(var(--measure-narrow) + 2 * var(--space-4)); margin: 0 auto; padding: var(--space-7) var(--space-4); display: grid; gap: var(--space-5); align-content: start; }
.site-title { font-family: var(--font-reading); font-weight: var(--weight-semibold); font-size: var(--text-xl); line-height: var(--leading-xl); }
.site-lead { font-family: var(--font-reading); font-size: var(--text-lg); line-height: var(--leading-reading); color: var(--color-text-muted); }
.site-foot { padding: var(--space-4); border-top: var(--border-1) solid var(--color-border-soft); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }

/* The root: the large mark with the name, a sentence, «coming soon». */
.site-hero { display: grid; gap: var(--space-5); }
.site-hero .brand { font-size: var(--text-2xl); gap: var(--space-3); }
.site-hero .brand .mark { width: var(--mark-size-large); height: var(--mark-size-large); }
.site-soon { font-size: var(--text-sm); }

/* The verification: one outcome box (like the verdict, §10.13), the code, what the exam measures; the form to look up. */
.verify-box { border: var(--border-1) solid var(--color-border-strong); border-left-width: var(--border-3); border-radius: var(--radius-md); padding: var(--space-4); display: grid; gap: var(--space-2); background: var(--color-surface); }
.verify-box[data-state="valid"] { border-color: var(--color-success); background: var(--color-success-bg); }
.verify-box[data-state="revoked"] { border-color: var(--color-error); background: var(--color-error-bg); }
.verify-box-title { font-family: var(--font-reading); font-weight: var(--weight-semibold); font-size: var(--text-xl); line-height: var(--leading-xl); }
.verify-name { font-family: var(--font-reading); font-weight: var(--weight-semibold); unicode-bidi: isolate; }
.verify-code { font-family: var(--font-mono); letter-spacing: var(--tracking-label); }
.verify-measure { font-family: var(--font-reading); line-height: var(--leading-reading); color: var(--color-text-muted); }
.verify-form { display: grid; gap: var(--space-2); }
.verify-form-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.verify-form .input { flex: 1 1 14rem; font-family: var(--font-mono); text-transform: uppercase; }