/* The frame per layout mode. Regions: .topbar .main .stage-region (.stage + .stage-overlay + .detail) .nav .side
   Fold gap: nothing tappable within 24 px of --fold-x (wide) / --fold-y (tall), on either side (docs/FRONTEND.md). */

:root {
  --tb-h: 48px;
  --rail-w: 64px;
  --dock-h: 62px;
  --pad-l: max(var(--gut), var(--safe-l));
  --pad-r: max(var(--gut), var(--safe-r));
  --fold-gap: 24px;
}

/* absolute in #app (not fixed to the layout viewport): in the iOS Home Screen app #app is the taller real screen */
.shell { position: absolute; inset: 0; overflow: hidden; }
.shell.loading { display: grid; place-items: center; }
.loading-mark { display: grid; justify-items: center; gap: 14px; color: var(--ink-3); font-size: 15px; }
.loading-mark .mark { color: var(--ink); animation: breathe 2.4s var(--ease-io) infinite; }
@keyframes breathe { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

/* ---------- top bar ---------- */
/* A bar of the room's material, like an iOS navigation bar: content scrolls under it blurred, never as readable text
   on text. The hairline appears only once the list is scrolled (shell.js toggles .scrolled). */
.topbar {
  position: absolute; z-index: 6; top: 0; left: 0; right: 0;
  height: calc(var(--tb-h) + var(--safe-t)); padding: var(--safe-t) var(--pad-r) 0 var(--pad-l);
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 .5px 0 transparent; transition: box-shadow .2s var(--ease);
}
.topbar.scrolled { box-shadow: 0 .5px 0 var(--line); }
.tb-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); margin-left: -8px; flex: none; }
.tb-mark:active { background: var(--panel-hi); }
.tb-title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1 1 auto; }
.tb-view { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.tb-clock { font-size: 13px; color: var(--ink-3); font-family: var(--num); margin-left: 6px; }
/* the iOS status bar right above already shows the time on the cover display */
.m-compact .tb-clock { display: none; }
.tb-btn, .veil-btn { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink-2); border-radius: 12px; flex: none; }
.tb-btn:active, .veil-btn:active { background: var(--panel-hi); }
.tb-add { color: var(--ink); }
.veil-btn.on { color: var(--gold); }
.conn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 9px; margin-left: 2px; border-radius: 14px; background: var(--panel-hi); font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.conn i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); flex: none; }
.conn b { font-weight: 400; color: var(--ink-3); font-family: var(--num); font-variant-numeric: tabular-nums; }
.conn.c-cached i, .conn.c-stale i { background: var(--gold-fill); }
.conn.c-live i { background: var(--up-fill); box-shadow: 0 0 0 0 var(--up-dim); animation: livedot 2.4s infinite; }
.conn.c-connecting i { background: var(--ink-4); }
.conn.c-offline i { background: var(--down-fill); }
@keyframes livedot { 0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, .5) } 70% { box-shadow: 0 0 0 6px rgba(48, 209, 88, 0) } 100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0) } }

/* ---------- main region ---------- */
.main { position: absolute; z-index: 2; overflow: hidden; }
.main-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(var(--tb-h) + var(--safe-t) + 4px) var(--pad-r) 0 var(--pad-l);
  scrollbar-width: none;
}
.main-scroll::-webkit-scrollbar { display: none; }
.main-end { height: calc(var(--dock-h) + var(--safe-b) + 40px); }

/* ---------- stage region ---------- */
.stage-region { position: absolute; z-index: 2; }
.stage { position: absolute; inset: 0; pointer-events: auto; touch-action: pan-y; }
/* inner display + Mac: the stage owns its gestures (drag to set conviction, scrub, pinch) */
.m-tall .stage, .m-wide .stage, .m-desk .stage { touch-action: none; }
.stage-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; }
.stage-overlay .pe, .stage-overlay button, .stage-overlay a { pointer-events: auto; }
/* A detail on the inner display takes the whole stage region on the room's own background: the 3D behind it is
   hidden (shell.js hands the stage a null rect), never squeezed into a band behind the title. */
.detail {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; top: 0; height: 100%;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 22px 20px calc(var(--safe-b) + 24px);
  background: var(--bg);
  animation: detail-in .42s var(--ease) both;
}
.stage-region.has-detail .stage-overlay { visibility: hidden; }
.detail::-webkit-scrollbar { display: none; }
.detail-x { position: sticky; top: 0; float: right; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--panel-hi); color: var(--ink-2); margin: -6px -6px 0 0; z-index: 2; }
@keyframes detail-in { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* ---------- navigation ---------- */
/* Five tabs (Puls, Portefølje, Innsikt, Strategi, Marked); their labels fit at 382 px. 'Ny handel' is the + in the top bar. */
.nav { position: absolute; z-index: 8; display: flex; gap: 2px; padding: 5px;
  background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: .5px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.nav-i { flex: 1 1 0; min-width: 0; height: 50px; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 23px; color: var(--ink-3); transition: color .2s, background .2s; }
.nav-i span { font-size: 11px; font-weight: 500; letter-spacing: 0; max-width: 100%; white-space: nowrap; }
.nav-i.on { color: var(--ink); background: var(--panel-hi); }
.nav-i:active { background: var(--panel-hi); }
/* Centred with auto margins, not a transform: the FLIP choreography animates transform to 'none', which would
   drop a centring translate at the end of the turn and make the bar jump. */
.nav-dock { left: 0; right: 0; margin: 0 auto; bottom: calc(var(--safe-b) + 10px); width: min(440px, calc(100% - var(--pad-l) - var(--pad-r))); }
.nav-rail { flex-direction: column; width: var(--rail-w); top: 0; bottom: 0; margin: auto 0; height: max-content;
  max-height: calc(100% - var(--safe-t) - var(--safe-b) - 16px); overflow-y: auto; scrollbar-width: none; }
.nav-rail::-webkit-scrollbar { display: none; }
.nav-rail .nav-i { flex: none; height: clamp(44px, calc((var(--vh, 100dvh) - 72px) / 5), 56px); }
.nav-rail .nav-i span { font-size: 10.5px; }

/* ---------- compact: one column (cover display) ---------- */
.m-compact .main { inset: 0; }
.m-compact .stage-region { position: relative; height: clamp(200px, calc(var(--vh, 100dvh) * .36), 280px); margin: 0 calc(-1 * var(--pad-r)) 6px calc(-1 * var(--pad-l)); }
.m-compact .stage-overlay { padding: 0 var(--pad-r) 0 var(--pad-l); }
/* 'backwards', not 'both': a finished animation that keeps its end frame would override the inline transform the
   swipe-back gesture sets while the page follows the finger. */
.cdetail {
  position: absolute; inset: 0; z-index: 12; background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: calc(var(--safe-t) + 6px) var(--pad-r) calc(var(--safe-b) + 40px) var(--pad-l);
  animation: cd-in .46s var(--ease) backwards;
}
.cdetail::-webkit-scrollbar { display: none; }
.cdetail.swiping { box-shadow: -10px 0 30px rgba(0, 0, 0, .28); overflow-y: hidden; }
.cdetail.settling { transition: transform .32s var(--ease); }
/* slides in opaque like an iOS push: a fade would show the top bar's title through the back button's (F129) */
@keyframes cd-in { from { transform: translateX(100%) } to { transform: none } }
.cd-h { position: sticky; top: calc(-1 * var(--safe-t) - 6px); z-index: 2; margin: 0 calc(-1 * var(--pad-r)) 8px calc(-1 * var(--pad-l)); padding: var(--safe-t) var(--pad-r) 6px var(--pad-l);
  background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 .5px 0 var(--line); }
.cd-back { display: inline-flex; align-items: center; gap: 2px; height: 44px; color: var(--ink); font-size: 17px; margin-left: -8px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- tall: inner display portrait, fold across the middle ---------- */
.m-tall .topbar { padding-left: max(20px, var(--safe-l)); padding-right: max(20px, var(--safe-r)); }
.m-tall .stage-region { top: calc(var(--tb-h) + var(--safe-t)); left: var(--safe-l); right: var(--safe-r); height: calc(var(--fold-y) - var(--tb-h) - var(--safe-t) - var(--fold-gap)); }
.m-tall .stage-overlay { padding: 8px 24px 12px; }
.m-tall .main { top: calc(var(--fold-y) + var(--fold-gap)); bottom: 0; left: 0; right: 0; }
.m-tall .main-scroll { padding: 8px max(24px, var(--safe-r)) 0 max(24px, var(--safe-l)); }
.m-tall .detail { padding-left: max(24px, var(--safe-l)); padding-right: max(24px, var(--safe-r)); }

/* ---------- wide: inner display landscape, fold down the middle ---------- */
.m-wide .topbar { right: calc(100% - var(--fold-x) + var(--fold-gap)); padding-left: max(20px, var(--safe-l)); }
.m-wide .main { top: 0; bottom: 0; left: 0; right: calc(100% - var(--fold-x) + var(--fold-gap)); }
.m-wide .main-scroll { padding-left: max(20px, var(--safe-l)); padding-right: 16px; }
.m-wide .main-end { height: 40px; }
.m-wide .stage-region { top: var(--safe-t); bottom: 0; left: calc(var(--fold-x) + var(--fold-gap)); right: calc(var(--rail-w) + max(10px, var(--safe-r)) + 8px); }
.m-wide .stage-overlay { padding: 18px 8px 20px 16px; }
.m-wide .nav-rail { right: max(10px, var(--safe-r)); }
.m-wide .detail { padding-left: 16px; padding-right: 8px; }

/* ---------- desk: Mac browser ---------- */
.m-desk .nav-rail { left: 16px; }
.m-desk .topbar { left: calc(var(--rail-w) + 32px); right: calc(100% - var(--rail-w) - 32px - 440px); padding: 0 0 0 4px; }
.m-desk .main { top: 0; bottom: 0; left: calc(var(--rail-w) + 32px); width: 440px; }
.m-desk .main-scroll { padding-left: 4px; padding-right: 12px; }
.m-desk .main-end { height: 40px; }
.m-desk .stage-region { top: 16px; bottom: 16px; left: calc(var(--rail-w) + 32px + 440px + 20px); right: 396px; border-radius: var(--r-xl); }
.m-desk .stage-overlay { padding: 22px 26px; }
.m-desk .side { position: absolute; z-index: 2; top: 16px; bottom: 16px; right: 16px; width: 364px; overflow-y: auto; scrollbar-width: none; padding: 6px 4px 30px; }
.m-desk .detail { border-radius: var(--r-xl); padding-left: 26px; padding-right: 26px; }

/* ---------- tent: cover display landscape (desk ticker) ---------- */
.m-tent { padding: max(14px, var(--safe-t)) max(18px, var(--safe-r)) max(12px, var(--safe-b)) max(18px, var(--safe-l)); }

/* ---------- menu ---------- */
.menu-wrap { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, .3); animation: fade .25s var(--ease) both; }
.menu { position: absolute; top: calc(var(--safe-t) + 52px); left: var(--pad-l); width: min(320px, calc(100% - var(--pad-l) - var(--pad-r)));
  background: var(--glass-hi); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  border: .5px solid var(--line); border-radius: var(--r-lg); padding: 6px; box-shadow: var(--shadow); animation: pop .32s var(--ease) both; }
.menu-h { display: flex; gap: 12px; align-items: center; padding: 12px 12px 14px; border-bottom: .5px solid var(--line); margin-bottom: 4px; }
.menu-h div { display: grid; min-width: 0; } .menu-h b { font-weight: 600; } .menu-h span { font-size: 13px; color: var(--ink-3); }
.menu-i { display: grid; width: 100%; padding: 11px 12px; border-radius: 12px; min-width: 0; }
.menu-i:active { background: var(--panel-hi); }
.menu-i b { font-weight: 500; font-size: 15px; } .menu-i span { font-size: 13px; color: var(--ink-3); }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98) } to { opacity: 1; transform: none } }