/* Riti UI v1 — base: reset, type, focus, page chrome (top bar, threshold layout, footer), motion and its still.
   Needs tokens.css first. Strict CSP (style-src 'self'): no inline style attributes anywhere; every variant is a class. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11'; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
[data-theme] { background: var(--bg); color: var(--ink); }

/* focus that settles: the ring lands from a wider orbit (keyboard only) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; animation: ring-in .35s var(--spring); }
@keyframes ring-in { from { outline-offset: 7px; outline-color: transparent; } }

/* utilities */
.ic { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; vertical-align: -0.18em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .92em; }
.voice { font-family: var(--voice); font-style: italic; font-weight: 400; letter-spacing: 0; }
.muted { color: var(--ink-3); }
.skip { position: absolute; left: 12px; top: -40px; z-index: 99; padding: 8px 12px; border-radius: 8px; background: var(--ink); color: var(--bg); }
.skip:focus { top: 12px; }

/* type scale: very large display against small labels */
.eyebrow { font: 560 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.display { font: 650 clamp(46px, 8vw, 112px)/.9 var(--sans); letter-spacing: -0.058em; }
.big { font: 650 clamp(40px, 6.4vw, 84px)/.94 var(--sans); letter-spacing: -0.055em; }
.display .voice, .big .voice { font-size: 1.06em; letter-spacing: -0.02em; color: var(--ink-2); }
.h2 { font: 620 clamp(22px, 2.4vw, 28px)/1.1 var(--sans); letter-spacing: -0.03em; }
.lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 40rem; }
.lede b { color: var(--ink); font-weight: 600; }
.fine { font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* ---------- wordmark: a door that opens a crack on hover ---------- */
.mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 650 19px/1 var(--sans); letter-spacing: -0.03em; }
.mark .door { width: 20px; height: 22px; position: relative; perspective: 80px; }
.mark .door::before { content: ''; position: absolute; inset: 0; border-radius: 4px 4px 1px 1px; background: linear-gradient(135deg, var(--f-plan), var(--f-page) 45%, var(--f-sheet)); }
.mark .door::after { content: ''; position: absolute; inset: 0; border-radius: 4px 4px 1px 1px; background: var(--ink); transform-origin: left center; transform: rotateY(-24deg); transition: transform .5s var(--spring-soft); }
.mark:hover .door::after, .mark:focus-visible .door::after { transform: rotateY(-58deg); }

/* ---------- app layout: sticky top bar + centred wrap ---------- */
.bar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.bar-in { max-width: 1240px; margin: 0 auto; height: 64px; padding: 0 clamp(16px, 3vw, 32px); display: flex; align-items: center; gap: 28px; }
.bar nav { display: flex; gap: 4px; }
.bar nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 520; font-size: 14px; transition: background .15s, color .15s; }
.bar nav a:hover { background: var(--bg-2); color: var(--ink); }
.bar nav a[aria-current='page'] { color: var(--ink); background: var(--bg-2); }
.bar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bar .me { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 500 13px/1 var(--mono); color: var(--ink-2); border-radius: 999px; }
@media (max-width: 720px) { .bar-in { gap: 12px; } .bar nav a:not([aria-current]) { display: none; } .bar .me .h { display: none; } }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px) 120px; }
.back { display: inline-flex; align-items: center; gap: 6px; font: 560 13.5px/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: 6px 10px 6px 6px; margin-left: -6px; border-radius: 999px; transition: background .15s, color .15s; }
.back:hover { background: var(--bg-2); color: var(--ink); }
.back .ic { transition: transform .25s var(--spring); }
.back:hover .ic { transform: translateX(-3px); }

/* section with a label column (desktop) */
.part { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.part > * { min-width: 0; }
.part > header h2 { font: 620 22px/1.15 var(--sans); letter-spacing: -0.03em; }
.part > header p { margin-top: 8px; font-size: 14px; color: var(--ink-3); max-width: 30ch; }
@media (min-width: 960px) { .part { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; } .part > header { position: sticky; top: 96px; align-self: start; } }

.foot { max-width: 1240px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px) 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 13px; color: var(--ink-3); }
.foot a { color: var(--ink-3); text-decoration: none; } .foot a:hover { color: var(--ink); }
.foot .tm { margin-left: auto; font-size: 11.5px; }

/* ---------- threshold layout (sign-in, code, consent, first run, errors): one centred column ---------- */
body.thr { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.thr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px clamp(16px, 4vw, 40px); }
.thr-top .help { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.thr-top .help:hover { color: var(--ink); }
.thr-top .who { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--mono); color: var(--ink-2); }
/* a long email never widens the page: one line, cut with an ellipsis (audit #37) */
.thr-top { min-width: 0; } .thr-top > .mark { flex: none; } .thr-top .who { min-width: 0; } .thr-top .who > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thr-main { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; padding: clamp(28px, 9vh, 104px) 16px 64px; }
.thr-col { width: min(460px, 100%); min-width: 0; }
.thr-col.wide { width: min(640px, 100%); }
.thr-h1 { margin-top: 22px; font: 640 clamp(38px, 5.2vw, 58px)/0.98 var(--sans); letter-spacing: -0.045em; text-wrap: balance; }
.thr-h1 .voice { font-size: 1.08em; letter-spacing: -0.01em; color: var(--ink-2); }
.thr-sub { margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.thr-sub b { color: var(--ink); font-weight: 600; }
.thr-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.thr-acts .btn.lg { flex: 1 1 auto; }
.thr-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; padding: 22px 16px 28px; font-size: 13px; color: var(--ink-3); }
.thr-foot a { color: var(--ink-3); text-decoration: none; } .thr-foot a:hover { color: var(--ink); }

/* step rail: "Step 2 of 2" */
.steps { display: flex; align-items: center; gap: 10px; font: 560 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.steps .bars { display: inline-flex; gap: 4px; } .steps .bars i { width: 22px; height: 3px; border-radius: 3px; background: var(--line-2); } .steps .bars i.on { background: var(--ink); }

/* ---------- view transitions: same-document via ui.js vt(), cross-document on navigation ---------- */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--spring-soft); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* ---------- still: reduced motion (or html.still, set by ui.js for ?still) gets the end frame, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
html.still *, html.still *::before, html.still *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }