/* ────────────────────────────────────────────────────────────────────
   theme.css — shared design tokens + reusable button classes + footer.
   Loaded BEFORE styles.css / dashboard.css on every page so the
   variables can override the previous ad-hoc colours and so the
   .btn-* classes are available globally. The palette is the same one
   login.html already uses; we hoist it to a single source of truth.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* Brand palette — BIM (cyan-ish) + GIS (warm orange) bridge. */
  --brand-bg-1:   #0c1424;       /* deepest background tier */
  --brand-bg-2:   #0f1d33;       /* secondary background */
  --brand-bg-3:   #061222;       /* the very back layer */
  --brand-surface:#141d2e;       /* card / panel surface */
  --brand-surface-2:#1c222d;     /* slightly lighter card alt */
  --brand-line:   rgba(255, 255, 255, 0.08);
  --brand-line-strong: rgba(255, 255, 255, 0.16);

  /* Typography */
  --brand-text:   #e8ecf1;
  --brand-muted:  #9aa7bd;
  --brand-faint:  #828ea3;

  /* Accents */
  --brand-bim:    #5fc6ff;       /* primary (cyan) */
  --brand-gis:    #f0a868;       /* warm orange */
  --brand-accent: #8df1cc;       /* success mint */
  --brand-warn:   #f0c466;       /* yellow warning */
  --brand-error:  #ff7373;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Shadows */
  --shadow-card: 0 12px 36px rgba(0, 0, 0, 0.32);
  --shadow-pop:  0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Base styling for .btn-link anchors that are NOT inside a dashboard
   `.actions` bar — e.g. links in table cells (models actions-cell) or in
   `.dash-header .meta`. Without this they fall back to the browser-default
   blue, which is unreadable on the dark surface. dashboard.css's
   `.actions .btn-link` is more specific and loads later, so the pill-style
   header buttons are unaffected. */
a.btn-link { color: var(--brand-bim); text-decoration: none; }
a.btn-link:hover { text-decoration: underline; }

/* ── Reusable button classes ─────────────────────────────────────────
   Use one of .btn-primary / .btn-secondary / .btn-ghost / .btn-danger
   instead of inline styles. They sit on top of native <button> so any
   existing <button> already gets the base styles below. */

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  border-radius: var(--r-md);
  font: 13px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: filter 120ms, background 120ms, border-color 120ms;
  border: 1px solid var(--brand-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--brand-text);
}
.btn-primary {
  background: linear-gradient(145deg,
              rgba(141, 241, 204, 0.28),
              rgba(141, 241, 204, 0.15));
  border-color: rgba(141, 241, 204, 0.5);
  color: #d5fce8;
  font-weight: 600;
}
.btn-secondary {
  background: rgba(95, 198, 255, 0.16);
  border-color: rgba(95, 198, 255, 0.4);
  color: #cde;
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--brand-muted);
}
.btn-danger {
  background: rgba(255, 115, 115, 0.16);
  border-color: rgba(255, 115, 115, 0.45);
  color: #fcc;
}
.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-ghost:hover:not(:disabled),
.btn-danger:hover:not(:disabled) {
  filter: brightness(1.12);
}
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Focus visibility ── universally improves keyboard nav */
:focus-visible {
  outline: 2px solid var(--brand-bim);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Site footer ────────────────────────────────────────────────────
   Same markup on every page. Use:
     <footer class="site-footer">
       Software design by Younes Hassanzadeh
     </footer>
   Sits at the very bottom of the document. On viewer/login it's
   absolute-positioned bottom-right so it doesn't intrude on the canvas. */
.site-footer {
  font-size: 11px;
  color: var(--brand-faint);
  letter-spacing: 0.3px;
  text-align: center;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--brand-line);
  margin-top: var(--sp-5);
  background: rgba(0, 0, 0, 0.18);
}
.site-footer a {
  color: var(--brand-muted);
  text-decoration: none;
}
.site-footer a:hover { color: var(--brand-bim); }

/* Floating variant for pages whose body is a full-bleed canvas (the
   3D viewer, login). Sits bottom-right, glassy, doesn't intercept
   pointer events except on its own surface. */
.site-footer--float {
  position: fixed;
  bottom: 6px;
  right: 10px;
  margin: 0;
  padding: 4px 10px;
  background: rgba(20, 29, 46, 0.7);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  pointer-events: auto;
  z-index: 100;
  backdrop-filter: blur(6px);
  font-size: 10px;
}

/* ── Phase 2 additions ──────────────────────────────────────────────
   Breadcrumb component (C4), keyboard cheatsheet modal (C9), and
   improved empty-state component (C6). Used by projects/project/
   models/admin/account pages and the viewer. */

/* Breadcrumb — flat horizontal trail with chevrons. Sits inside the
   dash-header on dashboard pages, or as the first row of a floating
   panel on the viewer / login. */
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--brand-muted);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.crumbs li + li::before {
  content: "›";
  color: var(--brand-faint);
  margin-right: 2px;
}
.crumbs a {
  color: var(--brand-bim);
  text-decoration: none;
}
.crumbs a:hover { text-decoration: underline; }
.crumbs .here {
  color: var(--brand-text);
  font-weight: 500;
}

/* Empty state with optional icon + CTA. Replaces the dim-grey italic
   pattern used inconsistently around the app. */
.empty-state-rich {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 24px;
  color: var(--brand-muted);
  background: rgba(0, 0, 0, 0.18);
  border: 1px dashed var(--brand-line-strong);
  border-radius: var(--r-lg);
}
.empty-state-rich .icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.55;
}
.empty-state-rich h4 {
  margin: 0 0 6px;
  color: var(--brand-text);
  font-weight: 600;
  font-size: 15px;
}
.empty-state-rich p {
  margin: 0 0 14px;
  font-size: 12px;
  max-width: 360px;
  line-height: 1.5;
}

/* Keyboard cheatsheet modal — opened by clicking the `?` chip at the
   top of any page. Pure CSS modal; the `?` chip toggles `[open]` on
   #kbd-cheat-backdrop. */
#kbd-cheat-fab {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 90;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--brand-line);
  background: rgba(20, 29, 46, 0.9);
  color: var(--brand-muted);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  backdrop-filter: blur(6px);
  transition: color 120ms, border-color 120ms, transform 120ms;
}
#kbd-cheat-fab:hover {
  color: var(--brand-bim);
  border-color: var(--brand-bim);
  transform: scale(1.06);
}

.kbd-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 22, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
}
.kbd-modal-bg[hidden] { display: none; }
.kbd-modal {
  background: var(--brand-surface);
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 22px 24px;
}
.kbd-modal h3 {
  margin: 0 0 16px;
  font-size: 17px;
  color: var(--brand-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.kbd-modal h3 .x {
  margin-left: auto;
  cursor: pointer;
  color: var(--brand-muted);
  background: none;
  border: none;
  font-size: 18px;
}
.kbd-modal .section-title {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--brand-faint);
  letter-spacing: 0.6px;
  margin: 14px 0 6px;
}
.kbd-modal .row {
  display: flex;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  color: var(--brand-text);
  border-bottom: 1px solid var(--brand-line);
}
.kbd-modal .row:last-child { border-bottom: none; }
.kbd-modal .row .desc { flex: 1; color: var(--brand-muted); font-size: 12px; }
.kbd-modal .keycap {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  margin-right: 4px;
  text-align: center;
  font-family: ui-monospace, "Cascadia Mono", monospace;
  font-size: 11px;
  color: var(--brand-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--brand-line-strong);
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Tab badges (PR9) shared with viewer .rp-badge. */
.tab-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.10);
  color: var(--brand-text);
  font-size: 10px;
  font-weight: 500;
  vertical-align: 1px;
}
.tab.active .tab-badge {
  background: rgba(141, 241, 204, 0.28);
  color: #cfe;
}

/* ── Phase 3 additions — responsive behaviour ───────────────────────
   Adds three pieces of mobile/responsive polish that target the
   highest-impact breakages found in the audit (C2 / PR3).
   ─────────────────────────────────────────────────────────────────── */

/* (PR3) Project.html tab bar wraps on narrow screens instead of
   forcing horizontal scroll. */
@media (max-width: 720px) {
  nav.tabs {
    flex-wrap: wrap !important;
    padding: 4px 12px !important;
    gap: 4px !important;
  }
  nav.tabs .tab {
    font-size: 13px !important;
    padding: 6px 10px !important;
  }
  .tab-panel { padding: 12px 16px !important; }
  .dash-header { padding: 12px 16px !important; flex-wrap: wrap; gap: 8px; }
  .dash-header h1 { font-size: 16px !important; }
  .dash-header .actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .stats-row { grid-template-columns: 1fr 1fr !important; padding: 12px 16px !important; }
  .grid { padding: 0 12px 16px !important; }
  .upload-card, .table-card { padding: 12px !important; margin: 12px !important; }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr !important; }
  .grid { grid-template-columns: 1fr !important; }
}

/* (C2) Viewer panels on tablets / phones. The left + right panels
   become bottom sheets that the user can collapse by tapping the
   header. The Cesium canvas takes the rest of the screen.
   The trigger is < 900 px because the panels need ~520 px of width
   side-by-side to be useful. */
@media (max-width: 900px) {
  #left-panel,
  #panel {
    /* Switch from absolute side panels to bottom sheets. */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-height: 45vh !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5) !important;
    z-index: 50;
  }
  #left-panel  { top: auto !important; bottom: 0 !important; }
  #panel       { top: 50vh !important;
                 bottom: auto !important;
                 max-height: 50vh !important;
                 padding: 10px 14px !important;
                 border-radius: 0 !important;
                 width: 100% !important;
                 box-shadow: none !important; }
  #cesium { height: 50vh !important; }

  /* When the user has collapsed the left panel with the chevron we
     reduce it to a single bar at the bottom — keeps the viewport for
     the model. */
  #left-panel.collapsed { max-height: 36px !important; overflow: hidden; }

  /* The floating site footer would otherwise sit on top of the
     bottom sheet on phones — move it above the right panel chip. */
  .site-footer--float { bottom: 51vh !important; right: 6px !important; }
}

/* Touch-only polish: hover states don't apply on touch devices, so we
   pre-brighten the primary actions a bit. */
@media (hover: none) {
  .btn-primary, .btn-secondary { filter: brightness(1.08); }
}

/* Make the keyboard FAB invisible on small screens — no keyboard. */
@media (max-width: 600px) and (pointer: coarse) {
  #kbd-cheat-fab { display: none; }
}

/* ── Phase 4 — polish: skeletons, focus, clip labels, measure indicator ─ */

/* Generic skeleton block. Apply .skeleton to any element to get a
   shimmering placeholder. Use width/height inline to size it. */
.skeleton {
  display: block;
  background: linear-gradient(90deg,
                rgba(255, 255, 255, 0.04) 0%,
                rgba(255, 255, 255, 0.10) 50%,
                rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: skeleton-shimmer 1.4s linear infinite;
  min-height: 14px;
}
.skeleton-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* (V10) Annotated clip-plane slider. Add `data-clip-ends="top|bottom"`
   to the slider's parent .lp-tool-row to show "roof" / "floor" labels
   either side. Falls back gracefully on touch by hiding the labels. */
#v-clip-controls::before,
#v-clip-controls::after {
  font-size: 9px;
  color: var(--brand-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
#v-clip-controls::before { content: "floor"; order: 0; }
#v-clip-controls::after  { content: "roof";  order: 99; }

/* (V8) When the measure tool is armed, the canvas gets cursor:crosshair
   already; also pulse the button so the user remembers "I'm waiting for
   your next click". We can't add JS for this in CSS-only mode, but the
   measure-active class is toggled by main.js when on. */
#v-measure.armed,
#v-clip.armed,
#v-walk.armed {
  background: rgba(141, 241, 204, 0.22) !important;
  border-color: rgba(141, 241, 204, 0.55) !important;
  color: #d5fce8 !important;
  animation: btn-armed-pulse 1.6s ease-in-out infinite;
}
@keyframes btn-armed-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(141, 241, 204, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(141, 241, 204, 0); }
}

/* Skeleton row used while #grid populates in projects.html. */
.card-skeleton {
  background: var(--brand-surface-2);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ────────────────────────────────────────────────────────────────────
   Toast notifications (UiShared.toast.*)

   Bottom-right stack, max 5 visible at once. Slide-in on append,
   slide-out on dismiss / auto-expire. Click-to-dismiss anywhere on
   the toast body.
   ──────────────────────────────────────────────────────────────────── */
#propos-toasts {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;   /* newest at the BOTTOM (closest to mouse) */
  gap: 8px;
  pointer-events: none;             /* container is invisible to clicks */
  max-width: min(420px, calc(100vw - 32px));
}

.propos-toast {
  pointer-events: auto;             /* but each toast is clickable */
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #1f2733;
  color: #cde;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  cursor: pointer;
  word-wrap: break-word;
  animation: propos-toast-in 180ms ease-out;
}

.propos-toast--info    { border-left: 3px solid #6aa3ff; }
.propos-toast--success { border-left: 3px solid #4caf50; color: #c8eecc; }
.propos-toast--error   { border-left: 3px solid #ef5350; color: #ffd7d4; }

.propos-toast.leaving {
  animation: propos-toast-out 200ms ease-in forwards;
}

@keyframes propos-toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes propos-toast-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(20px); opacity: 0; }
}

/* Respect the user's motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .propos-toast, .propos-toast.leaving { animation: none; }
}

/* R7 — Accessibility refinement: the generic :focus-visible ring above
   sits 2px OFF the element, which looks detached on already-bordered
   form fields. Pin the ring to the field edge so it reads as "active". */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-bim);
  outline-offset: 0;
}

/* ────────────────────────────────────────────────────────────────────
   R7 — Styled confirm / alert modal (UiShared.confirm / .alert)

   Replaces the browser-native confirm()/alert() dialogs, which can't be
   themed, clash with the dark UI, and are easy to mis-click. Matches the
   toast palette: error/danger = red accent, info = brand blue.
   ──────────────────────────────────────────────────────────────────── */
.propos-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 16, 0.62);
  padding: 24px;
  animation: propos-modal-fade 140ms ease-out;
}
.propos-modal {
  width: 100%;
  max-width: 420px;
  background: #1c2330;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: propos-modal-pop 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.propos-modal h4 {
  margin: 0;
  padding: 16px 18px 8px;
  font-size: 15px;
  color: #e8eef6;
}
.propos-modal .body {
  padding: 0 18px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #aebbcd;
  white-space: pre-line;   /* honour \n in messages */
}
.propos-modal .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.propos-modal button {
  font: inherit;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #cdd8e6;
  transition: filter 0.12s, background 0.12s;
}
.propos-modal button:hover { filter: brightness(1.15); }
.propos-modal button.confirm {
  border-color: rgba(106, 163, 255, 0.5);
  background: linear-gradient(145deg, rgba(106,163,255,0.28), rgba(106,163,255,0.15));
  color: #eaf2ff;
}
.propos-modal button.confirm.danger {
  border-color: rgba(239, 83, 80, 0.55);
  background: linear-gradient(145deg, rgba(239,83,80,0.30), rgba(239,83,80,0.16));
  color: #ffe2e0;
}
@keyframes propos-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes propos-modal-pop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .propos-modal-bg, .propos-modal { animation: none; }
}

/* ────────────────────────────────────────────────────────────────────
   R9 — Semantic button color modifiers (was inline style= on buttons)

   These set ONLY background/color/border — padding, radius, font and
   hover/disabled still come from the generic `button {}` rule in
   styles.css, exactly as the old inline styles did. Values are
   byte-identical to the inline styles they replaced, so rendering is
   unchanged; the win is one class instead of a repeated style string.

     .btn-pos      green  — positive / confirm-ish actions (open, preview, pick)
     .btn-info     blue   — informational (WMS/WFS copy, jump-to-viewer)
     .btn-warn     amber  — caution (re-sync, AR jump)
     .btn-cancel   red    — cancel / abort (paired with a hidden toggle)
     .btn-neutral  grey   — low-emphasis utility (refresh)
   ──────────────────────────────────────────────────────────────────── */
.btn-pos     { background: rgba(108,216,168,0.18); color: #cee; border: 1px solid rgba(108,216,168,0.45); }
.btn-info    { background: rgba(120,160,230,0.18); color: #cde; border: 1px solid rgba(120,160,230,0.45); }
.btn-warn    { background: rgba(255,184,108,0.18); color: #fec; border: 1px solid rgba(255,184,108,0.45); }
.btn-cancel  { background: rgba(230,120,120,0.25); color: #fcc; border: 1px solid rgba(230,120,120,0.5);  }
.btn-neutral { background: rgba(255,255,255,0.06); color: #aac; border: 1px solid rgba(255,255,255,0.15); }

/* ────────────────────────────────────────────────────────────────────
   R10 — Branded site header (UiShared.installSiteHeader)

   Slim dark top bar shared across dashboard pages: logo + BIM·GIS
   wordmark, primary nav (active item highlighted), user chip + sign-out.
   Sits above the page's existing title/breadcrumb bar.
   ──────────────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 52px;
  padding: 0 20px;
  background: #10151f;
  border-bottom: 1px solid var(--brand-line);
  position: sticky;
  top: 0;
  z-index: 200;
}
.site-header .sh-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}
.site-header .sh-word {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--brand-text);
}
.site-header .sh-dot { color: var(--brand-gis); }
.site-header .sh-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-header .sh-nav a {
  padding: 6px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-muted);
  text-decoration: none;
  transition: color 120ms, background 120ms;
}
.site-header .sh-nav a:hover { color: var(--brand-text); background: rgba(255,255,255,0.05); }
.site-header .sh-nav a.active {
  color: #eaf2ff;
  background: rgba(95, 198, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(95, 198, 255, 0.28);
}
.site-header .sh-spacer { flex: 1; }
.site-header .sh-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.site-header .sh-email {
  font-size: 12px;
  color: var(--brand-muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-header .sh-signout {
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--brand-line);
  background: rgba(255,255,255,0.04);
  color: var(--brand-muted);
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.site-header .sh-signout:hover { color: var(--brand-error); border-color: rgba(255,115,115,0.45); }

/* On narrow screens, drop the email text + tighten spacing so the bar
   still fits logo + nav + sign-out. */
@media (max-width: 640px) {
  .site-header { gap: 10px; padding: 0 12px; }
  .site-header .sh-email { display: none; }
  .site-header .sh-nav a { padding: 6px 9px; }
}