@import url('/ui/tokens.css');
@import url('/ui/components.css');
@import url('/ui/bench.css');

/* Public pages (terms, privacy, guides, sign-in): the same paper, ink and signal orange as the homepage. */
* { box-sizing: border-box; }
html { background: var(--color-canvas); color: var(--color-ink); font-family: var(--font-body); scroll-padding-top: 88px; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; font-size: var(--text-body); line-height: var(--leading-body); }
a { color: var(--color-action); text-underline-offset: 0.18em; }
a:hover { color: var(--color-action-hover); }

.guide-shell { width: min(calc(100% - 2 * var(--space-8)), var(--content-width)); margin: 0 auto; }

/* Header: the homepage header, with the same ink rule and orange read-progress line. */
.guide-header, .guide-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); width: 100%; }
.guide-header { position: sticky; top: 0; z-index: var(--z-sticky, 10); min-height: 72px; padding: 0 max(var(--space-8), calc((100% - var(--content-width)) / 2)); background: var(--color-canvas); border-bottom: var(--rule-width) solid var(--color-ink); }
.guide-brand { font-size: 1.75rem; }
.guide-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-8); }
:where(.guide-nav a, .guide-nav button) { min-height: var(--control-height); display: inline-flex; align-items: center; color: var(--color-ink); font: var(--weight-label) var(--text-body)/1 var(--font-body); text-decoration: none; }
:where(.guide-nav a:not(.primary-button, .secondary-button, .text-button)):hover, .guide-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-signal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.guide-header::after { content: ""; position: absolute; left: 0; bottom: calc(-1 * var(--rule-width)); width: 100%; height: 3px; background: var(--color-signal); transform-origin: 0 50%; scale: 0 1; }
@keyframes guide-read-progress { to { scale: 1 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .guide-header::after { animation: guide-read-progress linear both; animation-timeline: scroll(root); }
  }
}

/* Footer: the homepage night footer. */
.guide-footer { margin-top: var(--space-16); padding: var(--space-10) max(var(--space-8), calc((100% - var(--content-width)) / 2)) var(--space-8); background: var(--color-night); color: var(--color-on-night-muted); font-size: var(--text-small); }
.guide-footer :where(a, button):not(.brand, .primary-button, .secondary-button, .text-button) { min-height: var(--control-height); display: inline-flex; align-items: center; color: var(--color-on-night); font-size: inherit; }
.guide-footer :where(a, button):not(.brand, .primary-button, .secondary-button, .text-button):hover { color: var(--color-action-reverse); }
.guide-footer a:focus-visible, .guide-footer button:focus-visible { outline-color: var(--color-action-reverse); }
.guide-footer .brand { font-size: 1.75rem; }
.guide-footer .guide-nav { margin-left: auto; gap: var(--space-2) var(--space-6); }
:where(.guide-footer .guide-nav a, .guide-footer .guide-nav button) { font-weight: 400; }
.guide-footer-note { width: 100%; margin: 0; }

/* Reading column */
.guide-main { flex: 1; max-width: min(var(--reading-width), calc(100% - 2 * var(--space-8))); margin-inline: max(var(--space-8), calc((100% - var(--content-width)) / 2)); padding: var(--space-16) 0 0; }
.guide-main > * + * { margin-top: var(--space-6); }
.guide-eyebrow { position: relative; display: inline-block; max-width: 100%; margin: 0; padding: var(--space-1) var(--space-4) var(--space-1) var(--space-8); background: var(--color-tag); border: 1.5px solid var(--color-ink); border-radius: var(--radius-tag); color: var(--color-ink); font: 700 var(--text-caption)/1.4 var(--font-code); letter-spacing: 0.06em; text-transform: uppercase; }
.guide-eyebrow::before { content: ""; position: absolute; left: var(--space-3); top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-canvas); }
h1, h2, h3 { line-height: 1.12; }
h1 { max-width: 18ch; margin: 0; font-size: var(--text-title); }
h2 { margin-bottom: var(--space-3); font-size: clamp(1.25rem, 2vw, 1.625rem); }
h3 { margin-bottom: var(--space-2); font-size: var(--text-body); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
p { margin: 0; }
.guide-lede { max-width: 62ch; color: var(--color-muted); font-size: var(--text-section); }
.guide-main .ds-notice { border: var(--rule-width) dashed var(--color-signal); border-left-width: var(--rule-width); background: var(--color-surface); }
.guide-section { padding-top: var(--space-5); border-top: var(--rule-width) solid var(--color-ink); scroll-margin-top: var(--space-16); }
.guide-section > * + * { margin-top: var(--space-4); }
.guide-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-card { min-width: 0; }
.guide-card > * + * { margin-top: var(--space-3); }
.guide-card p { color: var(--color-muted); }
.guide-table-region { border: var(--rule-width) solid var(--color-ink); }
.guide-table { min-width: 620px; }
.guide-table caption { padding: var(--space-3); text-align: left; font-weight: var(--weight-label); }
.guide-table td { vertical-align: top; }
.guide-table .ds-status { white-space: nowrap; overflow-wrap: normal; }
.guide-list { padding-left: var(--space-6); }
.guide-list li + li { margin-top: var(--space-2); }
pre { margin: 0; padding: var(--space-4); overflow-x: auto; border: var(--border-width) solid var(--color-ink); background: var(--color-code); color: var(--color-ink); font: var(--text-small)/var(--leading-body) var(--font-code); }
code { font-family: var(--font-code); overflow-wrap: anywhere; }
.guide-references { font-size: var(--text-small); color: var(--color-muted); }
.guide-references li + li { margin-top: var(--space-2); }
@media (max-width: 640px) {
  .guide-shell { width: min(calc(100% - 2 * var(--space-5)), var(--content-width)); }
  .guide-header { position: relative; min-height: 64px; padding: var(--space-2) var(--space-5); }
  .guide-footer { padding-inline: var(--space-5); }
  .guide-footer .guide-nav { margin-left: 0; }
  .guide-nav { gap: var(--space-1) var(--space-4); }
  .guide-main { margin-inline: var(--space-5); max-width: none; padding-top: var(--space-10); }
  .guide-grid { grid-template-columns: 1fr; }
}