/* clifford.bot — Spec Sheet design system
   Palette is strict: #000 ink, #fff paper, #0000ee links, #f0f0f0 chip gray. */

:root {
  --ink: #000;
  --paper: #f8f8f8;
  --blue: #0000ee;
  --chip: #e8e8e8;
  --muted: #555;
  --muted2: #777;
  --hair: #d6d6d6;
  --row-pad: 24px;
  --hero-scale: 1;
  --font: 'Martian Mono', monospace;
}

/* dark mode — greys, never pure #000/#fff */
html[data-theme="dark"] {
  --ink: #d6d6d6;
  --paper: #161616;
  --blue: #7d9bff;
  --chip: #242424;
  --muted: #9a9a9a;
  --muted2: #8a8a8a;
  --hair: #333;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { color-scheme: only light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
a.plain { color: var(--ink); }

/* ---------- top bar ---------- */
.sp-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 20px 48px; border-bottom: 2px solid var(--ink); font-size: 12px;
  flex-wrap: wrap;
}
.sp-top .brand { font-weight: 800; color: var(--ink); text-decoration: none; }
.sp-top .links { display: flex; gap: 28px; flex-wrap: wrap; }
.sp-top .meta { display: flex; gap: 10px; align-items: baseline; }
.sp-badge {
  display: inline-block; border: 2px solid var(--ink); padding: 3px 8px;
  font-weight: 800; font-size: 10px; letter-spacing: .1em; background: var(--paper);
}

/* ---------- hero ---------- */
.sp-hero { padding: 56px 48px 50px; border-bottom: 2px solid var(--ink); }
.sp-h1 {
  font-size: calc(clamp(44px, 8.3vw, 120px) * var(--hero-scale));
  line-height: .95; margin: 0 0 34px; font-weight: 800; letter-spacing: -.04em;
  text-wrap: balance; overflow-wrap: break-word;
}
.sp-claim { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.sp-claim p { font-size: 14.5px; line-height: 1.9; margin: 0; max-width: 580px; text-wrap: pretty; }
.sp-install { font-size: 12.5px; border: 2px solid var(--ink); padding: 16px 20px; background: #000; color: #fff; overflow-wrap: break-word; }
.sp-install b { font-weight: 800; }
.sp-install-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.sp-cmd-line { white-space: pre-wrap; }
.sp-cmd-line .dollar { color: #888; font-weight: 800; user-select: none; }
.sp-install .sp-copy { color: #fff; }
.sp-install-note { display: block; margin-top: 10px; font-size: 10.5px; color: var(--muted); }
.sp-copy {
  background: none; border: none; cursor: pointer; padding: 2px; color: var(--ink);
  display: flex; align-items: center; flex-shrink: 0; opacity: .55;
}
.sp-copy:hover { opacity: 1; }
.sp-copy svg { display: block; }

/* ---------- figure rows (terminal, schematic) ---------- */
.sp-figrow { display: grid; grid-template-columns: 280px 1fr; border-bottom: 2px solid var(--ink); }
.sp-figrow .cap { padding: 28px; border-right: 2px solid var(--ink); font-size: 12px; line-height: 1.9; }
.sp-figrow .cap b { display: block; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.sp-figrow .cap .sub { color: var(--muted); }

/* terminal theme (element is <clifford-term>) */
.sp-figrow clifford-term, clifford-term.sp-term {
  --ct-bg: #000; --ct-fg: #fff; --ct-dim: #7d7d7d; --ct-accent: #fff; --ct-ok: #fff; --ct-out: #b0b0b0;
  --ct-border: #000; --ct-font: var(--font); --ct-radius: 0px; --ct-height: 340px; --ct-size: 13px;
  border: none;
}

/* ---------- spec table ---------- */
.sp-table { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.sp-row { display: grid; grid-template-columns: 64px 280px 1fr calc(30ch + 56px); border-top: 1px solid var(--ink); }
.sp-row:first-child { border-top: none; }
.sp-row > div { padding: var(--row-pad) 28px; font-size: 13px; line-height: 1.8; border-right: 1px solid var(--ink); }
.sp-row > div:last-child { border-right: none; }
.sp-row .n, .sp-row .t { font-weight: 800; }
.sp-row .cmd { background: var(--chip); align-self: stretch; overflow-wrap: break-word; }

/* ---------- section label bars ---------- */
.sp-secbar {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--ink); color: var(--paper); padding: 10px 48px;
  border-top: 6px solid var(--paper); border-bottom: 6px solid var(--paper);
  font-size: 11px; letter-spacing: .12em;
}

/* ---------- fig 2: annotated yaml ---------- */
.sp-schematic { display: grid; grid-template-columns: 280px 1fr 1fr; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.sp-schematic .cap { padding: 28px; border-right: 2px solid var(--ink); font-size: 12px; line-height: 1.9; }
.sp-schematic .cap b { display: block; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.sp-schematic pre {
  margin: 0; padding: 28px; background: #000; color: #fff;
  border-right: 1px solid var(--ink);
  font-family: var(--font); font-size: 12.5px; line-height: 2; overflow-x: auto;
}
.sp-schematic pre .mark { background: #fff; color: #000; font-weight: 800; padding: 0 4px; }
.sp-notes { display: flex; flex-direction: column; }
.sp-note { display: grid; grid-template-columns: 44px 1fr; border-top: 1px solid var(--ink); flex: 1; }
.sp-note:first-child { border-top: none; }
.sp-note .m { border-right: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.sp-note .b { padding: 16px 22px; font-size: 12px; line-height: 1.85; display: flex; flex-direction: column; justify-content: center; }
.sp-note .b b { font-weight: 800; }

/* ---------- quickstart ---------- */
.sp-steps { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.sp-step { display: grid; grid-template-columns: 64px calc(46ch + 56px) 1fr; border-top: 1px solid var(--ink); }
.sp-step:first-child { border-top: none; }
.sp-step > div { padding: var(--row-pad) 28px; font-size: 13px; line-height: 1.8; border-right: 1px solid var(--ink); }
.sp-step > div:last-child { border-right: none; }
.sp-step .n { font-weight: 800; }
.sp-step .cmd { background: var(--chip); font-size: 12.5px; overflow-wrap: break-word; }
.sp-step .cmd b { font-weight: 800; }

/* ---------- compatibility ---------- */
.sp-compat { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.sp-compat .col + .col { border-left: 2px solid var(--ink); }
.sp-compat h3 { margin: 0; padding: 18px 28px 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.sp-compat table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.sp-compat td { border-top: 1px solid var(--ink); padding: 14px 28px; font-size: 12.5px; line-height: 1.7; }
.sp-compat td.st { width: 160px; font-weight: 800; white-space: nowrap; }
.sp-compat td.st.dim { color: var(--muted2); font-weight: 400; }

/* ---------- mode toggle ---------- */
.sp-mode { display: inline-flex; border: 2px solid var(--ink); overflow: hidden; }
.sp-mode button {
  font-family: var(--font); font-size: 10px; font-weight: 800; letter-spacing: .1em;
  padding: 5px 11px; border: none; background: var(--paper); color: var(--muted);
  cursor: pointer; line-height: inherit; transition: background .12s, color .12s;
}
.sp-mode button + button { border-left: 2px solid var(--ink); }
.sp-mode button.active {
  background: var(--ink); color: var(--paper);
  pointer-events: none;
}

/* ---------- footer ---------- */
.sp-foot { display: flex; justify-content: space-between; gap: 16px; padding: 24px 48px; font-size: 11px; flex-wrap: wrap; }

/* ---------- density tweak ---------- */
[data-density="packed"] { --row-pad: 13px; }
[data-density="packed"] .sp-hero { padding: 40px 48px 38px; }
[data-density="packed"] .sp-h1 { margin-bottom: 24px; }

/* ============ docs ============ */
.dx-wrap { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100vh - 60px); }
.dx-side { border-right: 2px solid var(--ink); padding: 28px 0; }
.dx-side .hd { padding: 0 28px 14px; font-size: 11px; letter-spacing: .12em; font-weight: 800; }
.dx-side nav { display: flex; flex-direction: column; }
.dx-side nav a {
  padding: 11px 28px; font-size: 12.5px; color: var(--ink); text-decoration: none;
  border-top: 1px solid var(--hair);
}
.dx-side nav a:last-child { border-bottom: 1px solid var(--hair); }
.dx-side nav a.active { background: var(--ink); color: var(--paper); font-weight: 800; }
.dx-side nav a .ix { display: inline-block; width: 38px; font-weight: 800; }
.dx-side .drop-note { padding: 18px 28px 0; font-size: 10.5px; line-height: 1.8; color: var(--muted2); }
.dx-main { padding: 44px 56px 80px; max-width: 880px; }
.dx-main .crumb { font-size: 11px; letter-spacing: .12em; margin-bottom: 30px; color: var(--muted); }
.dx-mobile-nav { display: none; padding: 16px 24px; border-bottom: 2px solid var(--ink); }
.dx-mobile-nav select {
  width: 100%; font-family: var(--font); font-size: 13px; padding: 10px 12px;
  border: 2px solid var(--ink); background: var(--paper); border-radius: 0;
}

/* markdown content, spec-styled */
.md { font-size: 13.5px; line-height: 1.95; }
.md h1 { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 28px; text-wrap: balance; }
.md h2 {
  font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  margin: 44px 0 16px; padding: 8px 14px; background: var(--ink); color: var(--paper);
}
.md h3 { font-size: 14px; font-weight: 800; margin: 32px 0 10px; }
.md p { margin: 0 0 16px; text-wrap: pretty; }
.md code { background: var(--chip); padding: 2px 6px; font-size: .92em; }
.md pre { background: #000; color: #fff; border: 1px solid var(--ink); padding: 20px 24px; overflow-x: auto; margin: 0 0 20px; }
.md pre code { background: none; padding: 0; color: inherit; font-size: 12.5px; line-height: 1.9; }
.md pre .dollar { font-weight: 800; user-select: none; }
.md ul, .md ol { margin: 0 0 16px; padding-left: 26px; }
.md li { margin-bottom: 6px; }
.md blockquote { margin: 0 0 16px; border-left: 4px solid var(--ink); padding: 4px 0 4px 18px; color: var(--muted); }
.md table { border-collapse: collapse; margin: 0 0 22px; width: 100%; }
.md th { background: var(--ink); color: var(--paper); text-align: left; font-size: 11px; letter-spacing: .1em; padding: 8px 14px; }
.md td { border: 1px solid var(--ink); padding: 10px 14px; font-size: 12.5px; line-height: 1.7; vertical-align: top; }
.md hr { border: none; border-top: 2px solid var(--ink); margin: 36px 0; }
.md strong { font-weight: 800; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .sp-row { grid-template-columns: 64px 220px 1fr calc(30ch + 56px); }
  .sp-schematic { grid-template-columns: 220px 1fr 1fr; }
}
@media (max-width: 920px) {
  .sp-hero, .sp-top, .sp-secbar, .sp-foot { padding-left: 24px; padding-right: 24px; }
  .sp-claim { grid-template-columns: 1fr; gap: 28px; }
  .sp-figrow { grid-template-columns: 1fr; }
  .sp-figrow .cap { border-right: none; border-bottom: 2px solid var(--ink); }
  .sp-schematic { grid-template-columns: 1fr; }
  .sp-schematic .cap { border-right: none; border-bottom: 2px solid var(--ink); }
  .sp-notes .sp-note:first-child { border-top: 1px solid var(--ink); }
  .sp-row { grid-template-columns: 1fr; border-top: 2px solid var(--ink); }
  .sp-row > div { border-right: none; padding: 12px 24px; }
  .sp-row .n { padding-bottom: 0; }
  .sp-row .t { padding-top: 4px; padding-bottom: 4px; }
  .sp-row .cmd { margin: 8px 24px 16px; padding: 12px 16px; }
  .sp-step { grid-template-columns: 1fr; border-top: 2px solid var(--ink); }
  .sp-step > div { border-right: none; padding: 12px 24px; }
  .sp-step .cmd { margin: 4px 24px 16px; padding: 12px 16px; }
  .sp-compat { grid-template-columns: 1fr; }
  .sp-compat .col + .col { border-left: none; border-top: 2px solid var(--ink); }
  .dx-wrap { grid-template-columns: 1fr; }
  .dx-side { display: none; }
  .dx-mobile-nav { display: block; }
  .dx-main { padding: 32px 24px 60px; }
}