/* =====================================================================
   Luka Good Wellness — wide layout (www/css/luka-wide.css, 30 Oct 2026)
   ---------------------------------------------------------------------
   Nik, 30 Oct: "maximise the space used for width of iPad and on PC/laptops with wide screens".
   The app is a 480 px phone column (luka.css .app). From 760 px (iPad portrait: 768/820/834/1024) this sheet gives the
   rail, the wider column, grid cards and dialog sheets; from 900 px (iPad landscape, laptops, PC) Today goes two-column.
   31 Oct 2026: the first cut started everything at 900 px, which left an 11" iPad in portrait (834 px) on the phone layout.
   This sheet:
     · widens .app to 1120 px and turns the bottom tab bar into a left rail inside that column;
     · lays Today out as two columns (Today card left, flow sequence right), Profile/Plan/Library cards in two
       or four columns, milestones in six;
     · centres sheets, chat, the done screen and the player as dialogs instead of full-height phone panes.
   Nothing here fires under 760 px, so phones are untouched. CSS only — no script, no HTML.
   Remove by deleting this file and its <link> in app.html.
   ===================================================================== */
@media (min-width: 760px){
  :root{ --wide-w: 1120px; --rail-w: 96px; }
  .app{ max-width: var(--wide-w); padding-left: var(--rail-w); }
  .wrap{ padding-left: 32px; padding-right: 32px; }
  .topbar{ padding-left: 32px; padding-right: 32px; }
  .hello{ font-size: 32px; }

  /* ---- tab bar → left rail, pinned to the app column's left edge ---- */
  nav.tabbar{
    left: max(0px, calc(50% - var(--wide-w) / 2)); top: 0; bottom: 0; transform: none;
    width: var(--rail-w); max-width: none; height: auto;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px;
    padding: calc(22px + env(safe-area-inset-top)) 8px 22px; border-top: 0; border-right: 1px solid var(--line);
  }
  nav.tabbar button{ flex: none; height: 66px; padding: 8px 4px 6px; border-radius: 16px; justify-content: center; }
  nav.tabbar button .nic{ margin: 0 auto 4px; }
  .screen{ padding-bottom: 60px; }
  .fab{ right: max(18px, calc(50% - var(--wide-w) / 2 + 24px)); bottom: 28px; }
  body #fbFab{ left: max(28px, calc(50% - var(--wide-w) / 2 + 28px)); right: auto; bottom: 28px; }   /* sits at the foot of the rail, off the content; ui-feedback injects its own #fbFab rule later, body# wins */
  .toast{ bottom: 40px; }

  /* ---- Today (tablet portrait): one column, bigger card; two columns from 900 px below ---- */
  .genCard{ padding: 28px 28px 24px; }
  .genCard h2{ font-size: 28px; }
  .quickrow{ grid-template-columns: repeat(4, 1fr); padding: 0 32px; }
  .quick.wide{ grid-column: 1 / -1; }
  .gamesrow{ margin-left: 32px; margin-right: 32px; }

  /* ---- Plan / Library / LukaME / Profile ---- */
  #planList{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 0 12px; }
  #planList > *{ min-width: 0; }
  #clsList{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 0 32px; }
  #clsList > :not(.clscard){ grid-column: 1 / -1; }
  #clsList > .wrap{ padding-left: 0; padding-right: 0; }
  .clscard{ margin: 0 0 10px; width: 100%; }
  .libgrid{ grid-template-columns: repeat(4, 1fr); padding: 0 32px; }
  .filters{ padding-left: 32px; padding-right: 32px; }
  .mecard{ margin-left: 32px; margin-right: 32px; }
  .milegrid{ grid-template-columns: repeat(6, 1fr); padding: 0 32px; }
  .statrow{ padding: 0 32px; }
  /* Profile and LukaME: the screen itself carries the side padding, so cards and rows sit on one grid */
  #sc-prof.on, #sc-me.on{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-content: start; padding-left: 32px; padding-right: 32px; }
  #sc-prof > *, #sc-me > *{ grid-column: 1 / -1; min-width: 0; }
  /* rows carry their side padding → the screen's; cards keep their inner padding (31 Oct: zeroing it put text on the border) */
  #sc-prof > .wrap, #sc-me > .wrap, #sc-prof > .statrow, #sc-me > .milegrid, #sc-prof > .verifybar{ padding-left: 0; padding-right: 0; }
  #sc-me > .mecard, #sc-prof > .profcard, #sc-me > .profcard, #sc-me > #meGrow, #sc-me > .merecap, #sc-me > .stampsrow, #sc-prof > .verifybar{ margin-left: 0; margin-right: 0; }
  #sc-prof > .profcard{ grid-column: auto; }
  #sc-prof > #acctCard, #sc-prof > #buildCard, #sc-prof > #acctCard ~ .profcard{ grid-column: 1 / -1; }   /* Account, the gremlin and everything after Account (General…) span both columns */
  #buildCard .gbprev{ width: 180px; height: 180px; }
  #buildCard .gbprev svg{ width: 164px; height: 164px; }
  .disc{ grid-column: 1 / -1; }

  /* ---- overlays: dialogs, not phone panes ---- */
  .sheetbg{ align-items: center; }
  .sheet{ max-width: 580px; border-radius: 26px; max-height: calc(100dvh - 64px); }
  .done{ max-width: 680px; border-radius: 32px; inset: 32px auto; left: 50%; transform: translateX(-50%); width: 680px; top: 50%; transform: translate(-50%, -50%); height: auto; max-height: calc(100dvh - 64px); }
  .chatov{ max-width: 760px; }
  /* 1 Nov 2026 (Nik, 18" 16:10 laptop, Chrome): a 960 px player left Today showing either side — "a weird pop-up
     view rather than immersive". The player now fills the viewport; only its content (stage copy, controls) is
     capped at 960 px and centred, so the pose gradient, vignette and frosted control band run edge to edge. */
  .player{ max-width: none; }
  .cliplayer{ padding-left: max(30px, calc(50% - 480px)); padding-right: max(30px, calc(50% - 480px)); }
  .pctrl .segbar, .pctrl .pbtns, .pctrl .pnext{ max-width: 960px; margin-left: auto; margin-right: auto; }
  .pctrl .segbar{ margin-bottom: 14px; }
  .cliplayer .cue{ max-width: 560px; font-size: 16px; }
  .cliplayer .scriptline{ max-width: 560px; }
  .cliplayer h2{ font-size: 34px; }
  .login{ max-width: 520px; }
}
/* ---- Today two-column: card left, sequence right, the rest full width ---- */
@media (min-width: 900px){
  #sc-today.on{ display: grid; grid-template-columns: 5fr 7fr; column-gap: 8px; align-content: start; }
  #sc-today > *{ grid-column: 1 / -1; min-width: 0; }
  #sc-today > .wrap:has(#gTitle){ grid-column: 1; grid-row: 1 / span 3; }
  #sc-today > .wrap:has(#seqTitle), #sc-today > #strip{ grid-column: 2; }
  #sc-today > .wrap:has(#seqTitle){ padding-top: 60px; }
}
@media (min-width: 1400px){
  :root{ --wide-w: 1280px; }
  .libgrid{ grid-template-columns: repeat(5, 1fr); }
}