/* ==========================================================================
   Shell layout — topbar, tab bar, page host, map stage, onboarding

   The chrome is white and quiet. Everything with weight — the imagery, the
   routes, the numbers — belongs to the content, not to the frame around it.
   ========================================================================== */

#app {
  display: grid;
  grid-template-rows: var(--topbar-h) auto 1fr;
  /* The explicit zero-floor column matters: the header is a nowrap flex row,
     and without it the grid's single column takes that row's max-content width
     and every page below inherits it, overflowing the viewport on a phone. */
  grid-template-columns: minmax(0, 1fr);
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  background: var(--canvas);
}

/* ------------------------------------------------------------- topbar */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(14, 34, 48, .04);
  position: relative;
  z-index: 40;
  min-width: 0;
  overflow: hidden;
}

.brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.brand-mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--teal) 0%, var(--teal-deep) 100%);
  box-shadow: 0 1px 2px rgba(7, 99, 106, .3), 0 4px 10px rgba(7, 99, 106, .18);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name {
  font-size: 13.5px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
.brand-name b { color: var(--teal-deep); font-weight: 650; }
.brand-sub {
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); font-family: var(--font-mono);
}

.topbar-spacer { flex: 1; }

.ai-status {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 5px 12px 5px 9px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--text-dim); white-space: nowrap;
}
.ai-status .pip {
  width: 7px; height: 7px; border-radius: 99px; background: var(--success);
  box-shadow: 0 0 0 3px rgba(15, 138, 106, .14);
}
.ai-status[data-state="working"] .pip {
  background: var(--teal); box-shadow: 0 0 0 3px rgba(13, 143, 143, .16);
  animation: pip-breathe 1.8s var(--ease) infinite;
}
.ai-status[data-state="alert"] .pip { background: var(--danger); box-shadow: 0 0 0 3px rgba(180, 52, 47, .16); }
@keyframes pip-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.clock-readout { display: flex; align-items: baseline; gap: var(--sp-2); font-family: var(--font-mono); }
.clock-readout .t { font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.clock-readout .d { font-size: 9px; letter-spacing: .16em; color: var(--faint); text-transform: uppercase; }

.profile-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 4px 12px 4px 4px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2);
}
.profile-chip .av {
  width: 25px; height: 25px; border-radius: 99px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--teal), var(--teal-dark));
  font-size: 10px; font-weight: 700; color: #ffffff;
}
.profile-chip .who { font-size: 11.5px; line-height: 1.15; color: var(--ink); }
.profile-chip .who small { display: block; font-size: 9px; color: var(--muted); letter-spacing: .06em; }

/* ------------------------------------------------------------ tabbar */

.tabbar {
  display: flex; align-items: stretch; gap: 2px;
  padding: 0 var(--sp-3);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  z-index: 30;
}
.tabbar::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px 10px;
  color: var(--muted);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-1), background var(--dur-1), border-color var(--dur-2);
}
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab[aria-selected="true"] { color: var(--teal-deep); border-bottom-color: var(--teal); font-weight: 600; }
.tab-icon { display: flex; }

/* A hairline before each new group turns ten tabs into three readable sets. */
.tab[data-tab="depots"], .tab[data-tab="analytics"], .tab[data-tab="settings"] { margin-left: var(--sp-4); }
.tab[data-tab="depots"]::before,
.tab[data-tab="analytics"]::before,
.tab[data-tab="settings"]::before {
  content: ''; position: absolute; left: calc(var(--sp-4) / -2);
  top: 11px; bottom: 11px; width: 1px; background: var(--line);
}
.tab[data-tab="settings"] { margin-left: auto; }

.tab-badge {
  font-family: var(--font-mono); font-size: 9px;
  min-width: 17px; padding: 1px 5px; border-radius: 99px;
  background: var(--surface-3); color: var(--muted); text-align: center;
}
.tab-badge[data-tone="alert"] { background: var(--danger-soft); color: var(--danger); }

/* -------------------------------------------------------- page host */

.pages { position: relative; min-height: 0; overflow: hidden; background: var(--canvas); }

.page-host { position: absolute; inset: 0; overflow: auto; display: none; }
.page-host[data-active="true"] { display: block; animation: page-rise var(--dur-3) var(--ease-out); }
.page-host#page-map { overflow: hidden; }
/* Tabs are not separate applications; they are angles on one network, so the
   change reads as a lift rather than a page load. */
@keyframes page-rise { from { opacity: 0; transform: translateY(6px); } }

.page { display: flex; flex-direction: column; min-height: 100%; }
.page-head {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  flex-wrap: wrap;
}
.page-title {
  margin: 0; font-size: 23px; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink);
}
.page-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 78ch; line-height: 1.6; }
.page-actions { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.page-body { padding: 0 var(--sp-6) var(--sp-7); flex: 1; }
.page-root { min-height: 100%; }

/* ---------------------------------------------------------- map page */

.map-page {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr var(--rail-right);
  min-height: 0;
  background: var(--navy);
}

.map-stage { position: relative; min-width: 0; overflow: hidden; }

/* The canvas is a singleton adopted by the map page: it is positioned into the
   stage rather than re-parented, so switching tabs never destroys the drawing
   context or the tile cache. */
#map-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  background: var(--navy);
  z-index: 0;
}
/* Before the map page adopts it, the canvas must not cover the whole app. */
body > #map-canvas { position: fixed; inset: auto; width: 0; height: 0; opacity: 0; pointer-events: none; }

.map-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: var(--sp-3);
  gap: var(--sp-3);
  z-index: 2;
}
.map-overlay-top, .map-overlay-bottom { display: flex; align-items: flex-start; gap: var(--sp-3); }
.map-overlay-bottom { align-items: flex-end; }
.map-overlay-top > *, .map-overlay-bottom > * { pointer-events: auto; }
.map-overlay .spacer { flex: 1; pointer-events: none; }

/* Chrome over imagery is translucent white and small. The satellite view is
   the point; panels sit on it like instruments on glass, never over it like
   a dashboard. */
.hero-strip {
  display: flex; gap: 1px;
  background: var(--glass-line);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-md);
  overflow: hidden;
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow-map);
  flex-wrap: wrap;
}
.hero-stat {
  background: var(--glass);
  padding: 8px 14px 9px;
  min-width: 92px;
  display: flex; flex-direction: column; gap: 1px;
}
.hero-stat .k {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.hero-stat .v {
  font-family: var(--font-mono); font-size: 18px; font-weight: 600;
  display: flex; align-items: baseline; gap: 3px;
  color: var(--ink); letter-spacing: -.02em;
}
.hero-stat .v small { font-size: 10px; font-weight: 500; color: var(--muted); }
.hero-stat[data-tone="green"] .v { color: var(--success); }
.hero-stat[data-tone="cyan"] .v { color: var(--teal-deep); }
.hero-stat[data-tone="amber"] .v { color: var(--gold-deep); }
.hero-stat[data-tone="gold"] { background: linear-gradient(180deg, rgba(251, 246, 234, .95), rgba(255, 255, 255, .92)); }
.hero-stat[data-tone="gold"] .v { color: var(--gold-deep); }

.hero-empty {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass); backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-md);
  padding: 9px 14px; font-size: 12px; color: var(--text-dim);
  box-shadow: var(--shadow-map);
}

.map-tools { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-end; }
.tool-group {
  display: flex; flex-direction: column;
  background: var(--glass); backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-map);
}
.tool-btn {
  width: 34px; height: 33px; display: grid; place-items: center;
  color: var(--text-dim); border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-1), color var(--dur-1);
}
.tool-btn:last-child { border-bottom: none; }
.tool-btn:hover { background: var(--teal-wash); color: var(--teal-deep); }
.tool-btn[aria-pressed="true"] { background: var(--teal); color: #ffffff; }
.tool-btn svg { width: 15px; height: 15px; }

.layer-menu {
  position: absolute; top: 58px; right: var(--sp-3);
  z-index: 5; pointer-events: auto;
  background: var(--glass); backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--r-md);
  box-shadow: var(--shadow-map);
  padding: var(--sp-2); min-width: 196px;
  animation: panel-open var(--dur-2) var(--ease-out);
}
.layer-menu-head { padding: 2px 6px 6px; }
@keyframes panel-open { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

.glass-bar, .attrib-bar {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--glass); backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-md);
  padding: 7px 12px; box-shadow: var(--shadow-map);
  color: var(--text-dim);
}
.glass-bar .row { display: flex; align-items: center; gap: 6px; }
.attrib-bar { font-size: 10px; color: var(--muted); gap: 0; }
.attrib-warn { color: var(--copper); }

.pick-banner {
  justify-self: center; align-self: start;
  display: flex; align-items: center; gap: 10px;
  pointer-events: auto;
  background: var(--glass); backdrop-filter: var(--blur);
  border: 1px solid var(--teal); border-radius: var(--r-pill);
  padding: 8px 9px 8px 15px; color: var(--teal-deep);
  font-size: 12px; box-shadow: var(--shadow-map);
}

.map-tip {
  position: absolute; z-index: 6; pointer-events: none;
  background: var(--glass); backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--r-sm);
  padding: 8px 11px; box-shadow: var(--shadow-map);
  font-size: 11.5px; line-height: 1.45; max-width: 260px;
}
.map-tip .tt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--teal-deep); text-transform: uppercase;
}
.map-tip .tm { color: var(--ink); margin-top: 2px; }
.map-tip .ts { color: var(--muted); font-family: var(--font-mono); font-size: 10px; margin-top: 3px; }

.inspector {
  border-left: 1px solid var(--line);
  background: var(--canvas);
  overflow-y: auto; min-height: 0;
}
.inspector-inner { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }

/* ------------------------------------------------------- onboarding */

.onboarding {
  position: fixed; inset: 0; z-index: 200;
  background:
    radial-gradient(70% 55% at 12% 4%, var(--teal-wash) 0%, transparent 62%),
    radial-gradient(60% 50% at 92% 96%, var(--gold-wash) 0%, transparent 64%),
    linear-gradient(180deg, #ffffff 0%, var(--canvas) 100%);
  overflow: auto;
}

.ob-shell { display: grid; grid-template-columns: 296px 1fr; min-height: 100dvh; }

.ob-rail {
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.ob-brand { display: flex; align-items: center; gap: 12px; }
.ob-mark { width: 36px; height: 36px; display: block; }
.ob-mark svg { width: 100%; height: 100%; }
.ob-brand strong { display: block; font-size: 15px; letter-spacing: .06em; color: var(--ink); text-transform: uppercase; }
.ob-brand small {
  display: block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); font-family: var(--font-mono);
}

.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-step {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px; font-size: 12.5px; color: var(--faint);
  transition: color var(--dur-2);
}
.ob-step-dot {
  width: 23px; height: 23px; border-radius: 99px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.ob-step[data-state="active"] { color: var(--ink); font-weight: 600; }
.ob-step[data-state="active"] .ob-step-dot { background: var(--teal); border-color: var(--teal-deep); color: #ffffff; }
.ob-step[data-state="done"] { color: var(--text-dim); }
.ob-step[data-state="done"] .ob-step-dot { background: var(--teal-wash); border-color: var(--teal-soft); color: var(--teal-deep); }
.ob-note { font-size: 11.5px; color: var(--muted); line-height: 1.65; margin: auto 0 0; }

.ob-main { padding: var(--sp-7) var(--sp-6); display: flex; align-items: flex-start; justify-content: center; }
.ob-panel { width: min(940px, 100%); display: flex; flex-direction: column; gap: var(--sp-5); }
.ob-head h1 { margin: 0 0 8px; font-size: 30px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.ob-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 70ch; }

.ob-form { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 520px; }
.ob-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.ob-split .ob-form { max-width: none; }
.ob-list h3 {
  margin: 0 0 var(--sp-2); font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}

.ob-row {
  display: grid; grid-template-columns: 3px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.ob-row-bar { align-self: stretch; border-radius: 99px; }
.ob-row-text { min-width: 0; }
.ob-row-text strong { display: block; font-size: 12.5px; color: var(--ink); }
.ob-row-text small { display: block; font-size: 10.5px; color: var(--muted); }

.ob-callout {
  display: flex; gap: 12px; align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--teal-soft);
  background: var(--teal-wash);
  border-radius: var(--r-md);
}
.ob-callout p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-dim); }
.ob-callout > span { color: var(--teal); flex: none; margin-top: 1px; }

.ob-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ob-facts li { display: flex; gap: 12px; align-items: flex-start; }
.ob-fact-icon { color: var(--teal); flex: none; margin-top: 1px; }
.ob-facts strong { display: block; font-size: 12.5px; margin-bottom: 2px; color: var(--ink); }
.ob-facts span span { font-size: 12px; color: var(--muted); line-height: 1.6; }

.ob-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }
.ob-tile {
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); display: flex; flex-direction: column; gap: 3px;
  box-shadow: var(--shadow-1);
}
.ob-tile strong { font-size: 27px; font-family: var(--font-mono); color: var(--ink); letter-spacing: -.03em; }
.ob-tile span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-family: var(--font-mono); }

.ob-nav { display: flex; align-items: center; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.ob-nav .spacer { flex: 1; }

/* ------------------------------------------------------- responsive */

@media (max-width: 1400px) { :root { --rail-right: 322px; } }

@media (max-width: 1100px) {
  .map-page { grid-template-columns: 1fr; }
  .inspector {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: min(348px, 88vw);
    /* Over the imagery it becomes glass rather than a wall. */
    background: var(--glass); backdrop-filter: var(--blur);
    border-left: 1px solid rgba(255, 255, 255, .6);
    box-shadow: var(--shadow-map);
    z-index: 4;
  }
  .ob-shell { grid-template-columns: 1fr; }
  .ob-rail { flex-direction: row; align-items: center; gap: var(--sp-4); border-right: none; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .ob-steps { flex-direction: row; }
  .ob-step span:last-child { display: none; }
  .ob-note { display: none; }
  .ob-split { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --topbar-h: 52px; }
  .brand-sub, .clock-readout .d, .profile-chip .who, #help-btn span { display: none; }
  .topbar { gap: var(--sp-2); padding: 0 var(--sp-3); }
  #service-chip { display: none; }
  .tab-label { display: none; }
  .tab { padding: 12px 13px; }
  .tab[data-tab]::before { display: none; }
  .tab[data-tab] { margin-left: 0; }
  .tab[data-tab="settings"] { margin-left: auto; }
  .page-head, .page-body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .inspector { width: 100%; }
  .hero-strip { max-width: calc(100vw - 92px); }
  .hero-stat { min-width: 74px; padding: 6px 10px; }
  .hero-stat .v { font-size: 15px; }
  .ob-main { padding: var(--sp-4); }
  .ob-head h1 { font-size: 23px; }
}

@media (max-width: 620px) {
  /* Below this the header keeps only identity and the controls that can still
     be reached: the status readout goes, the account avatar stays. */
  #ai-status { display: none; }
  .brand-name { font-size: 12.5px; }
  /* PERSONAL mode has three tabs, so at this width the labels fit again and
     an icon-only bar would be needlessly cryptic. */
  .tabbar:has(.tab:nth-child(4)) .tab-label { display: none; }
  .tabbar:not(:has(.tab:nth-child(4))) .tab-label { display: inline; }
  .tab { padding: 11px 12px; }
}