/* open.gismo — convention over configuration for loading a study (2026-08-27)

   Base tokens are the obot report family's (executive overview 2026-07-21,
   goal atlas 2026-07-24, platform gap analysis 2026-07-25, open.gismo data
   loading 2026-08-27), so this sits with its siblings and inherits their
   light/dark contract: the full light palette on bare :root, the dark palette
   redefined twice — once under prefers-color-scheme guarded against an
   explicit light choice, once under [data-theme="dark"] so a toggle wins in
   both directions.

   Where this page departs from the family is deliberate and is the argument.
   The design being proposed has no graphical interface: its entire surface is
   a terminal and a set of text files under version control. So the mockups are
   terminal frames and unified diffs, rendered in a single fixed dark palette
   in both modes — a terminal looks like a terminal — and the page leans on the
   mono stack rather than the display stack wherever it is showing the product.

   Status marks always carry a glyph AND a written word. No colour-only state
   anywhere, in the chrome or in the mocks. Every wide block (terminal frames,
   diffs, tables) scrolls inside its own container so the body never scrolls
   horizontally at 390px. */

:root {
  --ground: #f4f6f7;
  --surface: #ffffff;
  --surface-2: #eef2f3;
  --ink: #16232d;
  --muted: #536470;
  --faint: #7f929e;
  --border: #dde4e7;
  --hairline: #e8edef;
  --accent: #0e7c86;
  --accent-deep: #0a5b63;
  --accent-tint: #e2f1f2;

  --good-ink: #0a6b0a;
  --good-tint: #e6f5e6;
  --warn-ink: #8a5d00;
  --warn-tint: #fdf3dd;
  --bad-ink: #a32424;
  --bad-tint: #fbe9e9;

  --f-display: "SF Pro Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Iowan Old Style", "Palatino Linotype", "Charter", Georgia, Cambria, "Times New Roman", serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(20, 40, 55, .05), 0 8px 24px -12px rgba(20, 40, 55, .14);
  --shadow-soft: 0 1px 2px rgba(20, 40, 55, .04);

  /* Terminal palette — fixed in both themes on purpose. */
  --t-bg: #10171d;
  --t-bg-2: #18222a;
  --t-ink: #d8e2e8;
  --t-dim: #8399a6;
  --t-green: #7ddc7d;
  --t-amber: #f0c46a;
  --t-red: #f58c8c;
  --t-cyan: #5fd0dc;
  --t-mag: #d9a2e8;
  --t-border: #263540;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0d141a; --surface: #141e26; --surface-2: #1a2831;
    --ink: #e7eef2; --muted: #9aabb6; --faint: #6f828e;
    --border: #263640; --hairline: #1f2d36;
    --accent: #3cc3d0; --accent-deep: #7fd8e0; --accent-tint: #0f2e33;
    --good-ink: #6fd36f; --good-tint: #12291a;
    --warn-ink: #e8bf62; --warn-tint: #2d2409;
    --bad-ink: #f08b8b; --bad-tint: #2e1414;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .25);
  }
}

:root[data-theme="dark"] {
  --ground: #0d141a; --surface: #141e26; --surface-2: #1a2831;
  --ink: #e7eef2; --muted: #9aabb6; --faint: #6f828e;
  --border: #263640; --hairline: #1f2d36;
  --accent: #3cc3d0; --accent-deep: #7fd8e0; --accent-tint: #0f2e33;
  --good-ink: #6fd36f; --good-tint: #12291a;
  --warn-ink: #e8bf62; --warn-tint: #2d2409;
  --bad-ink: #f08b8b; --bad-tint: #2e1414;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .25);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--accent-deep); }

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2.5rem 1.15rem 5rem;
}

/* ---------------------------------------------------------- masthead ---- */

.masthead { border-bottom: 2px solid var(--ink); padding-bottom: 1.4rem; margin-bottom: 2.2rem; }
.kicker {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: .7rem;
}
.masthead h1 {
  font-family: var(--f-serif);
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin-bottom: .7rem;
}
.standfirst { font-size: 1.06rem; color: var(--muted); max-width: 44rem; }
.byline { font-size: .84rem; color: var(--faint); margin-top: .9rem; max-width: 44rem; }

.parts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.3rem;
}
.parts a {
  font-family: var(--f-mono);
  font-size: .76rem;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: .3rem .8rem;
}
.parts a:hover { border-color: var(--accent); color: var(--accent-deep); }
.parts a[aria-current="page"] {
  background: var(--ink); color: var(--ground); border-color: var(--ink);
}

/* ------------------------------------------------------------ blocks ---- */

section { margin: 2.6rem 0; }
section > h2 {
  font-family: var(--f-serif);
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  line-height: 1.2;
  margin-bottom: .8rem;
  letter-spacing: -.01em;
}
section > h3, .card h3 {
  font-size: 1.02rem;
  margin: 1.5rem 0 .5rem;
  letter-spacing: -.005em;
}
section p + p { margin-top: .8rem; }
section p, section li { max-width: 46rem; }

.tldr {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-soft);
}
.tldr h2 {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: .6rem;
}

.callout {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin: 1.2rem 0;
}
.callout.bad { background: var(--bad-tint); border-color: color-mix(in srgb, var(--bad-ink) 30%, transparent); }
.callout.warn { background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn-ink) 30%, transparent); }
.callout.good { background: var(--good-tint); border-color: color-mix(in srgb, var(--good-ink) 30%, transparent); }
.callout .lede {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .4rem;
}

ul.plain, ol.plain { list-style: none; }
ul.bul { padding-left: 1.15rem; }
ul.bul li, ol.num li { margin: .4rem 0; }
ol.num { padding-left: 1.3rem; }

.mono, code { font-family: var(--f-mono); font-size: .88em; }
code {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: .05em .3em;
}

.note { font-size: .84rem; color: var(--faint); margin-top: .7rem; max-width: 46rem; }

/* -------------------------------------------------------------- kpis ---- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: .7rem;
  margin: 1.6rem 0 .6rem;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .9rem 1rem;
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.kpi .n {
  font-family: var(--f-serif);
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -.02em;
}
.kpi .l { font-size: .8rem; color: var(--muted); margin-top: .35rem; }

/* ---------------------------------------------------------- terminal ---- */

.term {
  background: var(--t-bg);
  border: 1px solid var(--t-border);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.2rem 0;
  box-shadow: var(--shadow);
}
.term .bar {
  background: var(--t-bg-2);
  border-bottom: 1px solid var(--t-border);
  padding: .45rem .8rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--t-dim);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.term .dots { letter-spacing: .18em; color: #46596a; }
.term pre {
  margin: 0;
  padding: .95rem 1rem;
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--t-ink);
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}
.term pre b { font-weight: 700; color: #fff; }
.p { color: var(--t-cyan); }
.g { color: var(--t-green); }
.a { color: var(--t-amber); }
.r { color: var(--t-red); }
.d { color: var(--t-dim); }
.m { color: var(--t-mag); }
.u { text-decoration: underline; text-underline-offset: 2px; }
.term.file .bar { color: var(--t-amber); }

/* Diff colouring keeps the glyph (+/-) so colour is never the only signal. */
.add { color: var(--t-green); }
.del { color: var(--t-red); }

/* -------------------------------------------------------- walkthrough --- */

.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 1.2rem 0 .2rem;
}
.stepper button {
  font-family: var(--f-mono);
  font-size: .72rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: .28rem .7rem;
  cursor: pointer;
}
.stepper button[aria-current="true"] {
  background: var(--ink); color: var(--ground); border-color: var(--ink);
}
.stepper button:hover { border-color: var(--accent); }

.frame { display: none; }
.frame.on { display: block; }
.frame > h3 {
  font-family: var(--f-serif);
  font-size: 1.3rem;
  margin: .9rem 0 .3rem;
}
.frame .who {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.navrow {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}
.navrow button {
  font-family: var(--f-mono);
  font-size: .78rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ground);
  border-radius: 6px;
  padding: .4rem .9rem;
  cursor: pointer;
}
.navrow button.ghost { background: transparent; color: var(--ink); }
.navrow button[disabled] { opacity: .35; cursor: default; }
.navrow .count { font-family: var(--f-mono); font-size: .75rem; color: var(--faint); }

.toggle {
  font-family: var(--f-mono);
  font-size: .76rem;
  border: 1px dashed var(--border);
  background: var(--surface);
  color: var(--accent-deep);
  border-radius: 6px;
  padding: .4rem .8rem;
  cursor: pointer;
}

/* ------------------------------------------------------------ tables ---- */

.tblwrap { overflow-x: auto; margin: 1.1rem 0; -webkit-overflow-scrolling: touch; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: .84rem;
  background: var(--surface);
}
th, td {
  text-align: left;
  padding: .5rem .65rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
thead th {
  border-bottom: 2px solid var(--border);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--surface);
}
tbody tr:hover { background: var(--surface-2); }
td.num { text-align: right; font-family: var(--f-mono); }
td.mono, th.mono { font-family: var(--f-mono); font-size: .8rem; }

.tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .7rem;
  border-radius: 999px;
  padding: .1rem .5rem;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.tag.ok { background: var(--good-tint); color: var(--good-ink); border-color: color-mix(in srgb, var(--good-ink) 35%, transparent); }
.tag.no { background: var(--bad-tint); color: var(--bad-ink); border-color: color-mix(in srgb, var(--bad-ink) 35%, transparent); }
.tag.part { background: var(--warn-tint); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn-ink) 35%, transparent); }

/* ------------------------------------------------------------- cards ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: .9rem;
  margin: 1.2rem 0;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.card h3 { margin-top: 0; }
.card .lbl {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
.card p, .card li { font-size: .9rem; }

.decision {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
  padding: 1rem 1.15rem;
  margin: .8rem 0;
}
.decision .id {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--accent-deep);
}
.decision h3 { margin: .25rem 0 .5rem; font-size: 1.02rem; }
.decision .rec {
  margin-top: .6rem;
  font-size: .9rem;
  background: var(--surface-2);
  border-radius: 6px;
  padding: .55rem .75rem;
}
.decision .rec b { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; }

footer.end {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--faint);
}
footer.end p + p { margin-top: .5rem; }

@media (max-width: 30rem) {
  .wrap { padding-left: .85rem; padding-right: .85rem; }
  .term pre { font-size: .72rem; padding: .8rem .7rem; }
  .kpi .n { font-size: 1.7rem; }
}