/* ================================================================
   layout.css — App shell grid
   Layout: [ topbar (full width) ]
           [ sidebar | content    ]
   ================================================================ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) auto 1fr;
  grid-template-areas:
    "topbar  topbar"
    "sidebar panel"
    "sidebar content";
  height: 100vh;
  height: 100dvh;          /* dynamic viewport height — correct on mobile browsers */
  overflow: hidden;        /* the shell itself never scrolls; content scrolls inside */
}

/* ── Panel-name strip (below the blue bar) ──────────────────── */
.panel-strip {
  grid-area: panel;
  background: linear-gradient(135deg, var(--strip-bg) 0%, var(--strip-bg-2) 100%);
  border-bottom: 1px solid var(--strip-line);
  /* The version badge sits at the right of this strip rather than in the top
     bar, which frees the whole width of the bar above for the organisation
     name. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px var(--space-5);
  font-size: 15px;
  font-weight: 800;
  color: var(--strip-ink);
  letter-spacing: 0.4px;
  text-transform: none;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  background: linear-gradient(135deg, var(--topbar-bg) 0%, var(--bg-topbar) 50%, var(--topbar-bg-2) 100%);
  border-bottom: var(--topbar-rule-size) solid var(--topbar-rule);
  color: var(--topbar-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  position: relative;
  z-index: var(--z-topbar);
  box-shadow: var(--topbar-shadow);
}

.topbar-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
  text-shadow: var(--topbar-title-shadow);
  /* The organisation name used to wrap onto a second line and push down
     into the program strip below it. It is a single line now, whatever the
     name, and shortens to orgShort on narrow screens rather than being
     truncated with an ellipsis. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* A hard ceiling rather than relying on flex shrinking, which behaves
     inconsistently across engines. The name can never take more than this
     share of the bar, so it cannot reach the buttons on the right.

     Raised from 46vw once the version badge moved down to the program
     strip: that freed roughly 170px in this bar, and a long organisation
     name deserves it more than empty space did. */
  max-width: 62vw;
}
.topbar-title-short { display: none; }

/* The left side of the top bar. Without min-width:0 a flex item refuses to
   shrink below its content, which is why a long organisation name pushed
   into the buttons on the right instead of shortening. */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  /* The title carries its own max-width, so this wrapper never needs to
     shrink below its content and no min-width override is required. */
  min-width: 0;
}
.topbar-left .hamburger-btn { flex: 0 0 auto; }
.topbar-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex: 0 0 auto;          /* never squeezed by a long organisation name */
}

.topbar-actions-gap {
  width: 64px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .topbar-actions-gap {
    width: var(--space-3);
  }
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  background: var(--sidebar-bg);
  border-right: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.nav-section {
  padding: 1px 0;
  border-bottom: 1px solid var(--sidebar-border);
}

.nav-section:last-child {
  border-bottom: none;
}

.nav-section-label {
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--sidebar-grp);
  font-weight: var(--weight-bold);
  padding: 10px var(--space-4) 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-4);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  color: var(--sidebar-text);
}

.nav-item:hover {
  background: var(--sidebar-bg-hover);
  color: var(--sidebar-text-active);
}

.nav-item.active {
  background: var(--sidebar-bg-active);
  border-left-color: var(--navy);
  color: var(--sidebar-text-active);
}

.nav-item.active .nav-item-label {
  color: var(--sidebar-text-active);
  font-weight: var(--weight-bold);
}

.nav-item-icon {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.8;
}

.nav-item.active .nav-item-icon {
  opacity: 1;
}

.nav-item-body {
  flex: 1;
  min-width: 0;
}

.nav-item-label {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: inherit;
  line-height: 1.25;
}

.nav-item-desc {
  display: none;
  font-size: var(--text-xs);
  color: var(--sidebar-desc);
  margin-top: 1px;
}

/* ── Logged-in user + logout ────────────────────────────────── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--sidebar-border);
  background: rgba(0,0,0,0.2);
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-email {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--sidebar-user-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 10px;
  color: var(--sidebar-user-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-logout {
  flex-shrink: 0;
  background: var(--sidebar-logout-bg) !important;
  border-color: var(--sidebar-border) !important;
  color: var(--sidebar-logout-ink) !important;
  font-size: 11px !important;
}

.sidebar-logout:hover {
  background: var(--sidebar-logout-bg-h) !important;
  color: var(--sidebar-logout-ink) !important;
}

.sidebar-footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--sidebar-border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--sidebar-grp);
  background: rgba(0,0,0,0.15);
}

.sidebar-footer-line {
  display: block;
  margin-bottom: 1px;
}

.sidebar-footer-label {
  display: inline-block;
  width: 60px;
  text-align: right;
  opacity: 0.6;
}

/* ── Topbar icon buttons (About / Help / LT Status) ─────────── */
.topbar-icon-btn {
  background: var(--topbar-btn-bg);
  border: 1px solid var(--topbar-btn-line);
  color: var(--topbar-ink);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  padding: 7px 13px;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.topbar-icon-btn:hover {
  background: var(--topbar-btn-bg-h);
  border-color: var(--topbar-btn-line-h);
  transform: translateY(-1px);
}

/* ── Content area ───────────────────────────────────────────── */
.content {
  grid-area: content;
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--bg-body);
}

.panel {
  display: none;
  max-width: var(--content-max);
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  padding: var(--space-5);
  border: 1px solid var(--border);
}

.panel.active {
  display: block;
  animation: panel-fade-in 160ms ease-out;
}

@keyframes panel-fade-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--border);
  position: relative;
}

.panel-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.panel-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--navy-text);
  letter-spacing: -0.3px;
}

/* ================================================================
   Responsive — PC, laptop, iPad, iPhone
   ================================================================ */

/* On tall desktop displays there's room to show the nav-item
   descriptions without overflowing the sidebar. */
@media (min-height: 860px) {
  .nav-item-desc { display: block; }
  .nav-item { align-items: flex-start; }
  .nav-item-icon { margin-top: 1px; }
}

/* ── Tablet / small laptop (iPad landscape and below) ───────── */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 210px;
  }
  .content { padding: var(--space-4); }
  /* Keep descriptions hidden here regardless of height — space is tight */
  .nav-item-desc { display: none !important; }
  /* Not enough room for the full organisation name alongside the buttons */
  .topbar-title-full  { display: none; }
  .topbar-title-short { display: inline; }
}

/* ── Narrow tablet (iPad portrait) ──────────────────────────── */
@media (max-width: 820px) {
  :root {
    --sidebar-width: 190px;
  }
  .topbar-title { font-size: var(--text-base); }
  /* Add-member buttons shrink to fit alongside Help/About */
  #topbar-add-sm, #topbar-add-pn {
    padding: 7px 10px !important;
    font-size: 12px;
  }
}

/* ── Phone (iPhone) ─────────────────────────────────────────────
   Collapse to a single column. The sidebar becomes a horizontal
   scrolling strip under the topbar. This keeps the app usable on a
   phone, though the intended primary devices are PC/laptop/iPad. */
@media (max-width: 640px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) auto auto 1fr;
    grid-template-areas:
      "topbar"
      "sidebar"
      "panel"
      "content";
  }
  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 40vh;
  }
  .sidebar-nav {
    /* show as a compact scrollable list */
    padding: 0;
  }
  .nav-item-desc { display: none !important; }
  .topbar {
    padding: 0 var(--space-3);
  }
  .topbar-title {
    font-size: 13px;
    line-height: 1.15;
    /* allow wrapping to two lines if the org name is long */
    white-space: normal;
    overflow: hidden;
  }
  #topbar-add-sm, #topbar-add-pn {
    padding: 6px 8px !important;
    font-size: 11px;
  }
  .topbar-icon-btn {
    padding: 6px 9px;
  }
  .content { padding: var(--space-3); }
  /* Stack the user info + logout vertically isn't needed; keep inline */
}

/* ── Help modal tabs (file-folder style) ─────────────────────── */
/* ================================================================
   HELP GUIDE — Premium V3
   ================================================================ */

/* The full-screen modal shell */
.hg-modal {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 1fr;
  width: min(1440px, 96vw);
  height: min(880px, 94vh);
  background: var(--bg-panel);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.06);
  margin: auto;
}

/* Close button */
.hg-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 10;
  background: var(--hg-active);
  backdrop-filter: blur(4px);
  border: 1px solid var(--hg-line);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 15px;
  color: var(--hg-ink-strong);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.hg-close:hover { background: var(--hg-ink-dim); transform: scale(1.1); }

/* ── Left Nav ──────────────────────────────────────────────── */
.hg-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  background: linear-gradient(180deg, #1a2744 0%, #14203a 100%);
  border-right: none;
  overflow-y: auto;
}
[data-theme="dark"] .hg-nav {
  background: var(--hg-bg);
}

.hg-nav-header {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--hg-hover);
  margin-bottom: 6px;
}
.hg-nav-brand {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--hg-ink-dim);
}
.hg-nav-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--hg-ink-strong);
  margin-top: 2px;
}

.hg-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  margin: 0 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--hg-ink-dim);
  font-family: inherit;
  text-align: left;
  width: calc(100% - 16px);
  transition: all .15s;
}
.hg-tab:hover {
  background: var(--hg-hover);
  color: var(--hg-ink);
}
.hg-tab-active {
  font-weight: 700;
  color: var(--hg-ink-strong) !important;
  background: var(--hg-active) !important;
  box-shadow: inset 0 0 0 1px var(--hg-hover);
}
.hg-tab-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--hg-line);
  transition: background .15s;
}
.hg-tab-active .hg-tab-icon-wrap {
  background: var(--hg-active);
}
.hg-tab-label { flex: 1; line-height: 1.3; }

/* ── Right Content Area ────────────────────────────────────── */
.hg-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--bg-panel);
}

/* Hero strip */
.hg-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.hg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background: radial-gradient(circle at 85% 50%, currentColor 0%, transparent 60%);
  pointer-events: none;
}
.hg-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  background: var(--hg-ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
[data-theme="dark"] .hg-hero-icon {
  background: var(--hg-line);
}
.hg-hero-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.3px;
}
.hg-hero-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
}

/* ── Card Grid ─────────────────────────────────────────────── */
.hg-cards {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-content: start;
}

/* ── Individual Card ───────────────────────────────────────── */
.hg-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.hg-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
[data-theme="dark"] .hg-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.hg-card-wide {
  grid-column: 1 / -1;
}

/* Colored top strip on each card */
.hg-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  border-radius: 13px 13px 0 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 8%, transparent), transparent);
}
.hg-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--card-accent) 12%, transparent);
}
.hg-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.hg-card-body {
  padding: 12px 16px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  flex: 1;
}
.hg-card-body strong { color: var(--text-primary); font-weight: 600; }
.hg-card-body code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--text-primary);
}

/* ── Tip / Warn banners ────────────────────────────────────── */
.hg-tip, .hg-warn {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 500;
}
.hg-tip {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a;
  color: #92400e;
}
[data-theme="dark"] .hg-tip {
  background: linear-gradient(135deg, #2d2206, #33280a);
  border-color: #78600c;
  color: #fbbf24;
}
.hg-warn {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 1px solid #fecaca;
  color: #991b1b;
}
[data-theme="dark"] .hg-warn {
  background: linear-gradient(135deg, #2d1515, #331a1a);
  border-color: #7f1d1d;
  color: #f87171;
}

/* ── Key-value rows ────────────────────────────────────────── */
.hg-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.hg-row {
  display: flex;
  gap: 12px;
  padding: 7px 10px;
  background: var(--gray-50);
  border-radius: 8px;
  font-size: 12.5px;
  transition: background .1s;
}
.hg-row:hover { background: var(--bg-hover); }
.hg-row-key {
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  min-width: 130px;
}
.hg-row-val { color: var(--text-secondary); }

/* ── Role pills ────────────────────────────────────────────── */
.hg-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.hg-pill {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── Scrollbar styling ─────────────────────────────────────── */
.hg-cards::-webkit-scrollbar { width: 6px; }
.hg-cards::-webkit-scrollbar-track { background: transparent; }
.hg-cards::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.hg-cards::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 700px) {
  .hg-modal { grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: 14px; }
  .hg-nav { flex-direction: row; padding: 8px; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--hg-hover); }
  .hg-nav-header { display: none; }
  .hg-tab { padding: 8px 10px; border-radius: 8px; margin: 0 2px; width: auto; white-space: nowrap; }
  .hg-tab-label { display: none; }
  .hg-tab-icon-wrap { width: 28px; height: 28px; }
  .hg-cards { grid-template-columns: 1fr; padding: 12px 14px 40px; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .hg-cards { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   RESPONSIVE SIDEBAR — Slide-out drawer (Phase 3)
   On screens ≤ 768px the sidebar collapses off-screen and slides
   in as an overlay drawer when the hamburger button is tapped.
   ================================================================ */

/* ── Hamburger button ────────────────────────────────────────── */
.hamburger-btn {
  display: none;              /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: var(--topbar-btn-bg);
  border: 1px solid var(--topbar-btn-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--topbar-ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
/* Animated X when open */
.hamburger-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Overlay (semi-transparent backdrop) ─────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 25;                 /* above topbar(20), below modal(1000) */
  opacity: 0;
  transition: opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;        /* never intercept touches when invisible */
}
.sidebar-overlay.visible {
  opacity: 1;
  pointer-events: auto;        /* only intercept touches when actually shown */
}

/* ── Mobile breakpoint ≤ 768px ──────────────────────────────── */
@media (max-width: 768px) {
  /* Hamburger visible */
  .hamburger-btn { display: flex; }

  /* Collapse panel-strip — not needed on mobile */
  .panel-strip { display: none; }

  /* Full-width single-column layout */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }

  /* Sidebar slides in from left as a fixed overlay */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 85vw);
    z-index: 30;               /* above overlay(25), below modal(1000) */
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: none;
    border-right: 1px solid var(--sidebar-border);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;  /* smooth scroll on iOS */
  }

  /* Sidebar open state */
  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }

  /* Overlay present in DOM on mobile but non-interactive until sidebar opens */
  .sidebar-overlay { display: block; pointer-events: none; }

  /* Content fills full width */
  .content {
    grid-area: content;
    padding: var(--space-3);
  }

  /* Topbar adjustments */
  .topbar-title {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45vw;
  }
  .topbar-icon-btn {
    padding: 6px 9px;
    font-size: 12px;
  }
  /* Hide the "Dark" / "About" text labels on very small screens, keep emojis */
  @media (max-width: 400px) {
    .topbar-icon-btn { padding: 6px 7px; font-size: 11px; }
  }

  /* Nav items slightly larger tap targets on mobile */
  .nav-item { padding: 9px var(--space-4); }
  .nav-item-label { font-size: 14px; }
  .nav-item-desc  { display: none !important; }
}

/* ── Dark mode sidebar overlay ───────────────────────────────── */
[data-theme="dark"] .sidebar-overlay { background: rgba(0,0,0,.65); }

/* ══════════════════════════════════════════════════════════════
   MOBILE — iPhone (≤ 480px) — ADDITIVE ONLY
   All rules below are inside max-width: 480px.
   Zero impact on desktop, laptop, or iPad.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Prevent any element from pushing page wider than viewport */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .app {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Content area — tighter padding, full width, no overflow */
  .content {
    padding: var(--space-2) var(--space-3);
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Topbar — prevent overflow, constrain title */
  .topbar {
    padding: 0 var(--space-2);
    overflow: hidden;
  }
  .topbar-title {
    font-size: 12px;
    max-width: 38vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Topbar icon buttons — shrink to icon-only width on mobile.
     Buttons contain "🌙 Dark", "ℹ️ About", "❓ Help" as plain text.
     We set overflow:hidden and a fixed small width so only the emoji shows. */
  .topbar-icon-btn {
    padding: 5px 6px;
    font-size: 16px;
    min-width: 0;
    width: 34px;
    overflow: hidden;
    white-space: nowrap;
  }
}