/* ══ THE TECH BEHIND THIS GAME — the doors + the dialog (lane TECH1, Oct 12 2026 · TP2 polish, Oct 17 2026) ══
   Ported from the approved mock (FOOTBALL_PLAYS-tech-popup/mocks/oia-tech-popup.html, v18:
   six cards in a two-column grid that scrolls inside the dialog; the WORLD FIRST plate; Built by).
   Tokens come from embed/oia/sections.css on live.html; the watch app (embed/oia/watch) carries only
   the colour tokens, so the three faces are declared again on .tp/.sci below (same values — one truth).
   Every class here is prefixed tp-/tc-/wf so nothing reaches the rest of the page
   (live.html already owns .pwr .st .lv .sep .note .nm .now .no) and nothing on the
   page reaches in. Logic: tech-popup.js. Gate: scripts/test-oia-tech-popup.js.
   TP2 (Carlos, Oct 17 1:30 AM): "Not enough padding… a UI polished look". The spacing ladder is
   measured by the gate, not eyeballed: --pad (the dialog's inner padding) ≥ 24 phone / ≥ 40 desktop,
   --cpad (a card's body) ≥ 20 / ≥ 28, --gap (between cards) ≥ 16; the close key never crowds the title;
   safe-area insets on the phone sheet; the scrim and panel ease in, never under reduced motion. */

/* ── THE DOOR: one button in the hero's CTA row, the page's own .btn grammar,
      a gold leading bar, no pill. Hidden until tech-popup.js has wired it, so a
      visitor never meets a button that does nothing. (The "Powered by" marks are the
      other doors — each page styles its own mark; tech-popup.js finds them by
      [data-tech-door].) ── */
.btn.tech{position:relative;padding-left:30px;border-color:var(--line-2);background:transparent;color:var(--bone);cursor:pointer}
.btn.tech[hidden]{display:none}
.btn.tech::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:4px;background:var(--gold)}
.btn.tech:hover,.btn.tech:focus-visible{border-color:var(--gold);color:var(--gold-ink)}
html[data-oia-theme="day"] .btn.tech:hover{color:var(--gold-ink)}

/* ── THE DIALOG: six cards, two columns on desktop and iPad landscape, one column on iPad
      portrait; the panel scrolls inside the dialog; a full-screen sheet on the phone. ── */
.tp,.sci{--wide:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;--chy:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;--text:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif}
.tp{--panel:rgba(8,9,11,.97);--card:#0B0C0E;--scrim:rgba(0,0,0,.86);
  --pad:clamp(24px,3.2vw,40px);--cpad:clamp(20px,2.2vw,28px);--gap:clamp(16px,1.4vw,24px);
  position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:clamp(8px,2vw,28px);
  background:var(--scrim);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:400 16px/1.55 var(--text);color:var(--bone);text-align:left}
html[data-oia-theme="day"] .tp{--panel:rgba(243,241,234,.98);--card:#fff;--scrim:rgba(11,12,14,.62)}
.tp[hidden]{display:none}
body.tp-open{overflow:hidden}
.tp-inner{position:relative;width:min(1320px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid rgba(183,158,49,.38);-webkit-overflow-scrolling:touch}
/* the entrance: the scrim fades, the panel lands. Never under reduced motion. */
.tp:not([hidden]){animation:tp-scrim .28s ease-out both}
.tp:not([hidden]) .tp-inner{animation:tp-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes tp-scrim{from{opacity:0}to{opacity:1}}
.tp-head{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:var(--pad) var(--pad) calc(var(--pad) - 8px);border-bottom:1px solid var(--line-2);
  background:linear-gradient(108deg,transparent 62%,rgba(183,158,49,.09) 68%,transparent 74%)}
.tp-head > div:first-child{flex:1 1 auto;min-width:0}
.tp-k{display:flex;align-items:center;gap:12px;font:500 11px/1 var(--chy);letter-spacing:.32em;color:var(--gold-ink);text-transform:uppercase}
.tp-k img{display:none}
.tp-k .tp-lv{display:inline-flex;align-items:center;gap:8px;color:#FF5A5D;letter-spacing:.26em}
html[data-oia-theme="day"] .tp-k .tp-lv{color:var(--live)}
.tp-k .tp-sep{width:1px;height:12px;background:var(--line-2)}
.tp .pulse{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(229,56,59,.55);animation:tp-pulse 1.8s infinite}
@keyframes tp-pulse{0%{box-shadow:0 0 0 0 rgba(229,56,59,.55)}70%{box-shadow:0 0 0 9px rgba(229,56,59,0)}100%{box-shadow:0 0 0 0 rgba(229,56,59,0)}}
.tp .dot{color:var(--gold-ink)}
.tp-title{margin:14px 0 0;font:700 clamp(22px,3vw,40px)/1 var(--wide);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
/* the maker's mark: "Built by" over the wordmark IMAGE (the SC shield lives only in the intro), a lockup at the head's
   right beside the close key — not a footnote. On the phone it drops to its own row.
   The wordmark is the Powered-by rule's two-colour image (text.webp on dark, text-black on light) — Carlos approved
   these lockups on screenshots (Oct 13 + Oct 17); audit-brand-logos.js exempts exactly these three tags (techDialog). */
.tp-by{margin-left:auto;align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px 0 28px;border-left:1px solid var(--line-2)}
.tp-by-k{font:500 10px/1 var(--chy);letter-spacing:.42em;color:var(--gold-ink);text-transform:uppercase;padding-left:.42em}
.tp-by-m{display:flex;align-items:center;gap:10px}
.tp-by-m img{height:42px;width:auto}
.tp-by .on-day{display:none}
html[data-oia-theme="day"] .tp-by .on-night{display:none}
html[data-oia-theme="day"] .tp-by .on-day{display:block}
.tp-x{flex:none;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--ink);color:var(--bone);cursor:pointer;padding:0;margin:0;-webkit-appearance:none;appearance:none}
.tp-x svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:square}
.tp-x:hover,.tp-x:focus-visible{border-color:var(--gold)}
.tp-x:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* the cards: a measured gap between them, each on its own hairline — never a 1px lattice */
.tp-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);padding:calc(var(--pad) * .75) var(--pad) var(--pad)}
/* a card = picture left, words right (desktop + iPad landscape); stacked on the phone */
.tc{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--card);min-width:0;border:1px solid var(--line-2)}
.tc-pic{position:relative;min-height:clamp(200px,27vh,250px);overflow:hidden;background:#050506;border-right:1px solid var(--line-2)}
.tc-pic .tc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* per-card framing: keep the subject in the crop (the approved shots' values) */
.tc[data-card="officiating"] .tc-photo{object-position:70% 58%}
.tc[data-card="comms"] .tc-photo{object-position:52% 40%}
.tc[data-card="live"] .tc-photo{object-position:34% 45%}
.tc[data-card="coach"] .tc-photo{object-position:72% 50%}
/* an image that fails to load leaves the dark plate, never a broken-image glyph */
.tp img[data-missing]{visibility:hidden}

/* WORLD FIRST: a notched plate, top-left of the picture, its point to the right. Text only —
   the SC shield appears once, in the intro. */
.wf{position:absolute;top:14px;left:0;z-index:2;display:flex;align-items:center;pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.wf-t{display:flex;flex-direction:column;align-items:stretch;padding:7px 18px 7px 14px;
  background:linear-gradient(225deg,#0b0c0e 0%,#16181b 100%);border:1px solid #BEF264;border-left:0;
  box-shadow:inset -3px 0 0 #BEF264;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%)}
.wf-a{display:flex;justify-content:space-between;font:600 10px/1 var(--chy);color:#BEF264;text-transform:uppercase}
.wf-a i{font-style:normal}
.wf-b{margin-top:3px;font:700 13px/1 var(--wide);letter-spacing:.04em;color:#F3F1EA;text-transform:uppercase}

/* card 6: the road ahead, drawn — the alliance badge on it */
.tc-road{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:var(--cpad);
  background:radial-gradient(70% 90% at 15% 50%,rgba(183,158,49,.20),transparent 70%),linear-gradient(180deg,#121316,#050506)}
/* the badge is 44×48: sized before it loads (it loads lazily, mid-scroll) so the road never jumps */
.tc-road img{width:74px;height:80px$1}
.tc-road ol{list-style:none;margin:0;padding:0;border-left:1px solid #2C2F34}
.tc-road li{position:relative;padding:6px 0 6px 16px;color:#F3F1EA}
.tc-road li::before{content:"";position:absolute;left:-5px;top:11px;width:9px;height:9px;background:#0B0C0E;border:1px solid #9A9EA5}
.tc-road li.tp-now::before{background:#B79E31;border-color:#B79E31}
.tc-road .tp-st{display:block;font:500 10px/1 var(--chy);letter-spacing:.3em;color:#9A9EA5;text-transform:uppercase}
.tc-road li.tp-now .tp-st{color:#B79E31}
.tc-road .tp-nm{display:block;margin-top:5px;font:700 11px/1.15 var(--wide);text-transform:uppercase;letter-spacing:.02em}
.tc-road .tp-wh{display:block;margin-top:5px;font:500 11px/1 var(--chy);letter-spacing:.18em;color:#9A9EA5;text-transform:uppercase}

/* card 4: the whole keeper screen, uncropped, in an iPad at an angle over a night field */
.tc-device{display:grid;place-items:center;perspective:900px;isolation:isolate;
  background:
    radial-gradient(55% 45% at 50% 62%,rgba(190,242,100,.22),transparent 70%),
    radial-gradient(30% 40% at 6% 0%,rgba(255,244,214,.55),transparent 70%),
    radial-gradient(30% 40% at 94% 0%,rgba(255,244,214,.45),transparent 70%),
    linear-gradient(180deg,#05070a 0%,#0b1410 48%,#0f2a17 100%)}
.tc-device::before{content:"";position:absolute;left:-40%;right:-40%;bottom:-8%;height:62%;z-index:-1;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 2px,transparent 2px 11%),
    repeating-linear-gradient(90deg,#1d5a2c 0 11%,#17491f 11% 22%);
  transform:perspective(380px) rotateX(58deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%);mask-image:linear-gradient(180deg,transparent 0%,#000 55%);opacity:.9}
.tc-device::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(118deg,transparent 30%,rgba(255,244,214,.10) 36%,transparent 44%),
    linear-gradient(62deg,transparent 56%,rgba(255,244,214,.08) 62%,transparent 70%),
    radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.65) 100%)}
.tc-device .ipad{position:relative;width:88%;margin-top:-6%;padding:2.6%;border-radius:14px;
  background:linear-gradient(145deg,#3a3d42,#15171a 45%,#2a2d31);
  box-shadow:0 0 0 1px #4a4e54 inset,0 24px 40px rgba(0,0,0,.7),0 0 46px rgba(190,242,100,.18);
  transform:rotateY(-18deg) rotateX(8deg) rotateZ(1deg);transform-style:preserve-3d}
.tc-device .ipad img{display:block;width:100%;height:auto;object-fit:contain;border-radius:6px}

/* the label: a gold bar + chyron label, never a pill */
.tc-body{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:var(--cpad);min-width:0}
.tc-k{display:flex;align-items:center;gap:12px;font:500 11px/1 var(--chy);letter-spacing:.3em;color:var(--gold-ink);text-transform:uppercase}
.tc-k::before{content:"";width:4px;height:16px;background:var(--gold)}
.tc-k .tp-no{font:700 11px/1 var(--wide);letter-spacing:.06em;color:var(--ti)}
.tc h3{margin:2px 0 0;font:700 clamp(16px,1.35vw,19px)/1.18 var(--wide);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;overflow-wrap:anywhere}
.tc p{margin:0;font:400 14px/1.6 var(--text);color:var(--ti);max-width:58ch}
.tc p b{color:var(--bone);font-weight:600}

.tp-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:calc(var(--pad) - 8px) var(--pad);border-top:1px solid var(--line-2)}
.tp-foot .tp-note{font:500 10px/1.6 var(--chy);letter-spacing:.24em;color:var(--ti);text-transform:uppercase}
/* "Technology by" + the wordmark IMAGE — never text for the name, never a link */
.tp-pwr{display:flex;align-items:center;gap:12px;margin-left:auto;font:500 10px/1 var(--chy);letter-spacing:.26em;color:var(--ti);text-transform:uppercase;white-space:nowrap}
.tp-pwr img{height:22px;width:auto}
.tp-pwr .on-day{display:none}
html[data-oia-theme="day"] .tp-pwr .on-night{display:none}
html[data-oia-theme="day"] .tp-pwr .on-day{display:block}

/* ── responsive ── */
/* iPad portrait and narrow laptops: one column of the same cards */
@media (max-width:1000px){
  .tp{--pad:clamp(28px,3.6vw,40px);--cpad:clamp(24px,2.6vw,28px)}
  .tp-grid{grid-template-columns:1fr}
  .tc{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .tc-pic{min-height:212px}
}
/* a phone held sideways: the two-column dialog in a short viewport */
@media (max-height:520px){
  .tp{padding:8px}
  .tp-head{padding:16px var(--pad) 12px}
  .tp-title{font-size:22px;margin-top:8px}
  .tp-by-m img{height:30px}
  .tc-pic{min-height:180px}
}
@media (max-width:760px){
  .tp{--pad:24px;--cpad:20px;--gap:16px;padding:0;align-items:stretch}
  .tp-inner{border:0;max-height:none;height:100%;height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
  /* z-index 3: above the WORLD FIRST plates (2) as the sheet scrolls under the sticky head.
     The notch: the sticky head carries the top inset so the title never sits under it. */
  .tp-head{position:sticky;top:0;z-index:3;background:var(--panel);padding:calc(16px + env(safe-area-inset-top)) var(--pad) 14px;gap:16px;flex-wrap:wrap}
  .tp-head > div:first-child{flex:1 1 0;min-width:0}
  .tp-by{order:3;flex-basis:100%;margin-left:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:12px 0 0;border-left:0;border-top:1px solid var(--line-2)}
  .tp-by-m img{height:24px}
  .tp-title{font-size:20px;margin-top:10px}
  .tp-k .tp-lv,.tp-k .tp-sep{display:none}
  .tp-grid{grid-template-columns:1fr;padding:var(--pad) var(--pad) 8px}
  .tc{display:flex;flex-direction:column}
  .tc-pic{min-height:0;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line-2)}
  .tc-road{aspect-ratio:auto;flex-direction:row;align-items:center;gap:18px;padding:var(--cpad)}
  .tc-road img{width:74px;height:80px$1}
  .tc-body{padding:var(--cpad) var(--cpad) calc(var(--cpad) + 4px)}
  .tp-foot{flex-direction:column;align-items:flex-start;gap:16px;padding:20px var(--pad) 24px}
  .tp-pwr{margin-left:0}
  .wf{top:12px}.wf-b{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.tp{-webkit-backdrop-filter:none;backdrop-filter:none}.tp:not([hidden]),.tp:not([hidden]) .tp-inner{animation:none}}

/* ── FRAMED (EP1, Oct 17 2026): inside a partner's iframe the frame is often taller than the screen, and
      position:fixed is the FRAME's box — tech-popup.js measures the part of the frame that is on screen
      (IntersectionObserver) and the dialog and the intro sit on that part: --tp-top / --tp-h, set on each.
      The phone sheet fills that part (100% of it, never 100dvh = the whole frame). A top-level page never
      carries html[data-tech-framed], so nothing here reaches live.html or the watch app. ── */
html[data-tech-framed] .tp,html[data-tech-framed] .sci{top:var(--tp-top,0px);height:var(--tp-h,100%);bottom:auto}
@media (max-width:760px){html[data-tech-framed] .tp-inner{height:100%}}

/* ══ THE INTRO — "Technology by Sideline Command", ~2.45 s before the dialog (mock v20) ══
   A tap skips to the dialog; Esc cancels; reduced motion never shows it; tech-popup.js restarts
   every animation on each open and calls reveal() at 2450 ms. Rules below are the mock's, verbatim. */
/* ── THE INTRO: shield alone, centred → it leaves → the wordmark alone, centred → fade to the popup ── */
.sci{position:fixed;inset:0;z-index:140;display:grid;place-items:center;overflow:hidden;background:#030405;cursor:pointer;
  animation:sci-out .4s cubic-bezier(.7,0,.2,1) 2.15s forwards}
.sci[hidden]{display:none}
.sci-grid{position:absolute;inset:-20%;z-index:0;opacity:0;
  background:repeating-linear-gradient(90deg,rgba(190,242,100,.08) 0 1px,transparent 1px 80px),
             repeating-linear-gradient(0deg,rgba(190,242,100,.05) 0 1px,transparent 1px 80px);
  transform:perspective(600px) rotateX(62deg) translateY(30%);animation:sci-grid 2.4s ease-out forwards}
.sci-beam{position:absolute;z-index:1;width:140%;height:2px;left:-20%;top:50%;
  background:linear-gradient(90deg,transparent,#BEF264 45%,#fff 50%,#BEF264 55%,transparent);
  box-shadow:0 0 24px 4px rgba(190,242,100,.55);transform:scaleX(0);animation:sci-beam .7s cubic-bezier(.7,0,.2,1) .05s forwards}
.sci-lock{position:absolute;inset:0;z-index:2;display:grid;place-items:center}
/* act 1: the shield, by itself */
.sci-shield{width:clamp(120px,14vw,200px);height:auto;opacity:0;transform:scale(.4) rotate(-14deg);
  filter:drop-shadow(0 0 34px rgba(190,242,100,.55));
  animation:sci-shield .65s cubic-bezier(.2,1.4,.3,1) .3s forwards, sci-shield-out .35s cubic-bezier(.7,0,.2,1) 1.1s forwards}
/* act 2: the wordmark, by itself */
.sci-words{display:flex;flex-direction:column;align-items:center;gap:12px}
.sci-k{font:500 clamp(11px,1.1vw,14px)/1 var(--chy);letter-spacing:.5em;color:#BEF264;text-transform:uppercase;
  opacity:0;transform:translateY(8px);animation:sci-up .4s ease-out 1.35s forwards}
.sci-mark{width:clamp(240px,34vw,480px);height:auto;clip-path:inset(0 100% 0 0);animation:sci-wipe .55s cubic-bezier(.7,0,.2,1) 1.4s forwards}
.sci-line{display:block;align-self:stretch;height:3px;background:#BEF264;transform:scaleX(0);transform-origin:center;animation:sci-line .45s cubic-bezier(.7,0,.2,1) 1.7s forwards}
@keyframes sci-beam{60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes sci-shield{to{opacity:1;transform:none}}
@keyframes sci-shield-out{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.25);filter:drop-shadow(0 0 60px rgba(190,242,100,0)) blur(6px)}}
@keyframes sci-up{to{opacity:1;transform:none}}
@keyframes sci-wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes sci-line{to{transform:scaleX(1)}}
@keyframes sci-grid{to{opacity:1;transform:perspective(600px) rotateX(62deg) translateY(10%)}}
@keyframes sci-out{to{opacity:0;transform:scale(1.08);visibility:hidden}}
.tp.from-intro .tp-inner{animation:tp-in .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes tp-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sci{display:none}.tp.from-intro .tp-inner{animation:none}}
.sci img[data-missing]{visibility:hidden}