/* settings.css — the booth's Settings panel, grouped and dark (same palette
   as ui-kit.css). Loaded after style.css and mobile.css. Structure (index.html):
   .settings-left > .set-nav (sticky chips) + .set-group (#set-booth …) >
   .set-card > h2 + the option lists app.js fills. IDs are unchanged: app.js
   and the keyboard / remote navigation (ORDER in index.html) rely on them.
   Responsive: TV / laptop = list + sticky strip preview side by side;
   <= 1000 px = one column; phones (html.is-mobile) = mobile.css's single
   scroller, preview hidden. */

#settings-panel {
  --st-bg: #0b0616; --st-card: #170d2b; --st-card-2: #1f1338; --st-border: #2e2050; --st-border-2: #45306f;
  --st-text: #efe9fb; --st-muted: #a596c4; --st-accent: #b14dff; --st-accent-2: #ff3fa4; --st-cyan: #22e0ff; --st-ok: #2ee59d;
  background: radial-gradient(1200px 700px at 0% 0%, rgba(177, 77, 255, .18), transparent 60%),
              radial-gradient(900px 600px at 100% 100%, rgba(255, 63, 164, .12), transparent 60%), rgba(11, 6, 22, .97);
  color: var(--st-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Layout ---------- */
#settings-panel .settings-content {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 30%); gap: 24px;
  width: min(1500px, 94vw); max-height: 100vh; padding: 28px 0; box-sizing: border-box; font-size: 17px;
}
#settings-panel .settings-left {
  background: none; border: 0; border-radius: 0; padding: 0 12px 40px 0; max-height: calc(100vh - 56px);
  scrollbar-color: var(--st-border-2) transparent; scroll-padding-top: 80px;
}
#settings-panel .settings-left::-webkit-scrollbar-track { background: transparent; box-shadow: none; }
#settings-panel .settings-left::-webkit-scrollbar-thumb { background: var(--st-border-2); border: 0; }
#settings-panel .settings-right {
  align-self: start; position: sticky; top: 0; max-height: calc(100vh - 56px);
  background: linear-gradient(180deg, var(--st-card-2), var(--st-card)); border: 1px solid var(--st-border); border-radius: 18px;
  padding: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
#settings-panel #strip-preview { max-height: calc(100vh - 260px); border: 1px solid var(--st-border-2); border-radius: 12px; background: #000; }
#settings-panel .color-label { color: var(--st-muted); font-size: 16px; margin: 10px 0 14px; }

/* ---------- Section chips (sticky) ---------- */
#settings-panel .set-nav {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 0 12px; margin-bottom: 6px;
  background: linear-gradient(180deg, rgba(11, 6, 22, .98) 70%, rgba(11, 6, 22, 0));
}
#settings-panel .set-nav button {
  min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--st-border-2); background: var(--st-card);
  color: var(--st-muted); font-weight: 700; font-size: 15px; line-height: 1; font-family: inherit; cursor: pointer; white-space: nowrap;
}
#settings-panel .set-nav button:hover { color: var(--st-text); border-color: var(--st-accent); }
#settings-panel .set-nav button[aria-current="true"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2)); }
#settings-panel .set-nav-hint { margin-left: auto; font-size: 12px; color: var(--st-muted); opacity: .7; }

/* ---------- Groups & cards ---------- */
#settings-panel .set-group { scroll-margin-top: 72px; margin-bottom: 26px; }
#settings-panel .set-group-title {
  margin: 8px 0 12px; font-size: 26px; font-weight: 800; letter-spacing: .01em; color: var(--st-text);
  display: flex; align-items: center; gap: 10px;
}
#settings-panel .set-card {
  background: linear-gradient(180deg, var(--st-card-2), var(--st-card)); border: 1px solid var(--st-border); border-radius: 16px;
  padding: 16px 18px 6px; margin-bottom: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
#settings-panel .settings-left h2 {
  font-weight: 800; font-size: 13px; line-height: 1.2; font-family: inherit; letter-spacing: .14em; text-transform: uppercase;
  color: var(--st-muted); margin: 4px 0 12px; padding: 0;
}
#settings-panel .set-card h2 + .option-list, #settings-panel .set-card h2 + .option-grid { margin-top: 0; }
/* the panel's hint lines carry inline color:#333 (made for the old lavender panel) */
#settings-panel .settings-left p { color: var(--st-muted) !important; }
#settings-panel #about-line { color: var(--st-text) !important; }

/* ---------- Option rows (filled by app.js) ---------- */
#settings-panel .option-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-bottom: 14px;
}
#settings-panel #logo-options, #settings-panel #decoration-options { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
#settings-panel .logo-option, #settings-panel .decoration-option {
  min-height: 52px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--st-border-2);
  background: rgba(255, 255, 255, .03); color: var(--st-text); font-size: 16px;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
#settings-panel .logo-option span, #settings-panel .decoration-option span,
#settings-panel .logo-option strong { font-family: inherit; font-size: 16px; color: var(--st-text); }
#settings-panel .logo-option p { color: var(--st-muted) !important; opacity: 1 !important; }
#settings-panel .logo-option img, #settings-panel .decoration-option img {
  width: 44px; height: 44px; border-radius: 8px; background: repeating-conic-gradient(#2a2040 0% 25%, #1d1530 0% 50%) 50% / 12px 12px;
}
#settings-panel .logo-option:hover, #settings-panel .decoration-option:hover { border-color: var(--st-accent); background: rgba(177, 77, 255, .08); }
#settings-panel .logo-option.selected, #settings-panel .decoration-option.selected {
  border-color: var(--st-accent); background: rgba(177, 77, 255, .22); box-shadow: inset 0 0 0 1px var(--st-accent), 0 0 18px rgba(177, 77, 255, .35);
}
#settings-panel .effect-desc { color: var(--st-muted); font-size: 13px; margin: 2px 0 0; }

/* Strip colours: fixed 6 columns (the keyboard moves ±6 for up / down) */
#settings-panel .option-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 64px)); gap: 12px; margin-bottom: 14px; }
#settings-panel .color-option { width: auto; aspect-ratio: 1; height: auto; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .14); }
#settings-panel .color-option.selected { border-color: #fff; box-shadow: 0 0 0 3px var(--st-accent), 0 0 18px rgba(177, 77, 255, .5); transform: scale(1.05); }

/* Session name */
#settings-panel #session-name-field {
  background: #120a22 !important; color: var(--st-text) !important; border: 1px solid var(--st-border-2) !important;
  border-radius: 12px !important; font-family: inherit !important; font-size: 18px !important; padding: 12px 14px !important;
}
#settings-panel #session-name-field:focus { outline: none; border-color: var(--st-accent) !important; box-shadow: 0 0 0 3px rgba(177, 77, 255, .3); }

/* Tool buttons, fine-tune, gallery folder */
#settings-panel .calibrate-button {
  border-radius: 14px; border: 1px solid var(--st-border-2); background: rgba(34, 224, 255, .06); color: var(--st-text);
  padding: 14px 16px; min-height: 64px; text-align: left; font-family: inherit;
}
#settings-panel .calibrate-button:hover { border-color: var(--st-cyan); background: rgba(34, 224, 255, .12); transform: none; }
#settings-panel .calibrate-text strong { color: var(--st-text); font-size: 17px; }
#settings-panel .calibrate-text small { color: var(--st-muted); font-size: 14px; }
#settings-panel .settings-subbtn {
  border-radius: 12px; border: 1px solid var(--st-border-2); background: rgba(255, 255, 255, .03); color: var(--st-text);
  min-height: 48px; font-family: inherit; font-size: 16px;
}
#settings-panel #maker-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
#settings-panel .logo-tuning-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
#settings-panel .logo-tuning-row span { min-width: 90px; color: var(--st-muted); }
#settings-panel .logo-tune-btn, #settings-panel #logo-reset, #settings-panel #date-reset {
  min-width: 48px; min-height: 44px; border-radius: 12px; border: 1px solid var(--st-border-2); background: var(--st-card-2);
  color: var(--st-text); font-family: inherit; font-size: 18px; cursor: pointer;
}
#settings-panel #logo-reset, #settings-panel #date-reset { font-size: 15px; padding: 0 14px; }
#settings-panel .logo-tuning-label, #settings-panel #date-tuning-label { color: var(--st-muted); }
#settings-panel .repo-input { background: #120a22; color: var(--st-text); border: 1px solid var(--st-border-2); border-radius: 10px; padding: 8px 10px; font-family: inherit; }
#settings-panel .settings-return-button { border-radius: 14px; font-family: inherit; min-height: 52px; }

/* ---------- Keyboard / remote focus (kept loud: it's read from across the room) ---------- */
#settings-panel .logo-option.focused, #settings-panel .decoration-option.focused,
#settings-panel .calibrate-button.focused, #settings-panel .settings-subbtn.focused,
#settings-panel .logo-tune-btn.focused, #settings-panel #logo-reset.focused, #settings-panel #date-reset.focused,
#settings-panel #session-name-field.focused {
  outline: 3px solid #ffe14d !important; outline-offset: 2px; border-color: #ffe14d !important;
  box-shadow: 0 0 22px rgba(255, 225, 77, .55) !important; transform: none !important; background: rgba(255, 225, 77, .1) !important;
}
#settings-panel .color-option.focused { outline: 3px solid #ffe14d; outline-offset: 3px; }
#settings-panel :focus-visible { outline: 3px solid var(--st-cyan); outline-offset: 2px; }

/* ---------- Narrow screens (tablets, small laptops) ---------- */
@media (max-width: 1000px) {
  #settings-panel .settings-content { grid-template-columns: 1fr; width: 96vw; padding: 16px 0; overflow-y: auto; }
  #settings-panel .settings-left { max-height: none; overflow: visible; padding-right: 0; }
  #settings-panel .settings-right { position: static; max-height: none; }
  #settings-panel #strip-preview { max-height: 46vh; }
}

/* ---------- Phones (mobile.css: the panel itself scrolls, preview hidden) ---------- */
html.is-mobile #settings-panel .set-nav { top: calc(56px + env(safe-area-inset-top)); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 6px; padding: 8px 12px 12px; }
html.is-mobile #settings-panel .set-nav::-webkit-scrollbar { display: none; }
html.is-mobile #settings-panel .set-nav-hint { display: none; }
html.is-mobile #settings-panel .set-group { scroll-margin-top: calc(120px + env(safe-area-inset-top)); }
html.is-mobile #settings-panel .set-group-title { font-size: 22px; }
html.is-mobile #settings-panel .settings-left h2 { font-size: 13px !important; margin: 4px 0 10px !important; padding-left: 0 !important; }
html.is-mobile #settings-panel .set-card { padding: 14px 12px 4px; }
html.is-mobile #settings-panel .option-list > div, html.is-mobile #settings-panel .option-grid > div { width: auto !important; }
html.is-mobile #settings-panel .option-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
html.is-mobile #settings-panel .logo-option, html.is-mobile #settings-panel .decoration-option { min-height: 48px; }
/* phones: a card whose content mobile.js hid (or that has nothing to show) */
html.is-mobile #settings-panel .set-card.pb-vacant { display: none; }
/* phones: rows fill the card (mobile.css centres them with auto margins);
   chips keep their label inside the pill; countdown + sound side by side */
html.is-mobile body #settings-panel .option-list > div { margin: 0 !important; justify-self: stretch; }
html.is-mobile body #settings-panel .set-nav button { flex: 0 0 auto; width: auto !important; min-width: max-content; padding: 0 14px !important; font-size: 15px !important; min-height: 42px; }
html.is-mobile #settings-panel #countdown-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* =====================================================================
   Cute layer (owner's request: "more cute"). Candy colour per group
   (--g / --g2), bubbly Galter titles, an emoji on every card (index.html
   .h2-ico), softer rounder cards, heart-check on what's selected, a few
   twinkling sparkles. The yellow keyboard focus above stays as loud as it
   was. Motion is off with prefers-reduced-motion.
   ===================================================================== */
#settings-panel { --g: #ff7ac8; --g2: #b14dff; }
#settings-panel #set-booth    { --g: #ff7ac8; --g2: #ff4fa8; }
#settings-panel #set-strip    { --g: #ffb27a; --g2: #ff7a59; }
#settings-panel #set-effects  { --g: #c99bff; --g2: #9b5cff; }
#settings-panel #set-screen   { --g: #6ff0c6; --g2: #22c9a0; }
#settings-panel #set-hardware { --g: #82cbff; --g2: #4a8dff; }
#settings-panel #set-tools    { --g: #ffe27a; --g2: #ffb02e; }
#settings-panel #set-about    { --g: #ffa3bd; --g2: #ff6f91; }

#settings-panel {
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(255, 122, 200, .20), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(130, 203, 255, .14), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(201, 155, 255, .16), transparent 60%),
    #120822;
}
/* sparkles drifting in the background */
#settings-panel::before, #settings-panel::after {
  content: "✦   ·   ✧       ✦     ·    ✧   ✦"; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0;
  font-size: 22px; letter-spacing: 3.2vw; white-space: nowrap; overflow: hidden; color: rgba(255, 190, 235, .45);
}
#settings-panel::before { top: 14%; }
#settings-panel::after { bottom: 10%; content: "·   ✧     ✦   ·      ✧   ✦    ·   ✧"; color: rgba(160, 220, 255, .38); }
#settings-panel .settings-content { position: relative; z-index: 1; }
/* Nothing in the panel animates on its own: looping animations kept the page
   repainting while scrolling, and the titles lagged behind the cards. */

/* group titles: bubbly font, emoji in a soft bubble */
#settings-panel .set-group-title {
  font-family: 'Galter', -apple-system, "Segoe UI", sans-serif; font-weight: 400; font-size: 30px; letter-spacing: .02em;
  color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
#settings-panel .set-group-title > span[aria-hidden] {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 26px;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 60%), linear-gradient(135deg, var(--g), var(--g2));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--g2) 45%, transparent), inset 0 -3px 0 rgba(0, 0, 0, .15);
  transform: rotate(-4deg);
}

/* cards: rounder, a candy top edge, soft coloured glow */
#settings-panel .set-card {
  border-radius: 24px; padding: 18px 20px 8px;
  border: 1.5px solid color-mix(in srgb, var(--g) 30%, transparent);
  background:
    linear-gradient(90deg, var(--g), var(--g2)) top / 100% 4px no-repeat,
    radial-gradient(400px 160px at 0% 0%, color-mix(in srgb, var(--g) 12%, transparent), transparent 70%),
    linear-gradient(180deg, #221440, #190e30);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}
#settings-panel .settings-left .set-card > h2, #settings-panel .settings-left .set-card h2 {
  display: flex; align-items: center; gap: 8px; letter-spacing: .08em; color: color-mix(in srgb, var(--g) 70%, #fff);
}
#settings-panel .h2-ico {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; font-size: 16px; letter-spacing: 0;
  background: color-mix(in srgb, var(--g) 22%, transparent);
}

/* options: soft pills, a little bounce, heart-check when selected */
#settings-panel .logo-option, #settings-panel .decoration-option {
  position: relative; border-radius: 18px; border: 1.5px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .045);
  transition: border-color .15s, background .15s, box-shadow .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
#settings-panel .logo-option:hover, #settings-panel .decoration-option:hover {
  border-color: var(--g); background: color-mix(in srgb, var(--g) 12%, transparent); transform: translateY(-2px);
}
#settings-panel .logo-option.selected, #settings-panel .decoration-option.selected {
  border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g) 38%, transparent), color-mix(in srgb, var(--g2) 30%, transparent));
  box-shadow: inset 0 0 0 2px var(--g), 0 6px 18px color-mix(in srgb, var(--g2) 35%, transparent);
}
#settings-panel .logo-option.selected::after, #settings-panel .decoration-option.selected::after {
  content: "♥"; position: absolute; top: -8px; right: -6px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--g), var(--g2)); box-shadow: 0 3px 8px rgba(0, 0, 0, .35); pointer-events: none;
  animation: st-pop .35s cubic-bezier(.3, 1.8, .5, 1);
}
@keyframes st-pop { from { transform: scale(0); } to { transform: scale(1); } }
#settings-panel .color-option { border-radius: 50%; }
#settings-panel .color-option.selected { box-shadow: 0 0 0 3px var(--g), 0 0 18px color-mix(in srgb, var(--g) 60%, transparent); }

/* tool cards */
#settings-panel .calibrate-button { border-radius: 20px; border: 1.5px solid color-mix(in srgb, var(--g) 35%, transparent);
  background: color-mix(in srgb, var(--g) 8%, transparent); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .15s, border-color .15s; }
#settings-panel .calibrate-button:hover { border-color: var(--g); background: color-mix(in srgb, var(--g) 16%, transparent); transform: translateY(-2px); }
#settings-panel .calibrate-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g) 45%, transparent), color-mix(in srgb, var(--g2) 35%, transparent)); }

/* section chips: each in its group's colour */
#settings-panel .set-nav { background: linear-gradient(180deg, rgba(18, 8, 34, .97) 70%, rgba(18, 8, 34, 0)); }
#settings-panel .set-nav button { border-radius: 999px; border-width: 1.5px; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .15s; }
#settings-panel .set-nav [data-jump="set-booth"]    { --g: #ff7ac8; --g2: #ff4fa8; }
#settings-panel .set-nav [data-jump="set-strip"]    { --g: #ffb27a; --g2: #ff7a59; }
#settings-panel .set-nav [data-jump="set-effects"]  { --g: #c99bff; --g2: #9b5cff; }
#settings-panel .set-nav [data-jump="set-screen"]   { --g: #6ff0c6; --g2: #22c9a0; }
#settings-panel .set-nav [data-jump="set-hardware"] { --g: #82cbff; --g2: #4a8dff; }
#settings-panel .set-nav [data-jump="set-tools"]    { --g: #ffe27a; --g2: #ffb02e; }
#settings-panel .set-nav button:hover { border-color: var(--g); color: #fff; transform: translateY(-1px); }
#settings-panel .set-nav button[aria-current="true"] {
  background: linear-gradient(135deg, var(--g), var(--g2)); color: #1a0b2e; text-shadow: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--g2) 45%, transparent); transform: scale(1.05);
}

/* strip preview side: candy frame */
#settings-panel .settings-right { border-radius: 26px; border: 1.5px solid rgba(255, 122, 200, .3);
  background: radial-gradient(300px 200px at 50% 0%, rgba(255, 122, 200, .14), transparent 70%), linear-gradient(180deg, #221440, #190e30); }
#settings-panel .settings-return-button { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  #settings-panel .logo-option.selected::after { animation: none; }
}

/* While Settings is open the idle screen behind it is frozen: its looping
   animations (splash zoom, breathing crop, pulsing CTA) restyled the page
   every frame, and scrolling the panel stuttered against them. */
body:has(#settings-panel:not(.hidden)) #idle-screen,
body:has(#settings-panel:not(.hidden)) #idle-screen * { animation-play-state: paused !important; }

/* Text fields in an option grid (Gallery folder, Service URL): a whole row each.
   In a 240 px grid cell the label + Save left the input 36-90 px wide (worst on
   4:3 screens, where the column is narrowest), so a folder name or a URL was
   unreadable. Now: full row, input takes the rest, 17 px text, 44 px targets. */
#settings-panel #repo-option, #settings-panel #local-services-url-option {
  grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
}
#settings-panel #repo-option > span, #settings-panel #local-services-url-option > span { white-space: nowrap; flex: 0 0 auto; }
#settings-panel #repo-option .repo-input, #settings-panel #local-services-url-option .repo-input {
  flex: 1 1 260px; min-width: min(100%, 200px); margin: 0 !important; box-sizing: border-box;
  min-height: 44px; font-size: 17px; padding: 8px 12px; border-radius: 12px;
}
#settings-panel #repo-option .repo-save-btn, #settings-panel #local-services-url-option .repo-save-btn {
  flex: 0 0 auto; margin: 0 !important; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-family: inherit; font-size: 16px; border: 1.5px solid var(--g, var(--st-accent)); background: color-mix(in srgb, var(--g, #b14dff) 18%, transparent);
}