/* gooddev.app — "robot owner's manual".
   Layout: left-aligned manual pages on cool lab paper; the robot is the hero, the two
   services are riveted spec plates, the process is a track. One accent: safety orange. */

:root {
  /* Palette */
  --paper: oklch(0.965 0.01 245);        /* cool lab paper */
  --panel: oklch(0.99 0.004 245);        /* plate / bar surface */
  --sunk: oklch(0.93 0.014 245);         /* recessed rows */
  --ink: oklch(0.26 0.045 258);          /* machine navy */
  --ink-soft: oklch(0.4 0.035 258);
  --ink-muted: oklch(0.52 0.03 258);
  --rule: oklch(0.82 0.02 250);
  --signal: oklch(0.66 0.19 42);         /* safety orange, the only accent */
  --signal-text: oklch(0.54 0.18 40);    /* orange that passes as small text */
  --on-signal: oklch(0.22 0.04 258);
  --grid: oklch(0.26 0.045 258 / 0.05);

  /* Robot + screens stay the same in both themes, like real hardware */
  --robot-shell: oklch(0.94 0.012 245);
  --robot-part: oklch(0.82 0.022 250);
  --robot-line: oklch(0.26 0.045 258);
  --robot-stick: var(--robot-line);
  --screen: oklch(0.24 0.04 258);
  --led: oklch(0.83 0.15 70);            /* amber eye LEDs */
  --led-off: oklch(0.36 0.04 258);
  --term-ink: oklch(0.92 0.01 245);
  --term-muted: oklch(0.8 0.02 245);
  --term-ok: oklch(0.8 0.14 150);
  --term-warn: oklch(0.82 0.14 75);

  --plate-shadow: oklch(0.26 0.045 258);
  --cta-edge: var(--robot-line);

  /* Type */
  --font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale: 13 / 15 / 17 / 19 / 24 / 34-48 / 56-100 */
  --t-xs: 13px;
  --t-sm: 15px;
  --t-md: 17px;
  --t-lg: 19px;
  --t-xl: 24px;
  --t-2xl: clamp(34px, 4.6vw, 48px);
  --t-hero: clamp(56px, 8.4vw, 100px);

  --max: 1140px;
  --gutter: 24px;
  --radius: 10px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(0.22 0.035 258);
    --panel: oklch(0.26 0.038 258);
    --sunk: oklch(0.2 0.032 258);
    --ink: oklch(0.95 0.008 245);
    --ink-soft: oklch(0.85 0.015 245);
    --ink-muted: oklch(0.7 0.025 250);
    --rule: oklch(0.38 0.035 258);
    --signal: oklch(0.74 0.17 48);
    --signal-text: oklch(0.78 0.15 52);
    --grid: oklch(0.95 0.008 245 / 0.04);

    --robot-stick: var(--robot-part);
    --screen: oklch(0.17 0.03 258);
    --plate-shadow: oklch(0.12 0.03 258);
    --cta-edge: var(--signal);

    color-scheme: dark;
  }
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--signal); color: var(--on-signal); }

a { color: var(--signal-text); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

h1, h2, h3 { text-wrap: balance; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
}
.skip-link:focus { top: 16px; }

.label {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- Top bar ---------- */

.topbar {
  border-bottom: 2px solid var(--ink);
  background: var(--panel);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--term-ok);
  box-shadow: 0 0 0 3px oklch(0.8 0.14 150 / 0.25);
}

.footnote-mark { color: var(--signal-text); }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: center;
  padding-block: 64px 80px;
}

.hero-copy { min-width: 0; }

.headline {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.headline-top,
.headline-accent { display: block; }

.headline-top { font-size: 0.62em; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.headline-accent { color: var(--signal); }

.lede {
  max-width: 33em;
  margin: 0 0 28px;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink-soft);
}
.lede strong { color: var(--ink); }

.terminal-wrap {
  margin: 0 0 32px;
  max-width: 560px;
  overflow-x: auto;
  background: var(--screen);
  border-radius: var(--radius);
  border: 2px solid var(--robot-line);
}

.terminal {
  margin: 0;
  padding: 16px 18px;
  min-height: 11.8em;
  color: var(--term-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre;
}

.t-prompt { color: var(--led); }
.t-ok { color: var(--term-ok); }
.t-warn { color: var(--term-warn); }

.t-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--led);
  animation: blink-cursor 1s steps(1) infinite;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 24px;
  border: 2px solid var(--robot-line);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

/* The primary button is a physical key: it sits up, and goes down when pressed. */
.button-primary {
  background: var(--signal);
  color: var(--on-signal);
  box-shadow: 0 5px 0 var(--plate-shadow);
}
.button-primary:hover { color: var(--on-signal); transform: translateY(-1px); box-shadow: 0 6px 0 var(--plate-shadow); }
.button-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--plate-shadow); }

.button-quiet {
  padding-inline: 0;
  border: 0;
  min-height: 0;
  background: none;
  color: var(--ink);
  font-size: var(--t-sm);
}
.button-quiet:hover { color: var(--signal-text); }

/* ---------- Robot ---------- */

.hero-robot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.speech {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 0 6px;
  max-width: 300px;
  min-height: 3.3em;
  padding: 12px 16px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  text-align: center;
}

.speech::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: var(--panel);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

.speech.is-new { animation: pop 0.22s ease-out; }

.robot-button {
  display: block;
  width: min(100%, 330px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.robot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transition: transform 0.2s ease;
}

.robot-button:hover .robot { transform: translateY(-3px); }
.robot-button.is-poked .robot { animation: wobble 0.45s ease-in-out; }

.r-shadow { fill: oklch(0.26 0.045 258 / 0.14); }

.r-shell, .r-part, .r-screen, .r-antenna, .r-led, .r-hand {
  stroke: var(--robot-line);
  stroke-width: 4;
}
.r-stick { stroke: var(--robot-stick); stroke-width: 5; stroke-linecap: round; }
.r-shell { fill: var(--robot-shell); }
.r-part { fill: var(--robot-part); }
.r-screen { fill: var(--screen); }
.r-hand { fill: var(--signal); }
.r-antenna { fill: var(--signal); }

.r-eye { fill: var(--led); transition: fill 0.3s ease; }
.r-eyes { transition: transform 0.12s ease-out; }
.r-blink {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 6s infinite;
}

.r-mouth {
  fill: none;
  stroke: var(--led);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke 0.3s ease, d 0.2s ease;
}
.robot-button.is-poked .r-mouth { d: path('M112 128 Q130 150 148 128'); }

.r-led { stroke-width: 2.5; transition: fill 0.3s ease; }
.r-led-1 { fill: var(--led); }
.r-led-2 { fill: var(--term-ok); }
.r-led-3 { fill: var(--signal); }

.r-label {
  fill: var(--robot-line);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.r-wave {
  transform-box: view-box;
  transform-origin: 196px 199px;
  transform: rotate(-45deg);
}
.robot-button.is-waving .r-wave { animation: wave 0.7s ease-in-out 3; }

/* Powered-down state, only ever set by app.js while the boot log replays. */
.robot-button.is-booting .r-eye,
.robot-button.is-booting .r-led { fill: var(--led-off); }
.robot-button.is-booting .r-mouth { stroke: var(--led-off); }
.robot-button.is-booting .r-antenna { animation: antenna 0.5s steps(1) infinite; }

.plate-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Sections ---------- */

.section { padding-block: 56px; }

.section-title {
  margin: 0 0 36px;
  max-width: 20em;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Spec plates: the only boxed objects on the page. Rivets in each corner. */
.modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.plate {
  --rivet: radial-gradient(circle, var(--rule) 0 3px, var(--ink-muted) 3.5px 4.5px, transparent 5px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 32px 28px;
  background:
    var(--rivet) top 10px left 10px / 12px 12px no-repeat,
    var(--rivet) top 10px right 10px / 12px 12px no-repeat,
    var(--rivet) bottom 10px left 10px / 12px 12px no-repeat,
    var(--rivet) bottom 10px right 10px / 12px 12px no-repeat,
    var(--panel);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--plate-shadow);
}

.plate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.plate-chip {
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--signal);
  color: var(--on-signal);
}

.plate-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.15;
}

.plate-body { margin: 0 0 18px; color: var(--ink-soft); }

.plate-list {
  display: grid;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.plate-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-soft);
}

.plate-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--signal);
}

.spec {
  display: grid;
  gap: 1px;
  margin: auto 0 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.spec div {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: 12px;
  padding: 9px 14px;
  background: var(--sunk);
}

.spec dt {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.spec dd { margin: 0; font-size: var(--t-sm); color: var(--ink); }

/* Process track: a line with numbered stops, no boxes. */
.track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.track::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  border-top: 2px dashed var(--rule);
}

.track-step { position: relative; min-width: 0; }

.track-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--panel);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
}

.track-step:first-child .track-node { background: var(--signal); color: var(--on-signal); }

.track-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}

.track-body { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }

/* ---------- Laws ---------- */

.laws {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.law {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
}

.law-num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-text);
}

.law p {
  margin: 0;
  max-width: 36em;
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.45;
}

/* ---------- CTA ---------- */

.cta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  margin-block: 40px 80px;
  padding: 40px;
  background: var(--screen);
  color: var(--term-ink);
  border: 2px solid var(--cta-edge);
  border-radius: 14px;
}

.cta-copy { flex: 1 1 340px; min-width: 0; }

.cta-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.08;
}

.cta-body { margin: 0; color: var(--term-muted); }

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  min-width: 0;
}

.cta-email {
  font-family: var(--font-mono);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  color: var(--led);
  overflow-wrap: anywhere;
}
.cta-email:hover { color: var(--term-ink); }

.button-copy {
  min-height: 42px;
  padding: 8px 16px;
  font-size: var(--t-xs);
  background: transparent;
  color: var(--term-ink);
  border-color: var(--term-muted);
}
.button-copy:hover { background: oklch(1 0 0 / 0.08); }

/* ---------- Footer ---------- */

.footer {
  border-top: 2px solid var(--ink);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 22px;
}

.footer p { margin: 0; }

/* ---------- Animations ---------- */

@keyframes blink-cursor { 50% { opacity: 0; } }
@keyframes antenna { 50% { fill: var(--led-off); } }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(0.1); } }
@keyframes wave { 0%, 100% { transform: rotate(-45deg); } 50% { transform: rotate(-75deg); } }
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg) scale(1.03); }
  50% { transform: rotate(5deg) scale(0.98); }
  75% { transform: rotate(-3deg); }
}
@keyframes pop { from { transform: scale(0.94); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; padding-block: 40px 56px; }
  .hero-robot { order: -1; }
  .robot-button { width: min(100%, 230px); }
  .modules { grid-template-columns: 1fr; }
  .track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .track::before { display: none; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .status-pill { font-size: 11px; }
  .lede { font-size: var(--t-md); }
  .terminal { font-size: 12px; padding: 14px; }
  .plate { padding: 26px 20px 22px; }
  .spec div { grid-template-columns: 1fr; gap: 2px; }
  .track { grid-template-columns: 1fr; }
  .law { grid-template-columns: 1fr; gap: 4px; }
  .cta-panel { padding: 28px 20px; }
}