/* ============================================================================
   Navbar / Web — variant FE.C          COMPONENTS.md §8.1, §8.3
   apps/fe-client/CLAUDE.md: FE.C is named explicitly, so this is the variant.

   Actions reduced to three: Notifications, Messages, Account.
   Gamification, To-Dos and the Log-in CTA from the Figma frame are omitted by
   request — which also removes the frame's only two defects:
     · §8 F1  RAW #002329, an orphan value with no token lineage, lived on the
              gamification pill. Gone with it. Nothing here is off-palette.
     · the Log-in CTA. Account replaces it as the identity affordance.

   Mobile: apps/fe-client/CLAUDE.md — "mobile web is this app". The narrow
   layout is `Navbar / Mobile` FE.C (§8.2), same tokens, no fork. It has no
   hamburger because this navbar carries no nav links to reveal; search
   collapses to a trigger instead.

   TODO(tokens): every bare px length in this file is a SIZE or a BREAKPOINT.
   DESIGN.md §12.4 records both as not built, so literals stand in until they
   are. No colour, radius, spacing, border-width or font-size literal appears
   anywhere in this file.
   ========================================================================== */

.navbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 50; /* TODO(tokens): z-index scale not built — DESIGN.md §12.4 */
  display: flex;
  align-items: center;
  gap: var(--space-md);
  /* TODO(tokens): size is not built — DESIGN.md §12.4. 64px is the documented
     height for the FE.C variant (Backoffice forms is the 56px outlier). */
  block-size: 64px;
  padding-inline: var(--space-lg);
  background: var(--color-surface-raised);
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
  /* DESIGN.md §8: Elevation/Sticky is described for "app bars and sticky
     headers on scroll" and is recorded as unconsumed. Consumed here, applied
     only once the page has actually scrolled. */
  transition: box-shadow 120ms ease; /* TODO(tokens): motion scale not built */
}

.navbar[data-scrolled="true"] {
  box-shadow: var(--elevation-sticky);
}

/* --- L / C / R — the documented three-slot layout ------------------------- */
.navbar__start {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  /* Figma: L is a fixed 280px slot. Held as a minimum so the centre slot can
     stay optically centred at 1440 and still collapse gracefully below it. */
  min-inline-size: 232px;
}

.navbar__center {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  justify-content: center;
}

.navbar__end {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  min-inline-size: 232px;
}

/* --- Brand slot ---------------------------------------------------------- */
.navbar__brand {
  display: inline-flex;
  align-items: center;
  border-radius: var(--shape-radius-button);
}

/* ASSETS.md §5 rule 2: logos do not inherit colour and must never be
   recoloured — the Default/Reverse variant is swapped instead, chosen from the
   SURFACE not the theme (rule 3). navbar.js does that swap. */
.navbar__logo {
  /* TODO(tokens): size is not built. 32px tall is the exported lockups' own
     height. Lockup widths differ a lot per brand — BigHeart's wordmark is 80
     wide, BWHI's is 251 — so the width is capped and the glyph scaled down
     inside it. Uniform scaling is not "restyling" under ASSETS.md §5 rule 1;
     it keeps the aspect ratio and the artwork untouched. */
  block-size: 32px;
  inline-size: auto;
  max-inline-size: 180px;
  object-fit: contain;
  object-position: left center;
}

/* --- Navbar / Web / Search — §8.3 ----------------------------------------
   `Search`, not `Search v2`. The component's own Figma description says
   "Prefer Navbar / Web / Search until one version is chosen", and §8 F4 records
   that the two differ only in radius, v2's being a RAW 20. So: bound radius. */
.navbar__search {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-inline-size: 0;
  max-inline-size: 600px;
  /* TODO(tokens): control height is not built — DESIGN.md §12.4. */
  block-size: 40px;
  padding-inline-end: var(--space-xs);
  background: var(--color-soft-neutral-default);
  border-radius: var(--shape-radius-input);
  color: var(--color-content-secondary);
  /* ⚠️ NEW FINDING — not in the audit. In Dark, `soft/neutral/default` and
     `surface/raised` resolve to the SAME value (Neutral/950), so the fill
     alone leaves this control invisible on the navbar. The fill stays as §8.3
     specifies; a hairline delimits it where the fill cannot. CLAUDE.md known
     gaps: "Don't rely on border/default alone to delimit a control" — hence
     border/strong. light-dark() keeps it one declaration, not a fork. */
  border: var(--border-width-thin) solid
    light-dark(transparent, var(--color-border-strong));
  transition: background-color 100ms ease, box-shadow 100ms ease;
}

.navbar__search:hover {
  background: var(--color-soft-neutral-hover);
}

/* Focus. §8.3 gives the Focus variant `content/primary` for the value.
   The ring is the DESIGN.md §7 recipe; :focus-within is the container-level
   equivalent of :focus-visible for a field wrapper, and the inner input is
   what actually takes keyboard focus. */
.navbar__search:focus-within {
  color: var(--color-content-primary);
  outline: var(--shape-focus-width) solid var(--color-border-focus);
  outline-offset: var(--shape-focus-offset);
}

.navbar__search-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  /* Figma: 40px leading slot holding a 16px glyph. */
  inline-size: 40px;
  block-size: 100%;
  color: var(--color-content-secondary);
}

.navbar__search-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-content-primary);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
}

.navbar__search-input:focus {
  outline: none; /* the ring is drawn on the wrapper, which is the visible control */
}

/* type="search" ships its own clear glyph. The DS-styled one below replaces it,
   so suppress the native one rather than showing two. */
.navbar__search-input::-webkit-search-cancel-button,
.navbar__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* §8.3 gives the placeholder `content/secondary`.
   ⚠️ DESIGN.md §9.2 A1: Light content/secondary on surface/raised is 3.36:1
   against a 4.5 requirement. Reported, not silently re-coloured — see the
   README. content/placeholder would be worse (A2, 1.69:1). */
.navbar__search-input::placeholder {
  color: var(--color-content-secondary);
  opacity: 1;
}

/* Clear action, shown once the field has a value. */
.navbar__search-clear {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-full);
  color: var(--color-content-secondary);
}
.navbar__search-clear:hover {
  background: var(--color-soft-neutral-hover);
  color: var(--color-content-primary);
}
.navbar__search-clear:active {
  background: var(--color-soft-neutral-pressed);
}
.navbar__search-clear[hidden] {
  display: none;
}

/* --- Navbar / Web / Item — the icon actions, §8.3 ------------------------
   §8 F7 / §7 F3: the DS Item signals Active by label colour alone. Here Active
   carries three channels — a soft-brand tint, on-soft/brand ink, and a
   _line → _fill glyph swap (ASSETS.md §3: "prefer swapping the weight over
   changing colour alone"). */
.navbar__action {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  /* TODO(tokens): touch target size is not built — DESIGN.md §12.4.
     40px keeps the 32px visual from falling under a usable target. */
  inline-size: 40px;
  block-size: 40px;
  /* No shape token exists for a circular icon control; --shape-radius-avatar
     is avatar-scoped, so this uses the Semantic/Radius step directly, which is
     also what Badge does. See README "Feedback for the DS". */
  border-radius: var(--radius-full);
  color: var(--color-content-primary);
  transition: background-color 100ms ease, color 100ms ease;
}

/* The 32px box the Figma badge geometry is measured from. It sits inside the
   40px touch target so the target can grow without moving the badge. */
.navbar__action-glyph {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* TODO(tokens): size is not built — DESIGN.md §12.4. */
  inline-size: 32px;
  block-size: 32px;
}

.navbar__action:hover {
  background: var(--color-soft-neutral-hover);
  color: var(--color-content-headline);
}

.navbar__action:active {
  background: var(--color-soft-neutral-pressed);
}

.navbar__action[aria-expanded="true"] {
  background: var(--color-soft-brand-default);
  color: var(--color-on-soft-brand);
}

/* The glyph swap. Both weights are declared on the element; the active class
   simply repoints --icon-src, so no colour-only state exists anywhere here. */
.navbar__action[aria-expanded="true"] .icon--notifications {
  --icon-src: url("../../../../assets/icons/e/icon/media/notification_fill.svg");
}
.navbar__action[aria-expanded="true"] .icon--messages {
  --icon-src: url("../../../../assets/icons/e/icon/contact/comment_fill.svg");
}
.navbar__action[aria-expanded="true"] .icon--search {
  --icon-src: url("../../../../assets/icons/e/icon/file/search_2_fill.svg");
}

/* --- Slot — the positioning context for any action that owns a panel ----- */
.navbar__slot {
  position: relative;
  flex: none;
}

/* --- Account — Figma "Account Dropdown" ---------------------------------- */

.navbar__account-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  /* TODO(tokens): control height is not built — DESIGN.md §12.4. */
  block-size: 40px;
  padding-inline: var(--space-2xs) 6px;
  background: var(--color-soft-neutral-default);
  /* Same Dark collision as the search field — see the note there. */
  border: var(--border-width-thin) solid
    light-dark(transparent, var(--color-border-strong));
  /* Figma has a RAW 20 here (a pill). --radius-full is the Semantic/Radius
     step for "Pill and circular" and is what the value was reaching for. */
  border-radius: var(--radius-full);
  color: var(--color-content-primary);
  transition: background-color 100ms ease;
}

.navbar__account-trigger:hover {
  background: var(--color-soft-neutral-hover);
}
.navbar__account-trigger:active {
  background: var(--color-soft-neutral-pressed);
}
.navbar__account-trigger[aria-expanded="true"] {
  background: var(--color-soft-brand-default);
  color: var(--color-on-soft-brand);
}

.navbar__account-caret {
  transition: transform 120ms ease; /* TODO(tokens): motion scale not built */
}
.navbar__account-trigger[aria-expanded="true"] .navbar__account-caret {
  transform: rotate(180deg);
}

/* Account panel opens from the inline end, like the icon panels. */
.navbar__slot--account .dropdown {
  min-inline-size: 260px;
}

.navbar__account-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}

.navbar__account-name {
  color: var(--color-content-headline);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-medium);
}

.navbar__account-email {
  color: var(--color-content-secondary);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

/* --- Mobile search trigger — hidden at desktop widths -------------------- */
.navbar__search-trigger {
  display: none;
}

/* ============================================================================
   Responsive — Navbar / Mobile FE.C (§8.2)
   TODO(tokens): breakpoints are not built — DESIGN.md §12.4. Literal px, and
   the two values below are the only breakpoints this component introduces.
   ========================================================================== */

/* Below 1024: the fixed side slots stop earning their width. */
@media (max-width: 1023px) {
  .navbar__start,
  .navbar__end {
    min-inline-size: 0;
  }
  .navbar__center {
    justify-content: flex-start;
  }
}

/* Below 768: §8.2 layout — padding space/md, search collapses to a trigger
   that expands into a full-width row beneath the bar. */
@media (max-width: 767px) {
  .navbar {
    padding-inline: var(--space-md);
    gap: var(--space-xs);
  }

  .navbar__end {
    gap: var(--space-2xs);
  }

  /* While the search row is open it belongs to the header, so the header's own
     rule would read as a divider inside one element. The row carries it. */
  .navbar:has(.navbar__center[data-open="true"]) {
    border-block-end-color: transparent;
  }

  .navbar__center {
    /* The inline search leaves the bar and is re-parented visually as a row
       under it — one element, no duplicate markup. */
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    padding: var(--space-xs) var(--space-md) var(--space-sm);
    background: var(--color-surface-raised);
    border-block-end: var(--border-width-thin) solid var(--color-border-default);
    box-shadow: var(--elevation-raised);
  }

  .navbar__center[data-open="false"] {
    display: none;
  }

  .navbar__search {
    max-inline-size: none;
  }

  .navbar__search-trigger {
    display: inline-flex;
  }

  .navbar__account-trigger .navbar__account-caret {
    display: none;
  }

  /* Panels anchor to the viewport, not the trigger: a 320px panel hung off a
     trigger near the inline end runs off the screen at 375px. */
  .navbar .dropdown {
    position: fixed;
    inset-block-start: 64px; /* the navbar height — TODO(tokens): size not built */
    inset-inline: var(--space-md);
    min-inline-size: 0;
    max-inline-size: none;
  }
}