/* Cockpit LAYOUTS — where panels live and how they present. Driven by
   <html data-layout="X">, INDEPENDENT of the theme (any theme can wear any
   layout). Overrides the base dock + drawer positioning in desktop.css. Desktop
   only; mobile is always a single scroll. 10 layouts, selectable in Settings. */

/* Let a layout own dock placement fully: clear the base edge insets first. */
[data-layout] .cockpit-dock { left: auto; right: auto; top: auto; bottom: auto; transform: none; }

/* ── 1. CLASSIC — floating dock, bottom-centre; drawer = bottom sheet (base). */
[data-layout="classic"] .cockpit-dock { left: 50%; bottom: 14px; transform: translateX(-50%); flex-flow: row wrap; }

/* ── 2. DOCK-LEFT — vertical dock rail on the left; drawer slides from the left. */
[data-layout="dock-left"] .cockpit-dock { left: 14px; top: 50%; transform: translateY(-50%); flex-direction: column; max-height: calc(100vh - 120px); overflow: auto; }
[data-layout="dock-left"] .cockpit-drawer { left: 0; top: var(--bar-height); bottom: 0; right: auto; width: min(460px, 62vw); height: auto; border-top: none; border-right: 1px solid var(--glass-border); box-shadow: 14px 0 44px rgba(0,0,0,.34); animation: drawerInLeft .3s cubic-bezier(.22,1,.36,1) both; }

/* ── 3. DOCK-RIGHT — mirror of dock-left. */
[data-layout="dock-right"] .cockpit-dock { right: 14px; top: 50%; transform: translateY(-50%); flex-direction: column; max-height: calc(100vh - 120px); overflow: auto; }
[data-layout="dock-right"] .cockpit-drawer { right: 0; top: var(--bar-height); bottom: 0; left: auto; width: min(460px, 62vw); height: auto; border-top: none; border-left: 1px solid var(--glass-border); box-shadow: -14px 0 44px rgba(0,0,0,.34); animation: drawerInRight .3s cubic-bezier(.22,1,.36,1) both; }

/* ── 4. DOCK-TOP — dock bar under the header; drawer drops from the top. */
[data-layout="dock-top"] .cockpit-dock { left: 50%; top: calc(var(--bar-height) + 10px); transform: translateX(-50%); flex-flow: row wrap; }
[data-layout="dock-top"] .cockpit-drawer { top: calc(var(--bar-height) + 66px); bottom: auto; height: min(52vh, 560px); border-top: none; border-bottom: 1px solid var(--glass-border); box-shadow: 0 14px 44px rgba(0,0,0,.34); animation: drawerDown .3s cubic-bezier(.22,1,.36,1) both; }

/* ── 5. EDGE-HIDE — dock rests off the bottom edge, slides up on hover/focus. */
[data-layout="edge-hide"] .cockpit-dock { left: 50%; bottom: 14px; transform: translateX(-50%) translateY(66px); opacity: .45; flex-flow: row wrap; }
[data-layout="edge-hide"] .cockpit-dock:hover, [data-layout="edge-hide"] .cockpit-dock:focus-within { transform: translateX(-50%) translateY(0); opacity: 1; }
[data-layout="edge-hide"] .cockpit-docklayer::after { content: "▴ panels"; position: fixed; left: 50%; bottom: 2px; transform: translateX(-50%); font: 700 10px/1 system-ui; letter-spacing: .1em; text-transform: uppercase; color: var(--hwy-muted); pointer-events: none; opacity: .7; }

/* ── 6. TAB-BAR — a flush, full-width tab strip under the header (no floating
      pill); the drawer fills the stage below it. */
[data-layout="tab-bar"] .cockpit-dock { left: 0; right: 0; top: var(--bar-height); transform: none; max-width: none; border-radius: 0; border-left: none; border-right: none; justify-content: flex-start; flex-flow: row nowrap; overflow-x: auto; padding: 6px 14px; gap: 4px; }
[data-layout="tab-bar"] .dock-tab { border-radius: 8px 8px 0 0; }
[data-layout="tab-bar"] .cockpit-drawer { top: calc(var(--bar-height) + 52px); bottom: 0; height: auto; border-top: none; animation: drawerDown .3s cubic-bezier(.22,1,.36,1) both; }

/* ── 7. WINDOWS — panels open as a floating, centred popup window with chrome. */
[data-layout="windows"] .cockpit-dock { left: 50%; bottom: 14px; transform: translateX(-50%); flex-flow: row wrap; }
[data-layout="windows"] .cockpit-drawer { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(780px, 88vw); height: min(72vh, 660px); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: windowPop .26s cubic-bezier(.22,1,.36,1) both; }
[data-layout="windows"] .drawer-topbar { cursor: default; border-radius: 16px 16px 0 0; background: color-mix(in srgb, var(--hwy-subtle) 55%, transparent); }

/* ── 8. SIDE-INDEX — a persistent, always-expanded text index on the left;
      drawer opens beside it. A quieter, doc-style navigation. */
[data-layout="side-index"] .cockpit-dock { left: 0; top: var(--bar-height); bottom: 0; transform: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; width: 190px; max-height: none; border-radius: 0; border-top: none; border-bottom: none; border-left: none; padding: 12px 8px; overflow: auto; }
[data-layout="side-index"] .dock-tab { text-align: left; border-radius: 8px; width: 100%; }
[data-layout="side-index"] .cockpit-drawer { left: 190px; top: var(--bar-height); bottom: 0; right: auto; width: min(460px, 52vw); height: auto; border-top: none; border-left: 1px solid var(--glass-border); border-right: 1px solid var(--glass-border); animation: drawerInLeft .3s cubic-bezier(.22,1,.36,1) both; }

/* ── 9. CORNER — a compact vertical dock tucked in the bottom-right corner. */
[data-layout="corner"] .cockpit-dock { right: 14px; bottom: 14px; top: auto; left: auto; transform: none; flex-direction: column-reverse; align-items: stretch; gap: 4px; max-height: calc(100vh - 140px); overflow: auto; border-radius: 14px; }
[data-layout="corner"] .dock-tab { text-align: left; }
[data-layout="corner"] .cockpit-drawer { right: 14px; left: auto; bottom: 14px; top: auto; width: min(560px, 74vw); height: min(60vh, 600px); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.42); animation: windowPop .26s cubic-bezier(.22,1,.36,1) both; }

/* ── 10. MENU — no visible dock; a pull-down button reveals the panel list.
      cockpitLayout.js adds #layoutMenuBtn and toggles body.layout-menu-open. */
[data-layout="menu"] .cockpit-dock { right: 14px; top: calc(var(--bar-height) + 8px); left: auto; bottom: auto; transform: none; flex-direction: column; align-items: stretch; gap: 3px; width: 200px; max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; border-radius: 0 0 14px 14px; transition: max-height .2s, opacity .2s; pointer-events: none; }
[data-layout="menu"].layout-menu-open .cockpit-dock, [data-layout="menu"] body.layout-menu-open .cockpit-dock { max-height: 70vh; overflow: auto; opacity: 1; padding: 8px; pointer-events: auto; }
[data-layout="menu"] .dock-tab { text-align: left; }
#layoutMenuBtn { display: none; }
[data-layout="menu"] #layoutMenuBtn { display: inline-flex; align-items: center; gap: 6px; position: fixed; right: 14px; top: calc(var(--bar-height) + 8px); z-index: 26; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--hwy-ink); font: 700 13px system-ui; cursor: pointer; backdrop-filter: blur(12px); }

/* Hide the dock-customize gear where it would collide with a repositioned dock. */
[data-layout="dock-right"] .dock-customize, [data-layout="corner"] .dock-customize,
[data-layout="side-index"] .dock-customize, [data-layout="menu"] .dock-customize { display: none; }

@keyframes drawerInLeft { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes drawerInRight { from { transform: translateX(100%); } to { transform: none; } }
@keyframes drawerDown { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes windowPop { from { transform: translate(-50%, -50%) scale(.94); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
   [data-layout] .cockpit-drawer { animation: none; }
}

/* ── User-placed docks beat the layout preset ───────────────────────────────
   Drag-to-move (grab the dock's background) stamps is-user-placed; from then
   on the dragged edge wins over whatever position the desktop layout preset
   declares — "it's in the way" is always solvable by shoving the dock to
   another edge. */
[data-layout] .cockpit-dock.is-user-placed.cockpit-dock-bottom { left: 50%; right: auto; top: auto; bottom: 14px; transform: translateX(-50%); flex-flow: row wrap; }
[data-layout] .cockpit-dock.is-user-placed.cockpit-dock-top { left: 50%; right: auto; bottom: auto; top: calc(var(--bar-height) + 10px); transform: translateX(-50%); flex-flow: row wrap; }
[data-layout] .cockpit-dock.is-user-placed.cockpit-dock-left { left: 14px; right: auto; bottom: auto; top: 50%; transform: translateY(-50%); flex-direction: column; max-height: calc(100vh - 120px); overflow: auto; }
[data-layout] .cockpit-dock.is-user-placed.cockpit-dock-right { right: 14px; left: auto; bottom: auto; top: 50%; transform: translateY(-50%); flex-direction: column; max-height: calc(100vh - 120px); overflow: auto; }