/* A3a scale-1 beat. Text is HTML. SVG is not used for type. Height is the
   stack of every string the beat can show, reported to the lesson page. */
:root {
  --paper: #f4f0e5;
  --card: #fffef8;
  --ink: #0a211d;
  --muted: #4b5650;
  --line: #cfd4c8;
  --act: #24508f;
  --pass: #2f6b3a;
  --fail: #a63d1f;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); }
html.is-framed, html.is-framed body { overflow: hidden; }
#stage { padding: 12px 12px 16px; display: grid; gap: 12px; }
.claim { display: none; }
.nojs { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 650; }
.choose-label { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
#choose-buttons { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
button {
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  min-height: 44px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  overflow-wrap: anywhere;
}
button:disabled { color: var(--muted); background: transparent; cursor: default; }
button:focus-visible { outline: 3px solid var(--act); outline-offset: 2px; }
#choose-buttons button[aria-pressed="true"] {
  background: var(--act);
  border-color: var(--act);
  color: #fff;
}
.split { display: grid; gap: 12px; align-items: start; }
#rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
}
.mark {
  border-left: 2px solid var(--ink);
  border-radius: 2px;
}
.row[data-s="active"] .mark,
.row[data-s="live"] .mark { border-left-color: var(--act); }
.row[data-s="held"] .mark { border-left-color: var(--pass); }
.row[data-s="refused"] .mark,
.row[data-s="allowed"] .mark,
.row[data-s="failed"] .mark,
.row[data-s="compromised"] .mark { border-left-color: var(--fail); }
.card {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.row[data-s="active"] .card,
.row[data-s="live"] .card { border-color: var(--act); }
.row[data-s="held"] .card { border-color: var(--pass); }
.row[data-s="refused"] .card,
.row[data-s="allowed"] .card,
.row[data-s="failed"] .card,
.row[data-s="compromised"] .card { border-color: var(--fail); }
.kicker { margin: 0 0 2px; font-size: 13px; line-height: 1.3; font-weight: 700; color: var(--muted); }
.kicker-stack { margin: 0 0 2px; }
.kicker-stack .kicker { margin: 0; }
.row[data-s="warn"] .mark,
.boundary[data-s="warn"] .mark { border-left-color: #6b3a06; }
.row[data-s="warn"] .card,
.boundary[data-s="warn"] { border-color: #6b3a06; }
.row[data-s="warn"] .value,
.boundary[data-s="warn"] .value { color: #6b3a06; }
.stack { display: grid; }
.stack > * { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.stack > [data-on] { visibility: visible; }
.value { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.value.mono,
.value code.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.4;
}
.row[data-s="held"] .value,
.boundary[data-s="held"] .value { color: var(--pass); }
.row[data-s="refused"] .value,
.row[data-s="allowed"] .value,
.row[data-s="failed"] .value,
.row[data-s="compromised"] .value,
.boundary[data-s="refused"] .value,
.boundary[data-s="allowed"] .value,
.boundary[data-s="failed"] .value,
.boundary[data-s="compromised"] .value { color: var(--fail); }
.boundary {
  display: block;
  border-top: 2px dashed var(--ink);
  padding-top: 6px;
}
.boundary .value { font-size: 13px; font-weight: 700; }
.say .value { font-size: 16px; line-height: 1.4; }
#controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
#count { margin: 0; font-size: 13px; line-height: 1.3; color: var(--muted); text-align: center; }
#prev, #next { text-align: center; }
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#choose.is-stack #choose-buttons { grid-template-columns: 1fr; }
@media (min-width: 321px) {
  #stage[data-pair] #rows { grid-template-columns: 1fr 1fr; }
  #stage[data-pair] #rows > .boundary { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
  #stage { padding: 16px 20px 18px; gap: 14px; }
  #choose-buttons { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  #choose.is-stack #choose-buttons { grid-template-columns: 1fr; }
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
/* 13.2 narrates above a single-column rail. 18.3 is a dotted chain with the note below. */
#stage[data-story] .split,
#stage[data-chain] .split {
  display: flex;
  flex-direction: column;
}
#stage[data-story] .say { order: -1; }
#stage[data-chain] .mark {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  align-self: start;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: var(--paper);
}
/* 13.3 and 18.3: keep Back and Next on screen at 320. */
@media (max-width: 390px) {
  #stage[data-chain],
  #stage[data-clocks] {
    padding-bottom: 8px;
    gap: 8px;
  }
  #stage[data-chain] #rows,
  #stage[data-clocks] #rows {
    gap: 6px;
  }
  #stage[data-chain] .card,
  #stage[data-clocks] .card {
    padding: 6px 8px;
  }
  #stage[data-clocks] .split {
    gap: 8px;
  }
  #stage[data-clocks] #rows {
    gap: 4px;
  }
}
/* 18.3 at 640px: EDR, IdP, and CSPM share one row and join the SIEM band. */
@media (min-width: 640px) {
  #stage[data-chain] #rows {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  #stage[data-chain] [data-id="cookie"],
  #stage[data-chain] [data-id="siem"] {
    grid-column: 1 / -1;
  }
  #stage[data-chain] [data-id="edr"],
  #stage[data-chain] [data-id="idp"],
  #stage[data-chain] [data-id="cspm"] {
    grid-column: span 2;
  }
  #stage[data-chain] [data-id="revoke"],
  #stage[data-chain] [data-id="isolate"] {
    grid-column: span 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none; animation: none; }
}