/* Surface list — full takeover: the open menu owns everything below the
   bar; the page behind disappears entirely (opaque ground, no peek-through) */
.mode-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  /* The takeover obeys the app frame — same width rules as the page. */
  max-width: var(--frame);
  margin: 0 auto;
  /* No horizontal inset — row washes run full-bleed edge to edge */
  padding: 8px 0 12px;
  background: var(--bar-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Row geometry (rail, right inset, indicator column) lives in the canonical
     door-menu.css (.rs-doors) — the single source both surfaces mount. */
}
.top.is-open .mode-menu,
.mode-menu:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.mode-menu[hidden] { display: none !important; }
.mode-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  cursor: pointer;
  font-size: var(--t-title);
  font-weight: 300;
  line-height: 1;
  padding: 0;
}
.mode-close:not([hidden]) {
  display: inline-flex;
}
/* Glyph lights up — no box (icon-hover law) */
.mode-close:hover,
.mode-close:focus-visible {
  color: var(--ink);
  background: transparent;
  outline: none;
}
.mode-close:active { color: var(--ink-2); }

/* --- Menu bar: standalone search toggle + omnibox ------------
   The magnifier + status ring is its own control (like the glyph).
   The omnibox holds only the URL breadcrumb, which becomes the live
   search input; a copy button yanks the current path. */

/* Search toggle — standalone magnifier + status ring */
.rs-search-toggle {
  appearance: none;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  /* Quiet at rest — search is an affordance, not a feature headline */
  color: var(--ink-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 140ms ease, background 140ms ease;
}
.rs-search-toggle:hover,
.top-bar.is-searching .rs-search-toggle {
  color: var(--ink);
}
/* Icon crossfade + rotate: magnifier out, × in */
.rs-ico {
  position: absolute;
  width: 20px;
  height: 20px;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-ico-search { opacity: 1; transform: rotate(0) scale(1); }
.rs-ico-close  { opacity: 0; transform: rotate(-90deg) scale(0.8); }
.top-bar.is-searching .rs-ico-search { opacity: 0; transform: rotate(90deg) scale(0.8); }
.top-bar.is-searching .rs-ico-close  { opacity: 1; transform: rotate(0) scale(1); }

/* Omnibox — only the URL / typed text (+ copy) */
.omnibox {
  display: flex;
  align-items: center;
  height: 38px;
  width: 100%; /* fills the centre grid column, hugging both side elements */
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--g-elev);
  padding: 0 6px 0 14px;
  /* No clip here — it cut the copy button's corner. Text is clipped inside
     .omni-body instead; children fit within the border. */
  transition: background 180ms ease;
}
/* Inner wash — a faint lift of the fill on hover, held while the bar is in
   use (focused or actively searching). No border/edge highlight. */
.omnibox:hover,
.omnibox:focus-within,
.top-bar.is-searching .omnibox {
  background:
    linear-gradient(rgba(241, 241, 241, 0.035), rgba(241, 241, 241, 0.035)),
    var(--g-elev);
}

/* Top-right search: the omnibox is a search field only, collapsed to nothing
   at rest (the magnifier is the whole affordance) and expanding leftward
   into a field while searching. */
.omnibox--search {
  width: 0;
  border-color: transparent;
  background: transparent;
  padding: 0;
  overflow: hidden;
  transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1), padding 200ms ease,
    border-color 180ms ease, background 180ms ease;
}
.top-bar.is-searching .omnibox--search {
  width: min(340px, 62vw);
  border-color: var(--line);
  padding: 0 12px;
}
/* While searching, the breadcrumb steps aside so the field owns the bar. */
.top-bar.is-searching .brand-lead { display: none; }

/* Body — holds the breadcrumb at rest, the search input while searching */
.omni-body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.omni-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body);
  font-weight: 500; /* one step up from body 400 */
  letter-spacing: 0;
  outline: none;
  padding: 0;
  caret-color: transparent; /* native caret hidden — custom .omni-caret used */
}
.omni-input::placeholder { color: var(--ink-3); }
.omni-input[hidden] { display: none; }

/* Custom caret — slightly thicker than the native one (JS-positioned) */
.omni-caret {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 20px;
  background: var(--ink);
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
}
.omni-caret.is-visible { animation: omniCaretBlink 1.1s steps(1) infinite; }
@keyframes omniCaretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Search results — navigation dropdown under the omnibox */
.omni-results {
  position: fixed;
  z-index: 40;
  max-height: min(60vh, 440px);
  overflow-y: auto;
  padding: 6px;
  background: var(--g-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.omni-results[hidden] { display: none; }
.omni-result {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r);
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  min-height: var(--hit);
  box-sizing: border-box;
}
.omni-result.is-active { background: rgba(241, 241, 241, 0.05); color: var(--ink); }
.omni-result-label { flex: 0 0 auto; font-weight: 500; font-size: var(--t-body); color: inherit; }
.omni-result-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-small);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.omni-result-path { flex: 0 0 auto; font-size: var(--t-caption); letter-spacing: 0; color: var(--ink-3); }
.omni-empty { padding: 14px 12px; font-size: var(--t-lede); color: var(--ink-3); }

/* Copy-path action — icon swaps to a check on success */
.omni-copy {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  min-width: var(--hit);
  height: var(--hit);
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  flex-shrink: 0;
  /* Hover lives on the glyph itself (colour), never a box around it */
  transition: color 140ms ease;
}
.omni-copy:hover,
.omni-copy:focus-visible {
  color: var(--ink); /* the SVG lights up — no background, no outline box */
  background: transparent;
  outline: none;
}
.omni-copy:active { color: var(--ink-2); }
.top-bar.is-searching .omni-copy { display: none; }
.omni-copy-ico,
.omni-copy-ok {
  position: absolute;
  width: 20px;   /* match the magnifier icon */
  height: 20px;
  transition: opacity 160ms ease, transform 160ms ease;
}
.omni-copy-ok { opacity: 0; transform: scale(0.7); color: var(--hard-rain); }
.omni-copy.is-copied .omni-copy-ico { opacity: 0; transform: scale(0.7); }
.omni-copy.is-copied .omni-copy-ok { opacity: 1; transform: scale(1); }

/* --- Weather motion — hover-only, hardware-mechanical ---------
   All inlined weather glyphs (surfaces-nav.js gives each `svg.wx-glyph`)
   carry annotated segments (scripts/annotate-weather-marks.py). Real-world
   behaviour with magic, rendered like LCD hardware: steps() switching,
   opacity + transform only, nothing ever blurs, glows outward, or leaves
   the glyph bounds. Animations exist ONLY under :hover — clean at rest;
   crisp restart. One programme everywhere: menu rows animate on button
   hover, content-page marks (retreat hero, product marks, lockups) on
   their own hover.
   Ambient exceptions: the permanent top-left surface
   icon (.brand-btn) runs its programme continuously — always lit, always
   alive — and any mark given the `wx-live` class
   does the same. wx-live is the ONLY sanctioned way to run a content glyph
   at rest; add it to the <img>, the inliner carries it onto the svg.
   Master-icon exception: the top-left icon is ALWAYS the full master
   LCD (all-segments-colour) at --wx-glyph. Dormant OFF tone; pages light
   the element in view via data-wx-light; that element grows to fill the
   seat (LIGHT_CROP). Never swap the file. */
.wx {
  transform-box: fill-box;
  transform-origin: center;
}