@charset "utf-8";
/**
 * OS3 site layer — built on top of "The Monospace Web" (src/index.css).
 * Adds: accent, top nav + hints, hero/typewriter, redaction reveal,
 * cards, status ticker, footer. All on the 1.20rem monospace grid,
 * light/dark adaptive, and prefers-reduced-motion safe.
 **/

/* Force the light (white) theme regardless of OS dark-mode preference.
   These load after index.css, so they win. */
:root {
  --text-color: #000;
  --text-color-alt: #666;
  --background-color: #fff;
  --background-color-alt: #eee;
  /* one restrained accent — signal orange */
  --accent: #c2410c;
  --accent-dim: color-mix(in srgb, var(--accent) 45%, var(--background-color));
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #000;
    --text-color-alt: #666;
    --background-color: #fff;
    --background-color-alt: #eee;
    --accent: #c2410c;
    --accent-dim: color-mix(in srgb, var(--accent) 45%, #fff);
  }
}

/* Links pick up the accent on hover, base stays monochrome. */
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* No auto-hyphenation — the base theme turns it on, which mangles words
   ("mod-els") and emails ("...robotics.-com"). Cleaner to wrap whole words. */
p, a, li, .lede {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
}

/* The theme adds margin-top to every adjacent sibling (* + *). Cancel it
   inside the flex rows we build so items stay top-aligned. */
.site-nav > * + *,
.foot-grid > * + *,
.legal > * + *,
.yc > * + *,
.cards > * + *,
nav button + button {
  margin-top: 0;
}

/* card row */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--line-height) 1ch;
  margin: 0 0 var(--line-height);
}
.cards > .card {
  flex: 1 1 22ch;
}

/* ----------------------------------------------------------------- NAV */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2ch;
  margin: 0 0 var(--line-height);
  padding-bottom: calc(var(--line-height) / 2);
  border-bottom: var(--border-thickness) solid var(--text-color);
  line-height: var(--line-height);
}
.site-nav a {
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  margin: 0;
}
.site-nav a::before {
  content: "/ ";
  color: var(--text-color-alt);
}
.site-nav a:first-child::before {
  content: "";
}
.site-nav a.current {
  color: var(--accent);
}
.site-nav a.current::after {
  content: " ◂";
  color: var(--accent);
}
.site-nav a:hover {
  color: var(--accent);
}

/* live hint line driven by data-hint on nav links */
.nav-hint {
  min-height: var(--line-height);
  margin: 0 0 calc(var(--line-height) * 1.5);
  color: var(--text-color-alt);
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-hint::before {
  content: "> ";
  color: var(--accent);
}

/* --------------------------------------------------------------- HERO */
.hero {
  margin: calc(var(--line-height) * 3) 0 calc(var(--line-height) * 2);
}

/* one-line intro under a heading */
.lede {
  color: var(--text-color);
  margin: 0 0 calc(var(--line-height) * 2);
}

/* minimal numbered statements (replaces heavy cards) */
.pillars {
  margin: 0 0 calc(var(--line-height) * 2);
}
.pillars p {
  margin: 0 0 calc(var(--line-height) / 2);
  padding-left: 3ch;
  text-indent: -3ch; /* hanging indent so wrapped lines align under the text */
}
.idx {
  color: var(--accent);
  font-weight: var(--font-weight-bold);
  margin-right: 1ch;
}
.hero .kicker {
  color: var(--text-color-alt);
  text-transform: uppercase;
  letter-spacing: 0.1ch;
  margin: 0;
}
.hero-type {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  line-height: calc(2 * var(--line-height));
  margin: 0;
  white-space: pre-wrap;
}
.cursor {
  color: var(--accent);
  animation: os3-blink 1.1s steps(1) infinite;
}
@keyframes os3-blink {
  50% { opacity: 0; }
}

/* ------------------------------------------------------------ REDACTED */
.redacted {
  background: var(--text-color);
  color: var(--text-color);
  border-radius: 1px;
  cursor: help;
  transition: background 0.12s, color 0.12s;
  outline: none;
}
.redacted:hover,
.redacted:focus-visible {
  background: transparent;
  color: var(--text-color);
  box-shadow: inset 0 calc(var(--border-thickness) * -1) 0 var(--accent);
}

/* ---------------------------------------------------- deploy form bits */
.hp { display: none !important; }
.form-status {
  color: var(--text-color-alt);
  min-height: var(--line-height);
  margin: 0 0 var(--line-height);
}
/* center the submit button even though the form fields are left-aligned */
#deploy-form nav {
  text-align: center;
}

/* ---------------------------------------------- work-in-progress note */
.wip {
  border: var(--border-thickness) dashed var(--accent);
  color: var(--text-color);
  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
  margin: 0 0 var(--line-height);
  text-align: left;
}

/* vertical (9:16) YouTube Short embed */
.short-embed {
  max-width: 340px;
  margin: var(--line-height) auto 0;
  aspect-ratio: 9 / 16;
  border: var(--border-thickness) solid var(--text-color);
}
.short-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ----------------------------------------------------------- TERMINAL */
.terminal {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
  margin: 0 0 var(--line-height);
}
.terminal .ln {
  margin: 0;
}
.terminal .ln::before {
  content: "$ ";
  color: var(--accent);
}
.terminal .out {
  color: var(--text-color-alt);
  margin: 0;
}

/* -------------------------------------------------------------- CARDS */
.card {
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
  margin: 0;
  outline: none;
  transition: box-shadow 0.15s;
}
.card:hover,
.card:focus-within {
  box-shadow: inset 0 calc(var(--border-thickness) * -1) 0 var(--accent);
}
.card h3 {
  margin: 0 0 calc(var(--line-height) / 2);
}
.card .lead {
  margin: 0;
}
.card .reveal {
  color: var(--text-color-alt);
  opacity: 0;
  margin: calc(var(--line-height) / 2) 0 0;
  transition: opacity 0.2s;
}
.card:hover .reveal,
.card:focus-within .reveal {
  opacity: 1;
}
.card .idx {
  color: var(--accent);
  font-weight: var(--font-weight-bold);
}

/* ------------------------------------------------------------ STATUS */
.status {
  color: var(--text-color-alt);
  margin: var(--line-height) 0;
}
.status .dot {
  color: var(--accent);
  animation: os3-blink 1.8s steps(1) infinite;
}

/* ------------------------------------------------------------- FOOTER */
.site-footer {
  margin-top: calc(var(--line-height) * 4);
  padding-top: var(--line-height);
  border-top: calc(var(--border-thickness) * 3) double var(--text-color);
  color: var(--text-color-alt);
}
.site-footer a { color: var(--text-color); }
.site-footer .made {
  color: var(--text-color);
  font-weight: var(--font-weight-medium);
  margin: 0 0 calc(var(--line-height) / 2);
}
.site-footer .foot-links {
  margin: 0 0 calc(var(--line-height) / 2);
}
.site-footer .yc {
  margin: var(--line-height) 0 0;
}
.site-footer .yc-badge {
  margin: 0 0.3ch;
}
.site-footer .yc img {
  height: 2em;
  width: auto;
  display: inline-block;
}
.site-footer .legal {
  margin: var(--line-height) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 2ch;
}
.site-footer .quiet a { color: var(--text-color-alt); }

.debug-toggle-label {
  display: block;
  text-align: right;
  color: var(--text-color-alt);
  font-size: 0.85em;
  margin: var(--line-height) 0 0;
}

/* --------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .cursor,
  .status .dot { animation: none; }
  .card .reveal { opacity: 1; transition: none; }
  .redacted { transition: none; }
}

/* =============== full-width canvas, centered content =============== */
body {
  max-width: min(96rem, 94vw);
  text-align: center;
  padding-top: 0; /* header box sits flush against the top */
}

.site-nav { justify-content: center; }
.nav-hint { text-align: center; }

/* readable centered columns for body copy */
.lede {
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
}
.pillars {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
p:not([class]) {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

/* center blocks, keep their internals readable */
figure { text-align: center; }
figure pre { display: inline-block; text-align: left; }
table:not(.header) {
  max-width: 84ch;
  margin-left: auto;
  margin-right: auto;
}
form {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
details {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.site-footer .legal { justify-content: center; }

/* YC badge as a CSS background — keeps index.js's media-grid logic off it */
.yc-badge {
  display: inline-block;
  width: 1.7em;
  height: 1.7em;
  background: url("../assets/yc-logo.svg") center / contain no-repeat;
  vertical-align: middle;
}

/* =============== night ops: soft dark theme (not pure black) =============== */
html.theme-dark {
  --text-color: #e9e7e3;
  --text-color-alt: #9b978f;
  --background-color: #1b1b1d;
  --background-color-alt: #27272a;
  --accent: #ef7d3c;
  --accent-dim: color-mix(in srgb, var(--accent) 45%, #1b1b1d);
}

/* theme toggle: the "3" in the OS3 wordmark flips day / night ops */
.t3 {
  color: var(--accent);
  cursor: pointer;
  outline: none;
}
.t3:hover,
.t3:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--border-thickness);
}

/* =============== small screens =============== */
@media screen and (max-width: 560px) {
  /* centered + capped columns read badly on a narrow screen — go left-aligned,
     full-width, and let the content breathe edge-to-edge. */
  body {
    text-align: left;
  }
  .lede,
  .pillars,
  p:not([class]),
  form,
  details,
  table:not(.header) {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .site-nav {
    justify-content: flex-start;
  }
  .nav-hint {
    text-align: left;
  }
  /* hero scales down so it doesn't wrap awkwardly */
  .hero-type {
    font-size: 1.6rem;
    line-height: calc(1.5 * var(--line-height));
  }
  /* keep the long contact email from overflowing its cell */
  .header td {
    word-break: break-word;
  }
  /* stack the two-up form fields instead of cramming them side by side */
  .grid {
    flex-direction: column;
  }
  .grid > * {
    flex: 1 1 auto;
    width: 100%;
  }
  /* ASCII diagrams: use the full width and scale to fit so they're not clipped */
  figure {
    margin-left: 0;
    margin-right: 0;
  }
  figure pre {
    font-size: clamp(7px, 2.5vw, 13px);
    line-height: 1.2;
  }
  /* footer identity stacks onto its own lines, centered, with breathing room */
  .site-footer {
    text-align: center;
  }
  .yc-item {
    display: block;
    margin-top: calc(var(--line-height) / 2);
  }
  .yc-item:first-child {
    margin-top: 0;
  }
  .yc-sep {
    display: none;
  }
}