/* Framed homepage. Classic mode retains its original layout and assets. */
.home-search-dock-space { display: none; }
.home-search-first .home-search-panel { min-width: 0; padding: 22px 24px 24px; border: 1px solid #dce4ee; border-top: 3px solid #192b43; border-radius: 16px; background: #fff; }
.home-search-first .home-search-intro { display: grid; grid-template-columns: clamp(80px, 11vw, 144px) minmax(0, 1fr) clamp(80px, 11vw, 144px); align-items: end; min-height: 168px; text-align: center; color: #0a1931; }
.home-search-first .home-intro-copy { align-self: center; padding: 16px 8px 24px; }
.home-search-first .home-mobile-menu-slot { display: none; }
.home-search-first .home-search-intro h1 { margin: 0; font: 700 clamp(28px, 2.65vw, 40px)/1.14 var(--font-sans); letter-spacing: -.9px; text-wrap: balance; }
.home-search-first .home-intro-logo { display: block; width: min(100%, 360px); height: auto; margin-inline: auto; }
.home-search-first .home-search-intro p { margin: 12px 0 0; color: #526176; font-size: 16px; line-height: 1.45; }
.home-search-first .home-intro-art { display: flex; align-items: flex-end; justify-content: center; height: 168px; overflow: hidden; pointer-events: none; }
.home-search-first .home-intro-art--left { justify-content: flex-start; transform: translateX(14px); }
.home-search-first .home-intro-art--right { justify-content: flex-end; transform: translateX(-14px); }
.home-search-first .home-intro-art img { display: block; flex: 0 0 auto; width: auto; height: auto; max-width: 100%; max-height: 100%; transform: translateX(var(--home-art-offset, 0%)); }
/* Coach sources include transparent/antialiased space below the torso. Keep the
   image box at its natural ratio so this offset scales with the artwork. */
.home-search-first .home-intro-art img[data-kind="coach"] { transform: translate(var(--home-art-offset, 0%), calc(6% + 1px)); }
.home-search-first .home-intro-art img:not([src]) { visibility: hidden; }
/* The loading blocker covers the whole framed header, including its artwork.
   Cancellation lives inside the blocker instead of lifting the header above it. */
.home-search-first.search-navigation-pending .top-bar { z-index: 12000; }
.home-search-first .search-loading-cancel { margin-top: 16px; min-height: 44px; padding: 10px 18px; border: 1px solid #dce4ee; border-radius: 10px; background: #fff; color: #192b43; font: 600 14px/1.4 var(--font-sans); cursor: pointer; }
.home-search-first .search-loading-cancel:hover { background: #edf2f7; }
.home-search-first .search-loading-cancel:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.home-search-first .home-search-magnifier { flex: 0 0 24px; color: #192b43; margin-left: 10px; }
.home-search-first .home-search-examples { width: 100%; margin: 18px auto 0; }
.home-search-first .home-examples-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin-bottom: 6px; }
.home-search-first .home-examples-heading p { margin: 0; font-size: 13px; color: #526176; }
.home-search-first .home-examples-refresh { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 6px; background: #fff; color: #526176; font: 500 12px var(--font-sans); cursor: pointer; }
.home-search-first .home-examples-refresh[hidden] { display: none; }
.home-search-first .home-examples-refresh:hover { color: #192b43; background: #edf2f7; }
.home-search-first .home-example-rows { display: grid; border: 1px solid #dce4ee; border-radius: 10px; overflow: hidden; }
.home-search-first .home-example-rows:empty { display: none; }
.home-search-first .home-example-rows > a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 13px; border: 0; border-bottom: 1px solid #e4eaf1; background: #fff; color: #192b43; font: 400 14px/1.4 var(--font-sans); text-align: left; text-decoration: none; box-sizing: border-box; }
.home-search-first .home-example-rows > a:last-child { border-bottom: 0; }
.home-search-first .home-examples-status { margin: 8px 0 0; color: #526176; font-size: 13px; }
.home-search-first .home-examples-status:empty { display: none; }
.home-search-first .home-example-rows svg { flex: 0 0 18px; color: #62738b; }
.home-search-first .home-example-rows > :is(a, button) > span:first-of-type { flex: 1; }
.home-search-first .home-example-rows > :is(a, button) > span:last-child { font-size: 24px; line-height: 1; color: #62738b; }
.home-search-first .home-example-rows > :is(a, button):hover { border-color: #a9b9cd; background: #f8fafc; }
.home-search-first :is(.home-example-rows a, .home-examples-refresh, .home-bottom-games a):focus-visible { outline: 2px solid #192b43; outline-offset: -3px; }
.home-search-first #homeSplitLayout { display: block; }
.home-search-first #homefootysphereColumn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-search-first .home-section-title { grid-column: 1 / -1; margin: 0 0 2px; padding-top: 22px; border-top: 1px solid #dce4ee; color: #192b43; font-size: 23px; line-height: 1.3; }
.home-search-first #homefootysphereColumn > .home-footysphere-card { grid-column: auto; }
.home-search-first .home-search-feeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: stretch; margin-top: 18px; }
.home-search-first .home-search-feed { grid-column: auto; min-width: 0; padding: 14px; border: 1px solid #dce4ee; border-radius: 12px; background: #fff; box-shadow: none; }
.home-search-first .home-search-feed .home-live-queries-inner { padding: 0; gap: 0; }
.home-search-first .home-search-feed .home-live-queries-header { gap: 9px; padding-bottom: 12px; margin-bottom: 4px; }
.home-search-first .home-search-feed .home-live-queries-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
.home-search-first .home-search-feed .home-live-queries-title { font-size: 16px; line-height: 1.3; }
.home-search-first .home-search-feed :is(.home-live-queries-list, .home-most-searched-list) { display: grid; gap: 0; overflow: visible; max-height: none; }
.home-search-first .home-search-feed :is(.home-live-query-link, .home-most-searched-question) { grid-template-columns: 56px minmax(0, 1fr) 8px; gap: 9px; min-height: 54px; padding: 9px 2px; border: 0; border-bottom: 1px solid #e6ebf2; border-radius: 0; }
.home-search-first .home-search-feed :is(.home-live-query-row, .home-most-searched-row):last-child > :is(a, button) { border-bottom: 0; }
.home-search-first .home-search-feed :is(.home-live-query-text, .home-most-searched-text) { font-size: 13px; font-weight: 400; line-height: 1.45; }
.home-search-first .home-search-feed :is(.home-live-query-time, .home-most-searched-count) { flex-direction: column; gap: 0; min-width: 0; padding: 0; background: transparent; font-size: 10px; white-space: normal; text-transform: none; }
.home-search-first .home-search-feed .home-most-searched-count strong { font-size: 12px; }
.home-search-first .home-most-searched-heading-row { flex-wrap: nowrap; }
.home-search-first .home-most-searched-heading-row .home-live-queries-title { min-width: 0; flex: 1; }
.home-search-first .home-search-feed .home-most-searched-pagination { flex: 0 0 auto; gap: 4px; margin: 0 0 0 auto; padding: 0; border: 0; }
.home-search-first .home-search-feed .home-most-searched-page-link { width: 28px; min-height: 30px; padding: 0; border-color: #dce4ee; border-radius: 7px; font-size: 18px; font-weight: 400; line-height: 1; }
/* Keep page announcements available to screen readers without a visible counter. */
.home-search-first .home-search-feed .home-most-searched-page-status { position: absolute; width: 1px; height: 1px; min-width: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.home-search-first .home-search-feed :is(.home-live-query-row, .home-most-searched-row):nth-child(n + 6) { display: none; }
.home-search-first #homeDummyShell { height: auto; max-height: none; min-height: 0; }
.home-search-first .home-bottom-games { padding: 20px; background: #fff; border: 1px solid #e1e7ef; border-radius: 16px; min-width: 0; }
.home-search-first .home-bottom-games .mobile-games-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.home-search-first .home-bottom-games h2 { margin: 0; color: #192b43; font-size: 22px; }
.home-search-first .home-bottom-games .mobile-games-heading a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: #526176; font-size: 13px; text-decoration: none; }
.home-search-first #homeGamesSlot .games-carousel { margin: 0; width: 100%; }

@media (min-width: 821px) {
  .home-search-first > .container { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 24px; padding-top: 24px; }
  .home-search-first #mainContent, .home-search-first .sidebar-layout { display: contents; }
  .home-search-first #mobileMenu { grid-column: 1; grid-row: 1 / span 2; width: 100%; box-sizing: border-box; align-self: start; }
  .home-search-first .home-search-panel { grid-column: 2; grid-row: 1; margin-top: clamp(16px, 3svh, 32px); }
  .home-search-first .sidebar-layout > .content-area { grid-column: 2; grid-row: 2; width: 100%; min-width: 0; }
  .home-search-first .top-bar { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: none; margin: 0; padding: 0; height: auto; min-width: 0; background: #fff; }
  .home-search-first .top-bar .left-top, .home-search-first .top-bar .auth-buttons { display: none; }
  .home-search-first .top-bar .search-form { position: relative; inset: auto; width: 100%; max-width: none; height: auto; margin: 0; transform: none; }
  .home-search-first #searchArea { border-color: #192b43; min-height: 64px; border-radius: 14px; }
  .home-search-first #searchArea:is(.dropdown-open, .questions-open) { border-radius: 14px 14px 0 0; }
  .home-search-first #searchArea form { min-height: 60px; }
  .home-search-first #searchInput { font-size: 18px; min-height: 60px; }
  .home-search-first #searchInput::placeholder { font-size: 17px; }
  .home-search-first #searchArea .search-btn { width: 44px; height: 44px; flex-basis: 44px; background: #192b43; color: #fff; }
  .desktop-content-expanded .home-search-first > .container { grid-template-columns: minmax(0, 1fr); }
  .desktop-content-expanded .home-search-first :is(.home-search-panel, .sidebar-layout > .content-area) { grid-column: 1; }
  .desktop-content-expanded .home-search-first .home-bottom-games { display: none; }
  .home-search-first .home-search-feed { display: flex; flex-direction: column; gap: 0; }
  .home-search-first .home-search-feed .home-live-queries-inner { flex: 1; min-height: 0; }
  .home-search-first .home-search-feed .home-live-queries-header { min-height: 49px; box-sizing: border-box; flex: 0 0 auto; }
  .home-search-first .home-search-feed :is(.home-live-queries-list, .home-most-searched-list) { flex: 1; grid-auto-rows: minmax(54px, 1fr); }
  .home-search-first .home-search-feed :is(.home-live-query-row, .home-most-searched-row) { display: flex; }
  .home-search-first .home-search-feed :is(.home-live-query-link, .home-most-searched-question) { flex: 1; }
}

@media (max-width: 820px) {
  /* Keep the hero and feeds in normal flow while the search row can dock. */
  .home-search-first .home-search-panel { display: contents; }
  .home-search-first .top-bar { transform: none !important; animation: none !important; }
  .home-search-first .top-bar:not(.has-home-sticky-menu) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 6px; align-items: center; width: 100%; min-height: 0; height: auto; margin: 0; padding: 0 10px 10px; box-sizing: border-box; border: 1px solid #dce4ee; border-top: 0; border-radius: 0 0 14px 14px; background: #fff; position: relative; top: 0; }
  /* All compact search styling comes from the shared search-theme.css rules. */
  .home-search-first .top-bar.has-home-sticky-menu { position: fixed; inset: 0 0 auto; width: auto; margin: 0; border: 0; box-sizing: border-box; }
  .home-search-first .home-search-dock-space { display: block; flex: 0 0 auto; height: 0; pointer-events: none; }
  .home-search-first .top-bar:not(.has-home-sticky-menu) .left-top { display: none; }
  .home-search-first .top-bar #siteLogo { display: none; }
  .home-search-first .top-bar #siteLogo .logo-image { width: 180px; height: 42px; object-fit: contain; }
  .home-search-first .home-search-intro { position: relative; display: grid; grid-template-columns: clamp(64px, 19vw, 88px) minmax(0, 1fr) clamp(64px, 19vw, 88px); align-items: end; row-gap: 6px; min-height: 0; margin-top: clamp(20px, 4svh, 36px); padding: 10px 10px 0; border: 1px solid #dce4ee; border-bottom: 0; border-radius: 14px 14px 0 0; background: #fff; }
  .home-search-first .home-intro-copy { display: contents; }
  .home-search-first .home-intro-brand { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; max-width: 320px; margin-inline: auto; }
  .home-search-first .home-mobile-menu-slot { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .home-search-first .home-mobile-menu-slot .mobile-menu-button { display: flex; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
  .home-search-first .home-mobile-menu-slot .mobile-menu-ball { width: 60px; height: 60px; max-width: none; }
  /* The figures share the subtitle row, so their space is useful content.
     Preserve their natural proportions and the complete head/shoulders. */
  .home-search-first .home-intro-art { display: flex; grid-row: 2; width: 100%; height: auto; aspect-ratio: 240 / 305; }
  .home-search-first .home-intro-art--left { grid-column: 1; transform: translateX(10px); }
  .home-search-first .home-intro-art--right { grid-column: 3; transform: translateX(-10px); }
  .home-search-first .home-search-intro h1 { min-width: 0; }
  /* Reuse the exact wordmark artwork; the separate ball is the menu control. */
  .home-search-first .home-intro-wordmark { display: flex; align-items: center; width: min(100%, 244px); height: 44px; overflow: hidden; }
  .home-search-first .home-intro-logo { flex: 0 0 auto; width: 128.57%; max-width: none; margin: 0; }
  .home-search-first .home-search-intro p { grid-column: 2; grid-row: 2; align-self: center; margin: 0; padding: 6px 18px; font-size: 12px; line-height: 1.45; text-wrap: balance; }
  .home-search-first .top-bar:not(.has-home-sticky-menu) .search-form { grid-column: 1; grid-row: 1; height: 50px; }
  .home-search-first .top-bar .auth-buttons { display: none; }
  .home-search-first .top-bar:not(.has-home-sticky-menu) .home-search-magnifier { display: block; width: 20px; height: 20px; flex-basis: 20px; margin-left: 12px; }
  .home-search-first:not(.mobile-search-open) .top-bar:not(.has-home-sticky-menu) #searchArea { height: 50px; border: 2px solid #192b43; border-radius: 10px; }
  .home-search-first:not(.mobile-search-open) .top-bar:not(.has-home-sticky-menu) #searchInput { padding-left: 9px; font-size: 16px; }
  .home-search-first:not(.mobile-search-open) .top-bar:not(.has-home-sticky-menu) #searchInput::placeholder { font-size: 13px; }
  .home-search-first:not(.mobile-search-open) .top-bar:not(.has-home-sticky-menu) #searchArea .search-btn { width: 38px; height: 38px; flex-basis: 38px; border-radius: 8px; background: #192b43; color: #fff; }
  .home-search-first.mobile-search-open .home-search-magnifier, .home-search-first .top-bar.has-home-sticky-menu .home-search-magnifier { display: none; }
  .home-search-first:not(.mobile-search-open) .top-bar:not(.has-home-sticky-menu) #searchArea form { height: 46px; min-height: 46px; }
  .home-search-first .home-search-feeds { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 8px 0 0; }
  .home-search-first .home-search-feed { display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 6px 10px; }
  .home-search-first .home-search-feed .home-live-queries-header { gap: 7px; padding-bottom: 4px; margin-bottom: 0; }
  .home-search-first .home-search-feed .home-live-queries-icon { width: 24px; height: 24px; flex-basis: 24px; }
  .home-search-first .home-search-feed .home-live-queries-title { font-size: 14px; }
  .home-search-first .home-search-feed :is(.home-live-query-link, .home-most-searched-question) { grid-template-columns: 32px minmax(0, 1fr) 6px; gap: 6px; min-height: 36px; padding: 3px 0; }
  .home-search-first .home-search-feed :is(.home-live-query-text, .home-most-searched-text) { font-size: 12px; line-height: 1.35; }
  .home-search-first .home-search-feed :is(.home-live-query-time, .home-most-searched-count) { font-size: 9px; line-height: 1.2; }
  .home-search-first .home-search-feed .home-most-searched-count strong { font-size: 11px; }
  .home-search-first .home-search-feed .home-most-searched-count > span { white-space: nowrap; }
  .home-search-first .home-search-feed :is(.home-live-query-row, .home-most-searched-row):nth-child(n + 4) { display: none; }
  .home-search-first .home-search-feed :is(.home-live-query-row, .home-most-searched-row):nth-child(3) > :is(a, button) { border-bottom: 0; }
  .home-search-first .home-search-feed .home-most-searched-page-link { min-height: 30px; }
  .home-search-first #homefootysphereColumn { grid-template-columns: 1fr; gap: 12px; }
  .home-search-first .home-section-title { padding-top: 16px; font-size: 21px; }
  .home-search-first #homeFeaturedCardsHeading { padding-top: 0; border-top: 0; }
  .home-search-first .home-bottom-games { padding: 14px; }
  .home-search-first .home-bottom-games h2 { font-size: 20px; }
  .home-search-first #homeGamesSlot .scorecards-container { --carousel-mobile-slots: 1; }
  .home-search-first.mobile-search-open .top-bar { transform: none !important; }
}

/* Tighten only the question feeds on shorter phone screens. */
@media (max-width: 820px) and (max-height: 700px) {
  .home-search-first .home-search-feed { padding-block: 4px; }
  .home-search-first .home-search-feed .home-live-queries-header { padding-bottom: 2px; }
  .home-search-first .home-search-feed :is(.home-live-query-link, .home-most-searched-question) { padding-block: 2px; }
}


@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .home-search-first .top-bar.has-home-sticky-menu { animation: home-search-dock-in 140ms ease-out both !important; }
}
@keyframes home-search-dock-in {
  from { opacity: .65; }
  to { opacity: 1; }
}