/* Shared tokens for public, account, and Studio surfaces. No arbitrary palettes. */
:root[data-theme] {
  color-scheme: light;
  --font-ui: 'Work Sans', sans-serif;
  --font-editorial: 'Source Serif 4', serif;
  --control-active-bg: var(--text); --control-active-text: var(--page-bg);
  --explore-active-bg: var(--explore-text); --explore-active-text: var(--explore-surface);
  --control-height: 44px; --control-radius: 6px; --panel-radius: 10px;
  --page-bg: #f2efe8; --surface: #eeebe3; --surface-muted: #e3dfd5;
  --text: #171714; --text-muted: #656157; --border: #b5afa1; --accent: #b63321;
  --reader-bg: #11110f; --reader-text: #eeebe3; --reader-muted: #b9b5ab; --reader-accent: #ff927c;
  --header-surface: linear-gradient(100deg, #e6bebb, #a4d6b5);
  --explore-surface: #f5eb88; --explore-text: #171714; --explore-muted: #655b13; --explore-border: #aa9c2a;
  --edition-highlight: #3520b5; --edition-highlight-text: #f6e42b;
  --fits-surface: #39741f; --fits-border: #ec1809; --fits-text: #fff7a3;
  --flavors-surface: #3520b5; --flavors-border: #ec1809; --flavors-text: #fff7a3;
  --functions-surface: #bd160a; --functions-border: #3520b5; --functions-text: #fff7a3;
  --glass-surface: #f2efe8eb; --glass-border: #ffffffbf; --glass-shadow: #17171425;
  --ink: var(--text); --paper: var(--page-bg); --signal: var(--accent);
  --bone: var(--reader-text); --night: var(--reader-bg); --muted: var(--text-muted); --rule: var(--border);
}
body { font-family: var(--font-ui); }
/* Reveal parsed logos after the shared controller assigns the active artwork. */
html[data-theme] [data-sbs-brand-logo]:not([data-sbs-logo-theme]),
html[data-theme] [data-sbs-menu-logo]:not([data-sbs-logo-theme]) { visibility: hidden; }
/* Replace this one edition block, and the MONTHLY label, when art-directing a new month. */
:root[data-theme="monthly"][data-edition="october"] {
  --page-bg: #eee8dc; --surface: #e6dfd2; --surface-muted: #d7cec0;
  --text: #28231f; --text-muted: #645a50; --border: #aaa08f; --accent: #732f3c;
  --reader-bg: #211c19; --reader-text: #eee8dc; --reader-muted: #c9bdac; --reader-accent: #ddb1ae;
  --header-surface: #d8cfc0; --explore-surface: #ded8ca; --explore-text: #28231f; --explore-muted: #5e5348; --explore-border: #a39887;
  --edition-highlight: #732f3c; --edition-highlight-text: #f5edde;
  --fits-surface: #414a36; --fits-border: #323b2a; --fits-text: #f5edde;
  --flavors-surface: #3c3028; --flavors-border: #2b241f; --flavors-text: #f5edde;
  --functions-surface: #732f3c; --functions-border: #52242e; --functions-text: #f5edde;
  --glass-surface: #eee8dceb; --glass-border: #fff9edb3; --glass-shadow: #241c1930;
}
:root[data-theme="black"] {
  color-scheme: dark;
  --page-bg: #141412; --surface: #20201c; --surface-muted: #2e2d28;
  --text: #f0ece3; --text-muted: #bcb6a9; --border: #656157; --accent: #ded2b8;
  --reader-bg: #0b0b0a; --reader-text: #f0ece3; --reader-muted: #bcb6a9; --reader-accent: #ded2b8;
  --header-surface: #1c1c18; --explore-surface: #25251f; --explore-text: #f0ece3; --explore-muted: #bcb6a9; --explore-border: #656157;
  --edition-highlight: #ded2b8; --edition-highlight-text: #141412;
  --fits-surface: #30382e; --fits-border: #8d9b86; --fits-text: #f0ece3;
  --flavors-surface: #343039; --flavors-border: #9d91ad; --flavors-text: #f0ece3;
  --functions-surface: #3d2e2f; --functions-border: #b4918f; --functions-text: #f0ece3;
  --glass-surface: #20201ceb; --glass-border: #b8b1a052; --glass-shadow: #00000066;
}
:root[data-theme="cream"] {
  --page-bg: #f6f0e3; --surface: #f0e7d7; --surface-muted: #e5dac7;
  --text: #302a21; --text-muted: #6b5e4d; --border: #b4a58e; --accent: #73553c;
  --reader-bg: #29251e; --reader-text: #f6f0e3; --reader-muted: #c9bcaa; --reader-accent: #d9be96;
  --header-surface: #e9ddc7; --explore-surface: #eee3cc; --explore-text: #302a21; --explore-muted: #6b5e4d; --explore-border: #b4a58e;
  --edition-highlight: #6c543f; --edition-highlight-text: #f6f0e3;
  --fits-surface: #526048; --fits-border: #404d37; --fits-text: #f6f0e3;
  --flavors-surface: #655443; --flavors-border: #4f4133; --flavors-text: #f6f0e3;
  --functions-surface: #765147; --functions-border: #5a3c35; --functions-text: #f6f0e3;
  --glass-surface: #f6f0e3eb; --glass-border: #fffaf0cc; --glass-shadow: #302a212b;
}
.sbs-header, .studio-shell > header, body > header { background: var(--header-surface); }
/* Display the artwork within the square exports in a stable header-sized slot. */
.sbs-brand-frame { display: block; position: relative; width: clamp(140px, 22vw, 290px); height: 44px; overflow: hidden; }
.sbs-brand-frame [data-sbs-brand-logo] { position: absolute; left: 0; top: 50%; width: min(100%, calc(44px * var(--sbs-brand-fit, 8.3))); max-width: none; height: auto; transform: translateY(var(--sbs-brand-offset, -49.93%)); mix-blend-mode: var(--sbs-brand-blend, normal); }
@media (max-width: 639px) { .sbs-brand-frame { width: clamp(140px, 45vw, 210px); } }
.sbs-theme-picker { border: 0; margin: 0; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; color: var(--text); }
.sbs-theme-picker legend { padding-top: 16px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sbs-theme-picker button { min-height: 44px; padding: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; font-size: 11px; font-weight: 800; }
.sbs-theme-picker button[aria-pressed="true"] { background: var(--text); color: var(--page-bg); border-color: var(--text); }
.sbs-theme-picker small { display: block; font-size: 10px; font-weight: 500; margin-top: 3px; }
.sbs-theme-picker button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sbs-editions-disclosure { border-top: 1px solid var(--border); background: var(--surface); color: var(--text); }
.sbs-editions-summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 14px 18px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; list-style: none; user-select: none; transition: background-color .15s ease; }
.sbs-editions-summary::-webkit-details-marker { display: none; }
.sbs-editions-summary:hover, .sbs-editions-summary:focus-visible { background: var(--surface-muted); }
.sbs-editions-chevron { font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .05em; opacity: .75; }
.sbs-editions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 16px; background: var(--page-bg); border-top: 1px solid var(--border); }
.sbs-editions-grid button { min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; font-size: 11px; font-weight: 800; border-radius: 6px; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.sbs-editions-grid button:hover { background: var(--surface-muted); }
.sbs-editions-grid button[aria-pressed="true"] { background: var(--text); color: var(--page-bg); border-color: var(--text); }
.sbs-editions-grid small { display: block; font-size: 9px; font-weight: 600; letter-spacing: .06em; opacity: .85; margin-top: 2px; }

#explore { background: var(--explore-surface); color: var(--explore-text); }
.explore-content [class*="border-[#bcae16]"] { border-color: var(--explore-border); }
#search-input { color: var(--explore-text); background: transparent; border-color: var(--explore-border); }
#search-input::placeholder, .explore-count { color: var(--explore-muted); }
.explore-view-modes > div { background: var(--surface); border-color: var(--explore-text); }
.explore-view-modes button { color: var(--explore-text); }
.explore-view-modes button:not(:last-child) { border-right: 1.5px solid var(--explore-text); }
.explore-view-modes button.is-active { background: var(--explore-text); color: var(--explore-surface); }
.category-chip[data-category="FITS"] { color: var(--fits-surface); background: transparent; }
.category-chip[data-category="FLAVORS"] { color: var(--flavors-surface); background: transparent; }
.category-chip[data-category="FUNCTIONS"] { color: var(--functions-surface); background: transparent; }
[data-theme="black"] .category-chip[data-category="FITS"] { color: var(--fits-border); }
[data-theme="black"] .category-chip[data-category="FLAVORS"] { color: var(--flavors-border); }
[data-theme="black"] .category-chip[data-category="FUNCTIONS"] { color: var(--functions-border); }
.category-chip[data-category="FITS"].is-active { background: var(--fits-surface); color: var(--fits-text); }
.category-chip[data-category="FLAVORS"].is-active { background: var(--flavors-surface); color: var(--flavors-text); }
.category-chip[data-category="FUNCTIONS"].is-active { background: var(--functions-surface); color: var(--functions-text); }
.explore-horizon-row .horizon-button { color: var(--explore-text); background: rgba(255, 255, 255, 0.18); border-color: var(--explore-text); }
.explore-horizon-row .horizon-button.is-active { color: var(--edition-highlight-text); background: var(--edition-highlight); border-color: var(--edition-highlight); }
.explore-panel .filter-chip, .explore-panel .filter-option { color: var(--explore-text); background: transparent; border-color: var(--explore-border); }
.explore-panel .filter-chip.is-active, .explore-panel .filter-option.is-selected { background: var(--explore-text); color: var(--explore-surface); border-color: var(--explore-text); }
#profile-top-cities .find-pill-btn, .city-edit-chip, .city-edit-chip:nth-child(even) { color: var(--edition-highlight-text); background: var(--edition-highlight); border-color: var(--edition-highlight); }
.studio-control:focus { background: var(--surface-muted); color: var(--text); }
.studio-button.primary, .filter-button.is-active { color: var(--page-bg); }
.studio-button.signal { color: var(--page-bg); }
.directory-head { background: var(--surface-muted); }
.directory-row:hover { background: var(--surface-muted); }
.detail-overlay { --accent: var(--reader-accent); --signal: var(--reader-accent); }
.grid-hover-overlay { --signal: var(--reader-accent); }
.external-media-card:hover .play-overlay { color: var(--reader-bg); }
#calendar-modal .record-filter-pill { color: var(--text); border-color: var(--border); background: var(--surface-muted); }
#calendar-modal .record-filter-pill:hover { color: var(--page-bg); background: var(--text); }

/* Public discovery controls share the same selected/open/disabled language. */
#explore :is(.city-segment-btn, .category-chip, .sound-filter-chip, .horizon-button, .filter-chip, .filter-option, .mode-toggle)[aria-pressed="true"],
#explore .horizon-button[aria-current="location"],
:root #explore .city-segment-btn.city-all.is-active,
#hero-date-btn[aria-pressed="true"],
#explore :is(#explore-expand-control, .explore-title-control, #refine-toggle)[aria-expanded="true"] {
  background: var(--explore-active-bg); color: var(--explore-active-text); border-color: var(--explore-active-bg);
  box-shadow: inset 0 -3px 0 currentColor;
}
#calendar-modal .record-filter-pill[aria-pressed="true"],
.sbs-header-controls :is(#hero-date-btn, #feed-explore-btn)[aria-expanded="true"] {
  background: var(--control-active-bg); color: var(--control-active-text); border-color: var(--control-active-bg);
  box-shadow: inset 0 -3px 0 currentColor;
}
:is(#explore, #calendar-modal, .sbs-theme-picker, .sbs-editions-grid, .sbs-header-controls, .sbs-empty-state, .timeline-boundary) button:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}
:is(#explore, #calendar-modal, .sbs-theme-picker, .sbs-editions-grid, .sbs-header-controls) button:disabled[disabled] {
  opacity: .45; cursor: not-allowed; box-shadow: none; text-decoration: none;
  background: var(--surface-muted); color: var(--text-muted); border-color: var(--border);
}
@media (hover: hover) {
  :is(#explore, #calendar-modal, .sbs-theme-picker, .sbs-editions-grid, .sbs-empty-state, .timeline-boundary) button:hover:not(:disabled) { outline: 1px solid currentColor; outline-offset: -3px; }
}
.timeline-boundary { color: var(--text-muted); }
.timeline-boundary .sbs-empty-btn { margin: 3px 0; letter-spacing: 0; text-transform: lowercase; }
.timeline-context { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px; padding: 6px 14px 10px; font-size: 11px; }
.timeline-context[hidden], .timeline-retry[hidden], .sbs-empty-state[hidden] { display: none; }
.timeline-context p { overflow-wrap: anywhere; }
.timeline-context button { min-height: 44px; flex-shrink: 0; text-decoration: underline; text-underline-offset: 3px; }
#calendar-modal button { min-height: 44px; min-width: 44px; }
#calendar-modal > div { max-height: calc(100dvh - 32px); overflow-y: auto; }
.sbs-empty-state .sbs-empty-btn { text-transform: lowercase; letter-spacing: .02em; }