/* ==========================================================================
   uimock.css — in-situ reproduction of the NavTrax app UI.

   Not a screenshot: the app UI rebuilt in markup, so it stays sharp at any
   density and its labels go through i18n like the rest of the site.

   Everything here traces to a file in the app:
     · palette + fonts   app/src/index.css (lines 8-59, 125-139)
     · 64px nav bar      app/src/components/Layout.tsx ("pt-16" on <main>)
     · nav items + icons app/src/components/Navbar.tsx (navLinks)
     · sync panel        app/src/components/Navbar.tsx (sync dropdown)
     · 52px map toolbar  app/src/pages/MapPage.module.css (.layerPanel top-[52px])
     · 300px layer panel app/src/pages/MapPage.module.css (.layerPanel, right-docked)
     · layer rows        app/src/pages/MapPage.module.css (.layerItem, .layerOpacity)
     · legend            app/src/pages/MapPage.module.css (.legendContainer)
     · layer names       app/src/pages/LayerLibrary.tsx

   The app's surface is near-black (--neutral-950 #0a0b0d); the greens are the
   accent ramp, not the background. Tokens are namespaced --nm-* so the app
   palette never leaks into the marketing palette, and every class is .nm-.
   ========================================================================== */

.nm {
  /* app/src/index.css:8-16 — primary ramp */
  --nm-p900:#0a1f14; --nm-p800:#143d28; --nm-p700:#1e5c3c; --nm-p600:#287a50;
  --nm-p500:#3a9b6b; --nm-p400:#5db88a; --nm-p300:#8dd4ad; --nm-p200:#bce8cf;
  /* app/src/index.css:18-28 — neutral ramp */
  --nm-n950:#0a0b0d; --nm-n900:#111318; --nm-n800:#1a1d24; --nm-n700:#252a33;
  --nm-n600:#3a414d; --nm-n500:#5c6575; --nm-n400:#8b94a5; --nm-n300:#b0b8c8;
  --nm-n200:#d0d6e0; --nm-n100:#e8ecf0;
  /* app/src/index.css:39-49 — status */
  --nm-d600:#c92a2a; --nm-d500:#ef4444; --nm-d400:#f87171;
  --nm-w600:#d97706; --nm-w500:#f59e0b;
  --nm-s600:#16a34a; --nm-s500:#22c55e;
  /* app/src/index.css:58-59 — glass */
  --nm-glass:rgba(17,19,24,0.88); --nm-gline:rgba(255,255,255,0.06);

  background: var(--nm-n950);
  color: var(--nm-n200);
  font-family: 'Inter', var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  position: relative;
  user-select: none;
}
.nm * { box-sizing: border-box; }
/* Icons carry width/height attributes (see mock-icons.php); flex containers
   must not stretch them. */
.nm svg { display: block; flex: none; }
/* app/src/index.css:134 — headings are Space Grotesk */
.nm-h { font-family: 'Space Grotesk', var(--font-ui); font-weight: 600; }
/* app/src/index.css:139 */
.nm-mono { font-family: 'JetBrains Mono', var(--font-mono); }

/* --- Stage: scales a fixed composition to the available width -------- */
.nm-stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-stroke-2);
  box-shadow: var(--shadow-4);
}
.nm-stage--desk  { aspect-ratio: 1280 / 800; }
.nm-stage--phone { aspect-ratio: 390 / 844; border-radius: 30px; }

.nm-stage > .nm { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.nm-stage--desk  > .nm { width:1280px; height:800px; transform:scale(var(--nm-scale, calc(100cqw / 1280))); }
.nm-stage--phone > .nm { width:390px;  height:844px; transform:scale(var(--nm-scale, calc(100cqw / 390))); }

/* --- Nav bar — Navbar.tsx:155-234 ------------------------------------
   h-16, neutral-950, 1px neutral-800 bottom, max-w-1440, px-4 lg:px-6.
   There is NO horizontal link row: hamburger, logo, flex-1 spacer, controls.
   The ten navLinks render in the hamburger dropdown (Navbar.tsx:616-700). */
.nm-nav { height:64px; display:flex; align-items:center; gap:8px; padding:0 24px;
  background:var(--nm-n950); border-bottom:1px solid var(--nm-n800); }
/* hamburger — h-9 w-9 rounded-lg, neutral-800 on neutral-300 */
.nm-burger { width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:8px; background:var(--nm-n800); color:var(--nm-n300); }
/* logo Link — gap-3; img h-8 w-8; span text-sm font-semibold neutral-200 pr-5 */
.nm-logo { display:flex; align-items:center; gap:12px; }
.nm-logo img { display:block; width:32px; height:32px; }
.nm-logo b { font-family:'Space Grotesk', var(--font-ui); font-size:14px; font-weight:600;
  color:var(--nm-n200); padding-right:20px; }
/* offline pill — Navbar.tsx:225-233. rounded-full px-2.5 py-1 text-xs font-medium,
   danger-900 bg / danger-400 text / danger-700 border. */
.nm-pill-off { display:inline-flex; align-items:center; gap:6px; border-radius:999px;
  padding:4px 10px; font-size:12px; font-weight:500;
  background:#3d0a0a; color:#f87171; border:1px solid #991b1b; }
.nm-pill-off svg { flex:none; }
.nm-sp { margin-left:auto; }

.nm-ico { width:36px; height:36px; border-radius:8px; display:grid; place-items:center;
  color:var(--nm-n400); position:relative; }
.nm-ico svg { width:18px; height:18px; }
.nm-badge { position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%;
  background:var(--nm-d500); border:1.5px solid var(--nm-n950); }
/* TierBadge compact — rounded (4px), px-1.5 py-0.5, text-[10px] font-semibold
   uppercase tracking-wide. --accent-900/-300 are undefined in index.css, so the
   real badge renders unstyled; the amber family is substituted here. */
.nm-tier { border-radius:4px; padding:2px 6px; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.025em;
  background:rgba(245,158,11,.18); color:#fbbf24; }
/* avatar — Navbar.tsx:475, h-8 w-8 rounded-full text-xs font-semibold.
   Deliberately NOT .nm-av: the phone group rows use that name with a smaller,
   dark-on-bright treatment, and one class serving two components lets source
   order decide the winner. */
.nm-navav { width:32px; height:32px; flex:none; display:grid; place-items:center;
  border-radius:50%; font-size:12px; font-weight:600;
  background:var(--nm-p800); color:var(--nm-p200); }

/* --- Map toolbar (MapPage.module.css: layer panel docks at top-[52px]) --- */
.nm-bar { height:52px; display:flex; align-items:center; gap:10px; padding:0 12px;
  background:var(--nm-n950); border-bottom:1px solid var(--nm-n800); }
/* .searchInput — h-10, rounded-lg, pl-10, neutral-900 on neutral-700 */
.nm-find { position:relative; flex:1; max-width:448px; height:40px; }
.nm-find > svg { position:absolute; left:12px; top:11px; width:18px; height:18px; color:var(--nm-n500); }
.nm-find > div { height:40px; border-radius:8px; padding:0 12px 0 40px; display:flex; align-items:center;
  background:var(--nm-n900); border:1px solid var(--nm-n700); font-size:14px; color:var(--nm-n500); }
/* .viewSelectorButton */
.nm-view { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px;
  font-size:12px; font-weight:500; background:rgba(255,255,255,.05); color:var(--nm-n300);
  border:1px solid var(--nm-gline); white-space:nowrap; }
/* .exitButton — warning-700 */
.nm-exit { display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:8px;
  font-size:12px; font-weight:600; background:#b45309; color:#fef3c7; }
/* .layersToggle + .layersToggleExpanded */
.nm-ltog { width:40px; height:40px; border-radius:8px; display:grid; place-items:center;
  background:var(--nm-p700); color:var(--nm-n300); }
.nm-ltog svg { width:18px; height:18px; }

.nm-chip { font-family:'JetBrains Mono', var(--font-mono); font-size:10px; letter-spacing:.08em;
  padding:5px 9px; border-radius:999px; border:1px solid var(--nm-n700); color:var(--nm-n400);
  white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.nm-chip svg { width:12px; height:12px; }
.nm-view svg, .nm-exit svg { width:14px; height:14px; }
.nm-ph > svg { width:15px; height:15px; color:var(--nm-p400); }
.nm-chip.ok { color:var(--nm-p300); border-color:var(--nm-p700); background:rgba(30,92,60,.28); }
.nm-chip.warn { color:var(--nm-w500); border-color:#78350f; background:rgba(120,53,15,.3); }
.nm-dot { width:6px; height:6px; border-radius:50%; background:var(--nm-s500); }

/* --- Map area --------------------------------------------------------- */
.nm-map { display:flex; height:calc(100% - 116px); position:relative; }
.nm-canvas { flex:1; position:relative; background:#0b1a13; }
.nm-canvas > svg { position:absolute; inset:0; width:100%; height:100%; }

/* .layerPanel — right-docked, 300px, glass, blur 16 */
.nm-lp { width:300px; background:var(--nm-glass); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); border-left:1px solid var(--nm-gline);
  display:flex; flex-direction:column; overflow:hidden; }
.nm-lph { padding:16px; border-bottom:1px solid var(--nm-gline); }
.nm-lpt { display:flex; align-items:center; gap:8px; }
.nm-lpt > svg { width:18px; height:18px; color:var(--nm-p400); }
.nm-lpt b { font-family:'Space Grotesk', var(--font-ui); font-size:18px; font-weight:600;
  color:var(--nm-n200); }
.nm-add { width:24px; height:24px; border-radius:6px; display:grid; place-items:center;
  background:var(--nm-p600); color:var(--nm-n100); }
.nm-add svg { width:13px; height:13px; }
.nm-allon  { padding:4px 8px; font-size:12px; font-weight:500; color:var(--nm-p400); }
.nm-alloff { padding:4px 8px; font-size:12px; font-weight:500; color:var(--nm-n500); }
.nm-lps { position:relative; margin-top:12px; }
.nm-lps > svg { position:absolute; left:10px; top:9px; width:15px; height:15px; color:var(--nm-n500); }
.nm-lps > div { height:34px; border-radius:8px; padding:0 10px 0 32px; display:flex; align-items:center;
  background:var(--nm-n900); border:1px solid var(--nm-n700); font-size:13px; color:var(--nm-n500); }

/* --- Layer rows (MapPage.module.css:731-805) --------------------------- */
.nm-lgroup { padding:12px 16px 5px; font-family:'JetBrains Mono', var(--font-mono);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--nm-n500); }
/* .layerItem — gap-2, rounded-md, px-2 py-1.5, text-sm */
.nm-litem { display:flex; align-items:center; gap:8px; margin:0 8px; padding:6px 8px;
  border-radius:6px; font-size:14px; }
/* .layerItemVisible — an enabled row is tinted primary-900 */
.nm-litem.on { background:var(--nm-p900); }
/* .layerCheckbox — h-4 w-4, border-2 neutral-600 */
.nm-cb { width:16px; height:16px; border-radius:4px; border:2px solid var(--nm-n600);
  flex:none; display:grid; place-items:center; }
/* .layerCheckboxChecked — primary-500 */
.nm-cb.on { background:var(--nm-p500); border-color:var(--nm-p500); }
.nm-cb.on svg { width:10px; height:10px; color:var(--nm-n950); }
/* .layerIcon / .layerIconVisible */
.nm-litem > svg { width:15px; height:15px; color:var(--nm-n400); flex:none; }
.nm-litem.on > svg { color:var(--nm-p400); }
/* .layerName — flex-1 truncate, neutral-300; visible: neutral-100 + 500 */
.nm-lname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--nm-n300); }
.nm-litem.on .nm-lname { color:var(--nm-n100); font-weight:500; }
/* .layerOpacity — label + slider */
.nm-lop { display:flex; align-items:center; gap:8px; flex:none; }
.nm-lop > span { font-family:'JetBrains Mono', var(--font-mono); font-size:10px;
  font-variant-numeric:tabular-nums; color:var(--nm-n400); }
/* .layerOpacitySlider — h-1 w-24, gradient fill to --opacity, 12px thumb */
.nm-slider { position:relative; width:96px; height:4px; border-radius:999px;
  background:linear-gradient(to right, var(--nm-p500) var(--opacity,0%), var(--nm-n700) var(--opacity,0%)); }
.nm-slider::after { content:""; position:absolute; top:-4px; left:var(--opacity,0%);
  margin-left:-6px; width:12px; height:12px; border-radius:50%;
  background:var(--nm-p400); border:2px solid var(--nm-n950); }
.nm-litem.off .nm-slider { opacity:.4; }

/* --- Legend (MapPage.module.css:638-660) ------------------------------- */
.nm-legend { margin-top:auto; padding:14px 16px; border-top:1px solid var(--nm-gline); }
/* .legendLabel — block text-[10px] uppercase neutral-500 */
.nm-legend > span { display:block; font-size:10px; text-transform:uppercase; color:var(--nm-n500); }
/* .legendItems — flex flex-wrap gap-1 */
.nm-litems { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
/* .legendItem — flex items-center gap-1 */
.nm-li { display:flex; align-items:center; gap:4px; }
/* .legendColor — h-2 w-2 rounded-full */
.nm-lc { width:8px; height:8px; border-radius:50%; flex:none; }
/* .legendText — text-[9px] neutral-500 */
.nm-li > em { font-style:normal; font-size:9px; color:var(--nm-n500); }

/* --- Small text helpers ---------------------------------------------- */
.nm-mut { color:var(--nm-n400); }
.nm-sm { font-size:12px; } .nm-xs { font-size:10.5px; }

/* progress bar — Navbar.tsx sync panel */
.nm-prog { height:8px; border-radius:999px; background:var(--nm-n800); overflow:hidden; }
.nm-prog i { display:block; height:100%; border-radius:999px; background:var(--nm-p500); }

/* Card + progress used ONLY by the phone composition, which is our own
   arrangement rather than a reproduction (see mock-phone.php). Flutter tokens
   are applied by the .nm--flutter block below. */
.nm-card { border-radius:12px; padding:12px 14px;
  border:1px solid var(--nm-gline); background:var(--nm-glass);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }

/* --- Phone -------------------------------------------------------------
   The mobile client is Flutter and has its own palette, distinct from the web
   client's neutral surface: a green gradient scaffold with translucent cards
   and 20%-alpha primary borders. Values from
   app/src/mobile/FLUTTER_MOBILE_SPEC.md (LoginScreen, lines 2292-2533).
   ---------------------------------------------------------------------- */
.nm--flutter {
  --nf-bg1:#0a1f14; --nf-bg2:#0d2b1a;      /* scaffold gradient */
  --nf-card:rgba(13,31,23,0.65);            /* 0xFF0d1f17 @ .65 */
  --nf-line:rgba(40,122,80,0.2);            /* 0xFF287a50 @ .2 */
  --nf-ring:rgba(40,122,80,0.25);
  --nf-accent:#287a50;
  --nf-txt:#f0f0f0; --nf-body:#c0d0c8; --nf-mut:#8a9a8a; --nf-dim:#5a7a6a;

  background:linear-gradient(160deg, var(--nf-bg1), var(--nf-bg2));
  color:var(--nf-body);
}
.nm--flutter .nm-card,
.nm--flutter .nm-panel { background:var(--nf-card); border:1px solid var(--nf-line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.nm--flutter .nm-ph { border-bottom:1px solid var(--nf-line); }
.nm--flutter .nm-ph > svg { color:#8dd4ad; }
.nm--flutter .nm-ph b { color:var(--nf-txt); }
.nm--flutter .nm-row { border-bottom:1px solid var(--nf-line); }
.nm--flutter .nm-mut { color:var(--nf-mut); }
.nm--flutter .nm-prog { background:rgba(255,255,255,.07); }
.nm--flutter .nm-prog i { background:var(--nf-accent); }
.nm--flutter .nm-chip { border-color:var(--nf-line); color:var(--nf-mut); }
.nm--flutter .nm-chip.ok { color:#8dd4ad; border-color:var(--nf-ring); background:rgba(40,122,80,.18); }
.nm--flutter .nm-ico { color:var(--nf-dim); }
.nm--flutter .nm-status { color:var(--nf-mut); }
.nm--flutter .nm-logo b { color:var(--nf-txt); }

.nm-status { height:44px; display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; font-family:'JetBrains Mono', var(--font-mono); font-size:11px; color:var(--nm-n300); }
.nm-row { display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1px solid var(--nm-gline); }
.nm-row:last-child { border-bottom:0; }
.nm-av { width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-family:'JetBrains Mono', var(--font-mono); font-size:9.5px; font-weight:600;
  color:var(--nm-n950); flex:none; }
.nm-panel { background:var(--nm-n900); border:1px solid var(--nm-n800); border-radius:8px; }
.nm-ph { padding:11px 14px; border-bottom:1px solid var(--nm-gline); display:flex;
  align-items:center; gap:8px; }
.nm-ph b { font-family:'Space Grotesk', var(--font-ui); font-size:13px; font-weight:600;
  color:var(--nm-n200); }
.nm-btn { flex:1; padding:13px; border-radius:8px; text-align:center; font-size:13px;
  font-weight:600; display:flex; align-items:center; justify-content:center; gap:7px; }
.nm-btn svg { width:15px; height:15px; }
.nm-btn--go  { background:var(--nf-accent, var(--nm-p600)); color:#fff; }
.nm-btn--sos { background:var(--nm-d600); color:#fff; }

/* --- Caption + arrangement -------------------------------------------- */
.nm-caption { display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); margin-top:var(--s-4); }
.nm-caption span { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-4); }
.nm-caption span::before { content:"— "; color:var(--accent); }

.nm-duo { display:grid; grid-template-columns:minmax(0,1fr) 250px;
  gap:clamp(20px,3vw,44px); align-items:center; }
@media (max-width: 900px) {
  .nm-duo { grid-template-columns:minmax(0,1fr); }
  .nm-duo > .nm-stage--phone { max-width:300px; margin-inline:auto; }
}

/* --- Map-page offline indicator — MapPage.module.css:189-199 -----------
   h-8 w-8 rounded-lg; neutral-500 when offline, success-500 when online. */
.nm-off { width:32px; height:32px; flex:none; display:grid; place-items:center;
  border-radius:8px; color:var(--nm-n500); }

/* --- Layer-panel footer — MapPage.module.css:665-730 -------------------- */
.nm-panelfoot { padding:10px 12px 6px; border-top:1px solid var(--nm-gline); }
/* .flightTrackerToggle + .flightTrackerToggleOff —
   w-full justify-between rounded-lg py-1.5 px-2 text-xs font-medium */
.nm-ft { display:flex; align-items:center; justify-content:space-between;
  border-radius:8px; padding:6px 8px; font-size:12px; font-weight:500;
  background:var(--nm-n800); color:var(--nm-n300); border:1px solid var(--nm-n700); }
.nm-ft svg { width:14px; height:14px; }
.nm-ftoff { font-family:'JetBrains Mono', var(--font-mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--nm-n500); }
/* .collectionPanelButton — w-full center gap-2 rounded-lg py-1.5 text-xs */
.nm-coll { display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:8px; border-radius:8px; padding:6px 0; font-size:12px; font-weight:500;
  background:var(--nm-n800); color:var(--nm-n300); border:1px solid var(--nm-n700); }
.nm-coll svg { width:14px; height:14px; }
/* .collectionProgressBar — mt-2 h-1.5 rounded-full neutral-700; fill primary-500 */
.nm-collbar { margin-top:8px; height:6px; border-radius:999px; overflow:hidden;
  background:var(--nm-n700); }
.nm-collbar > i { display:block; height:100%; border-radius:999px; background:var(--nm-p500); }
/* .collectionProgressText — mt-1 text-center text-[10px] neutral-500 */
.nm-colltext { margin-top:4px; text-align:center; font-size:10px; color:var(--nm-n500); }