/* SPDX-License-Identifier: Apache-2.0
 *
 * The palette is not chosen here. It is include/theme.h, transcribed, because
 * a site that describes an operating system should look like the operating
 * system. That includes the rule theme.h enforces:
 *
 *   normal states are calm and dark; only failure is loud.
 *
 * PSOGM purple (--psogm) therefore appears exactly once on this page, in the
 * crash-screen section. If it ever appears anywhere else, delete it there.
 */

:root {
  /* include/theme.h */
  --bg:         #0C0E13;   /* SCH_BG */
  --fg:         #E6E8EC;   /* SCH_FG */
  --dim:        #707784;   /* SCH_DIM */
  --accent:     #7C5CFF;   /* SCH_ACCENT */
  --accent-dim: #2A2440;   /* SCH_ACCENT_DIM */
  --ok:         #4ADE80;   /* SCH_OK */
  --warn:       #FBBF24;   /* SCH_WARN */
  --psogm:      #4B1D9A;   /* PSOGM_BG — failure, and nothing else */

  /* Surfaces lifted off the ground, keeping its blue bias rather than
     sliding toward neutral grey. */
  --surface:    #12151C;
  --surface-2:  #171B24;
  --line:       #212632;

  --sans: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code",
          Menlo, Consolas, monospace;

  --measure: 66ch;
  --gap:     clamp(1rem, 2.5vw, 1.75rem);
  --section: clamp(4rem, 10vw, 7.5rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---- shared shells ------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

section { padding-block: var(--section); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

h1, h2, h3 { text-wrap: balance; line-height: 1.15; margin: 0; }

h2 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lede {
  max-width: var(--measure);
  color: var(--dim);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  margin: 1.25rem 0 0;
}

p { max-width: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--fg); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

code, .mono { font-family: var(--mono); font-size: 0.9em; }
code { color: var(--fg); background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 3px; }

/* ---- header -------------------------------------------------------- */

header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.85rem;
}
.brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 700; letter-spacing: -0.01em;
  color: inherit; text-decoration: none;
}
.brand img { width: 26px; height: 26px; display: block; }
.top nav { margin-left: auto; display: flex; gap: 1.5rem; font-size: 0.9rem; }
.top nav a { color: var(--dim); text-decoration: none; }
.top nav a:hover { color: var(--fg); }
@media (max-width: 46rem) { .top nav { display: none; } }

/* ---- hero ---------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 9vw, 6.5rem) var(--section); }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 56rem) {
  .hero .wrap { grid-template-columns: 1fr; }
}

.hero h1 {
  font-size: clamp(2.75rem, 1.8rem + 4.2vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.hero h1 .mark {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.08em;
  margin-right: 0.22em;
}
.hero p { color: var(--dim); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); margin-top: 1.25rem; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.btn {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border-radius: 4px;
  font-size: 0.925rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--line);
  color: var(--fg);
  background: var(--surface);
}
.btn:hover { border-color: var(--accent); color: var(--fg); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0B0714; font-weight: 700; }
.btn.primary:hover { background: #8F73FF; border-color: #8F73FF; color: #0B0714; }

/* ---- console ------------------------------------------------------- */

.console {
  background: #090B0F;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px #000;
}
.console-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
  letter-spacing: 0.06em;
}
.console-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.console-bar .dot.live { background: var(--ok); }
.console-bar span { margin-left: auto; }

.console pre {
  margin: 0;
  padding: 1rem 1.1rem 1.4rem;
  font-family: var(--mono);
  font-size: clamp(0.72rem, 0.62rem + 0.35vw, 0.82rem);
  line-height: 1.85;
  color: var(--fg);
  overflow-x: auto;
}
/* The hero's console reserves its height so the typing animation does not
   push the page around as it fills. A static transcript sizes to its own
   content instead, which is why this is not on .console pre. */
.hero .console pre { min-height: 16.5rem; }
.console.transcript { margin-top: 3rem; }
.console .t { color: var(--dim); }
.console .k { color: var(--accent); }
.console .g { color: var(--ok); }
.console .cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  background: var(--accent);
  vertical-align: -0.18em;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .console .cursor { animation: none; } }

/* ---- origin timeline ----------------------------------------------- */

.origin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gap);
  margin-top: 3rem;
}
.step {
  border-left: 2px solid var(--accent-dim);
  padding-left: 1.1rem;
}
.step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.step .when { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }
.step p { color: var(--dim); font-size: 0.925rem; margin: 0; }

/* ---- the stack ----------------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: 3px; margin-top: 3rem; }
.layer {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: 0.95rem 1.15rem;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 3px;
}
.layer:hover { border-color: var(--accent-dim); background: var(--surface-2); }
.layer .name { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); letter-spacing: 0.04em; }
.layer .what { color: var(--dim); font-size: 0.9rem; }
.layer.seam { background: var(--accent-dim); }
.layer.seam .name { color: var(--fg); }
.layer.seam .what { color: #C9BEEC; }
@media (max-width: 42rem) {
  .layer { grid-template-columns: 1fr; gap: 0.3rem; }
}
.seam-note { margin-top: 1.5rem; color: var(--dim); font-size: 0.9rem; }

/* ---- features ------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--gap);
  margin-top: 3rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.card h3 { font-size: 1.05rem; font-weight: 700; }
.card p { color: var(--dim); font-size: 0.925rem; margin: 0; max-width: none; }
.tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--dim);
}
.tag.runs   { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.tag.partial{ color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.tag.planned{ color: var(--dim); }

/* ---- numbers ------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--gap);
  margin-top: 3rem;
}
.figure { border-top: 1px solid var(--line); padding-top: 1rem; }
.figure b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.figure span { color: var(--dim); font-size: 0.85rem; }

/* ---- the crash screen: the one loud thing --------------------------- */

.crash { background: var(--psogm); color: #fff; }
.crash .wrap {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 44rem) { .crash .wrap { grid-template-columns: 1fr; } }
.crash img { width: 100%; max-width: 8rem; height: auto; }
.crash .eyebrow { color: #C3AEEC; }
.crash h2 { color: #fff; }
.crash p { color: #DBCEF5; }
.crash code { background: rgba(0, 0, 0, 0.28); color: #fff; }

/* ---- closing links -------------------------------------------------- */

.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gap); margin-top: 2.5rem; }
.link-card {
  display: block;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  text-decoration: none;
  color: var(--fg);
  background: var(--surface);
}
.link-card:hover { border-color: var(--accent); color: var(--fg); }
.link-card b { display: block; margin-bottom: 0.3rem; }
.link-card span { color: var(--dim); font-size: 0.875rem; }

footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3.5rem;
  color: var(--dim);
  font-size: 0.85rem;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
footer .mono { font-size: 0.78rem; }

/* ---- reveal on scroll ---------------------------------------------- */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* The SchFS mark, set beside its own card heading. Baseline-aligned rather
   than centred: it sits next to a word, so it follows the word. */
.card h3 .cardmark {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  margin-right: 0.4em;
}

/* =====================================================================
   The pride mark
   ---------------------------------------------------------------------
   Small, and permanent. It is in the top bar in November the same way it
   is in June, which is the only version of this that means anything --
   support with an end date is marketing.

   Deliberately not bigger than this. The site is about an operating
   system; the flag is a statement, not a subject.
   ===================================================================== */

.pride {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  border-radius: 2px;
  text-decoration: none;
}
.pride img {
  width: 26px;
  height: auto;
  display: block;
  border-radius: 2px;
  /* Sits down slightly against the dark ground so it reads as part of the
     bar rather than as a sticker on top of it; full colour on hover. */
  opacity: 0.85;
  transition: opacity .18s ease, transform .18s ease;
}
.pride:hover img { opacity: 1; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .pride img { transition: none; }
  .pride:hover img { transform: none; }
}

.pride-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-basis: 100%;
  color: var(--dim);
  font-size: 0.82rem;
}
.pride-note img { width: 20px; height: auto; border-radius: 2px; flex: none; }

/* =====================================================================
   The documentation reader
   ===================================================================== */

body.reading { display: flex; flex-direction: column; min-height: 100vh; }
body.reading footer { margin-top: auto; }

.docshell {
  width: min(100% - 2.5rem, 84rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 13rem;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding-block: 2.5rem 4rem;
}
@media (max-width: 72rem) { .docshell { grid-template-columns: 14rem minmax(0, 1fr); } .rail { display: none; } }
@media (max-width: 54rem) { .docshell { grid-template-columns: 1fr; } .sidebar .sticky { position: static; max-height: none; } }

.sticky {
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

.navgroup {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 1.6rem 0 0.5rem;
}
.navgroup:first-child { margin-top: 0; }

#docnav ul, #toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#docnav a, #toc a {
  display: block;
  padding: 0.28rem 0.6rem;
  margin-left: -0.6rem;
  border-radius: 3px;
  color: var(--dim);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.45;
}
#docnav a:hover, #toc a:hover { color: var(--fg); background: var(--surface); }
#docnav a.on {
  color: var(--fg);
  background: var(--accent-dim);
  box-shadow: inset 2px 0 0 var(--accent);
}
#toc .lvl3 a { padding-left: 1.5rem; font-size: 0.8rem; }

/* ---- prose ---------------------------------------------------------- */

.prose { max-width: 46rem; }
.prose .loading { color: var(--dim); font-family: var(--mono); font-size: 0.85rem; }

.prose h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
}
.prose h2 {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 2.75rem 0 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.prose h3 { font-size: 1.1rem; font-weight: 700; margin: 2rem 0 0.6rem; }
.prose h4, .prose h5, .prose h6 { font-size: 0.95rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: var(--dim); }

.prose p, .prose li { color: #C6CAD3; }
.prose p { margin: 0 0 1.1rem; max-width: none; }
.prose strong { color: var(--fg); }
.prose a { color: var(--accent); }

.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.35rem; display: flex; flex-direction: column; gap: 0.4rem; }
.prose li { line-height: 1.6; }
.prose li::marker { color: var(--accent); }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.25rem 0; }

.prose blockquote {
  margin: 1.4rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 2px solid var(--accent);
  color: var(--dim);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose pre.code {
  background: #090B0F;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.95rem 1.1rem;
  overflow-x: auto;
  margin: 0 0 1.3rem;
  position: relative;
}
.prose pre.code code {
  font-family: var(--mono);
  font-size: 0.815rem;
  line-height: 1.7;
  color: #CBD1DC;
  background: none;
  padding: 0;
  white-space: pre;
}
.prose pre.code[data-lang]::after {
  content: attr(data-lang);
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.prose :not(pre) > code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: #D8DCE4;
  padding: 0.08em 0.36em;
  border-radius: 3px;
}

.tablewrap { overflow-x: auto; margin: 0 0 1.4rem; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.prose th, .prose td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
  white-space: nowrap;
}
.prose td { color: #C6CAD3; }
.prose tbody tr:hover td { background: var(--surface); }

.prose img { max-width: 100%; height: auto; }

.top nav a.on { color: var(--fg); }

.readerlink { margin-top: 2rem; }

/* A footer note that is a paragraph rather than a credit line. Same width
   discipline as body text: these are read, not scanned. */
footer .note {
  flex-basis: 100%;
  max-width: 54rem;
  color: var(--dim);
  font-size: 0.82rem;
  line-height: 1.7;
}
footer .note b { color: var(--fg); font-weight: 700; }
footer .note a { color: var(--accent); }

/* The two notes sit below the identity line, not beside it. */
footer .wrap { row-gap: 1.5rem; }


/* ---- the download page --------------------------------------------- */
/*
 * Same components as the front page, arranged for a page with one job. The
 * hero here is a two-column split rather than a pitch: the action on the left,
 * and immediately beside it the thing a download page usually buries, which is
 * what this has actually been run on.
 */

.getit .wrap { align-items: start; }
.getit h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.1rem); }
.getit p  { color: var(--dim); }

h2.small {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  letter-spacing: -0.01em;
  margin: 0;
}

.getpanel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.getpanel p { font-size: 0.92rem; margin: 0.85rem 0 0; }

/* Not a data table -- a two-column list of claims, where the claim on the
   right is the whole content and should line up down the page. */
.support {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.25rem;
  font-size: 0.9rem;
}
.support td { padding: 0.55rem 0; border-top: 1px solid var(--line); }
.support tr:first-child td { border-top: 0; }
.support td:last-child { text-align: right; white-space: nowrap; }
.dimtext { color: var(--dim); }

.getit .filemeta {
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--dim);
}
.fineprint, .getpanel .fineprint, .card .fineprint {
  color: var(--dim);
  font-size: 0.82rem;
  line-height: 1.65;
}

/* Two columns rather than as-many-as-fit: these two are a pair to be compared,
   and a three-up row would put the destructive one somewhere it reads as an
   equal option. */
.cards.two { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }

/* A command you are meant to type, as opposed to output you are meant to read
   -- which is what .console is for. The prompt is dim because it is not part
   of what you type, and the part to substitute is the accent, because that is
   the only decision in the line. */
.cmd {
  margin: 1.1rem 0 0;
  padding: 0.8rem 0.9rem;
  background: #090B0F;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--fg);
  overflow-x: auto;
}
.cmd.block { margin-top: 2.5rem; font-size: 0.82rem; padding: 1.1rem 1.2rem; }
.cmd .p { color: var(--dim); user-select: none; }
.cmd .v { color: var(--accent); }
.cmd .c { color: var(--dim); }

/* The closing band on the front page. Same two-column shape as the crash
   section, so the page ends the way it turns: a mark on the left, the thing to
   do on the right. */
.getband { border-top: 1px solid var(--line); }
.getband .wrap {
  display: grid;
  grid-template-columns: clamp(5rem, 10vw, 8rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.getband img { width: 100%; height: auto; display: block; }
.getband .readerlink { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 40rem) {
  .getband .wrap { grid-template-columns: 1fr; }
  .getband img { width: 5rem; }
}