/* Meet the Bots (bot-lab/index.php, the short page since 2026-10-13), on top of bot-lab.css. One design all the way down (Shaun, 2026-10-13:
   "cohesively connect the whole page all elements so it all seems one design"):
   - every section is the same panel, on the site's neutral surfaces (the --bl-* page colours map to tokens here);
   - a gold MuckNet wire runs from panel to panel, with a node where it plugs in;
   - the machine bits (the readout, the layer versions, the dossier, the chat) all speak in --muck-font-mono.
   Colours, spacing, radii and motion come from tokens.css (docs/STYLE-GUIDE.md). */

body.bl-short {
  --bl-bg: var(--muck-bg); --bl-panel: var(--muck-surface-2); --bl-panel-2: var(--muck-surface-3);
  --bl-line: var(--muck-line); --bl-line-2: var(--muck-line-strong);
  --bl-text: var(--muck-text); --bl-muted: var(--muck-text-2); --bl-dim: var(--muck-text-3);
  background: var(--muck-bg);
}
.bl-short main { padding-bottom: var(--muck-space-7); }

/* ── Panels and the wire ──────────────────────────────────────────────────────────────────────────────────────── */
.bl-short .hero, .bl-short .panel { position: relative; background: var(--muck-surface-1); border: 1px solid var(--muck-line); border-radius: var(--muck-radius-overlay); }
.bl-short .hero { margin-top: var(--muck-space-5); min-height: 0; }
.bl-short .panel { margin-top: var(--muck-space-6); padding: var(--muck-space-7); }
.bl-short .panel::before {
  content: ''; position: absolute; left: var(--muck-space-7); bottom: 100%; width: 2px; height: calc(var(--muck-space-6) + 2px);
  background: linear-gradient(var(--muck-gold-muted), var(--muck-gold));
}
.bl-short .panel::after {
  content: ''; position: absolute; left: calc(var(--muck-space-7) + 1px); top: 0; width: 10px; height: 10px; translate: -50% -50%;
  border-radius: 50%; background: var(--muck-gold); box-shadow: 0 0 0 var(--muck-space-1) color-mix(in srgb, var(--muck-gold) 18%, transparent);
}
.bl-short .panel h2 { margin-bottom: var(--muck-space-4); }
.bl-short .cast-badge { border-color: var(--muck-line-strong); }
.bl-short .cast-badge--house { border-color: var(--muck-gold-muted); }

/* ── 1. MuckBot and his clones ────────────────────────────────────────────────────────────────────────────────── */
.hero--clones { grid-template-columns: 1fr 1fr; }   /* room for the title on two lines */
.bl-short .hero-copy { padding: var(--muck-space-7); }
.bl-short .hero-copy .intro { font-size: 16px; max-width: 430px; color: var(--muck-text); }
.bl-short .terminal {
  position: static; display: inline-block; margin-top: var(--muck-space-6); padding: var(--muck-space-3) var(--muck-space-4);
  background: var(--muck-bg); border: 1px solid var(--muck-line-strong); border-radius: var(--muck-radius-card); box-shadow: none; backdrop-filter: none;
  font-family: var(--muck-font-mono); color: var(--muck-text-2);
}
.bl-short .terminal b { color: var(--muck-text); }
.bl-short .terminal .warn { color: var(--muck-red); }
.bl-short .terminal .cursor { background: var(--muck-text-2); }

.clones-wrap { display: grid; place-items: center; min-width: 0; padding: var(--muck-space-6); background: radial-gradient(circle at center, var(--muck-surface-2) 0, transparent 70%); }
.clones { position: relative; list-style: none; margin: 0; padding: 0; width: min(100%, 600px); aspect-ratio: 1; }
.clones::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle closest-side, transparent 42.6%, var(--muck-line) 42.6% 43.4%, transparent 43.4% 65.6%, var(--muck-line) 65.6% 66.4%, transparent 66.4% 88.6%, var(--muck-line) 88.6% 89.4%, transparent 89.4%);
}
.clone { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--s) * 1%); aspect-ratio: 1; translate: -50% -50%; transition: transform var(--muck-dur-fast); }
.clone img, .clone-face { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--muck-line-strong); object-fit: cover; background: var(--muck-surface-2); }
.clone[style*="--r:0"] img { border-color: var(--muck-gold-muted); }
.clone:hover { z-index: 1; transform: scale(1.18); }
.clone--prime { left: 50%; top: 50%; width: 26%; z-index: 1; }
.clone--prime img { border: 3px solid var(--muck-gold); box-shadow: 0 0 0 var(--muck-space-2) color-mix(in srgb, var(--muck-gold) 12%, transparent); }
.clone--prime:hover { transform: none; }
.clone--prime span {
  position: absolute; left: 50%; bottom: var(--muck-space-1); translate: -50% 0; padding: var(--muck-space-1) var(--muck-space-3);
  border-radius: var(--muck-radius-pill); background: var(--muck-gold-cta); color: var(--muck-gold-ink);
  font: 800 11px/1.2 var(--muck-font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.clones.ly-anim .clone:not(.clone--prime) { opacity: 0; }
.clones.ly-anim.is-in .clone:not(.clone--prime) { animation: clonePop var(--muck-dur-slow) var(--muck-ease-pop) both; animation-delay: calc(var(--r) * 220ms + var(--i) * 6ms); }
@keyframes clonePop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }

/* ── 2. Built in layers ───────────────────────────────────────────────────────────────────────────────────────── */
.bl-short .panel.layers-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--muck-space-7); align-items: center; }
.layers-copy > p { font-size: 15px; line-height: 1.7; color: var(--muck-text-2); margin: 0 0 var(--muck-space-5); }
.layers-extras h3 { font-size: 16px; margin-bottom: var(--muck-space-2); }
.bl-short .layers-extras ul { grid-template-columns: 1fr; }
.bl-short .layers-extras li { padding: var(--muck-space-3) 0; }
.layers { position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--muck-space-6); display: grid; gap: var(--muck-space-3); }
.layers::before { content: ''; position: absolute; left: var(--muck-space-2); top: var(--muck-space-4); bottom: var(--muck-space-4); width: 2px; background: linear-gradient(var(--muck-gold), var(--muck-line-strong)); }
.layers::after { content: ''; position: absolute; left: var(--muck-space-1); bottom: var(--muck-space-2); border: var(--muck-space-1) solid transparent; border-top: var(--muck-space-2) solid var(--muck-line-strong); border-bottom: 0; width: 2px; }
.layer {
  display: grid; grid-template-columns: auto 64px 1fr auto; align-items: center; gap: var(--muck-space-4);
  padding: var(--muck-space-4) var(--muck-space-5);
  background: linear-gradient(var(--muck-surface-3), var(--muck-surface-2)); border: 1px solid var(--muck-line-strong); border-radius: var(--muck-radius-card);
  box-shadow: 0 var(--muck-space-1) 0 var(--muck-line); transition: transform var(--muck-dur-fast), border-color var(--muck-dur-fast);
}
.layer:hover { transform: translateY(-2px); border-color: var(--muck-gold-muted); }
.layer-led { width: var(--muck-space-2); height: var(--muck-space-2); border-radius: 50%; background: var(--muck-surface-3); }
/* the top three by place (bot-lab/index.php ly-1..3): green, yellow, red; the rest plain (tokens.css) */
.layer.ly-1 { --layer-accent: var(--muck-build-1); }
.layer.ly-2 { --layer-accent: var(--muck-build-2); }
.layer.ly-3 { --layer-accent: var(--muck-build-3); }
.layer.is-live .layer-led { background: var(--layer-accent); box-shadow: 0 0 var(--muck-space-2) var(--layer-accent); }
.layer-v { font: 800 22px/1 var(--muck-font-mono); letter-spacing: -.04em; color: var(--muck-text-3); }
.layer.is-live .layer-v, .layer.is-live .layer-tag { color: var(--layer-accent); }
.layer-body { min-width: 0; }
.layer-body b { display: block; font-size: 16px; letter-spacing: -.02em; color: var(--muck-text); }
.layer-body small { display: block; margin-top: var(--muck-space-1); font-size: 12.5px; line-height: 1.45; color: var(--muck-text-2); }
.layer-tag { white-space: nowrap; }
.layers.ly-anim .layer { opacity: 0; }
.layers.ly-anim.is-in .layer { animation: lyDrop var(--muck-dur-slow) var(--muck-ease-pop) both; animation-delay: calc((var(--n, 5) - 1 - var(--i)) * 110ms); }
@keyframes lyDrop { from { opacity: 0; translate: 0 calc(-1 * var(--muck-space-6)); } to { opacity: 1; translate: 0 0; } }
/* The current build, on top, reads as finished (Shaun, 2026-10-17: "really impressive, like its finally done/ready"): a lit
   card in its own color, a pulsing LED, a light that sweeps across now and then, and a solid tag like a shipped stamp.
   Whichever layer is on top (bot-lab/index.php marks it .is-top): v3.6 live, v4.0 once Bots 4.0 is on. */
.layer.is-top {
  position: relative; overflow: hidden; isolation: isolate; padding-block: var(--muck-space-5);
  background: radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--layer-accent) 16%, transparent), transparent 62%), linear-gradient(var(--muck-surface-3), var(--muck-surface-2));
  border-color: color-mix(in srgb, var(--layer-accent) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--layer-accent) 22%, transparent), 0 var(--muck-space-2) var(--muck-space-7) color-mix(in srgb, var(--layer-accent) 20%, transparent);
}
.layer.is-top:hover { border-color: var(--layer-accent); }
.layer.is-top::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; translate: -100% 0;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--layer-accent) 14%, transparent) 50%, transparent 65%);
  animation: lySweep 5s var(--muck-ease) 1.2s infinite;
}
@keyframes lySweep { 0% { translate: -100% 0; } 35%, 100% { translate: 100% 0; } }
.layer.is-top .layer-led { position: relative; }
.layer.is-top .layer-led::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--layer-accent);
  animation: lyPing 2s ease-out infinite;
}
@keyframes lyPing { from { scale: 1; opacity: .9; } to { scale: 3.2; opacity: 0; } }
.layer.is-top .layer-v { font-size: 26px; text-shadow: 0 0 var(--muck-space-4) color-mix(in srgb, var(--layer-accent) 45%, transparent); }
.layer.is-top .layer-body b { font-size: 17px; }
.layer.is-live.is-top .layer-tag { background: var(--layer-accent); border-color: var(--layer-accent); color: var(--muck-bg); }

/* ── 3. How they play: the dossier you deal ───────────────────────────────────────────────────────────────────── */
.bl-short .panel.how { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--muck-space-7); align-items: center; }
.how-copy > p { font-size: 15px; line-height: 1.7; color: var(--muck-text-2); margin: 0 0 var(--muck-space-5); max-width: 460px; }
.dossier { background: var(--muck-bg); border: 1px solid var(--muck-line-strong); border-radius: var(--muck-radius-card); padding: var(--muck-space-5); font-family: var(--muck-font-mono); }
.dossier-head { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--muck-space-4); align-items: center; padding-bottom: var(--muck-space-4); }
.dossier-face { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--muck-gold-muted); object-fit: cover; background: var(--muck-surface-2); }
.dossier-name { display: block; font: 800 20px/1.2 var(--muck-font); letter-spacing: -.02em; color: var(--muck-text); }
.dossier-head small { display: block; margin-top: var(--muck-space-1); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muck-text-3); }
.dossier-led { width: var(--muck-space-2); height: var(--muck-space-2); border-radius: 50%; background: var(--muck-gold); box-shadow: 0 0 var(--muck-space-2) var(--muck-gold); animation: blBlink 1.6s steps(1) infinite; }
.dossier-row { display: grid; grid-template-columns: 150px 1fr auto; gap: var(--muck-space-4); align-items: center; padding: var(--muck-space-4) 0; border-top: 1px solid var(--muck-line); }
.dossier-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muck-gold-muted); }
.dossier-label small { display: block; margin-top: var(--muck-space-1); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muck-text-3); }
.style-grid { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--muck-space-1); }
.style-grid > span {
  padding: var(--muck-space-2) var(--muck-space-3); border: 1px solid var(--muck-line); border-radius: var(--muck-radius-field);
  font-size: 12px; text-align: center; color: var(--muck-text-3); transition: color var(--muck-dur), border-color var(--muck-dur), background var(--muck-dur);
}
.style-grid > span.on { border-color: var(--muck-gold); color: var(--muck-gold); background: color-mix(in srgb, var(--muck-gold) 12%, transparent); }
.dossier-quirks { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--muck-space-2); }
.dossier-quirks .cast-badge { font-family: var(--muck-font-mono); }
.dossier-meter { height: var(--muck-space-2); border-radius: var(--muck-radius-pill); background: var(--muck-surface-3); overflow: hidden; }
.dossier-meter i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--muck-gold-muted), var(--muck-gold)); transition: width var(--muck-dur-slow) var(--muck-ease); }
.dossier-val { min-width: 72px; text-align: right; font-size: 13px; color: var(--muck-text); font-variant-numeric: tabular-nums; }
.dossier.is-dealt .dossier-face, .dossier.is-dealt .dossier-name { animation: dealIn var(--muck-dur-slow) var(--muck-ease-pop); }
@keyframes dealIn { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

.bl-short .how .how-rl {
  grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: 80px 1fr auto; gap: var(--muck-space-5); align-items: center;
  padding: var(--muck-space-5); background: var(--muck-surface-2); border: 1px solid var(--muck-line); border-radius: var(--muck-radius-card);
}
.bl-short .how .how-rl img { width: 80px; height: 80px; border-width: 2px; }
.bl-short .how .how-rl h3 { font-size: 20px; margin: 0 0 var(--muck-space-1); }
.bl-short .how .how-rl p { font-size: 14px; color: var(--muck-text-2); }

/* ── 4. Yes, they talk ────────────────────────────────────────────────────────────────────────────────────────── */
.bl-short .panel.split { gap: var(--muck-space-7); align-items: center; }
.bl-short .split-copy > p { font-size: 15px; line-height: 1.7; color: var(--muck-text-2); margin: 0 0 var(--muck-space-5); }
.bl-short .split-art img { border-color: var(--muck-line); border-radius: var(--muck-radius-card); }
.bl-short .chat-demo { background: var(--muck-bg); border-color: var(--muck-line-strong); border-radius: var(--muck-radius-card); padding: var(--muck-space-4) var(--muck-space-5); font-family: var(--muck-font-mono); }
.bl-short .chat-demo p { color: var(--muck-text-2); }
.bl-short .chat-demo .you b { color: var(--muck-text-3); }
.talk { display: grid; gap: var(--muck-space-3); }
.talk-log { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.talk-log .is-typing { color: var(--muck-text-3); font-style: italic; }
.talk-form { display: flex; gap: var(--muck-space-2); }
.talk-form .mk-input { flex: 1; font-family: var(--muck-font-mono); font-size: 13px; }
.talk-form .mk-btn { flex: none; min-height: 44px; }

/* ── 5. Fair questions ────────────────────────────────────────────────────────────────────────────────────────── */
.bl-short .panel.faq { gap: var(--muck-space-7); }
.bl-short .faq h2 { margin-bottom: var(--muck-space-5); }

/* ── Narrow and phone ─────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .bl-short .hero.hero--clones, .bl-short .panel.layers-section, .bl-short .panel.how, .bl-short .panel.split, .bl-short .panel.faq { grid-template-columns: 1fr; gap: var(--muck-space-6); }
  .hero--clones .clones-wrap { order: -1; }
  .bl-short .panel.split .split-art { order: -1; }
}
@media (max-width: 719px) {
  /* No frame around a section on phones: its cards run the full width, 16px from the edges (Shaun, 2026-10-15: "we want
     the main content cards as wide as possible, this has padding for an outer card, then padding for the inner card") */
  .bl-short .panel { padding: 0; background: none; border: 0; border-radius: 0; }
  .bl-short .panel::before, .bl-short .panel::after { display: none; }   /* no gold connectors on phones (Shaun, 2026-10-15) */
  .bl-short .hero-copy { padding: var(--muck-space-5); }
  .clones-wrap { padding: var(--muck-space-4); }
  .clone img, .clone-face { border-width: 1px; }
  .clone--prime img { border-width: 2px; }
  .layers { padding-left: var(--muck-space-5); }
  .layers::before { left: var(--muck-space-1); }
  .layers::after { left: 0; }
  .layer { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--muck-space-1) var(--muck-space-3); padding: var(--muck-space-3) var(--muck-space-4); }
  .layer-led { display: none; }
  .layer-v { font-size: 18px; }
  .layer-tag { grid-column: 2; justify-self: start; white-space: normal; }
  .dossier { padding: var(--muck-space-4); }
  .dossier-row { grid-template-columns: 1fr auto; gap: var(--muck-space-2) var(--muck-space-3); }
  .dossier-label { grid-column: 1 / -1; }
  .style-grid, .dossier-quirks { grid-column: 1 / -1; }
  .bl-short .how .how-rl { grid-template-columns: 64px 1fr; gap: var(--muck-space-4); padding: var(--muck-space-4); }
  .bl-short .how .how-rl img { width: 64px; height: 64px; }
  .bl-short .how .how-rl .mk-btn { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .clone, .layer, .style-grid span, .dossier-meter i { transition: none; }
  .clone:hover, .layer:hover { transform: none; }
  .dossier-led { animation: none; }
  .layer.is-top::after, .layer.is-top .layer-led::after { animation: none; }
  .layer.is-top::after { display: none; }
  .dossier.is-dealt .dossier-face, .dossier.is-dealt .dossier-name { animation: none; }
}

.clone-face,.dossier-face{display:block;flex-shrink:0;background-repeat:no-repeat}

/* Use the width beside chapter copy before falling back to a phone stack. */
@media (min-width:560px) and (max-width:1099px) {
  .bl-short .hero-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--muck-space-5); align-items:start; }
  .bl-short .hero-copy h1,.bl-short .hero-copy .intro,.bl-short .hero-copy .hero-actions { grid-column:1; }
  .bl-short .hero-copy .terminal { grid-column:2; grid-row:1 / 4; align-self:center; margin-top:0; }
  .bl-short .how-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--muck-space-5); align-items:center; }
  .bl-short .how-copy h2,.bl-short .how-copy>p { grid-column:1; }
  .bl-short .how-copy>[data-deal] { grid-column:2; grid-row:1 / 3; margin:0; }
  .bl-short .faq>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:var(--muck-space-4); }
  .bl-short .faq>div:first-child h2 { margin:0; }
  .bl-short .faq>div:first-child .mk-btn { flex-shrink:0; }
}
.talk-play { margin-top: 14px; }
.talk-play[hidden] { display: none; }
/* A clone's card while you point at it (bot-lab/index.php; Shaun, 2026-10-17): face, name, style, two quirks */
.clone-card{position:absolute;z-index:5;width:max-content;padding:var(--muck-space-3);border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-card);background:var(--muck-surface-1);box-shadow:var(--muck-shadow-menu);pointer-events:none;display:grid;gap:var(--muck-space-2)}
.clone-card[hidden]{display:none}
.clone-card-head{display:flex;align-items:center;gap:var(--muck-space-3)}
.clone-card-face{display:block;flex:none;width:36px;height:36px;border-radius:50%;border:2px solid var(--muck-gold-muted);background-repeat:no-repeat}
.clone-card-who{display:grid;gap:2px;min-width:0}
.clone-card-name{display:flex;align-items:center;font-size:14px;color:var(--muck-text)}
.clone-card-name .rec{width:6px;height:6px;margin-right:6px;flex:none}
.clone-card-style{font:600 11px var(--muck-font-mono);color:var(--muck-text-2)}
.clone-card-quirks{display:flex;gap:4px}
.clone-card-quirks .cast-badge{font-family:var(--muck-font-mono);font-size:10px}
.clone:not(.clone--prime){cursor:default}
/* "Then we cloned it." starts a hair left, so the l of cloned stands right under the p of poker (Shaun, 2026-10-17: "its
   slightly off and its irking me"; the l's stem sat 0.036em right of the p's). Only while the title is its two whole lines
   (.is-two-line, set by the script under the clones); wrapped, the lines keep one left edge. */
.bl-short .hero--clones h1.is-two-line em{margin-left:-.036em}
/* Spelled out, "tight · aggressive" is 130px of monospace: on narrow phones it shortens to "aggro" so the two cells stay one
   line each (Shaun, 2026-10-29: "change agro to aggressive" / "use aggro to abbreviate if u need room on smaller") */
.style-grid .sg-short { display: none; }
@media (max-width: 420px) {
  .style-grid .sg-long { display: none; }
  .style-grid .sg-short { display: inline; }
}