/* TWO HOOKS, ON PURPOSE (split 2026-09-30, Eric: "the new navbar needs to be the default on all
   pages"). Everything that styles the NAV ITSELF keys off body.cp-nav-v2, which
   card-prices-nav.js sets on every Card Prices page. Everything that styles the exported app --
   the shell, the home column, the surround and its folios -- keys off body.cp-web-app, which
   web-app-nav.js sets only when it finds Expo's own <style id="expo-reset">. The app carries
   BOTH classes, so nothing about /web/ changed; the rest of the site gained the nav and nothing
   else. Adding an app-shell rule under cp-nav-v2 would drag app layout onto the marketing pages,
   which is the one mistake this split exists to make impossible. */
body.cp-nav-v2 {
  /* The nav's content box and the desktop surround are the same frame; widening one without the
     other leaves the border hanging outside the logo. The site keeps the 1280px measure its
     pages are built to; the app widens it below. */
  --cp-web-frame: 1280px;
}

/* The canvas under the app. cp-web-home-fit used to clip the shell to the height of the home
   column, so on a tall window everything below that clip fell through to whatever the browser
   paints -- a flat slab that read as a black band against the textured frame above it. The body
   carries the same deep ground and glass tile the surround uses, so any uncovered area is the
   same material rather than a hole. Paint only; the body is not in layout or hit-testing. */
body.cp-web-app {
  /* 2240px is the widest the frame can go before the folio banners outgrow their crest artwork
     at --cp-column-width's 1120px ceiling. */
  --cp-web-frame: min(2240px, 100vw);
  background: #140a26 url('/web-app-glass.png') center / 420px repeat;
}
/* The desktop surround is paint only; it never enters the app's hit-testing or layout. */
@media (min-width: 1000px) {
  body.cp-web-app [data-testid="appShell"] {
    box-shadow: -1px 0 #ad7c68, 1px 0 #ad7c68,
      -7px 0 #1a0e29, 7px 0 #1a0e29,
      -8px 0 rgba(197, 150, 217, .3), 8px 0 rgba(197, 150, 217, .3);
  }
  body.cp-web-app [data-testid="homeContent"] {
    box-shadow: inset 1px 0 rgba(245, 185, 142, .65),
      inset -1px 0 rgba(245, 185, 142, .65),
      inset 5px 0 rgba(20, 8, 34, .5), inset -5px 0 rgba(20, 8, 34, .5);
  }
}
@media (min-width: 1200px) {
  body.cp-web-app [data-testid="appShell"]:has([data-testid="homeContent"])::before,
  body.cp-web-app [data-testid="appShell"]:has([data-testid="homeContent"])::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
    width: calc((100% - 720px) / 2 - 32px);
    top: 20px;
    bottom: 20px;
    border: 1px solid #b28274;
    border-radius: 2px;
    background:
      linear-gradient(#edb898, #edb898) 16px 16px / 32px 2px no-repeat,
      linear-gradient(#edb898, #edb898) 16px 16px / 2px 32px no-repeat,
      linear-gradient(#edb898, #edb898) calc(100% - 16px) 16px / 32px 2px no-repeat,
      linear-gradient(#edb898, #edb898) calc(100% - 16px) 16px / 2px 32px no-repeat,
      linear-gradient(#edb898, #edb898) 16px calc(100% - 16px) / 32px 2px no-repeat,
      linear-gradient(#edb898, #edb898) 16px calc(100% - 16px) / 2px 32px no-repeat,
      linear-gradient(#edb898, #edb898) calc(100% - 16px) calc(100% - 16px) / 32px 2px no-repeat,
      linear-gradient(#edb898, #edb898) calc(100% - 16px) calc(100% - 16px) / 2px 32px no-repeat,
      url('/card-prices-logo-hero.png') center 46% / 132px auto no-repeat,
      linear-gradient(180deg, rgba(43, 24, 58, .96), rgba(23, 12, 38, .98)),
      url('/web-app-glass.png') center / 420px repeat;
    box-shadow: inset 0 0 0 7px #20112f, inset 0 0 0 8px rgba(224, 173, 147, .35),
      inset 0 0 36px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .22);
  }
  body.cp-web-app [data-testid="appShell"]:has([data-testid="homeContent"])::before {
    left: 16px;
  }
  body.cp-web-app [data-testid="appShell"]:has([data-testid="homeContent"])::after {
    right: 16px;
  }
}
body.cp-nav-v2 .cp-nav {
  box-sizing: border-box;
  gap: 24px;
  height: 64px;
  padding: 0 max(28px, calc((100vw - var(--cp-web-frame, 1760px)) / 2 + 20px));
  background: linear-gradient(180deg, #352044, #251532) !important;
  border: 0 !important;
  border-bottom: 1px solid #c59079 !important;
  border-image: none !important;
  box-shadow: inset 0 -4px #21132e, inset 0 -5px rgba(226, 170, 138, .2),
    0 3px 16px rgba(17, 5, 29, .25) !important;
}
body.cp-nav-v2 .cp-nav::after { display: none; }
body.cp-nav-v2 .cp-nav-logo {
  flex: 0 0 auto;
  gap: 10px;
  min-width: 164px;
  transform: none;
}
body.cp-nav-v2 .cp-nav-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: none;
}
body.cp-nav-v2 .cp-nav-logo .cp-web-wordmark {
  font-family: 'Cinzel_700Bold', 'Cinzel', Georgia, serif !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f8cab0 !important;
  text-shadow: none;
}
body.cp-nav-v2 .cp-nav-links {
  height: 100%;
  gap: 26px;
  justify-content: flex-start;
}
body.cp-nav-v2 .cp-nav .cp-badge-divider { display: none !important; }
body.cp-nav-v2 .cp-nav .cp-nav-links a,
body.cp-nav-v2 .cp-web-nav-group > summary {
  box-sizing: border-box;
  flex-shrink: 0;
  font-family: 'Exo2_500Medium', 'Exo 2', system-ui, sans-serif !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0 !important;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 0;
  background: transparent !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0;
  box-shadow: none !important;
  text-shadow: none !important;
  color: #cfc1dd !important;
  -webkit-text-fill-color: currentColor !important;
  transform: none !important;
  transition: color .15s ease, background .15s ease;
  cursor: pointer;
}
body.cp-nav-v2 .cp-nav .cp-nav-links a::before,
body.cp-nav-v2 .cp-nav .cp-nav-links a::after { display: none; }
body.cp-nav-v2 .cp-nav .cp-nav-links > a,
body.cp-nav-v2 .cp-web-nav-group > summary { border-bottom: 2px solid transparent !important; }
body.cp-nav-v2 .cp-nav .cp-nav-links a:hover,
body.cp-nav-v2 .cp-nav .cp-nav-links a.active,
body.cp-nav-v2 .cp-web-nav-group > summary:hover,
body.cp-nav-v2 .cp-web-nav-group[open] > summary { color: #f8cab0 !important; }
/* The app beta tab (2026-10-21): the brand coral, so the one call to action in the bar reads as one. */
body.cp-nav-v2 .cp-nav .cp-nav-links a.cp-nav-beta { color: #F2997A !important; font-weight: 600; }
body.cp-nav-v2 .cp-nav .cp-nav-links a.cp-nav-beta:hover { color: #ffd2bf !important; }
body.cp-nav-v2 .cp-nav .cp-nav-links > a.active,
body.cp-nav-v2 .cp-web-nav-group[open] > summary { border-bottom-color: #eea47e !important; }
body.cp-nav-v2 .cp-nav a:focus-visible,
body.cp-nav-v2 .cp-nav summary:focus-visible,
body.cp-nav-v2 .cp-nav button:focus-visible,
body.cp-nav-v2 .cp-mobile-nav a:focus-visible {
  outline: 2px solid #f6bd91;
  outline-offset: 4px;
}
body.cp-nav-v2 .cp-web-nav-group { position: relative; }
body.cp-nav-v2 .cp-web-nav-group > summary { list-style: none; }
body.cp-nav-v2 .cp-web-nav-group > summary::-webkit-details-marker { display: none; }
body.cp-nav-v2 .cp-web-nav-group > summary::after {
  content: '\2304';
  display: inline-block;
  padding-left: 7px;
  color: #a994bc;
}
body.cp-nav-v2 .cp-web-nav-panel {
  position: absolute;
  top: calc(100% + 9px);
  left: -16px;
  min-width: 192px;
  padding: 7px;
  border: 1px solid #684b7b;
  border-radius: 8px;
  background: #2e1947;
  box-shadow: 0 14px 32px rgba(10, 3, 20, .4);
}
body.cp-nav-v2 .cp-nav .cp-web-nav-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
}
body.cp-nav-v2 .cp-nav .cp-web-nav-panel a:hover,
body.cp-nav-v2 .cp-nav .cp-web-nav-panel a.active { background: #432859 !important; }
body.cp-nav-v2 .cp-web-account-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
body.cp-nav-v2 .cp-nav .cp-nav-links .cp-nav-auth-link {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Exo2_500Medium', 'Exo 2', system-ui, sans-serif !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: none !important;
  color: #f6eefa !important;
}
body.cp-nav-v2 .cp-nav .cp-nav-links #cpNavCreate {
  padding: 8px 15px !important;
  background: #f1b396 !important;
  color: #311b3e !important;
}
body.cp-nav-v2 .cp-nav .cp-nav-links #cpNavCreate:hover { background: #f8c7ac !important; }
body.cp-nav-v2 .cp-nav-account {
  box-sizing: border-box;
  top: calc(var(--cp-nav-h, 64px) + 8px);
  right: 28px;
  max-width: calc(100vw - 32px);
  border-radius: 8px;
  border-color: #684b7b !important;
  background: #2e1947 !important;
}
body.cp-nav-v2 .cp-mobile-nav {
  top: var(--cp-nav-h, 48px);
  max-height: calc(100dvh - var(--cp-nav-h, 48px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 1000px) {
  body.cp-nav-v2 .cp-nav-logo {
    padding-right: 24px;
    border-right: 1px solid rgba(238, 180, 139, .3);
  }
  body.cp-nav-v2 .cp-nav .cp-nav-links { display: flex; }
  body.cp-nav-v2 .cp-nav-hamburger,
  body.cp-nav-v2 .cp-nav-mobile-quick,
  body.cp-nav-v2 .cp-mobile-nav { display: none !important; }
}
@media (min-width: 1000px) and (max-width: 1150px) {
  body.cp-nav-v2 .cp-nav { padding: 0 20px; gap: 20px; }
  body.cp-nav-v2 .cp-nav-links { gap: 20px; }
  body.cp-nav-v2 .cp-web-account-links { gap: 14px; }
}
@media (max-width: 999px) {
  body.cp-nav-v2 .cp-nav { height: 48px !important; gap: 12px; padding: 0 14px !important; }
  body.cp-nav-v2 .cp-nav .cp-nav-links { display: none; }
  body.cp-nav-v2 .cp-nav-logo { min-width: 0; gap: 7px; }
  body.cp-nav-v2 .cp-nav-logo img { height: 28px !important; width: 28px !important; }
  body.cp-nav-v2 .cp-nav-logo .cp-web-wordmark { font-size: 12px; }
  body.cp-nav-v2 .cp-nav .cp-nav-mobile-quick { margin-right: 0; }
  body.cp-nav-v2 .cp-nav .cp-nav-mobile-quick .cp-q-auth {
    padding: 6px 10px !important;
    font-family: 'Exo2_500Medium', 'Exo 2', system-ui, sans-serif !important;
    font-size: 11px;
    letter-spacing: 0 !important;
    text-transform: none;
    border-color: #76538c !important;
    background: #412454 !important;
    border-radius: 6px !important;
  }
  body.cp-nav-v2 .cp-nav .cp-nav-hamburger {
    gap: 3px !important;
    padding: 5px 7px !important;
    border: 0 !important;
    border-image: none !important;
    background: transparent !important;
  }
  body.cp-nav-v2 .cp-nav .cp-nav-hamburger span { min-width: 26px !important; height: 2px !important; }
  body.cp-nav-v2 .cp-nav .cp-nav-hamburger span:nth-child(2) { height: auto !important; }
  body.cp-nav-v2 .cp-nav .cp-nav-hamburger span:nth-child(2)::after {
    font-size: 9px !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
  }
  body.cp-nav-v2 .cp-nav-account { right: 14px; }
}
@media (max-width: 379px) {
  body.cp-nav-v2 .cp-nav-logo .cp-web-wordmark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.cp-nav-v2 .cp-nav * { transition: none !important; }
}

/* Collector's folio: a separate, inert surround, never a replacement app surface. */
.cp-web-surround { display: none; }
@media (min-width: 1000px) {
  body.cp-nav-v2 .cp-nav {
    gap: 20px;
    background: linear-gradient(90deg, #38233be8, #22142eed 45%, #3b2641e3),
      url('/web-app-glass.png') center / 210px repeat !important;
    border-top: 2px solid #a97859 !important;
    border-bottom: 1px solid #e2b68b !important;
  }
  body.cp-nav-v2 .cp-nav-logo { padding-right: 20px; }
  body.cp-nav-v2 .cp-nav-logo img { width: 46px; height: 46px; }
  body.cp-nav-v2 .cp-nav-logo .cp-web-wordmark { color: #f1cc95 !important; }
  body.cp-nav-v2 .cp-nav-links { gap: 8px; }
  body.cp-nav-v2 .cp-nav .cp-nav-links > a,
  body.cp-nav-v2 .cp-web-nav-group > summary {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 76px;
    height: 56px;
    padding: 3px 12px 5px;
    font-family: 'Cinzel_700Bold', 'Cinzel', Georgia, serif !important;
    font-size: 11px;
    font-weight: 700;
    color: #dbc5ad !important;
    border-left: 1px solid rgba(239, 190, 137, .12) !important;
    border-bottom: 2px solid transparent !important;
  }
  body.cp-nav-v2 .cp-nav .cp-nav-links > a:hover,
  body.cp-nav-v2 .cp-web-nav-group > summary:hover,
  body.cp-nav-v2 .cp-web-nav-group[open] > summary {
    background: linear-gradient(0deg, rgba(232, 170, 122, .14), transparent) !important;
    border-bottom-color: #f0c18b !important;
  }
  body.cp-nav-v2 .cp-web-nav-group > summary::after {
    position: absolute;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    right: 1px;
    padding: 0;
    font-size: 11px;
    color: #f0c18b;
  }
  body.cp-nav-v2 .cp-nav .cp-web-nav-emblem {
    display: block;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    object-fit: contain;
    opacity: .16;
    filter: grayscale(.6) sepia(.35);
    pointer-events: none;
  }
  body.cp-nav-v2 .cp-web-account-links { gap: 14px; }
  body.cp-nav-v2 .cp-nav .cp-nav-links #cpNavAuth {
    position: relative;
    min-width: 116px;
    max-width: 180px;
    padding: 11px 19px 11px 43px !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
      calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    background: url('/card-prices-logo-hero.png') 9px center / 27px no-repeat,
      linear-gradient(120deg, #f1d6ace8, #d6ad86f0 60%, #ebc79be8),
      url('/web-app-glass.png') center / 110px !important;
    box-shadow: inset 0 1px #fff0d2, inset 0 -2px #946446 !important;
    color: #2a1730 !important;
    font-family: 'Cinzel_700Bold', 'Cinzel', Georgia, serif !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
  }
  body.cp-nav-v2 .cp-nav .cp-nav-links #cpNavAuth::after {
    content: '';
    display: block;
    position: absolute;
    inset: 4px;
    border: 1px solid #80553d8c;
    border-radius: 2px;
    pointer-events: none;
  }
  body.cp-nav-v2 .cp-nav .cp-nav-links #cpNavAuth:hover {
    filter: brightness(1.1);
  }
  body.cp-nav-v2 .cp-nav .cp-nav-links #cpNavAuth:focus-visible {
    outline: 2px solid #301137;
    outline-offset: -6px;
  }
  body.cp-nav-v2 .cp-nav .cp-nav-links #cpNavCreate {
    border: 1px solid #d7a979 !important;
    border-radius: 2px !important;
    background: #3d263b !important;
    box-shadow: inset 0 0 0 3px #24152f, inset 0 0 0 4px #795343 !important;
    color: #f5d2a3 !important;
    padding: 10px 16px !important;
    font-family: 'Cinzel_700Bold', 'Cinzel', Georgia, serif !important;
    font-size: 11px;
  }
  body.cp-nav-v2 .cp-nav .cp-nav-links #cpNavCreate:hover { background: #583641 !important; }
  body.cp-nav-v2 .cp-web-nav-panel {
    top: calc(100% + 3px);
    border: 1px solid #bd9275;
    border-radius: 2px;
    background: #25162f;
    box-shadow: inset 0 0 0 4px #1c1026, inset 0 0 0 5px #604552, 0 12px 24px #08040c80;
    padding: 10px;
  }
  body.cp-web-app [data-testid="appShell"]:has([data-testid="homeContent"])::before,
  body.cp-web-app [data-testid="appShell"]:has([data-testid="homeContent"])::after { display: none; }
  body.cp-web-app [data-testid="homeContent"] {
    box-shadow: inset 1px 0 #be9678, inset -1px 0 #be9678, inset 0 -1px #be9678,
      inset 5px 0 #14082280, inset -5px 0 #14082280, inset 0 -5px #14082280;
  }
  body.cp-web-app [data-testid="bottomNavigation"]::after {
    content: '';
    position: absolute;
    inset: 18px 0 3px;
    pointer-events: none;
    border: 1px solid rgba(190, 150, 120, .28);
    border-top: 0;
  }
  body.cp-web-app .cp-web-surround {
    display: block;
    position: fixed;
    pointer-events: none;
    z-index: 1;
    width: min(var(--cp-web-frame, 1760px), 100%);
    top: var(--cp-nav-h, 64px);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #c69b79;
    border-top: 0;
    border-bottom: 4px double #d5ad83;
    box-sizing: border-box;
  }
  .cp-web-folio { display: none; }
}
@media (min-width: 1200px) {
  body.cp-web-app .cp-web-folio {
    display: flex;
    position: absolute;
    top: 14px;
    bottom: 14px;
    width: calc((100% - var(--cp-column-width, 720px)) / 2 - 28px);
    align-items: center;
    justify-content: center;
    border: 1px solid #b38972;
    background: linear-gradient(165deg, #56334ce8, #21132cee 36%, #25182eeb 72%, #55384bea),
      url('/web-app-glass.png') center / 320px;
    box-shadow: inset 0 0 0 5px #1d1128, inset 0 0 0 6px #a87e6466,
      inset 0 0 0 12px #21142b, inset 0 0 0 13px #a87e6433;
    overflow: hidden;
  }
  .cp-web-folio-left { left: 13px; }
  .cp-web-folio-right { right: 13px; }
  .cp-web-folio::before,
  .cp-web-folio::after {
    content: '';
    position: absolute;
    width: 142px;
    height: 142px;
    border: 1px solid #d9ac7c99;
    transform: rotate(45deg);
    box-shadow: 0 0 0 8px #23132f, 0 0 0 9px #b689694d,
      0 0 0 23px #23132f, 0 0 0 24px #b6896933;
  }
  .cp-web-folio::before {
    display: none;
  }
  .cp-web-folio::after { bottom: -82px; }
  .cp-web-heraldry {
    position: absolute;
    isolation: isolate;
    top: 50%;
    transform: translateY(-42%);
    width: min(260px, calc(100% - 18px));
    aspect-ratio: 240 / 300;
    filter: drop-shadow(0 3px 3px #12081999);
  }
  .cp-web-folio-crest {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
  }
  .cp-web-card-fan { position: absolute; top: 32px; width: 76px; height: 112px; }
  .cp-web-card-fan::after {
    content: '';
    position: absolute;
    top: calc(100% + 32px);
    left: 50%;
    height: 26px;
    width: 1px;
    background: linear-gradient(#e8bb8d, #e8bb8d00);
    box-shadow: -7px -16px #bc8e6544, 7px -16px #bc8e6544;
  }
  .cp-web-card-back {
    position: absolute;
    inset: 0;
    border: 1px solid #d6af88;
    border-radius: 7px;
    background: url('/card-prices-logo-hero.png') center / 48px no-repeat,
      linear-gradient(145deg, #402440e6, #150c22f2), url('/web-app-glass.png') center / 240px;
    box-shadow: inset 0 0 0 5px #25132f, inset 0 0 0 6px #c99b7466, 0 14px 24px #08030d99;
  }
  .cp-web-card-back:nth-child(1) { transform: translate(-21px, -8px) rotate(-17deg); opacity: .7; }
  .cp-web-card-back:nth-child(2) { transform: translate(21px, -8px) rotate(17deg); opacity: .85; }
  .cp-web-card-back:nth-child(3) { transform: translateY(14px); }
  .cp-web-folio-right .cp-web-card-fan { transform: none; }
}

body.cp-web-app:has([data-testid="searchHeader"]) { --cp-column-width: 900px; }
body.cp-web-app:has([data-testid="searchHeader"]) [data-testid="bottomNavigation"] { max-width: 900px; }
body.cp-web-app:has([data-testid="searchHeader"]) .cp-web-card-back { background-size: 48px, auto, 200px; }

/* Desktop home fits its content (Codex, approved by Eric 2026-09-25). web-app-nav.js measures the home column
   (homeContent plus the scroll container's padding) into --cp-home-height and sets body.cp-web-home-fit only on
   the home route at >= 1000px. The app shell, and the fixed surround and folios with it, then stop where the home
   ends instead of stretching to the bottom of a tall window; any other route, or a narrow window, drops the class
   and the frame returns to full height. */
@media (min-width: 1000px) {
  /* These two used to be pinned to `flex: 0 0 auto` so the column would collapse to its content
     for the clip below. With the frame filling the window that leaves the ground gradient short
     and parks the affiliate row in the middle of a dark gap, so the app's own `flex: 1` and the
     spacer above the affiliate row do the distributing again. */
  /* CHANGED 2026-09-30 (Eric: "the viewport issue isn't fixed. still not taking up as much as
     it should"). The clip above was a max-height, so a short landing left the rest of a tall
     window empty -- 300px at 2000x1200, 704px at 1440x1600. The frame now FILLS the window and
     the fit only matters when the home is TALLER than it, where the shell scrolls as before. */
  body.cp-web-home-fit [data-testid="appShell"] {
    min-height: calc(100dvh - var(--cp-nav-h, 64px));
  }
  body.cp-web-home-fit .cp-web-surround {
    height: calc(100dvh - var(--cp-nav-h, 64px));
    bottom: auto;
  }
  /* The home column was pinned at WEB_HOME_MAX_WIDTH (720px, apps/scanner/src/web/layout.ts) by an
     inline RN style, so widening the shell alone just added padding either side of the same column.
     The shell is already the measure -- let the home fill it. */
  body.cp-web-home-fit [data-testid="homeScroll"] > * { max-width: 100%; }
}

/* Every desktop route shares the opening between the two stationary banners. */
@media (min-width: 1200px) {
  body.cp-nav-v2,
  body.cp-web-app:has([data-testid="searchHeader"]) { --cp-column-width: clamp(720px, 50vw, 1120px); }
  body.cp-web-app [data-testid="appShell"],
  body.cp-web-app [data-testid="bottomNavigation"],
  body.cp-web-app:has([data-testid="searchHeader"]) [data-testid="bottomNavigation"] {
    width: 100%;
    max-width: var(--cp-column-width);
  }
}

/* Match the catalog's glass sleeve without changing search handlers or native inputs. */
body.cp-web-app [data-testid="searchBoxLarge"],
body.cp-web-app [data-testid="webSearchField"] {
  border: 2px solid #bdb0c9;
  border-radius: 4px;
  background: linear-gradient(105deg, #5e3d7566, #160b27ed 75%),
    url('/web-app-glass.png') left center / 240px repeat;
  box-shadow: inset 0 0 0 1px #ffffff29;
}
body.cp-web-app [data-testid="webSearchField"] input {
  min-width: 0;
  background: transparent;
  border: 0;
  font-family: 'LibreBaskerville_700Bold', Georgia, serif;
  color: #eee2f3;
}
body.cp-web-app [data-testid="webSearchField"] input::placeholder { color: #c7b7d2; opacity: 1; }
body.cp-web-app [data-testid="webSearchField"]:focus-within,
body.cp-web-app [data-testid="searchBoxLarge"]:focus-visible {
  outline: 2px solid #e9bb94;
  outline-offset: 3px;
}

/* A shorter browser window gets less artwork and spacing, not hidden controls or a clipped scroll view. */
@media (min-width: 1000px) and (max-height: 850px) {
  body.cp-nav-v2 [data-testid="homeHero"] { padding-top: 8px; }
  body.cp-nav-v2 [data-testid="homeHero"] > :first-child { width: 64px !important; height: 64px !important; }
  body.cp-nav-v2 [data-testid="homePulse"] > svg { height: 32px; }
  body.cp-nav-v2 [data-testid="homeActions"] { padding-top: 12px; gap: 8px; }
  body.cp-nav-v2 [data-testid="homePartners"] { padding-top: 6px; }
  body.cp-nav-v2 [data-testid="homePartners"] [data-testid="resultsBox"] { padding: 8px; gap: 4px; }
  body.cp-nav-v2 [data-testid="homeDisclosure"] { padding-top: 3px; }
  body.cp-web-app [data-testid="homeAffiliate"] { padding-top: 4px; }
}
@media (min-width: 1000px) and (max-height: 740px) {
  body.cp-web-app [data-testid="homeContent"] { padding-top: 4px !important; }
  body.cp-nav-v2 [data-testid="homeWordmark"] { padding-top: 2px; padding-bottom: 2px; }
  body.cp-nav-v2 [data-testid="homeWordmark"] + div,
  body.cp-web-app [data-testid="homeContent"] > div:nth-child(2) { margin-top: 4px; }
  body.cp-nav-v2 [data-testid="homeSection"] { padding-top: 4px; }
  body.cp-web-app [data-testid="searchBoxLarge"] { margin-top: 8px; }
  body.cp-nav-v2 [data-testid="homeHero"] { padding-top: 6px; }
  body.cp-nav-v2 [data-testid="homeHero"] > :first-child { width: 40px !important; height: 40px !important; }
  body.cp-nav-v2 [data-testid="homePulse"] { margin-top: 0; }
  body.cp-nav-v2 [data-testid="homePulse"] > svg { height: 20px; }
  body.cp-nav-v2 [data-testid="homeStats"] { margin-top: 0; }
  body.cp-nav-v2 [data-testid="homeStats"] > div > :first-child { line-height: 24px; }
  body.cp-nav-v2 [data-testid="homeStats"] > div > :last-child { margin-top: 3px; }
  body.cp-nav-v2 [data-testid="homeActions"] { padding-top: 8px; gap: 4px; }
  /* Keep the new partner artwork and full codes visible beside each other on short desktops. */
  body.cp-nav-v2 [data-testid="homePartners"] [data-testid="resultsBox"] {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
  }
  body.cp-nav-v2 [data-testid="homePartners"] [data-testid="resultsBox"] > :nth-child(3) { grid-column: 1; grid-row: 1 / 3; }
  body.cp-nav-v2 [data-testid="homePartners"] [data-testid="resultsBox"] > :nth-child(4) { grid-column: 2; grid-row: 1; justify-self: start; }
  body.cp-nav-v2 [data-testid="homePartners"] [data-testid="resultsBox"] > :nth-child(5) { grid-column: 2; grid-row: 2; }
  body.cp-web-app [data-testid="homeAffiliate"] { padding-top: 4px; }
}

/* Phone-size home (Codex, approved by Eric 2026-09-25): a phone browser loses ~100px to its own chrome, so the
   hero gives up a little artwork to keep the actions and partner tiles above the dock -- logo 110 -> 96, pulse
   60 -> 48 (the line is drawn preserveAspectRatio none, so it flattens rather than shrinks), actions 24 -> 16,
   hero 12 -> 8. The native app carries the SAME four values on phones (HomeScreenVelvet.tsx, compactHero), so
   the home reads the same in Safari and in the app; keep the two in step. */
@media (max-width: 999px) and (max-height: 900px) {
  body.cp-nav-v2 [data-testid="homeHero"] { padding-top: 8px; }
  body.cp-nav-v2 [data-testid="homeHero"] > :first-child { width: 96px !important; height: 96px !important; }
  body.cp-nav-v2 [data-testid="homePulse"] > svg { height: 48px; }
  body.cp-nav-v2 [data-testid="homeActions"] { padding-top: 16px; }
}