/* =====================================================================
   Foldables. iPhone Duo (Apple HIG) and Android foldables (Material 3).
   html[data-device]: phone | fold-closed | fold-open | fold-half
   html[data-rail]:   ios | android | "" (controls on the side or not)
   ===================================================================== */
:root { --sw: 390px; --sh: 844px; }
html[data-os="ios"][data-device="fold-closed"] { --sw: 500px; --sh: 620px; }      /* outer display: wider and shorter */
html[data-os="android"][data-device="fold-closed"] { --sw: 360px; --sh: 800px; }  /* cover screen: narrow phone */
html[data-device="fold-open"], html[data-device="fold-half"] { --sw: 920px; --sh: 720px; }

.device { width: calc(var(--sw) + 20px); height: calc(var(--sh) + 20px); }
.app { width: var(--sw); height: var(--sh); }
.device-wrap { width: calc((var(--sw) + 20px) * var(--s, 1)); height: calc((var(--sh) + 20px) * var(--s, 1)); }
html[data-device^="fold"] .device { border-radius: 40px; }
html[data-device^="fold"] .app { border-radius: 30px; }
@media (max-width: 860px) {
  .device, .app { width: 100%; height: 100%; border-radius: 0; }
  .device-wrap { width: 100%; height: 100dvh; }
}

/* side panel switch */
.devices { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--fill); padding: 4px; border-radius: 16px; }
.devices button { border-radius: 12px; padding: 9px 6px; font-weight: 700; font-size: 14px; color: var(--label); }
.devices button.on { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); color: var(--tint); }

/* ---------- iPhone Duo: island, status, Back and tab bar down the trailing edge ---------- */
:root { --bez: 10px; }
@media (max-width: 860px) { :root { --bez: 0px; } }
.sb-duo { display: none; }
html[data-rail="ios"] .statusbar { left: auto; right: 0; top: 0; width: 88px; height: auto; flex-direction: column; justify-content: flex-start; align-items: center; gap: 8px; padding: 98px 0 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #000; z-index: 31; }
html[data-rail="ios"] .app.photo-top .statusbar, html[data-rail="ios"] .app.photo-top.scrolled .statusbar, html[data-rail="ios"] .app.dark-app .statusbar { color: #000; background: none; }
html[data-rail="ios"][data-device="fold-open"] .statusbar, html[data-rail="ios"][data-device="fold-half"] .statusbar { padding-top: 22px; }
html[data-rail="ios"] .statusbar .sb-time { font-size: 17px; padding: 0; }
html[data-rail="ios"] .sb-ios { display: none; }
html[data-rail="ios"] .sb-duo { display: block; }
html[data-rail="ios"] .sb-duo svg { width: 38px; height: 38px; display: block; fill: currentColor; }
/* outer camera: a tall pill in the top trailing corner */
html[data-rail="ios"][data-device="fold-closed"] .island { left: auto; right: calc(var(--bez) + 24px); top: calc(var(--bez) + 12px); margin-left: 0; width: 40px; height: 66px; border-radius: 22px; }
html[data-rail="ios"][data-device="fold-closed"] .island::after { right: 50%; margin-right: -6px; top: 22px; width: 12px; height: 12px; margin-top: -6px; }
html[data-device="fold-open"] .island, html[data-device="fold-half"] .island { display: none; }  /* inner camera hides behind the display */

/* Back sits at the top of the vertical axis, under the status glyph */
html[data-rail="ios"] .nav .nav-btn[data-act="back"] { position: fixed; z-index: 32; right: calc(var(--bez) + 22px); top: calc(var(--bez) + 196px); width: 44px; height: 44px; background: rgba(255,255,255,.78); color: #000; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.8), 0 6px 16px -6px rgba(0,0,0,.3); }
html[data-rail="ios"][data-device="fold-open"] .nav .nav-btn[data-act="back"], html[data-rail="ios"][data-device="fold-half"] .nav .nav-btn[data-act="back"] { top: calc(var(--bez) + 120px); }
html[data-rail="ios"] .nav { min-height: 40px; padding-left: 16px; }
html[data-rail="ios"] .nav-title { margin-right: auto; }
html[data-rail="ios"] .photo-nav .nav-title { display: none; }

/* tab bar below Back */
html[data-rail="ios"] .tabbar { left: auto; right: 10px; bottom: auto; top: 252px; width: 68px; grid-template-columns: 1fr !important; gap: 4px; padding: 6px; border-radius: 34px; }
html[data-rail="ios"][data-device="fold-open"] .tabbar, html[data-rail="ios"][data-device="fold-half"] .tabbar { top: 176px; }
html[data-rail="ios"] .tab { min-height: 56px; border-radius: 26px; padding: 6px 0; }
html[data-rail="ios"] .tab-badge { top: 2px; margin-left: 4px; }
html[data-rail="ios"][data-device="fold-closed"] .tab span { display: none; }
html[data-rail="ios"][data-device="fold-closed"] .tab { min-height: 48px; }

/* ---------- Android foldable, open: navigation rail ---------- */
html[data-rail="android"] .statusbar, html[data-rail="android"] .app.photo-top .statusbar, html[data-rail="android"] .app.photo-top:not(.scrolled) .statusbar { background: var(--m-surface); color: #1A1C20; }
html[data-rail="android"] .tabbar { left: 0; right: auto; top: 44px; bottom: 0; width: 84px; grid-template-columns: 1fr !important; align-content: start; gap: 10px; padding: 20px 0; background: var(--m-container); }
html[data-rail="android"] .tab { min-height: 64px; }
html[data-rail="android"] .tab svg { width: 56px; padding: 4px 16px; }
html[data-rail="android"] .app::after { bottom: 8px; }

/* ---------- content area beside the rail ---------- */
html[data-rail] .view { position: absolute; top: 0; bottom: 0; left: 84px; right: 0; padding-top: 14px; }
html[data-rail="ios"] .view { left: 0; right: 88px; }
html[data-rail] .app.photo-top .view { padding-top: 0; }
html[data-rail="android"] .view, html[data-rail="android"] .app.photo-top .view { top: 44px; left: 84px; padding-top: 0; }
html[data-rail] .screen { padding-bottom: 28px; }
html[data-rail] .hero .hero-bar { padding-top: 18px; }
html[data-rail] .photo-nav { top: 14px; }
html[data-rail] .composer { bottom: 0; }
html[data-rail] .toast { left: 100px; }
html[data-rail="ios"] .toast { left: 12px; right: 100px; }
html[data-rail="android"] .title-row .sq-btn { bottom: 24px; }
html[data-rail] .sheet { left: 96px; }
html[data-rail="ios"] .sheet { left: 8px; right: 96px; }
html[data-rail="android"] .sheet { left: 84px; }

/* ---------- open and half folded: list on the left, detail on the right, split at the hinge ---------- */
.view2 { display: none; }
.app.split .view2:not([hidden]) { display: block; position: absolute; top: 0; bottom: 0; left: calc(50% + 12px); right: 0; padding-top: 14px; background: var(--sys-bg); }
html[data-rail="android"] .app.split .view2:not([hidden]) { top: 44px; padding-top: 0; }
.app.split .view { right: calc(50% + 12px); }
html[data-rail="ios"] .app.split .view2:not([hidden]) { right: 88px; }
html[data-rail="ios"] .app.split .sheet { right: 96px; }
.app.split .view .row.sel { background: rgba(31, 58, 104, .09); }
.app.split .view .row.sel + .row::before, .app.split .view .row.sel::before { opacity: 0; }
.app.split .view .space-card.sel, .app.split .view .tile.sel:not(.t-photo):not(.t-navy) { background: #E9EDF5; }
html[data-os="android"] .app.split .view .row.sel { background: var(--m-secondary); }
.app.split .toast { left: calc(50% + 24px); }
.app.split .sheet { left: calc(50% + 12px); right: 8px; }
html[data-os="android"] .app.split .sheet { right: 0; }
.app.split .title-row .sq-btn { right: calc(50% + 28px); }

.hinge { display: none; }
html[data-device="fold-open"] .hinge, html[data-device="fold-half"] .hinge { display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: 24px; margin-left: -12px; z-index: 36; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0,0,0,.05) 50%, transparent); }
html[data-device="fold-half"] .hinge { width: 40px; margin-left: -20px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.18) 50%, transparent); }
html[data-device="fold-half"] .app.split .view { right: calc(50% + 20px); }
html[data-device="fold-half"] .app.split .view2:not([hidden]) { left: calc(50% + 20px); }
html[data-device="fold-half"] .app.split .sheet { left: calc(50% + 20px); }
html[data-device="fold-half"] .device { box-shadow: 0 40px 80px -30px rgba(0,0,0,.35), inset 0 0 0 0 transparent; background: linear-gradient(90deg, #0B1220 49%, #1a2233 50%, #0B1220 51%); }

/* empty detail pane */
.pane-empty { height: 100%; min-height: 520px; display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; padding: 30px; color: var(--label-2); }
.pane-empty .pe-ico { width: 64px; height: 64px; border-radius: 20px; background: var(--fill); color: var(--label-2); display: grid; place-items: center; margin-bottom: 6px; }
.pane-empty .pe-ico svg { width: 28px; height: 28px; }
.pane-empty strong { color: var(--label); font-size: 18px; }
.pane-empty span { font-size: 15px; max-width: 260px; }

/* keep the device in view while the side panel scrolls */
@media (min-width: 861px) { .stage { align-items: start; } .device-wrap { position: sticky; top: 20px; } .side { padding: 20px 0 40px; } }

/* the detail pane opens on something useful; it is not a pushed screen, so no Back */
.view2.is-default .nav .nav-btn[data-act="back"] { display: none; }
.view2.is-default .photo-nav .nav-btn[data-act="back"] { display: none; }

/* bare: just the app, edge to edge (screenshots and mockups) */
html.bare .side { display: none; }
html.bare .stage { display: block; padding: 0; min-height: 0; }
html.bare .device-wrap { width: 100vw; height: 100vh; position: static; }
html.bare .device { width: 100%; height: 100%; padding: 0; border-radius: 0; transform: none; box-shadow: none; background: transparent; }
html.bare .app { width: 100%; height: 100%; border-radius: 0; }
html.bare .island, html.bare .app::after { display: none; }