/* ==========================================================================
   Air Market - v3 / topnav.  Tiers 1 and 2 of the commerce top bar.
   Pairs with assets/js/v3/topnav.js.  REDESIGN.md §11.3.

   SCOPE. Every selector below starts with :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar, so
   nothing here can reach v0, v1 or v2, and nothing here can reach the page
   below the bar either. v3 is a SHELL change: the card, grid, hero and type
   language all come from store-v2.css, unmodified. v4 shares this exact bar
   (V4-SPEC.md §2.3: it only reorders the detail page below), which is why the
   gate is "v3 or v4" rather than a private v4 clause.

   SHARED PROPERTIES. Heights, gutter, measure, layers and easing are declared
   once by store-v3-core.css on :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) and consumed here:
     --v3-tier1-h  --v3-bar-h  --v3-gutter  --v3-max  --v3-ease
     --v3-ink  --v3-paper  --v3-field  --v3-line  --v3-verif
   Core swaps --v3-tier1-h / --v3-bar-h to their condensed values on
   #topbar.is-condensed, so the two tiers below re-proportion themselves from
   one class with no second set of height rules.

   HOUSE RULES OBSERVED
     · No hardcoded hex. Colour comes from tokens.css or the v3/v2 aliases.
     · No bare `cursor:` keyword - var(--cur-*) only (assets/css/cursors.css).
       Buttons and [data-go] already inherit --cur-pointer from cursors.css;
       the search box needs --cur-text because its chrome is not an <input>.
     · JetBrains Mono appears nowhere in this file. The bar carries labels and
       prose, not machine identifiers; the ⌘K hint is a label, and the Updates
       count is a quantity, so it takes tabular figures in Manrope instead.
     · Small text ≥ 4.5:1 - --text-2 (7.54:1) and --text-3 (4.81:1) only,
       never --color-text-tertiary; teal text is --v3-verif (brand/800, 6.6:1),
       never --color-text-link (brand/700, 3.68:1 - fails).
     · Teal marks verification and nothing else (REDESIGN §9). The only teal in
       the bar is the trust line's shield and the AIR wordmark itself.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE SHARED ROW.

   Both tiers put their content in the same centred, gutter-padded row, so the
   trust line, the wordmark and the page title beneath all sit on one optical
   left edge. The bar itself is full-bleed; only its content is capped.
   -------------------------------------------------------------------------- */

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-row {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--v3-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--v3-gutter);
}

/* Visually hidden, still announced. Used for the search field's label, which
   would otherwise be named by its placeholder alone. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-sr {
  position: absolute;
  /* Blink's UA sheet sets `label { cursor: default }`, which outranks the
     inherited --cur-arrow and is the one off-system cursor a runtime audit
     finds in the bar. Unreachable at 1x1px, but it costs one line to keep the
     sweep clean. */
  cursor: var(--cur-arrow);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   2. TIER 1 - the utility strip.

   Commerce's promo bar (Assembly Coffee's free shipping, Equals' announcement
   row), spent on the one claim that is ours. Sunken surface so tier 2 reads as
   the bar proper and this reads as the thing above it.

   The divider is an INSET box-shadow, not border-bottom: when core collapses
   --v3-tier1-h to 0 a border would still paint its 1px, leaving a stray line
   under a strip that is supposed to be gone.

   visibility:hidden when condensed is not decoration - height:0 + overflow
   :hidden leaves the links clipped but still focusable, so a keyboard user
   would tab through invisible controls. visibility takes them out of the
   tab order and the accessibility tree together.

   But visibility does not animate, so on its own it fires the instant the
   reader crosses CONDENSE_AT - the links blink out of existence and THEN the
   empty strip animates shut, which reads as the header breaking rather than
   condensing. So the content fades (opacity, same clock as the height) and
   visibility:hidden is DELAYED by --v3-ease-t, landing exactly when the strip
   finishes closing. On the way back the delay is 0s (the base rule below):
   the links must be visible before they can fade back in.
   -------------------------------------------------------------------------- */

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-tier1 {
  flex: none;
  height: var(--v3-tier1-h);
  overflow: hidden;
  background: var(--v3-field);
  box-shadow: inset 0 -1px 0 var(--v3-line);
  transition: height var(--v3-ease);
  /* Out through #topbar's scrollbar-gutter reserve (--v3-sb, core §4). That
     inset exists so tier 2's row centres on the same box as .page; a SURFACE
     does not want it, and paying it left a 14px sliver of paper at each end of
     the sunken strip - a band that is nearly, but not quite, full-bleed. */
  margin-inline: calc(var(--v3-sb) * -1);
}

/* Tier 1 exists to carry the verification claim on the left and the utility
   links on the right. While the claim is suppressed (assets/js/flags.js) the
   left half has nothing true to say, so the strip carries links alone and gets
   the height that needs - 32px of chrome for one empty half is the padding you
   can feel at the top of every page.

   The sentence is not replaced with something else. Writing a line of marketing
   to fill a strip is how the claim got there in the first place. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-trust--empty { display: none; }
/* :not(.is-condensed), because this literal would otherwise beat the condensed
   collapse (core swaps the --v3-tier1-h variable, and a hardcoded height does
   not consult it) - the scrolled page would keep a 26px strip of empty field
   above the bar with nothing left in it. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar:not(.is-condensed):has(.v3-trust--empty) .v3-tier1 {
  height: 26px;
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar:has(.v3-trust--empty) .v3-tier1-in {
  justify-content: flex-end;
}

/* Tier 1 is the ONE row that does not centre on the --v3-max measure. It carries
   no reading matter - a claim on the far left and three utility links on the far
   right - so capping it at 1440px and insetting it by the 40px gutter buys
   nothing and costs a wide window ~180px of empty strip at each end, which is
   the "why is Sign in floating in the middle of nowhere" of the bar.

   Tier 2 keeps the measure: the wordmark, the catalogue links and the search
   field are content, and they stay on the same optical left edge as the page
   below them. The two tiers are deliberately NOT aligned with each other. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-tier1-in {
  justify-content: space-between;
  gap: var(--space-16);
  max-width: none;
  padding: 0 var(--space-16);
  transition: opacity var(--v3-ease), visibility 0s;
}

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar.is-condensed .v3-tier1-in {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--v3-ease), visibility 0s var(--v3-ease-t);
}

/* The trust line. Teal because this sentence IS the verification claim - the
   same wording and the same treatment as v2's proof footer (.v2-proof-ft), so
   the two surfaces cannot drift apart. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-trust {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.05px;
  color: var(--v3-verif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-trust-mark {
  display: inline-flex;
  flex: none;
  color: var(--v3-verif);
}

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-tier1-right {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: none;
}

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-util {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* A white pill on the sunken strip is the whole hover state - no colour change
   beyond the text darkening, because tier 1 is deliberately quiet. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-util-link {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-2);
  background: transparent;
  transition: background-color var(--v3-ease), color var(--v3-ease);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-util-link:hover {
  background: var(--v3-paper);
  color: var(--text);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-util-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-util-sep {
  width: 1px;
  height: 14px;
  flex: none;
  background: var(--color-border-default);
}

/* The rule divides the utility links from the design switch. The switch is no
   longer rendered (V8-BUILD-PLAN.md 0.A.1) and the slot stays empty, so the rule
   was left dividing the links from nothing - a hairline plus a gap hanging off
   the right end of the strip. It comes back the moment the slot has something
   in it; the slot itself stays, because it is part of this file's contract. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-tier1-right:has(.v3-uiswitch:empty) .v3-util-sep {
  display: none;
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-tier1-right:has(.v3-uiswitch:empty) {
  gap: 0;
}

/* The design switch sits last, furthest from the catalogue. Core styles the
   .ui-switch wrapper (store-v3-core.css §7) and store-v2.css styles the
   segmented control itself; only the slot's own flex behaviour is ours. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-uiswitch {
  display: flex;
  align-items: center;
  flex: none;
}

/* --------------------------------------------------------------------------
   3. TIER 2 - the bar.

   Brand left, catalogue links adjacent, utility right: the three-zone header
   every shop in the corpus uses (REDESIGN §11.1). Search takes margin-left:auto
   rather than the row taking space-between, so the free space collects in ONE
   place - between the last nav link and the field - instead of being shared out
   between the zones, which would let the wordmark drift off the page's left
   edge as the window widens.
   -------------------------------------------------------------------------- */

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-tier2 {
  flex: none;
  height: var(--v3-bar-h);
  background: var(--v3-paper);
  transition: height var(--v3-ease);
}

/* ---- 3a. The lockup ---- */

/* AIR Market. The mark is the real wordmark (assets/img/air/air-logo.svg, a
   verbatim brand asset) - v3 does not invent a second brand. It routes to
   #/discover, which is what a wordmark does in every shop in the sample.

   The word beside it is CSS text, not a second image, and there is no separator
   between the two halves. Two earlier revisions are worth knowing about, because
   neither is what ships and both left fingerprints here: one set the word in
   all-caps SemiBold on geometry transcribed from AIRmarket.svg, the next in
   italic Medium at a size that let the mark lead. The shipped treatment is
   all-caps ExtraBold italic, chosen in the browser rather than derived from the
   source file:

     · font-size 1.2667 H (19px against the 15px mark), carried over from the
       italic revision. Caps at this size put the word's cap height at 13.3px
       against the mark's 14.6px of ink, so the mark still leads it slightly.
     · font-weight 800 and font-style italic. The italic is the real drawn one,
       not a browser slant: type-override.css declares the italic face off the
       same variable file with the ital axis pinned, and it renders pixel-identical
       to the foundry's static italic cuts.
     · margin-left 0.1333 H (2px). Plain optical spacing - unlike the first
       revision, the M's side bearing is not discounted out of it, which is why
       this number is so much smaller than the 0.0839 H that preceded it.
     · letter-spacing -0.02em is the one measured value left standing, taken off
       the source lockup in the first revision. It still holds at this weight.

   Both multipliers hang off --v3-lockup-mark so the lockup keeps scaling as one
   object and the step-down below still moves the whole thing together.

   Vertical centring needs no correction: hhea gives ascent 1.0em and descent
   0.3em, so at line-height 1 the baseline sits 0.85em down and the cap box
   centres on exactly 0.5em - the middle of the line box. The mark's ink centre
   sits 0.19px above its box centre at H=15 (the viewBox carries its slack at
   the bottom), which is under half a device pixel and is left alone. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-brand {
  --v3-lockup-mark: 15px;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 36px;
  padding: 0 var(--space-8);
  margin-left: calc(var(--space-8) * -1); /* optical: align the mark, not the pill */
  margin-right: var(--space-32);
  border-radius: var(--radius-md);
  background: transparent;
  transition: background-color var(--v3-ease);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-brand:hover { background: var(--color-action-secondary); }
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-brand:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-brand-mark {
  height: var(--v3-lockup-mark);
  width: auto;
  flex: none;
}
/* The word is uppercased in CSS rather than in the markup so a reader who
   selects and copies the lockup gets "Market", the way the product is written
   everywhere else. The link's aria-label carries the full name regardless. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-brand-name {
  margin-left: calc(var(--v3-lockup-mark) * 0.1333);
  font-size: calc(var(--v3-lockup-mark) * 1.2667);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--v3-ink);
  white-space: nowrap;
}

/* ---- 3b. The five primary links ---- */

/* flex:none, not 0 1 auto: if the row runs out of room the SEARCH FIELD gives
   way (it has a min-width and degrades to an icon-sized box), never the five
   primary destinations - a nav link that has been squeezed into an ellipsis is
   no longer a destination. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
}

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 36px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.1px;
  white-space: nowrap;
  color: var(--text-2);
  background: transparent;
  transition: background-color var(--v3-ease), color var(--v3-ease);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-link:hover {
  background: var(--color-action-secondary);
  color: var(--text);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Current section: darker label plus a rule under the pill. Two channels, so
   the state does not depend on a weight difference alone. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-link.is-current { color: var(--v3-ink); }
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-link.is-current::after {
  content: "";
  position: absolute;
  left: var(--space-12);
  right: var(--space-12);
  bottom: 3px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
}

/* Browse ▾ - the disclosure trigger. mega.js owns aria-expanded; this is the
   only place that state is drawn, so the chevron cannot lie about it. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-chev {
  display: inline-flex;
  color: var(--text-3);
  transition: transform var(--v3-ease);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-link:hover .v3-chev,
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-link.is-current .v3-chev { color: inherit; }
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar [data-v3-mega-toggle][aria-expanded="true"] {
  background: var(--color-action-secondary);
  color: var(--v3-ink);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar [data-v3-mega-toggle][aria-expanded="true"] .v3-chev {
  transform: rotate(180deg);
}

/* ---- 3c. Search ----
   A real field, not an icon: in a catalogue, search IS navigation (Wix App
   Market, MasterClass, Cosmos). The border is border/default rather than the
   subtler --v3-line so the field still reads as a field against paper. */

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: 0 1 440px;
  min-width: 180px;
  height: 38px;
  margin-left: auto;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--v3-field);
  cursor: var(--cur-text);
  transition: background-color var(--v3-ease), border-color var(--v3-ease);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search:hover { border-color: var(--color-border-strong); }
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search:focus-within {
  background: var(--v3-paper);
  border-color: var(--color-border-strong);
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search-ic {
  display: inline-flex;
  flex: none;
  color: var(--text-3);
}

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--v3-ink);
  cursor: var(--cur-text);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search-input::placeholder {
  color: var(--text-3);
  font-weight: 500;
}
/* type=search buys us the semantics; its WebKit furniture fights the layout. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search-input::-webkit-search-cancel-button,
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* The shortcut hint stands down once the field has focus - at that point it is
   telling the reader how to do something they have already done. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-kbd {
  flex: none;
  padding: 3px var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  background: var(--v3-paper);
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-3);
  white-space: nowrap;
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search:focus-within .v3-kbd { display: none; }

/* ---- 3d. Utility zone: the Stack slot, then the account ---- */

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-utility {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex: none;
  margin-left: var(--space-24);
}

/* stack.js owns everything inside; the slot only has to hold its place. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-stack-slot {
  display: flex;
  align-items: center;
}

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: var(--space-4);
  border-radius: var(--radius-full);
  background: transparent;
  transition: background-color var(--v3-ease);
}
/* The account control is the session or it is not there (topnav.js
   reflectAccount): signed out there is no avatar, because a face in the corner
   is the store telling you it knows who you are. This rule is what makes the
   attribute bite - the display above is set at a specificity the UA's
   `[hidden] { display: none }` cannot reach, so toggling `hidden` alone would
   move nothing. Written with [hidden] on the class rather than as a `.is-out`
   modifier so ONE state drives both the pixels and the accessibility tree.

   It covers the mobile menu sheet too: the sheet is inside #topbar and its own
   rule (store-v9-nav.css, .v9-menu-acct .v3-account) sets no display, so this
   is the only place the answer has to be written. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-account[hidden] { display: none; }
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-account:hover { background: var(--color-action-secondary); }
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-account:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-account.is-current .avatar {
  box-shadow: 0 0 0 2px var(--color-action-primary);
}

/* Updates rides the avatar (REDESIGN §11.3): an account concern, not a
   catalogue one, and #/updates stays reachable without a nav slot of its own.
   Reuses the Air_DS avatar-count component; only its anchor corner moves,
   because the component pins top-left and the Stack sits immediately left. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-account-dot {
  top: -2px;
  right: -2px;
  left: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--space-4);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--v3-paper);
}
/* .avatar-count declares display:inline-flex, and an author declaration beats
   the UA's [hidden]{display:none} - so the attribute needs honouring by hand. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .avatar-count[hidden] { display: none; }

/* --------------------------------------------------------------------------
   4. NARROW WINDOWS.

   Responsive below 1024px is deliberately deferred (REDESIGN §11.4 / §11.6 -
   a top nav wants a hamburger and a drawer, and that is its own pass). These
   two steps are not that: they only stop the bar from overlapping itself on
   the way down, so a reviewer resizing the window sees a tight bar rather than
   a broken one. Nothing is removed that is not reachable another way - the
   tier-1 links all live in the footer's Quick Links too.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-brand { margin-right: var(--space-16); }
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-link { padding: 0 var(--space-8); }
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-link.is-current::after {
    left: var(--space-8);
    right: var(--space-8);
  }
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search { flex-basis: 300px; }
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-utility { margin-left: var(--space-16); }
}

/* The lockup gives back size where the bar is tight, stepping as one piece
   rather than dropping a part. It earns its keep: at exactly 1024 the bar's
   content measures the full width of its track, so the ~14px the step returns
   is the difference between fitting and not.

   The step lands at 1024 rather than at the 940 breakpoint below because 1024
   is where this bar's supported range ends - past it every measurement is
   provisional anyway. */
@media (max-width: 1024px) {
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-brand { --v3-lockup-mark: 13px; }
}

@media (max-width: 940px) {
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-util { display: none; }
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-util-sep { display: none; }
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search { flex-basis: 220px; min-width: 140px; }
}

/* The last thing to go is the word, not the mark - the lockup keeps its brand
   half and the button keeps its aria-label, so the home link is never unnamed. */
@media (max-width: 860px) {
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-brand-name { display: none; }
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-brand { --v3-lockup-mark: 15px; }
}

/* --------------------------------------------------------------------------
   5. MOTION.

   Core already kills #topbar's own transition under reduced motion; the tiers,
   the hover fades and the chevron are ours to switch off.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-tier1,
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-tier1-in,
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-tier2,
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-brand,
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-link,
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-util-link,
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-account,
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-search,
  :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-chev {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   5. SAVED FOR LATER (v4, REDESIGN §12.2.6).

   A wishlist glyph in the utility zone, left of the account - where every
   retail bar puts it, and next to the Stack it is most often confused with.
   The two are different promises: the Stack is "install these together now",
   Saved is "not now, and maybe not on this machine". The count is written by
   topnav.js from app.js's store, never typed, and the button carries
   .has-items rather than changing glyph, because Air_DS has no filled
   bookmark to change to.
   -------------------------------------------------------------------------- */

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-saved {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  transition: background-color var(--v3-ease), color var(--v3-ease);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-saved:hover {
  background: var(--color-action-secondary);
  color: var(--color-text-primary);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-saved:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-saved.has-items,
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-saved.is-current { color: var(--color-text-primary); }
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-saved.is-current::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -2px;
  height: 2px;
  background: var(--color-action-primary);
  border-radius: 2px;
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-saved .ic { --ic-size: 18px; }
/* Same corner and the same pill as the Updates count, so two counts in one
   utility zone read as one system. */
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-saved-n {
  position: absolute;
  top: -2px;
  right: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--v3-paper);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-saved-n[hidden] { display: none; }

/* --------------------------------------------------------------------------
   6. SIGN IN / SIGN OUT.

   The session control, in the utility zone between Saved and the avatar. It
   used to sit in tier 1 with Creators / Publish, which meant it condensed away
   past 40px of scroll and disappeared entirely between 720 and 940px - the one
   control about the reader's own session, gone exactly when they were deep in
   a page. Tier 2 never condenses, so here it stays reachable everywhere.

   It keeps .v3-util-link (the quiet text treatment, and the mobile menu sheet
   styles it through that class - store-v9-nav.css §3); this modifier only
   rescales it to the 64px bar and swaps the hover pill to one that shows on
   paper. --v3-paper on --v3-paper is the base rule's hover and is invisible
   here. */

:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-signin {
  height: 32px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
:root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar .v3-signin:hover {
  background: var(--color-action-secondary);
  color: var(--color-text-primary);
}