/* ============================================================================
   chrome.css — the unified site header, the Wire ticker, and the tip jar.
   Shared by every page (homepage + interior) via the _AppBar partial. Styles
   are namespaced (.sb-*) and self-contained (literal OKLCH + named fonts) so
   they render identically regardless of v1.css / site.css. Loaded LAST.
   ========================================================================== */

:root {
  --sb-ink:    oklch(93% 0.030 84);   /* candlelight cream */
  --sb-ink-2:  oklch(82% 0.030 84);
  --sb-ink-3:  oklch(70% 0.032 84);
  --sb-gold:   oklch(84% 0.130 86);
  --sb-gold-d: oklch(75% 0.130 84);
  --sb-gold-ink: oklch(24% 0.045 78);
  --sb-panel:  oklch(27% 0.050 279);
  --sb-line:   oklch(42% 0.050 280);
  --sb-display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --sb-ui:      "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  /* z: bar 100 · drop 120 · jar 130 · scrim 140 · menu 150 */
}

/* ---------------------------------------------------------------- App bar */
.sb-bar {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, oklch(21% 0.05 282 / 0.94), oklch(19% 0.045 280 / 0.9));
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--sb-line);
  --sb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.sb-in {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(14px, 3vw, 32px);
  display: flex; align-items: center; gap: 10px; height: 64px;
}
.sb-brand {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; flex: none;
  font-family: var(--sb-display); font-weight: 800; font-size: 20px; letter-spacing: -0.03em;
  color: var(--sb-ink); text-decoration: none; margin-right: 10px;
}
.sb-brand:hover { color: var(--sb-ink); text-decoration: none; }
.sb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sb-gold); box-shadow: 0 0 10px 2px oklch(84% 0.13 86 / 0.65); }

.sb-nav { display: flex; align-items: center; gap: 2px; }
.sb-link {
  position: relative;
  font-family: var(--sb-ui); font-weight: 600; font-size: 15px; color: var(--sb-ink-2);
  background: none; border: 0; cursor: pointer; padding: 9px 12px; border-radius: 10px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.sb-link:hover, .sb-link[aria-expanded="true"] { color: var(--sb-ink); background: oklch(100% 0 0 / 0.07); text-decoration: none; }
.sb-link:focus-visible { outline: 2px solid var(--sb-gold); outline-offset: 2px; }
.sb-link.is-current { color: var(--sb-gold); }
.sb-link.is-current::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--sb-gold);
}
.sb-caret {
  width: 7px; height: 7px; margin-top: -3px;
  border: solid currentColor; border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg); opacity: 0.7; transition: transform .25s var(--sb-ease);
}
.sb-link[aria-expanded="true"] .sb-caret { transform: translateY(3px) rotate(225deg); }

/* ---- panels (mega menus) ---- */
.sb-item { position: static; }
.sb-item:has(.sb-panel-sm) { position: relative; }
.sb-panel {
  position: absolute; top: 100%; left: 50%; z-index: 120;
  width: min(1060px, calc(100vw - 28px));
  margin-top: 8px;
  background:
    radial-gradient(80% 60% at 50% 0%, oklch(40% 0.08 290 / 0.35), transparent 70%),
    oklch(24% 0.05 280);
  border: 1px solid var(--sb-line); border-radius: 20px;
  box-shadow: 0 6px 8px oklch(8% 0.03 280 / 0.5);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(0.985); transform-origin: 50% 0;
  transition: opacity .16s ease, transform .22s var(--sb-ease), visibility 0s linear .22s;
}
.sb-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.sb-panel-sm { width: 400px; }
.sb-item.is-open > .sb-panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .16s ease, transform .22s var(--sb-ease), visibility 0s;
}
.sb-panel-in { padding: 22px 24px 16px; }
.sb-panel a { text-decoration: none; }
.sb-panel a:focus-visible, .sb-menu a:focus-visible { outline: 2px solid var(--sb-gold); outline-offset: 2px; border-radius: 8px; }

.sb-col-h, .sb-resort-h {
  font-family: var(--sb-ui); font-size: 13px; font-weight: 800; color: var(--sb-gold); margin: 0 0 10px;
}
.sb-col-h2 { margin-top: 18px; }

.sb-parks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 28px; }
.sb-resort ul { list-style: none; margin: 0; padding: 0; }
.sb-park { display: flex; flex-direction: column; gap: 5px; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; transition: background-color .15s; }
.sb-park:hover { background: oklch(100% 0 0 / 0.05); }
.sb-park-name { font-family: var(--sb-display); font-size: 17px; font-weight: 700; color: var(--sb-ink); }
.sb-park-name:hover { color: var(--sb-gold); }
.sb-park-tools { display: flex; gap: 6px; }
.sb-park-tools a {
  font-family: var(--sb-ui); font-size: 12.5px; font-weight: 700; color: var(--sb-ink-2);
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--sb-line);
  transition: border-color .15s, color .15s;
}
.sb-park-tools a:hover { border-color: var(--sb-gold); color: var(--sb-gold); }

/* Maps: one photo card per park, the aerial itself is the thumbnail. */
.sb-item:has(.sb-panel-maps) { position: relative; }
.sb-panel-maps { width: min(620px, calc(100vw - 28px)); }
.sb-mapgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sb-mapcard {
  position: relative; display: grid; border-radius: 16px; overflow: hidden;
  background: oklch(19% 0.04 280); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.08);
  transition: box-shadow .2s, transform .2s var(--sb-ease);
}
.sb-mapcard:hover { box-shadow: inset 0 0 0 2px var(--sb-gold), 0 14px 30px -14px oklch(5% 0.03 280 / 0.8); transform: translateY(-2px); }
.sb-mapimg { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.sb-mapimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--sb-ease); }
.sb-mapcard:hover .sb-mapimg img { transform: scale(1.06); }
.sb-mapimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(15% 0.03 280 / 0.05) 30%, oklch(15% 0.03 280 / 0.92)); }
.sb-maplive {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px;
  font: 800 10.5px/1 var(--sb-ui); letter-spacing: 0.12em; text-transform: uppercase; color: oklch(98% 0.01 84);
  padding: 6px 9px; border-radius: 999px; background: oklch(15% 0.03 280 / 0.72); backdrop-filter: blur(6px);
}
.sb-maplive i { width: 7px; height: 7px; border-radius: 50%; background: oklch(81% 0.16 152); box-shadow: 0 0 8px oklch(81% 0.16 152); }
.sb-mapname { position: absolute; left: 14px; right: 14px; bottom: 58px; display: grid; gap: 2px; }
.sb-mapname b { font: 800 21px/1.05 var(--sb-display); letter-spacing: -0.015em; color: oklch(99% 0.01 84); text-shadow: 0 1px 10px oklch(0% 0 0 / 0.6); }
.sb-mapcard:hover .sb-mapname b { color: var(--sb-gold); }
.sb-mapname small { font: 600 12px/1.2 var(--sb-ui); color: oklch(88% 0.02 84); }
.sb-mapchips { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 12px 12px; min-height: 44px; }
.sb-mapchips span { font: 700 11.5px/1 var(--sb-ui); color: var(--sb-ink-2); padding: 5px 9px; border-radius: 999px; border: 1px solid var(--sb-line); }
.sb-mmaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 4px 0 14px; }
.sb-mmap { position: relative; display: block; border-radius: 12px; overflow: hidden; text-decoration: none; }
.sb-mmap img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.sb-mmap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, oklch(15% 0.03 280 / 0.9)); }
.sb-mmap b { position: absolute; left: 10px; bottom: 8px; z-index: 1; font: 800 15px/1.1 var(--sb-display); color: oklch(99% 0.01 84); }
@media (prefers-reduced-motion: reduce) { .sb-mapcard, .sb-mapimg img { transition: none; } .sb-mapcard:hover { transform: none; } .sb-mapcard:hover .sb-mapimg img { transform: none; } }

.sb-plan { display: grid; grid-template-columns: 1.05fr 1fr 0.95fr; gap: 8px 30px; }
.sb-col { display: flex; flex-direction: column; min-width: 0; }
.sb-tool { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; margin: 0 -10px; border-radius: 12px; transition: background-color .15s; }
.sb-tool:hover { background: oklch(100% 0 0 / 0.06); }
.sb-tool b { font-family: var(--sb-ui); font-size: 15px; font-weight: 700; color: var(--sb-ink); }
.sb-tool span { font-family: var(--sb-ui); font-size: 13px; color: var(--sb-ink-3); }
.sb-tool:hover b { color: var(--sb-gold); }
.sb-intents { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-intent {
  font-family: var(--sb-ui); font-size: 13.5px; font-weight: 700; color: var(--sb-ink);
  padding: 6px 12px; border-radius: 999px; background: oklch(100% 0 0 / 0.05); border: 1px solid var(--sb-line);
  transition: background-color .15s, border-color .15s, color .15s;
}
.sb-intent:hover { background: var(--sb-gold); border-color: var(--sb-gold); color: var(--sb-gold-ink); }
.sb-start { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 12px; font-family: var(--sb-ui); font-size: 15px; font-weight: 700; color: var(--sb-ink); }
.sb-start:hover { background: oklch(100% 0 0 / 0.06); color: var(--sb-gold); }
.sb-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: oklch(84% 0.13 86 / 0.14); border: 1px solid oklch(84% 0.13 86 / 0.4); color: var(--sb-gold); font-size: 12px; font-weight: 800; }
.sb-event { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 9px 12px 9px 26px; margin: 0 -10px 4px; border-radius: 12px; background: oklch(100% 0 0 / 0.04); transition: background-color .15s; }
.sb-event::before { content: ""; position: absolute; left: 11px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--sb-gold); }
.sb-event.is-disneyland::before { background: oklch(74% 0.14 10); }
.sb-event.is-universal::before { background: oklch(76% 0.1 190); }
.sb-event:hover { background: oklch(100% 0 0 / 0.08); }
.sb-event b { font-family: var(--sb-ui); font-size: 14.5px; font-weight: 700; color: var(--sb-ink); }
.sb-event span { font-family: var(--sb-ui); font-size: 12.5px; color: var(--sb-ink-3); }
.sb-more { font-family: var(--sb-ui); font-size: 13.5px; font-weight: 700; color: var(--sb-gold); padding: 6px 0; }
.sb-news { display: flex; flex-direction: column; padding: 14px 20px; }

.sb-panel-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px;
  padding: 12px 24px; border-top: 1px solid var(--sb-line);
  background: oklch(20% 0.045 280 / 0.6); border-radius: 0 0 20px 20px;
}
.sb-panel-foot a { font-family: var(--sb-ui); font-size: 13.5px; color: var(--sb-ink-3); padding: 4px 0; }
.sb-panel-foot a b { color: var(--sb-ink); font-weight: 700; margin-right: 4px; }
.sb-panel-foot a:hover b { color: var(--sb-gold); }
.sb-panel-foot .sb-all { margin-left: auto; font-weight: 800; color: var(--sb-gold); }

/* ---- search trigger + live pill ---- */
.sb-find-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
  width: clamp(200px, 21vw, 290px); height: 40px; padding: 0 8px 0 14px;
  border-radius: 999px; border: 1px solid var(--sb-line); background: oklch(100% 0 0 / 0.05);
  color: var(--sb-ink-3); cursor: pointer; font-family: var(--sb-ui); font-size: 14px; font-weight: 600;
  transition: border-color .15s, background-color .15s, color .15s;
}
.sb-find-btn:hover { border-color: oklch(84% 0.13 86 / 0.55); background: oklch(100% 0 0 / 0.08); color: var(--sb-ink-2); }
.sb-find-btn:focus-visible { outline: 2px solid var(--sb-gold); outline-offset: 2px; }
.sb-find-btn svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--sb-gold); stroke-width: 2.2; stroke-linecap: round; }
.sb-find-ph { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-kbd, .sb-finder kbd {
  flex: none; font-family: var(--sb-ui); font-size: 11.5px; font-weight: 700; color: var(--sb-ink-3);
  border: 1px solid var(--sb-line); border-radius: 6px; padding: 2px 7px; background: oklch(100% 0 0 / 0.04);
}
.sb-pill {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-family: var(--sb-ui); font-weight: 800; font-size: 14px; color: var(--sb-gold-ink);
  background: var(--sb-gold); padding: 10px 16px; border-radius: 999px; text-decoration: none;
  white-space: nowrap; transition: background-color .15s, transform .2s var(--sb-ease);
}
.sb-pill:hover { background: oklch(88% 0.12 88); color: var(--sb-gold-ink); text-decoration: none; transform: translateY(-1px); }
.sb-pill:focus-visible { outline: 2px solid var(--sb-ink); outline-offset: 2px; }
.sb-live { width: 8px; height: 8px; border-radius: 50%; background: oklch(55% 0.17 150); box-shadow: 0 0 0 0 oklch(55% 0.17 150 / 0.6); animation: sb-live 2s ease-out infinite; flex: none; }
@keyframes sb-live { 0% { box-shadow: 0 0 0 0 oklch(55% 0.17 150 / 0.55); } 70% { box-shadow: 0 0 0 7px oklch(55% 0.17 150 / 0); } 100% { box-shadow: 0 0 0 0 oklch(55% 0.17 150 / 0); } }

.sb-menu-btn {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  background: oklch(100% 0 0 / 0.05); border: 1px solid var(--sb-line); color: var(--sb-ink); cursor: pointer;
}
.sb-menu-btn:focus-visible { outline: 2px solid var(--sb-gold); outline-offset: 2px; }
.sb-burger { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.sb-burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.sb-burger i:nth-child(2) { width: 70%; margin-left: auto; }

/* ---- the finder (search dialog) ---- */
.sb-finder {
  width: min(680px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 80px));
  margin: 8vh auto auto; padding: 0;
  border: 1px solid var(--sb-line); border-radius: 20px;
  background: oklch(23% 0.05 280); color: var(--sb-ink);
  box-shadow: 0 6px 8px oklch(8% 0.03 280 / 0.5);
  overflow: hidden;
}
.sb-finder[open] { display: flex; flex-direction: column; animation: sb-pop .22s var(--sb-ease, ease-out); }
.sb-finder::backdrop { background: oklch(10% 0.03 280 / 0.65); backdrop-filter: blur(3px); }
@keyframes sb-pop { from { opacity: 0; transform: translateY(-8px) scale(0.985); } to { opacity: 1; transform: none; } }
.sb-finder-box { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 20px; height: 64px; border-bottom: 1px solid var(--sb-line); flex: none; }
.sb-finder-box svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--sb-gold); stroke-width: 2.1; stroke-linecap: round; }
.sb-finder-box input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-family: var(--sb-ui); font-size: 19px; color: var(--sb-ink); }
.sb-finder-box input::placeholder { color: var(--sb-ink-3); }
.sb-finder-box input::-webkit-search-cancel-button { display: none; }
.sb-finder-x { flex: none; font-family: var(--sb-ui); font-size: 12px; font-weight: 700; color: var(--sb-ink-3); background: none; border: 1px solid var(--sb-line); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.sb-finder-body { overflow-y: auto; padding: 8px 10px 12px; flex: 1 1 auto; }
.sb-finder-list { list-style: none; margin: 0; padding: 0; }
.sb-finder-list:empty { display: none; }
.sb-fgroup { font-family: var(--sb-ui); font-size: 12.5px; font-weight: 800; color: var(--sb-gold); padding: 10px 12px 4px; }
.sb-fitem a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--sb-ink); text-decoration: none; }
.sb-fitem.is-active a, .sb-fitem a:hover { background: oklch(100% 0 0 / 0.08); }
.sb-fitem.is-active b { color: var(--sb-gold); }
.sb-fitem b { flex: 1 1 auto; min-width: 0; font-family: var(--sb-ui); font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-fitem b mark { background: none; color: var(--sb-gold); }
.sb-fitem span { flex: none; font-family: var(--sb-ui); font-size: 12px; color: var(--sb-ink-3); }
.sb-fitem .sb-fsub { font-size: 12.5px; font-weight: 600; color: var(--sb-ink-3); white-space: nowrap; }
.sb-fitem .sb-fgo { opacity: 0; color: var(--sb-gold); font-size: 14px; }
@media (hover: none), (max-width: 640px) { .sb-finder .sb-finder-foot { display: none; } }
.sb-fitem.is-active .sb-fgo { opacity: 1; }
.sb-fnone { padding: 18px 12px 6px; font-family: var(--sb-ui); font-size: 15px; color: var(--sb-ink-2); }
.sb-finder-start { padding: 10px 6px 4px; }
.sb-finder-start[hidden] { display: none; }
.sb-finder-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sb-finder-quick a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: oklch(100% 0 0 / 0.05); border: 1px solid var(--sb-line); text-decoration: none; transition: border-color .15s; }
.sb-finder-quick a:hover { border-color: var(--sb-gold); }
.sb-finder-quick b { font-family: var(--sb-ui); font-size: 15px; font-weight: 700; color: var(--sb-ink); }
.sb-finder-quick span { font-family: var(--sb-ui); font-size: 12.5px; color: var(--sb-ink-3); }
.sb-finder-tip { margin: 14px 0 0; font-family: var(--sb-ui); font-size: 13.5px; color: var(--sb-ink-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sb-finder-tip button { font: inherit; font-weight: 700; color: var(--sb-ink); background: oklch(100% 0 0 / 0.05); border: 1px solid var(--sb-line); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.sb-finder-tip button:hover { border-color: var(--sb-gold); color: var(--sb-gold); }
.sb-finder-foot { display: flex; gap: 18px; padding: 10px 20px; border-top: 1px solid var(--sb-line); font-family: var(--sb-ui); font-size: 12px; color: var(--sb-ink-3); flex: none; }
.sb-finder-foot kbd { margin-right: 3px; }

/* ---------------------------------------------------------------- Mobile menu */
.sb-scrim { position: fixed; inset: 0; z-index: 140; background: oklch(10% 0.03 280 / 0.6); backdrop-filter: blur(2px); }
.sb-scrim[hidden] { display: none; }
.sb-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 150;
  background: oklch(21% 0.048 279); border-left: 1px solid var(--sb-line);
  padding: 14px 16px 44px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s;
}
.sb-menu.show { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s; }
html.preload .sb-menu, html.preload .sb-scrim, html.preload .sb-panel { transition: none !important; }
.sb-menu-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; }
.sb-menu-head .sb-brand { font-size: 18px; }
.sb-close { width: 40px; height: 40px; border-radius: 12px; background: oklch(100% 0 0 / 0.05); border: 1px solid var(--sb-line); color: var(--sb-ink); font-size: 16px; cursor: pointer; }
.sb-menu .sb-find-wide { width: 100%; height: 48px; margin: 0; font-size: 15px; flex: none; }
.sb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sb-tiles a {
  display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 10px 14px;
  border-radius: 14px; background: oklch(100% 0 0 / 0.05); border: 1px solid var(--sb-line);
  font-family: var(--sb-ui); color: var(--sb-ink); text-decoration: none;
}
.sb-tiles a:first-child { background: var(--sb-gold); border-color: var(--sb-gold); color: var(--sb-gold-ink); }
.sb-tiles b { font-size: 14.5px; font-weight: 800; line-height: 1.2; }
.sb-acc { border-top: 1px solid oklch(34% 0.05 278); }
.sb-acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px; font-family: var(--sb-display); font-size: 19px; font-weight: 700; color: var(--sb-ink);
}
.sb-acc summary::-webkit-details-marker { display: none; }
.sb-acc summary::after { content: ""; width: 8px; height: 8px; border: solid var(--sb-gold); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .25s; margin-right: 6px; }
.sb-acc[open] summary::after { transform: rotate(225deg); }
.sb-acc summary:focus-visible { outline: 2px solid var(--sb-gold); outline-offset: 2px; border-radius: 8px; }
.sb-acc[open] { padding-bottom: 10px; }
.sb-mgroup { font-family: var(--sb-ui); font-size: 12.5px; font-weight: 800; color: var(--sb-gold); margin: 8px 4px 2px; }
.sb-mpark { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; }
.sb-menu .sb-mpark-name { font-family: var(--sb-ui); font-size: 16px; font-weight: 700; color: var(--sb-ink); text-decoration: none; padding: 6px 0; }
.sb-mpark span { display: flex; gap: 6px; }
.sb-mpark span a { font-family: var(--sb-ui); font-size: 12.5px; font-weight: 700; color: var(--sb-ink-2); text-decoration: none; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--sb-line); }
.sb-menu .sb-intents { margin: 4px 0 8px; }
.sb-menu a.sb-mlink { display: flex; justify-content: space-between; gap: 10px; padding: 11px 4px; font-family: var(--sb-ui); font-size: 15.5px; font-weight: 600; color: oklch(91% 0.025 84); text-decoration: none; border-top: 1px solid oklch(30% 0.045 278); }
.sb-mlink span { font-size: 12.5px; color: var(--sb-ink-3); font-weight: 700; }
.sb-menu a.sb-mall { color: var(--sb-gold); font-weight: 800; }
.sb-menu a.sb-mtop { display: block; padding: 14px 4px; border-top: 1px solid oklch(34% 0.05 278); font-family: var(--sb-display); font-size: 19px; font-weight: 700; color: var(--sb-ink); text-decoration: none; }
.sb-menu a:hover, .sb-menu a.is-current { color: var(--sb-gold); }

@media (prefers-reduced-motion: reduce) {
  .sb-menu, .sb-panel, .sb-caret, .sb-pill { transition: none !important; }
  .sb-live, .sb-finder[open] { animation: none !important; }
}

@media (max-width: 1240px) {
  .sb-kbd { display: none; }
  .sb-find-btn { width: clamp(170px, 18vw, 230px); }
}
@media (max-width: 1060px) {
  .sb-nav { display: none; }
  .sb-menu-btn { display: inline-flex; }
  .sb-in > .sb-find-btn { width: 40px; flex: none; padding: 0; justify-content: center; }
  .sb-in > .sb-find-btn .sb-find-ph { display: none; }
}
@media (max-width: 420px) {
  .sb-in { gap: 6px; padding-inline: 12px; }
  .sb-brand { font-size: 17px; gap: 7px; margin-right: 0; }
  .sb-dot { width: 8px; height: 8px; }
  .sb-pill { padding: 9px 11px; font-size: 13px; gap: 6px; }
  .sb-in > .sb-find-btn, .sb-menu-btn { width: 38px; height: 38px; }
}
@media (max-width: 340px) {
  .sb-in > .sb-pill { display: none; }
}
/* ---------------------------------------------------------------- The Wire ticker (unified) */
.ticker { display: flex; align-items: stretch; border-bottom: 1px solid var(--sb-line); background: oklch(23% 0.048 281 / 0.92); overflow: hidden; }
.ticker-flag { flex: 0 0 auto; display: flex; align-items: center; background: var(--sb-gold); color: var(--sb-gold-ink); font-family: var(--sb-ui); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; padding: 8px 16px; white-space: nowrap; }
.ticker-viewport { flex: 1 1 auto; overflow: hidden; position: relative; }
.ticker-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: sb-ticker var(--ticker-dur, 60s) linear infinite; }
@keyframes sb-ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track, .ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker-item { font-family: var(--sb-ui); font-size: 14px; font-weight: 500; color: var(--sb-ink-2); text-decoration: none; padding: 8px 0; display: inline-block; }
.ticker-item:hover { color: var(--sb-ink); }
.ticker-src { font-family: var(--sb-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; color: var(--sb-ink-3); margin-right: 7px; }
.ticker-sep { color: var(--sb-gold); font-size: 9px; padding: 0 16px; opacity: 0.6; }
.ticker-pause { flex: 0 0 auto; background: none; border: 0; border-left: 1px solid var(--sb-line); color: var(--sb-ink-3); font-size: 12px; padding: 0 14px; cursor: pointer; }
.ticker-pause:hover { color: var(--sb-gold); }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .ticker-viewport { overflow-x: auto; } }

/* ---------------------------------------------------------------- Buy Me a Treat (unified) */
.churro-jar { position: fixed; right: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px); z-index: 130; }
.churro-link { display: flex; align-items: center; gap: 9px; text-decoration: none; background: var(--sb-panel); border: 1px solid var(--sb-gold); border-radius: 999px; padding: 7px 12px 7px 16px; box-shadow: 0 8px 22px oklch(8% 0.03 280 / 0.5); transition: transform .18s ease, box-shadow .18s ease; }
.churro-link:hover, .churro-link:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px oklch(8% 0.03 280 / 0.6); }
.churro-bubble { font-family: var(--sb-ui); font-weight: 600; font-size: 13px; color: var(--sb-ink); white-space: nowrap; }
.churro-icon { display: inline-flex; flex: none; }
.churro-icon svg { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
.churro-icon .treat { display: inline-flex; align-items: center; justify-content: center; }
.churro-icon .treat[hidden] { display: none; }
.churro-icon .treat--emoji { width: 32px; height: 32px; font-size: 25px; line-height: 1; }
@media (max-width: 520px) { .churro-bubble { display: none; } .churro-link { padding: 9px; } }
@media (prefers-reduced-motion: reduce) { .churro-link { transition: none; } }

/* ============================================================================
   "Keep reading" related rail — an editorial index of a page's topic cluster at
   the foot of an article or guide. Hairline-ruled rows, a dek per item, a gold
   arrow that slides on hover; the hub guide leads in gold. No cards, no side
   stripe. Lives here (not site.css) because it must render identically on both
   the _Layout (site.css) and _LayoutV1 (v1.css) skins — chrome.css is shared,
   self-contained (--sb-* tokens), and loaded last, so it owns the look.
   ========================================================================== */
.kr-rail { max-width: 65ch; margin: 52px auto; }
.kr-rail-head {
  font-family: var(--sb-display);
  font-size: clamp(19px, 2.1vw, 22px);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--sb-ink);
  margin: 0 0 4px;
}
.kr-rail-head::before {
  content: "✦";
  color: var(--sb-gold);
  font-size: 0.66em;
  margin-right: 0.55em;
  vertical-align: 0.14em;
}
.kr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sb-line); }
.kr-item { border-bottom: 1px solid oklch(50% 0.04 280 / 0.32); }
.kr-link {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 8px 14px;
  text-decoration: none;
  color: var(--sb-ink);
  border-radius: 7px;
  transition: background-color 160ms ease;
}
.kr-link:hover { background: oklch(100% 0 0 / 0.035); }
/* Inside `.guide` articles the generic `.guide a { border-bottom }` rule (site.css) leaks a gold
   underline onto these row links; with the link's 7px radius it renders as stray rounded boxes.
   The rail is hairline-ruled by design, so cancel that underline (0,0,2,0 outranks `.guide a`). */
.kr-rail .kr-link { border-bottom: 0; }
.kr-text { flex: 1; min-width: 0; }
.kr-title {
  display: block;
  font-family: var(--sb-ui);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.32;
  color: var(--sb-ink);
  text-wrap: pretty;
}
.kr-item.is-pillar .kr-title { color: var(--sb-gold); }
.kr-dek {
  display: block;
  margin-top: 3px;
  font-family: var(--sb-ui);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--sb-ink-3);
  text-wrap: pretty;
}
.kr-arrow {
  flex: none;
  color: var(--sb-gold);
  font-size: 18px;
  line-height: 1;
  opacity: 0.5;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
}
.kr-link:hover .kr-arrow,
.kr-link:focus-visible .kr-arrow { transform: translateX(4px); opacity: 1; }
.kr-link:hover .kr-title { text-decoration: underline; text-decoration-color: var(--sb-gold); text-underline-offset: 3px; }
.kr-link:focus-visible { outline: 2px solid var(--sb-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .kr-arrow, .kr-link { transition: none; } }