/* ABOUTME: Deck-local styles for the act45 slides, layered over deck.css and the shared bridge. */
/* ABOUTME: Every class here carries the a4- prefix, so nothing leaks into another builder's slides. */

/* --- ticket: three people held fixed; each rule runs step by step and ends with who set the price --- */
.reveal .a4-ticket { display: grid; grid-template-rows: auto repeat(4, minmax(0, 1fr)); gap: 12px; height: 100%; box-sizing: border-box; padding-top: 20px; }
.reveal .a4-head { display: flex; align-items: center; gap: 18px; }
.reveal .a4-who { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.reveal .a4-who li { margin: 0; padding: 5px 16px; border: 1px solid var(--rule-strong); border-radius: 4px; color: var(--text); font: 400 var(--ce-reveal-support)/1.25 var(--sans); }
.reveal .a4-who b { color: var(--text-bright); font-weight: 600; }
.reveal .a4-rule { display: grid; grid-template-columns: 350px minmax(0, 1fr) 340px; align-items: center; gap: 26px; min-height: 0; padding: 8px 24px; border-left: 4px solid var(--rule-strong); background: var(--bg-2); }
.reveal .a4-rule h3 { margin: 0 0 4px; color: var(--text-bright); font: 600 32px/1.1 var(--sans); }
.reveal .a4-rule p { margin: 0; color: var(--text-dim); font: 400 var(--ce-reveal-support)/1.2 var(--sans); }
.reveal .a4-trace { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.reveal .a4-chip {
  display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 16px;
  border: 2px solid var(--rule-strong); border-radius: 6px; background: var(--bg);
  transition: border-color .4s ease, background-color .4s ease, opacity .4s ease;
}
.reveal .a4-chip b { color: var(--text-bright); font: 600 30px/1.1 var(--sans); }
.reveal .a4-chip span { color: var(--text-dim); font: 400 var(--ce-reveal-support)/1.15 var(--sans); }
/* A chip stays in view; its step changes its state. */
.reveal .a4-chip.fragment { opacity: 1; visibility: inherit; }
.reveal .a4-chip.a4-wins.visible { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 16%, var(--bg-2)); }
.reveal .a4-chip.a4-wins.visible span { color: var(--text); }
.reveal .a4-chip.a4-out.visible { opacity: .42; }
.reveal .a4-chip.a4-out.visible b { text-decoration: line-through; }
.reveal .a4-win { display: flex; flex-direction: column; gap: 2px; margin: 0; padding-left: 24px; border-left: 1px solid var(--rule-strong); }
.reveal .a4-win b { color: var(--gold); font: 400 46px/1 var(--serif); }
.reveal .a4-win span { color: var(--text); font: 400 var(--ce-reveal-support)/1.2 var(--sans); }
.reveal .a4-by { color: var(--gold); font: 500 var(--ce-reveal-label)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.reveal .a4-win .a4-by { color: var(--gold); font: 500 var(--ce-reveal-label)/1.3 var(--mono); }

/* --- oklahoma: whose land it was, then three allocation rules as three plates --- */
.reveal .a4-oklahoma { display: flex; flex-direction: column; gap: 22px; height: 100%; min-height: 0; box-sizing: border-box; padding-top: 26px; }
.reveal .a4-whose { max-width: none; margin: 0; padding: 14px 28px; border-left: 4px solid var(--gold); background: var(--bg-2); color: var(--text-bright); font: 400 40px/1.2 var(--serif); }
.reveal .a4-plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; flex: 1 1 auto; min-height: 0; }
.reveal .a4-plate { display: flex; flex-direction: column; gap: 10px; margin: 0; min-width: 0; min-height: 0; }
.reveal .a4-pic-frame { position: relative; flex: 1 1 auto; min-height: 0; border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.reveal .a4-pic { display: block; width: 100%; height: 100%; margin: 0; max-width: none; max-height: none; object-fit: cover; object-position: var(--a4-focus, center); }
.reveal .a4-card { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 30px; }
.reveal .a4-terms { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.reveal .a4-terms li { margin: 0; padding-left: 18px; border-left: 3px solid var(--rule-strong); color: var(--text-bright); font: 400 30px/1.2 var(--sans); }
.reveal .a4-when { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; }
.reveal .a4-when b { color: var(--gold); font: 400 46px/1 var(--serif); }
.reveal .a4-when span { color: var(--text-bright); font: 600 30px/1.1 var(--sans); }
.reveal .a4-how { max-width: none; min-height: 2.5em; margin: 0; color: var(--text); font: 400 var(--ce-reveal-support)/1.25 var(--sans); }
.reveal .a4-reward { margin: 0; padding-top: 8px; border-top: 3px solid var(--rule-strong); color: var(--text-bright); font: 400 34px/1.1 var(--serif); }
.reveal .a4-reward b { color: var(--gold); font-weight: 400; font-style: italic; }
.reveal .a4-plate figcaption { min-height: 2.7em; margin: 0; color: var(--text-dim); font: 500 var(--ce-reveal-label)/1.35 var(--mono); letter-spacing: .02em; }

/* --- birthdays: a dated line of artifacts, each a small plate with its year, one careful line and its credit --- */
.reveal .a4-timeline { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; height: 100%; min-height: 0; box-sizing: border-box; padding-top: 26px; }
.reveal .a4-tile { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding-top: 18px; min-width: 0; min-height: 0; }
.reveal .a4-tile::before { content: ""; position: absolute; top: 0; left: 0; width: calc(100% + 14px); height: 3px; background: var(--rule-strong); }
.reveal .a4-tile:last-child::before { width: 100%; }
.reveal .a4-tile::after { content: ""; position: absolute; top: -5px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); }
.reveal .a4-year { margin: 0; color: var(--gold); font: 400 54px/1 var(--serif); }
.reveal .a4-year--range { font-size: 40px; padding-top: 7px; }
.reveal .a4-line { max-width: none; min-height: 4.8em; margin: 0; color: var(--text-bright); font: 400 28px/1.2 var(--sans); }
.reveal .a4-tile figcaption { min-height: 5.2em; margin: 0; color: var(--text-dim); font: 500 var(--ce-reveal-label)/1.3 var(--mono); letter-spacing: .02em; }
.reveal .a4-tile .a4-card { align-items: flex-start; gap: 12px; padding: 0 16px; }
.reveal .a4-names { max-width: none; margin: 0; color: var(--text-bright); font: 400 44px/1.05 var(--serif); }
.reveal .a4-say { max-width: none; margin: 0; color: var(--text); font: 400 var(--ce-reveal-support)/1.2 var(--sans); }

/* --- grown-and-drawn: one aerial photograph with two labelled areas, beside Ferguson's sentence --- */
.reveal .a4-barcelona { --ca-left: 1030px; }
.reveal .a4-aerial { display: flex; flex-direction: column; gap: 10px; margin: 0; min-width: 0; min-height: 0; }
.reveal .a4-aerial-frame { position: relative; width: 100%; aspect-ratio: 1500 / 937; border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.reveal .a4-aerial figcaption { margin: 0; color: var(--text-dim); font: 500 var(--ce-reveal-label)/1.35 var(--mono); letter-spacing: .02em; }
.reveal .a4-mark { position: absolute; inset: 0; pointer-events: none; }
.reveal .a4-outlines { position: absolute; inset: 0; width: 100%; height: 100%; }
.reveal .a4-outline { fill: color-mix(in oklab, var(--gold) 10%, transparent); stroke: var(--gold); stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.reveal .a4-tag { position: absolute; left: var(--x); top: var(--y); padding: 4px 18px 6px; border: 2px solid var(--gold); border-radius: 3px; background: var(--bg-2); color: var(--text-bright); font: 400 40px/1.1 var(--serif); }
.reveal .a4-quote { font-size: 34px; }