/* Miami Softwash deck. Own design system, shares nothing with the card boards.
   Forked from Prodigy Media's meta-plan deck (27 August build); palette and fonts swapped
   for the client brand, mono role retired in favour of tabular Manrope, no italic anywhere.
   Geometry follows docs/presentation_standards.md at viewing ratio 3 (laptop):
   canvas 1920x1080, margin 144x108, live area 1632x864, spacing in additive 9px steps,
   slide title 32pt/64px, body 18pt/36px which is also the floor, callout 60pt/120px. */

@font-face{font-family:"Archivo Black";src:url("fonts/ArchivoBlack-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/Manrope-Variable.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  /* five colour roles, nothing else */
  --ground:#FFFFFF;
  --ink:#16161A;
  --muted:#595959;
  --rule:#C7C7C7;
  --accent:#154175;
  /* chrome only, never on a slide */
  --chrome:#F4F4F1;
  --chrome-rule:#DCDCD6;

  --head:"Archivo Black",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;

  /* spacing scale, additive 9px */
  --s1:9px; --s2:18px; --s3:27px; --s4:36px; --s5:54px;
  --s6:72px; --s7:108px; --s8:144px; --s9:216px;
}

*{box-sizing:border-box;margin:0;padding:0;font-synthesis:none}
html,body{height:100%}
body{background:var(--chrome);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overflow:hidden}

/* ---------- shell ---------- */
#app{display:grid;grid-template-rows:56px 1fr;grid-template-columns:250px 1fr;height:100vh}
/* Present mode collapses the shell to a single 1fr x 1fr cell. #surface must carry its own
   placement in both states: with topbar and rail set to display:none they leave the grid
   flow, and a surface with no placement would auto-place into whatever cell is free. That
   is what made the stage 0 by 0 and mirrored it off screen. See BUG-082. */
body.present #app{grid-template-rows:1fr;grid-template-columns:1fr}
body.present #topbar,body.present #rail{display:none}
body.present #surface{grid-row:1;grid-column:1}

@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}

#topbar{grid-row:1;grid-column:1/3;display:flex;align-items:center;gap:16px;padding:0 20px;
  background:var(--ground);border-bottom:1px solid var(--chrome-rule)}
.brand{font-family:var(--head);font-weight:400;font-size:17px;letter-spacing:-.01em}
.brand span{font-family:var(--body);font-weight:400;font-size:14px;color:var(--muted);margin-left:10px}
.top-spacer{flex:1}
.top-btn{font-family:var(--body);font-weight:500;font-size:14px;color:var(--ink);
  background:var(--ground);border:1px solid var(--chrome-rule);padding:7px 13px;cursor:pointer;line-height:1}
.top-btn:hover{border-color:var(--ink)}

#nav{display:flex;align-items:center;border:1px solid var(--chrome-rule)}
#nav button{font-family:var(--body);font-weight:600;font-size:14px;color:var(--ink);
  background:var(--ground);border:0;padding:7px 14px;cursor:pointer;line-height:1.2}
#nav button:hover{background:var(--chrome)}
#nav button[disabled]{color:var(--rule);cursor:default;background:var(--ground)}
#count{display:flex;align-items:center;justify-content:center;gap:2px;
  font-family:var(--body);font-weight:600;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;
  padding:0 10px;border-left:1px solid var(--chrome-rule);border-right:1px solid var(--chrome-rule);
  min-width:78px;height:100%;cursor:text}
#countin{font-family:var(--body);font-weight:600;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;
  background:none;border:0;padding:2px 3px;margin:0;width:3ch;text-align:right;
  -moz-appearance:textfield;cursor:text}
#countin::-webkit-outer-spin-button,#countin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#countin:focus{outline:2px solid var(--accent);outline-offset:1px;color:var(--ink)}
#counttot{white-space:pre}

#rail{grid-row:2;grid-column:1;background:var(--ground);border-right:1px solid var(--chrome-rule);overflow-y:auto;padding:14px 0}
.rail-item{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-weight:500;font-size:14px;color:var(--muted);
  padding:11px 20px;line-height:1.35;border-left:3px solid transparent}
.rail-item:hover{color:var(--ink)}
.rail-item.on{color:var(--ink);font-weight:600;border-left-color:var(--accent);background:var(--chrome)}
.rail-num{font-family:var(--body);font-weight:600;font-variant-numeric:tabular-nums;font-size:12px;color:var(--rule);margin-right:9px}
.rail-item.on .rail-num{color:var(--accent)}

/* ---------- slide surface ---------- */
#surface{grid-row:2;grid-column:2;position:relative;overflow:hidden;background:var(--chrome);display:flex;
  align-items:center;justify-content:center}
#stage{position:absolute;top:0;left:0;width:1920px;height:1080px;background:var(--ground);
  transform-origin:0 0;box-shadow:0 1px 3px rgba(0,0,0,.10)}
body.present #stage{box-shadow:none}

.slide{position:absolute;inset:0;padding:108px 144px;display:none}
.slide.on{display:flex;flex-direction:column}
/* the title is fixed at the top, everything else shares the space that is left */
.s-content{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.slide-num{position:absolute;right:144px;bottom:54px;font-family:var(--body);font-weight:600;
  font-variant-numeric:tabular-nums;font-size:24px;color:var(--muted)}

/* type roles, R=3 */
.s-kicker{font-family:var(--body);font-weight:600;font-size:28px;line-height:1.3;color:var(--muted);
  margin-bottom:var(--s2)}
.s-title{font-family:var(--head);font-weight:400;font-size:64px;line-height:1.15;
  letter-spacing:-.02em;color:var(--ink);max-width:1632px}
.s-lead{font-family:var(--body);font-weight:400;font-size:48px;line-height:1.25;color:var(--muted);
  margin-top:var(--s4);max-width:1400px}
.s-body{font-family:var(--body);font-size:36px;line-height:1.35;color:var(--ink);max-width:1180px}
.s-fig{margin:0}
.s-note{font-family:var(--body);font-size:28px;line-height:1.35;color:var(--muted);margin-top:var(--s5);max-width:800px}
/* Source line sits at 12pt/24px, the presentation standard's figure for this role at R=3.
   Archivo Black ships one weight and no italic file, so the source line moves to Manrope;
   font-synthesis:none on * keeps the browser from faking either. */
.s-src{position:absolute;left:144px;bottom:54px;font-family:var(--body);
  font-weight:400;font-size:24px;color:var(--muted);max-width:1300px;line-height:1.3}

/* quotation archetype */
.s-quote{font-family:var(--body);font-weight:400;font-size:48px;line-height:1.3;color:var(--ink);
  border-left:4px solid var(--accent);padding-left:var(--s4);max-width:1400px}

/* naming string, was a mono role: tabular Manrope, no monospace font shipped */
.s-code{font-family:var(--body);font-weight:600;font-size:36px;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:var(--s3)}

/* section cover slide */
.slide.cover{display:none;padding:0}
.slide.cover.on{display:flex;flex-direction:column;justify-content:center;padding:0 144px}
.cover-num{font-family:var(--body);font-weight:600;font-variant-numeric:tabular-nums;font-size:36px;
  color:var(--accent);margin-bottom:var(--s4)}
.cover-title{font-family:var(--head);font-weight:400;font-size:120px;line-height:1.05;
  letter-spacing:-.03em;color:var(--ink);max-width:1500px}
.cover-sub{font-family:var(--body);font-size:48px;line-height:1.3;color:var(--muted);
  margin-top:var(--s5);max-width:1300px}

/* deck opening slide */
.slide.opening{position:absolute;inset:0}
.slide.opening.on{display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;padding:0 144px}
.opening-lockup{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s6)}
.opening-mark{height:168px;width:auto;flex:0 0 auto;align-self:flex-start}
.opening-word{height:84px;width:auto;flex:0 0 auto;align-self:center}
.opening-title{font-family:var(--head);font-weight:400;font-size:132px;line-height:1.03;
  letter-spacing:-.03em;color:var(--ink)}
.opening-sub{font-family:var(--body);font-size:48px;line-height:1.35;color:var(--muted);
  margin-top:var(--s5);max-width:1400px}
.opening-meta{font-family:var(--body);font-size:28px;color:var(--muted);margin-top:var(--s7)}

/* aligned text blocks, the replacement for a card grid */
.blocks{display:grid;gap:var(--s5) var(--s4);margin:0}
.blocks.two{grid-template-columns:repeat(2,1fr)}
.blocks.three{grid-template-columns:repeat(3,1fr)}
.blocks.four{grid-template-columns:repeat(4,1fr)}
.blk h3{font-family:var(--head);font-weight:400;font-size:40px;line-height:1.2;color:var(--ink)}
.blk p{font-family:var(--body);font-size:36px;line-height:1.35;color:var(--muted);margin-top:var(--s2)}
.blk .num{font-family:var(--body);font-weight:600;font-variant-numeric:tabular-nums;font-size:36px;
  color:var(--accent);display:block;margin-bottom:var(--s1)}

/* numeric callout */
.callout{font-family:var(--head);font-weight:400;font-size:120px;line-height:1;color:var(--accent);
  letter-spacing:-.02em}
.callout-unit{font-family:var(--body);font-weight:400;font-size:48px;color:var(--muted);
  margin-top:var(--s2);line-height:1.3}

/* comparison table */
table.cmp{border-collapse:collapse;margin:0;width:100%;table-layout:fixed}
table.cmp th,table.cmp td{text-align:left;vertical-align:top;padding:var(--s2) var(--s3);
  font-family:var(--body);font-size:36px;line-height:1.3;border-bottom:1px solid var(--rule)}
table.cmp thead th{font-family:var(--head);font-weight:400;color:var(--ink);
  border-bottom:2px solid var(--ink);padding-bottom:var(--s2)}
table.cmp tbody th{font-weight:400;color:var(--muted)}
table.cmp thead th.th-mark{padding-bottom:var(--s2)}
table.cmp thead th.th-mark img{height:54px;width:auto;display:block}
table.cmp td{color:var(--ink)}
table.cmp td.mark{color:var(--accent);font-weight:600}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}

/* figures: the SVG and node pattern */
.fig{position:relative}
.fig svg{display:block;overflow:visible}
.fig text{font-family:var(--body);fill:var(--ink)}
.fig .lbl{font-size:32px}
.fig .lbl-sm{font-size:28px;fill:var(--muted)}
.fig .lbl-b{font-size:36px;font-weight:600}
.fig .val{font-family:var(--body);font-size:32px;font-weight:600;font-variant-numeric:tabular-nums}
.fig .val-sm{font-size:28px}
.fig .val-accent{fill:var(--accent)}
.fig .box{fill:var(--ground);stroke:var(--ink);stroke-width:2}
.fig .box-accent{fill:var(--ground);stroke:var(--accent);stroke-width:3}
.fig .box-fill{fill:var(--chrome);stroke:var(--rule);stroke-width:2}
.fig .bar{fill:var(--muted)}
.fig .bar-accent{fill:var(--accent)}
.fig .conn{fill:none;stroke:var(--ink);stroke-width:3}
.fig .conn-soft{fill:none;stroke:var(--muted);stroke-width:3;stroke-dasharray:8 8}
.fig .axis{stroke:var(--ink);stroke-width:3}
.fig .gridline{stroke:var(--rule);stroke-width:1.5}

/* ---------- pan sections ---------- */
/* flat pan ground, no dot grid */
#pan{position:absolute;inset:0;display:none;background:var(--ground);cursor:grab}
#pan.on{display:block}
#pan.drag{cursor:grabbing}
#panstage{position:absolute;top:0;left:0;transform-origin:0 0}
/* pancards carries no box of its own, so absolutely positioned cards still place against
   panstage's origin exactly as before this wrapper was added for panedges. */
#pancards{display:contents}
#panedges{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.card{position:absolute;background:var(--ground);border:2px solid var(--ink);
  padding:15px 17px 16px;width:300px;cursor:pointer}
.card:hover{box-shadow:4px 4px 0 var(--rule)}
.card.on{box-shadow:4px 4px 0 var(--ink)}
.card.wide{width:360px}
.c-logo{display:block;height:32px;width:auto;margin-bottom:9px}
.c-name{font-family:var(--head);font-weight:400;font-size:17px;line-height:1.25}
.c-line{font-family:var(--body);font-size:15px;line-height:1.4;color:var(--muted);margin-top:7px}
.c-shot{display:block;width:100%;margin-top:12px;border:1px solid var(--rule)}
.card.pair{width:auto;padding:10px 10px 6px}
.pair-imgs{display:flex;gap:12px;align-items:flex-start}
.pair-imgs figure{margin:0}
.pin-wrap{position:relative;display:inline-block;line-height:0}
.pin-wrap img{display:block;height:430px;width:auto}
.pair-who{display:flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;
  font-size:15px;color:var(--ink);padding:9px 2px 4px}
.pair-who .expand{margin-left:auto;font-family:var(--body);font-weight:500;font-size:14px;
  color:var(--ink);background:var(--ground);border:1px solid var(--rule);padding:3px 9px;cursor:pointer}
.pair-who .expand:hover{border-color:var(--ink)}

/* annotation pins: a flat ground chip with an ink border, so a number never reads
   against the photo it sits on */
.pin{position:absolute;transform:translate(-50%,-50%);min-width:26px;height:24px;padding:0 5px;
  border-radius:4px;border:2px solid var(--ink);background:var(--ground);color:var(--ink);cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;line-height:1;
  display:flex;align-items:center;justify-content:center}
.pin:hover,.pin.on{background:var(--accent);border-color:var(--accent);color:var(--ground)}
.pin.region{width:auto;aspect-ratio:1/1;background:none;display:block;border-radius:4px;border-color:transparent}
.pin.region b{position:absolute;top:-10px;right:-10px;min-width:24px;height:24px;padding:0 4px;border-radius:4px;
  border:2px solid var(--ink);background:var(--ground);color:var(--ink);
  font-family:var(--body);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;font-style:normal;
  display:flex;align-items:center;justify-content:center}
.pin.region:hover b,.pin.region.on b{background:var(--accent);border-color:var(--accent);color:var(--ground)}

#pop{position:fixed;z-index:60;max-width:300px;background:var(--ground);border:2px solid var(--ink);
  padding:12px 14px;font-family:var(--body);font-size:16px;line-height:1.5;color:var(--ink);
  box-shadow:4px 4px 0 var(--rule);display:none}
#pop.on{display:block}

#lightbox{position:fixed;inset:0;z-index:38;background:rgba(20,20,18,.55);display:none;
  align-items:center;justify-content:center;padding:28px}
#lightbox.on{display:flex}
#lightbox figure{margin:0;background:var(--ground);border:2px solid var(--ink);padding:12px 12px 8px}
#lightbox .pin-wrap img{height:min(88vh,980px);width:auto}

#pannote{position:absolute;left:24px;bottom:22px;max-width:560px;background:var(--ground);
  border:1px solid var(--rule);padding:13px 16px;font-size:15px;line-height:1.5;color:var(--muted)}
#panzoom{position:absolute;right:24px;top:20px;display:flex;gap:6px}
#panzoom button{font-family:var(--body);font-weight:500;font-size:14px;background:var(--ground);
  border:1px solid var(--rule);width:34px;height:32px;cursor:pointer;color:var(--ink)}
#panzoom button.wide{width:auto;padding:0 11px}
#panzoom button:hover{border-color:var(--ink)}

/* edges between cards on a pan section, drawn into #panedges. Ported from board.css L69 to
   L73, redrawn at 2px so the line reads clearly at pan scale. */
#panedges .edge{fill:none;stroke:var(--ink);stroke-width:2}
#panedges .edge.soft{stroke:var(--muted);stroke-dasharray:6 6}
#panedges .arrow{fill:var(--ink)}
#panedges .elabel{font-family:var(--body);font-size:15px;font-weight:600;fill:var(--ink)}
#panedges .elabel-bg{fill:var(--ground)}

/* ---------- side sheet ---------- */
#sheet{position:fixed;top:0;right:0;width:520px;height:100vh;background:var(--ground);
  border-left:2px solid var(--ink);padding:32px 36px 40px;overflow-y:auto;
  transform:translateX(100%);transition:transform .22s ease;z-index:45}
#sheet.open{transform:none}
@media (prefers-reduced-motion:reduce){#sheet{transition:none}}
#sheet h2{font-family:var(--head);font-weight:400;font-size:26px;line-height:1.15;
  letter-spacing:-.015em;margin-bottom:18px;padding-right:86px}
#sheet p{font-size:17px;line-height:1.6;color:var(--ink);margin-bottom:15px}
#sheet p strong{font-weight:600}
#sheet .close{position:absolute;top:24px;right:28px;background:var(--ground);
  border:1px solid var(--rule);font-family:var(--body);font-size:14px;padding:5px 11px;
  cursor:pointer;color:var(--ink)}
#sheet .sheet-shot{width:100%;border:2px solid var(--ink);display:block;margin-bottom:15px}
.sheet-src{margin-top:30px;padding-top:18px;border-top:2px solid var(--ink)}
.sheet-src h3{font-family:var(--head);font-weight:400;font-size:16px;margin-bottom:11px}
.sheet-src li{font-size:15px;line-height:1.5;color:var(--muted);margin-bottom:9px;
  list-style:none;padding-left:16px;text-indent:-16px}
#scrim{position:fixed;inset:0;background:rgba(20,20,18,.16);opacity:0;pointer-events:none;
  transition:opacity .22s;z-index:44}
#scrim.on{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){#scrim{transition:none}}

.hint{position:absolute;right:24px;bottom:22px;font-family:var(--body);font-size:14px;color:var(--muted)}

/* ---------- pair actions on a card ---------- */
.pair-acts{display:flex;align-items:center;gap:9px;padding:2px 2px 4px}
.pair-acts button{font-family:var(--body);font-weight:500;font-size:14px;color:var(--ink);
  background:var(--ground);border:1px solid var(--rule);padding:4px 11px;cursor:pointer;line-height:1.3}
.pair-acts button:hover{border-color:var(--ink)}
.pair-risk{font-family:var(--body);font-weight:600;font-size:14px;color:var(--accent);
  border:1px solid var(--accent);padding:3px 9px;margin-right:auto}

/* ---------- pair full screen ---------- */
#pairfs{position:fixed;inset:0;z-index:30;background:var(--ground);display:none;
  flex-direction:column;padding:18px 24px 24px}
#pairfs.on{display:flex}
.fs-bar{display:flex;align-items:center;gap:12px;padding-bottom:14px;
  border-bottom:2px solid var(--ink);margin-bottom:18px}
.fs-title{font-family:var(--head);font-weight:400;font-size:22px;color:var(--ink);margin-right:auto}
.fs-bar .pair-risk{margin-right:0}
.fs-bar button{font-family:var(--body);font-weight:500;font-size:15px;color:var(--ink);
  background:var(--ground);border:1px solid var(--rule);padding:6px 14px;cursor:pointer}
.fs-bar button:hover{border-color:var(--ink)}
.fs-imgs{flex:1;display:flex;gap:24px;align-items:flex-start;justify-content:center;min-height:0}
.fs-imgs figure{margin:0;display:flex;flex-direction:column;min-height:0}
.fs-imgs .pin-wrap{display:block}
/* both pictures take the same ceiling, so a pair reads as a pair rather than as two sizes */
.fs-imgs .pin-wrap img{display:block;height:calc(100vh - 170px);width:auto;max-width:44vw}
.fs-imgs .pair-who{font-size:16px}

/* ---------- source card actions ---------- */
.c-acts{display:flex;align-items:center;gap:9px;margin-top:11px}
.c-go{font-family:var(--body);font-weight:600;font-size:14px;color:var(--accent);
  border-bottom:1px solid var(--accent);margin-right:auto}
.c-go.c-off{color:var(--muted);border-bottom-color:var(--rule)}
.c-info{font-family:var(--head);font-weight:400;font-size:14px;color:var(--muted);
  background:var(--ground);border:1px solid var(--rule);border-radius:50%;
  width:26px;height:26px;line-height:1;cursor:pointer;flex:0 0 auto}
.c-info:hover{border-color:var(--accent);color:var(--accent)}
.card.textcard{min-height:0}
.card.textcard .c-name{font-size:18px}

/* ---------- colour roles inside a figure ----------
   `.fig text` sets a base fill, and a CSS rule always beats a fill= presentation
   attribute, so every inline fill on a <text> was being dropped. These classes carry
   the same specificity as .lbl and friends and sit after them, so they win. Five roles
   only, matching the tokens at the top of this file. */
.fig text.fill-ink{fill:var(--ink)}
.fig text.fill-muted{fill:var(--muted)}
.fig text.fill-accent{fill:var(--accent)}
.fig text.fill-ground{fill:var(--ground)}
/* a figure never touches the lead or the quote above it */
.s-lead + .s-fig, .s-quote + .s-fig, .s-fig + .blocks{margin-top:var(--s4)}