/* ═══════════════════════════════════════════════════════════════════════
   Desktop sidebar (28 Sep 2026, Harry: "tidy up the desktop view and make
   sure the left toolbar is up to spec ... fill out the toolbar").

   Structure mirrors the phone: the account at the top (Settings, Privacy,
   Report an issue and Log out live in its menu, as they live in the More
   sheet's Account group), the sections with the tab bar's own icons, and the
   two ways of talking to Atlas pinned at the bottom - the desktop form of the
   gold A. Markup: index.html #app-sidebar. Behaviour: js/atlas-sidebar.js.

   Colour comes from the --h4-* tokens (declared on <html> in dark and light by
   home-v4 / training-v2 / nutrition-v2 / more-v2), so both themes are authored
   here and atlas-theme.js skips `atlas-sb` rules instead of synthesising them.
   Every rule is scoped to .atlas-sb: .sidebar-item is also the More sheet's
   row class (a shared class name restyles silently).
   ═══════════════════════════════════════════════════════════════════════ */

/* One width, one token (was a bare 220px in two rules of atlas-sections.css).
   240 fits "Atlas Elite · Chicago" beside the avatar without truncating. */
:root { --atl-sidebar-w: 240px; }
.atlas-sb.sidebar {
  width: var(--atl-sidebar-w);
  padding: 14px 12px 14px;
  gap: 0;
}
@media (min-width: 1024px) {
  .app-layout { margin-left: var(--atl-sidebar-w); }
}

/* ── Account ─────────────────────────────────────────────────────────── */
.atlas-sb .sb-account { position: relative; flex: none; }
.atlas-sb .sb-id {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 8px;
  border: 0; border-radius: 12px; background: none;
  color: inherit; font-family: inherit; text-align: left; cursor: pointer;
  transition: background-color 150ms;
}
.atlas-sb .sb-id:hover,
.atlas-sb .sb-id[aria-expanded="true"],
.atlas-sb:has(.sb-menu [data-section="settings"].active) .sb-id { background: var(--h4-nested); }
.atlas-sb .sb-av {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--h4-gold-soft); color: var(--h4-gold);
  border: 0.5px solid rgba(212, 178, 106, 0.3);
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.atlas-sb .sb-id-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atlas-sb .sidebar-client-name {
  display: block; font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.25;
  color: var(--h4-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atlas-sb .sb-id-sub {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 11.5px; line-height: 1.3; color: var(--h4-muted);
  white-space: nowrap; overflow: hidden;
}
/* #app-sidebar: the synthesised light rule for .sidebar-client-tier carries html[data-theme] and
   out-ranked a class-only selector (tier printed in full ink beside a muted city). */
#app-sidebar.atlas-sb .sidebar-client-tier {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; flex: none;
  font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; color: inherit;
}
#app-sidebar.atlas-sb .sidebar-tier-dot { width: 6px; height: 6px; background: var(--h4-green); box-shadow: none; }
.atlas-sb .sidebar-tz-pill {
  display: inline; min-width: 0; margin: 0; padding: 0; border-radius: 0;
  background: none; color: inherit; font-size: inherit; font-weight: 500; letter-spacing: 0;
  text-align: left; overflow: hidden; text-overflow: ellipsis;
  /* app.js gives the city its own Settings onclick; inside the account
     button that would fire both, so the button takes the click. */
  pointer-events: none;
}
.atlas-sb .sidebar-tz-pill:hover { background: none; }
.atlas-sb .sb-id-sub:has(.sidebar-tz-pill:empty) .sb-sep { display: none; }
.atlas-sb .sb-id-chev { flex: none; display: inline-flex; font-size: 16px; color: var(--h4-faint); }

/* Account menu - drops under the account button, inside the sidebar. */
.atlas-sb .sb-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 14px;
  background: var(--h4-sheet); border: 1px solid var(--h4-border);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
}
.atlas-sb .sb-menu[hidden] { display: none; }
.atlas-sb .sb-menu .sidebar-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 38px; padding: 0 10px; border: 0; border-radius: 9px;
  background: none; box-shadow: none; color: var(--h4-body);
  font-size: 13px; font-weight: 500; text-align: left; text-decoration: none;
}
.atlas-sb .sb-menu .sidebar-item:hover,
.atlas-sb .sb-menu .sidebar-item:focus-visible { background: var(--h4-nested); color: var(--h4-text); outline: none; }
.atlas-sb .sb-menu .sidebar-item.active { background: var(--h4-nested); color: var(--h4-text); border: 0; box-shadow: none; }
.atlas-sb .sb-menu .sidebar-logout { color: var(--h4-red) !important; }
.atlas-sb .sb-menu-rule { height: 1px; margin: 4px 6px; background: var(--h4-hair); }

/* ── Sections ────────────────────────────────────────────────────────── */
.atlas-sb .sidebar-nav { flex: none; gap: 2px; margin-top: 14px; }
.atlas-sb .sidebar-nav .sidebar-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; box-shadow: none; color: var(--h4-muted);
  font-size: 13.5px; font-weight: 500; line-height: 1.2; text-align: left;
  transition: background-color 150ms, color 150ms;
}
.atlas-sb .sidebar-nav .sidebar-item:hover { background: var(--h4-nested); color: var(--h4-text); }
/* Selection never rests on colour alone: ground, ink, weight and the gold icon. */
.atlas-sb .sidebar-nav .sidebar-item.active {
  background: var(--h4-nested); color: var(--h4-text); font-weight: 600;
  border: 0; box-shadow: none;
}
.atlas-sb .sidebar-nav .sidebar-item.active .sb-ic { color: var(--h4-gold); opacity: 1; }
.atlas-sb .sb-ic { flex: none; display: inline-flex; font-size: 18px; color: inherit; opacity: 0.9; }
.atlas-sb .sb-rule { height: 1px; margin: 10px 12px; background: var(--h4-hair); }

/* Check-in state chip - same words and tones as the phone's More sheet row. */
.atlas-sb .sb-meta {
  margin-left: auto; padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2;
  background: var(--h4-gold-soft); color: var(--h4-gold);
}
.atlas-sb .sb-meta.is-warn { background: var(--h4-amber-soft); color: var(--h4-amber); }
.atlas-sb .sb-meta[hidden] { display: none; }

/* ── Talk: Ask Atlas + Message Harry ─────────────────────────────────── */
.atlas-sb .sb-talk {
  flex: none; margin-top: auto; padding-top: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.atlas-sb .sb-talk-row {
  position: relative; display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 56px; padding: 10px 12px 10px 10px;
  border: 1px solid var(--h4-border); border-radius: 14px;
  background: var(--h4-card); color: var(--h4-text);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
.atlas-sb .sb-talk-row[hidden] { display: none; }
.atlas-sb .sb-talk-row:hover { border-color: rgba(212, 178, 106, 0.4); }
.atlas-sb .sb-talk-row:active { transform: scale(0.99); }
.atlas-sb .sb-talk-ic {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--h4-nested); color: var(--h4-text); font-size: 17px;
}
.atlas-sb .sb-talk-ic-a { background: var(--h4-gold); color: var(--h4-gold-ink); }
.atlas-sb .sb-talk-ic-a svg { width: 17px; height: 17px; }
.atlas-sb .sb-talk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atlas-sb .sb-talk-title { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--h4-text); }
.atlas-sb .sb-talk-sub {
  font-size: 11.5px; line-height: 1.3; color: var(--h4-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Unread count: the phone's badge red, not a theme colour (it must read as an alert). */
.atlas-sb .sb-count {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E0543A; color: #fff; font-size: 11px; font-weight: 700; font-style: normal;
  font-variant-numeric: tabular-nums;
}
/* An Atlas answer landed while the panel was closed (AtlasConcierge.answerReady). */
.atlas-sb .sb-ready { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--h4-gold); }
.atlas-sb .sb-count[hidden],
.atlas-sb .sb-ready[hidden] { display: none; }

/* ── Focus + motion ──────────────────────────────────────────────────── */
.atlas-sb .sb-id:focus-visible,
.atlas-sb .sidebar-nav .sidebar-item:focus-visible,
.atlas-sb .sb-talk-row:focus-visible { outline: 2px solid var(--h4-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .atlas-sb .sb-id, .atlas-sb .sidebar-nav .sidebar-item, .atlas-sb .sb-talk-row { transition: none; }
  .atlas-sb .sb-talk-row:active { transform: none; }
}

/* Short windows: tighten before anything scrolls. */
@media (max-height: 720px) {
  .atlas-sb .sidebar-nav .sidebar-item { min-height: 36px; }
  .atlas-sb .sb-talk-row { min-height: 50px; padding-top: 8px; padding-bottom: 8px; }
  .atlas-sb .sb-rule { margin: 6px 12px; }
}

/* Below 1024px the bottom tab bar and the gold A own navigation (BRIEF-MOBILE-
   TABBAR: "tablets get the bar"). The old 60px text rail showed beside the bar
   at 768-1023 with no icons, and the drawer below 768 had no way to open once
   the hamburger was retired. Hidden, not removed: the More sheet still clicks
   the Settings and Log out items programmatically. */
@media (max-width: 1023px) {
  #app-sidebar.atlas-sb { display: none !important; }
  .app-layout { margin-left: 0 !important; }
}