/* terminal.css — the document surfaces, in the site's own design system.
 *
 * templates/client-stack/docs/DESIGN-SYSTEM.md: turnkey.tech is a terminal.
 * /console and /book exist as real HTML because they need a form (§5), and
 * /pricing, /operations and /results are documents — but they are documents on
 * the same machine, so they use the terminal's palette, its one monospace face
 * and its rules, not a marketing template.
 *
 * Replaces site.css + landing.css + grainient on those pages. Class names are
 * unchanged: this is a presentation swap, no markup was rewritten.
 *
 *   §6  colour is a data type; background is true black
 *   §7  one font, one size — hierarchy from weight and colour, not type scale
 *   §8  borders at the dark value, titles at the bright value
 *   §9  a bar track must read as a measured axis, never empty space
 *   §12 hover feedback on every control
 */

:root {
  --bg:   #000000;   /* §6 true black — any offset seams against the TUI */
  --fg:   #CFFFE2;   /* body text          */
  --grn:  #4AFF8F;   /* primary, resolved  */
  --btn:  #5fd787;   /* xterm 78 — the button green the TUI uses */
  --cyn:  #29D8FF;   /* data, quantity     */
  --amb:  #FFB454;   /* needs a human, the "before" state */
  --dim:  #1c6b44;   /* labels, scaffolding */
  --gho:  #0F5A36;   /* rules, empty state  */
  --ink:  #000000;   /* on a filled control */
  --measure: 47rem; /* the text column; rem so h1 does not widen it */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box }

/* A class selector outranks the UA sheet's [hidden] rule, so any element we
   style by class (.book, .thanks) would stay on screen when the page toggles
   el.hidden. Restore the invariant. */
[hidden] { display: none !important }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--mono); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--grn); text-decoration: none }
a:hover, a:focus-visible { text-decoration: underline }
strong, b { color: var(--fg); font-weight: 700 }

/* ── chrome: square, dim (§8) ─────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; gap: 1.5ch;
  padding: 12px 24px; border-bottom: 1px solid var(--gho);
  flex-wrap: wrap;
}
.nav .logo, .brand {
  display: inline-flex; align-items: center; gap: 1ch;
  color: var(--grn); font-weight: 700; letter-spacing: .06em;
  text-decoration: none; margin-right: auto;
}
.brand { padding: 12px 24px }
.nav .logo:hover, .brand:hover { text-decoration: none; color: var(--btn) }
.logo-mark img, .brand img { display: block; width: 18px; height: 18px }
.nav-links { display: flex; align-items: center; gap: 2ch; flex-wrap: wrap }
.nav-links a { color: var(--dim) }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--grn); text-decoration: none }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--gho);
  color: var(--grn); font: inherit; padding: 2px 1ch; cursor: pointer;
}

/* ── document body ───────────────────────────────────────────────────── */
.doc { padding: 40px 24px 64px }
.doc-inner, .doc > h1, .doc > p, .doc > form, .doc > .thanks, .doc > .foot {
  max-width: var(--measure); margin-left: auto; margin-right: auto;
}
h1, h2, h3 { font: inherit; font-weight: 700; line-height: 1.35 }
h1 { color: var(--fg); font-size: 1.35em; margin: 0 0 .6em; letter-spacing: .02em }
h2 {
  color: var(--grn); margin: 2.4em 0 .7em; padding-top: .7em;
  border-top: 1px solid var(--gho);   /* §8 a rule the heading sits on */
}
h3 { color: var(--fg); margin: 0 0 .4em }
p { margin: 0 0 1em }

ul.inc { list-style: none; margin: 0 0 1.4em; padding: 0 }
ul.inc li { padding-left: 3ch; position: relative; margin: .2em 0 }
ul.inc li::before { content: "›"; position: absolute; left: 1ch; color: var(--dim) }

/* ── content panels: brighter border than the chrome (§8) ─────────────── */
.dept {
  border: 1px solid var(--dim); border-left-width: 2px;
  padding: 16px 20px; margin: 0 0 1.2em;
}
.dept h3 { color: var(--grn) }
.dept p:last-child { margin-bottom: 0 }

.ladder { display: grid; gap: 10px; margin: 0 0 2em }
.rung {
  display: flex; gap: 2ch; justify-content: space-between; align-items: flex-start;
  border: 1px solid var(--dim); padding: 14px 18px; flex-wrap: wrap;
}
.rung b { color: var(--dim); font-weight: 500; letter-spacing: .1em; font-size: .9em }
.rung h3 { color: var(--grn); margin: .15em 0 }
.rung p { margin: 0; color: var(--dim) }
.rung .amt { color: var(--cyn); text-align: right; white-space: nowrap }

/* numbers right-aligned at a fixed column so digits stack (§9) */
.price-block { border: 1px solid var(--gho); margin: 0 0 1.4em }
.price-block > div {
  display: flex; justify-content: space-between; gap: 2ch;
  padding: 8px 18px; border-bottom: 1px solid var(--gho);
}
.price-block > div:last-child { border-bottom: 0 }
.price-block > div > span:first-child { color: var(--dim) }
.price-block > div > span:last-child { color: var(--cyn); text-align: right; white-space: nowrap }

/* ── bars: the track must read as a measured axis, never a void (§9) ──── */
.bars { margin: 0 0 2em; display: grid; gap: 14px }
.bar-row > span { display: block; color: var(--fg); margin-bottom: 4px }
.track {
  position: relative; height: 14px; margin-bottom: 3px;
  background-image: repeating-linear-gradient(
    to right, var(--gho) 0 1px, transparent 1px 5px);   /* the '·' track */
}
.track i { display: block; height: 100%; }
.track::after {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 9px; letter-spacing: .1em; color: var(--dim);
}
.track.now::after   { content: "now" }
.track.after::after { content: "after" }
.track.now  i { background: var(--amb) }   /* before — needs a human */
.track.after i { background: var(--grn) }  /* after  — resolved      */

/* ── controls: the TUI button, ported (§12) ───────────────────────────── */
.cta-btn, .btn-orange, .btn, button.cta-btn, .book button {
  --notch-x: .6ch; --notch-y: .38em;
  display: inline-flex; align-items: center; gap: 1ch;
  padding: .42em 2.5ch; cursor: pointer;
  font: inherit; font-weight: 700; text-decoration: none;
  background: var(--btn); color: var(--ink);
  border: 1px solid var(--btn); outline: none;
  clip-path: polygon(
    var(--notch-x) 0, calc(100% - var(--notch-x)) 0,
    100% var(--notch-y), 100% calc(100% - var(--notch-y)),
    calc(100% - var(--notch-x)) 100%, var(--notch-x) 100%,
    0 calc(100% - var(--notch-y)), 0 var(--notch-y));
}
.cta-btn:hover, .cta-btn:focus-visible,
.btn-orange:hover, .btn-orange:focus-visible,
.btn:hover, .btn:focus-visible,
.book button:hover, .book button:focus-visible {
  background: transparent; color: var(--btn); clip-path: none; text-decoration: none;
}
/* the secondary action reads as an outline first */
.ask .btn {
  background: transparent; color: var(--btn); clip-path: none; font-weight: 500;
}
.ask .btn:hover, .ask .btn:focus-visible { background: var(--btn); color: var(--ink) }
.ask { display: flex; gap: 2ch; flex-wrap: wrap; margin: 2em 0 }
.cta-arrow svg { display: block }

/* ── forms (§5 — /book and /console are HTML because they need one) ───── */
.book { display: grid; gap: 14px; margin: 1.5em 0 }
.book label { display: grid; gap: 5px; color: var(--dim) }
.book input, .book textarea {
  font: inherit; color: var(--fg); background: var(--bg);
  border: 1px solid var(--dim); padding: .5em 1ch; width: 100%;
  caret-color: var(--grn); border-radius: 0;
}
.book textarea { min-height: 6.5em; resize: vertical }
.book input:focus, .book textarea:focus { outline: none; border-color: var(--grn) }
.book .actions { margin-top: .3em }
.err { color: var(--amb); margin: .6em 0 0 }
.foot { color: var(--dim) }
.thanks h2 { border-top: 0; padding-top: 0 }

/* ── footer ──────────────────────────────────────────────────────────── */
footer.site {
  display: flex; gap: 4ch; justify-content: space-between; flex-wrap: wrap;
  margin-top: 3em; padding-top: 1.2em;
  border-top: 1px solid var(--gho); color: var(--dim);
}
footer.site a { display: block; color: var(--dim) }
footer.site a:hover, footer.site a:focus-visible { color: var(--grn); text-decoration: none }
footer.site strong { color: var(--fg) }

/* ── narrow: drop a column rather than wrapping structure (§14) ───────── */
@media (max-width: 640px) {
  .nav { padding: 10px 16px }
  .doc { padding: 28px 16px 48px }
  .rung, .price-block > div { flex-direction: column; gap: .2ch }
  .rung .amt, .price-block > div > span:last-child { text-align: left }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important }
}