/* One header owns its height (--topbar-height, set in arcade.css); view selection lives
   beside the other controls. */
body[data-layout-mode] .app-topbar {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; flex-wrap:nowrap;
  height:var(--topbar-height); min-height:var(--topbar-height);
  padding:0 1.5rem; gap:1.125rem; box-sizing:border-box;
}
body[data-layout-mode] .app-topbar>.app-brand {
  flex:0 0 auto; width:auto; margin:0; min-width:0;
  white-space:nowrap;
}
.app-topbar>.notebook-tabs {
  display:flex; align-self:stretch; align-items:stretch; flex:1 1 auto;
  width:auto; min-width:0; height:auto; margin:0; padding:0;
  flex-wrap:nowrap; gap:0.75rem; overflow-x:auto; scrollbar-width:none;
}
.app-topbar>.notebook-tabs button {
  flex:0 0 auto; height:100%; margin:0; padding:0.1875rem 0.625rem 0;
  border-radius:0; white-space:nowrap; font-size:0.8125rem;
}
body[data-layout-mode] .app-topbar>.betslip-toggle {
  flex:0 0 auto; align-self:center; margin:0; min-height:2.25rem;
  padding:0.4375rem 0.6875rem; font-size:0.75rem; white-space:nowrap;
}

/* Tighten spacing before the compact breakpoint so laptop widths fit. */
@media(max-width:92em) {
  .app-topbar>.notebook-tabs { gap:0.25rem; }
  .app-topbar>.notebook-tabs button { padding-left:0.5rem; padding-right:0.5rem; }
}
@media(max-width:82.5em) {
  body[data-layout-mode] .app-topbar { gap:0.8125rem; padding-left:1.125rem; padding-right:1.125rem; }
  .app-topbar>.notebook-tabs { gap:0.1875rem; }
  .app-topbar>.notebook-tabs button { padding-left:0.4375rem; padding-right:0.4375rem; font-size:0.75rem; }
}
@media(max-width:66em) {
  body[data-layout][data-layout-mode] .app-topbar {
    display:grid; grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-rows:3.375rem 3.125rem; gap:0 0.75rem; align-items:center;
  }
  body[data-layout-mode] .app-topbar>.app-brand { grid-column:1; grid-row:1; }
  .app-topbar>.betslip-toggle { grid-column:3; grid-row:1; }
  .app-topbar>.notebook-tabs {
    grid-column:1/-1; grid-row:2; align-self:stretch; height:3.125rem;
    width:100%; gap:0.75rem;
  }
  .app-topbar>.notebook-tabs button { font-size:0.8125rem; }
  
}
/* Nav menus (studio-tabs.js GROUPS): a tab-like button that opens its tabs below it.
   layouts.js places the menu (fixed) so a scrolling tab row can't clip it. */
.app-topbar>.notebook-tabs .tab-group { display:flex; flex:0 0 auto; align-self:stretch; }
.app-topbar .notebook-tabs .tab-group-button { display:inline-flex; align-items:center; gap:0.3125rem; }
body[data-layout] .app-topbar .notebook-tabs .tab-group-button.is-active { color:var(--accent); border-bottom-color:var(--accent); font-weight:650; }
body[data-layout] .app-topbar .notebook-tabs .tab-group-button[aria-expanded=true] { color:var(--ink); }
.tab-group-caret { font-size:0.625rem; }
.tab-group-menu { position:fixed; z-index:60; display:grid; min-width:11rem; padding:0.375rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); box-shadow:0 1rem 2.5rem #0008; }
.tab-group-menu[hidden] { display:none; }
.app-topbar .notebook-tabs .tab-group-menu button { height:auto; width:100%; margin:0; padding:0.5625rem 0.75rem; border:0; border-radius:var(--r-control); background:none; color:var(--ink); font-size:0.875rem; font-weight:500; text-align:left; white-space:nowrap; }
body[data-layout] .app-topbar .notebook-tabs .tab-group-menu button:hover, body[data-layout] .app-topbar .notebook-tabs .tab-group-menu button:focus-visible { background:var(--accent-soft); }
body[data-layout] .app-topbar .notebook-tabs .tab-group-menu button[aria-current=page] { color:var(--accent); font-weight:650; }

@media(max-width:41.25em) {
  body[data-layout-mode] .app-topbar { padding:0 0.625rem; gap:0 0.4375rem; }
  body[data-layout][data-layout-mode] .app-topbar { grid-template-rows:3.25rem 2.875rem; gap:0 0.4375rem; }
  body[data-layout-mode] .app-topbar>.app-brand { display:block; font-size:0.8125rem; line-height:1; letter-spacing:-.35px; }
  body[data-layout] .app-topbar>.app-brand { display:flex; gap:0.3125rem; }
  body[data-layout-mode] .app-topbar .brand-lab { display:inline; font:inherit; letter-spacing:inherit; margin:0 0 0 0.1875rem; }
  body[data-layout-mode] .app-topbar>.betslip-toggle { min-height:2.0625rem; padding:0.375rem 0.4375rem; font-size:0.625rem; }
  body[data-layout-mode] .app-topbar>.betslip-toggle span { min-width:1.125rem; height:1.125rem; padding:1px 0.25rem; margin-left:0.1875rem; font-size:0.625rem; }
  .app-topbar>.notebook-tabs { height:2.875rem; gap:0.4375rem; }
  .app-topbar>.notebook-tabs button { flex:0 0 auto; padding-left:0.4375rem; padding-right:0.4375rem; font-size:0.75rem; }
}
@media(max-width:24.75em) {
  body[data-layout-mode] .app-topbar { padding-left:0.5rem; padding-right:0.5rem; gap:0 0.3125rem; }
  body[data-layout][data-layout-mode] .app-topbar { gap:0 0.3125rem; }
  body[data-layout-mode] .app-topbar>.app-brand { font-size:0.6875rem; letter-spacing:-.45px; }
  body[data-layout-mode] .app-topbar>.betslip-toggle { font-size:0.625rem; padding-left:0.3125rem; padding-right:0.3125rem; }
  .app-topbar>.notebook-tabs { gap:0.1875rem; }
  .app-topbar>.notebook-tabs button { padding-left:0.375rem; padding-right:0.375rem; font-size:0.6875rem; }
}

/* Back to top (back-to-top.js): a round arrow at the bottom right once the page is scrolled
   well down; under the bet toast when both show. It fades out (data-tucked) while the footer
   is in view and, on phones, while the page scrolls down; keyboard focus brings it back. */
.back-to-top { position:fixed; right:calc(1rem + env(safe-area-inset-right)); bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:50; display:grid; place-items:center; width:2.75rem; height:2.75rem; padding:0; border:1px solid var(--line); border-radius:var(--r-data); background:var(--surface-raised); color:var(--ink); box-shadow:0 0.5rem 1.5rem #0008; cursor:pointer; transition:opacity .2s ease, transform .2s ease; }
.back-to-top[hidden] { display:none; }
.back-to-top[data-tucked]:not(:focus-visible) { opacity:0; transform:translateY(0.75rem); pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition:none; } }
/* Phones: room under the last row for the button (its height, its gap, the safe area), so the
   last controls can scroll clear of it. */
@media (max-width: 40em) { body { padding-bottom:calc(2.75rem + 1rem + env(safe-area-inset-bottom)); } }
.back-to-top svg { width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }
.back-to-top:hover, .back-to-top:focus-visible { border-color:var(--accent); color:var(--accent); }
.back-to-top:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media print { .back-to-top { display:none; } }