/* ==========================================================================
   Bota — the interactive demonstrations.
   --------------------------------------------------------------------------
   Sources, the style lab, and the three craft demos. Every one of them is
   operated by a radio or a checkbox and switched with `:has()`; there is no
   JavaScript in any of it. That is not a stunt — a demo that only works once
   a module has loaded is a demo that is broken for the first second of every
   visit, and this page is an argument about finish.

   In each block the *default* state is a complete one, so a browser without
   `:has()` gets the first tab, the first style and the newest version rather
   than an empty frame.
   ========================================================================== */

/* ══════════════════════════ 02 · Sources ══════════════════════════ */
.sources__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-strong);
}

.tab {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: var(--s5) var(--s4) var(--s5) 0;
  border-top: 2px solid transparent;
  margin-top: -1px;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-crisp);
}

.tab b {
  font-size: var(--t-body);
  font-weight: 540;
  letter-spacing: -0.014em;
  transition: color var(--dur-fast) var(--ease-crisp);
}

.tab i {
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--faint);
}

.tab:hover b {
  color: var(--brand);
}

.tab:has(input:checked) {
  border-top-color: var(--brand);
}

.tab:has(input:checked) b {
  color: var(--brand);
}

.tab:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.sources__panels {
  margin-top: clamp(28px, 3.5vw, 56px);
}

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 80px);
  align-items: center;
}

/* First panel by default; the radios swap it. */
.panel[data-for="ig"],
.panel[data-for="li"],
.panel[data-for="cv"] {
  display: none;
}

.sources:has(#src-ig:checked) .panel[data-for="text"],
.sources:has(#src-li:checked) .panel[data-for="text"],
.sources:has(#src-cv:checked) .panel[data-for="text"] {
  display: none;
}

.sources:has(#src-ig:checked) .panel[data-for="ig"],
.sources:has(#src-li:checked) .panel[data-for="li"],
.sources:has(#src-cv:checked) .panel[data-for="cv"] {
  display: grid;
}

.panel__source {
  display: grid;
  justify-items: center;
}

/* ── The sources, each drawn as itself ──────────────────────────────────── */
.doc {
  width: 100%;
  max-width: 380px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  padding: var(--s5);
}

.doc--text {
  display: grid;
  gap: var(--s3);
  padding: var(--s6) var(--s5);
}

.doc__typed {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--foreground);
  text-wrap: pretty;
}

/* A caret at the end of the sentence — the one thing that says "this was
   typed" without a screenshot of a text field. */
.doc__typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.15em;
  background: var(--brand);
  animation: caret 1.15s steps(1) infinite;
}

@keyframes caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.ig__head,
.li__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.ig__avatar,
.li__avatar {
  width: 38px;
  height: 38px;
  flex: none;
  background: linear-gradient(150deg, #d9c3a8, #8a7561);
}

.ig__avatar {
  border-radius: 50%;
}

.li__avatar {
  border-radius: var(--radius-sm);
}

.ig__meta,
.li__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ig__meta b,
.li__meta b {
  font-size: var(--t-sm);
  font-weight: 560;
}

.ig__meta i,
.li__meta i {
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--faint);
}

.ig__bio {
  font-size: var(--t-xs);
  color: var(--muted-foreground);
  margin-bottom: var(--s4);
  line-height: 1.55;
}

.ig__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.ig__grid .plate {
  --pl-a: #d8c2a6;
  --pl-b: #a08a72;
  --pl-c: #453a32;
  border-radius: 2px;
}

.ig__grid .plate:nth-child(2) { --pl-a: #c9cbc0; --pl-b: #7f8378; }
.ig__grid .plate:nth-child(4) { --pl-a: #e0c8ae; --pl-b: #ab8f6f; }
.ig__grid .plate:nth-child(5) { --pl-a: #bfb3a4; --pl-b: #77695c; }
.ig__grid .plate:nth-child(6) { --pl-a: #d3b79c; --pl-b: #937a63; }

.li__rows {
  display: grid;
}

.li__rows li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding-block: 9px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
}

.li__rows b {
  font-weight: 520;
  color: var(--foreground);
}

.li__rows i {
  font-style: normal;
  margin-left: auto;
  color: var(--faint);
  white-space: nowrap;
}

/* A résumé is a sheet of paper, so it is drawn as one — proportioned, not
   iconified. */
.doc--cv {
  display: grid;
  gap: 9px;
  align-content: start;
  aspect-ratio: 1 / 1.28;
  padding: var(--s6) var(--s5);
  max-width: 300px;
}

.cv__name {
  width: 44%;
  height: 13px;
  border-radius: 3px;
  background: var(--foreground);
  opacity: 0.84;
}

.cv__rule {
  height: 1px;
  background: var(--rule-strong);
  margin-block: 3px;
}

.cv__h {
  width: 26%;
  height: 7px;
  border-radius: 3px;
  background: var(--brand);
  opacity: 0.7;
}

.cv__line {
  width: var(--w, 80%);
  height: 5px;
  border-radius: 3px;
  background: var(--rule-strong);
}

.cv__gap {
  height: 7px;
}

/* ── What was read out of it ─────────────────────────────────────────────── */
.panel__read .label {
  display: block;
  margin-bottom: var(--s4);
}

.facts {
  display: grid;
  border-top: 1px solid var(--rule);
}

.facts li {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding-block: 11px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
}

.facts span {
  flex: none;
  color: var(--faint);
  font-size: var(--t-xs);
}

.facts b {
  margin-left: auto;
  text-align: right;
  font-weight: 520;
  letter-spacing: -0.012em;
}

.panel__note {
  margin-top: var(--s5);
  font-size: var(--t-sm);
  color: var(--muted-foreground);
  max-width: 46ch;
  text-wrap: pretty;
}

.sources__rule {
  margin-top: clamp(32px, 4vw, 64px);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--foreground);
  max-width: 64ch;
  text-wrap: pretty;
}

/* ══════════════════════════ 03 · The style lab ══════════════════════════ */
.lab {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.lab__controls {
  display: grid;
  gap: var(--s6);
  align-content: start;
}

.lab__group {
  display: grid;
  gap: var(--s4);
}

.lab__chips {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.lab__swatches {
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
}

.swatch--ember { --sw: #e2680f; }
.swatch--ink { --sw: #2b2a2e; }
.swatch--moss { --sw: #3f6b3a; }
.swatch--plum { --sw: #7a3a68; }
.swatch--sea { --sw: #1c6280; }

.lab__note {
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--faint);
  max-width: 42ch;
}

/* No fixed ratio, for the same reason the outcome plates have none: a style
   preset changes how tall the composition is, and cropping that away would
   hide half of what the preset does. */
.lab__stage {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}

/* ── Brand colour ────────────────────────────────────────────────────────
   The value applied is the *solved* one, not the swatch: each hue is stepped
   down in lightness until it clears AA as text on the sample's paper, which
   is what the app's colour solver does numerically. The swatch shows the hue
   you picked; the site shows the version of it that can be read.
   ------------------------------------------------------------------------ */
.lab:has(#hue-ink:checked) { --lab-accent: #2b2a2e; }
.lab:has(#hue-moss:checked) { --lab-accent: #2f5a2b; }
.lab:has(#hue-plum:checked) { --lab-accent: #6b3560; }
.lab:has(#hue-sea:checked) { --lab-accent: #17566e; }

/* ── Style presets ───────────────────────────────────────────────────────
   Five real changes, not five colour swaps: size, weight, tracking, corner
   radius and density all move, because that is what the presets change in
   the app.
   ------------------------------------------------------------------------ */
.lab:has(#sty-minimal:checked) .site--lab {
  --display-size: 5.6cqw;
  --display-weight: 500;
  --display-track: -0.022em;
  --radius: 0.5cqw;
  --s-pad: 6.4cqw;
  --s-gap: 4.4cqw;
  --paper: #ffffff;
  --line: #ececea;
}

.lab:has(#sty-bold:checked) .site--lab {
  --display-size: 9.6cqw;
  --display-weight: 740;
  --display-track: -0.048em;
  --display-lh: 0.98;
  --radius: 2.6cqw;
  --s-pad: 4.8cqw;
  --s-gap: 3.2cqw;
}

.lab:has(#sty-editorial:checked) .site--lab {
  --display-font: var(--font-serif);
  --display-size: 9.4cqw;
  --display-weight: 400;
  --display-track: -0.02em;
  --display-lh: 0.98;
  --radius: 0.3cqw;
  --paper: #faf7f1;
  --line: #e4ded2;
  --s-pad: 5.8cqw;
}

.lab:has(#sty-warm:checked) .site--lab {
  --display-size: 6.6cqw;
  --display-weight: 590;
  --display-track: -0.028em;
  --radius: 3.2cqw;
  --paper: #fffaf2;
  --line: #efe4d5;
  --s-pad: 5.6cqw;
  --s-gap: 4cqw;
}

/* ══════════════════════════ 04 · Craft ══════════════════════════ */

/* ── The typecheck ───────────────────────────────────────────────────────── */
.craft__demo {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.run {
  display: block;
  position: relative;
  padding: var(--s3);
  background: var(--background-sunken);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}

.run__face {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 9px 10px 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  transition: border-color var(--dur-fast) var(--ease-crisp),
    box-shadow var(--dur-fast) var(--ease-crisp);
}

.run:hover .run__face {
  border-color: var(--brand-line);
  box-shadow: 0 0 0 3px var(--brand-subtle);
}

.run > input:focus-visible + .run__face {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.run__caret {
  font-family: var(--font-mono);
  color: var(--faint);
  line-height: 1;
}

.run__text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--muted-foreground);
}

.run__key {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  background: var(--brand);
  color: var(--brand-foreground);
  font-size: var(--t-label);
  font-weight: 560;
  letter-spacing: 0.02em;
}

.run > input:checked + .run__face .run__key {
  background: transparent;
  color: var(--faint);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}

.term {
  position: relative;
  display: grid;
  gap: 7px;
  padding: var(--s5);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
}

.term__line {
  opacity: 0;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.term__line em {
  font-style: normal;
  color: var(--faint);
}

.term__line--idle {
  position: absolute;
  inset: var(--s5);
  opacity: 1;
  color: var(--faint);
}

.term__line--bad {
  color: var(--bad);
}

.term__line--ok {
  color: var(--ok);
}

.craft__demo:has(input:checked) .term__line--idle {
  opacity: 0;
}

/* `:not()` matters: the idle line is a `.term__line` too, and the fill mode on
   this animation would otherwise fade it straight back in on top of the
   transcript it is supposed to have been replaced by. */
.craft__demo:has(input:checked) .term__line:not(.term__line--idle) {
  animation: term-in 380ms var(--ease-out) both;
  animation-delay: calc(0.15s + var(--o) * 0.5s);
}

@keyframes term-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* ── Section remix ───────────────────────────────────────────────────────── */
.remix__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--background-sunken);
  border-bottom: 1px solid var(--rule);
}

.remix__chips {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.remix__go {
  margin-left: auto;
  cursor: pointer;
  position: relative;
}

.remix__go > span {
  display: block;
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--brand-foreground);
  font-size: var(--t-xs);
  font-weight: 540;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background var(--dur-fast) var(--ease-crisp),
    color var(--dur-fast) var(--ease-crisp);
}

.remix__go:has(input:checked) > span {
  background: transparent;
  color: var(--muted-foreground);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}

.remix__go > input:focus-visible + span {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.remix__status {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--rule);
  background: var(--background-sunken);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--muted-foreground);
}

.remix__scope {
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
}

.remix__status b {
  font-weight: 500;
  color: var(--brand);
}

.remix__status b[data-for="work"],
.remix__status b[data-for="end"] {
  display: none;
}

.remix:has(#rmx-work:checked) .remix__status b[data-for="hero"],
.remix:has(#rmx-end:checked) .remix__status b[data-for="hero"] {
  display: none;
}

.remix:has(#rmx-work:checked) .remix__status b[data-for="work"],
.remix:has(#rmx-end:checked) .remix__status b[data-for="end"] {
  display: inline;
}

/* ── The schematic page both craft demos operate on ─────────────────────── */
.wire {
  display: grid;
  gap: var(--s4);
  padding: var(--s5);
}

.wire__band {
  border: 1px dashed transparent;
  border-radius: var(--radius-sm);
  padding: var(--s3);
  transition: border-color var(--dur-base) var(--ease-crisp),
    background var(--dur-base) var(--ease-crisp);
}

.wire__band--nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 0 var(--s4);
  border: 0;
  border-bottom: 1px solid var(--rule);
}

.wire b,
.wire span,
.wire em,
.wire u {
  display: block;
  border-radius: 3px;
}

.wire b {
  width: var(--w, 34%);
  height: 11px;
  background: var(--foreground);
  opacity: 0.82;
}

.wire span {
  width: var(--w, 60%);
  height: 6px;
  background: var(--rule-strong);
}

.wire em {
  width: 62px;
  height: 17px;
  border-radius: var(--radius-xs);
  background: var(--brand);
  opacity: 0.9;
}

.wire u {
  height: 46px;
  border-radius: var(--radius-xs);
  background: var(--muted);
  border: 1px solid var(--rule);
}

.wire__band--nav i {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-xs);
  background: var(--brand);
  flex: none;
}

.wire__band--nav span {
  width: 48px;
}

.wire__band--nav span:nth-of-type(2) {
  width: 32px;
}

.wire__band--nav em {
  margin-left: auto;
  width: 44px;
  height: 15px;
}

.wire__a,
.wire__b,
.wire__cards {
  display: grid;
  gap: 9px;
}

.wire__cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wire__cards--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Last, so that a `.wire__b` which is also a `.wire__cards` stays hidden —
   two same-specificity display declarations resolve by order, and the
   alternate version of a band must not be on screen next to the original. */
.wire__b {
  display: none;
}

.wire__cards u {
  height: 52px;
}

.wire__end {
  gap: 9px;
}

/* The targeted band, and what happens when it is remixed. Nothing outside it
   moves — which is the claim the row is making. */
.remix:has(#rmx-hero:checked) [data-band="hero"],
.remix:has(#rmx-work:checked) [data-band="work"],
.remix:has(#rmx-end:checked) [data-band="end"] {
  border-color: var(--brand-line);
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.remix:has(#rmx-go:checked):has(#rmx-hero:checked) [data-band="hero"] .wire__a,
.remix:has(#rmx-go:checked):has(#rmx-work:checked) [data-band="work"] .wire__a,
.remix:has(#rmx-go:checked):has(#rmx-end:checked) [data-band="end"] .wire__a {
  display: none;
}

.remix:has(#rmx-go:checked):has(#rmx-hero:checked) [data-band="hero"] .wire__b,
.remix:has(#rmx-go:checked):has(#rmx-work:checked) [data-band="work"] .wire__b,
.remix:has(#rmx-go:checked):has(#rmx-end:checked) [data-band="end"] .wire__b {
  display: grid;
  animation: term-in 420ms var(--ease-out) both;
}

/* ── Version history ─────────────────────────────────────────────────────── */
.hist__preview {
  padding: var(--s3);
  background: var(--background-sunken);
  border-bottom: 1px solid var(--rule);
}

.wire--hist {
  min-height: 268px;
  align-content: start;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}

.wire__hero {
  display: grid;
  gap: 9px;
  padding-block: var(--s2);
}

.wire__shot .plate {
  --pl-a: #d5c0a4;
  --pl-b: #9d8a74;
  --pl-c: #4a423a;
  border-radius: var(--radius-xs);
}

.wire__foot {
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

/* The newest version is the default state, so an older one is expressed by
   taking things away rather than by adding them. */
.hist:has(#ver-1:checked) .wire__shot,
.hist:has(#ver-1:checked) .wire__cards,
.hist:has(#ver-1:checked) .wire__foot,
.hist:has(#ver-2:checked) .wire__cards,
.hist:has(#ver-2:checked) .wire__foot,
.hist:has(#ver-3:checked) .wire__foot {
  display: none;
}

.hist__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tick {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: var(--s4) var(--s3);
  border-right: 1px solid var(--rule);
  border-top: 2px solid transparent;
  margin-top: -2px;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-crisp),
    background var(--dur-base) var(--ease-crisp);
}

.tick:last-child {
  border-right: 0;
}

.tick b {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--faint);
}

.tick i {
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--muted-foreground);
}

.tick:hover {
  background: var(--accent);
}

.tick:has(input:checked) {
  border-top-color: var(--brand);
}

.tick:has(input:checked) b {
  color: var(--brand);
}

.tick:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

/* ══════════════════════════ Media strip ══════════════════════════ */
.plate--gen {
  --pl-a: #cdd3c6;
  --pl-b: #7f8b86;
  --pl-c: #262b2c;
}

.plate--video {
  --pl-a: #d9c6ae;
  --pl-b: #97785c;
  --pl-c: #2a211b;
}

/* One slow pan on the video plate, and nothing else on the page loops. It is
   the difference between "a still" and "a clip" said in the cheapest way
   there is. */
.plate--video::before {
  animation: pan 9s var(--ease-inout) infinite alternate;
}

@keyframes pan {
  from { transform: translate3d(-2%, 0, 0) scale(1.04); }
  to { transform: translate3d(2%, 0, 0) scale(1.04); }
}

.plate__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.plate__play::after {
  content: "";
  position: absolute;
  left: 53%;
  top: 50%;
  translate: -50% -50%;
  border-left: 10px solid #1a1815;
  border-block: 6px solid transparent;
}

/* ══════════════════════════ Responsive ══════════════════════════ */
@media (max-width: 1000px) {
  .lab,
  .panel {
    grid-template-columns: 1fr;
  }

  .sources:has(#src-ig:checked) .panel[data-for="ig"],
  .sources:has(#src-li:checked) .panel[data-for="li"],
  .sources:has(#src-cv:checked) .panel[data-for="cv"] {
    display: grid;
  }

}

@media (max-width: 720px) {
  .sources__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s4);
  }

  .tab {
    padding-block: var(--s4);
  }

  .hist__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tick:nth-child(2) {
    border-right: 0;
  }

  .tick:nth-child(n + 3) {
    border-top-width: 1px;
    border-top-color: var(--rule);
    margin-top: 0;
  }

  .tick:nth-child(n + 3):has(input:checked) {
    border-top-color: var(--brand);
    border-top-width: 2px;
  }

  .wire--hist {
    min-height: 220px;
  }
}