/* previews.css: the Home project chapters (src/partials/home-projects.html) and their live previews
   (assets/js/widgets/previews.js). Tokens only (tokens.css); every colour follows the active palette.
   The only literal colours are the lit LED fills: a real LED is the same colour on any ground.
   Every preview is plain static content without JS. */

[hidden] { display: none !important; }

/* ---------- Chapters ---------- */
.pv-chapter > * + * { margin-top: var(--space-5); }
.pv-kicker { font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.pv-title { font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem); letter-spacing: -0.04em; line-height: 0.98; max-width: 18ch; margin-top: var(--space-2); }
.pv-blurb { font-size: var(--step-lead); line-height: 1.3; max-width: 46ch; margin-top: var(--space-4); }
@media (min-width: 1024px) {
  .pv-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-7); align-items: end; }
  .pv-head .pv-kicker { grid-column: 1 / -1; }
  .pv-head .pv-title { margin-top: var(--space-2); }
  .pv-head .pv-blurb { margin-top: 0; font-size: var(--step-body); }
}
.pv-more { font-size: var(--step-body); }

/* Intro chapter */
.pv-intro-title { font-size: var(--step-head); }
.pv-intro-lead { font-size: var(--step-lead); line-height: 1.3; max-width: 40ch; margin-top: var(--space-4); }
.pv-index { list-style: none; padding: 0; display: grid; gap: var(--space-2); max-width: 720px; }
.pv-index li { min-width: 0; }
.pv-index a {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); min-width: 0; overflow-wrap: anywhere;
  padding: var(--space-4) var(--space-5); background: var(--surface); color: var(--ink);
  font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.pv-index a:hover { background: var(--surface-2); }
/* Hover/focus: an accent bar slides in on the left and an arrow on the right, so each row reads as a link. */
.pv-index a {
  position: relative; padding-right: calc(var(--space-5) + 1.75em);
  box-shadow: inset 0 0 0 var(--accent);
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pv-index a::after {
  content: "\2192"; position: absolute; right: var(--space-5); top: 50%;
  color: var(--accent); opacity: 0; translate: -10px -50%;
  transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease);
}
.pv-index a:hover, .pv-index a:focus-visible { box-shadow: inset 5px 0 0 var(--accent); }
.pv-index a:hover::after, .pv-index a:focus-visible::after { opacity: 1; translate: 0 -50%; }
.pv-index a:active { transform: translateY(1px); background: color-mix(in srgb, var(--surface-2) 82%, var(--ink)); }
.pv-node:active { transform: translateY(1px); }
.pv-index span { font-size: var(--step-small); font-weight: 600; color: var(--muted); letter-spacing: 0; }


/* ---------- Preview frame ---------- */
.pv {
  --led-fill-red: #ff3b30;     /* true LED fill */
  --led-fill-yellow: #ffc61a;  /* true LED fill */
  --led-fill-green: #22d164;   /* true LED fill */
  --led-fill-blue: #3f7dff;    /* true LED fill */
  --term-bg: var(--ink);
  --term-ink: var(--bg);
  background: var(--surface); padding: var(--space-5); display: grid; gap: var(--space-4);
}
@supports (color: light-dark(red, red)) {
  .pv {
    --term-bg: light-dark(var(--ink), var(--surface-2));
    --term-ink: light-dark(var(--bg), var(--ink));
  }
}
.pv > * { min-width: 0; }
.pv-note { font-size: var(--step-small); color: var(--ink); max-width: var(--measure); }
.pv pre {
  margin: 0; padding: var(--space-3) var(--space-4); font-size: 0.8125rem; line-height: 1.5;
  background: var(--term-bg); color: var(--term-ink); overflow: auto;
}
.pv pre code { white-space: pre; }
.pv .button--quiet { background: var(--bg); }
.pv .button--quiet:hover { background: var(--surface-2); }
.pv .button[aria-disabled="true"] { opacity: 0.45; cursor: default; transform: none; }

/* ---------- CEIS114: crosswalk ---------- */
.pv-xw-live { display: grid; gap: var(--space-4) var(--space-6); }
@media (min-width: 700px) { .pv-xw-live { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.pv-xw-board { display: grid; gap: var(--space-4); align-content: start; }
.pv-xw-sets { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.pv-set { margin: 0; }
/* Light set 1, light set 2 and the emergency light each take an equal third of the board, centred. */
@media (min-width: 600px) {
  .pv-xw-sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv-set { justify-self: center; }
}
.pv-leds { display: flex; gap: var(--space-2); }
.pv-led {
  --c: var(--led-fill-red);
  display: block; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--muted);
  transition: background-color 120ms linear;
}
.pv-led--yellow { --c: var(--led-fill-yellow); }
.pv-led--green { --c: var(--led-fill-green); }
.pv-led--blue { --c: var(--led-fill-blue); }
.pv-led.is-on { background: var(--c); }
.pv-set figcaption { margin-top: var(--space-2); font-size: var(--step-small); font-weight: 600; line-height: 1.3; }
.pv-walk {
  font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums; min-height: 1.2em;
}
.pv-walk.is-walk { color: var(--led-green); }
.pv-xw-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pv .pv-toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.pv-serial h4 { font-size: var(--step-small); font-weight: 600; margin: 0 0 var(--space-2); letter-spacing: 0; }
.pv-serial pre { height: calc(9 * 1.5em + 2 * var(--space-3)); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
@media (min-width: 1024px) { .pv-serial pre { height: calc(12 * 1.5em + 2 * var(--space-3)); } }

/* ---------- CEIS110: console ---------- */
.pv-term { display: grid; gap: var(--space-3); }
@media (min-width: 700px) {
  .pv-term { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .pv-term .pv-code-col { display: grid; gap: var(--space-3); justify-items: start; }
}
.pv-code-col { display: grid; gap: var(--space-3); justify-items: start; }
.pv-code-col pre { width: 100%; }
.pv-out.is-idle { color: var(--term-ink); } /* full-strength text: opacity dropped it under 4.5:1 */
.pv-run::before { content: "\25B6"; font-size: 0.7em; margin-right: var(--space-1); }
.pv-hint { font-size: var(--step-small); font-weight: 600; color: var(--ink); }

/* ---------- NETW211: map ---------- */
.pv-map { display: grid; gap: var(--space-3); }
.pv-vnet { background: var(--surface-2); padding: var(--space-3); display: grid; gap: var(--space-3); }
.pv-subnets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.pv-col { display: grid; gap: var(--space-1); justify-items: stretch; }
.pv-arrow { text-align: center; color: var(--muted); line-height: 1; font-weight: 800; }
.pv-node {
  display: block; width: 100%; text-align: left; min-height: 44px;
  padding: var(--space-2) var(--space-3); border: 0; border-radius: 0;
  background: var(--bg); color: var(--ink);
  font-size: var(--step-small); font-weight: 600; line-height: 1.25; letter-spacing: 0;
  transition: background-color var(--dur-fast) var(--ease);
}
.pv-node small { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.pv-node { cursor: pointer; box-shadow: inset 0 -3px 0 var(--accent); }
.pv-node:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.pv-node[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.pv-node[aria-pressed="true"] small { color: var(--accent-ink); }
.pv-nsg { max-width: 22rem; }
.pv-caption { font-size: var(--step-small); min-height: 3em; max-width: var(--measure); }
.pv-static-list { display: grid; gap: var(--space-3); margin: 0; }
.pv-static-list dt { font-weight: 600; }
.pv-static-list dd { margin: 0; color: var(--muted); }

/* ---------- Smart Home: static diagram ---------- */
.pv-sh { display: grid; gap: var(--space-3); align-items: center; }
@media (min-width: 700px) { .pv-sh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.pv-sh ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pv-chip { background: var(--bg); padding: var(--space-3) var(--space-4); font-size: var(--step-small); font-weight: 700; line-height: 1.25; }
.pv-chip small { display: block; font-weight: 400; color: var(--muted); font-size: 0.8125rem; }
.pv-chip--main { background: var(--accent); color: var(--accent-ink); padding: var(--space-5) var(--space-4); font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.02em; }
.pv-chip--main small { color: var(--accent-ink); font-size: var(--step-small); }
.pv-link { color: var(--muted); font-weight: 800; text-align: center; line-height: 1; }
.pv-link::before { content: "\2193"; }
@media (min-width: 700px) { .pv-link::before { content: "\2192"; } }
.pv-link--both::before { content: "\2195"; }
@media (min-width: 700px) { .pv-link--both::before { content: "\2192"; } }

@media (prefers-reduced-motion: reduce) {
  .pv-led, .pv-node, .pv-index a, .pv-index a::after { transition: none; }
}

/* Project chapters on Home: centred vertically on desktop, same left edge as every other chapter. */
@media (min-width: 1024px) {
  .pv-chapter[data-chapter-tall] { justify-content: center; }
  .pv { padding: var(--space-6); }
  .pv-node { min-height: 56px; font-size: var(--step-body); }
  .pv-chip { padding: var(--space-4) var(--space-5); font-size: var(--step-body); }
}
/* CEIS114 and NETW211 on desktop: full width, with their parts side by side so the whole chapter,
   "Open the full project" included, fits on one laptop screen. */
@media (min-width: 1024px) {
  .pv[data-pv="crosswalk"], .pv[data-pv="map"] { padding: var(--space-5); }
  .pv[data-pv="crosswalk"] .pv-serial pre { height: calc(7 * 1.5em + 2 * var(--space-3)); }
  /* With JS, the note moves up under the button, into the left column's empty space. */
  .pv[data-pv="crosswalk"]:has(> .pv-xw-live:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-6); align-items: start;
  }
  .pv[data-pv="crosswalk"] > .pv-xw-live { display: contents; }
  .pv[data-pv="crosswalk"] .pv-xw-board { grid-column: 1; grid-row: 1; }
  .pv[data-pv="crosswalk"] .pv-serial { grid-column: 2; grid-row: 1 / span 2; }
  .pv[data-pv="crosswalk"] > .pv-note { grid-column: 1; grid-row: 2; }
  .pv-map { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; column-gap: var(--space-5); }
  .pv-map .pv-vnet { grid-row: span 2; gap: var(--space-2); }
  .pv-map .pv-nsg { max-width: none; }
  .pv-map .pv-node { min-height: 44px; font-size: var(--step-small); }
}
/* Phone: the CEIS110 query wraps and the result shrinks, so nothing scrolls sideways. */
@media (max-width: 600px) {
  .pv-code-col pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .pv-out { font-size: 0.66rem; padding-inline: var(--space-2); }
}

/* Depth (tokens.css): the Home project previews and the project index sit slightly above the page. */
.pv, .pv-index a { box-shadow: var(--shadow-panel); }