/* Layout geometry follows the five original design explorations. The geometry tokens
   (--header-height, --topbar-height, --slip-width) live in arcade.css. */
body[data-layout] { font-size:0.875rem; }

body[data-layout] .app-topbar { padding:0 1.5rem; gap:2rem; z-index:50; }
body[data-layout] .app-brand { font-size:1.375rem; font-weight:800; letter-spacing:.1px; white-space:nowrap; }
body[data-layout] .brand-lab { color:inherit; margin-left:0.3125rem; }
.app-topbar .notebook-tabs { gap:1.1875rem; flex:1; }
.app-topbar .notebook-tabs button { padding:0.1875rem 0.5rem 0; font-size:0.875rem; font-weight:500; }
.app-topbar .notebook-tabs button[aria-current=page] { font-weight:650; }
body[data-layout] .betslip-toggle { font-size:0.8125rem; padding:0.5rem 0.8125rem; background:transparent; }
.betslip-toggle span { margin-left:0.3125rem; }
body[data-layout] .notebook-main { --main-pad-top:1.375rem; --main-pad-x:1.5rem; padding:var(--main-pad-top) var(--main-pad-x) 1.75rem; }
body[data-layout] h1 { font-size:1.875rem; font-weight:750; letter-spacing:-.8px; }
.page-heading { margin-bottom:1rem; }
.page-heading p:last-child { font-size:0.8125rem; }
body[data-layout] .season-badge { display:none; }
.notebook-controls { position:relative; padding:0; margin:0 0 1rem; background:transparent; border:0; border-radius:0; }
.fidelity-controls { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem; min-height:2.5rem; }
.fidelity-controls>label { width:7.5rem; flex:0 0 auto; font-size:0.625rem; gap:0.25rem; font-weight:400; }
#comparisonWeeks { position:relative; align-self:end; }
#comparisonWeeks>summary { cursor:pointer; min-width:8.125rem; min-height:2.25rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font-size:0.75rem; padding:0.5625rem 0.75rem; }
#comparisonWeeks>.week-options { position:absolute; top:2.6875rem; left:0; z-index:35; width:27.5rem; max-width:calc(100vw - 2.1875rem); padding:0.875rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); box-shadow:0 0.5rem 1.5rem #0003; }
#comparisonWeeks .week-heading { margin-top:0; }
#comparisonWeeks .week-picker { grid-template-columns:repeat(9,minmax(0,1fr)); }
.position-segments { display:flex; flex:0 0 auto; border:1px solid var(--line); border-radius:var(--r-control); overflow:hidden; }
.position-segments button { color:var(--muted); background:transparent; padding:0.625rem 0.9375rem; border:0; border-right:1px solid var(--line); font-size:0.75rem; min-width:3rem; }
.position-segments button:last-child { border-right:0; }
body[data-layout] .filter-row { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem; }
.filter-row>label { flex:0 1 9.375rem; gap:0.3125rem; font-size:0.625rem; font-weight:400; }
.filter-row>label:first-child { flex-basis:6.875rem; }
body[data-layout] :is(input:not([type=checkbox]),select) { min-height:2.25rem; font-size:0.75rem; padding:0.4375rem 0.625rem; background:var(--surface-raised); }
.view-toolbar { margin:0; }
body[data-layout] :is(.filter-row,.bet-picker-filters,.view-toolbar):empty { display:none; }
/* Tracker has one title and its own compact season/week/sort controls. */
body[data-layout][data-active-view=tracker] :is(.page-heading,.notebook-controls) { display:none; }
body[data-layout][data-active-view=tracker] .view-toolbar:empty { display:none; }
body[data-active-view=tracker] .tracker-header #trackerTitle { font-size:1.625rem; font-weight:750; }
body[data-active-view=tracker] .tracker-status { margin-bottom:0.75rem; }
/* Footer: readable size at full muted colour; the helpline number never breaks. */
.notebook-footer { font-size:0.75rem; line-height:1.6; color:var(--muted); margin-top:1.5rem; }
.notebook-footer .responsible-gaming { font-size:0.75rem; }
.notebook-footer .responsible-gaming a { white-space:nowrap; }
/* UI-885: "Data & methodology" (moved here by layouts.js), a quiet link in the footer's colour. */
.notebook-footer .footer-links { margin:0.375rem 0 0; }
body[data-layout] .notebook-footer .footer-links .text-button { min-height:1.5rem; padding:0; color:inherit; font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:0.1875rem; cursor:pointer; }
body[data-layout] .notebook-footer .footer-links .text-button:hover { color:var(--accent); }
body[data-layout] :is(.research-sample,.bet-quote-freshness) { font-size:0.625rem; }

/* 01: defense navigation, broad weekly tables, and a docked slip. */

/* 02: a sports schedule above one selected game. */

/* 03: the matrix is a scan of percentages, with evidence beside it. */

/* 04: the review list fills the left rail; the matchup owns the canvas. */

/* 05: a player list, one research canvas, and the betslip. */
body[data-layout] .app-topbar { gap:2.5rem; }
body[data-active-view=bets] .fidelity-controls { flex-wrap:nowrap; gap:0.6875rem; }
body[data-layout][data-active-view=bets] .fidelity-controls>label { gap:0; font-size:0; }
body[data-active-view=bets] #positionSegments { order:4; }
body[data-active-view=bets] .position-segments button { min-height:2.4375rem; padding:0.5rem 0.8125rem; }
body[data-active-view=bets] .view-toolbar { position:static; }
body[data-active-view=bets] .bet-picker-note { display:none; }
.studio-layout { grid-template-columns:minmax(15rem,33%) minmax(0,1fr); gap:0.625rem; }
body[data-layout] .studio-roster-toggle { font-size:0.625rem; margin:0.5rem 0.625rem 0.8125rem; color:var(--muted); }
.studio-list { max-height:calc(100dvh - 14.125rem); }
body[data-layout] .studio-quote { margin:0 0.625rem 0.75rem; padding:1rem 1.125rem; gap:1.125rem; min-height:6.25rem; border-radius:var(--r-control); background:#1d1626; flex-wrap:nowrap; }
.studio-quote>div:first-child { min-width:6.5625rem; padding-right:1rem; border-right:1px solid var(--line); }
.studio-quote>div:not(.bet-price-pair)>strong { font-size:2.25rem; }
.studio-quote>.studio-line-value { margin-top:0; font-size:inherit; line-height:1.1; }
body[data-layout] .studio-quote>.studio-line-value>small { font-size:0.6875rem; font-weight:500; }
body[data-layout] .studio-quote .bet-price-pair { flex:1; min-width:0; }
body[data-layout] .studio-quote .bet-side { min-height:3.0625rem; flex-direction:row; padding:0.5rem; font-size:0.8125rem; }
body[data-layout] .studio-quote .bet-side strong { font-size:0.8125rem; }
body[data-layout] .studio-quote .bet-side[aria-pressed=true] { background:#242443; border-color:var(--accent); }
.profile-log-scroll { border-color:var(--line); }
body[data-layout] .profile-log tbody tr { --profile-row:#1c1525; }
body[data-layout] .profile-log tbody tr:nth-child(even) { --profile-row:#1d1726; }
body[data-layout] .profile-log :is(th,td) { border-color:var(--line); font-size:0.6875rem; }
/* Qualified: out-ranks players.css's .profile-log thead th colour. */
body[data-layout] .profile-log thead th { background:#1c1625; color:var(--muted); }
.profile-log .profile-groups th:nth-child(even) { background:#1c1625; color:var(--muted); }
body .profile-log .profile-matchup { box-shadow:1px 0 var(--line); }

/* The shared slip stays within the layout instead of covering research. */
body[data-layout] .betslip-drawer { width:var(--slip-width); box-shadow:none; }
.betslip-drawer .betslip-heading { position:static; padding:0 0 0.9375rem; margin:0; }
.betslip-drawer h3 { font-size:1.1875rem; }

.betslip-heading .close-button { font-size:1.1875rem; width:1.4375rem; flex-shrink:0; }
.betslip-drawer #betslipItems { margin:0.875rem 0; }
body .betslip-item { padding:0.9375rem 0.75rem; }
.betslip-item .betslip-line { padding:0.5625rem 0.625rem; }
.betslip-item .betslip-line b { font-size:1.4375rem; }
.betslip-drawer #betslipProfit { font-size:0.8125rem; }
.betslip-drawer .slip-options { border-top:1px solid var(--line); margin-top:1.0625rem; padding-top:0.625rem; font-size:0.625rem; color:var(--muted); }
.betslip-drawer .slip-options>summary { cursor:pointer; color:var(--muted); }
.betslip-drawer .slip-options[open]>summary { margin-bottom:0.625rem; }
.betslip-drawer .slip-options>button { margin:0.5rem 0; font-size:0.6875rem; }
body[data-layout] .betslip-drawer .slip-options>small { display:block; font-size:0.5625rem; line-height:1.6; margin-top:0.4375rem; }

@media(min-width:75.625em) {
  body[data-layout] .betslip-drawer { top:8.5rem; right:0.75rem; bottom:auto; width:calc(var(--slip-width) - 0.625rem); height:auto; max-height:calc(100dvh - 9.3125rem); padding:0.875rem 0.75rem; border:1px solid var(--line); border-radius:var(--r-card); }
  
  
  
}
@media(max-width:92.8125em) {
  body[data-layout] .app-topbar { gap:1.25rem; padding-left:1.125rem; padding-right:1.125rem; }
  .app-topbar .notebook-tabs { gap:0.5rem; }
  .app-topbar .notebook-tabs button { font-size:0.75rem; }
  body[data-layout] .app-brand { font-size:1.25rem; }
  body[data-layout] .studio-quote { gap:0.75rem; padding:0.8125rem 0.75rem; }
  .studio-quote>div:first-child { min-width:4.6875rem; padding-right:0.625rem; }
  
  
}
@media(max-width:75.55625em) {
  .studio-layout { grid-template-columns:17.5rem minmax(0,1fr); }
  body[data-layout] .betslip-drawer { top:var(--header-height); right:0; height:calc(100dvh - var(--header-height)); }
  
  
  
  
  
  
  
  
  
  
}
@media(max-width:66em) {
  body[data-layout] .app-topbar { height:var(--header-height); grid-template-columns:minmax(0,1fr) auto auto auto; grid-template-rows:3.375rem 3.125rem; gap:0 0.75rem; }
  body[data-layout] .app-brand { grid-column:1; font-size:1.125rem; }
  .betslip-toggle { grid-column:4; grid-row:1; }
  .app-topbar .notebook-tabs { grid-column:1/-1; gap:0.875rem; }
  .app-topbar .notebook-tabs button { font-size:0.8125rem; }
  
  
  
  
  .studio-layout { grid-template-columns:14.6875rem minmax(0,1fr); }
  body[data-layout] .studio-quote .bet-price-pair { flex-basis:auto; }
  
  
  
  
  
  
}
@media(max-width:48.125em) {
  body[data-layout] .app-topbar { padding:0 0.75rem; gap:0 0.5rem; }
  body[data-layout] .app-brand { font-size:1rem; gap:0.3125rem; }
  body[data-layout] .betslip-toggle { font-size:0.6875rem; padding:0.4375rem; }
  .app-topbar .notebook-tabs { gap:1px; }
  .app-topbar .notebook-tabs button { font-size:0.75rem; padding:0.1875rem 0.5625rem 0; }
  body[data-layout] .notebook-main { --main-pad-top:1.25rem; --main-pad-x:0.75rem; padding:var(--main-pad-top) var(--main-pad-x); }
  body[data-layout] h1 { font-size:1.6875rem; }
  body[data-layout] .betslip-drawer { top:0; height:100dvh; width:min(22.5rem,100%); }
  body[data-layout] .filter-row { gap:0.625rem; }
  .filter-row>label { flex:1 1 7.5rem; }
  #comparisonWeeks>.week-options { position:fixed; left:0.75rem; right:0.75rem; top:auto; width:auto; max-width:none; margin-top:0.4375rem; }
  body[data-active-view=bets] .notebook-main { padding-left:0.625rem; padding-right:0.625rem; }
  body[data-active-view=bets] .fidelity-controls { flex-wrap:wrap; gap:0.5rem; }
  body[data-active-view=bets] .position-segments { flex:1 1 11.5625rem; }
  body[data-active-view=bets] .position-segments button { flex:1; min-width:1.9375rem; padding-left:0.4375rem; padding-right:0.4375rem; }
  .studio-layout { display:block; }
  .studio-list { display:flex; max-height:none; overflow-x:auto; padding:0 2px 0.375rem; }
  body[data-layout] .studio-roster-toggle { margin-bottom:0.625rem; }
  body[data-layout] .studio-quote { margin-left:0.625rem; margin-right:0.625rem; }
  .studio-quote { display:grid; grid-template-columns:5.6875rem minmax(0,1fr); }
  .studio-quote>div:first-child { min-width:0; width:auto; }
  body[data-layout] .studio-quote .bet-side { font-size:0.75rem; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}
@media(max-width:28.875em) {
  body[data-layout] .app-brand { font-size:0.875rem; }
  .app-topbar .notebook-tabs button { font-size:0.6875rem; padding-left:0.4375rem; padding-right:0.4375rem; }
  body[data-layout] .studio-quote { padding:0.6875rem; gap:0.625rem; }
  .studio-quote>div:first-child { min-width:4rem; }
  body[data-layout] .studio-quote .bet-side { font-size:0.6875rem; gap:0.375rem; }
}

/* Separate, finger-sized betslip footer controls. */
.betslip-drawer .slip-options { margin-top:1.125rem; padding-top:0.5rem; padding-bottom:0.75rem; font-size:0.75rem; }
.betslip-drawer .slip-options>summary { min-height:2.75rem; padding:0.75rem 0.625rem; box-sizing:border-box; border-radius:var(--r-control); color:var(--ink); }
.betslip-drawer .slip-options>summary:hover { background:var(--surface-2,#2f253e); }
.betslip-drawer .slip-options>summary:focus-visible { outline:2px solid var(--cyan); outline-offset:-2px; }
body[data-layout] .betslip-drawer .slip-tracker-link { margin-top:0.5rem; min-height:2.75rem; display:flex; align-items:center; justify-content:center; }

/* Tabs that draw their own title keep the page h1 for screen readers only (Today, Heatmap and
   Defense boards do the same in their own sheets). Fantasy and My Picks render their own h1;
   the Player page's h1 is #playerPageName, so the generic "Player" heading goes entirely. */
html body[data-layout]:is([data-active-view=bets],[data-active-view=percentage],[data-active-view=lab],[data-active-view=usage],[data-active-view=teams]) .page-heading {
  display:block; position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html body[data-active-view=player] .notebook-main > .page-heading { display:none; }