/* Overrides that turn a deck slide into a figure on 12ak.com. The deck's own stylesheet
   (deck.css) loads first and is unchanged. */
html, body { background: transparent !important; overflow: hidden; }
body { isolation: auto; margin: 0; }
body::before, body::after { display: none !important; }
#fit { transform-origin: 0 0; padding: 6px 4px 14px; box-sizing: border-box; }
#fit > section { position: relative; width: auto; height: auto; background: none; }
#fit > section::before, #fit > section::after { display: none !important; }
#fit .slide { width: auto; height: auto; padding: 0; display: block; }
.anim-pause { display: none !important; }

/* ---------- the loop and the two-tools loop: stage on top, steps below ---------- */
#fit .anim-wrap.loop { display: flex; flex-direction: column; gap: 22px; margin-top: 0; }
#fit .anim-wrap.loop .anim-stage { order: -1; }
#fit .anim-wrap.loop .anim-side { height: auto !important; padding-top: 0; display: block; }
#fit .anim-wrap.loop .anim-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 26px; }
#fit .anim-wrap.loop .anim-steps li { padding: 18px 0 16px !important; border-bottom: 1px solid rgba(26, 19, 16, .26); }
#fit .anim-wrap.loop .anim-steps .h { font-size: 30px !important; }
#fit .anim-wrap.loop .anim-steps .n { font-size: 19px; }
#loop-duo .duo-key { margin: 26px 0 0 !important; grid-template-columns: repeat(4, 1fr); column-gap: 26px; }

/* ---------- the goals: three loops ---------- */
#fit #goal-anim .anim-foot { margin-top: 18px; }

/* ---------- the rings ---------- */
#fit #ladder-rings .lr { grid-template-columns: 560px 1fr; gap: 64px; }
#fit #ladder-rings .lr-stage { width: 560px; height: 560px; }
#fit #ladder-rings .lr-row b { font-size: 40px; }
#fit #ladder-rings .lr-row p { font-size: 27px; }
.small #fit #ladder-rings .lr { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
.small #fit #ladder-rings .lr-rows { width: 100%; }

/* ---------- the pace chart ---------- */
/* The chart draws itself once, at the width it finds. Give the frame its design width up front
   (the same numbers as data-dw and data-dw-small in pace.html), or it draws at the iframe's width
   and is then scaled down, which leaves part of the card empty. */
#fit:has(> #vendors-every-day) { width: 1400px; }
/* At its design width it would show oversized for a moment before the shim scales it, so it stays
   hidden until the shim has set the scale on #fit (an inline transform). */
#fit:has(> #vendors-every-day):not([style*="scale"]) { visibility: hidden; }
#fit #vendors-every-day .slide { padding: 36px 40px 28px; box-sizing: border-box; }
#fit #vendors-every-day .drum { margin-top: 0; }
#fit #vendors-every-day .drum-board { margin-top: 0; }
#fit #vendors-every-day .drum-detail { margin-top: 18px; }
/* The company names are text, so they get a darker shade of the dot colour (4.5:1 on the page background). */
#fit #vendors-every-day .drum-lane:nth-of-type(1) .drum-lane-name { color: #006f64; }
#fit #vendors-every-day .drum-lane:nth-of-type(2) .drum-lane-name { color: #7f5c1c; }
#fit #vendors-every-day .drum-closer { font-size: 34px !important; margin-top: 10px !important; }
@media (max-width: 639px) {
  /* On a phone the names sit above their dots, and each week is one dot wide. */
  #fit:has(> #vendors-every-day) { width: 520px; }
  #fit #vendors-every-day .slide { padding: 20px 18px 18px; }
  #fit #vendors-every-day .drum-lane { width: 100%; height: auto !important; margin-top: 10px; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 14px; }
  #fit #vendors-every-day .drum-lane-name { font-size: 28px; }
  #fit #vendors-every-day .drum-count { font-size: 20px; }
  #fit #vendors-every-day .drum-count b { font-size: 34px; }
  #fit #vendors-every-day .drum-detail { font-size: 21px; min-height: 120px; }
  #fit #vendors-every-day .drum-l1 { font-size: 20px; flex-wrap: wrap; column-gap: 10px; }
  #fit #vendors-every-day .drum-l2 { font-size: 24px; }
  #fit #vendors-every-day .drum-closer { font-size: 29px !important; }
}

/* ---------- the exchange ---------- */
#fit #agent-talk .at { margin-top: 0; }
#fit #agent-talk .at-ex { min-height: 640px; }
#fit #agent-talk .at-hint { top: 34%; }
.small #fit #agent-talk .at-ex { min-height: 760px; }
.small #fit #agent-talk .at-seats { flex-wrap: wrap; }
.small #fit #agent-talk .at-cap { position: static; translate: none; order: 3; width: 100%; margin-top: 16px; white-space: normal; font-size: 32px; }
.small #fit #agent-talk .at-card { width: 84%; }
.small #fit #agent-talk .at-time { position: static; translate: none; display: inline-block; margin-bottom: 10px; }
.small #fit #agent-talk .at-arcs, .small #fit #agent-talk .at-ex::before { display: none; }
.small #fit #agent-talk .at-hint { width: 90%; }
.small #fit #agent-talk .at-tabs { flex-wrap: wrap; }
.small #fit #agent-talk .at-tab { flex: 1 1 30%; }

/* ---------- the catch ---------- */
#fit #catch-story .cs { margin-top: 0; }
#fit #catch-story .cs-close { font-size: 34px; }
.small #fit #catch-story .cs-top { grid-template-columns: 1fr; row-gap: 14px; }
.small #fit #catch-story .cs-body { grid-template-columns: 1fr; row-gap: 26px; }
.small #fit #catch-story .cs-field { font-size: 40px; }

/* ---------- the timeline strips (shifts, seven ways) ---------- */
#fit .shifts { margin-top: 12px !important; }
#fit .sh-by, #fit .sh-you span { opacity: 1; }                 /* on the slides these showed on hover; a reader sees them at rest */
#fit .shifts.hovering .sh-you:not(.hot) span { opacity: 1; }
#fit .slide > .serif-italic { margin-top: 44px !important; }   /* the closer line under a strip or a set of cards */

/* ---------- the ladder, zoomed out ---------- */
#fit #ladder-zoom .anim-steps .h { font-size: 28px !important; }
#fit #ladder-zoom .anim-steps .d { font-size: 20px; }

/* ---------- the charter, and where I'd take this ---------- */
#fit #loop-rules .ru { margin-top: 34px; }
#fit #loops-push .nx { margin-top: 0; }
.small #fit #loop-rules .ru, .small #fit #loops-push .nx { grid-template-columns: 1fr; gap: 16px; }
.small #fit #loop-rules .ru-card, .small #fit #loops-push .nx-card { min-height: 0; }