/* ═══════════════════════════════════════════════════════════════
   Keep Climbing v23.5 — landscape phones, foldables & dual screens (AI-B)
   Loaded after app.css. Three layouts are added; everything else is untouched:
   1) RAIL MODE — a slim side rail replaces the bottom tab bar
        · phones in landscape (short screens: height ≤ 500px, up to 1100px wide)
          e.g. 740×360, 844×390, 932×430
        · foldables open / small tablets (600–860px wide, taller than 500px)
          e.g. 673×841 inner screen, 717×512 open-landscape
      → nav icons on the left (safe-area aware), compact sticky header with the
        sub-account switcher, no fixed bar at the bottom (nothing hides behind it)
   2) TWO-PANE content for 600–860px wide screens (grid2 / grid3 come back)
   3) DUAL SCREEN (horizontal-viewport-segments: 2): the nav fills the left
      screen, the page the right one — nothing ever sits under the hinge
   Narrow cover screens (344–360px) keep the phone layout, tightened.
   ═══════════════════════════════════════════════════════════════ */

:root { --rail-c: 76px; }

/* ─── 1) RAIL MODE ─── */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1100px), (min-width: 600px) and (max-width: 860px) and (min-height: 501px) {
  .shell { grid-template-columns: calc(var(--rail-c) + var(--safe-l)) minmax(0, 1fr); }
  .rail { display: flex; position: sticky; top: 0; height: 100vh; height: 100dvh; align-items: stretch; gap: 4px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none;
    padding: calc(8px + var(--safe-t)) 8px calc(8px + var(--safe-b)) calc(8px + var(--safe-l)); }
  .rail::-webkit-scrollbar { display: none; }
  .rail .brand { justify-content: center; padding: 2px 0 6px; }
  .rail .brand-word, .rail > .switcher, .rail > .btn.ghost { display: none; }
  /* New post → one icon button */
  .rail > .btn:not(.ghost) { width: 52px; min-width: 52px; height: 44px; min-height: 44px; margin: 2px auto 4px; padding: 0; font-size: 0; gap: 0; border-radius: 14px; }
  .rail > .btn:not(.ghost) svg { width: 22px; height: 22px; margin: 0; }
  .rail .nav { margin-top: 2px; overflow: visible; flex: 0 0 auto; gap: 2px; }
  .rail .nav-label { height: 1px; margin: 6px 10px; padding: 0; background: var(--rule); font-size: 0; overflow: hidden; }
  .rail .nav a, .rail .nav .ng-h { justify-content: center; padding: 0; min-height: 44px; width: 56px; margin: 0 auto; border-radius: 12px; gap: 0; }
  .rail .nav a svg, .rail .nav .ng-h svg { width: 21px; height: 21px; opacity: .85; }
  .rail .nav a > span, .rail .nav .ng-h > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* still read by screen readers */
  .rail .nav a.on::before { left: -8px; }
  .rail .nav .ng-h .cv, .rail .nav .ng-k { display: none; }
  .rail .nav .ng.has-on > .ng-h { background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); }
  .rail .nav .ng.has-on > .ng-h::before { content: ''; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-2); }
  .rail .nav .ng-h { position: relative; }
  .rail-foot { margin-top: auto; padding-top: 8px; justify-content: center; flex-direction: column; gap: 6px; }
  .rail-foot .who, .rail-foot > .btn { display: none; }
  .rail-foot > .acct-btn { flex: none; width: 52px; justify-content: center; padding: 4px; }
  /* compact header with the switcher */
  .topbar { display: flex; position: sticky; top: 0; z-index: 20; align-items: center; gap: 8px; min-height: 0;
    padding: calc(6px + var(--safe-t)) calc(16px + var(--safe-r)) 6px 16px; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
  .topbar .tb-home { display: none; }
  .topbar .switcher { flex: 0 1 380px; min-width: 0; min-height: 40px; padding: 4px 8px; }
  .topbar .switcher .sw-img, .topbar .sw-img { width: 30px; height: 30px; }
  .topbar > .btn.icon[aria-haspopup="menu"] { display: none; }   /* the account menu lives at the foot of the rail */
  /* no bottom bar → nothing to pad around it */
  .tabbar { display: none !important; }
  .fab { display: none; }
  .page { padding-left: var(--gutter); padding-right: calc(var(--gutter) + var(--safe-r)); padding-bottom: calc(32px + var(--safe-b)); }
  #toasts { bottom: calc(14px + var(--safe-b)); }
  .sheet.more .sheet-body { padding-bottom: calc(18px + var(--safe-b)); }
}
/* landscape phones: everything vertical is precious */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1100px) {
  :root { --gutter: 18px; --topbar-h: 50px; }
  .page { padding-top: 14px; }
  .masthead { padding-bottom: 10px; margin-bottom: 14px; }
  .masthead h1 { font-size: clamp(24px, 4.2vw, 34px); }
  .dek { font-size: 14.5px; }
  .rail .brand { display: none; }   /* the switcher row already says where you are */
  .rail .nav a, .rail .nav .ng-h { min-height: 40px; }
  .hubtabs { margin-bottom: 12px; }
  /* sheets & modals: capped to the visible height, scroll inside, clear of the notch */
  .sheet { top: 0; bottom: 0; height: auto; max-height: 100dvh; border-radius: 0; padding-left: var(--safe-l); padding-right: var(--safe-r); }
  .sheet:not(.narrow):not(.more) { width: min(100vw, 960px); }
  .sheet.narrow, .sheet.more { left: auto; right: 0; width: min(560px, 100vw); border-radius: 18px 0 0 18px; transform: translateX(104%); }
  .sheet.narrow.show, .sheet.more.show { transform: none; }
  .sheet-head { padding-top: calc(10px + var(--safe-t)); padding-bottom: 10px; }
  .sheet-head h3 { font-size: 20px; }
  .sheet-body { padding-top: 14px; padding-bottom: 14px; }
  .sheet-foot { padding-top: 10px; padding-bottom: calc(10px + var(--safe-b)); }
  .modal { max-height: calc(100dvh - 20px - var(--safe-t) - var(--safe-b)); padding: 18px 20px; width: min(640px, calc(100vw - 32px - var(--safe-l) - var(--safe-r))); }
  .modal.wide { width: min(860px, calc(100vw - 32px - var(--safe-l) - var(--safe-r))); }
  .pop { max-height: calc(100dvh - 24px); overflow-y: auto; }
  .chat { min-height: 0; }
  .celebrate h2 { font-size: 28px; }
  .login-art { min-height: 0 !important; }
}

/* ─── 2) two-pane content on 600–860px wide screens (foldables open, small tablets) ─── */
@media (min-width: 640px) and (max-width: 860px) and (min-height: 501px) {
  .grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
  .fig { border-bottom: 0; border-right: 0 !important; padding: 14px 10px !important; }
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
  .masthead > .row { width: auto; }
  .masthead > .btn { width: auto; }
}
@media (max-height: 500px) and (orientation: landscape) and (min-width: 700px) and (max-width: 1100px) {
  .grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .masthead > .row { width: auto; }
  .masthead > .btn { width: auto; }
}

/* ─── narrow cover screens (Galaxy Z Fold cover 344px, 360px phones) ─── */
@media (max-width: 370px) {
  :root { --gutter: 14px; }
  .topbar { gap: 6px; }
  .topbar .sw-sub { display: none; }
  .tabbar a, .tabbar button { font-size: 11px; }
  .hubtabs a { padding: 7px 11px; font-size: 13px; }
  .masthead h1 { font-size: clamp(26px, 8vw, 32px); }
  .btn { padding-left: 14px; padding-right: 14px; }
  .modal { padding: 20px 16px; width: calc(100vw - 20px); }
}

/* ─── 3) dual screen / spanning a hinge ─── */
@media (horizontal-viewport-segments: 2) {
  .shell { grid-template-columns: env(viewport-segment-width 0 0, var(--rail)) minmax(0, 1fr); column-gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px)); }
  .rail { border-right: 0; }
  .modal { left: calc(env(viewport-segment-left 1 0, 50vw) + env(viewport-segment-width 1 0, 50vw) / 2); }
  .sheet { width: env(viewport-segment-width 1 0, 100vw) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rail, .sheet, .modal, .page { transition: none !important; animation: none !important; }
}