/* ==============================================================
   Nanofabrication Club — custom styles

   IMPORTANT: Tailwind's CDN build injects its stylesheet into
   <head> AFTER this file loads. So a bare `.text-xs { … }` here
   loses to Tailwind's own `.text-xs` — same specificity, and
   Tailwind comes last. Anything that has to beat a Tailwind
   utility is written as `html .text-xs { … }` to win on
   specificity. Keep that `html ` prefix if you edit those rules.
   Tailwind (loaded via CDN in layouts/partials/head.html) handles
   almost everything. This file only holds what Tailwind can't do:
   the readability baseline, the blueprint grid, the hero animation,
   and the clickable-card treatment.

   NOTE: the hex colors below are duplicated from hugo.toml
   ([params.colors]) because this is a plain CSS file, not a Hugo
   template. If you change a color in hugo.toml, update the matching
   value here too to keep things in sync.
   ============================================================== */

:root {
  --line: #D7CEC1;       /* hugo.toml colors.line   */
  --muted: #474D49;      /* hugo.toml colors.muted  */
  --maroon: #7A0019;     /* hugo.toml colors.maroon */
  --gold: #FFCC33;       /* hugo.toml colors.gold   */
  --violet: #42245F;     /* hugo.toml colors.violet — from the logo */
  --violet-soft: #F1ECF5;/* hugo.toml colors.violetSoft */
  --paper: #EDE4D7;      /* hugo.toml colors.paper  */

  /* Fill for the clickable machine rows in the homepage "The fab"
     section — both are maroon washed over white.

     --tile        3%  — resting. Barely there, just enough to sit
                         apart from the white panel behind it.
     --tile-hover  15% — under the cursor. THE GAP BETWEEN THESE TWO
                         IS THE POINT: hovering one row has to visibly
                         shade that row and nothing else, so you can
                         see what you're about to click. If you nudge
                         these, keep them far apart — when they were
                         only a few percent apart the hover read as
                         nothing happening at all.

     (The big cards on /machines/ stay white — they have room for a
     border and a hover lift to carry the same message.) */
  --tile: #FBF7F8;
  --tile-hover: #EBD9DD;
}

html {
  scroll-behavior: smooth;
  /* scroll-padding-top used to live here to stop the sticky header
     covering a section you had just jumped to. It is gone: system.css
     now sets `scroll-margin-top` on every [id] from the --bar-h token.
     Keeping both made the two offsets ADD, landing every anchor jump
     about 5.5rem below its heading. */
  -webkit-text-size-adjust: 100%;
}

/* -----------------------------------------------------------
   BIG SCREENS
   Every size on the site is in rem, so the whole layout (text,
   spacing, and the 72rem content column) scales off this one
   number. Up to 1440px wide it's the normal 16px. Past that it
   grows with the screen, so a 1920px monitor gets ~18.4px and a
   2560px one ~21.6px, capped at 22px. Without this the site sat in
   a narrow strip down the middle of a big monitor with small text.
   To make big screens larger or smaller overall, change 0.005.
   Always write sizes in rem (not px) so they scale with it.
----------------------------------------------------------- */
@media (min-width: 1440px) {
  html { font-size: min(calc(16px + (100vw - 1440px) * 0.005), 22px); }
}

/* -----------------------------------------------------------
   READABILITY BASELINE
   The single biggest thing that makes this site easy to read.
   Body copy sits at 17px / 1.65 with a slightly heavier weight
   than Inter's default 400, which reads thin on a light warm
   background. If text ever feels small, raise --body-size here
   rather than editing dozens of templates.
----------------------------------------------------------- */
body {
  font-size: 1.09375rem; /* 17.5px at the normal 16px root */
  line-height: 1.65;
  font-weight: 450;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tailwind's text-sm/text-xs are used a lot for labels. Nudge the
   two smallest steps up so nothing on the site renders below 13px,
   which is where small grey text starts getting hard to read.
   The `html ` prefix is what makes these beat Tailwind — see the
   note at the top of this file. */
html .text-xs  { font-size: 0.8125rem; line-height: 1.5; }   /* 13px */
html .text-sm  { font-size: 0.9375rem; line-height: 1.6; }   /* 15px */

/* Small uppercase labels (eyebrows, "Subsystems", footer headings)
   lose a lot of legibility to letter-spacing. Give them weight. */
html .uppercase.tracking-widest { font-weight: 600; }

/* Fraunces is variable on four axes. opsz follows the size it's set
   at; SOFT rounds the terminals slightly; WONK turns on the angled,
   hand-cut alternates that give the headings their character. Turn
   WONK to 0 if you ever want it straighter. */
.font-display {
  font-variation-settings: "SOFT" 28, "WONK" 1;
}
h1, h2 { font-variation-settings: "opsz" 96, "SOFT" 28, "WONK" 1; }
h3, h4 { font-variation-settings: "opsz" 24, "SOFT" 28, "WONK" 1; }

/* A serif wants far less negative tracking than a grotesque —
   tightening one closes up its counters and makes it harder to
   read, not smarter-looking. */
h1, h2, h3, h4 { letter-spacing: -0.004em; }
html .font-display.tracking-tight { letter-spacing: -0.008em; }

/* Numbers and small labels — the 01 / 02 area markers, machine
   counts, step labels, spec values.

   Courier Prime is a typewriter face and runs lighter than a screen
   mono, so everything set in it gets bumped to 700 and tightened a
   little. Without this the small grey labels go weak and fuzzy. */
html .font-mono {
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Uppercase micro-labels ("RESIST COAT") need their tracking back. */
html .font-mono.uppercase,
html .font-mono.tracking-wider,
html .font-mono.tracking-widest { letter-spacing: 0.06em; }

/* -----------------------------------------------------------
   Visible focus ring for keyboard users, on every interactive
   thing. Tailwind's CDN build doesn't ship one by default.
----------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--maroon);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -----------------------------------------------------------
   Keyboard-only "skip to content" link for screen reader and
   keyboard users. Invisible until focused.
----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--maroon);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
}
.skip-link:focus { left: 0; }

/* -----------------------------------------------------------
   Blueprint grid background used behind the hero section
----------------------------------------------------------- */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  opacity: 0.55;
}

/* Finer grid, used on machine detail pages for a lighter touch. */
.bg-grid-fine {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 100%);
  mask-image: linear-gradient(to bottom, black, transparent 100%);
  opacity: 0.4;
}

/* -----------------------------------------------------------
   HERO PHOTO BLEED
   On large screens the lab photo runs off the right edge of the
   screen instead of stopping at the 72rem content column. That's
   what kills the empty margin that used to sit around it.
   72rem = Tailwind's max-w-6xl; 1.5rem = the px-6 page gutter.
----------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1799px) {
  .hero-bleed-right {
    margin-right: calc(-1 * (max(0px, 100vw - 72rem) / 2) - 1.5rem);
  }
}
/* On very wide monitors the bleed leaves a huge photo hanging off
   one side, so it stops at the content column and gets its rounded
   right-hand corners back. */
@media (min-width: 1800px) {
  .hero-bleed-right img { border-radius: 1rem; height: auto; aspect-ratio: 5 / 4; }
  .hero-bleed-right .rounded-b-2xl { border-bottom-right-radius: 1rem; }
}

/* Hero circuit drawing: exactly as wide as the empty margin to the
   left of the 72rem content column, so it never runs behind text. */
.hero-circuit { width: calc((100vw - 72rem) / 2); }

/* -----------------------------------------------------------
   Nav links: a gold underline that wipes in on hover
----------------------------------------------------------- */
.nav-link {
  position: relative;
  padding-bottom: 3px;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* -----------------------------------------------------------
   MACHINE CARDS — the main thing you click on this site.

   These are designed to read as buttons before you touch them:
   a solid 1.5px outline, a soft inner face, a pointer cursor, and
   a small "chip" in the corner. On hover the whole box lifts and
   the outline goes maroon, so the click target is unmistakable.
   (There used to be a gold line sweeping across the top edge too;
   it was removed.)
----------------------------------------------------------- */
.machine-card {
  position: relative;
  cursor: pointer;
  border-width: 1.5px;
  border-color: rgba(122, 0, 25, 0.16);
  background-image: linear-gradient(to bottom, #fff, #fcfbf9);
  box-shadow: 0 1px 0 rgba(20, 24, 28, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, background-color 0.18s ease;
}

.machine-card:hover,
.machine-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--maroon);
  box-shadow: 0 12px 28px -12px rgba(20, 24, 28, 0.28);
}

/* Pressed state — a real button gives way under the cursor. */
.machine-card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -8px rgba(20, 24, 28, 0.3);
}

/* -----------------------------------------------------------
   MACHINE ROWS — the compact button used on the homepage.

   Same idea as .machine-card, in one line. The important part is
   that the outline and the round arrow are visible AT REST, not
   only on hover — a box that looks flat until you touch it doesn't
   tell anyone it's clickable. Don't set the border to transparent.
----------------------------------------------------------- */
.machine-row {
  position: relative;
  cursor: pointer;
  border: 1.5px solid rgba(122, 0, 25, 0.16);
  background: var(--tile);
  box-shadow: 0 1px 0 rgba(20, 24, 28, 0.03);
  transition: border-color 0.12s ease, background-color 0.12s ease,
              transform 0.12s ease, box-shadow 0.12s ease;
}

/* On hover: maroon outline, deeper fill, a small nudge right, and a
   shadow. (There used to be a gold bar down the left edge too; it
   was removed, like the gold line on the machine cards.) */
.machine-row:hover,
.machine-row:focus-visible {
  border-color: var(--maroon);
  background: var(--tile-hover);
  transform: translateX(3px);
  box-shadow: 0 8px 18px -12px rgba(20, 24, 28, 0.3);
}

.machine-row:active {
  transform: translateX(1px);
  box-shadow: none;
}

/* -----------------------------------------------------------
   Generation chips: Gen 1 vs Gen 2 need to be tellable apart at
   a glance, so they get different fills rather than different
   shades of the same one.
----------------------------------------------------------- */
.gen-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.gen-1 { background: var(--maroon); color: #fff; }
/* Gen 2 is the violet from the club logo. Two build generations, two
   of the site's two identity colours — maroon for the University,
   violet for us. */
.gen-2 { background: var(--violet); color: #fff; }

/* Text selection picks up the logo violet rather than the browser
   default blue, which clashes with everything else here. */
::selection { background: #D9CCE6; color: #14181C; }

/* -----------------------------------------------------------
   Hero circuit-line drawing animation (runs once on page load)
----------------------------------------------------------- */
.circuit-path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw-line 1.6s ease-out forwards;
}

.circuit-node {
  opacity: 0;
  animation: fade-in-node 0.4s ease-out forwards;
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes fade-in-node {
  to { opacity: 1; }
}

/* -----------------------------------------------------------
   Prose: styles the markdown body text on machine pages
----------------------------------------------------------- */
.prose p {
  margin-bottom: 1.15rem;
  line-height: 1.7;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 650; color: #14181C; }
.prose a {
  color: var(--maroon);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose ul { list-style: disc;    padding-left: 1.25rem; margin-bottom: 1.15rem; }
.prose ol { list-style: decimal; padding-left: 1.4rem;  margin-bottom: 1.15rem; }
.prose li { margin-bottom: 0.4rem; line-height: 1.65; }
.prose li > ul, .prose li > ol { margin: 0.4rem 0 0.2rem; }

/* HEADINGS INSIDE PROSE.
   These matter because Tailwind's preflight resets every heading to
   inherit its font size — so without this, a "## Step one" written
   by a student renders as plain body text. Anything students write
   in a documentation block goes through here. */
.prose h2, .prose h3, .prose h4 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  color: #14181C;
  line-height: 1.25;
}
.prose h2 { font-size: 1.5rem;   margin: 2.2rem 0 0.8rem; }
.prose h3 { font-size: 1.2rem;   margin: 1.8rem 0 0.6rem; }
.prose h4 { font-size: 1.0625rem; margin: 1.5rem 0 0.5rem; }
.prose > :first-child { margin-top: 0; }

/* Inline code and code blocks — wiring pinouts, commands, values. */
.prose code {
  font-family: "Courier Prime", ui-monospace, monospace;
  font-size: 0.9375em;
  background: var(--tile);
  border: 1px solid rgba(122, 0, 25, 0.14);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.prose pre {
  background: #14181C;
  color: #F4F3F0;
  border-radius: 10px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  margin-bottom: 1.15rem;
  font-size: 0.875rem;
  line-height: 1.6;
}
.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* A callout, for the "don't do this" notes that show up in any real
   procedure. Written in markdown as "> text". */
.prose blockquote {
  border-left: 3px solid var(--gold);
  background: #FFF9E8;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.15rem;
  border-radius: 0 6px 6px 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.15rem; font-size: 0.9375rem; }
.prose th { text-align: left; font-weight: 650; color: #14181C; border-bottom: 2px solid var(--line); padding: 0.5rem 0.75rem 0.5rem 0; }
.prose td { border-bottom: 1px solid var(--line); padding: 0.55rem 0.75rem 0.55rem 0; }

/* Markdown images, ![Caption](/images/...), placed inline in any
   write-up. Built by layouts/_default/_markup/render-image.html.
   Spans rather than <figure>, because markdown wraps images in a
   <p> and a <figure> isn't allowed inside one. */
.md-figure { display: block; margin: 1.5rem 0; }
.md-figure-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.75rem;
  transition: border-color 0.15s ease;
}
.md-figure-frame:hover { border-color: var(--maroon); }
.prose .md-figure-frame { text-decoration: none; }
.md-figure-frame img { max-width: 100%; max-height: 28rem; height: auto; object-fit: contain; }
.md-figure-caption {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}
.md-figure-caption::before {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1px;
  margin-top: 0.65rem;
  background: var(--gold);
}

/* -----------------------------------------------------------
   POLISHED DOCUMENTATION (layouts/partials/doc-writeup-rich.html)
   Each "##" is a .doc-part; each "###" under it is a .doc-card
   hanging off a timeline rail.
----------------------------------------------------------- */
.doc-rich { counter-reset: docpart; }
/* Offset comes from doc.css via the --bar-h/--doc-jump-h tokens;
   the old hard-coded 8.5rem disagreed with it. */

/* The layout already separates sections, so "---" lines between
   them would just double up. */
.doc-rich hr { display: none; }

.doc-part + .doc-part {
  margin-top: 3.25rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}
.doc-part > .prose > h2:first-child {
  margin-top: 0;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}
.doc-numbered .doc-part.has-h2 { counter-increment: docpart; }
.doc-numbered .doc-part.has-h2 > .prose > h2:first-child::before {
  content: counter(docpart, decimal-leading-zero);
  display: block;
  font-family: "Courier Prime", ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--violet);
  margin-bottom: 0.35rem;
}

/* The rail and its cards. */
.doc-cards {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-left: 2rem;
}
.doc-part > .doc-cards:first-child { margin-top: 0; }
.doc-cards::before {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  background: var(--line);
}
.doc-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 1.35rem 1.5rem 1.4rem;
  font-size: 0.96875rem;
  transition: border-color 0.15s ease;
}
.doc-card:hover { border-color: #BDB8AD; }
.doc-card::before {
  content: "";
  position: absolute;
  left: calc(-2rem + 0.0625rem);
  top: 1.55rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 9999px;
  background: var(--paper);
  border: 2px solid var(--maroon);
}
.doc-card > h3:first-child { margin-top: 0; font-size: 1.15rem; }
.doc-card h4 {
  font-family: "Libre Franklin", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--maroon);
  margin: 1.4rem 0 0.5rem;
}
.doc-card ul:last-child, .doc-card ol:last-child { margin-bottom: 0; }

/* "Week 3" / "Stage 1" pulled out of a "### Week 3: Title" heading. */
.doc-kicker {
  display: block;
  font-family: "Courier Prime", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--maroon);
  margin-bottom: 0.3rem;
}

/* "**Milestone**:" and "**STOP-GATE**:" bullets. */
.prose li.doc-flag {
  list-style: none;
  margin: 0.85rem 0 0 -1.25rem;
  padding: 0.65rem 0.95rem;
  border-radius: 0 6px 6px 0;
}
.prose li.doc-flag > strong:first-child {
  display: block;
  font-family: "Courier Prime", ui-monospace, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.15rem;
}
.prose li.doc-flag-milestone { background: #FFF9E8; border-left: 3px solid var(--gold); }
.prose li.doc-flag-milestone > strong:first-child { color: #8A6400; }
.prose li.doc-flag-stop { background: var(--tile); border-left: 3px solid var(--maroon); }
.prose li.doc-flag-stop > strong:first-child { color: var(--maroon); }

/* Tables: framed, header row shaded, scroll sideways on phones. */
.doc-table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0 1.4rem;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}
.doc-table-wrap table { margin: 0; min-width: 32rem; }
.doc-table-wrap th {
  background: var(--paper);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
}
.doc-table-wrap td { padding: 0.7rem 1rem; vertical-align: top; }
.doc-table-wrap tr:last-child td { border-bottom: 0; }
.doc-table-wrap td:first-child { color: #14181C; font-weight: 550; }


/* -----------------------------------------------------------
   GENERATION BANDS
   The full-width colour blocks on /machines/ that mark where
   Gen 1 ends and Gen 2 begins as you scroll. Same two identity
   colours as the chips, at full strength.
----------------------------------------------------------- */
.gen-band-1 { background: var(--maroon); }
.gen-band-2 { background: var(--violet); }

/* A faint blueprint grid over the band, so it reads as part of
   this site rather than a flat colour block. */
.gen-band {
  position: relative;
  overflow: hidden;
}
.gen-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.gen-band > * { position: relative; z-index: 1; }

/* -----------------------------------------------------------
   MACHINE DOCUMENTATION
   The Background / Architecture / Timeline / BOM / Contributors
   / References sections on a machine page. Data for most of
   these comes from the club's Google Sheet via data/sheets/.
----------------------------------------------------------- */

/* The sticky section jump bar. Sits directly under the site
   header, which is 4rem tall — hence top:4rem on the element. */
.doc-nav {
  backdrop-filter: blur(8px);
}

/* --- Tables (bill of materials) --- */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.doc-table th {
  text-align: left;
  font-family: "Courier Prime", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 0.75rem 0.7rem;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.doc-table td {
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table tbody tr:hover { background: var(--tile); }
.doc-table tfoot td {
  padding-top: 0.9rem;
  border-top: 2px solid var(--line);
  border-bottom: 0;
  font-weight: 600;
}
/* Numeric columns line up on the right, in the typewriter face. */
.doc-table .num {
  text-align: right;
  font-family: "Courier Prime", ui-monospace, monospace;
  white-space: nowrap;
}
/* First/last cells sit flush with the section edge. */
.doc-table th:first-child, .doc-table td:first-child { padding-left: 0; }
.doc-table th:last-child,  .doc-table td:last-child  { padding-right: 0; }

/* --- Timeline rail --- */
.timeline { position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line);
}
.timeline-item { position: relative; padding-left: 2.5rem; }
.timeline-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper);
  box-sizing: border-box;
}
/* done = filled maroon · active = gold ring · planned = hollow */
.dot-done   { background: var(--maroon); border-color: var(--maroon); }
.dot-active { background: #fff; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 204, 51, 0.3); }
.dot-planned{ background: var(--paper); border-color: var(--line); }

/* --- Sample-data notice --- */
/* Shown on any section still holding the seeded example rows.
   It disappears on its own once those rows leave the Sheet. */
.sample-note {
  border-left: 3px solid var(--gold);
  background: #FFF9E8;
}

/* -----------------------------------------------------------
   Respect users who've asked for reduced motion
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .circuit-path {
    stroke-dashoffset: 0;
    animation: none;
  }
  .circuit-node {
    opacity: 1;
    animation: none;
  }
  .machine-card,
  .machine-card:hover,
  .machine-card:active,
  .machine-row,
  .machine-row:hover,
  .machine-row:active { transform: none; }
}