/* Hallmark · component: pip-catalog (Console) · genre: playful · theme: Hum · states: default hover focus active current disabled(aria) open(details) hidden · contrast: pass */
/* catalog.css — the homepage ("/") layer: docs/GAMES_DISPLAY.md v2 "Console"
 * addendum (supersedes the v1 Midway presentation; the plumbing is v1's).
 * Linked by index.html AFTER site.css, ad-wells.css and tiles.css; loaded on
 * no other page.
 *
 * The console dashboard in a phone: a deep charcoal ground with a soft radial
 * glow in the featured game's hue, two spotlight heroes, then horizontal
 * snap-scrolling rows of square covers over a bottom pill bar. tiles.css is
 * the one home for the tile drawing; this file paints the ground, lays the
 * blocks out, pins the dock, and re-points the tile's --pip-* aliases at the
 * console tokens so the same tile reads on the dark ground. Every selector is
 * .pip-* (plus body.pip-home, .btn, and the three site.css blocks the ship
 * gate allows under body.pip-home: .nav-slab, .guide-index, .foot-index).
 * Tokens only — every color is a var(--token) from tokens.css. No @import.
 *
 * Cascade notes:
 * - / is the only page where the nav slab is static; the dock is the one
 *   sticky element on a phone.
 * - main is a flex column so the dock (DOM-after-spotlight, a navigation
 *   landmark that precedes content in tab order) is laid out LAST on a phone
 *   via `order`, which is what makes `position:sticky; bottom:0` ride the
 *   viewport bottom until main ends (the bottom ads sit after </main>).
 * - Flex trap: an item with auto inline margins shrink-wraps, so every direct
 *   child of main gets width:100%.
 * - Rows contain no ad wells; the only display:none rules here are on rows,
 *   the spotlight list and the recent shelf (search) — never on a well or a
 *   well's ancestor. Two tokens (--color-rule, --color-dim) are re-pointed
 *   under body.pip-home so ad-wells.css's own hairlines and empty caption read
 *   on the dark ground; its rules are untouched.
 */

/* ---------- 0. Ground ---------- */
body.pip-home{color-scheme:dark;background-color:var(--color-console);background-image:radial-gradient(ellipse 120% 44% at 50% -10%,var(--color-console-glow),transparent 70%);background-repeat:no-repeat;background-attachment:scroll;color:var(--color-console-text);--color-rule:var(--color-console-3);--color-dim:var(--color-console-muted)}
body.pip-home p{color:var(--color-console-muted)}
body.pip-home h1,body.pip-home h2{color:var(--color-console-text)}
body.pip-home .nav-slab{position:static;background:var(--color-console-2);border-bottom:1px solid var(--color-console-3);color:var(--color-console-text)}
body.pip-home .nav-slab a:not(.btn){color:var(--color-console-text)}
body.pip-home .nav-slab a:not(.btn):hover{color:var(--color-accent)}
body.pip-home .nav-slab a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--color-accent)}
body.pip-home .btn--soft{--btn-face:var(--color-console-2);--btn-ink:var(--color-console-text);--btn-edge:var(--color-console-3)}
body.pip-home .btn:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}
body.pip-home main{display:flex;flex-direction:column;min-width:0}
body.pip-home main>*{width:100%;min-width:0}
/* The tile family on the console: the same --pip-* names tiles.css defines
 * for the light hosts, pointed at the console tokens. */
body.pip-home :is(.pip-tile,.pip-shelf,.pip-rail,.pip-spotlight){--pip-ink:var(--color-console-text);--pip-muted:var(--color-console-muted);--pip-well:var(--color-console-2);--pip-paper-2:var(--color-console-2)}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- 1. Mast + search ---------- */
.pip-marquee{max-width:var(--page-max);margin:0 auto;padding:var(--space-md) var(--page-gutter) var(--space-lg)}
.pip-marquee__mast{display:grid;gap:var(--space-sm);justify-items:start;margin:0 0 var(--space-lg)}
.pip-marquee__mast>*{margin:0}
/* The mono kicker is the console's one signal line: butter on charcoal. */
.pip-marquee__mast>p:first-child{color:var(--color-accent);opacity:1}
.pip-marquee__mast h1{font:800 var(--text-2xl)/1.1 var(--font-display);letter-spacing:-.025em;max-width:22ch;margin:0;color:var(--color-console-text)}
.pip-marquee__cta{display:flex;flex-wrap:wrap;gap:8px;margin:var(--space-2xs) 0 0}
.pip-marquee__cta a{min-height:44px}

/* Search (§D4): static and visible; no-JS submit jumps to #every-game. */
.pip-search{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:32rem;margin:var(--space-2xs) 0 0}
.pip-search input{flex:1 1 12rem;min-width:0;height:44px;margin:0;padding:0 14px;font:500 var(--text-md)/1 var(--font-body);color:var(--color-console-text);background:var(--color-console-2);border:2px solid var(--color-console-3);border-radius:var(--radius-input);-webkit-appearance:none;appearance:none;transition:border-color var(--dur-micro) var(--ease-out)}
.pip-search input::placeholder{color:var(--color-console-muted);opacity:1}
.pip-search input::-webkit-search-decoration,.pip-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.pip-search input:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-color:var(--color-console-3)}
.pip-search button{flex:0 0 auto;min-height:44px;padding-top:0;padding-bottom:0}
.pip-search__out{display:block;flex:1 0 100%;min-height:1.4em;margin:0;font:500 11px/1.4 var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:var(--color-console-muted)}

/* ---------- 2. Spotlight — two heroes ---------- */
/* The wrapper carries --pip-hero (the first hero's accent, set by the build)
 * and paints the ground glow in that hue behind the mast and the heroes; a
 * z-index:-1 pseudo sits behind every block but above the body ground. Zero
 * horizontal bleed (inset 0 sideways) so the page never scrolls sideways. */
.pip-spotlight{position:relative}
.pip-spotlight::before{content:"";position:absolute;z-index:-1;inset:-140px 0 -48px;background:radial-gradient(ellipse 70% 62% at 50% 46%,color-mix(in oklch, color-mix(in oklch, var(--pip-hero, var(--color-console-glow)) 55%, var(--color-console-glow)) 46%, transparent),transparent 72%);pointer-events:none}
/* ≤767: a snap rail — the first hero fills the width minus a 40px peek of the
 * second; ≥768: side by side. */
.pip-spotlight__list{list-style:none;margin:0 calc(-1*var(--page-gutter));padding:4px var(--page-gutter) 8px;display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% - 40px);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--page-gutter);contain:inline-size;scrollbar-width:none}
.pip-spotlight__list::-webkit-scrollbar{display:none}
.pip-spotlight__list>.pip-tile{scroll-snap-align:start}
.pip-spotlight__list[hidden]{display:none}

/* ---------- 3. Dock (§D2) — the console pill bar under your thumb ---------- */
.pip-dock{order:99;position:sticky;bottom:0;z-index:var(--z-bar);margin:0;background:var(--color-console-2);border-top:1px solid var(--color-console-3);padding-bottom:env(safe-area-inset-bottom)}
/* scroll-padding = the gutter, or snap-align:start parks the first item flush
 * against the viewport edge on first layout. */
.pip-dock__list{list-style:none;margin:0;display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--page-gutter);padding:0 var(--page-gutter);padding-right:calc(var(--page-gutter) + 24px);scrollbar-width:none}
.pip-dock__list::-webkit-scrollbar{display:none}
.pip-dock__list>li{flex:0 0 auto;margin:0;padding:0}
.pip-dock__chip{position:relative;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;min-height:48px;padding:0 10px;border:0;border-radius:0;background:transparent;font:600 var(--text-sm)/1 var(--font-body);color:var(--color-console-muted);text-decoration:none;white-space:nowrap;scroll-snap-align:start;transition:color var(--dur-micro) var(--ease-out)}
/* The thin accent underline: 3px butter under the current item only. */
.pip-dock__chip::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--color-accent);transform:scaleX(0);transform-origin:50% 100%;transition:transform var(--dur-short) var(--ease-out)}
.pip-dock__n{font:500 11px/1 var(--font-label);color:inherit;opacity:.7}
@media (hover:hover){
  .pip-dock__chip:hover{color:var(--color-console-text)}
}
.pip-dock__chip:focus-visible{outline:3px solid var(--color-accent);outline-offset:-3px;border-radius:8px}
.pip-dock__chip:active{color:var(--color-console-text);transition-duration:70ms}
/* Current row: bright text + the underline — a shape, never color alone. */
.pip-dock__chip[aria-current="true"]{color:var(--color-console-text)}
.pip-dock__chip[aria-current="true"]::after{transform:scaleX(1)}
.pip-dock__chip[aria-current="true"] .pip-dock__n{opacity:1}
/* Row hidden by a search: item dims (catalog.js also sets tabindex=-1). */
.pip-dock__chip[aria-disabled="true"]{opacity:.4}

/* ---------- 4. Rows (the console "game rows") ---------- */
.pip-booth{max-width:var(--page-max);margin:0 auto var(--space-md);padding:0 var(--page-gutter);scroll-margin-top:12px;scroll-margin-bottom:64px}
.pip-booth[hidden]{display:none}
.pip-booth__head{display:flex;align-items:baseline;gap:10px;margin:0;min-width:0}
.pip-booth__head h2{font:700 var(--text-lg)/1.15 var(--font-display);letter-spacing:-.02em;margin:0;min-width:0;color:var(--color-console-text)}
.pip-booth__count{flex:0 0 auto;font:500 11px/1 var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:var(--color-console-muted);white-space:nowrap}
/* "See all": a plain anchor to the A–Z index (catalog.js opens the details). */
.pip-booth__all{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font:600 var(--text-sm)/1 var(--font-body);color:var(--color-console-muted);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
@media (hover:hover){
  .pip-booth__all:hover{color:var(--color-console-text);border-bottom-color:var(--color-accent)}
}
.pip-booth__all:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:4px;color:var(--color-console-text)}
.pip-booth__body{min-width:0;scroll-margin-top:96px}

/* ---------- 5. Recent shelf (§D5) ---------- */
/* tiles.css owns the shelf look; on / it lines up with the rows. */
.pip-shelf--recent{max-width:var(--page-max);margin:0 auto var(--space-md);padding:0 var(--page-gutter);scroll-margin-top:12px}
.pip-shelf--recent .pip-shelf__head{align-items:center}

/* ---------- 6. A–Z index (§D7) — native details, no JS required ---------- */
.pip-index{max-width:var(--page-max);margin:0 auto;padding:var(--space-sm) var(--page-gutter) var(--space-lg)}
.pip-index__sum{min-height:44px;display:flex;align-items:center;gap:8px;margin:0;font:700 var(--text-lg)/1.15 var(--font-display);letter-spacing:-.02em;color:var(--color-console-text);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.pip-index__sum span{color:var(--color-console-muted);opacity:1}
.pip-index__sum::-webkit-details-marker{display:none}
.pip-index__sum::after{content:"";flex:0 0 auto;width:10px;height:10px;margin:0 6px 4px auto;border:solid var(--color-console-text);border-width:0 3px 3px 0;transform:rotate(45deg);transition:transform var(--dur-micro) var(--ease-out)}
.pip-index[open] .pip-index__sum::after{transform:rotate(225deg);margin-bottom:-4px}
.pip-index__sum:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:4px}
.pip-index__list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* Row = title link + category label (a sibling span in the build output; an
 * inner span is tolerated). Flex lets the link ellipsize while the label
 * stays on the line. */
.pip-index__list li{display:flex;align-items:center;gap:6px;min-width:0;min-height:44px;margin:0;padding:0}
.pip-index__list a{display:inline-block;flex:0 1 auto;box-sizing:border-box;min-height:44px;line-height:44px;max-width:100%;font-weight:500;font-size:var(--text-sm);color:var(--color-console-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--color-console-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.pip-index__list a:hover{text-decoration-color:var(--color-accent)}
.pip-index__list a:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:4px}
.pip-index__list a>span{display:inline-block;margin-left:6px;text-decoration:none}
.pip-index__list li>span{flex:0 0 auto;line-height:44px;white-space:nowrap;color:var(--color-console-muted);opacity:1}

/* ---------- 7. Guides band, house rules, footer on the console (/ only) ---------- */
/* .pip-band is a hand-added class on the two existing site.css band sections;
 * the guide list and the footer columns are the site.css blocks shared with
 * the 208 guide pages, reached only through body.pip-home. */
.pip-band{background:var(--color-console-2);border-top:1px solid var(--color-console-3);color:var(--color-console-text)}
.pip-band--rules{background:transparent}
.pip-band a{color:var(--color-console-text)}
body.pip-home .guide-index{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xs) var(--space-md)}
body.pip-home .guide-index a{display:inline-block;min-height:44px;padding:10px 0;line-height:1.3;text-decoration-color:var(--color-console-3)}
body.pip-home .guide-index a:hover{text-decoration-color:var(--color-accent)}
body.pip-home .foot-index{color:var(--color-console-text);border-top:1px solid var(--color-console-3)}
body.pip-home .foot-index a:hover{color:var(--color-accent)}
.pip-colophon{color:var(--color-console-muted)}

/* ---------- 8. Breakpoints ---------- */
@media (max-width:767px){
  /* Room for the sticky dock (49px + the phone's home bar). */
  body.pip-home{padding-bottom:calc(49px + env(safe-area-inset-bottom))}
  body.pip-home .guide-index p{display:none}
}
@media (min-width:768px){
  .pip-marquee{padding-top:var(--space-lg)}
  .pip-spotlight__list{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;overflow:visible;margin:0;padding:0}
  .pip-spotlight::before{inset:-200px 0 -64px}
  /* Dock becomes a static, wrapping pill bar under the spotlight; the rule
   * under the items sits on the list so it spans the content width. */
  .pip-dock{position:static;order:0;max-width:var(--page-max);margin:0 auto var(--space-md);padding:0 var(--page-gutter);background:transparent;border-top:0}
  .pip-dock__list{flex-wrap:wrap;overflow:visible;scroll-snap-type:none;scroll-padding-inline:0;padding:0;border-bottom:1px solid var(--color-console-3)}
  .pip-booth{margin-bottom:var(--space-lg)}
  .pip-index__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.pip-home .guide-index{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm) var(--space-lg)}
}
@media (min-width:1024px){
  .pip-index__list{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.pip-home .guide-index{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:40rem){
  body.pip-home .foot-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}
}

/* ---------- 9. Motion (§F) ---------- */
/* The only orchestrated entrance on the site: the recent shelf, once, when it
 * is un-hidden. Nothing in search animates; rows do not animate. */
@keyframes pip-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pip-shelf--recent:not([hidden]){animation:pip-rise var(--dur-long) var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pip-dock__chip,.pip-dock__chip::after,.pip-booth__all,.pip-index__sum::after,.pip-search input{transition:none}
  .pip-shelf--recent:not([hidden]),.pip-shelf--recent,.pip-booth,.pip-booth__body,.pip-dock,.pip-marquee,.pip-spotlight,.pip-index{animation:none}
}