/* =============================================================================
   ddsdde — shared site styles
   =============================================================================
   One stylesheet for every page. Near-monochrome, one accent colour, a mono
   wordmark and generous whitespace. There are no gradients, no glows and no
   animation.

   The palette follows the operating system. There is no theme switch.
   ========================================================================== */

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

:root {
  --bg:      #ffffff;
  --bg-alt:  #fafafa;
  --ink:     #16181d;
  --ink-2:   #4a4f58;
  --ink-3:   #80858e;
  --rule:    #e4e6e9;
  --accent:  #1a4fd6;
  --pass:    #1f7a41;
  --neutral: #80858e;

  --code:    #12141a;
  --code-ink:#d8dbe0;

  /* Figure palette. The SVG figures use these so they follow the page
     theme instead of being baked-in screenshots. */
  --fig-bar:    #1b1e26;
  --fig-surface:#171a21;
  --fig-rule:   #2b2f38;
  --fig-dim:    #6e747d;
  --fig-txt:    #d8dbe0;
  --fig-body:   #a6abb4;
  --fig-sel:    #23324e;
  --fig-sel-t:  #cfe0ff;
  --fig-kw:     #7aa2f7;
  --fig-arg:    #c3a6ff;
  --fig-cm:     #6a9955;
  --fig-info:   #56b6c2;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;

  --pad: 32px;
  --max: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0e1014;
    --bg-alt:  #131519;
    --ink:     #e8eaed;
    --ink-2:   #a6abb4;
    --ink-3:   #6e747d;
    --rule:    #24272d;
    --accent:  #6f9bff;
    --pass:    #4ea86f;
    --neutral: #6e747d;
    --code:    #05060a;
    --fig-bar:    #10131a;
    --fig-surface:#0c0f15;
    --fig-rule:   #232833;
  }
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) }

a { color: inherit }
code { font-family: var(--mono); font-size: .92em }
kbd {
  font-family: var(--mono); font-size: .85em;
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 1px 5px; white-space: nowrap;
}

/* ── Nav ──────────────────────────────────────────────────────────────── */
nav {
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
}
nav .wrap {
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none }
.brand span {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  letter-spacing: .01em;
}
.nav-right { display: flex; align-items: center; gap: 26px }
.nav-right a { font-size: 14px; color: var(--ink-2); text-decoration: none }
.nav-right a:hover { color: var(--ink) }
.nav-right a.cta { color: var(--accent); font-weight: 500 }

/* ── Section rhythm ───────────────────────────────────────────────────── */
section { border-bottom: 1px solid var(--rule) }
section > .wrap { padding-top: 84px; padding-bottom: 84px }

.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px;
}
h2 {
  font-size: 28px; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.25; margin-bottom: 16px;
}
h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px }
.lede { font-size: 17px; color: var(--ink-2); max-width: 62ch }

/* ── Hero ─────────────────────────────────────────────────────────────── */
#hero > .wrap { padding-top: 88px; padding-bottom: 88px }
h1 {
  font-family: var(--mono);
  font-size: clamp(38px, 7vw, 56px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1;
  margin-bottom: 22px;
}
.hero-sub {
  font-size: 19px; line-height: 1.55; color: var(--ink-2);
  max-width: 58ch; margin-bottom: 14px;
}
.hero-note {
  font-size: 15px; color: var(--ink-3); max-width: 60ch; margin-bottom: 34px;
}

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: var(--bg);
  font-size: 15px; font-weight: 500;
  padding: 11px 20px; border-radius: 6px; text-decoration: none;
  transition: opacity .15s;
}
.btn:hover { opacity: .85 }

.meta {
  font-family: var(--mono); font-size: 13px; color: var(--ink-3);
  margin-top: 16px;
}

/* ── Code / inspector panel ───────────────────────────────────────────── */
.term {
  margin-top: 52px;
  background: var(--code); color: var(--code-ink);
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--rule);
}
.term-bar {
  padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: var(--mono); font-size: 12px; color: #767c87;
}
.term-body {
  padding: 20px 22px; font-family: var(--mono);
  font-size: 13px; line-height: 1.75; overflow-x: auto; white-space: pre;
}
.c-dim { color: #767c87 }
.c-key { color: #8fb4ff; font-weight: 600 }
.c-lbl { color: #767c87 }
.c-w   { color: #e0a45c }
.c-sel { background: #2a3350; color: #cfe0ff; border-radius: 2px }

/* ── Column blocks ────────────────────────────────────────────────────── */
.cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px;
  margin-top: 52px;
}
.col p { font-size: 15px; color: var(--ink-2) }
.col .n {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  display: block; margin-bottom: 12px;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin-top: 44px }
caption {
  text-align: left; font-family: var(--mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 12px;
}
th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--rule);
}
td {
  padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule);
  font-size: 14px; vertical-align: baseline; color: var(--ink-2);
}
td.mono { font-family: var(--mono); font-size: 13px; color: var(--ink) }
td.group {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  letter-spacing: .06em; text-transform: uppercase; padding-top: 30px;
}
.v { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; white-space: nowrap }
.v.p { color: var(--pass) }
.v.n { color: var(--neutral) }

.foot-note { margin-top: 22px; font-size: 14px; color: var(--ink-3); max-width: 68ch }

/* ── Feature list ─────────────────────────────────────────────────────── */
.feature-list { list-style: none; margin-top: 44px }
.feature-list li {
  display: grid; grid-template-columns: 210px 1fr; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.feature-list li:first-child { border-top: 1px solid var(--rule) }
.feature-list b { font-weight: 600; font-size: 15px }
.feature-list span { font-size: 15px; color: var(--ink-2) }

/* ── Download ─────────────────────────────────────────────────────────── */
#download { background: var(--bg-alt) }
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start }
.req { list-style: none; font-size: 15px; color: var(--ink-2) }
.req li {
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 20px;
}
.req li:first-child { padding-top: 0 }
.req b { font-weight: 500; color: var(--ink) }
.req span { font-family: var(--mono); font-size: 13px; color: var(--ink-3); text-align: right }
.fine { font-size: 13px; color: var(--ink-3); margin-top: 22px; line-height: 1.7 }
.fine a { color: var(--accent) }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer .wrap {
  padding-top: 28px; padding-bottom: 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
}
footer a { color: var(--ink-3); text-decoration: none; margin-left: 22px }
footer a:hover { color: var(--ink) }
footer .links { margin-left: -22px }

/* ── Docs layout ──────────────────────────────────────────────────────── */
.docs { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start }
.toc { position: sticky; top: 92px; font-size: 14px }
.toc-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}
.toc a {
  display: block; padding: 5px 0 5px 12px; color: var(--ink-2);
  text-decoration: none; border-left: 2px solid var(--rule);
}
.toc a:hover { color: var(--ink); border-left-color: var(--ink-3) }

.doc h2 { margin-top: 56px; scroll-margin-top: 84px }
.doc h2:first-child { margin-top: 0 }
.doc h3 { margin-top: 32px; scroll-margin-top: 84px }
.doc p  { font-size: 15px; color: var(--ink-2); margin-top: 12px; max-width: 68ch }
.doc ul, .doc ol { margin: 14px 0 0 20px; font-size: 15px; color: var(--ink-2); max-width: 68ch }
.doc li { margin-bottom: 7px }
.doc table { margin-top: 24px }

pre {
  background: var(--code); color: var(--code-ink);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px 18px; margin-top: 18px;
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  overflow-x: auto;
}
.note {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 16px; margin-top: 20px;
  font-size: 15px; color: var(--ink-2); max-width: 68ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════
   Four steps rather than one, because the page has three different kinds
   of wide content and each collapses at a different width:

     1024  the docs sidebar and the two-column download grid
      760  the three-column blocks, and the nav links fold away
      560  tables lose their least useful column; type steps down
      400  padding tightens for small phones

   The terminal block and the figures are the two things that cannot
   reflow. The terminal scrolls horizontally on purpose — Fortran is
   column-sensitive and wrapping it would be a lie. The figures are SVG
   with a viewBox, so they scale rather than scroll.
   ══════════════════════════════════════════════════════════════════════ */

/* Nothing may push the page wider than the viewport. */
html, body { max-width: 100%; overflow-x: hidden }
img, svg, table, pre { max-width: 100% }

@media (max-width: 1024px) {
  :root { --pad: 28px }
  .docs { grid-template-columns: 200px 1fr; gap: 36px }
  .dl-grid { gap: 40px }
}

@media (max-width: 860px) {
  .docs { grid-template-columns: 1fr; gap: 28px }
  .toc {
    position: static;
    border-bottom: 1px solid var(--rule); padding-bottom: 18px;
  }
  /* Contents becomes a wrapping row instead of a tall column. */
  .toc a {
    display: inline-block; border-left: none; padding: 4px 14px 4px 0;
  }
  .toc a:hover { border-left: none }
}

@media (max-width: 760px) {
  :root { --pad: 20px }
  section > .wrap { padding-top: 56px; padding-bottom: 56px }

  h2 { font-size: 24px }
  .lede { font-size: 16px }
  .hero-sub { font-size: 17px }

  .cols, .dl-grid { grid-template-columns: 1fr; gap: 32px }
  .feature-list li { grid-template-columns: 1fr; gap: 6px }

  /* The nav keeps only the download link; the rest is reachable by
     scrolling, and a hamburger for two links is not worth the code. */
  .nav-right a:not(.cta) { display: none }
  nav .wrap { height: 54px }

  footer .wrap { flex-direction: column; align-items: flex-start; gap: 12px }
  footer .links { margin-left: -22px }

  .fig { margin-top: 32px }
  .fig figcaption { font-size: 13px }
}

@media (max-width: 560px) {
  h1 { font-size: 34px }
  h2 { font-size: 21px }
  .hero-sub { font-size: 16px }
  .hero-note, .lede { font-size: 15px }
  .btn { width: 100%; justify-content: center }

  /* Drop the formula column: the test name and the verdict carry the
     meaning, and three columns fit where five do not. */
  td.form, th:nth-child(3) { display: none }
  td, th { font-size: 13px }
  td { padding: 10px 8px 10px 0 }

  .req li { flex-direction: column; gap: 2px }
  .req span { text-align: left }

  .term-body { font-size: 11px; padding: 14px 16px }
  .term-bar  { font-size: 11px; padding: 8px 14px }

  .doc p, .doc li { font-size: 14px }
  pre { font-size: 11.5px; padding: 12px 14px }
}

@media (max-width: 400px) {
  :root { --pad: 14px }
  h1 { font-size: 29px }
  .eyebrow { font-size: 11px }
  .fig figcaption { font-size: 12.5px }
}

/* Touch devices: give tap targets room and drop hover-only affordances. */
@media (hover: none) {
  .nav-right a, footer a, .toc a { padding-top: 6px; padding-bottom: 6px }
  .btn { padding: 13px 22px }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition: none !important }
}

/* ── Figures ──────────────────────────────────────────────────────────────
   SVG reproductions of the interface. Drawn rather than photographed, so
   they stay sharp and follow the page theme. See figures.html for notes. */
.fig { margin: 44px 0 0 }
.fig svg {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 8px;
}
.fig figcaption {
  margin-top: 14px; font-size: 14px; line-height: 1.7;
  color: var(--ink-3); max-width: 68ch;
}
.fig figcaption code, .fig figcaption kbd { color: var(--ink-2) }

/* Type scale inside the figures. Set once here rather than per element. */
.f-mono  { font-family: var(--mono); font-size: 11px }
.f-ui    { font-family: var(--sans); font-size: 11px }
.f-badge { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .06em }
.f-h1    { font-size: 20px; font-weight: 600 }
.f-h2    { font-family: var(--sans); font-size: 13px; font-weight: 600 }
.f-dim   { fill: var(--fig-dim) }
.f-txt   { fill: var(--fig-txt) }
.f-body  { fill: var(--fig-body) }