/* KIT EXTRAS ON TOP OF THE LIVE LAYOUT PIECES. kit/layout.css is a byte-for-byte copy of Tourney's live
   code/web2/src/ds/layout.css (the one source; protokit check "drift" FAILS when they differ, and `protokit.py sync`
   re-copies it). SUPERSEDED (11-10): the kit's own hand-edited layout.css copy of BQ-4360 (integrator 2f0e5c9436).
   Everything the kit needs beyond the source lives HERE, loaded right after layout.css, so the copy never drifts:
   1. the names the source reads, mapped to the kit's tokens (one look, light mode only);
   2. the kit's few extra variants (.lg/.sm stacks, .between, .kv, .sm grid, .narrow);
   3. two deliberate differences, each with its reason. */

/* 1. the source's names -> the kit's tokens */
:root {
  --surface-page: var(--surface); --border-default: var(--line); --rs-bg: var(--bg); --rs-line: var(--line);
  --navy: var(--brand); --aqua: var(--accent-fill); --radius-md: var(--r-sm); --rs-tabbar-h: 3.5rem;
}

/* 2. variants */
.rs-stack > * { margin-block: 0; }
.rs-stack.lg { --stack-space: 1.75rem; }
.rs-stack.sm { --stack-space: var(--space-2); }
.rs-cluster.between { justify-content: space-between; }
.rs-sidebar.kv > :first-child { flex-basis: 0; flex-grow: 999; min-inline-size: min(100%, 12rem); }
.rs-sidebar.kv > :last-child { flex-basis: auto; flex-grow: 1; min-inline-size: 0; }
.rs-autogrid.sm { --grid-min: 9.5rem; gap: var(--space-2); }
.rs-center.narrow { --center-max: 40rem; }

/* 3a. Center: the source sets width:100% and has no gutter (Tourney's page adds it). The kit's screens put the gutter
   on .rs-center itself, and width:100% + a gutter overflows by 2rem (caught by the 8-width check 11-10). */
.rs-center { width: auto; max-inline-size: var(--center-max, 72rem); padding-inline: var(--center-gutter, var(--space-4)); }

/* 3b. The one pinned bar: the kit shell switches to the top nav at 62rem (Tourney at 1024px), so the bar goes back in
   the flow at 62rem too; above the content (z 25, under the tab bar's 30); the screen's ONE main action only (a note
   above the button overlapped it at 320px x 200% text, kit check 11-10). kit.js adds .rs-unpin when bar + tab bar
   would cover over 45% of a short screen. */
.rs-pinned-bar { z-index: 25; }
.rs-pinned-bar > :is(.btn, .rs-cluster) { flex: none; }
.rs-pinned-bar.rs-unpin { position: static; max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none; }
@media (min-width: 62rem) {
  .rs-pinned-bar { position: static; max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none; }
}

/* 4. HERO VARIANTS - the media IS the hero (PROTOTYPE.md s5, Rob 11-10 5:13-5:25 PM). Defaults from the brand;
   a demo sets --hv-deep / --hv-tint in app.css. app.js: heroBlock(copy, {src, poster, w, h, label, v}) + wireHero(el). */
:root{--hv-deep:color-mix(in srgb,var(--brand) 45%,#000);--hv-tint:var(--brand)}

/* HERO VARIANTS (Rob 11-10 5:13-5:25 PM: "I hate it" - the boxed video card dropped between the chips and "Live now";
   he wants to SEE the options). ?hero=a|b|c on the live demo; no parameter = A (Rob 11-10 ~5:50 PM: "much, much better... honestly beautiful"; SUPERSEDED "the plain hero until he picks").
   Every photo/video has a JOB: the hero background (A, C) or the hero's own frame (B). Hold the space: fixed heights,
   the poster shows at once, nothing moves when the video starts. The pause control is a small corner icon. */
section.hero.hv{position:relative;isolation:isolate}
.hv video{display:block;width:100%;height:100%;object-fit:cover}
.hv-media{background:var(--hv-deep)}
.hv-ctl{position:absolute;right:.75rem;bottom:.75rem;z-index:3;inline-size:2rem;block-size:2rem;min-inline-size:0;min-block-size:0;padding:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(0,0,0,.32);color:#fff;cursor:pointer;opacity:.8}
.hv-ctl:hover{opacity:1;background:rgba(0,0,0,.5)}
.hv-ctl:focus-visible{outline:2px solid #fff;outline-offset:2px;opacity:1}
.hv-ctl svg{fill:currentColor}
.hv-ctl .i-play{display:none}
.hv-ctl[aria-pressed="true"] .i-play{display:inline}
.hv-ctl[aria-pressed="true"] .i-pause{display:none}

/* A and C: the video IS the hero, full bleed, behind the headline and search. The section's own deep background sits
   under the video (isolated stack): it is what shows before the poster paints, and what contrast checks measure. */
section.hero.hv-a,section.hero.hv-c{background-color:var(--hv-deep);border-image:none;padding:0;min-height:clamp(28rem,60svh,34rem);display:flex;align-items:flex-end;color:#fff}
.hv-a .hv-media,.hv-c .hv-media{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;overflow:hidden}
.hv-a .hv-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,22,36,.3) 0%,rgba(2,22,36,.66) 34%,rgba(2,22,36,.86) 100%)}
.hv-a .hv-copy,.hv-c .hv-copy{position:relative;width:100%;padding:2.25rem 0 3.25rem}
.hv-a h1,.hv-c h1,.hv-a .eyebrow,.hv-c .eyebrow{color:#fff}
.hv-a h1,.hv-c h1{text-shadow:0 1px 14px rgba(0,0,0,.3)}
.hv-a .muted,.hv-c .muted,.hv-a .hero-sub,.hv-c .hero-sub,.hv-a p,.hv-c p{color:rgba(255,255,255,.94)}
.hv-a .ask,.hv-c .ask{border-color:transparent;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.hv-a .chip,.hv-c .chip{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.42);backdrop-filter:blur(6px)}
.hv-a .chip:hover,.hv-c .chip:hover{background:rgba(255,255,255,.26)}
.hv-a .ai-tag,.hv-c .ai-tag{color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.35)}
.hv-a .answer,.hv-c .answer{color:var(--ink,inherit)}
/* C: a duotone in their brand colour, low contrast, a moving texture rather than a picture */
.hv-c video{filter:grayscale(1) contrast(.8) brightness(1.15)}
.hv-c .hv-media::before{content:"";position:absolute;inset:0;z-index:1;background:var(--hv-tint);mix-blend-mode:color}
.hv-c .hv-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,var(--hv-deep) 62%,transparent),color-mix(in srgb,var(--hv-deep) 86%,transparent))}
@media (min-width:48rem){
 section.hero.hv-a,section.hero.hv-c{align-items:center;min-height:clamp(26rem,56vh,34rem)}
 .hv-a .hv-media::after{background:linear-gradient(90deg,rgba(2,22,36,.86) 0%,rgba(2,22,36,.7) 42%,rgba(2,22,36,.22) 76%,rgba(2,22,36,.06) 100%)}
 .hv-c .hv-media::after{background:linear-gradient(90deg,color-mix(in srgb,var(--hv-deep) 90%,transparent) 0%,color-mix(in srgb,var(--hv-deep) 74%,transparent) 50%,color-mix(in srgb,var(--hv-deep) 55%,transparent) 100%)}
 .hv-a .hv-copy,.hv-c .hv-copy{max-width:36rem;padding:3rem 0}
}
/* B: a short media band on top (phone), the headline and search below on the light page; desktop: split, video framed */
section.hero.hv-b{padding-top:0}
.hv-b .hv-media{position:relative;margin:0 calc(50% - 50vw);width:100vw;height:clamp(11rem,35svh,17rem);overflow:hidden;background:var(--brand-soft)}
.hv-b .hv-copy{padding-top:1.25rem}
@media (min-width:48rem){
 section.hero.hv-b{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2rem;align-items:center;padding-top:2rem}
 .hv-b .hv-media{order:2;margin:0;width:auto;height:auto;aspect-ratio:4/3;border-radius:1rem;box-shadow:0 12px 32px rgba(1,30,50,.18)}
 .hv-b .hv-copy{order:1;padding-top:0}
}
@media (prefers-reduced-motion:reduce){.hv video{animation:none}}

/* 5. PHOTO CARDS - a photo ATTACHED TO CONTENT (PROTOTYPE.md s5 JOB rule, Rob 11-10 5:20 PM: "I didn't have an issue
   with the pictures because they came with links"). The whole card is the link; the photo sits in a fixed 3:2 box
   (hold the space). Use: <div class="photo-row"><a class="photo-card" href=".."><span class="media"><img ... width height
   loading="lazy"></span><span class="photo-cap"><b>Title</b><small>line</small></span></a>...</div> */
.photo-row { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.photo-card { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--brand-text, inherit); }
.photo-card .media { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--brand-soft, var(--bg)); }
.photo-card .media > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.photo-card .photo-cap { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); }
.photo-card .photo-cap small { color: var(--muted); font-weight: 400; }
.photo-card:hover b, .photo-card:focus-visible b { text-decoration: underline; }