/* large.css: the iPad and desktop layout. Loaded LAST. Everything is inside one query so phones
   (anything narrower than 744 px or shorter than 600 px, iPhone landscape included) never see a rule here.
   Bands: 744-1023 icon rail (iPad portrait) | 1024-1365 full sidebar | 1366+ wide sidebar, centered content. */
@media (min-width:744px) and (min-height:600px){
  :root{--side-w:84px;--gap:20px;--focus:var(--gold)}

  /* ---------- shell: a pinned sidebar, content centered in the rest ---------- */
  .shell{grid-template-columns:var(--side-w) minmax(0,1fr)}
  aside{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
  aside::-webkit-scrollbar{display:none}
  body.plus:not(.classic) aside{background-size:1px 100%,100% 100vh}
  .shell main{padding:22px clamp(20px,3vw,40px) 36px}
  .view,.app-foot{max-width:1240px;margin-left:auto;margin-right:auto}
  .app-foot{padding-left:0;padding-right:0}

  /* focus ring everywhere the keyboard goes */
  :where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
  nav a:focus-visible{outline-offset:-2px}
  .switch:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

  /* sidebar labels never wrap; every nav target is at least 44 px */
  nav a{min-height:44px;white-space:nowrap}
  nav a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  nav a svg{flex:none;width:18px;height:18px}
  .nav-div{white-space:nowrap}
  .side-foot{margin-bottom:0}
  .chip .nm,.chip .ac{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chip>div:last-child{min-width:0}

  /* top page bar: title, as-of, live pill, Send It Ahead stay on one tidy row */
  .topbar{margin-bottom:20px;gap:12px 14px}
  .topbar h1{font-size:22px;white-space:nowrap}
  .topbar .btn-gold{min-height:44px;white-space:nowrap}
  body.plus:not(.classic) .view>.topbar .asof{flex:0 1 auto}

  /* modals become centered dialogs, never bottom sheets */
  .modal-wrap{padding:32px;align-items:center;justify-content:center}
  .modal-wrap.sheet{align-items:center;animation:none}
  .modal,.modal-wrap.sheet .modal{max-width:520px;width:100%;max-height:min(88vh,820px);border-radius:18px;animation:lg-pop .22s ease-out backwards}
  .sheet-grab{display:none}
  .modal-head .x{min-width:44px;min-height:44px}
  @keyframes lg-pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
}

/* ---------- 744-1023: iPad portrait icon rail ---------- */
@media (min-width:744px) and (max-width:1023px) and (min-height:600px){
  aside{padding:14px 6px 0;align-items:stretch}
  aside .brand{justify-content:center;padding:2px 0 14px;margin-bottom:8px}
  aside .brand .wm{display:none}
  aside .brand svg{width:30px;height:auto}
  nav{display:flex;flex-direction:column;gap:4px}
  nav a{flex-direction:column;justify-content:center;gap:3px;padding:8px 0;text-align:center;border-radius:12px}
  nav a svg{width:20px;height:20px}
  nav a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  nav a::after{content:attr(data-short);font-size:10px;line-height:1.1;font-weight:600;letter-spacing:0;max-width:none;overflow:visible}
  nav a.on::before{display:none}
  aside nav .nav-div{display:block;font-size:0;line-height:0;color:transparent;height:1px;background:var(--hair-2);border:0;margin:6px 12px;padding:0;overflow:hidden}
  nav a{padding:8px 0}
  nav a::after{font-size:9.5px;letter-spacing:-.01em}
  .switch,.switch:focus-visible{width:60px;height:34px;border-radius:17px}
  .switch .knob{width:26px;height:26px;top:3px;left:3px}
  [data-theme="dark"] .switch .knob{left:31px}
  .switch .ic{width:13px;height:13px}
  .topbar .live{display:none}
  .side-foot{margin-left:-6px;margin-right:-6px;padding:12px 6px 14px;align-items:center;gap:12px}
  .mode{padding:0}
  .mode .m-lbl{display:none}
  .chip{padding:0;justify-content:center}
  .chip>div:last-child{display:none}
}

/* ---------- 1024-1365: full sidebar ---------- */
@media (min-width:1024px) and (max-width:1365px) and (min-height:600px){
  :root{--side-w:246px}
  aside{padding:18px 14px 0}
  nav a{font-size:13px;padding:8px 9px;gap:9px;letter-spacing:-.005em}
}

/* ---------- 1366+: wide sidebar ---------- */
@media (min-width:1366px) and (min-height:600px){
  :root{--side-w:248px;--gap:24px}
  aside{padding:20px 14px 0}
  nav a{font-size:13px;padding:8px 10px;gap:9px}
  .content{grid-template-columns:minmax(0,1fr) 320px;gap:var(--gap)}
}

/* the four KPI tiles stay 2 x 2 until the column is wide enough to hold a one-line label */
@media (min-width:1420px) and (max-width:1567px) and (min-height:600px){
  body.plus:not(.classic) .col-main>.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- sign-in: the full-bleed phone art becomes a centered ~440 px card on iPad and desktop ---------- */
@media (min-width:744px) and (min-height:600px){
  .auth{--u:min(1cqw,9px)}
  .auth .ax-big{font-size:calc(22*var(--u))}
  .auth .ax-hdr .ax-big{font-size:calc(15*var(--u))}
  .auth.ax-welcome .ax-book{top:calc(var(--top) + 5.5% + 30px + 20*var(--u));
    width:min(var(--bw),210px,max(56px,calc((100cqh - var(--top) - 5.5cqh - 30px - 20*var(--u) - var(--bot) - 14px - var(--dock) - 14px) / 1.6)))}
  .auth.ax-form .ax-book{top:calc(var(--top) + 54px + 22px + 13*var(--u))}
  .auth .ax-dock{left:0;right:0;margin:0 auto;width:min(440px,calc(100% - 48px));bottom:clamp(24px,7cqh,72px)}
  .auth .ax-sheet{left:0;right:0;margin:0 auto;width:min(460px,calc(100% - 32px));bottom:clamp(16px,5cqh,56px);border-radius:30px;
    border:1px solid var(--glass-line);box-shadow:0 30px 80px -20px var(--shadow)}
}
@media (min-width:744px) and (min-height:600px){
  .auth.ax-welcome.w0{--dock:340px}.auth.ax-welcome.w1{--dock:400px}.auth.ax-welcome.w2{--dock:460px}
}
/* Desktop welcome (2026-10-31): big book on the left, title and buttons on the right */
@media (min-width:1000px) and (min-height:600px){
  .auth.ax-welcome{--bh:min(64cqh,38cqw,600px)}
  .auth.ax-welcome .ax-book{left:29%;top:calc(50% - var(--bh)/2);height:var(--bh);width:auto}
  .auth.ax-welcome .ax-glow{top:50%;left:29%;width:70%}
  .auth.ax-welcome .ax-over{left:50%;right:4%;top:calc(50% - 270px)}
  .auth.ax-welcome .ax-big{font-size:min(10.5cqw,200px)}
  .auth.ax-welcome .ax-dock{left:calc(73% - 220px);right:auto;margin:0;bottom:auto;top:calc(50% - 30px)}
}

/* ---------- labels never wrap: buttons, chips, eyebrows, card titles ---------- */
@media (min-width:744px) and (min-height:600px){
  html body :is(.btn,button,.chip,.pill,.lbl),html body.plus:not(.classic) :is(.btn,button,.chip,.pill,.lbl,.eyebrow){white-space:nowrap;text-wrap:nowrap}
  .sv-rail-act{flex-direction:column;align-items:stretch}
  .sv-rail-act .btn{flex:none;width:100%;display:flex;align-items:center;justify-content:center;text-align:center}
  #witnessBand .w-hd{width:auto;max-width:48%;min-width:216px}
  #witnessBand .w-hd .lbl{white-space:nowrap;text-wrap:nowrap}
  #witnessBand .w-dot{display:none}
  #witnessBand .w-p2{display:block}
}

/* tile rows stay balanced and wide enough for one-line labels */
@media (min-width:744px) and (min-height:600px){
  .sb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px) and (max-width:1279px) and (min-height:600px){
  .page-extras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-extras>.card:last-child:nth-child(odd){grid-column:1/-1}
}

/* the second phrase of the Cloud of Witnesses subtitle keeps the subtitle's own color at every size (phones included) */
#witnessBand .w-p2{color:inherit!important;font:inherit;opacity:1;text-shadow:none}

/* More (Option 1 Hybrid) and infographic layout for iPad and desktop */
@media (min-width:744px) and (min-height:600px){
  .mo-page{gap:18px}
  .mo-mast{padding:30px 32px}
  .mo-cols{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .mo-list{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mo-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mo-chips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ig-giant{font-size:72px}
}
@media (min-width:1100px) and (min-height:600px){
  .mo-cols{grid-template-columns:1.4fr 1fr 1fr}
  .mo-list{grid-column:auto;grid-template-columns:1fr}
  .mo-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1560px) and (min-height:600px){
  .mo-chips{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* fix round 1: desktop masthead matches frame-H */
@media (min-width:744px) and (min-height:600px){
  .mo-page .mo-mast{min-height:300px;padding:38px 48px;border-radius:24px;
    background:linear-gradient(90deg,rgba(16,26,52,.88) 0%,rgba(16,26,52,.66) 50%,rgba(16,26,52,.38) 80%,rgba(16,26,52,.2) 100%),url(../assets/x/app-premium-sky-day-wide.webp) center 64%/cover #15203a}
  [data-theme="dark"] .mo-page .mo-mast{background:linear-gradient(90deg,rgba(8,13,28,.86) 0%,rgba(8,13,28,.6) 50%,rgba(8,13,28,.3) 80%,rgba(8,13,28,.15) 100%),url(../assets/x/app-premium-sky-night-wide.webp) center 40%/cover #0e1424}
  html body .mo-page.mo-page .mo-mast h2{font-size:clamp(44px,5vw,64px);margin:12px 0 22px}
  .mo-st b{font-size:36px}
}