/* Settings panel (index.html #panel, js/panel.js): glass card with a tab bar and one scrolling pane per tab.
   Shared controls (.row, .btn, .sel, sliders, .note) stay in style.css. */

/* ---- the card: header + tabs stay put, the active pane scrolls */
#panel { position: fixed; top: 16px; right: 16px; width: 340px; max-height: calc(100% - 32px); min-height: min(460px, calc(100% - 32px)); display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 16px; border: 1px solid var(--panel-border); background: var(--panel); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); transform-origin: top right; transition: transform 0.28s cubic-bezier(.2,.8,.2,1), opacity 0.25s; touch-action: pan-y; }
#panel.collapsed { transform: scale(0.96) translateX(12px); opacity: 0; pointer-events: none; visibility: hidden; transition: transform 0.28s cubic-bezier(.2,.8,.2,1), opacity 0.25s, visibility 0s linear 0.28s; }   /* hidden = out of the Tab order too */
#panel > header { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 62px 0 16px; }   /* the ☰ button sits over the right end */
#panel h1 { font-size: 15px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; margin: 0; }
.fps { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
#panel > .stats { flex: none; margin: 0 14px 6px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); font: 10.5px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--muted); white-space: pre-wrap; }

/* ---- tab bar */
.tabs { flex: none; position: relative; display: flex; gap: 2px; margin: 6px 12px 0; padding: 3px; border-radius: 13px; background: rgba(0, 0, 0, 0.24); border: 1px solid rgba(226, 202, 158, 0.08); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; touch-action: pan-x; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 1 0; min-width: 54px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 10.5px; letter-spacing: 0.06em; line-height: 1.2; cursor: pointer; scroll-snap-align: center; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.tab svg { width: 19px; height: 19px; flex: none; }
.tab:hover { color: var(--text); background: rgba(242, 232, 212, 0.06); }
.tab[aria-selected="true"] { color: var(--text); background: rgba(var(--accent-rgb), 0.16); box-shadow: inset 0 -2px 0 var(--accent); }
.tab:focus-visible, #panel summary:focus-visible, #panel .btn:focus-visible, #panel .pane:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#panel .pane:focus-visible { outline: none; }   /* panes are only focusable by script */

/* ---- panes */
.panes { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 12px; scrollbar-width: thin; scrollbar-color: rgba(226, 202, 158, 0.22) transparent; touch-action: pan-y; }
.pane > :first-child { margin-top: 0; }

#panel .block { padding: 12px 0 6px; border-top: 1px solid rgba(226, 202, 158, 0.08); }
#panel .pane > .block:first-child { border-top: 0; padding-top: 10px; }
#panel h2 { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
#panel .card { margin: 10px 0 4px; padding: 11px 12px 8px; border-radius: 13px; border: 1px solid rgba(226, 202, 158, 0.10); background: rgba(242, 232, 212, 0.045); }
#panel .card h2 { margin-bottom: 9px; }

/* collapsible groups (<details class="group" data-key>) */
#panel .group { border-top: 1px solid rgba(226, 202, 158, 0.08); padding: 0 0 6px; }
#panel .pane > .group:first-child { border-top: 0; }
#panel .group > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 0 9px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); cursor: pointer; border-radius: 6px; }
#panel .group > summary::-webkit-details-marker { display: none; }
#panel .group > summary::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 2px 0 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
#panel .group[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
#panel .group > summary:hover { color: var(--text); }
#panel .group[open] > summary { padding-bottom: 6px; }

/* ---- prominent controls */
.btn.primary { background: rgba(var(--accent-rgb), 0.2); border-color: rgba(var(--accent-rgb), 0.55); color: var(--text); }
.btn.primary:hover { background: rgba(var(--accent-rgb), 0.3); }
.btn.primary.is-on { background: rgba(255, 122, 104, 0.22); border-color: rgba(255, 122, 104, 0.6); }   /* live: red like its heading */
.btn.hero { width: 100%; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--text); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.30), rgba(var(--accent-rgb), 0.13)); border-color: rgba(var(--accent-rgb), 0.5); box-shadow: 0 2px 14px rgba(211, 170, 99, 0.18); }
.btn.hero:hover { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.42), rgba(var(--accent-rgb), 0.2)); }
.row.big { grid-template-columns: 44px 1fr 66px; margin: 8px 0 10px; }
.row.big > span:first-child { font-size: 13px; }
.row.big output { font-size: 20px; font-weight: 300; color: var(--text); letter-spacing: 0.02em; }
.row.big input[type=range] { height: 30px; }
.row.big input[type=range]::-webkit-slider-thumb { width: 19px; height: 19px; margin-top: -6.5px; }
.row.big input[type=range]::-moz-range-thumb { width: 19px; height: 19px; }
#time::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; }
#time::-moz-range-track { height: 6px; border-radius: 3px; }

/* weather presets as one segmented control */
.presets.seg { display: flex; flex-wrap: nowrap; gap: 0; border: 1px solid var(--panel-border); border-radius: 12px; overflow: hidden; background: rgba(242, 232, 212, 0.04); }
.presets.seg .btn { flex: 1 1 0; min-width: 0; padding: 10px 0; border: 0; border-radius: 0; background: transparent; font-size: 12.5px; }
.presets.seg .btn + .btn { border-left: 1px solid rgba(226, 202, 158, 0.10); }
.presets.seg .btn:hover { background: rgba(226, 202, 158, 0.10); }
.presets.seg .btn.is-on { background: rgba(var(--accent-rgb), 0.2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
#panel .presets.seg .btn:focus-visible { outline-offset: -3px; }

#panel .row.buttons .btn.hero { flex: 1 1 100%; }
#panel footer p { margin: 2px 0 4px; font-size: 11px; line-height: 1.5; color: var(--muted); }

/* ---- narrow screens */
@media (max-width: 720px) {
  #panel { width: min(380px, calc(100vw - 24px)); top: 12px; right: 12px; max-height: calc(100% - 24px); min-height: 0; }
  @supports (height: 100dvh) { #panel { max-height: calc(100dvh - 24px); } }
  #panel .group.help { display: none; }   /* keyboard help is no use on a phone */
  .panes { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 600px) {
  #panel > header { min-height: 42px; }
  .tabs { margin: 4px 8px 0; }
  .tab { min-width: 50px; font-size: 10px; letter-spacing: 0.03em; }
  .btn, .sel, .txt { min-height: 34px; }   /* easier to hit with a thumb */
  .row.check { padding: 3px 0; }
}
@media (max-width: 340px) {
  /* icons only, except the open tab */
  .tab { min-width: 40px; }
  .tab span { display: none; }
  .tab[aria-selected="true"] { flex-grow: 2.4; min-width: 66px; }
  .tab[aria-selected="true"] span { display: inline; }
}
@media (prefers-reduced-motion: reduce) { #panel, #panel.collapsed, .tab, #panel .group > summary::before { transition: none; } }

/* ---- "Your body" (js/peoplepicker.js): the current person, and the grid of everyone */
.people-row > .btn { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; text-align: left; }
.people-row > .btn img { width: 26px; height: 32px; object-fit: cover; border-radius: 5px; background: rgba(0, 0, 0, 0.25); }
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.people-grid[hidden] { display: none; }
.people-head { grid-column: 1 / -1; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0; }
.person { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px 5px; border-radius: 9px; border: 1px solid var(--panel-border); background: rgba(242, 232, 212, 0.04); color: var(--text); font: inherit; font-size: 11px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: rgba(0, 0, 0, 0.25); }
.person:hover { background: rgba(226, 202, 158, 0.10); }
.person[aria-selected="true"] { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }