/**
 * Enamel palette as CSS custom properties.
 * GENERATED by `npm run publish:enamel-css` from hudTheme.ts — do not edit.
 */
:root {
  --enamel: #0b3a8c;
  --enamel-bright: #1450b8;
  --enamel-deep: #072861;
  --enamel-ink: #ffffff;
  --enamel-muted: rgba(255,255,255,0.72);
  --ink-muted: #5f584d;
  --ink-dim: #1f1c17;
  --ink: #1f1c17;
  --muted: #5f584d;
  --line: rgba(31,28,23,0.14);
  --night: #f4efe5;
  --rivet: #c4a35a;
  --rivet-deep: #8a7040;
  --enamel-copper: #b87333;
  --enamel-copper-hi: #d9a05b;
  --enamel-copper-mid: #c9844a;
  --enamel-copper-deep: #8a5524;
  --font-plaque: "Barlow Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --accent: #b4682c;
  --day-paper: #f4efe5;
  --day-paper-raised: #fbf8f2;
  --day-paper-sunk: #ebe4d6;
  --day-ink: #1f1c17;
  --day-ink-muted: #5f584d;
  --day-line: rgba(31,28,23,0.14);
  --day-line-strong: rgba(31,28,23,0.26);
  --day-fill: rgba(31,28,23,0.045);
  --day-fill-hover: rgba(31,28,23,0.085);
  --day-accent: #b4682c;
  --day-accent-ink: #8a4a18;
  --day-accent-soft: rgba(180,104,44,0.13);
  --day-scrim: rgba(28,24,18,0.38);
  --day-danger: #a8321f;
}

/**
 * Shared enamel street-plaque primitives — Map Quest + Canal Recall.
 *
 * Tokens live in enamel-tokens.css (generated from hudTheme.ts).
 * Product layout stays local: Canal setup rail, Map Quest chips/dialogs.
 *
 * Do not set `display` here — Tailwind `hidden` / flex utilities must win.
 */

/* Framed enamel plaque (rivets + white rim) — hero title / primary stamp only. */
.enamel-plaque {
  --_enamel: var(--enamel);
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 6px;
  color: var(--enamel-ink);
  background:
    linear-gradient(165deg, var(--enamel-bright) 0%, var(--_enamel) 42%, var(--enamel-deep) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 18px rgba(0, 0, 0, 0.28);
  transition: filter 160ms ease-out;
}
.enamel-plaque.enamel-framed::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 3px;
  pointer-events: none;
}
.enamel-plaque.enamel-framed::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  background-image:
    radial-gradient(circle at 7px 7px, #ddd3a8 0 1.5px, var(--rivet) 2px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 7px) 7px, #ddd3a8 0 1.5px, var(--rivet) 2px 3.5px, transparent 4px),
    radial-gradient(circle at 7px calc(100% - 7px), #ddd3a8 0 1.5px, var(--rivet) 2px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #ddd3a8 0 1.5px, var(--rivet) 2px 3.5px, transparent 4px);
}

/* Choice tile — translucent over cobalt dialogs (Map Quest default). */
.enamel-tile {
  color: var(--enamel-ink);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  box-shadow: none;
  transition: background 160ms ease-out, border-color 160ms ease-out, filter 160ms ease-out;
}
.enamel-tile:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.3);
}
.enamel-tile.active {
  background: linear-gradient(165deg, var(--enamel-bright), var(--enamel));
  border-color: rgba(196, 163, 90, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset;
}

/* Canal setup rail sits on daylight paper (--day-* tokens): tiles are raised
   paper with an ink hairline; the selected tile takes the one accent, copper. */
.enamel-setup .enamel-tile,
.setup-choice.enamel-tile {
  border-radius: 6px;
  border-color: var(--day-line);
  background: var(--day-paper-raised);
  color: var(--day-ink);
  box-shadow: 0 1px 1px rgba(31, 28, 23, 0.05);
}
.enamel-setup .enamel-tile:hover,
.setup-choice.enamel-tile:hover {
  background: var(--day-paper-raised);
  border-color: var(--day-line-strong);
}
.enamel-setup .enamel-tile.active,
.setup-choice.enamel-tile.active {
  background: var(--day-accent-soft);
  border-color: var(--day-accent);
  box-shadow: inset 0 0 0 1px var(--day-accent);
}
.setup-choice.enamel-tile.active .enamel-icon,
.setup-choice.enamel-tile.active strong { color: var(--day-accent-ink); }
.setup-choice.enamel-tile:focus-visible {
  outline: 2px solid var(--day-accent-ink);
  outline-offset: 2px;
}

/* Condensed plaque type (titles, mode labels). */
.enamel-brand {
  font-family: var(--font-plaque);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Copper stamp shared stops — ink colour is product-local (dark vs white). */
.enamel-copper-fill {
  background: linear-gradient(
    180deg,
    var(--enamel-copper-hi) 0%,
    var(--enamel-copper) 45%,
    var(--enamel-copper-deep) 100%
  );
}

/* Site switch — Home / Ride / Quiz, shared by Canal Recall's settings and
   setup rail, Map Quest's menu and the landing page. Paper segments; the
   current surface takes the copper selected state used by setup tiles. */
.site-switch {
  display: flex;
  gap: 3px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--day-line);
  border-radius: 8px;
  background: var(--day-fill);
}
.site-switch a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--day-ink-muted);
  font-family: var(--font-plaque);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease-out, color 140ms ease-out, box-shadow 140ms ease-out;
}
.site-switch a svg { width: 15px; height: 15px; flex: none; }
.site-switch a:hover { color: var(--day-ink); background: var(--day-paper-raised); }
.site-switch a[aria-current] {
  color: var(--day-accent-ink);
  background: var(--day-paper-raised);
  box-shadow: inset 0 0 0 1px var(--day-accent), 0 1px 2px var(--day-line);
}
.site-switch a:focus-visible { outline: 2px solid var(--day-accent-ink); outline-offset: 2px; }
/* Five surfaces do not fit side by side in a 360 px rail (the ride's setup
   rail, a phone menu): stack each icon over its label, tab-bar style. */
.site-switch { container-type: inline-size; }
@container (max-width: 430px) {
  .site-switch a {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 40px;
    padding: 4px 2px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}

/* Account chip — the one sign-in / account control in the ride, Map Quest and
   My progress (src/components/AccountChip.tsx). A guest sees a paper "Sign in"
   chip; signed in, an avatar opens a two-item menu. */
.account-chip { position: relative; display: inline-flex; flex: none; }
.account-chip-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--day-line-strong);
  border-radius: 999px;
  background: var(--day-paper-raised);
  color: var(--day-ink);
  font-family: var(--font-plaque);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px var(--day-line);
  transition: border-color 140ms ease-out, background 140ms ease-out, box-shadow 140ms ease-out;
}
.account-chip-button:hover:not(:disabled) { border-color: var(--day-accent); }
.account-chip-button:focus-visible { outline: 2px solid var(--day-accent-ink); outline-offset: 2px; }
.account-chip-button:disabled { cursor: default; opacity: 0.6; }
.account-chip-signin { padding: 3px 14px 3px 11px; color: var(--day-accent-ink); }
.account-chip-signin.account-chip-icon { width: 36px; padding: 0; justify-content: center; }
.account-chip-button svg { width: 16px; height: 16px; flex: none; }
.account-chip-button .account-chip-caret { width: 14px; height: 14px; color: var(--day-ink-muted); transition: transform 160ms ease-out; }
.account-chip[data-open] .account-chip-caret { transform: rotate(180deg); }
.account-chip[data-open] .account-chip-button { border-color: var(--day-accent); box-shadow: 0 0 0 3px var(--day-accent-soft); }
.account-chip-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--day-paper-sunk);
}
.account-chip-initial {
  color: #2a1606;
  font: 800 15px/1 var(--font-plaque);
  letter-spacing: 0;
  background: linear-gradient(180deg, var(--enamel-copper-hi) 0%, var(--enamel-copper) 55%, var(--enamel-copper-deep) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 244, 222, 0.75);
}
.account-chip-name { max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; }
.account-chip-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 228px;
  max-width: min(300px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid var(--day-line-strong);
  border-radius: 10px;
  background: var(--day-paper-raised);
  color: var(--day-ink);
  box-shadow: 0 2px 4px rgba(31, 28, 23, 0.08), 0 14px 34px rgba(31, 28, 23, 0.2);
  text-transform: none;
  letter-spacing: normal;
  animation: account-chip-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.account-chip-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--day-line); }
.account-chip-who strong { font: 600 14px/1.3 system-ui, sans-serif; overflow-wrap: anywhere; }
.account-chip-who small { font: 12px/1.35 system-ui, sans-serif; color: var(--day-ink-muted); overflow-wrap: anywhere; }
.account-chip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--day-ink);
  font: 700 15px/1 var(--font-plaque);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.account-chip-item svg { width: 17px; height: 17px; flex: none; color: var(--day-accent-ink); }
.account-chip-item:hover { background: var(--day-fill-hover); }
.account-chip-item:focus-visible { outline: 2px solid var(--day-accent-ink); outline-offset: -2px; }
@keyframes account-chip-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .account-chip-menu { animation: none; } }