/* THE APP SHELL (the only place besides .rs-pinned-bar that pins anything). Pulled from the Wave demo's shell:
   demo banner, top bar, top nav from 62rem, bottom tab bar under 62rem, footer, toast.
   Room math (Tourney IN-0126 lesson): on a phone the top bar is NOT sticky, so pinned things are only the tab bar
   (+ at most one .rs-pinned-bar); kit.js measures both into --tab-h / --dock-h and the body leaves that room. */
.skip { position: absolute; left: -999rem; top: 0; background: var(--ink); color: var(--bg); padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: .5rem; top: .5rem; }

.demo-bar { background: var(--ink); color: var(--bg); font-size: .875rem; padding: .4rem 1rem; text-align: center; }
.demo-bar a { color: inherit; font-weight: 700; }

.top { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: inset 0 -.2rem 0 var(--brand); z-index: 20; }
.top-in { box-sizing: content-box; max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1rem; }
.brand { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; text-decoration: none; color: var(--ink); min-width: 0; flex: 1 1 12rem; }
.mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .7rem; background: var(--brand); color: var(--brand-ink); flex: none; }
.mark svg { width: 1.25rem; height: 1.25rem; }
.brand-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 8rem; }
/* THE BUYER'S LOGO SLOT (Rob 11-10 ~3:05 PM ET: "have their logo on it ... this is mine already"; SUPERSEDED "never
   their logo"). Their own file, unaltered (protokit.py theme --logo), top-left as on their site, with clear space and a
   hairline after it. When the row is too narrow (320 px, 200% text) the name and "Prepared for" line wrap BELOW the
   logo instead of squeezing to one word per line. (Light mode only, Rob 11-10: SUPERSEDED the dark-mode logo chip.)
   protokit check: a page with a logo must keep the banner, the Prepared-for line and noindex. */
.logo-wrap { display: flex; align-items: center; flex: none; padding-inline-end: .75rem; border-inline-end: 1px solid var(--line); }
.logo { display: block; block-size: 2.6rem; inline-size: auto; max-inline-size: 11rem; }
@media (max-width: 40rem) { .logo { block-size: 2.2rem; } }
.brand-t b { font-size: 1rem; }
.brand-t small { font-size: .75rem; color: var(--muted); line-height: 1.25; }
.topnav { display: none; flex-wrap: wrap; gap: .25rem; }
.topnav a { padding: .5rem .7rem; border-radius: .6rem; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .95rem; min-height: 2.5rem; display: inline-flex; align-items: center; }
.topnav a[aria-current="page"] { color: var(--brand-text); background: var(--brand-soft); }
.top-tools { display: flex; align-items: center; gap: .35rem; flex: none; margin-inline-start: auto; }
.icon-btn { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; border-radius: .8rem; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; font-weight: 700; font-size: .85rem; padding: 0 .5rem; }
.icon-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

main { outline: none; padding-block: 1rem 2rem; }

/* bottom tab bar (phone + tablet). Labels hide into the accessible name when a tab is too narrow for them
   (container query: works at any width and any text size, no breakpoint per screen). */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  padding: .4rem .15rem .45rem; text-decoration: none; color: var(--muted); font-size: .75rem; font-weight: 600; min-height: 3.5rem; min-width: 0; }
.tabbar a > span { max-width: 100%; text-align: center; line-height: 1.15; }
.tabbar svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tabbar a[aria-current="page"] { color: var(--brand-text); }
.tabbar a[aria-current="page"] svg { stroke-width: 2.6; }
@container (max-width: 5.5em) { .tabbar a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
body { padding-bottom: calc(var(--tab-h, 3.5rem) + var(--dock-h, 0px)); }

@media (min-width: 62rem) {
  .top { position: sticky; top: 0; }
  .topnav { display: flex; }
  .tabbar { display: none !important; }
  body { padding-bottom: 0; }
  .brand { flex: 0 1 auto; }
}

.foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 2rem; }
.foot-in { box-sizing: content-box; max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 1.5rem; font-size: .88rem; display: flex; flex-direction: column; gap: .4rem; }

.toast { position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--tab-h, 0px) + var(--dock-h, 0px) + 1rem); margin-inline: auto; width: fit-content;
  max-width: calc(100% - 2rem); background: var(--ink); color: var(--bg); padding: .75rem 1.1rem; border-radius: .8rem; font-weight: 650; z-index: 60; box-shadow: var(--shadow); }
@media (min-width: 62rem) { .toast { bottom: 2rem; } }
/* HOLD THE SPACE (Rob 11-10 ~2:40 PM ET: "I'm seeing things load and then jump... the squares, preload all the screens,
   box spacing"; the line's standard: web2lab/HOLD-SPACE.md, Tourney DESIGN-SYSTEM.md). Nothing on screen may move once
   it is painted (end test: demogates.py SHIFT, <= 0.001 in the first second, every screen, 390 and 1280):
   - main is never shorter than the screen, so the footer is always below the fold and a screen swap moves nothing seen;
   - before kit.js renders, main shows a placeholder the shape of a screen ([data-screen-placeholder]: hero, tiles, block);
   - the banner, top bar and tab bar keep their height before their text arrives (min-block-size below);
   - fonts are the system stack only (no web font, so no swap reflow). A demo that must load one uses
     font-display: optional and a size-adjust fallback face. */
main { min-block-size: 100vh; min-block-size: 100dvh; }
.demo-bar { min-block-size: 2.125rem; }
.top-in { min-block-size: 3.5rem; }
.topnav { min-block-size: 2.5rem; }
.tabbar { min-block-size: 3.5rem; }
.ph-screen { box-sizing: content-box; max-inline-size: 72rem; margin-inline: auto; padding-inline: 1rem; display: flex; flex-direction: column; gap: 1.75rem; }
.ph { background: var(--surface2); border-radius: var(--r); }
.ph-hero { block-size: 17rem; }
.ph-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .6rem; }
.ph-tile { block-size: 6.75rem; }
.ph-block { block-size: 12rem; }

/* HEADER ROW (Rob 11-10 ~5:35 PM, the Wave phone header: a big logo with a rule, "Rider site" over a grey
   "Prepared for" line, and three ~64px bordered squares - "heavy and crowded"). ONE row at every width: the logo
   (30px tall), a small app title on the same line (dropped when the row is under 22em, e.g. 320px or 200% text; the
   logo link keeps the name), then ghost icon buttons (40px hit area, no box; a soft background on hover/press).
   "Prepared for X by SAIL" lives in the demo banner, so it is still on the first screen. Desktop: the same row, roomier.
   Icon and logo sizes are px on purpose: they are pictures, not text, so 200% text never pushes them off the row. */
.top{container-type:inline-size}
.top-in{flex-wrap:nowrap;align-items:center;gap:.5rem;padding-block:.25rem;min-block-size:3.25rem}
.brand{flex:1 1 auto;flex-wrap:nowrap;align-items:center;gap:.6rem;min-width:0}
.logo-wrap{padding-inline-end:0;border-inline-end:0;flex:none}
.logo{block-size:30px;inline-size:auto;max-inline-size:140px}
.brand-t{flex:0 1 auto;min-width:0;display:block}
.brand-t b{display:block;font-size:.95rem;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.brand-t small{display:none}
.top-tools{flex:none;flex-wrap:nowrap;gap:2px;margin-inline-start:auto}
.icon-btn{min-width:40px;min-height:40px;height:40px;padding:0 6px;border:0;border-radius:10px;background:transparent;color:inherit;box-shadow:none}
.icon-btn:hover{background:color-mix(in srgb,currentColor 8%,transparent);border-color:transparent}
.icon-btn:active{background:color-mix(in srgb,currentColor 14%,transparent)}
.icon-btn svg{width:20px;height:20px}
.icon-btn.lang,#langBtn{font-size:13px;font-weight:700;letter-spacing:.04em}
.demo-bar .prep{font-weight:700}
@container (max-width:22em){.brand-t{display:none}}
@media (min-width:62rem){.top-in{gap:1rem;padding-block:.5rem;min-block-size:4rem}.logo{block-size:36px;max-inline-size:170px}.brand-t b{font-size:1rem}.top-tools{gap:4px}}