/* Public mobile layouts: loaded after the shared broadcast treatments. */
body.modal-open, body:has(dialog[open]) { overflow:hidden; }
.modal-card, .ad-details-dialog, .increase-dialog {
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.modal-rows span { overflow-wrap:anywhere; min-width:0; }
.modal-x, .ad-details-close, .dialog-close { min-width:44px; min-height:44px; }
:is(a, button, input, select, textarea, summary):focus-visible { outline:2px solid #ee3544; outline-offset:3px; }

@media(max-width:900px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size:16px!important; max-width:100%; }
  .masthead-row .nav :is(.nav-wallet,.nav-mine,.nav-cta) { min-height:44px; height:44px; }
  /* Give the artwork its own stage; the auction no longer obscures it. */
  .lb { --mobile-stage:clamp(320px,90vw,460px); min-height:0; padding-top:var(--mobile-stage); }
  .lb-board { bottom:auto; height:var(--mobile-stage); }
  .lb-fish, .lb-fish-grain, .lb-smoke {
    top:18px; bottom:auto; left:50%; transform:translateX(-50%);
    height:calc(var(--mobile-stage) - 18px);
  }
  .lb .lower-third { order:1; }
  .hero-auction-popup.nx {
    position:relative; inset:auto; order:2; width:auto; margin:16px;
    display:grid; grid-template-columns:1fr 1fr; --section-title-size:24px;
  }
  .hero-auction-popup > :is(.lt-flash,.lt-plate,.hero-auction-action) { grid-column:1 / -1; }
  .hero-auction-time { padding:16px 12px; }
  .hero-auction-time>strong { font-size:25px; letter-spacing:0; }
  .hero-auction-time>small { font-size:11px; line-height:1.5; display:block; }
  .hero-auction-stats { grid-template-columns:1fr; padding:8px 0; border-left:1px solid #343b45; }
  .hero-auction-stats>div { padding:7px 12px; }
  .hero-auction-stats>div+div { border-left:0; }
  .hero-auction-stats strong { margin-top:3px; }
  .hero-auction-action .nx-button { min-height:44px; font-size:12px; }
  .lb .lt-actions { display:none; }
  .lb .lt-sub { font-size:14px; line-height:1.55; }
  .hero-laptop-ad { font-size:9px; }
  .hero-laptop-ad::after { content:""; position:absolute; inset:-8px 0; }
}

@media(max-width:620px) {
  .masthead-row { position:relative; gap:6px!important; padding-block:8px; }
  .masthead-row .identity .wordmark { padding-block:8px; }
  .masthead-row .nav { margin:0; gap:8px; }
  .masthead-row .nav-total-views { position:absolute; top:20px; right:12px; color:#aab3bf; }
  .masthead-row .nav :is(.nav-wallet,.nav-mine,.nav-cta) { height:44px; min-height:44px; font-size:11px; padding:8px; }
  .masthead-row .nav-cta b { font-size:11px; }
  .masthead-row .nav>[hidden] { display:none!important; }
  .page-contents.is-compact { bottom:calc(12px + env(safe-area-inset-bottom)); left:12px; width:170px; max-height:calc(100dvh - var(--contents-top) - 32px); }
  .page-contents.is-compact summary { min-height:44px; padding:12px; }
  .page-contents.is-compact nav a { min-height:44px; }
  .nx-footer { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  :is(.book-tabs,.creative-options) { flex-wrap:wrap; gap:8px; }
  .book-tabs button, .creative-options button, .market-filters button { min-height:44px; }
  .ad-details-dialog { width:calc(100vw - 24px); padding:24px 20px; }
  .ad-details-dialog h2 { padding-right:12px; }
  .nx-channel-line .nav-social { display:grid; width:44px; height:44px; flex-shrink:0; }
  .nx-channel-line { flex-wrap:wrap; }
  /* Keep playback controls away from the laptop advertising surface. */
  .anchor-play-toggle, .anchor-sound-toggle { top:10px; bottom:auto; right:auto; }
  .anchor-play-toggle { left:10px; }
  .anchor-sound-toggle { left:64px; }
  .auction-video-frame :is(.anchor-play-toggle,.anchor-sound-toggle) { top:42px; }
  .market-filters { display:grid; grid-template-columns:1fr 1fr; padding:16px; }
  .market-card-body { padding:12px; }
  .market-actions a { min-height:44px; display:flex; align-items:center; }
}

@media(min-width:360px) and (max-width:620px) {
  .market-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; }
  .market-art { height:116px; padding:12px; gap:16px; }
  .market-art>strong { font-size:16px; }
  .market-art>span { font-size:9px; letter-spacing:0; }
  .market-card-body { font-size:12px; }
  .market-card-body>p { white-space:normal; overflow-wrap:anywhere; font-size:13px; line-height:1.4; min-height:2.8em; }
}

@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; }
}

/* The phone header expands the existing links, preserving wallet behaviour. */
.mobile-nav-toggle { display:none; }
@media(max-width:900px) {
  .page-contents { display:none!important; }
  .masthead-row.has-mobile-menu { position:relative; flex-wrap:nowrap; padding:8px 12px; min-height:60px; gap:12px!important; }
  .masthead-row.has-mobile-menu .identity { flex:1; min-width:0; }
  .masthead-row.has-mobile-menu .identity .wordmark { margin:0; padding:0; width:112px; }
  .masthead-row.has-mobile-menu > .pill { display:none; }
  .mobile-nav-toggle { display:flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; padding:10px; color:#eef0f3; cursor:pointer; }
  .mobile-nav-icon,.mobile-nav-icon::before,.mobile-nav-icon::after { display:block; width:20px; height:2px; background:currentColor; border-radius:1px; }
  .mobile-nav-icon { position:relative; }
  .mobile-nav-icon::before,.mobile-nav-icon::after { content:""; position:absolute; left:0; }
  .mobile-nav-icon::before { top:-6px; }
  .mobile-nav-icon::after { top:6px; }
  .mobile-menu-open .mobile-nav-icon { background:transparent; }
  .mobile-menu-open .mobile-nav-icon::before { top:0; transform:rotate(45deg); }
  .mobile-menu-open .mobile-nav-icon::after { top:0; transform:rotate(-45deg); }
  .masthead-row.has-mobile-menu > .nav { display:none; }
  .masthead-row.has-mobile-menu.mobile-menu-open > .nav {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:absolute;
    top:100%; left:0; right:0; z-index:2; width:auto; margin:0; padding:16px; gap:12px;
    max-height:calc(100dvh - 76px); overflow-y:auto; overscroll-behavior:contain;
    background:var(--grain),#101418; border:1px solid #343b43; box-shadow:0 12px 24px #0009;
  }
  .masthead-row.has-mobile-menu .nav > * { order:0; }
  .masthead-row.has-mobile-menu .nav > :not(.nav-social) { grid-column:1 / -1; }
  .masthead-row.has-mobile-menu .nav > .nav-link { display:block; padding:0; text-align:left; }
  .masthead-row.has-mobile-menu .nav > .nav-total-views { position:static; display:flex; justify-content:flex-start; padding:0; }
  .masthead-row.has-mobile-menu .nav > a { display:flex; align-items:center; justify-content:center; min-height:44px; height:auto; width:100%; margin:0; padding:12px; font-size:12px; }
  .masthead-row.has-mobile-menu .nav > .nav-social { display:flex; }
  .masthead-row.has-mobile-menu .nav > [hidden] { display:none!important; }
  .masthead-row.has-mobile-menu .nav .nav-social svg { width:19px; height:19px; }
  body[data-contents-page="home"] .topbar > .tape-stuck { display:none; height:0; border:0; }
  .lb-fish,.lb-fish-grain,.lb-smoke { top:0; height:var(--mobile-stage); }
  .nx-footer { padding-bottom:24px; }
}

@media(max-width:900px) {
  /* Explicit dimensions avoid Safari's auto-width/height percentage sizing. */
  .lb-fish,.lb-fish-grain,.lb-smoke {
    top:calc(var(--mobile-stage) * .06);
    width:calc(var(--mobile-stage) * .94 * 1375 / 1899);
    height:calc(var(--mobile-stage) * .94);
    max-width:none;
    aspect-ratio:auto;
  }
  .lb-fish > img { width:100%; height:100%; object-fit:fill; }
  /* Don't reserve an empty market strip while its data is loading. */
  [data-tape]:has(.tape-run:empty) { display:none; }
}