/* Search (Figma section 1484:61440). Navbar field, panel (desktop) / sheet (mobile). Results page styles: css/search-page.css. */

/* ---------- Navbar Search (navbar component 143:1456): Button Ghost Small + search icon, opens the panel ---------- */
.nav__search{flex:none;align-self:center}
/* Phone: icon-only 44×44 button (tablet keeps the label, Figma Navbar Breakpoint=Tablet) */
@media (max-width:599px){
  .nav__search.btn{width:44px;height:44px;padding:0}
  .nav__search .btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* field + clear × used by the mobile query field on search.html */
.nav__search-icon{width:16px;height:16px;flex:none;fill:none;stroke:var(--text-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav__search-clear{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:var(--radius-full);background:none;color:var(--text-secondary);cursor:pointer}
.nav__search-clear[hidden]{display:none}
.nav__search-clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nav__search-clear:hover{color:var(--text-primary);background:var(--button-nav-secondary-bg-hover)}

/* ---------- Panel (Figma 1485:48453): 760 wide, top 28, radius 16, over neutral/900 70% + blur ---------- */
html.sp-lock{overflow:hidden}
html.sp-lock body{position:fixed;left:0;right:0;overflow-y:scroll}
.sp{position:fixed;inset:0;z-index:300}
.sp[hidden]{display:none}
.sp__overlay{position:absolute;inset:0;background:color-mix(in srgb,var(--neutral-900) 70%,transparent);-webkit-backdrop-filter:blur(var(--blur-overlay));backdrop-filter:blur(var(--blur-overlay));opacity:0;transition:opacity .16s ease}
.sp__panel{position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:min(760px,calc(100% - 32px));max-height:calc(100dvh - 56px);margin:var(--space-28) auto 0;
  background:var(--surface-default);border-radius:16px;box-shadow:0 12px 40px -4px rgba(0,0,0,.18);overflow:hidden;
  opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease}
.sp.is-open .sp__overlay,.sp.is-open .sp__panel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sp__overlay,.sp__panel{transition:none}}

.sp__field{flex:none;display:flex;align-items:center;gap:14px;height:72px;padding:0 var(--space-24);border-bottom:1px solid var(--border-subtle);box-sizing:border-box}
.sp__icon{width:22px;height:22px;flex:none;fill:none;stroke:var(--text-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp__input{flex:1;min-width:0;height:44px;border:0;background:none;padding:0;font:var(--text-lg);color:var(--text-primary);caret-color:var(--accent-hover)}
.sp__input:focus{outline:none;box-shadow:none}
.sp__input::placeholder{color:var(--text-secondary)}
.sp__clear{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--radius-full);background:none;color:var(--text-secondary);cursor:pointer}
.sp__clear[hidden]{display:none}
.sp__clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sp__clear:hover{background:var(--button-nav-secondary-bg-hover);color:var(--text-primary)}
.sp__key,.sp-key{box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 var(--space-6);border-radius:6px;
  background:var(--surface-background);border:1px solid var(--border-subtle);font:var(--text-xs);color:var(--text-secondary)}
.sp__cancel.btn{display:none}

/* scope tabs (typing, Figma 1848:66644): Tab item · Underline, 32 apart, 24 side padding */
.sp__scopes{flex:none}
.sp__scopes[hidden]{display:none}
.sp-tabs{padding:0 var(--space-24)}

/* body: Empty 24 padding / 28 between blocks (1485:48462); Typing 16/24, 24 between groups (1487:49292) */
.sp__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-28)}
.sp[data-state=typing] .sp__body{padding:var(--space-16) var(--space-24) var(--space-24);gap:var(--space-24)}
.sp-msg{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.sp-group{display:flex;flex-direction:column;gap:var(--space-12);min-width:0}
.sp-items{display:flex;flex-direction:column;gap:var(--space-12);min-width:0}
.sp-group--games,.sp-group--fresh,.sp-group--games .sp-items,.sp-group--fresh .sp-items{gap:var(--space-8)}
.sp-group--chips .sp-items{display:block}
/* label rows: 12/16 tracked label + "See all" Button Secondary XS (desktop) */
.sp-label{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);min-height:16px;margin:0}
.sp-label__t{font:var(--text-xs);color:var(--text-secondary)}   /* desktop panel: sentence case ("Recent", "Games today", Figma 1485:48357); tablet / phone use the 11/14 caps App / List Header */
.sp[data-state=typing] .sp-label{padding:0 var(--space-8) var(--space-4)}
.sp[data-state=typing] .sp-group--top .sp-label{padding-bottom:0}
.sp-label--center{justify-content:center}
.sp-see{flex:none}
.sp-link{font:var(--text-xs);letter-spacing:0;text-transform:none;color:var(--text-link);text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;cursor:pointer}
.sp-link:hover{color:var(--text-primary)}
.sp-none{margin:0;padding:var(--space-10);font:var(--text-sm);color:var(--text-secondary)}
.sp-copy--sm{display:none}

/* Filter Chips (recent / trending / did you mean) */
.sp-chips--center{justify-content:center}
.sp-chip.is-active{box-shadow:var(--shadow-focus-ring-accent)}

/* two columns (empty state): 32 apart */
.sp-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-32)}

/* highlighted item (keyboard / pointer) */
.sp-item.is-active{box-shadow:var(--shadow-focus-ring-accent)}
.sp-item.topic-card.is-active{background:var(--card-bg-hover)}
.sp-item.story-card.is-active{filter:drop-shadow(0 8px 10px rgba(0,0,0,.08))}
.sp-item :is(.story-card__link,.topic-card__cover,.video-card__link,.sp-game__link):focus-visible{outline:none}
.sp-video{width:280px;height:auto}
.sp-video .video-card__title{-webkit-line-clamp:2}
.sp-item.video-card.is-active{box-shadow:none}
.sp-item.video-card.is-active .video-card__thumb{box-shadow:var(--shadow-focus-ring-accent)}

/* Event Card · Row (Figma 1824:78602): 10 padding, radius 8, time 52 | divider | title + league */
.sp-game{display:flex;align-items:center;gap:var(--space-4);border-radius:8px}
.sp-game__link{flex:1;min-width:0}
.sp-game__menu{flex:none;margin-right:var(--space-6)}
.sp-game__link{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-10);border-radius:inherit;color:inherit;text-decoration:none;outline:none}
.sp-game.is-active,.sp-game:hover{background:var(--surface-selected);box-shadow:none}
.sp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.sp-game__t{font:var(--text-card-title-sm);text-transform:uppercase;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-item b{font-weight:700}
.sp-m{font:var(--text-xs);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-time{flex:none;width:52px;text-align:center;font:var(--text-xs-semibold);color:var(--text-primary)}
.sp-time--live{color:var(--feedback-error);letter-spacing:.5px}
.sp-div{flex:none;width:1px;height:32px;background:var(--border-default)}
.sp-enter{flex:none;display:none;color:var(--text-secondary)}
.sp-enter svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-game.is-active .sp-enter{display:flex}
.video-card__play svg{display:block}

/* Follow inside the Topic card: Button Small, text only (Follow = white, Following = accent) */
.sp-follow.is-pop{animation:sp-pop .25s ease}
@keyframes sp-pop{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.sp-follow.is-pop{animation:none}}

/* pinned "See all N results" (Figma 1487:49385) */
.sp__seeall{flex:none;border-top:1px solid var(--border-subtle)}
.sp__seeall[hidden]{display:none}
.sp-seeall{display:flex;align-items:center;gap:var(--space-10);padding:14px var(--space-24);background:var(--surface-background);color:var(--text-primary);text-decoration:none}
.sp-seeall.is-active,.sp-seeall:hover{background:var(--surface-selected)}
.sp-seeall svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-seeall__i,.sp-seeall__a{display:flex}
.sp-seeall__t{flex:1;min-width:0;font:600 14px/20px var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* footer hints (Figma 1485:48562) */
.sp__foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);padding:var(--space-12) var(--space-24);background:var(--surface-background);border-top:1px solid var(--border-subtle);font:var(--text-xs);color:var(--text-secondary)}
.sp__foot[hidden]{display:none}
.sp__hints{display:flex;gap:var(--space-16)}
.sp__hint{display:flex;align-items:center;gap:var(--space-6)}

/* no results (Figma 1488:49636): Empty State + "Did you mean" + trending */
.sp-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-28);padding:0;text-align:center}
.sp-empty__state.empty-state{padding:0;gap:var(--space-12)}
.sp-dym{display:flex;align-items:center;justify-content:center;gap:var(--space-10);margin:0;font:var(--text-sm);color:var(--text-secondary)}
.sp-dym__btn.filter-chip{min-height:32px;gap:var(--space-6);padding:0 var(--space-12);background:var(--button-primary-bg);color:var(--button-primary-text);font-weight:600}
.sp-dym__enter{display:flex}
.sp-dym__enter svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-dym__btn:hover,.sp-dym__btn.is-active{background:var(--button-primary-bg-hover);color:var(--button-primary-text)}
.sp-empty__trend{display:flex;flex-direction:column;align-items:center;gap:var(--space-12);width:100%}

/* ---------- Tablet and phone: full-screen sheet (tablet 1819:17695 / 17987 / 18177 under the 120 navbar; phone 1542:43640 /
   43777 / 43891 over the whole page). Field row 56: search icon 22, 15/22 input, Cancel (Button Ghost Small); App / List Headers
   (11/14 label + text link); one column; pinned "See all N results" bar above the keyboard. ---------- */
@media (max-width:1023px){
  .sp{--sp-gutter:32px}
  .sp__overlay{display:none}
  .sp__panel{position:fixed;left:0;right:0;top:calc(var(--sp-top,0px) + var(--sp-nav,120px));width:100%;height:calc(var(--sp-vh,100dvh) - var(--sp-nav,120px));max-height:none;margin:0;
    border-radius:0;box-shadow:none;transform:none;background:var(--surface-background)}
  .sp__field{position:relative;height:57px;padding:0 var(--sp-gutter);gap:var(--space-10)}
  .sp__icon{width:22px;height:22px}
  .sp__input{height:56px;font:var(--text-mobile-lg)}
  .sp__esc{display:none}
  .sp__cancel.btn{display:inline-flex;margin-right:calc(-1 * var(--space-16))}
  .sp__foot{display:none}
  .sp-tabs{padding:0 var(--sp-gutter)}
  .sp__body,.sp[data-state=typing] .sp__body{padding:var(--space-24) var(--sp-gutter);gap:var(--space-32)}
  .sp-label,.sp[data-state=typing] .sp-label{padding:0;gap:var(--space-6)}
  .sp-label__t{font:var(--text-mobile-label);letter-spacing:.44px;text-transform:uppercase}
  .sp-group,.sp-items{gap:var(--space-16)}
  .sp-group--chips{gap:var(--space-12)}
  .sp-group--games .sp-items{gap:var(--space-4)}
  .sp-see.btn{height:auto;padding:0;border:0;background:none;box-shadow:none;font:var(--text-xs);color:var(--text-link)}
  .sp-see.btn:hover{background:none;color:var(--text-primary)}
  .sp-link{text-decoration:none}
  .sp-cols{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
  .sp-game:hover{background:none}
  .sp-item.is-active{box-shadow:none}
  .sp-item.story-card.is-active,.sp-item.topic-card.is-active{filter:none;background:var(--card-bg-default)}
  .sp-game.is-active{background:none}
  .sp-game.is-active .sp-enter{display:none}
  .sp-group--videos .sp-items{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--sp-gutter));padding-right:var(--sp-gutter)}
  .sp-seeall{padding:14px var(--sp-gutter);background:var(--surface-default)}
  .sp-seeall__t{font:var(--text-sm)}
  .sp-seeall .sp-key{display:none}
  .sp__seeall{border-top:1px solid var(--border-subtle);box-shadow:0 -4px 12px rgba(0,0,0,.04)}
  .sp-empty{align-items:stretch;gap:var(--space-24);text-align:center}
  .sp-empty__state.empty-state{max-width:none;gap:var(--space-12)}
  .sp-empty .empty-state__title{font:var(--text-mobile-3xl);font-size:24px;line-height:28px}
  .sp-empty .empty-state__body{font:var(--text-sm)}
  .sp-copy--lg{display:none}.sp-copy--sm{display:inline}
  .sp-dym__btn.filter-chip{min-height:36px;padding:var(--space-8) var(--space-16);background:var(--accent-default);color:var(--text-primary);font-weight:400}
  .sp-dym__btn:hover,.sp-dym__btn.is-active{background:var(--accent-default);color:var(--text-primary)}
  .sp-dym__enter{display:none}
  .sp-empty__trend{align-items:flex-start;text-align:left}
  .sp-empty__trend .sp-label--center{justify-content:flex-start}
  .sp-chips--center{justify-content:flex-start}
}
@media (max-width:599px){
  .sp{--sp-gutter:16px;--sp-nav:0px}
  .sp__field{height:61px}
}
/* the card ⋮ menu opens above the panel */
html.sp-lock .card-menu{z-index:320}

/* Design system specimens (components.html) */
.sp--demo{position:relative;inset:auto;z-index:auto;margin:var(--space-8) 0 var(--space-24)}
.sp--demo .sp__panel{opacity:1;transform:none;margin:0;max-height:none;width:100%;max-width:760px;box-shadow:0 0 0 1px var(--border-subtle),0 12px 40px -4px rgba(0,0,0,.12)}
.sp--demo .sp__body{overflow:visible}
@media (max-width:1023px){.sp--demo .sp__panel{position:relative;height:auto;top:auto}}
/* Phones: the Search screen (Figma Search / App 1542:43640 Empty, 1542:43777 Typing, 1542:43891 No results). The sheet is the page:
   full height, no web navbar above it; the App / Tab Bar (Search active) sits on top in the Empty state and hides while typing / no
   results (the keyboard frames show none). The body leaves room for the tab bar. */
@media (max-width:599px){
  /* Above the fixed navbar (z-index 60) so the wordmark does not cover the search field. */
  .sp--screen{z-index:70}
  .sp--screen .sp__panel{top:0;height:var(--sp-vh,100dvh);transition:none;opacity:1}
  .sp--screen[data-state=empty] .sp__body{padding-bottom:calc(116px + var(--space-24) + env(safe-area-inset-bottom,0px))}
  body:has(.sp--screen:not([hidden]):not([data-state=empty])) .app-tab-bar--fixed{display:none}
}
/* Tablet: while the sheet is open the navbar band above it is solid (Figma 1819:17695: navbar on surface/background), so the page does not show through */
@media (min-width:600px) and (max-width:1023px){
  html.sp-lock .nav{background:var(--surface-background)}
}