/* Shared festival surfaces. Decorative skins keep their own artwork, while
   controls and all five display constructions use the active palette. */
body[data-festival-theme] {
  --festival-input: color-mix(in srgb, var(--panel) 84%, var(--bg));
  --festival-selected: color-mix(in srgb, var(--panel) 85%, var(--green2));
  --festival-glow: color-mix(in srgb, var(--green) 25%, transparent);
}
body[data-festival-theme] :is(.topbar,.lower,footer) { border-color:var(--line); }
body[data-festival-theme] :is(.brand,.hero h1,.event-name,.life-strip-head h3) { color:var(--text); }
body[data-festival-theme] :is(.subtitle,.nav a,.live,.section-head p,.year-picker label,.location-status,.toolbar-field label,.life-field label,.settings-title,.event-date,.event-past,.timezone,.life-summary,.target-date,.origin-stats,footer,.holiday-source,.date-mini) { color:var(--muted); }
body[data-festival-theme] :is(.brand-mark,.eyebrow) { border-color:var(--line2);color:var(--green);background:var(--panel); }
body[data-festival-theme] :is(.tracking-btn,.holiday-btn,.custom-btn,.auto-locate,.settings-menu summary,.event-delete,.toggle-group button,.dialog-actions button,.music-unlock) {
  border-color:var(--line2);background:var(--panel);color:var(--green);
}
body[data-festival-theme] :is(.tracking-btn,.holiday-btn,.custom-btn,.auto-locate,.settings-menu summary,.event-delete,.toggle-group button,.dialog-actions button,.music-unlock):hover {
  border-color:var(--green);background:var(--panel2);color:var(--text);
}
body[data-festival-theme] :is(.tracking-btn.following,.holiday-btn.active,.toggle-group button.active,.dialog-actions .save) {
  background:var(--festival-selected);border-color:var(--green2);color:var(--green);box-shadow:inset 0 0 16px var(--festival-glow);
}
body[data-festival-theme] :is(.settings-panel,.toolbar-field,dialog) { background:var(--panel);border-color:var(--line2);color:var(--text); }
body[data-festival-theme] .settings-panel:before { background:var(--panel);border-color:var(--line2); }
body[data-festival-theme] :is(.holiday-search input,.year-select,.toolbar-field select,.life-field select,dialog input) {
  background-color:var(--festival-input);border-color:var(--line2);color:var(--text);caret-color:var(--green);
}
body[data-festival-theme] :is(.year-select,.toolbar-field select) {
  background-image:linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%);
}
body[data-festival-theme] :is(.holiday-search input,dialog input)::placeholder { color:var(--muted); }
body[data-festival-theme] :is(input,select,button):focus-visible { outline:1px solid var(--green);outline-offset:3px; }
body[data-festival-theme] .holiday-search input:focus { border-color:var(--green);box-shadow:0 0 0 1px var(--festival-glow); }
body[data-festival-theme] :is(.holiday-search-icon,.status,.unit,.event-days,.event-days b,.life-summary b,.life-summary .lite,.origin-stats b,.target-date b,.foot-brand) { color:var(--green); }
body[data-festival-theme] :is(.event-card,.life-strip) { border-color:var(--line);background:linear-gradient(180deg,var(--panel),var(--bg)); }
body[data-festival-theme] .event-card:hover { border-color:var(--line2); }
body[data-festival-theme] .event-card.selected { border-color:var(--green2);background:var(--festival-selected); }
body[data-festival-theme] .event-tag { color:var(--muted);border-color:var(--line2); }
body[data-festival-theme] :is(.subrow,.origin-stats) { border-color:var(--line); }
body[data-festival-theme] .holiday-btn.active .date-mini { color:var(--green); }
body[data-festival-theme] :is(dialog label,dialog p) { color:var(--muted); }

/* Same panel and light colour in numeral and greeting modes. Shapes stay
   specific to LCD, striped, dot, tube and flip respectively. */
body[data-festival-theme][data-font-style] .festival-message.display-message .festival-matrix-panel {
  border:1px solid var(--line2);background:linear-gradient(180deg,var(--panel2),var(--bg));
}
body[data-festival-theme][data-font-style="lcd"] :is(.digits,.festival-message.display-message .festival-matrix-panel) {
  border-color:var(--line2);background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--green) 4%,transparent) 0 1px,transparent 1px 3px),linear-gradient(180deg,var(--panel2),var(--bg));
}
body[data-festival-theme][data-font-style="striped"] .digits { background:linear-gradient(180deg,var(--panel2),var(--bg)); }
body[data-festival-theme][data-font-style] .seg { background:color-mix(in srgb,var(--green) 14%,transparent);box-shadow:inset 0 0 0 1px var(--festival-glow); }
body[data-festival-theme][data-font-style] .seg.on { background:var(--green);box-shadow:0 0 5px var(--festival-glow),0 0 15px var(--festival-glow); }
body[data-festival-theme][data-font-style="striped"] .seg { background:repeating-linear-gradient(90deg,var(--festival-glow) 0 2px,transparent 2px 4px); }
body[data-festival-theme][data-font-style="striped"] .seg.on { background:repeating-linear-gradient(90deg,var(--green) 0 2px,color-mix(in srgb,var(--green) 65%,transparent) 2px 4px); }
body[data-festival-theme] .dot-point { background:var(--festival-glow);box-shadow:none; }
body[data-festival-theme] .dot-point.on { background:var(--green);box-shadow:0 0 4px var(--festival-glow),0 0 10px var(--festival-glow); }
body[data-festival-theme] .tube-digit { border-color:var(--line2);background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--green) 4%,transparent) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 44%,var(--panel2),var(--bg)); }
body[data-festival-theme] .tube-digit:before { border-color:var(--line2);background:repeating-linear-gradient(90deg,transparent 0 6%,color-mix(in srgb,var(--green) 5%,transparent) 6% 7%); }
body[data-festival-theme] .tube-digit:after { background:linear-gradient(180deg,var(--festival-glow),transparent); }
body[data-festival-theme] .flip-digit { border-color:var(--line2);background:var(--bg); }
body[data-festival-theme] .flip-half { background:linear-gradient(180deg,var(--panel2),var(--panel)); }
body[data-festival-theme] .flip-half.bottom { background:linear-gradient(180deg,var(--bg),var(--panel2)); }
body[data-festival-theme] .flip-half.top { border-color:var(--line2); }
body[data-festival-theme] .flip-hinge { background:var(--bg);box-shadow:0 0 0 1px var(--line); }
body[data-festival-theme] .flip-number { text-shadow:0 0 6px var(--festival-glow); }

/* Keep May Day history in the actual margins, with no opaque rectangles. */
.mayday-page-stream { width:min(320px,calc((100vw - 1060px)/2));background:transparent; }
.mayday-page-ticker { left:12px;right:12px; }

/* Do not let flex shrink the readout box while the actual digits spill out of
   it. JS measures these real widths before choosing the numeral size. */
.digits :is(.digit-wrap,.time-part,.led-readout,.colon) { flex:0 0 auto; }
body[data-font-style="lcd"] .led-readout::after { width:.2em;min-width:10px;max-width:20px; }
body[data-font-style="striped"] .led-readout::after { width:.2em;min-width:9px;max-width:18px; }
body[data-font-style="dot"] .led-readout::after { width:.18em;min-width:8px;max-width:16px; }
.toolbar-field { min-width:0; }
.toolbar-field label { white-space:normal;overflow-wrap:anywhere; }
.toolbar-field select { min-width:0;flex:1 1 150px;width:150px; }
.grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.event-card,.event-name { min-width:0;overflow-wrap:anywhere; }
.event-bottom { gap:8px;flex-wrap:wrap; }
@media(max-width:650px) {
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .event-card-top { flex-wrap:wrap;gap:6px; }
  body[data-font-style="lcd"] .led-readout::after { width:.2em;min-width:7px;max-width:12px; }
  body[data-font-style="striped"] .led-readout::after { width:.2em;min-width:7px;max-width:11px; }
  body[data-font-style="dot"] .led-readout::after { width:.18em;min-width:6px;max-width:10px; }
  .toolbar-field { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
  .toolbar-field select { width:100%; }
}

/* Explicit geometry survives the festival backgrounds' shorthand resets. */
body[data-festival-theme] :is(.year-select,.toolbar-field select) {
  background-repeat:no-repeat;
  background-size:4px 4px,4px 4px;
  background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%;
}
body.festival-cn .toolbar-field select {
  background-color:var(--green);color:var(--bg);border-color:var(--green2);
  background-image:linear-gradient(45deg,transparent 50%,var(--bg) 50%),linear-gradient(135deg,var(--bg) 50%,transparent 50%);
}
body.festival-cn .toolbar-field select option { background:var(--green);color:var(--bg); }
body[data-festival-theme] .count-card.mayday-link:is(:hover,:focus-visible) { border-color:var(--green);outline-color:var(--green); }
.mayday-page-ticker { gap:0;padding:0; }
.mayday-stream-group { display:flex;flex-direction:column;gap:28px;padding:14px 0; }
.mayday-stream-group { min-height:100vh;box-sizing:border-box;justify-content:space-around;flex:none; }