/* Map Chrome v2a — Roadtrippers-style three-zone layout.
   See docs/superpowers/specs/2026-05-17-map-chrome-v2-design.md */

/* ── Theme tokens (light is default) ─────────────────────────────────── */
:root {
  --surface: #ffffff;
  --surface-elevated: #fafaf7;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --border: #e5e5e0;
  --accent: #92400e;
  --accent-fg: #ffffff;
  --chip-bg: #f3f0e8;
  --chip-bg-active: #92400e;
  --chip-fg: #2a2a2a;
  --chip-fg-active: #ffffff;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);

  --header-h: 64px;
  --rail-w: 56px;
  --panel-w: 360px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Page grid ──────────────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--surface);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Prevents the panel-collapse animation from briefly flashing a horizontal
     scrollbar as the grid template column shrinks from 360px → 0. */
  overflow: hidden;
}

body {
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-columns: var(--rail-w) var(--panel-w) 1fr;
  transition: grid-template-columns var(--transition), grid-template-rows var(--transition);
}

[data-region="header"] { grid-row: 1; grid-column: 1 / -1; }
[data-region="rail"]   { grid-row: 2; grid-column: 1; }
[data-region="panel"]  { grid-row: 2; grid-column: 2; overflow-y: auto; }
[data-region="map"]    { grid-row: 2; grid-column: 3; position: relative; }

/* Map div fills its grid cell (overrides the v1 absolute positioning). */
#map {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: auto !important;
}

/* ── Collapsed / full-page state ────────────────────────────────────── */
body[data-panel-collapsed="true"] {
  grid-template-columns: var(--rail-w) 0 1fr;
}
body[data-full-page="true"] {
  grid-template-rows: 0 1fr;
  grid-template-columns: 0 0 1fr;
}
body[data-full-page="true"] [data-region="header"],
body[data-full-page="true"] [data-region="rail"],
body[data-full-page="true"] [data-region="panel"] {
  display: none;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.chrome-header {
  display: flex;
  align-items: center;
  /* No justify-content: space-between — the layout uses
     margin-right:auto on .chrome-brand (push everything else right) and
     flex:1 on .chrome-search-wrap (take available space) to anchor
     brand left, search in the middle, tools right. */
  gap: 8px;
  padding: 0 16px;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 10;
}

.chrome-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
  flex-shrink: 0;  /* don't squeeze the brand if the header gets crowded */
}
/* Brand mark — <img> using the mapsofwhiskey illustration, cropped to
   a tight circle next to the wordmark. Fixed 36px square keeps the
   header height (--header-h: 64px) comfortable on both desktop and
   tablet. Background matches the image's dark blue field so any 1px
   gap from rounding doesn't show a stripe. */
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 50%;
  background: #1a1815;
  flex-shrink: 0;
}
/* .brand-name inherits color from .chrome-brand — no explicit rule needed. */

/* Persistent header search — pill input with an inline magnifying-glass
   icon. The wrap is flex:1 between brand and tools so it grows to fill
   the available space, capped so it doesn't stretch absurdly on
   ultra-wide monitors. Below the mobile breakpoint the brand wordmark
   hides and the search expands to fill the gap. */
.chrome-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;       /* allow shrinking under flex */
  max-width: 480px;
  margin: 0 8px;
}
.chrome-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.chrome-search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 14px 8px 36px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface-elevated);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  /* Strip the browser's default focus ring; replace with our accent. */
  outline: none;
}
.chrome-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(146, 64, 14, 0.18);
}
[data-theme="dark"] .chrome-search:focus {
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.25);
}
/* WebKit clear button — match the muted icon color. */
.chrome-search::-webkit-search-cancel-button {
  cursor: pointer;
  opacity: 0.5;
}
.chrome-search::-webkit-search-cancel-button:hover { opacity: 1; }

/* ── Search suggestions dropdown ──────────────────────────────────────
   Rendered by public/assets/chrome_search_autocomplete.js into the
   <ul> stub baked into the header partial. Positioned absolutely
   under the input so it floats over whatever is below (map / panel).
   The wrap (.chrome-search-wrap) is the positioning context. */
.chrome-search-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  max-height: 360px;
  overflow-y: auto;
}
.chrome-search-suggestions[hidden] { display: none; }

.chrome-search-suggestion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.chrome-search-suggestion:last-child { border-bottom: none; }
.chrome-search-suggestion.is-active,
.chrome-search-suggestion:hover {
  background: var(--surface-elevated);
}
.chrome-search-suggestion__name {
  font-weight: 600;
  flex: 1;
  /* Long names ("Heaven Hill Bardstown Bourbon Experience…") get
     ellipsis-truncated so each row stays single-line. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chrome-search-suggestion__state {
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chrome-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Anchor tools to the right edge. When the chrome-search-wrap is
     present (map page) it has flex:1 and grows to fill, naturally
     pushing tools right. On pages without the search (profile,
     settings) this margin keeps tools at the right edge.
     flex-shrink:0 keeps the tools cluster from being squeezed when
     the search input has long input or the viewport is narrow. */
  margin-left: auto;
  flex-shrink: 0;
}
.chrome-icon-btn {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chrome-icon-btn:hover { background: var(--surface-elevated); border-color: var(--border); }

/* Light theme shows ☀, dark theme shows ☾ — hide the other one. */
.theme-icon-dark  { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark  { display: inline; }

/* Streets mode shows 🛰 (click for satellite), imagery shows 🗺 (click for map). */
.basemap-icon-imagery { display: none; }
body[data-basemap="imagery"] .basemap-icon-streets { display: none; }
body[data-basemap="imagery"] .basemap-icon-imagery { display: inline; }

.chrome-signin-btn {
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.chrome-signin-btn:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* ── Account dropdown menu (v2b — visible only when logged in) ────────── */
.chrome-account { position: relative; }
.chrome-account-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px 0;
}
.chrome-account-menu[hidden] { display: none; }
.chrome-account-menu__item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.chrome-account-menu__item:hover { background: var(--surface-elevated); color: var(--accent); }
.chrome-account-menu__divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* ── Icon rail ──────────────────────────────────────────────────────── */
.chrome-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.rail-btn {
  width: 40px; height: 40px;
  margin: 0 auto;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: 18px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-btn:hover { background: var(--surface-elevated); color: var(--text); }
.rail-btn.active {
  background: var(--surface-elevated);
  border-left-color: var(--accent);
  color: var(--accent);
}

/* ── Filter panel ───────────────────────────────────────────────────── */
.chrome-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.panel-title { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: 0.6px; }
.btn-link {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.btn-link:hover { color: var(--accent); }

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}
.panel-section { margin-bottom: 16px; }
.panel-section-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 6px;
}
.panel-section input[type="search"],
.panel-section input[type="number"],
.panel-section select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}
.btn-near-me {
  width: 100%;
  padding: 8px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.btn-near-me:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.panel-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 10px 0 14px;
}

.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-group button {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 12px;
  cursor: pointer;
}
.chip-group button:hover { border-color: var(--accent); }
.chip-group button.active {
  background: var(--chip-bg-active);
  color: var(--chip-fg-active);
  border-color: var(--chip-bg-active);
}

.panel-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin: 4px 0;
  cursor: pointer;
}

.panel-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-elevated);
}

/* ── Panel chevron ──────────────────────────────────────────────────────
   A half-pill "drawer pull" tab attached flush to the left edge of the
   map region — which is the rail's right edge when the panel is
   collapsed, or the panel's right edge when the panel is open. Looks
   like it's part of whatever it's docked against, not a floating
   button. The icon (a unicode triangle) is wrapped in a span so only
   the GLYPH rotates on collapse; the tab shape stays put. */
.panel-chevron {
  position: absolute;
  top: 16px;
  left: 0;
  z-index: 5;
  width: 22px;
  height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: none;                /* connects flush to the rail/panel edge */
  border-radius: 0 12px 12px 0;     /* half-pill — rounded on the right side */
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Soft directional shadow — falls right (away from rail) so the tab
     appears to lift from the edge. */
  box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.10);
  transition: background 0.15s ease, color 0.15s ease;
}
.panel-chevron:hover {
  background: var(--surface-elevated);
  color: var(--text);
}
.panel-chevron__icon {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* When the panel is collapsed, only the glyph flips — the tab itself
   stays anchored to the left edge of the map area. */
body[data-panel-collapsed="true"] .panel-chevron__icon {
  transform: rotate(180deg);
}

/* ── Dark theme ─────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --surface: #1a1815;
  --surface-elevated: #252220;
  --text: #f0ebe1;
  --muted: #a09a8e;
  --border: #3a3633;
  --accent: #d97706;
  --accent-fg: #1a1815;
  --chip-bg: #2a2624;
  --chip-bg-active: #d97706;
  --chip-fg: #d4cdc1;
  --chip-fg-active: #1a1815;
  --shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ── Full-page mode ─────────────────────────────────────────────────── */
.full-page-exit {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  box-shadow: var(--shadow);
  color: var(--text);
  display: none;
}
body[data-full-page="true"] .full-page-exit { display: inline-flex; }

/* ── Chrome tooltip (Sign-in placeholder, rail stubs) ─────────────────── */
.chrome-tooltip {
  position: fixed;
  z-index: 1000;
  width: 200px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  font-size: 13px;
  pointer-events: none;
}
.chrome-tooltip[hidden] { display: none; }

/* ── Result count banner (in panel footer) ─────────────────────────── */
.result-banner {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.result-banner[hidden] { display: none; }
.result-banner #banner-show-all,
.result-banner #banner-dismiss {
  padding: 0 4px;
  font-size: 12px;
}

/* ── ArcGIS popup card (built at runtime by FeatureLayer popupTemplate) ──
   The Esri SDK stylesheet now tracks our theme (light/main.css ↔
   dark/main.css, swapped by the theme toggle in index.html.erb), so the
   popup widget's background is dark in dark mode. That means the popup
   content can — and should — use the same var(--text)/var(--muted)
   tokens as the rest of the chrome. Dark-mode override blocks below
   nudge any badge / button colors that need extra contrast on the
   darker surface. */
/* .distillery-popup styles removed — were used by the ArcGIS popup
   widget's custom content. PR #95 disabled the popup (popupEnabled:
   false on the FeatureLayer) and replaced it with the sticky hover-tip
   (#map-hover-tip below), which has its own complete style block. The
   .distillery-popup CSS hung around as ~100 lines of dead selectors
   until this cleanup pass. */

/* ── Hover tip + sticky click tip (JS-built div on <body>) ────────────
   Same DOM node serves two modes:
   - data-sticky="false" (default): transient hover preview, follows the
     cursor, pointer-events: none so hover-on-other-pins still fires.
   - data-sticky="true": locked in place after a pin click, pointer-events:
     auto so the close button + "View profile" link inside are clickable.
     ArcGIS popup is disabled (popupEnabled: false on the FeatureLayer),
     so this is the only chrome shown on click. */
/* ── Cluster chooser (co-located stacks) ───────────────────────────────
   Appears when the user taps a cluster of 2-8 distilleries that share
   essentially the same coordinates (so zoom can't separate them). A
   vertical list of mini-cards; clicking a row drops the chooser and
   shows that distillery's sticky tip. */
#cluster-chooser {
  position: absolute;
  z-index: 60;
  width: 320px;
  max-height: 60vh;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#cluster-chooser[hidden] { display: none; }
.cluster-chooser__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-elevated);
}
.cluster-chooser__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.cluster-chooser__close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}
.cluster-chooser__close:hover { color: var(--text); }
.cluster-chooser__list {
  overflow-y: auto;
  padding: 4px 0;
}
.cluster-chooser__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
}
.cluster-chooser__row:last-child { border-bottom: none; }
.cluster-chooser__row:hover,
.cluster-chooser__row:focus-visible {
  background: var(--surface-elevated);
  outline: none;
}
.cluster-chooser__thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--surface-elevated);
}
.cluster-chooser__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.cluster-chooser__text { flex: 1; min-width: 0; }
.cluster-chooser__name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cluster-chooser__address {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

#map-hover-tip {
  position: absolute;
  pointer-events: none;
  display: none;
  width: 300px;
  background: var(--surface);
  color: var(--text);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  font-size: 13px;
  z-index: 5;
  /* JS sets display: "flex" for pin hovers (image + text columns) or
     "block" for cluster hovers (single line of plain text). */
  gap: 10px;
  align-items: flex-start;
}
#map-hover-tip[data-sticky="true"] {
  pointer-events: auto;  /* Sticky tip is interactive (close + CTA) */
  padding-right: 30px;   /* Reserve space for the close button */
}
#map-hover-tip .hover-tip-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--surface-elevated);
}
#map-hover-tip .hover-tip-text {
  flex: 1;
  min-width: 0;
}
#map-hover-tip .hover-tip-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#map-hover-tip .hover-tip-address {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#map-hover-tip .hover-tip-spirits {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#map-hover-tip .hover-tip-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
#map-hover-tip .badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-fg);
}
#map-hover-tip .badge-tours    { background: var(--accent); }
#map-hover-tip .badge-ownership { background: #4338ca; }
[data-theme="dark"] #map-hover-tip .badge-ownership { background: #6366f1; }

/* Sticky-mode only — close button (top-right) + "View profile" pill CTA
   (bottom of text column). Only present when data-sticky="true"; the
   transient hover never shows these. */
#map-hover-tip .hover-tip-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  font-family: inherit;
}
#map-hover-tip .hover-tip-close:hover {
  background: var(--surface-elevated);
  color: var(--text);
}
/* Action row in the sticky tip — "View profile" + "Directions" sit
   side-by-side as full-width pills. Falls back to a single column on
   the narrow 300px tip width. The shared button-base rules below
   keep both buttons the same height + padding + box model so they
   line up flush inside the 1fr 1fr grid (previously View profile
   had width: auto + padding 8px 14px, Directions had no width set
   + padding 8px 10px, so they rendered at visibly different widths
   even inside a stretching grid). */
#map-hover-tip .hover-tip-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
#map-hover-tip .hover-tip-link,
#map-hover-tip .hover-tip-directions {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 16px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  /* Identical border on both — solid fill on .hover-tip-link still
     uses the accent color; the matching width keeps the buttons
     pixel-aligned at the top + bottom edges. */
  border: 1px solid var(--accent);
  margin: 0;
}
#map-hover-tip .hover-tip-link {
  background: var(--accent);
  color: var(--accent-fg);
  transition: filter 0.15s ease;
}
#map-hover-tip .hover-tip-link:hover {
  filter: brightness(1.1);
}
#map-hover-tip .hover-tip-directions {
  background: transparent;
  color: var(--accent);
  transition: background 0.15s ease, color 0.15s ease;
}
#map-hover-tip .hover-tip-directions:hover {
  background: var(--accent);
  color: var(--accent-fg);
}
/* "Open until 5 PM" / "Closed today" pill — green/muted background
   to communicate state at a glance. Sits between address and spirits
   in the tip layout. */
#map-hover-tip .hover-tip-hours {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin: 2px 0 4px;
}
#map-hover-tip .hover-tip-hours.is-open {
  background: rgba(22, 163, 74, 0.15);
  color: #16a34a;
}
#map-hover-tip .hover-tip-hours.is-closed {
  background: var(--surface-elevated);
  color: var(--muted);
}
[data-theme="dark"] #map-hover-tip .hover-tip-hours.is-open {
  background: rgba(74, 222, 128, 0.18);
  color: #4ade80;
}

/* ── Auth modal (Sign in / Sign up) ────────────────────────────────── */
.auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-modal[hidden] { display: none; }
.auth-modal__box {
  position: relative;
  /* Fluid-width on small viewports — flush to viewport edges with a
     16px breathing margin — but cap at 360px on desktop so the modal
     stays as a focused dialog. box-sizing keeps the 32px horizontal
     padding inside the width, not added to it. */
  width: calc(100vw - 32px);
  max-width: 360px;
  box-sizing: border-box;
  padding: 28px 32px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.auth-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.auth-modal__close:hover { color: var(--text); }
.auth-modal__title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.auth-modal__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.auth-modal__input[hidden] { display: none; }
.auth-modal__input:focus {
  outline: none;
  border-color: var(--accent);
}
.auth-modal__submit {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.auth-modal__submit:hover { filter: brightness(1.05); }
.auth-modal__error {
  font-size: 13px;
  color: #dc2626;
  margin: 8px 0 0;
  min-height: 1em;
}
[data-theme="dark"] .auth-modal__error { color: #f87171; }
.auth-modal__toggle {
  display: block;
  width: auto;
  margin: 12px auto 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

/* ── Rail tabs: only one [data-panel] visible at a time ──────────────── */
[data-region="panel"] [data-panel] { display: none; }
body[data-active-rail="filters"]   [data-panel="filters"],
body[data-active-rail="list"]      [data-panel="list"],
body[data-active-rail="favorites"] [data-panel="favorites"],
body[data-active-rail="settings"]  [data-panel="settings"] {
  display: flex;
}

/* Rail active-state — driven by body[data-active-rail] instead of a class. */
body[data-active-rail="filters"]   [data-rail-item="filters"],
body[data-active-rail="list"]      [data-rail-item="list"],
body[data-active-rail="favorites"] [data-rail-item="favorites"],
body[data-active-rail="settings"]  [data-rail-item="settings"] {
  background: var(--surface-elevated);
  border-left-color: var(--accent);
  color: var(--accent);
}

/* Auth-gated rail items — hidden until the auth controller flips
   body[data-auth-state] to "signed-in". Default state assumes signed-out
   so unauthenticated users don't see a Favorites button flash on load. */
body:not([data-auth-state="signed-in"]) [data-auth-required] {
  display: none;
}

/* ── List panel header meta + cards ──────────────────────────────────── */
.panel-meta {
  font-size: 12px;
  color: var(--muted);
}

/* Sort toolbar — sits between the panel header and the card list.
   Compact row with a small "Sort" label + select. Styled to match
   the existing filter panel inputs (var(--border) + var(--surface)). */
.list-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--border);
}
.list-toolbar__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  font-weight: 700;
}
/* .list-toolbar__select is now a <calcite-select> host. Calcite
   renders the styled control internally and themes itself off the
   calcite-mode-* class on <html>; we only own the flex sizing so the
   dropdown fills the toolbar row next to the "Sort" label. */
.list-toolbar__select {
  flex: 1;
  min-width: 0;
}

/* "Search this area" floating button — appears in the map area when
   the user has panned/zoomed since the last fetch, so the map's
   view doesn't match what's loaded. Click → refetch with the
   current viewport's bbox so only what's visible gets listed.
   Hidden by default (the map view starts in sync); JS adds the
   .visible state to show it. */
/* .search-area-btn is now a <calcite-button> host. Calcite handles
   the chip styling internally (background, border, radius, font, hover)
   and tracks light/dark via the calcite-mode-* class on <html>. We only
   own positioning + visibility transition here. */
.search-area-btn {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  /* Bigger pill + deeper drop shadow so the button reads as the
     primary action when it appears. scale="l" on the calcite-button
     handles font size + internal padding; this just shapes the
     surrounding affordance. */
  border-radius: 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.search-area-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* When the user has opted into "Search as map moves" via either the
   on-map overlay or the Settings panel, body carries
   data-auto-search="on" and the button is hidden — auto-refresh
   replaces it. JS also calls hideBtn() in that path, but the CSS
   rule guarantees the button can't sneak back via .visible. */
body[data-auto-search="on"] .search-area-btn {
  display: none !important;
}

/* ── Top-left "Search as map moves" overlay (Yelp-style) ─────────────
   Always-visible toggle that lives above the map. Same preference as
   the Settings panel checkbox. Floats over the basemap top-left,
   styled as a pill so it reads as a control, not a tooltip.

   Position: top-left so it doesn't compete for the top-center slot
   that the "Redo search here" button occupies. */
.map-toggle-overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.map-toggle-overlay input[type="checkbox"] {
  /* Slightly larger checkbox + accent color so the active state
     reads as the brand. */
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}
.map-toggle-overlay:hover {
  border-color: var(--accent);
}
/* Mobile: move the overlay below the chrome header but keep it
   readable. The header is 64px tall + the overlay needs ~16px of
   breathing room; the absolute top:16px already accounts for it
   since [data-region="map"] starts below the header in the grid. */
@media (max-width: 480px) {
  .map-toggle-overlay {
    top: 8px;
    left: 8px;
    padding: 6px 12px 6px 10px;
    font-size: 12px;
  }
}

/* ── Loading pill ──────────────────────────────────────────────────────
   Shown while loadDistilleries is in flight (auto-search debounce
   + fetch, Redo button click + fetch, filter chip change + fetch).
   Positioned just below the Redo-button slot so the two never
   collide visually — by the time the pill appears the button has
   been hidden by hideBtn() in the click handler anyway. */
.map-loading-pill {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  z-index: 6;  /* above search-area-btn (z:5) */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.map-loading-pill[hidden] { display: none; }
.map-loading-pill.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.map-loading-pill__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: wm-loading-spin 0.9s linear infinite;
  flex-shrink: 0;
}
.map-loading-pill__label {
  white-space: nowrap;
}
@keyframes wm-loading-spin {
  to { transform: rotate(360deg); }
}
/* Respect OS-level reduce-motion: keep the pill visible but stop
   the spin so users sensitive to motion don't get a spinning
   element on every map fetch. */
@media (prefers-reduced-motion: reduce) {
  .map-loading-pill__spinner {
    animation: none;
  }
}

/* State-cleared confirmation notice — appears in the same top-center
   slot as the .search-area-btn after the user clicks it (the button
   auto-hides so they don't fight for the same spot). calcite-notice
   handles its own open/close transitions via the `open` attribute. */
.search-area-cleared-notice {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: min(360px, calc(100vw - 32px));
}
/* Mobile: tuck the notice in tighter so it doesn't crowd the panel
   chevron / mobile drawer-pull tab on the left edge of the map area. */
@media (max-width: 768px) {
  .search-area-cleared-notice {
    top: 12px;
    width: calc(100vw - 64px);
  }
}

.list-empty {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  padding: 8px 0;
}

/* ── Empty-state block ─────────────────────────────────────────────────
   Replaces the bare "No distilleries match your filters" sentence with
   a centered illustration + headline + body + CTA pattern. Used when
   the list comes back empty after a filter, or when the favorites
   panel has nothing to show. */
.list-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 16px;
  text-align: center;
  color: var(--muted);
}
.list-empty-state__icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 0.65;
}
.list-empty-state__headline {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.list-empty-state__body {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--muted);
  max-width: 240px;
}
.list-empty-state__cta {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.list-empty-state__cta:hover { filter: brightness(1.1); }
.list-empty-state__cta--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.list-empty-state__cta--ghost:hover {
  background: var(--accent);
  color: var(--accent-fg);
}

/* ── Skeleton (loading) shimmer ────────────────────────────────────────
   .list-card--skeleton mirrors the real .list-card geometry so swapping
   in the loaded content doesn't cause layout shift. The shimmer is a
   gradient that slides across the placeholder blocks via the @keyframes
   below. Reduced-motion users get a static gradient (no animation). */
@keyframes wm-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.list-card--skeleton {
  pointer-events: none;
  cursor: default;
}
.list-card--skeleton .list-card__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skeleton-block,
.skeleton-line {
  background:
    linear-gradient(
      90deg,
      var(--surface-elevated) 0%,
      var(--border) 50%,
      var(--surface-elevated) 100%
    );
  background-size: 200% 100%;
  animation: wm-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
.skeleton-block {
  /* Mirror the real .list-card__hero size set further down. */
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 6px;
}
.skeleton-line {
  height: 12px;
}
.skeleton-line--name     { width: 70%; height: 14px; }
.skeleton-line--subtitle { width: 45%; }
.skeleton-line--address  { width: 85%; }
.skeleton-line--badge    { width: 30%; height: 10px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .skeleton-block,
  .skeleton-line {
    animation: none;
  }
}

.list-card {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.list-card:last-child { border-bottom: none; }
.list-card:hover { background: var(--surface-elevated); }
.list-card:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.list-card__hero {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.list-card__body { flex: 1; min-width: 0; }
.list-card__name {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  /* Truncate long names */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-card__subtitle {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-card__address {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-card__spirits {
  margin: 0 0 6px;
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "Open until 5 PM" pill on the list card — same shape as the hover-
   tip pill so they read as the same component. Inline-block so it
   sits with the address line above and gets natural top spacing. */
.list-card__hours {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 6px;
}
.list-card__hours.is-open {
  background: rgba(22, 163, 74, 0.15);
  color: #16a34a;
}
.list-card__hours.is-closed {
  background: var(--surface-elevated);
  color: var(--muted);
}
[data-theme="dark"] .list-card__hours.is-open {
  background: rgba(74, 222, 128, 0.18);
  color: #4ade80;
}
.list-card__badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.list-card__badges .badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-fg);
}
.list-card__badges .badge-tours    { background: var(--accent); }
.list-card__badges .badge-ownership { background: #4338ca; }
[data-theme="dark"] .list-card__badges .badge-ownership { background: #6366f1; }
.list-card__link {
  /* "View profile →" was a 12px plain text link, easy to miss next to
     the card-level click that pans the map. Give it pill-shaped chip
     styling so it reads as a tappable action — the card-level click
     still pans, but the link's button affordance shows the
     "navigate" path. */
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 10px;
  margin-top: 4px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}
.list-card__link:hover {
  background: var(--accent);
  color: var(--accent-fg);
  text-decoration: none;
}

/* ── Settings panel ─────────────────────────────────────────────────── */
.settings-help {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.btn-danger {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface-elevated);
  color: #b91c1c;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.btn-danger:hover { background: #b91c1c; color: #ffffff; border-color: #b91c1c; }
[data-theme="dark"] .btn-danger { color: #f87171; }
[data-theme="dark"] .btn-danger:hover { background: #dc2626; color: #ffffff; border-color: #dc2626; }

/* Legacy v1 .chrome-hamburger + .mobile-drawer-backdrop rules were
   removed when Bundle 4 lifted the mobile chrome from left-slide
   drawer → bottom-sheet pattern. The hamburger went away (rail is
   the persistent bottom-tab nav now) and the backdrop went with it
   (sheet doesn't dim the map). */

/* ── Mobile bottom sheet (≤ 768px) ─────────────────────────────────────
   At narrow viewports the desktop three-column grid (rail + panel + map)
   adds up to ~416px, wider than a phone. Pattern v2 (was: left-drawer):
   - Map fills the viewport under the chrome header.
   - Rail collapses to a horizontal tab bar pinned to the bottom edge
     (Google Maps / Yelp / Apple Maps pattern).
   - Panel becomes a bottom sheet that slides up from above the rail.
     Three snap states — peek / half / full — controlled by the JS
     mobile_sheet controller. The user drags the handle or taps it to
     advance between snaps.
   - No backdrop dimming. The map stays visible AND interactive in
     peek and half states; only in full does the panel cover it.

   Above 768px the cascade falls through to the default desktop grid
   rules and the rail / panel sit in their usual columns. */
@media (max-width: 768px) {
  /* Body grid: collapse rail + panel columns to 0 — both are lifted
     out of the grid into fixed overlays below. Header still spans
     row 1 via grid-column: 1 / -1 (unchanged). */
  body {
    grid-template-columns: 0 0 1fr;
  }

  /* Tighten the header so brand + search + tools fit at 375px.
     Hamburger is gone — rail is the persistent nav now — so we
     don't need to make room for that 40px button either. */
  .chrome-header { padding: 0 8px; gap: 6px; }
  .brand-name { display: none; }
  .chrome-tools { gap: 4px; }
  .chrome-icon-btn { width: 32px; height: 32px; font-size: 16px; }
  .chrome-signin-btn { padding: 6px 10px; font-size: 12px; }
  .chrome-search-wrap { margin: 0 4px; }
  .chrome-search { padding: 7px 12px 7px 32px; font-size: 13px; }
  .chrome-search-icon { left: 10px; }

  /* Hamburger hidden — the bottom rail is always-visible nav, no
     menu button needed. (Desktop sets display:none too; the 768px
     rule used to override to inline-flex.) */
  .chrome-hamburger { display: none !important; }

  /* Hide the desktop panel-collapse chevron — sheets snap, they
     don't collapse to a strip. */
  .panel-chevron { display: none; }

  /* ── Rail = bottom tab bar ──────────────────────────────────────── */
  [data-region="rail"] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 40;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.10);
    /* Honor iOS home-indicator inset so the tab bar doesn't sit on
       the indicator. Padding-bottom expands the bar; the icons stay
       at the top of that expanded area. */
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* The icon-rail partial uses .icon-rail__list as the inner container.
     On desktop it's vertical; on mobile flip it horizontal. */
  [data-region="rail"] > * {
    display: flex !important;
    flex-direction: row !important;
    height: 56px;
    align-items: center;
    justify-content: space-around;
    padding: 0;
  }

  /* ── Panel = bottom sheet ───────────────────────────────────────── */
  [data-region="panel"] {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    /* Sheet's natural bottom edge sits just above the rail tab bar. */
    bottom: 56px;
    z-index: 30;
    background: var(--bg);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    /* Smooth snap transitions. The JS controller temporarily sets
       transition:none during a drag so the sheet tracks the finger
       1:1, then restores transition on touchend for the snap. */
    transition: transform var(--transition);
    /* Default state — until the JS controller sets data-mobile-sheet
       — is peek so first paint shows the sheet's header strip. */
    transform: translateY(calc(100% - 96px));
  }

  /* Snap states. The JS controller sets body[data-mobile-sheet]
     to one of these three based on user input + the active rail. */
  body[data-mobile-sheet="peek"] [data-region="panel"] {
    /* ~96px of sheet visible above the rail — enough room for the
       drag handle + panel title + the metadata count. */
    transform: translateY(calc(100% - 96px));
  }
  body[data-mobile-sheet="half"] [data-region="panel"] {
    /* Roughly half the available viewport. translateY(40vh) leaves
       ~60vh of map visible above the sheet. */
    transform: translateY(40vh);
  }
  body[data-mobile-sheet="full"] [data-region="panel"] {
    /* Pinned just below the chrome header. The whole panel content
       is reachable; a strip of map peeks through at the very top so
       the user can still tap-to-dismiss back to peek. */
    transform: translateY(0);
  }
  /* While the user is actively dragging the sheet, the controller
     adds .is-dragging to the body so the transform tracks the finger
     immediately without the snap easing. */
  body.is-dragging [data-region="panel"] {
    transition: none;
  }

  /* Sheet drag handle — a 36px tap target with a small visible bar.
     Lives at the very top of the panel. Server-rendered by every
     panel partial (so all four panels get the same affordance). */
  .sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    cursor: grab;
    touch-action: none;
    /* Hint to assistive tech that this is interactive. */
  }
  .sheet-handle:active { cursor: grabbing; }
  .sheet-handle__bar {
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
  }

  /* Push map content above the bottom rail tab bar so the last list
     card / map control isn't hidden behind it. */
  [data-region="map"] {
    padding-bottom: 56px;
  }
  /* Reposition the zoom widget above the rail. */
  .esri-ui-corner.esri-ui-bottom-right {
    bottom: 64px !important;
  }
}

/* ── Phone (≤ 480px) — tighten the header further ─────────────────────
   The 768px rules already hide the brand wordmark and shrink the icon
   buttons, but at iPhone widths the search bar still gets squeezed
   into ~100px because three icon tools + the sign-in pill are
   competing for the same row. Hiding the full-page toggle frees ~36px
   for the search — full-page is a desktop affordance anyway (mobile
   uses the drawer overlay pattern, which is full-page by default). */
@media (max-width: 480px) {
  .chrome-header [data-toggle="full-page"] { display: none; }
  /* Trim the sign-in pill so it doesn't dominate when the auth state
     is signed-out. (Signed-in users see the account dropdown trigger
     instead, sized via .chrome-icon-btn.) */
  .chrome-signin-btn { padding: 6px 8px; font-size: 11px; }
  /* Narrow the search input gutter so brand mark + search + tools
     line up without horizontal scroll on a 360px viewport. */
  .chrome-search-wrap { margin: 0 2px; }
}