/* Bella Musica 0.8 — semantic, editorial design system */
:root {
  color-scheme: light;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-section: 96px;
  --radius-hairline: 2px; --radius-control: 4px; --radius-button: 6px; --radius-compact: 8px; --radius-media: 16px;
  --canvas: #f3efe8; --canvas-subtle: #f8f5f0; --surface: #fffefc; --surface-soft: #eae3d9; --surface-strong: #ddd4c8; --surface-inverse: #252523;
  --text: #343432; --text-strong: #232321; --text-muted: #706c66; --border: #d8d0c6; --border-strong: #b8aea2;
  --accent: #ee3a49; --accent-hover: #d92d3d; --accent-active: #c82434; --accent-soft: #fbe4e6; --accent-faint: #fdf2f3; --focus-ring: #ee3a49;
  --success: #3f7759; --warning: #9b6a24; --error: #a7353e; --info: #5f6f78;
  --motion-fast: 160ms; --motion-ui: 260ms; --motion-panel: 420ms; --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --map-water: #f4f0e9; --map-land: #ebe6de; --map-featured-land: #dfd7cd; --map-border: #c5bcb1; --map-label: #68635d; --map-route: #dd4551;
}

.premium-legal-footer{display:grid;grid-template-columns:minmax(12rem,.8fr) minmax(20rem,1.2fr);gap:clamp(2rem,8vw,8rem);align-items:start;padding:clamp(2rem,5vw,4.5rem) clamp(1.25rem,5vw,5rem);border-top:1px solid var(--line,rgba(30,36,32,.16));background:var(--surface,#f3efe7);font-size:.8rem;letter-spacing:.02em}.premium-legal-footer a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.25em}.premium-legal-identity{display:grid;gap:.25rem;text-decoration:none}.premium-legal-identity strong{font-size:clamp(1.15rem,2vw,1.65rem);letter-spacing:-.02em;text-transform:uppercase}.premium-legal-identity span{max-width:23rem;opacity:.62}.premium-legal-footer>div{display:grid;gap:1.25rem}.premium-legal-footer>div>strong{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55}.premium-legal-footer nav{display:flex;flex-wrap:wrap;gap:.75rem 1.35rem}.premium-legal-footer nav a{opacity:.78}.premium-legal-footer nav a:hover,.premium-legal-footer nav a:focus-visible{opacity:1}.premium-rail-legal{display:flex!important;flex-wrap:wrap;gap:.45rem 1rem!important;padding-top:1rem;border-top:1px solid currentColor;opacity:.72}.premium-rail-legal a{font-size:.72rem!important;text-decoration:underline;text-underline-offset:.22em}.premium-admin-shell .premium-legal-footer{margin-left:var(--admin-sidebar-width,16rem)}@media(max-width:800px){.premium-admin-shell .premium-legal-footer{margin-left:0}.premium-legal-footer{grid-template-columns:1fr;gap:2rem}}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #181715; --canvas-subtle: #1d1b19; --surface: #24211e; --surface-soft: #2c2824; --surface-strong: #37312c; --surface-inverse: #f3eee6;
  --text: #e9e3da; --text-strong: #f7f1e8; --text-muted: #b7afa5; --border: #3e3934; --border-strong: #5a5149;
  --accent: #ff4d5c; --accent-hover: #ff6673; --accent-active: #e94251; --accent-soft: #4a2429; --accent-faint: #2d1e20; --focus-ring: #ff6673;
  --success: #6fa383; --warning: #c4924d; --error: #d96b73; --info: #8fa1aa;
  --map-water: #1f1d1a; --map-land: #26231f; --map-featured-land: #302b26; --map-border: #49423b; --map-label: #bdb4a9; --map-route: #ee5a66;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { max-width: 100%; overflow-x: clip; background: var(--canvas); }
body { max-width: 100%; min-width: 320px; margin: 0; overflow-x: clip; background: var(--canvas); color: var(--text); font: 400 16px/1.55 var(--font); text-rendering: optimizeLegibility; }
body::selection { background: var(--accent-soft); color: var(--text-strong); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [role="option"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--text-strong); font-weight: 560; letter-spacing: -.035em; line-height: 1.08; overflow-wrap: normal; word-break: normal; }
h1 { font-size: clamp(2.4rem, 5.8vw, 5.3rem); } h2 { font-size: clamp(1.75rem, 3.5vw, 3.55rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
small, .muted { color: var(--text-muted); }
.ambient-map { display: none; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; border: 2px solid var(--focus-ring); border-radius: var(--radius-control); background: var(--surface); color: var(--text-strong); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.topbar { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--border); background: var(--canvas); }
.topbar-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav actions"; gap: 0 var(--space-5); align-items: center; width: min(1240px, calc(100% - 48px)); min-height: 74px; margin: auto; }
.public-page .topbar-inner { width: min(1280px, calc(100% - 48px)); }
.brand { grid-area: brand; display: flex; min-width: 0; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand-logo { width: 78px; height: 58px; object-fit: contain; }
.brand-copy { display: grid; gap: 1px; line-height: 1.15; } .brand-copy strong { font-size: 14px; } .brand-copy small { color: var(--accent); font-size: 12px; font-weight: 700; }
.app-header-panel { display: contents; }
.header-menu-trigger { display: none; }
.main-nav { grid-area: nav; display: flex; justify-content: center; align-items: center; gap: clamp(10px, 1.8vw, 28px); min-width: 0; }
.nav-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--text); font-size: 14px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.nav-link:hover { color: var(--accent); } .icon { width: 19px; height: 19px; flex: 0 0 auto; }
.topbar-actions { grid-area: actions; display: flex; min-width: 0; justify-content: flex-end; align-items: center; gap: var(--space-3); }
.header-utilities { display: flex; min-width: 0; justify-content: flex-end; align-items: center; gap: var(--space-3); }
.admin-page .topbar-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "nav nav"; gap: 0 var(--space-4); padding-top: var(--space-2); }
.admin-page .main-nav { justify-content: flex-start; width: 100%; min-height: 52px; border-top: 1px solid var(--border); }
.language-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-hairline); overflow: hidden; }
.language-switch a { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 8px; color: var(--text-muted); font-size: 11px; font-weight: 750; text-decoration: none; }
.language-switch a + a { border-left: 1px solid var(--border); } .language-switch a.active { color: var(--surface); background: var(--surface-inverse); text-decoration: underline; text-underline-offset: 4px; }
.theme-control { position: relative; } .theme-trigger, .theme-menu button { min-height: 44px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.theme-trigger { display: inline-flex; width: 44px; min-width: 44px; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius-control); font-size: 12px; font-weight: 650; cursor: pointer; }
.theme-trigger-icon { font-size: 18px; line-height: 1; transition: transform var(--motion-ui) var(--motion-ease); }
.theme-trigger:hover .theme-trigger-icon { transform: rotate(18deg) scale(1.06); }
.theme-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; display: grid; width: 152px; padding: 5px; border: 1px solid var(--border-strong); border-radius: var(--radius-button); background: var(--surface); opacity: 0; pointer-events: none; transform: translateY(-8px) scale(.98); transform-origin: top right; visibility: hidden; transition: opacity var(--motion-ui) ease, transform var(--motion-ui) var(--motion-ease), visibility 0s linear var(--motion-ui); }
.theme-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); visibility: visible; transition-delay: 0s; }
.theme-trigger[aria-expanded="true"] .theme-trigger-icon { transform: rotate(45deg) scale(1.08); }
.theme-menu button { border: 0; border-radius: var(--radius-control); text-align: left; padding: 9px 10px; cursor: pointer; } .theme-menu button:hover, .theme-menu button[aria-checked="true"] { background: var(--accent-soft); color: var(--text-strong); }
.tour-selector { display: block; width: 96px; min-width: 0; }
.tour-selector label { display: block; width: 100%; min-width: 0; }
.tour-selector label > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tour-selector select, .tour-selector .bm-select-trigger { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-selector .bm-select-trigger { font-variant-numeric: tabular-nums; font-weight: 700; }
.tour-selector .bm-select-list { right: auto; left: 0; width: min(300px, calc(100vw - 36px)); }
.tour-selector-submit, .link-button, .text-action, .text-link-arrow { border: 0; background: transparent; color: var(--text); font-weight: 650; cursor: pointer; }
.tour-selector-submit, .text-link-arrow, .text-action { border-bottom: 1px solid currentColor; padding: 5px 0; text-decoration: none; }
.text-action { display: inline-flex; min-height: 44px; align-items: center; }
.rx2-map-toolbar button { position: relative; }
.rx2-map-toolbar button::after { position: absolute; inset: -1px; content: ""; }
.public-admin-link, .link-button { display: inline-flex; min-height: 44px; align-items: center; padding-inline: 8px; }
.public-admin-link { font-size: 13px; color: var(--text-muted); } .session-box { display: flex; min-width: 0; align-items: center; gap: var(--space-2); } .session-box span { display: grid; min-width: 0; line-height: 1.2; font-size: 12px; } .session-box small { font-size: 11px; }
.shell { width: min(1240px, calc(100% - 48px)); min-width: 0; margin: auto; padding: 56px 0 var(--space-section); }
.page-shell > *, .landing-hero > *, .topbar-inner > *, .app-header-panel > *, .header-utilities > *, .site-footer > * { min-width: 0; }
.public-page .shell { width: min(1280px, calc(100% - 48px)); } .page-heading { max-width: 900px; margin-bottom: var(--space-7); } .page-heading > p:last-child { max-width: 760px; color: var(--text-muted); font-size: 18px; }
.eyebrow { margin-bottom: var(--space-3); color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.lead { max-width: 720px; color: var(--text-muted); font-size: clamp(1.08rem, 1.7vw, 1.35rem); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-button); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transform: translateY(0) scale(1); transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-ui) ease, border-color var(--motion-ui) ease, color var(--motion-ui) ease, opacity var(--motion-ui) ease; }
.btn:not(:disabled):hover { transform: translateY(-2px); }
.btn:not(:disabled):active { transform: translateY(1px) scale(.96); transition-duration: 90ms; }
.btn-primary { background: var(--surface-inverse); color: var(--surface); } .btn-primary:hover { background: var(--accent); color: #fff; }
.btn-secondary { border-color: var(--border-strong); background: transparent; color: var(--text-strong); } .btn-secondary:hover { border-color: var(--text-strong); background: var(--surface-soft); }
.btn-small { min-height: 44px; padding: 7px 11px; font-size: 12px; } .btn:disabled, button:disabled { opacity: .5; cursor: not-allowed; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--text); }
.btn-destructive { background: var(--error); color: #fff; }
.btn-icon { width: 44px; min-width: 44px; padding: 0; }
.btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text-strong); }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; animation: control-spin 700ms linear infinite; }
.tour-selector-submit, .link-button, .text-action, .theme-trigger, .theme-menu button, .language-switch a, .public-admin-link, .bm-select-trigger, .bm-select-list [role="option"], .rating-choice span, .file-button span { transform: translateY(0) scale(1); transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-ui) ease, border-color var(--motion-ui) ease, color var(--motion-ui) ease, opacity var(--motion-ui) ease; }
.tour-selector-submit:hover, .link-button:hover, .text-action:hover, .theme-trigger:hover, .theme-menu button:hover, .language-switch a:hover, .public-admin-link:hover, .bm-select-trigger:hover, .bm-select-list [role="option"]:hover, .rating-choice span:hover, .file-button span:hover { color: var(--accent); }
.tour-selector-submit:active, .link-button:active, .text-action:active, .theme-trigger:active, .theme-menu button:active, .language-switch a:active, .public-admin-link:active, .bm-select-trigger:active, .bm-select-list [role="option"]:active, .rating-choice span:active, .file-button span:active { transform: translateY(1px) scale(.96); }
.page-shell > :first-child:not(.feedback-region), .page-shell > .feedback-region + *, .page-shell > .page-heading, .page-shell > .page-intro { animation: content-arrive var(--motion-panel) var(--motion-ease) both; }
.panel, .notice-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--border); border-radius: 0; background: var(--surface); }
.admin-page .panel { padding-inline: 0; border-inline: 0; background: transparent; }
.auth-card, .piece-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-compact); background: var(--surface); }
.panel-heading, .section-heading { display: flex; justify-content: space-between; gap: var(--space-5); align-items: flex-start; margin-bottom: var(--space-5); } .panel-heading > div, .section-heading > div { min-width: 0; }
.panel-heading h2, .section-heading h2 { margin-bottom: var(--space-2); font-size: clamp(1.5rem, 2.8vw, 2.5rem); }
.landing-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); align-items: center; gap: clamp(32px, 6vw, 86px); min-height: 620px; padding: 36px 0 var(--space-8); }
.landing-copy h1 { max-width: 850px; margin-bottom: var(--space-5); } .mozarteum-mark { width: 142px; height: 34px; object-fit: contain; object-position: left; margin-bottom: var(--space-5); }
.landing-visual { display: grid; min-width: 0; min-height: 460px; place-items: center; position: relative; } .portrait-orbit { position: relative; width: min(420px, calc(100% - 110px)); aspect-ratio: 1; padding: 18px; border-radius: 50%; background: var(--surface-soft); }
.portrait-mask { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; } .portrait-mask img { width: 100%; height: 100%; object-fit: cover; transition: object-position var(--motion-ui) var(--motion-ease), transform var(--motion-ui) var(--motion-ease); } .orbit-ring { position: absolute; inset: 50%; translate: -50% -50%; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; pointer-events: none; } .orbit-ring.one { width: calc(100% + 50px); height: calc(100% + 50px); } .orbit-ring.two { width: calc(100% + 110px); height: calc(100% + 110px); border-style: dashed; }
.tour-date { position: absolute; right: 0; bottom: 8px; display: grid; max-width: 230px; color: var(--accent); font-size: 29px; font-weight: 650; letter-spacing: -.05em; line-height: 1.05; } .tour-date small { margin-top: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.story-band { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr); gap: clamp(36px, 8vw, 100px); margin-bottom: var(--space-section); padding: var(--space-8) 0; border-block: 1px solid var(--border); } .story-band > p { max-width: 760px; font-size: 19px; line-height: 1.6; }
.current-tour-band, .timeline-section, .public-route-section { margin-bottom: var(--space-section); } .timeline-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.timeline-preview-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--space-3); min-width: 0; min-height: 156px; padding: var(--space-5); border-block: 1px solid var(--border); background: transparent; text-decoration: none; } .timeline-preview-item:hover { border-color: var(--accent); } .timeline-preview-item time { color: var(--accent); font-weight: 750; font-size: 13px; } .timeline-preview-item span { min-width: 0; } .timeline-preview-item small { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .timeline-preview-item strong { display: block; overflow-wrap: normal; word-break: normal; } .timeline-preview-item em { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12px; font-style: normal; }
.archive-panel { margin-bottom: var(--space-section); background: var(--surface-soft); } .tour-archive-list, .public-archive-grid { display: grid; gap: var(--space-3); } .tour-archive-list { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tour-archive-item, .public-archive-card { display: grid; gap: var(--space-4); border-block: 1px solid var(--border); background: transparent; text-decoration: none; } .tour-archive-item { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: var(--space-4); } .tour-archive-item:hover, .public-archive-card:hover { border-color: var(--accent); } .tour-archive-item.is-current, .public-archive-card.is-featured { background: var(--accent-faint); } .tour-archive-year, .public-archive-year { color: var(--accent); font-weight: 600; letter-spacing: -.06em; } .tour-archive-year { font-size: 30px; } .archive-hero { max-width: 900px; padding-bottom: var(--space-7); } .public-archive-card { grid-template-columns: 150px minmax(0, 1fr); padding: var(--space-6); } .public-archive-year { font-size: clamp(3.4rem, 6vw, 5.2rem); }
.tour-public-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: end; padding-bottom: var(--space-7); border-bottom: 1px solid var(--border); } .tour-public-date { display: grid; justify-items: end; color: var(--accent); } .tour-public-date strong { font-size: clamp(4rem, 8vw, 6.5rem); line-height: .85; } .tour-public-date span { color: var(--text-muted); }
.public-station-section, .public-cluster-panel, .cluster-panel { margin-top: calc(var(--space-6) * -1); margin-bottom: var(--space-7); background: var(--surface-soft); } .public-station-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: var(--space-5); } .station-event-list, .cluster-station-list, .concert-list, .portal-concert-list { display: grid; border-top: 1px solid var(--border-strong); }
.station-event-list article, .cluster-station-item, .concert-row, .portal-concert-card { min-width: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--border); } .cluster-station-item, .portal-concert-card { display: grid; gap: 3px; color: var(--text); text-decoration: none; } .cluster-station-item:hover, .portal-concert-card:hover { color: var(--accent); }
.portal-route-section { margin-bottom: var(--space-section); }
.route-explorer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "rail"; min-width: 0; border-block: 1px solid var(--border-strong); background: var(--canvas-subtle); }
.route-explorer-main { grid-area: map; min-width: 0; }
.route-map-frame { position: relative; overflow: hidden; height: 100%; background: var(--map-water); }
.route-map { display: block; width: 100%; height: 460px; min-height: 0; color: var(--text); cursor: grab; touch-action: none; user-select: none; }
.route-map:active { cursor: grabbing; }
.route-map-toolbar { position: absolute; z-index: 4; top: var(--space-3); left: var(--space-3); display: flex; border: 1px solid var(--border-strong); background: var(--surface); }
.route-map-toolbar button { display: grid; min-width: 44px; min-height: 44px; place-items: center; padding: 0 12px; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.route-map-toolbar button:nth-last-child(-n+2) { font-size: 12px; }
.route-map-toolbar button:last-child { border-right: 0; }
.route-map-toolbar button:hover { background: var(--surface-soft); }
.map-sea { fill: var(--map-water); }
.map-country { fill: var(--map-land); stroke: var(--map-border); stroke-width: .055; }
.map-country--featured, .map-country--microstate { fill: var(--map-featured-land); }
.map-geography-labels text { fill: var(--map-label); font-family: Georgia, serif; font-size: .82px; letter-spacing: .08em; opacity: .55; }
.map-geography-labels .map-country-label { font-size: .95px; opacity: .7; }
.map-route-base {
  fill: none;
  stroke: color-mix(in srgb, var(--map-border) 78%, var(--map-label));
  stroke-width: 1.1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .5;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.map-route-context {
  fill: none;
  stroke: color-mix(in srgb, var(--map-border) 78%, var(--map-label));
  stroke-width: 1.1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.map-route-active {
  fill: none;
  stroke: var(--map-route);
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.map-route-context[hidden] { display: none; }
.map-route-active[hidden] { display: none; }
.map-route-visit {
  fill: var(--map-water);
  stroke: color-mix(in srgb, var(--map-label) 72%, var(--map-border));
  stroke-width: 1px;
  opacity: .54;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.map-route-visit.is-context { opacity: .92; }
.map-route-visit.is-current { fill: var(--accent); stroke: var(--accent); opacity: 1; }
.map-hit { fill: transparent; stroke: transparent; pointer-events: all; }
.map-marker circle { fill: var(--map-water); stroke: var(--map-label); stroke-width: 1.8px; vector-effect: non-scaling-stroke; }
.map-marker { transform-box: fill-box; transform-origin: center; transition: transform 100ms cubic-bezier(.22, 1, .36, 1); }
.map-marker text { fill: var(--map-label); font-family: var(--font); font-size: calc(.52px * var(--map-scale, 1)); font-weight: 650; pointer-events: none; }
.map-marker .map-marker-more { fill: var(--text-muted); font-size: calc(.43px * var(--map-scale, 1)); font-weight: 560; paint-order: stroke; stroke: var(--map-water); stroke-width: .18px; }
.map-event-node.active .map-marker circle { fill: var(--accent); stroke: var(--accent); }
.map-event-node.active .map-marker text { fill: #fff; }
.map-city-node.is-hovered .map-marker,
.map-event-node.is-hovered .map-marker { transform: scale(1.04); }
.map-city-node.is-pressed .map-marker,
.map-event-node.is-pressed .map-marker { transform: scale(.94); }
.map-city-node.is-hovered .map-marker circle,
.map-event-node.is-hovered .map-marker circle { stroke: var(--map-label); stroke-width: 2px; }
.map-city-node.is-pressed .map-marker circle,
.map-event-node.is-pressed .map-marker circle { stroke-width: 3px; }
.map-city-node.is-pending .map-marker,
.map-event-node.is-pending .map-marker { animation: map-pending 80ms ease-out; }
@keyframes map-pending { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
.map-hit-link:focus-visible { outline: none; }
.map-hit-link:focus-visible .map-hit { stroke: var(--focus-ring); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.map-focus-ring { fill: none; stroke: var(--accent); stroke-width: 2px; opacity: 0; vector-effect: non-scaling-stroke; }
.map-focus-ring.is-confirming { animation: map-confirm 240ms cubic-bezier(.22, 1, .36, 1); }
@keyframes map-confirm { 0% { opacity: .75; } 100% { opacity: 0; } }
.map-location-component { cursor: pointer; }
.map-location-component .map-label { pointer-events: none; }
.map-label-hit { fill: transparent; stroke: none; pointer-events: all; }
.map-label { fill: var(--map-label); font-family: var(--font); font-size: calc(.61px * var(--map-scale, 1)); font-weight: 560; opacity: .64; paint-order: stroke; stroke: var(--map-water); stroke-width: .3px; stroke-linejoin: round; }
.map-city-node.is-active .map-label,
.map-city-node.is-hovered .map-label,
.map-city-node:focus-visible .map-label { opacity: 1; font-weight: 700; }
.map-attribution { margin: 0; padding: 6px var(--space-3) 8px; color: var(--text-muted); font-size: 9px; }
.route-inspector { position: absolute; z-index: 6; top: 0; right: 0; bottom: 64px; display: grid; width: min(420px, 42%); grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; visibility: visible; border-left: 1px solid var(--border-strong); background: var(--surface); opacity: 1; transform: translateX(0); transition: none; }
.route-explorer[data-inspector-mode="closed"] .route-inspector { visibility: hidden; opacity: 0; transform: translateX(100%); pointer-events: none; }
.route-inspector > header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); min-height: 88px; padding: var(--space-4); border-bottom: 1px solid var(--border-strong); }
.route-inspector > header p { margin-bottom: 3px; color: var(--accent); font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.route-inspector > header h3 { margin: 0; font-size: 1.3rem; }
.route-inspector-close { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.route-inspector-close span { font-size: 24px; font-weight: 350; line-height: 1; }
.route-inspector-close:hover { background: var(--surface-soft); }
.route-inspector-body { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; }
.route-explorer[data-map-mode="event"] .route-inspector-body { grid-template-rows: minmax(112px, .72fr) minmax(226px, 1.28fr); }
.route-explorer[data-single-event="true"] .route-inspector-body { grid-template-rows: minmax(0, 1fr); }
.route-inspector-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.route-inspector-list[hidden] { display: none; }
.route-inspector-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-3); min-height: 108px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.route-inspector-row:hover, .route-inspector-row.active { background: var(--accent-faint); }
.route-inspector-row.active { border-left: 3px solid var(--accent); padding-left: calc(var(--space-4) - 3px); }
.route-stage-number { color: var(--text-muted); font-size: 1.25rem; font-weight: 560; line-height: 1.2; }
.route-inspector-row.active .route-stage-number { color: var(--accent); }
.route-stage-copy { display: grid; min-width: 0; align-content: start; }
.route-stage-copy time { color: var(--text-muted); font-size: 11px; }
.route-stage-copy small { margin-top: 3px; color: var(--accent); font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.route-stage-copy strong { margin-top: 2px; font-weight: 600; }
.route-stage-copy em { color: var(--text-muted); font-size: 12px; font-style: normal; }
.route-event-details { min-height: 0; overflow-y: auto; border-top: 1px solid var(--border-strong); }
.route-event-detail { display: grid; min-height: 100%; align-content: start; background: var(--surface); }
.route-event-detail[hidden] { display: none; }
.route-event-summary { display: grid; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.route-event-summary time { color: var(--text-muted); font-size: 10px; }
.route-event-summary small { margin-top: 3px; color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.route-event-summary h4 { margin: 3px 0 0; font-size: 1rem; line-height: 1.25; }
.route-event-summary p { margin: 2px 0 0; color: var(--text-muted); font-size: 11px; }
.route-media-status { padding: 11px 16px 4px; }
.route-media-status > h4 { margin: 0 0 6px; font-size: 10px; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.route-media-actions { display: grid; border-top: 1px solid var(--border); }
.route-media-action { display: grid; grid-template-columns: minmax(72px, .7fr) minmax(0, 1.3fr); gap: 10px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.route-media-action strong, .route-media-action span { font-size: 10px; line-height: 1.4; }
.route-media-action strong { color: var(--text-muted); font-weight: 560; }
.route-media-action span { color: var(--text); }
.route-media-action:hover span { color: var(--accent); }
.route-media-empty, .route-media-gallery-empty { margin: 0; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.route-media-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 0; color: var(--text-muted); font-size: 10px; }
.route-media-gallery[hidden] { display: none; }
.route-media-gallery-item { display: block; aspect-ratio: 1; overflow: hidden; background: var(--surface-soft); }
.route-media-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.route-media-gallery-empty { grid-column: 1 / -1; }
.route-event-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: auto; padding: 7px 16px 10px; }
.route-event-nav > * { min-width: 0; padding: 6px 0; }
.route-event-nav > :nth-child(2) { padding-left: 12px; border-left: 1px solid var(--border); text-align: right; }
.route-event-nav a { display: grid; color: var(--text); text-decoration: none; }
.route-event-nav a:hover strong { color: var(--accent); }
.route-event-nav span { color: var(--text-muted); font-size: 9px; }
.route-event-nav strong { margin-top: 2px; overflow: hidden; font-size: 10px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.route-stage-rail { position: relative; grid-area: rail; display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; min-height: 64px; padding: 7px 18px; border-top: 1px solid var(--border-strong); background: var(--surface); box-shadow: none; filter: none; }
.route-progress-context { display: grid; min-width: 0; min-height: 54px; align-content: center; line-height: 1.15; }
.route-progress-context strong, .route-progress-context span, .route-progress-context time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-progress-context strong { font-size: 12px; font-weight: 680; }
.route-progress-context span, .route-progress-context time { color: var(--text-muted); font-size: 9px; }
.route-progress-context [data-route-progress-stage] { color: var(--accent); font-weight: 750; letter-spacing: .1em; }
.route-progress-context [data-route-progress-venue] { margin-top: 2px; }
.route-progress-scroll { min-width: 0; padding-block: 6px; overflow: hidden; scrollbar-width: thin; }
.route-progress-track { position: relative; display: grid; min-width: 560px; grid-template-columns: repeat(14, minmax(34px, 1fr)); align-items: center; padding-inline: 17px; }
.route-progress-line { position: absolute; z-index: 0; top: 50%; right: 34px; left: 34px; height: 1px; overflow: hidden; background: var(--border-strong); transform: translateY(-50%); }
.route-progress-line i { display: block; width: 0; height: 100%; background: transparent; }
.route-stage-rail-item { position: relative; z-index: 1; display: grid; min-width: 44px; min-height: 44px; place-items: center; color: var(--text-muted); text-decoration: none; }
.route-progress-node { width: 11px; height: 11px; border: 1px solid var(--text-muted); border-radius: 50%; background: var(--surface); }
.route-stage-rail-item:hover .route-progress-node,
.route-stage-rail-item:focus-visible .route-progress-node { width: 15px; height: 15px; border-color: var(--map-label); }
.route-stage-rail-item.active .route-progress-node { opacity: 0; }
.route-stage-rail-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -5px; border-radius: 50%; }
.route-progress-thumb { position: absolute; z-index: 2; top: 50%; left: 0; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; transform: translate(-50%, -50%); pointer-events: none; }
.route-progress-thumb[hidden] { display: none; }
.route-explorer[data-pending-event-id]:not([data-pending-event-id=""]) .route-progress-thumb { animation: rail-pending 80ms ease-out; }
@keyframes rail-pending { 0% { transform: translate(-50%, -50%) scale(.82); } 100% { transform: translate(-50%, -50%) scale(1); } }
.route-progress-thumb b { font-size: 10px; line-height: 1; }
.route-explorer,
.route-explorer *,
.route-explorer *::before,
.route-explorer *::after { box-shadow: none !important; filter: none !important; text-shadow: none !important; }
.participant-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); align-items: end; min-height: 280px; margin-bottom: var(--space-7); padding-block: var(--space-5) var(--space-7); border-bottom: 1px solid var(--border); }
.participant-hero h1 { max-width: 820px; margin-bottom: var(--space-4); font-size: clamp(2.5rem, 5vw, 4.7rem); }
.participant-hero p { max-width: 720px; color: var(--text-muted); }
.progress-large { display: grid; grid-template-columns: minmax(160px, 420px) auto; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }
.progress-large > span { display: block; height: 8px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface-soft); }
.progress-large > span i { display: block; height: 100%; min-width: 0; background: var(--accent); }
.progress-large strong { font-size: 12px; font-weight: 560; }
.hero-seal { display: grid; min-width: 150px; padding-left: var(--space-5); border-left: 1px solid var(--border-strong); }
.hero-seal > span { display: flex; align-items: baseline; gap: 3px; color: var(--accent); }
.hero-seal b { font-size: 3.8rem; font-weight: 560; line-height: .9; }
.hero-seal i { font-size: 1.2rem; font-style: normal; }
.hero-seal small { margin-top: 8px; }
.station-teaser { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 380px; margin-bottom: var(--space-section); background: var(--surface-soft); }
.station-teaser img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.station-teaser > div { align-self: center; padding: clamp(28px, 5vw, 72px); }
.tour-photo-interlude { position: relative; margin: 0 0 var(--space-section); }
.tour-photo-interlude { overflow: hidden; border-radius: var(--radius-media); } .tour-photo-interlude img { width: 100%; height: clamp(300px, 46vw, 600px); object-fit: cover; object-position: center 44%; border-radius: var(--radius-media); transition: object-position var(--motion-ui) var(--motion-ease), transform var(--motion-ui) var(--motion-ease); }
.tour-photo-interlude figcaption { position: absolute; left: 0; bottom: 0; display: grid; max-width: min(520px, 84%); padding: var(--space-4) var(--space-5); background: var(--canvas); }
.tour-photo-interlude figcaption span { color: var(--accent); font-size: 12px; font-weight: 650; letter-spacing: .12em; }
.tour-photo-interlude figcaption strong { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 560; }
.journey-timeline { display: grid; gap: var(--space-7); } .timeline-day { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--space-6); min-width: 0; } .timeline-day > header { align-self: start; position: sticky; top: 100px; } .timeline-day > header time { color: var(--accent); font-weight: 650; } .timeline-day-items { position: relative; display: grid; gap: var(--space-4); min-width: 0; padding-left: 32px; } .timeline-day-items::before { position: absolute; left: 7px; top: 18px; bottom: 18px; width: 1px; background: var(--accent); content: ""; opacity: .5; } .timeline-entry { position: relative; min-width: 0; } .timeline-entry-marker { position: absolute; z-index: 1; left: -31px; top: 28px; width: 14px; height: 14px; border: 3px solid var(--canvas); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .timeline-entry-body { min-width: 0; padding: var(--space-5); border-block: 1px solid var(--border); background: transparent; } .timeline-entry.is-draft .timeline-entry-body { border-style: dashed; } .timeline-entry-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; } .timeline-entry h3 { max-width: 820px; overflow-wrap: normal; word-break: normal; } .timeline-location { color: var(--text-muted); font-size: 14px; font-weight: 600; } .timeline-cover { width: 100%; max-height: 480px; margin-top: var(--space-4); border-radius: var(--radius-media); object-fit: cover; } .timeline-gallery, .gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); } .gallery-item { overflow: hidden; border-radius: var(--radius-compact); background: var(--surface-soft); text-decoration: none; } .gallery-item img { width: 100%; min-height: 130px; object-fit: cover; } .gallery-item small { display: block; padding: 6px 8px; background: var(--surface); font-size: 10px; } .gallery-placeholder { display: grid; place-items: center; min-height: 150px; border: 1px dashed var(--border-strong); border-radius: var(--radius-compact); background: var(--surface-soft); color: var(--text-muted); text-align: center; } .gallery-placeholder img { width: 90px; height: 90px; margin: 12px; border-radius: 50%; object-fit: cover; }
form { min-width: 0; } label { min-width: 0; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { width: 100%; max-width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text); } textarea { min-height: 110px; resize: vertical; } input::file-selector-button { margin-right: 8px; padding: 7px 10px; border: 0; border-radius: var(--radius-control); background: var(--surface-soft); color: var(--text); } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); } input[type="range"] { accent-color: var(--accent); }
.bm-select { position: relative; width: 100%; } .bm-select-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } .bm-select-trigger { width: 100%; min-height: 44px; padding: 10px 40px 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; position: relative; } .bm-select-trigger::after { position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: translateY(-70%) rotate(45deg); transition: transform var(--motion-ui) var(--motion-ease); } .bm-select-trigger[aria-expanded="true"]::after { transform: translateY(-25%) rotate(225deg); } .bm-select-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: min(280px, 45vh); overflow: auto; padding: 5px; border: 1px solid var(--border-strong); border-radius: var(--radius-button); background: var(--surface); opacity: 0; pointer-events: none; transform: translateY(-8px) scale(.985); transform-origin: top center; visibility: hidden; transition: opacity var(--motion-ui) ease, transform var(--motion-ui) var(--motion-ease), visibility 0s linear var(--motion-ui); } .bm-select-list.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); visibility: visible; transition-delay: 0s; } .bm-select-list [role="option"] { width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); text-align: left; cursor: pointer; } .bm-select-list [role="option"]:hover, .bm-select-list [aria-selected="true"] { background: var(--accent-soft); } .bm-select-list button:disabled { opacity: .4; }
.bm-select-list.opens-upward { top: auto; bottom: calc(100% + 6px); transform: translateY(8px) scale(.985); transform-origin: bottom center; }
.bm-select-list.opens-upward.is-open { transform: translateY(0) scale(1); }
.admin-two-column, .design-settings-grid, .tour-admin-grid, .station-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .translation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .translation-fieldset { min-width: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: 0; background: var(--surface-soft); } .translation-fieldset legend { padding: 0 var(--space-2); color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .08em; } .translation-fieldset label, .moment-meta-grid label, .station-settings-grid label { display: grid; gap: 5px; margin-top: var(--space-3); color: var(--text-muted); font-size: 12px; font-weight: 650; } .moment-meta-grid, .station-settings-grid, .compact-form, .add-program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .span-2 { grid-column: span 2; }
.concert-list, .program-list, .segment-editor-list, .tour-admin-list, .moment-admin-list { display: grid; } .concert-row, .program-entry, .segment-editor-row, .tour-admin-row { min-width: 0; } .concert-row, .tour-admin-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; } .concert-row:hover, .tour-admin-row.is-current { background: var(--accent-soft); } .program-entry { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--border); } .program-position, .segment-index { color: var(--accent); font-weight: 750; } .program-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); } .segment-editor-row { display: grid; grid-template-columns: 38px repeat(2, 100px) minmax(160px, 1fr) minmax(140px, 1fr) auto auto; gap: var(--space-2); align-items: end; padding: var(--space-3) 0; border-top: 1px solid var(--border); } .segment-editor-row label { display: grid; gap: 4px; min-width: 0; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; } .segment-editor-row input, .segment-editor-row select { min-height: 38px; padding: 6px 8px; font-size: 12px; }
.split-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); }
.stat-grid, .dashboard-stats, .metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: var(--space-7); border-block: 1px solid var(--border-strong); } .stat-card { min-width: 0; padding: var(--space-4) var(--space-5); border-right: 1px solid var(--border); background: transparent; } .stat-card:first-child { padding-left: 0; } .stat-card:last-child { padding-right: 0; border-right: 0; } .stat-card.accent { color: inherit; } .stat-card.accent strong { color: var(--accent); } .stat-card strong { display: block; margin-block: 3px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 560; line-height: 1; } .stat-card span, .stat-card small { display: block; } .status { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; font-weight: 700; } .status::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; } .status-published, .status-success { color: var(--success); } .status-error { color: var(--error); } .status-warning { color: var(--warning); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); gap: var(--space-7); align-items: start; }
.timeline-list { display: grid; border-top: 1px solid var(--border-strong); }
.timeline-item { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; min-width: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.timeline-item:hover strong { color: var(--accent); }
.timeline-item time { color: var(--accent); font-size: 12px; font-weight: 650; }
.timeline-item span { min-width: 0; }
.timeline-item strong, .timeline-item small { display: block; }
.piece-list { display: grid; gap: var(--space-4); } .piece-card { padding: var(--space-5); } .piece-card.is-rated { border-color: var(--success); } .rating-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); } .rating-choice input { position: absolute; opacity: 0; } .rating-choice span { display: grid; place-items: center; min-height: 44px; padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); text-align: center; font-size: 12px; font-weight: 650; cursor: pointer; } .rating-choice input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; } .rating-extras, .piece-footer, .waveform-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); } .favorite-toggle { display: flex; align-items: center; gap: 7px; } .marker-value, .save-state { color: var(--success); font-size: 12px; }
.technical-title { display: -webkit-box; max-width: min(100%, 34ch); overflow: hidden; overflow-wrap: anywhere; word-break: break-word; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.025em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.technical-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.waveform-panel { min-width: 0; max-width: 100%; overflow: hidden; }
.waveform-scroll { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.waveform-scroll:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.waveform-panel canvas { display: block; width: max(100%, 640px); height: 330px; border: 1px solid var(--border); border-radius: 0; background: var(--surface-soft); touch-action: none; } .audio-player { width: 100%; } .upload-drop { position: relative; display: grid; gap: var(--space-3); padding: var(--space-5); border-left: 4px solid var(--accent); background: var(--surface-soft); } .upload-drop input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .upload-file-label { display: grid; gap: var(--space-2); max-width: 66ch; cursor: pointer; } .upload-file-label span { color: var(--text-muted); } .upload-status { min-height: 1.5em; margin: 0; }
.segment-editor-list { min-width: 0; max-width: 100%; }
.segment-editor-row { grid-template-columns: 38px repeat(2, minmax(84px, 100px)) minmax(140px, 1fr) minmax(120px, 1fr) auto auto; max-width: 100%; }
.program-actions button,
.drag-handle,
.danger-link { min-width: 44px; min-height: 44px; }
.checkbox-line, .permission-check { display: flex; min-height: 44px; align-items: center; gap: var(--space-2); cursor: pointer; }
.action-bar, .form-actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.feedback-region { min-width: 0; animation: feedback-arrive var(--motion-panel) var(--motion-ease) both; }
.upload-drop { transition: border-color var(--motion-ui) ease, background-color var(--motion-ui) ease; }
.upload-drop:focus-within { border-color: var(--focus-ring); background: var(--accent-faint); }
.upload-file-label, .upload-icon { transition: transform var(--motion-ui) var(--motion-ease), color var(--motion-ui) ease, opacity var(--motion-ui) ease; }
.upload-drop:focus-within .upload-icon, .upload-drop:hover .upload-icon { transform: translateY(-2px); }
.upload-progress > span { transition: width var(--motion-panel) var(--motion-ease); }
@keyframes feedback-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes content-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes control-spin { to { transform: rotate(1turn); } }
.auth-wrap { display: grid; min-height: 58vh; place-items: center; } .auth-card { width: min(100%, 480px); } .flash { margin-bottom: var(--space-4); padding: 12px 14px; border-left: 4px solid var(--accent); background: var(--accent-soft); } .flash.success { border-color: var(--success); } .flash.error { border-color: var(--error); } .modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: rgb(0 0 0 / .45); } .privacy-modal { width: min(100%, 520px); padding: var(--space-6); border-radius: var(--radius-compact); background: var(--surface); box-shadow: 0 18px 50px rgb(20 17 14 / .16); } .privacy-modal img { width: 100px; margin-bottom: var(--space-4); }
.site-footer { display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-6) max(24px, calc((100% - 1280px) / 2)); border-top: 1px solid var(--border); background: var(--canvas-subtle); color: var(--text-muted); font-size: 12px; } .site-footer div { display: flex; align-items: center; gap: var(--space-3); } .site-footer img { width: 120px; max-height: 28px; object-fit: contain; }
@media (max-width: 1180px) { .tour-selector { min-width: min(100%, 330px); } .timeline-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .translation-grid { grid-template-columns: 1fr; } .route-explorer { grid-template-columns: minmax(0, 7fr) minmax(260px, 5fr); } }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } .route-explorer { grid-template-columns: 1fr; grid-template-areas: "map" "inspector" "rail"; } .route-inspector { border-top: 1px solid var(--border-strong); border-left: 0; } .route-inspector-list { max-height: 390px; } }
@media (max-width: 760px) { body { font-size: 15px; } .topbar-inner, .shell, .public-page .shell { width: min(100% - 24px, 1280px); } .landing-hero, .story-band, .tour-public-hero, .portal-grid, .admin-two-column, .design-settings-grid, .tour-admin-grid, .station-content, .public-station-grid, .participant-hero, .station-teaser { grid-template-columns: 1fr; min-height: auto; } .landing-hero { padding-top: var(--space-5); } .landing-visual { min-height: 360px; } .tour-date { right: 5px; } .story-band { gap: var(--space-4); padding: var(--space-7) 0; } .section-heading, .panel-heading, .split-heading { display: grid; gap: var(--space-3); } .timeline-preview { grid-template-columns: 1fr; } .public-archive-card { grid-template-columns: 1fr; padding: var(--space-5); } .timeline-day { grid-template-columns: 1fr; gap: var(--space-3); } .timeline-day > header { position: static; } .timeline-day-items { padding-left: 26px; } .timeline-entry-marker { left: -25px; } .timeline-entry-body { padding: var(--space-4); } .timeline-gallery, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .route-map { height: 340px; min-height: 0; } .route-map-toolbar { padding-inline: var(--space-2); } .route-map-attribution { padding-inline: var(--space-3); } .route-stage-rail { grid-template-columns: repeat(14, minmax(44px, 1fr)); overflow-x: auto; overscroll-behavior-inline: contain; } .route-inspector-list { max-height: none; } .participant-hero { gap: var(--space-5); min-height: 0; padding-block: var(--space-5); } .participant-hero-seal { justify-self: start; padding: var(--space-4) 0 0; border-top: 1px solid var(--border); border-left: 0; } .progress-rail { grid-template-columns: 1fr; } .station-teaser img { min-height: 270px; max-height: 380px; } .station-teaser > div { padding: var(--space-5); } .tour-photo-interlude img { height: 340px; border-radius: 12px; } .tour-photo-interlude figcaption { position: relative; max-width: 100%; padding-inline: 0; } .stat-grid, .dashboard-stats, .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-card { padding: var(--space-4); border-bottom: 1px solid var(--border); } .stat-card:first-child { padding-left: var(--space-4); } .stat-card:nth-child(2n) { border-right: 0; } .stat-card:nth-last-child(-n+2) { border-bottom: 0; } .timeline-item { grid-template-columns: 70px minmax(0, 1fr); } .timeline-item .status { grid-column: 2; } .concert-row, .tour-admin-row, .program-entry { grid-template-columns: 1fr; gap: var(--space-2); } .program-actions { justify-content: flex-start; } .moment-meta-grid, .station-settings-grid, .compact-form, .add-program-grid { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } .segment-editor-row { grid-template-columns: 32px 1fr 1fr; } .segment-editor-row label:nth-of-type(n+3), .segment-editor-row > .confidence, .segment-editor-row > .btn { grid-column: span 3; } .rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer { display: grid; padding: var(--space-5) 24px; } }
@media (max-width: 390px) { .panel, .auth-card, .piece-card { padding: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-delay: 0s !important; transition-duration: .01ms !important; animation-delay: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media print { :root { color-scheme: light; } .topbar, .theme-control, .language-switch, .topbar-actions, .btn, .site-footer { display: none !important; } body, .panel, .timeline-entry-body { background: #fff !important; color: #1e1b19 !important; } .shell { width: 100%; padding: 0; } }

/* Bella Musica 0.9 — explicit map layers and interaction surfaces */
.map-base-layer,
.route-base-layer,
.route-context-layer,
.route-active-layer,
.route-visit-layer,
.cluster-spoke-layer,
.event-marker-layer,
.focus-layer,
.map-country-layer,
.map-geography-labels,
.map-label,
.map-marker { pointer-events: none; }
.marker-hit-area-layer { pointer-events: none; }
.map-hit-link,
.map-hit { pointer-events: all; }
.city-cluster-layer { pointer-events: none; }
.city-cluster-layer .map-location-component { pointer-events: all; }
.map-spoke {
  stroke: color-mix(in srgb, var(--map-border) 82%, var(--map-label));
  stroke-width: .85px;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  opacity: .76;
  vector-effect: non-scaling-stroke;
}
.map-cluster-leader {
  stroke: color-mix(in srgb, var(--map-label) 58%, transparent);
  stroke-width: 1px;
  stroke-linecap: round;
  opacity: .72;
  vector-effect: non-scaling-stroke;
}
.map-viewport:focus:not(:focus-visible) { outline: none; }
.map-viewport:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.route-map { height: 410px; }
.route-inspector > header { min-height: 74px; padding: 12px 16px; }
.route-inspector-list { max-height: none; }
.route-inspector-row {
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 92px;
  padding: 10px 16px;
}
.route-inspector-row strong { line-height: 1.25; }
.route-stage-rail-item { min-height: 44px; }
.route-stage-rail::before { top: 21px; }
.route-map-frame { min-height: 0; }
.route-explorer { max-width: 100%; }
@media (max-width: 760px) {
  .route-stage-rail {
    grid-template-columns: 1fr;
    gap: 3px;
    min-height: 86px;
    padding: 7px 10px 5px;
    overflow: visible;
  }
  .route-progress-context { padding-inline: 6px; }
  .route-progress-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
  }
  .route-progress-track {
    min-width: calc(760px + 100%);
    padding-inline: calc(50% - 29px);
  }
  .route-progress-line { right: auto; left: 50%; width: 760px; transform: translate(-50%, -50%); }
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.form-grid > label,
.stack-form > label,
.tour-metadata-form > label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
.stack-form,
.tour-metadata-form {
  display: grid;
  gap: var(--space-4);
  max-width: 820px;
}
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.data-table th {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.data-table td small { display: block; }
.span-3 { grid-column: 1 / -1; }
.moment-admin-card,
.staff-permission-card {
  min-width: 0;
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
}
.moment-editor-head,
.staff-permission-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
}
.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
}
.permission-check {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .translation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .translation-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .route-map { height: 380px; }
  .route-inspector-list { max-height: 306px; }
}

@media (max-width: 900px) {
  .landing-hero,
  .story-band,
  .tour-public-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .landing-hero { gap: var(--space-6); }
  .landing-visual { min-height: 430px; }
  .tour-public-date { justify-items: start; }
  .route-map { height: 340px; }
  .route-inspector-list { max-height: 282px; }
  .route-inspector {
    height: auto;
    border-top: 1px solid var(--border-strong);
  }
}

@media (max-width: 1180px) {
  body.header-menu-open { overflow: hidden; }
  .topbar-inner,
  .admin-page .topbar-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand trigger";
    gap: var(--space-3);
    min-height: 68px;
    padding-block: 6px;
  }
  .brand { grid-area: brand; }
  .brand-logo { width: 64px; height: 48px; }
  .brand-copy strong,
  .brand-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-menu-trigger {
    grid-area: trigger;
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transform: translateY(0) scale(1);
    transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-ui) ease, background-color var(--motion-ui) ease, color var(--motion-ui) ease;
  }
  .header-menu-trigger:hover { border-color: var(--accent); color: var(--accent); }
  .header-menu-trigger:active { transform: translateY(1px) scale(.96); }
  .header-menu-icon { display: grid; gap: 5px; width: 18px; }
  .header-menu-icon i { display: block; height: 1px; background: currentColor; transform-origin: center; transition: transform var(--motion-ui) var(--motion-ease), opacity var(--motion-fast) ease; }
  .topbar.is-menu-open .header-menu-icon i:first-child { transform: translateY(3px) rotate(45deg); }
  .topbar.is-menu-open .header-menu-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
  .app-header-panel {
    position: fixed;
    z-index: 19;
    inset: var(--app-header-panel-top, 68px) 0 0;
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    gap: var(--space-5);
    padding: var(--space-5) max(24px, calc((100% - 680px) / 2));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--border);
    background: var(--canvas);
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    visibility: hidden;
    will-change: transform, opacity;
    transition: opacity var(--motion-ui) ease, transform var(--motion-panel) var(--motion-ease), visibility 0s linear var(--motion-panel);
  }
  .topbar.is-menu-open .app-header-panel { opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .app-header-panel > * { opacity: 0; transform: translateX(24px); transition: opacity var(--motion-ui) ease, transform var(--motion-panel) var(--motion-ease); }
  .topbar.is-menu-open .app-header-panel > * { opacity: 1; transform: translateX(0); }
  .topbar.is-menu-open .app-header-panel > :nth-child(1) { transition-delay: 110ms; }
  .topbar.is-menu-open .app-header-panel > :nth-child(2) { transition-delay: 180ms; }
  .main-nav,
  .admin-page .main-nav {
    grid-area: auto;
    display: grid;
    width: 100%;
    justify-content: stretch;
    gap: 0;
    border-top: 1px solid var(--border-strong);
    overflow: visible;
  }
  .nav-link { justify-content: flex-start; min-height: 48px; border-bottom: 1px solid var(--border); transition: color var(--motion-ui) ease, padding-left var(--motion-ui) var(--motion-ease), background-color var(--motion-ui) ease; }
  .nav-link:hover { padding-left: 8px; background: var(--accent-faint); }
  .topbar-actions,
  .admin-page .topbar-actions {
    grid-area: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: stretch;
    gap: var(--space-3);
  }
  .header-utilities, .admin-page .header-utilities { grid-area: auto; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
  .tour-selector, .admin-page .tour-selector { display: block; width: 96px; min-width: 0; padding: 0; border: 0; }
  .tour-selector label { display: block; width: 100%; min-width: 0; }
  .tour-selector label > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tour-selector select, .tour-selector .bm-select-trigger { min-height: 44px; font-size: 13px; }
  .admin-page .tour-selector { grid-column: 1; justify-self: start; }
  .theme-control { grid-column: 1; justify-self: start; }
  .admin-page .theme-control { grid-column: 2; }
  .theme-menu { position: absolute; right: auto; left: 0; width: 160px; margin-top: 6px; }
  .language-switch { grid-column: 2; justify-self: start; }
  .admin-page .language-switch { grid-column: 3; }
  .session-box { grid-column: 1 / -1; justify-content: space-between; min-height: 48px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .public-admin-link { grid-column: 3; justify-self: end; }
}

@media (max-width: 760px) {
  .shell { padding-top: 36px; padding-bottom: 64px; }
  .topbar-inner,
  .admin-page .topbar-inner { width: min(100% - 24px, 1280px); }
  .brand-logo { width: 58px; height: 44px; }
  .technical-title { display: -webkit-box; max-width: 100%; overflow: hidden; font-size: clamp(1.8rem, 9vw, 2.15rem); -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
  .waveform-panel canvas { width: max(100%, 560px); height: 250px; }
  .brand-copy strong { font-size: 12px; }
  .brand-copy small { font-size: 10px; }
  .topbar.is-menu-open .app-header-panel { padding-inline: 18px; }
  .nav-link { font-size: 13px; }
  .route-map { height: 286px; }
  .route-map-toolbar { top: 8px; left: 8px; padding: 0; }
  .route-map-toolbar button { min-height: 44px; min-width: 44px; padding-inline: 10px; }
  .route-inspector > header { min-height: 68px; padding: 10px 14px; }
  .route-inspector > header h3 { font-size: 1.1rem; }
  .route-inspector-list { max-height: 282px; overflow-y: auto; }
  .route-inspector-row {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 88px;
    padding: 9px 14px;
  }
  .route-stage-rail {
    position: relative;
    bottom: auto;
    z-index: 1;
  }
  .map-attribution { padding: 5px 10px 7px; font-size: 8px; line-height: 1.35; }
  .participant-hero {
    gap: var(--space-4);
    padding-block: var(--space-4) var(--space-5);
  }
  .progress-large {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: var(--space-4);
  }
  .hero-seal {
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 10px;
    min-width: 0;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
  .hero-seal b { font-size: 2.75rem; }
  .hero-seal small { margin: 0 0 4px; }
  .translation-grid,
  .form-grid,
  .permission-grid,
  .moment-editor-head,
  .staff-permission-card { grid-template-columns: 1fr; }
  .form-grid .span-2,
  .translation-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .data-table { min-width: 620px; }
  .matrix-table { min-width: 900px; }
  .landing-copy h1,
  .tour-public-hero h1 { font-size: clamp(2.35rem, 12vw, 3.5rem); }
  .landing-hero { gap: var(--space-5); }
}

@media (max-width: 390px) {
  .brand-copy { max-width: 160px; }
  .header-menu-trigger > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.admin-entry-actions{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}.btn-danger,.admin-delete-button{border:1px solid color-mix(in srgb,var(--accent,#f43f55) 55%,transparent);background:transparent;color:var(--accent,#f43f55)}.btn-danger:hover,.admin-delete-button:hover{background:var(--accent,#f43f55);color:#fff}.admin-delete-dialog{width:min(92vw,480px);border:1px solid var(--line,#d4cec3);background:var(--surface,#f7f3eb);color:var(--ink,#1f1d1a);padding:0;box-shadow:none}.admin-delete-dialog::backdrop{background:rgba(20,18,16,.64);backdrop-filter:blur(3px)}.admin-delete-dialog form{padding:clamp(1.5rem,4vw,2.4rem)}.admin-delete-dialog h2{margin:.35rem 0 .75rem;font-size:clamp(1.6rem,4vw,2.3rem)}.admin-delete-dialog p{max-width:42ch}.admin-delete-dialog-kicker{color:var(--accent,#f43f55);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.admin-delete-dialog form>div{display:flex;justify-content:flex-end;gap:.65rem;margin-top:1.5rem}
.premium-institutional-editor>.admin-entry-actions{margin:1rem 0}.station-delete-form{display:flex;justify-content:flex-end;margin:0 1rem 1rem}.content-inbox-delete{border-top:1px solid var(--line,#d4cec3);margin-top:1.25rem;padding-top:1.25rem}.repertoire-list>li{gap:.75rem}.repertoire-list>li>form{margin-left:auto}@media(max-width:680px){.admin-delete-dialog form>div{align-items:stretch;flex-direction:column-reverse}.admin-delete-dialog button{width:100%}}
.search-health-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line,#d7d0c5);margin:0 0 24px}.search-health-summary>div{padding:20px;border-right:1px solid var(--line,#d7d0c5)}.search-health-summary>div:last-child{border-right:0}.search-health-summary dt{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted,#746f67)}.search-health-summary dd{margin:8px 0 0;font-size:18px;font-weight:700;overflow-wrap:anywhere}.search-health-row{display:grid;grid-template-columns:64px 1fr auto;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line,#d7d0c5)}
@media(max-width:760px){.search-health-summary{grid-template-columns:1fr 1fr}.search-health-summary>div:nth-child(2){border-right:0}.search-health-summary>div{border-bottom:1px solid var(--line,#d7d0c5)}}
.mfa-enrollment-grid{display:grid;grid-template-columns:minmax(260px,340px) minmax(260px,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(1.5rem,3vw,2.5rem)}.mfa-qr{margin:0;display:grid;gap:.8rem;justify-items:center}.mfa-qr img{max-width:100%;height:auto;border-radius:18px;background:#fff;padding:10px}.mfa-qr figcaption{max-width:32rem;overflow-wrap:anywhere}.mfa-qr code,.recovery-code-list code{font:600 .95rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.recovery-code-list{columns:2;column-gap:2rem;margin:0 0 2rem;padding-left:1.5rem}.recovery-code-list li{break-inside:avoid;margin:.45rem 0}.identity-auth-card{max-width:34rem}.step-up-panel{max-width:48rem}.account-mfa-actions{display:flex;flex-wrap:wrap;gap:.75rem}.account-mfa-actions form{margin:0}@media(max-width:760px){.mfa-enrollment-grid{grid-template-columns:1fr;padding:1.25rem}.recovery-code-list{columns:1}}