/* dash-topbar — global fixed top bar anchoring the brand wordmark + user avatar.
 *
 * Mockup: .tmp/topbar-variants.html (variant B-stamp, approved 2026-05-21).
 *
 * Layout: position:fixed at viewport top, full width, flex row with
 *   space-between. Leaf icon + "Canopy" wordmark on left, header-avatar
 *   button on right (avatar's own CSS handles its visual).
 *
 * Reserve space: every page that mounts the topbar must add top padding
 *   equal to var(--dash-topbar-height) to the first scrollable region so
 *   content doesn't slide under the bar. Helper class .has-dash-topbar
 *   applies that padding to the document body.
 */

:root {
  --dash-topbar-height: 56px;
}

.dash-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--dash-topbar-height);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-space-sm);
  padding: 0 var(--v2-space-lg);
  background: var(--v2-bg-primary);
  border-bottom: 1px solid var(--v2-border-soft);
  /* iOS safe-area: pad the top so the bar clears the notch/status region. */
  padding-top: env(safe-area-inset-top, 0);
  height: calc(var(--dash-topbar-height) + env(safe-area-inset-top, 0px));
}

/* Subpages tighten the left padding so the chevron sits closer to the edge
 * and gets a comfortable hit area without crowding the wordmark. */
.dash-topbar.has-back {
  padding-left: var(--v2-space-sm);
}

/* Back chevron — subpage-only slot. Icon-only, Hunter green, transparent.
 * 40x40 hit target with a 22px chevron (stroke 1.75 to match the leaf icon).
 * decideNavigation logic + draft-discard confirm live in
 * public/js/components/page-back-button.js.
 */
.dash-back {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--v2-radius-sm);
  color: var(--v2-accent-botanical);
  cursor: pointer;
  flex: 0 0 40px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, transform 80ms ease;
}
.dash-back svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dash-back:hover { background: var(--v2-bg-card-hover); }
.dash-back:active { transform: scale(0.95); background: var(--v2-bg-card-hover); }
.dash-back:focus-visible {
  outline: 2px solid var(--v2-accent-botanical);
  outline-offset: 2px;
}

/* Canonical wordmark per docs/design/canopy-canonical-system.md §2.1.
 * Fraunces 500 17px, letter-spacing -0.01em, Hunter green, 8px gap, inline
 * stroke-1.75 leaf SVG (22x22). Verbatim with the locked contract. */
.dash-wordmark {
  display: inline-flex;
  gap: var(--v2-space-sm);
  align-items: center;
  font-family: var(--v2-font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--v2-accent-botanical);
  min-width: 0; /* allow .dash-title ellipsis */
}

/* Canonical leaf icon — matches the .leaf class used in .ob-wordmark /
 * .auth-wordmark across all 4 approved mockups. Stroke 1.75, currentColor
 * so wordmark text + leaf share Hunter green. */
.dash-wordmark .leaf {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

/* Per-page title text inside the wordmark. EXTENSION to the canonical
 * wordmark pattern (Bradly approved 2026-05-21): the text label swaps per
 * view to give the user a clear "where am I" anchor. JS updates
 * .textContent on view-switch in index.html; static pages bake the label
 * into HTML. Truncates with ellipsis if dynamic-type scales the text
 * past available width.
 */
.dash-title {
  display: inline-block;
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Body helper: reserve space for the topbar so the first content row
 * doesn't render under it AND gets breathing room beneath the topbar
 * border. Topbar height + safe-area + 16px gap.
 */
.has-dash-topbar {
  padding-top: calc(var(--dash-topbar-height) + env(safe-area-inset-top, 0px) + var(--v2-space-md));
}