/* ==========================================================================
   site.css — layout, typography and reusable content blocks.
   Colours/fonts come from theme.css. No page-specific rules live here;
   every block is meant to be dropped into any page.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--text);
  font: 400 var(--step-0)/1.75 var(--font-body);
}

/* --------------------------------------------------------------------------
   Panel — the dark column that sits on top of the snow
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, var(--panel-width));
  margin: clamp(1rem, 6vh, 4.5rem) auto;
  padding: 0 var(--gutter) 2rem;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--orange-lo) 45%, transparent);
  border-radius: var(--radius);
  box-shadow:
    0 0 0 1px #000,
    0 0 40px color-mix(in srgb, var(--orange) 10%, transparent);
}

/* --------------------------------------------------------------------------
   Site header + nav  (markup lives in partials/header.html)
   -------------------------------------------------------------------------- */
.site-header {
  padding: 2rem 0 1.1rem;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}

.site-title {
  margin: 0;
  font: 600 var(--step-title)/1 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--orange);
  text-shadow:
    0 0 1px var(--orange-hi),
    0 0 18px color-mix(in srgb, var(--orange) 45%, transparent);
}
.site-title a { color: inherit; text-decoration: none; }

.site-nav {
  margin-top: .9rem;
  font-weight: 600;
  color: var(--muted);
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .15rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* " :: " separators between items, drawn by CSS so the markup stays a plain list */
.site-nav li + li::before { content: "::"; margin: 0 .6rem; color: var(--muted); }
.site-nav a::before { content: "["; color: var(--beige); }
.site-nav a::after  { content: "]"; color: var(--beige); }
.site-nav a { text-decoration: none; }

/* Current page: set data-page on <body>, then it lights up here. */
body[data-page="main"]     .site-nav a[href="/"],
body[data-page="projects"] .site-nav a[href="/projects.html"],
body[data-page="kit"]      .site-nav a[href="/kit.html"],
body[data-page="lab"]      .site-nav a[href="/lab.html"] {
  color: var(--beige);
  background: color-mix(in srgb, var(--orange) 18%, transparent);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
main { max-width: 72ch; margin-inline: auto; }

h1, h2, h3, h4 {
  color: var(--beige);
  line-height: 1.25;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); margin: 1.6rem 0 .8rem; }
h2 {
  font-size: var(--step-2);
  margin: 2.6rem 0 1rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--rule);
}
h3 { font-size: var(--step-1); margin: 2rem 0 .6rem; }
h4 { font-size: var(--step-0); margin: 1.5rem 0 .4rem; }

/* The "//" and "||" prefixes from the original design, drawn by CSS. */
main h2::before { content: "// "; color: var(--orange); }
main h3::before { content: "|| "; color: var(--orange); }

p { margin: 0 0 1.1rem; }

a { color: var(--orange); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--orange-hi); }

:focus-visible {
  outline: 2px solid var(--orange-hi);
  outline-offset: 2px;
}

strong { color: var(--beige); font-weight: 600; }
em { color: var(--beige); }
small, .muted { color: var(--muted); }

hr { border: 0; border-top: 1px dashed var(--rule); margin: 2rem 0; }

ul, ol { padding-left: 1.4rem; margin: 0 0 1.2rem; }
li { margin-bottom: .45rem; }
main ul > li::marker { content: "■  "; color: var(--orange); font-size: .7em; }
main ol > li::marker { color: var(--orange); font-weight: 600; }

code, kbd {
  font-family: var(--font-body);
  font-size: .82em;
  padding: .1em .4em;
  background: var(--panel-raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--beige);
  white-space: nowrap;
}
kbd { border-bottom-width: 2px; }

pre {
  margin: 0 0 1.4rem;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  background: #000;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--orange-lo);
  border-radius: var(--radius);
  font-size: .85rem;
  line-height: 1.6;
}
pre code { padding: 0; border: 0; background: none; white-space: pre; font-size: inherit; }

blockquote {
  margin: 0 0 1.4rem;
  padding: .8rem 1.2rem;
  border-left: 3px solid var(--orange);
  background: var(--panel-raise);
  color: var(--beige);
}
blockquote p:last-of-type { margin-bottom: 0; }
blockquote footer { margin-top: .5rem; color: var(--muted); font-size: var(--step--1); }
blockquote footer::before { content: "— "; }

figure { margin: 0 0 1.6rem; }
figure img, figure video, main img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
figcaption { margin-top: .4rem; color: var(--muted); font-size: var(--step--1); }

/* Responsive 16:9 embed (YouTube etc.) */
.embed { aspect-ratio: 16 / 9; margin: 0 0 1.6rem; }
.embed iframe { width: 100%; height: 100%; border: 1px solid var(--rule); }

/* Tables scroll inside their own box on narrow screens */
.table-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .45rem .7rem; border-bottom: 1px solid var(--rule); text-align: left; }
th { color: var(--beige); border-bottom-color: var(--orange-lo); font-weight: 600; }

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

/* Boxed tag with a blinking cursor, e.g. <span class="cursor-tag">notes</span> */
.cursor-tag {
  display: inline-block;
  margin: .2rem 0 1.4rem;
  padding: .3rem .8rem;
  font-weight: 600;
  color: var(--orange-hi);
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  border: 1px solid var(--orange-lo);
  box-shadow: 0 0 12px color-mix(in srgb, var(--orange) 25%, transparent);
}
.cursor-tag::after {
  content: "_";
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Table of contents with ">" markers */
.toc { list-style: none; padding-left: 1rem; margin-bottom: 2rem; }
.toc li { margin: .15rem 0; }
.toc li::marker { content: none; }
.toc li::before { content: "> "; color: var(--beige); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Callouts: <aside class="callout"> or <aside class="callout warn"> */
.callout {
  margin: 0 0 1.4rem;
  padding: .8rem 1rem;
  background: var(--panel-raise);
  border: 1px dashed var(--orange-lo);
  border-radius: var(--radius);
}
.callout > :last-child { margin-bottom: 0; }
.callout.warn { border-style: solid; border-color: var(--bad); }
.callout-title { display: block; color: var(--orange); font-weight: 600; }
.callout.warn .callout-title { color: var(--bad); }

/* Collapsible sections — native <details>, no script */
details {
  margin: 0 0 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
summary {
  cursor: pointer;
  padding: .55rem .9rem;
  color: var(--beige);
  font-weight: 600;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: "[+] "; color: var(--orange); }
details[open] > summary::before { content: "[-] "; }
details[open] > summary { border-bottom: 1px solid var(--rule); }
details > :not(summary) { margin: .8rem .9rem; }

/* Key / value list for specs, e.g. hardware details */
.specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .25rem 1.2rem;
  margin: 0 0 1.4rem;
}
.specs dt { color: var(--muted); }
.specs dd { margin: 0; color: var(--beige); }

/* Project index */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.6rem 2rem;
  padding: 0;
  list-style: none;
}
.projects > li { margin: 0; }
.projects > li::marker { content: none; }
.project {
  padding-left: 1rem;
  border-left: 2px solid var(--orange-lo);
}
.project:hover { border-left-color: var(--orange); }
.project h3 { margin: 0 0 .3rem; font-size: var(--step-0); }
.project h3::before { content: none; }
.project p { margin-bottom: .5rem; font-size: .9rem; }
.project .meta { font-size: var(--step--1); color: var(--muted); }

/* Status chips: <span class="status" data-status="active">active</span> */
.status {
  display: inline-block;
  padding: 0 .45rem;
  font-size: var(--step--1);
  border: 1px solid currentColor;
  border-radius: var(--radius);
}
.status[data-status="active"]   { color: var(--ok); }
.status[data-status="paused"]   { color: var(--orange); }
.status[data-status="archived"] { color: var(--muted); }

/* --------------------------------------------------------------------------
   Forms + server console (lab page)
   -------------------------------------------------------------------------- */
.action {
  margin: 0 0 1.6rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
}
.action h3 { margin-top: 0; }
.action p { font-size: .9rem; }

.field { display: grid; gap: .25rem; margin-bottom: .8rem; }
.field label, .check { color: var(--beige); font-size: .9rem; }
.check { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }

input[type="text"], select {
  width: 100%;
  max-width: 24rem;
  padding: .45rem .6rem;
  font: inherit;
  font-size: .9rem;
  color: var(--beige);
  background: #000;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
input[type="text"]:focus, select:focus { border-color: var(--orange); outline: none; }
input[type="checkbox"] { accent-color: var(--orange); width: 1rem; height: 1rem; }

.button {
  display: inline-block;
  padding: .45rem 1.1rem;
  font: 600 .9rem var(--font-body);
  color: #000;
  background: var(--orange);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.button:hover { background: var(--orange-hi); color: #000; }
.button:active { translate: 0 1px; }
.button.ghost {
  color: var(--orange);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--orange-lo);
}

/* Server responses land in this frame (forms use target="console") */
.console {
  display: block;
  width: 100%;
  height: 16rem;
  margin: 0 0 1.4rem;
  background: #000;
  border: 1px solid var(--orange-lo);
  border-radius: var(--radius);
  resize: vertical;
  overflow: auto;
}

/* --------------------------------------------------------------------------
   Footer + utilities
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: var(--step--1);
  color: var(--muted);
}

.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-tag::after { animation: none; }
}

@media (max-width: 34rem) {
  .panel { width: 100%; margin: 0; border-inline: 0; border-radius: 0; }
  .site-nav li + li::before { margin: 0 .35rem; }
  .specs { grid-template-columns: 1fr; }
  .specs dd { margin-bottom: .5rem; }
}