/* Base layer: reset, typography, drafting grid, language spans, auth-state
   visibility, layout primitives. Component styles live in components.css. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--text);
    background-color: var(--field);
    /* Deep-water gradient: cold light from the upper left, darker toward
       the depths. The drafting grid lives only in the hero. */
    background-image:
        radial-gradient(1100px 700px at 18% -8%, rgba(207, 231, 255, 0.13), transparent 60%),
        radial-gradient(900px 640px at 108% 22%, rgba(65, 130, 200, 0.18), transparent 65%),
        linear-gradient(168deg, #0B2C4F 0%, #113A63 42%, #0C2E51 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Links inside running text are underlined, not told apart by colour only (WCAG 1.4.1). */
main :is(p, li, dd) a:not(.btn):not(.card):not(.card-cta):not(.nav-mega-overview) { text-decoration: underline; text-underline-offset: 3px; }

/* Headings: size follows level (tokens.css type scale). Pages never set
   their own heading sizes; the verify suite pins this. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em; color: var(--draft); }
h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; letter-spacing: -0.005em; }
h1 em, h2 em { font-style: normal; color: var(--chalk); }

.mono { font-family: var(--font-mono); }

/* Eyebrow: drafting annotation |— LABEL —| */
.eyebrow {
    display: inline-flex; align-items: center; gap: var(--s3);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--draft-dim); flex: none;
    box-shadow: -1px -3px 0 0 var(--draft-dim), -1px 3px 0 0 var(--draft-dim); }
.eyebrow::before { box-shadow: 1px -3px 0 0 var(--draft-dim), 1px 3px 0 0 var(--draft-dim); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Sections separated by dashed cut lines */
.section { padding: var(--s7) 0; border-top: 1px dashed var(--draft-faint); }
@media (min-width: 768px) { .section { padding: var(--s8) 0; } }
.section-deep { background: var(--field-deep); }
.section-flush { border-top: none; }

.section-head { margin-bottom: var(--s5); max-width: 780px; }
.section-head .eyebrow { margin-bottom: var(--s3); }
.section-head h2 { margin-top: var(--s2); }
.section-head p { color: var(--text-muted); margin-top: var(--s3); font-size: var(--fs-lead); }

.grid { display: grid; gap: var(--s5); }
@media (min-width: 700px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Language spans */
.lang-zh, .lang-de { display: none; }
body.lang-zh .lang-zh, body.lang-de .lang-de { display: inline; }
body.lang-zh .lang-en:has(~ .lang-zh), body.lang-de .lang-en:has(~ .lang-de) { display: none; }

/* Auth-state visibility (pre-paint snippet sets html[data-auth]; the server
   remains authoritative for every gated payload). A signed-in reviewer can
   force the public view via the view toggle (gcc-view-override). */
html[data-auth="member"] [data-when="public"] { display: none !important; }
html:not([data-auth="member"]) [data-when="member"] { display: none !important; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* Skip link: hidden until keyboard focus, then a raised plate above the
   nav (the nav sits at z-40, the mobile drawer at z-39). */
.skip-link {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus {
    position: fixed; top: var(--s2); left: var(--s2); z-index: 100;
    width: auto; height: auto; clip: auto; white-space: normal;
    background: var(--field-raised); color: var(--draft);
    border: 1px solid var(--draft); border-radius: var(--r-btn);
    padding: var(--s2) var(--s4); font-weight: 700;
}

/* No-JS notice: chalk-tinted banner on the blueprint field */
.noscript-note {
    background: var(--chalk-tint); color: var(--chalk);
    border-bottom: 1px dashed var(--chalk);
    font-family: var(--font-mono); font-size: 0.8125rem;
    text-align: center; padding: var(--s3) var(--gutter);
}
.noscript-note a { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
/* The skip link's target takes focus programmatically, without a ring */
#main:focus { outline: none; }

/* Light sections: white parts alternating with the blueprint field.
   Components read variables, so a local remap restyles them wholesale. */
.section-light {
    background: var(--light-surface);
    border-top: none;
    color: var(--light-ink);
    --text: var(--light-ink);
    --text-muted: var(--light-muted);
    --text-faint: var(--light-muted);
    --draft: var(--light-ink);
    --draft-dim: rgba(20, 48, 77, 0.5);
    --draft-faint: rgba(20, 48, 77, 0.18);
    --field: var(--light-surface);
    --field-deep: #EAF1F8;
    --field-raised: var(--light-card);
    --link: var(--light-accent);
    --glow: var(--light-accent);
    --chalk: var(--light-gold);
    --chalk-tint: var(--light-gold-tint);
    --mark: var(--light-accent);
    --mark-benchmark: var(--light-gold);
}
.section-light .card { background: var(--light-card); border-color: var(--light-line); }
.section-light a.card:hover { border-color: var(--light-ink); background: var(--light-card); }
.section-light .tag { background: #EAF1F8; color: var(--light-muted); }
.section-light .btn-primary { background: var(--light-accent); color: #fff; border-color: var(--light-accent); }
.section-light .btn-primary:hover { background: #0C3E75; border-color: #0C3E75; }
.section-light .btn-outline { border-color: var(--light-ink); color: var(--light-ink); }
.section-light .btn-outline:hover { background: var(--light-ink); color: #fff; }
.section-light .eyebrow { color: var(--light-accent); }

.section-light .badge-proposed { background: rgba(154, 48, 32, 0.1); color: #9A3020; }
/* The member badge's border is hardcoded chalk-on-blue in components.css;
   on paper it remaps to the light gold like the fill and text do. */
.section-light .badge-member { border-color: color-mix(in srgb, var(--light-gold) 45%, transparent); }