/* App shell — Island geometry (2026-07-08): two-tier frosted deck (topbar + command strip),
   icon rail on the ground, content elevated on a rounded canvas (#panel). Two nav layouts kept:
   sidebar cockpit (data-nav="side") and top tab-bar (data-nav="top"). Tokens only. */
.shell { display: flex; align-items: stretch; min-height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* The elevated canvas — every module renders inside this island. */
#panel {
  flex: 1; min-width: 0; margin: 14px 18px 18px 4px; padding: 20px 24px;
  background: var(--surface-1); border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-xl);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, var(--shadow-2);
}

/* ---------- deck: two tiers, one frosted surface ---------- */
.deckwrap { position: sticky; top: 0; z-index: 30; background: var(--deck-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border-secondary); }
.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 18px 6px; min-height: 46px; }
.brandwrap { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.brandmark { width: 27px; height: 27px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--st-next)); color: var(--accent-text);
  font-weight: 800; font-size: 12px; letter-spacing: .01em; flex: 0 0 auto; overflow: hidden; }
/* A real uploaded logo drops the gradient chip background and just shows the image. */
.brandmark.has-logo { background: none; border-radius: 6px; }
.brandmark-img { width: 100%; height: 100%; object-fit: contain; display: block; }
#brand { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.tagline-mini { font-size: 10px; color: var(--color-text-tertiary); }
.topbar-spacer { flex: 1; }
.icon-btn { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; color: var(--color-text-secondary);
  border-radius: 9px; padding: 0; cursor: pointer; font-size: 14px; line-height: 1; flex: 0 0 auto; }
.icon-btn:hover { color: var(--color-text-primary); border-color: var(--color-border-secondary); background: var(--surface-2); }
.ticker { display: flex; gap: 6px; align-items: center; }
.ticker .tk { font-size: 10px; font-family: var(--font-mono); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--color-border-secondary); color: var(--color-text-secondary); }
.ticker .tk.ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ticker .tk.warn { color: var(--color-text-warn); }
.ticker .tk.off { color: var(--color-text-danger); }

/* connector health pill (renderConnectorBar) — lives in tier 1 */
#conn-bar { display: flex; align-items: center; }
.conn-health { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-secondary);
  padding: 6px 12px; border-radius: 9px; border: 1px solid var(--color-border-secondary);
  background: var(--surface-2); cursor: default; white-space: nowrap; }
.conn-health .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 60%, transparent); }
.conn-health.degraded .pulse { background: var(--color-text-warn); box-shadow: 0 0 9px color-mix(in srgb, var(--color-text-warn) 60%, transparent); }
.conn-health.gw-down .pulse { background: var(--color-text-danger); box-shadow: 0 0 9px color-mix(in srgb, var(--color-text-danger) 60%, transparent); }
.conn-health.gw-down { color: var(--color-text-danger); }
.conn-health.gw-offline .pulse { background: var(--color-text-secondary); box-shadow: none; }
.conn-health.gw-offline { color: var(--color-text-secondary); }

/* tier 2 — the command strip: KPIs left, quick actions + stamp right */
.strip { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 0 18px 8px; overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
#strip-stats { display: flex; gap: 6px; flex: 0 0 auto; }
.strip .stat { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12px; color: var(--color-text-secondary);
  padding: 5px 11px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; background: none; font-family: inherit; }
.strip .stat:hover { background: var(--surface-2); border-color: var(--color-border-secondary); }
.strip .stat .l { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-tertiary); font-weight: 600; }
.strip .stat b { font-size: 13px; font-weight: 650; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.strip .stat b.warn { color: var(--color-text-warn); }
.strip .stat b.acc { color: var(--accent); }
.strip .sp { flex: 1; }
.strip .qact { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary);
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--color-border-tertiary); cursor: pointer;
  white-space: nowrap; background: none; font-family: inherit; }
.strip .qact:hover { color: var(--color-text-primary); background: var(--surface-2); border-color: var(--color-border-secondary); }
.strip .qact svg { color: var(--color-text-tertiary); }
.strip .qact:hover svg { color: var(--accent); }
.strip .stamp { font-size: 11.5px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; margin-left: 6px; white-space: nowrap; }
/* KPI freshness: a failed strip fetch marks the stamp — quiet must never read as healthy */
.strip .stamp.stale::before { content: "◌ "; color: var(--color-text-warn); }

/* ---------- SIDEBAR mode: icon rail on the ground ---------- */
.side { width: 222px; flex: 0 0 222px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nav { flex: 1; padding: 14px 8px 8px 10px; }
.nav-grp { margin-bottom: 14px; }
.nav-grp-h { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: var(--color-text-tertiary); padding: 0 12px; margin-bottom: 5px; font-weight: 600; }
.nav-it { display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 13px; color: var(--color-text-secondary);
  cursor: pointer; border: 1px solid transparent; border-radius: 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-it:hover { color: var(--color-text-primary); background: var(--hover-bg); }
.nav-it.active { color: var(--color-text-primary); background: var(--surface-2); border-color: var(--color-border-secondary);
  box-shadow: inset 2.5px 0 0 var(--accent); font-weight: 600; }
.nav-health { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; margin-left: auto; }
.nav-health.error { background: var(--st-blocked); box-shadow: 0 0 5px var(--st-blocked); }
.nav-health.warn { background: var(--color-text-warn); }
.nav-it .nav-health + .n { margin-left: 6px; }
.nav-it svg { flex: 0 0 auto; color: var(--color-text-tertiary); }
.nav-it:hover svg { color: var(--color-text-secondary); }
.nav-it.active svg { color: var(--accent); }
.nav-it .n { margin-left: auto; font-size: 10.5px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.nav-it.active .n { color: var(--accent); }
.nav-sub { margin: 1px 0 3px; }
.nav-sub-h { font-size: 10px; color: var(--color-text-tertiary); padding: 4px 12px 2px 18px; }
.nav-sub .nav-it { padding-left: 24px; font-size: 12.5px; }   /* nested indent */
.side-foot { padding: 9px 18px; border-top: 1px solid var(--color-border-tertiary); font-size: 11px; color: var(--color-text-tertiary); }

/* ---------- TOP tab-bar mode ---------- */
/* Realm nav — its own full-width band with a contrasting surface so it reads as a
   distinct navigator, not part of the frosted chrome. Wraps (never a cramped scroll). */
.topnav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 7px 18px; background: var(--surface-2);
  border-top: 1px solid var(--color-border-secondary); }
.rtab { padding: 5px 13px; border-radius: 999px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; border: 1px solid transparent; }
.rtab:hover { color: var(--color-text-primary); background: var(--hover-bg); }
.rtab.active { color: var(--accent); background: var(--surface-1); border-color: color-mix(in srgb, var(--accent) 40%, transparent); font-weight: 650; }
/* Module sub-tabs — solid surface (one step lighter than the realm band) so the two nav
   tiers are legibly distinct from each other and from the chrome above. Lives INSIDE the
   sticky deck (index.html), so the whole header sticks as one unit — no offset math. */
.topsub { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 6px 18px;
  border-bottom: 1px solid var(--color-border-secondary); background: var(--surface-1); }
.subtab { padding: 3px 10px; border-radius: 6px; font-size: 12.5px; color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; }
.subtab:hover { color: var(--color-text-primary); background: var(--hover-bg); }
.subtab.active { color: var(--color-text-primary); border-bottom-color: var(--accent); font-weight: 600; }
.subdrop { position: relative; }
.subdrop .drop-menu { display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; background: var(--surface-2); border: 1px solid var(--color-border-secondary); border-radius: 8px; box-shadow: var(--shadow-2); min-width: 160px; padding: 4px; }
.subdrop:hover .drop-menu, .subdrop:focus-within .drop-menu { display: block; }
.subdrop .drop-menu .nav-it { box-shadow: none; border-radius: 6px; padding: 5px 10px; }
.subdrop .drop-menu .nav-it.active { box-shadow: none; }

/* ---------- mode visibility (data-nav on <html>, set before paint to avoid flash) ---------- */
:root[data-nav="side"] .topnav, :root[data-nav="side"] .topsub { display: none; }
:root[data-nav="top"] .side { display: none; }
:root[data-nav="top"] #nav-collapse { display: none; }
:root[data-nav="top"] #panel { margin-left: 18px; }
/* desktop collapse of the rail */
body.nav-collapsed .side { display: none; }
body.nav-collapsed #panel { margin-left: 18px; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  :root { --deck-h: 46px; }   /* strip wraps/scrolls; keep topsub anchored to tier 1 */
  :root[data-nav="side"] .side { position: fixed; z-index: 50; box-shadow: var(--shadow-2);
    background: var(--surface-1); border-right: 1px solid var(--color-border-secondary); }
  :root[data-nav="side"] body:not(.nav-open) .side, body.nav-side:not(.nav-open) .side { display: none; }
  #panel { margin: 10px; }
  /* one thumb-scrollable line; the date stamp yields its space to the KPIs */
  .strip { padding: 0 12px 8px; }
  .strip .stamp { display: none; }
  .topbar { overflow-x: auto; scrollbar-width: none; }
  .topbar::-webkit-scrollbar { display: none; }
  .topsub { top: var(--deck-h); }
}

/* scaffolded (stub) modules */
.stub { padding: 36px 20px; text-align: center; max-width: 460px; margin: 36px auto; }
.stub-h { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--color-text-primary); }
.stub-b { font-size: 13px; line-height: 1.55; }
.stub-tag { margin-top: 14px; font-size: 11px; color: var(--color-text-tertiary); border: 1px dashed var(--color-border-secondary); border-radius: 999px; display: inline-block; padding: 3px 12px; }
.stub-badge { display: inline-block; margin-bottom: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-warn); border: 1px solid var(--color-text-warn); border-radius: 999px; padding: 2px 10px; }
.stub-jump { display: inline-block; margin-top: 16px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--color-text-primary); background: var(--surface-2); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); cursor: pointer; }
.stub-jump:hover { background: var(--surface-1); border-color: var(--color-text-info); }