/* Scholvet — tokens from DESIGN.md / SKILL.md (Silverchair system). Use tokens only; no raw values below this block. */

/* Jost: free (SIL OFL 1.1, see /fonts/OFL.txt) stand-in for brandon-grotesque, served from this site.
   latin covers ç ö ü ı; latin-ext covers ğ ş İ. Weights 400–700 in one variable file. */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/jost-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/jost-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Colors */
    --color-1: #303030; /* Text primary */
    --color-2: #0C669C; /* Accent */
    --color-3: #0077B3; /* Accent */
    --color-4: #6699CC; /* Background dark */
    --color-5: #6AAAE4; /* Accent */
    --color-6: #CEE4F4; /* Surface */
    --color-7: #D8E5EE; /* Border */
    --color-8: #EAEAEA; /* Surface */
    --color-9: #FFFFFF; /* Text light */

    /* Typography: serif for headings (institutional), sans for reading */
    --font-display: "Times New Roman", Times, serif;
    --font-body: brandon-grotesque, "Jost", "Source Sans Pro", Arial, sans-serif;
    --text-xs: 13px;
    --text-sm: 15px;
    --text-base: 18px;
    --text-lg: 26px;
    --text-xl: 36px;
    --text-2xl: 50px;
    --leading-body: 25.2px;
    --leading-sm: 22.4px;
    --leading-lg: 42px;
    --leading-xl: 45px;
    --leading-2xl: 60px;

    /* Spacing */
    --space-1: 1px;
    --space-2: 6px;
    --space-4: 8px;
    --space-5: 10px;
    --space-7: 16px;
    --space-9: 20px;
    --space-10: 24px;
    --space-12: 32px;
    --space-13: 40px;
    --space-14: 48px;
    --space-15: 60px;
    --space-17: 64px;
    --space-18: 78px;
    --space-19: 128px;

    /* Shapes and elevation */
    --radius-sm: 4px;
    --radius-lg: 8px;
    --radius-xl: 100px;
    --shadow-sm: rgba(0, 0, 0, 0.11) 0px 1px 3px 0px;
    --shadow-md: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;

    /* Motion */
    --duration-fast: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
    --duration-base: opacity 0.3s ease-in-out, color 0.3s ease-in-out;

    --page-width: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 400 var(--text-base)/var(--leading-body) var(--font-body);
    color: var(--color-1);
    background: var(--color-9);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--color-1); }
h1 { font-size: var(--text-xl); line-height: var(--leading-xl); margin: 0 0 var(--space-9); }
h2 { font-size: var(--text-lg); line-height: var(--leading-lg); margin: var(--space-13) 0 var(--space-7); }
h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 600; margin: 0 0 var(--space-4); }
p { margin: 0 0 var(--space-7); }
img { max-width: 100%; }

a { color: var(--color-2); text-underline-offset: 3px; transition: var(--duration-fast); }
a:hover { color: var(--color-3); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--color-3);
    outline-offset: 2px;
}

.wrap { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--space-7); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-7); top: var(--space-4); background: var(--color-9); padding: var(--space-4) var(--space-7); z-index: 10; }

/* Top bar */
.topbar { background: var(--color-2); color: var(--color-9); font-size: var(--text-xs); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-7); min-height: var(--space-13); }
.topbar a { color: var(--color-9); text-decoration: none; padding: var(--space-1) var(--space-4); border-radius: var(--radius-sm); }
.topbar a:hover { text-decoration: underline; color: var(--color-9); }
.topbar a[aria-current="true"] { font-weight: 700; text-decoration: underline; }
.topbar .langs { display: flex; gap: var(--space-2); }

/* Masthead */
.masthead { border-bottom: var(--space-1) solid var(--color-7); background: var(--color-9); }
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-7); padding-top: var(--space-9); padding-bottom: var(--space-9); }
.brand { display: flex; align-items: center; gap: var(--space-5); text-decoration: none; color: var(--color-1); }
.brand:hover { color: var(--color-1); }
.logo-mark { width: var(--space-14); height: var(--space-14); flex: none; }
.logo-mark circle { fill: none; stroke-width: 2.6; }
.logo-mark .ring-a { stroke: var(--color-2); }
.logo-mark .ring-b { stroke: var(--color-5); }
.logo-mark .lens { fill: var(--color-2); }
.logo-mark .tick { fill: none; stroke: var(--color-9); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { display: block; font: 400 var(--text-lg)/1 var(--font-display); letter-spacing: 0.04em; }
.brand-sub { display: block; font-size: var(--text-xs); line-height: var(--leading-sm); color: var(--color-2); letter-spacing: 0.08em; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-10); font-size: var(--text-sm); }
.nav a { color: var(--color-1); text-decoration: none; padding: var(--space-4) 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--color-2); border-bottom-color: var(--color-2); }

/* Buttons */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
    min-height: var(--space-14); padding: 0 var(--space-10);
    border: 2px solid var(--color-2); border-radius: var(--radius-sm);
    background: var(--color-2); color: var(--color-9);
    font: 600 var(--text-sm)/1 var(--font-body); text-decoration: none; cursor: pointer;
    transition: var(--duration-fast);
}
.button:hover { background: var(--color-3); border-color: var(--color-3); color: var(--color-9); }
.button:active { box-shadow: inset var(--shadow-sm); }
.button:disabled, .button[aria-disabled="true"] { background: var(--color-8); border-color: var(--color-8); color: var(--color-1); cursor: not-allowed; }
.button.secondary { background: var(--color-9); color: var(--color-2); }
.button.secondary:hover { background: var(--color-6); color: var(--color-2); }
.button.danger { background: var(--color-9); color: var(--color-1); border-color: var(--color-1); }
.button.danger:hover { background: var(--color-8); }
.button.light { background: var(--color-9); border-color: var(--color-9); color: var(--color-2); }
.button.light:hover { background: var(--color-6); border-color: var(--color-6); }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--color-1); cursor: pointer; }
button.link:hover { color: var(--color-2); text-decoration: underline; }
form.inline { display: inline; }

/* Home: hero */
.hero { background: var(--color-6); border-bottom: var(--space-1) solid var(--color-7); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-15); align-items: center; padding-top: var(--space-18); padding-bottom: var(--space-18); }
.eyebrow { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-2); font-weight: 600; margin-bottom: var(--space-7); }
.hero h1 { font-size: var(--text-2xl); line-height: var(--leading-2xl); margin-bottom: var(--space-10); }
.lead { font-size: var(--text-base); line-height: var(--leading-body); max-width: 640px; margin-bottom: var(--space-12); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-7); align-items: center; }
.assurances { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); padding: 0; margin: var(--space-12) 0 0; font-size: var(--text-sm); }
.assurances li::before { content: "\2713"; color: var(--color-2); font-weight: 700; margin-right: var(--space-4); }

/* Home: example register entry */
.record { background: var(--color-9); border: var(--space-1) solid var(--color-7); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.record-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-7); padding: var(--space-7) var(--space-10); border-bottom: var(--space-1) solid var(--color-7); background: var(--color-8); }
.record-head strong { font: 400 var(--text-base)/1.2 var(--font-display); }
.record-head span { font-size: var(--text-xs); color: var(--color-1); }
.record dl { margin: 0; padding: var(--space-4) var(--space-10) var(--space-10); }
/* Label above value: labels differ in length between languages, values keep the full width. */
.record dl div { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-5) 0; border-bottom: var(--space-1) solid var(--color-7); }
.record dl div:last-child { border-bottom: 0; }
.record dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-2); padding-top: var(--space-1); }
.record dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.code { font-family: Consolas, "Courier New", monospace; font-size: var(--text-sm); white-space: nowrap; }
.meter { display: flex; align-items: center; gap: var(--space-4); }
.meter span { display: block; height: var(--space-4); border-radius: var(--radius-xl); background: var(--color-7); flex: 1; overflow: hidden; }
.meter span i { display: block; height: 100%; background: var(--color-2); }

/* Home: sections */
.section { padding: var(--space-18) 0; }
.section + .section { border-top: var(--space-1) solid var(--color-7); }
.section-head { max-width: 760px; margin-bottom: var(--space-13); }
.section-head h2 { font-size: var(--text-xl); line-height: var(--leading-xl); margin-top: 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }
.steps li { border-top: 2px solid var(--color-2); padding-top: var(--space-9); }
.numeral { display: block; font: 400 var(--text-xl)/1 var(--font-display); color: var(--color-2); margin-bottom: var(--space-7); }
.steps p { font-size: var(--text-sm); line-height: var(--leading-sm); }
.audiences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.audience { border: var(--space-1) solid var(--color-7); border-radius: var(--radius-lg); padding: var(--space-12); background: var(--color-9); }
.audience h2 { margin-top: 0; }
.ticks { list-style: none; padding: 0; margin: 0 0 var(--space-10); }
.ticks li { position: relative; padding: var(--space-4) 0 var(--space-4) var(--space-12); border-bottom: var(--space-1) solid var(--color-7); font-size: var(--text-sm); line-height: var(--leading-sm); }
.ticks li::before { content: "\2014"; position: absolute; left: 0; color: var(--color-2); }
.principles { background: var(--color-8); }
.charter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-10); }
.charter div { background: var(--color-9); border-radius: var(--radius-sm); padding: var(--space-10); box-shadow: var(--shadow-sm); }
.charter h3 { font: 400 var(--text-lg)/1.2 var(--font-display); margin-bottom: var(--space-4); }
.charter p { font-size: var(--text-sm); line-height: var(--leading-sm); margin: 0; }
.band { background: var(--color-2); color: var(--color-9); padding: var(--space-15) 0; }
.band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-10); }
.band h2 { color: var(--color-9); margin: 0; font-size: var(--text-xl); line-height: var(--leading-xl); }

/* Footer */
.footer { background: var(--color-1); color: var(--color-9); font-size: var(--text-sm); }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-10); padding-top: var(--space-13); padding-bottom: var(--space-13); }
.footer a { color: var(--color-9); }
.footer a:hover { color: var(--color-6); }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); }
.footer .brand-name { font-size: var(--text-base); }

/* Inner pages */
.page { max-width: 960px; margin: 0 auto; padding: var(--space-13) var(--space-7) var(--space-17); }
.cards { display: grid; gap: var(--space-7); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: var(--space-10) 0; }
.card { background: var(--color-9); border: var(--space-1) solid var(--color-7); border-top: 3px solid var(--color-2); border-radius: var(--radius-sm); padding: var(--space-7) var(--space-9); }
.card strong { display: block; font: 400 var(--text-xl)/var(--leading-xl) var(--font-display); }
.card span, .muted, .meta, .hint, small { color: var(--color-1); font-size: var(--text-sm); }
.hint { border-left: 3px solid var(--color-7); padding-left: var(--space-7); }
.invitation { background: var(--color-9); border: var(--space-1) solid var(--color-7); border-radius: var(--radius-lg); padding: var(--space-10); margin-bottom: var(--space-7); box-shadow: var(--shadow-sm); }
.invitation h3 { font: 400 var(--text-lg)/1.25 var(--font-display); }
.notice { background: var(--color-6); border-left: 4px solid var(--color-2); padding: var(--space-5) var(--space-7); border-radius: var(--radius-sm); }
.error { color: var(--color-1); font-weight: 600; border-left: 4px solid var(--color-3); padding-left: var(--space-4); }
.list { padding-left: var(--space-9); }
.list li { padding: var(--space-2) 0; }
.status { font-size: var(--text-sm); font-weight: 600; }
.status-completed, .status-accepted { color: var(--color-2); }
blockquote { margin: var(--space-4) 0; padding-left: var(--space-7); border-left: 3px solid var(--color-7); }
details summary { cursor: pointer; color: var(--color-2); }

.form { display: grid; gap: var(--space-9); max-width: 560px; margin-top: var(--space-10); }
.form label { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.form label.check, label.check { display: flex; gap: var(--space-4); align-items: flex-start; font-weight: 400; }
input, select, textarea {
    font: inherit; font-size: var(--text-sm); font-weight: 400;
    padding: var(--space-4) var(--space-5); min-height: var(--space-13);
    border: var(--space-1) solid var(--color-4); border-radius: var(--radius-sm);
    background: var(--color-9); color: var(--color-1); max-width: 100%;
    transition: var(--duration-fast);
}
input:hover, select:hover, textarea:hover { border-color: var(--color-2); }
input:disabled, select:disabled, textarea:disabled { background: var(--color-8); cursor: not-allowed; }
input[type="checkbox"] { min-height: 0; width: 18px; height: 18px; accent-color: var(--color-2); }
fieldset { border: var(--space-1) solid var(--color-7); border-radius: var(--radius-lg); display: grid; gap: var(--space-2); padding: var(--space-7); }
.stack { display: grid; gap: var(--space-5); max-width: 560px; }
.danger-zone { margin-top: var(--space-14); padding-top: var(--space-7); border-top: var(--space-1) solid var(--color-7); }

/* Developer documentation (developers.scholvet.com) */
.docs-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-14); padding-top: var(--space-13); padding-bottom: var(--space-17); }
.docs-nav { position: sticky; top: var(--space-9); align-self: start; font-size: var(--text-sm); }
.docs-nav ul { list-style: none; margin: 0 0 var(--space-9); padding: 0; }
.docs-nav a { display: block; padding: var(--space-2) var(--space-5); color: var(--color-1); text-decoration: none; border-left: 2px solid var(--color-7); }
.docs-nav a:hover { color: var(--color-2); border-left-color: var(--color-5); }
.docs-nav a[aria-current="page"] { color: var(--color-2); font-weight: 600; border-left-color: var(--color-2); background: var(--color-6); }
.docs-group { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-2); font-weight: 600; margin: 0 0 var(--space-4); }
.docs-content { min-width: 0; max-width: 820px; }
.docs-content h1 { font-size: var(--text-xl); line-height: var(--leading-xl); }
.docs-content h2 { scroll-margin-top: var(--space-9); }
.docs-content h3 { margin-top: var(--space-10); }
.docs-next { margin-top: var(--space-14); padding-top: var(--space-9); border-top: var(--space-1) solid var(--color-7); font-weight: 600; }
.docs-content code, .fields code { font-family: Consolas, "Courier New", monospace; font-size: var(--text-sm); background: var(--color-8); padding: 0 var(--space-1); border-radius: var(--radius-sm); }
.code-block { margin: var(--space-7) 0 var(--space-10); border: var(--space-1) solid var(--color-7); border-radius: var(--radius-lg); overflow: hidden; }
.code-block figcaption { padding: var(--space-4) var(--space-7); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-2); background: var(--color-6); border-bottom: var(--space-1) solid var(--color-7); }
.code-block pre { margin: 0; padding: var(--space-7); overflow-x: auto; background: var(--color-8); font: 400 var(--text-xs)/var(--leading-sm) Consolas, "Courier New", monospace; color: var(--color-1); }
.code-block pre code { background: none; padding: 0; font-size: inherit; }
.code-block pre:focus-visible { outline-offset: -3px; }
.endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: var(--space-7) 0 var(--space-4); padding: var(--space-5) var(--space-7); border: var(--space-1) solid var(--color-7); border-radius: var(--radius-sm); background: var(--color-9); }
.endpoint code { background: none; font-size: var(--text-sm); overflow-wrap: anywhere; }
.method { display: inline-block; min-width: var(--space-17); text-align: center; padding: var(--space-1) var(--space-4); border-radius: var(--radius-sm); font: 700 var(--text-xs)/var(--leading-sm) var(--font-body); letter-spacing: 0.08em; }
.method-post { background: var(--color-2); color: var(--color-9); }
.method-get { background: var(--color-6); color: var(--color-2); }
.table-wrap { overflow-x: auto; margin: var(--space-7) 0 var(--space-10); border: var(--space-1) solid var(--color-7); border-radius: var(--radius-lg); }
.fields { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-sm); }
.fields th { text-align: left; font-weight: 600; background: var(--color-8); padding: var(--space-4) var(--space-7); border-bottom: var(--space-1) solid var(--color-7); }
.fields td { vertical-align: top; padding: var(--space-4) var(--space-7); border-bottom: var(--space-1) solid var(--color-7); }
.fields tr:last-child td { border-bottom: 0; }
.fields td:first-child { white-space: nowrap; }
.required { display: block; font-size: var(--text-xs); color: var(--color-2); font-weight: 600; }
.flow { padding-left: var(--space-9); }
.flow li { padding: var(--space-2) 0; }
.facts { margin: var(--space-7) 0 var(--space-10); border-top: var(--space-1) solid var(--color-7); }
.facts div { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: var(--space-7); padding: var(--space-5) 0; border-bottom: var(--space-1) solid var(--color-7); }
.facts dt { font-weight: 600; font-size: var(--text-sm); }
.facts dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.note { background: var(--color-6); border-left: 4px solid var(--color-2); padding: var(--space-5) var(--space-7); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.break { overflow-wrap: anywhere; }

@media (max-width: 960px) {
    .docs-body { grid-template-columns: 1fr; gap: var(--space-10); }
    .docs-nav { position: static; border-bottom: var(--space-1) solid var(--color-7); padding-bottom: var(--space-7); }
    .docs-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
    .docs-nav a { border-left: 0; border: var(--space-1) solid var(--color-7); border-radius: var(--radius-xl); padding: var(--space-1) var(--space-7); }
    .docs-nav a[aria-current="page"] { border-color: var(--color-2); }
    .facts div { grid-template-columns: 1fr; gap: var(--space-1); }
}

@media (max-width: 960px) {
    .hero .wrap { grid-template-columns: 1fr; gap: var(--space-13); padding-top: var(--space-15); padding-bottom: var(--space-15); }
    .steps, .charter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .audiences { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .hero h1 { font-size: var(--text-xl); line-height: var(--leading-xl); }
    .section-head h2, .band h2 { font-size: var(--text-lg); line-height: var(--leading-lg); }
    .section { padding: var(--space-15) 0; }
    .steps, .charter { grid-template-columns: 1fr; }
    .audience { padding: var(--space-10); }
    .topbar .tagline { display: none; }
    .nav { gap: var(--space-4) var(--space-7); }
}

/* Console: a key or secret shown once */
pre.secret { margin: var(--space-4) 0 0; padding: var(--space-5) var(--space-7); background: var(--color-9); border: var(--space-1) solid var(--color-2); border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; font: 600 var(--text-sm)/var(--leading-sm) Consolas, "Courier New", monospace; }
pre.secret code { background: none; padding: 0; }