/* Setup and settings page. Ordinary scrolling page, not the scaled stage.
   Sizes are in em so the whole page grows on a TV (18px on phones, up to 24px at 1920 wide).
   Gold is only ever the primary button of the moment; focus is a cream ring. */
#setup {
  --su-bg: #0B1422; --su-surface: #121d30; --su-raised: #18263d;
  --su-line: #24324c;      /* dividers (decorative) */
  --su-field: #5E6A85;     /* field and outline-button borders, 3:1 on navy */
  --su-err: #FFB4A8;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--su-bg); color: var(--cream);
  font: 400 20px/1.6 "Assistant", system-ui, sans-serif; /* engines without clamp() (Chromium < 79) */
  font: 400 clamp(18px, 0.6vw + 13px, 24px)/1.6 "Assistant", system-ui, sans-serif;
  box-sizing: border-box;
}
#setup[hidden] { display: none; }
#setup *, #setup *::before, #setup *::after { box-sizing: border-box; }
#setup p { margin: 0; }
#setup [hidden] { display: none !important; }

.su-wrap { max-width: 34em; margin: 0 auto; padding: 2em 1.1em 4em; }
.su-head h1 { font: 500 2.2em/1.1 "Frank Ruhl", serif; margin: 0 0 0.35em; outline: none; }
.su-lead { color: var(--grey); max-width: 30em; }
.su-progress { display: none; }

/* Steps */
.su-step { padding: 2.2em 0 0; }
.su-step + .su-step { margin-top: 2.2em; border-top: 1px solid var(--su-line); }
.su-step h2, .su-extra h2 { display: flex; align-items: baseline; gap: 0.5em; font: 500 1.5em/1.2 "Frank Ruhl", serif; margin: 0 0 0.6em; }
.su-num {
  flex: none; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%;
  border: 1.5px solid var(--small); color: var(--grey); font: 500 0.7em/1 "Frank Ruhl", serif; transform: translateY(-0.12em);
}
.su-num { position: relative; }
[data-step].done .su-num { border-color: var(--grey); background: var(--grey); color: transparent; }
[data-step].done .su-num::before { content: "✓"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; color: var(--su-bg); font: 600 1.05em/1 "Assistant", sans-serif; }
.su-optional { font: 400 0.6em "Assistant"; color: var(--small); }
.su-text { color: var(--grey); max-width: 32em; }
.su-quiet { color: var(--small); margin-top: 0.6em !important; }
.su-hint { color: var(--small); font-size: 0.89em; margin-top: 0.5em !important; max-width: 32em; }
.su-status { font-size: 0.94em; color: var(--grey); margin-top: 0.4em !important; min-height: 0; }
.su-status:empty, .su-err:empty { display: none; }
.su-status.ok { color: var(--cream); }
.su-status.ok::before { content: "✓ "; }
.su-status.busy { color: var(--small); }
.su-err { color: var(--su-err); font-size: 0.94em; margin-top: 0.4em !important; }
.su-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fields */
.su-label { display: block; font-weight: 600; margin: 1.1em 0 0.35em; padding: 0; color: var(--cream); }
.su-input {
  display: block; width: 100%; min-height: 2.75em; padding: 0.55em 0.8em; margin: 0;
  font: 400 1em/1.4 "Assistant", sans-serif; color: var(--cream);
  background: var(--su-surface); border: 1.5px solid var(--su-field); border-radius: 0.6em;
}
.su-input::placeholder { color: #8C8678; opacity: 1; }
textarea.su-input { resize: vertical; min-height: 5em; }
select.su-input { appearance: none; -webkit-appearance: none; padding-right: 2.4em;
  background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(135deg, var(--grey) 50%, transparent 50%);
  background-position: calc(100% - 1.2em) 55%, calc(100% - 0.85em) 55%; background-size: 0.35em 0.35em; background-repeat: no-repeat; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend.su-label { float: left; width: 100%; }
legend.su-label + * { clear: both; }

/* Focus: always visible, cream ring with a navy gap so it reads on gold buttons too.
   Engines without :focus-visible (Chromium < 86: 2019-2021 TVs) drop any rule that names it, so
   the ring is set on :focus and only the "hide it after a mouse click" rule uses :focus-visible. */
#setup :focus, #setup .su-input:focus { outline: 3px solid var(--cream); outline-offset: 3px; }
#setup :focus:not(:focus-visible) { outline: none; }
#setup .su-input:focus { border-color: var(--cream); outline: 3px solid var(--cream); outline-offset: 2px; }
#setup h1:focus, #setup h2:focus { outline: none; }

/* Buttons */
.su-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 2.75em; padding: 0.5em 1.2em; margin: 0; border-radius: 0.65em;
  font: 600 1em/1.2 "Assistant", sans-serif; cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.su-primary { background: var(--gold); color: #2a1d05; border: 1.5px solid var(--gold); }
.su-primary:hover { background: #F6D490; }
.su-secondary { background: transparent; color: var(--cream); border: 1.5px solid var(--su-field); }
.su-secondary:hover { border-color: var(--grey); background: var(--su-surface); }
.su-plain { background: transparent; color: var(--grey); border: 1.5px solid transparent; text-decoration: underline; text-underline-offset: 0.2em; }
.su-plain:hover { color: var(--cream); }
.su-btn:disabled { opacity: 0.6; cursor: default; }
.su-small { min-height: 2.45em; padding: 0.35em 0.9em; font-size: 0.94em; }
.su-big { font-size: 1.1em; padding: 0.6em 1.6em; }
.su-actions { display: flex; flex-wrap: wrap; gap: 0.75em; margin-top: 1.1em; align-items: center; }

/* City results */
.su-cities { list-style: none; margin: 0.4em 0 0; padding: 0; }
.su-cities li:first-child .su-city, .su-cities li:first-child.su-city-none { border-radius: 0.6em 0.6em 0 0; }
.su-cities li:last-child .su-city, .su-cities li:last-child.su-city-none { border-radius: 0 0 0.6em 0.6em; }
.su-cities li:only-child .su-city, .su-cities li:only-child.su-city-none { border-radius: 0.6em; }
.su-cities:empty { display: none; }
.su-cities li + li { border-top: 1px solid var(--su-line); }
.su-city { display: block; width: 100%; min-height: 2.75em; padding: 0.55em 0.8em; text-align: left; border: 0; background: var(--su-surface); color: var(--cream); font: 400 1em/1.35 "Assistant"; cursor: pointer; }
.su-city:hover { background: var(--su-raised); }
#setup .su-city:focus-visible { outline-offset: -3px; position: relative; z-index: 1; }
.su-city-none { padding: 0.6em 0.8em; color: var(--small); background: var(--su-surface); }

/* °C / °F */
.su-units { margin-top: 0.4em; }
.su-chips { display: flex; flex-wrap: wrap; gap: 0.6em; }
.su-chip { display: flex; position: relative; align-items: center; gap: 0.55em; min-height: 2.75em; padding: 0.4em 1em 0.4em 0.8em; border: 1.5px solid var(--su-field); border-radius: 0.65em; cursor: pointer; font-weight: 600; }
/* The picked chip and option: .is-checked / .is-focus are set by setup.js (suMarkChoices) for
   engines without :has(); the :has() rules stay separate so those engines keep the class rules. */
.su-chip.is-checked { border-color: var(--cream); background: var(--su-surface); }
.su-chip.is-focus { outline: 3px solid var(--cream); outline-offset: 3px; }
.su-chip:has(:checked) { border-color: var(--cream); background: var(--su-surface); }
.su-chip:has(:focus-visible) { outline: 3px solid var(--cream); outline-offset: 3px; }

/* Radios (custom dot, same everywhere) */
#setup input[type=radio] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 1.15em; height: 1.15em; border-radius: 50%; border: 2px solid var(--grey); background: transparent; display: inline-grid; place-items: center;
}
#setup input[type=radio]:checked { border-color: var(--cream); }
#setup input[type=radio]:checked::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--cream); }
#setup input[type=radio]:focus { outline: none; } /* the chip or option around it shows the ring */

/* Step 3: the times, set like the frame's own Shabbat block */
.su-times { margin-top: 1.2em; padding: 1.2em 1.3em 1.3em; background: var(--su-surface); border-radius: 1em; }
.su-week { color: var(--grey); font-weight: 600; }
.su-times-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-top: 0.8em; }
.su-time { display: flex; flex-direction: column; min-width: 0; }
.su-time-label { color: var(--grey); }
.su-time-big { font: 500 3em/1.05 "Frank Ruhl", serif; color: var(--cream); white-space: nowrap; margin: 0.08em 0 0.12em; }
.su-ampm { font: 600 0.3em "Assistant"; color: var(--grey); margin-left: 0.3em; vertical-align: 0.15em; }
.su-time-how { color: var(--small); font-size: 0.89em; line-height: 1.35; }
.su-question { font-weight: 600; font-size: 1.1em; margin-top: 1.1em !important; }
.su-confirmed { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 1em; margin-top: 0.9em; }
.su-confirmed p { font-weight: 600; }
.su-options { margin-top: 0.6em; }
.su-option {
  display: grid; grid-template-columns: auto 5.6em 1fr 1.2em; align-items: center; column-gap: 0.8em;
  min-height: 2.9em; padding: 0.4em 0.8em; margin-top: 0.4em; border: 2px solid var(--su-line); border-radius: 0.65em; cursor: pointer;
}
/* The picked time: gold border, a faint gold fill and a ✓, so it can't be missed (class rule for
   engines without :has(); the :has() rule repeats it separately). */
.su-option::after { content: ""; font: 700 1.1em/1 "Assistant", sans-serif; color: var(--gold); text-align: right; }
.su-option.is-checked { border-color: var(--gold); background: rgba(242, 200, 119, 0.1); }
.su-option.is-checked::after { content: "✓"; }
.su-option.is-checked .su-opt-how { color: var(--cream); }
.su-option.is-checked input[type=radio] { border-color: var(--gold); }
.su-option.is-checked input[type=radio]::before { background: var(--gold); }
.su-option.is-focus { outline: 3px solid var(--cream); outline-offset: 2px; }
.su-option:has(:checked) { border-color: var(--gold); background: rgba(242, 200, 119, 0.1); }
.su-option:has(:focus-visible) { outline: 3px solid var(--cream); outline-offset: 2px; }
.su-opt-time { font: 500 1.3em/1 "Frank Ruhl", serif; white-space: nowrap; }
.su-opt-how { color: var(--grey); line-height: 1.3; }
#timesPick > .su-btn { margin-top: 1.2em; }
#timesPick > .su-text { margin-top: 1em; }

/* Step 4: shuls */
.su-shuls { list-style: none; margin: 0.6em 0 0; padding: 0; }
.su-shul { display: flex; align-items: center; gap: 1em; padding: 0.9em 0; border-bottom: 1px solid var(--su-line); }
.su-shul:first-child { border-top: 1px solid var(--su-line); }
.su-shul-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.su-shul-name { font-weight: 600; font-size: 1.06em; }
.su-shul-meta { color: var(--grey); }
.su-shul-meta:empty { display: none; }
.su-shul-status { color: var(--small); font-size: 0.89em; margin-top: 0.1em; }
.su-shul-status.is-on { color: var(--cream); font-weight: 600; }
.su-shul .su-btn { flex: none; min-width: 7.2em; }
.su-add { margin-top: 1.1em; }
.su-add span { font-size: 1.2em; line-height: 1; }
.su-addform { margin-top: 0.4em; padding-top: 0.2em; }

/* Step 5 */
.su-finish .su-actions { margin-top: 0.9em; }
.su-finish .su-err { margin-top: 0.8em !important; }
.su-install { margin-bottom: 1.4em; }
.su-install .su-hint { margin-top: 0.4em !important; }
#timesErr { margin-top: 0.9em !important; font-weight: 600; }

/* Shabbat: the page shows only this (setup.js adds .offline) */
.su-offline { display: none; }
#setup.offline .su-offline { display: block; padding-top: 2.2em; }
#setup.offline .su-main > :not(.su-offline):not(.su-foot) { display: none !important; }
#setup.offline .su-progress { display: none; }
.su-offline h2 { font: 500 1.5em/1.2 "Frank Ruhl", serif; margin: 0 0 0.6em; outline: none; }

/* iPhone / iPad in Safari: add to the Home Screen first */
.su-ios { margin-top: 2em; padding: 1.3em 1.3em 0.9em; background: var(--su-surface); border-radius: 1em; }
.su-ios h2 { font: 500 1.4em/1.2 "Frank Ruhl", serif; margin: 0 0 0.5em; outline: none; }
.su-taps { list-style: none; margin: 1em 0 0.4em; padding: 0; }
.su-taps li { display: flex; align-items: flex-start; gap: 0.75em; padding: 0.45em 0; }
.su-taps b { font-weight: 600; color: var(--cream); }
.su-tap-n {
  flex: none; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--cream); color: var(--su-bg); font: 600 0.9em/1 "Assistant", sans-serif; margin-top: 0.05em;
}
.su-share { width: 0.85em; height: 1em; vertical-align: -0.12em; margin: 0 0.1em; color: var(--cream); }
.su-continue { margin-left: -1.2em; }

/* Settings: delete this frame's data (quiet, never gold) */
.su-delete { margin-top: 3em; padding-top: 1.6em; }
.su-danger { background: transparent; color: var(--su-err); border: 1.5px solid rgba(255, 180, 168, 0.45); }
.su-danger:hover { border-color: var(--su-err); background: rgba(255, 180, 168, 0.08); }
.su-danger-solid { border-color: var(--su-err); }
#delConfirm .su-text { color: var(--cream); }

.su-foot { margin-top: 3em !important; padding-top: 1.2em; border-top: 1px solid var(--su-line); font-size: 0.89em; }
.su-foot a { color: var(--small); text-underline-offset: 0.2em; display: inline-block; padding: 0.4em 0; }
.su-foot a:hover { color: var(--grey); }

/* Notes and tips (settings only) */
.su-extra { margin-top: 3em; padding-top: 2.2em; border-top: 1px solid var(--su-line); }
.su-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1em; margin-top: 0.9em; }
.su-code { font: 500 1.5em/1 "Frank Ruhl", serif; letter-spacing: 0.08em; }
.su-notes { list-style: none; margin: 1em 0 0; padding: 0; }
.su-notes:empty { display: none; }
.su-notes li { display: flex; align-items: center; gap: 1em; padding: 0.7em 0; border-bottom: 1px solid var(--su-line); }
.su-notes li:first-child { border-top: 1px solid var(--su-line); }
.su-note-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.su-note-meta { color: var(--small); font-size: 0.89em; }
.su-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1em; align-items: end; }
.su-check { display: flex; align-items: center; gap: 0.6em; min-height: 2.75em; font-weight: 600; cursor: pointer; }
.su-check input { width: 1.25em; height: 1.25em; accent-color: var(--cream); margin: 0; }
.su-tips summary { cursor: pointer; font: 500 1.3em/1.3 "Frank Ruhl", serif; min-height: 2.2em; display: flex; align-items: center; gap: 0.5em; list-style: none; }
.su-tips summary::-webkit-details-marker { display: none; }
.su-tips summary::before { content: "+"; font: 600 0.9em "Assistant"; color: var(--grey); width: 1em; }
.su-tips[open] summary::before { content: "–"; }
.su-tips ul { margin: 0.6em 0 0; padding-left: 1.2em; color: var(--grey); }
.su-tips li + li { margin-top: 0.4em; }

/* The ask sheet: bottom sheet on phones, centred panel on bigger screens */
html.su-sheet-open #setup { overflow: hidden; }
.su-sheet-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; background: rgba(3, 7, 14, 0.72); display: flex; align-items: flex-end; justify-content: center; }
.su-sheet {
  width: 100%; max-width: 34em; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--su-surface); border-radius: 1.2em 1.2em 0 0; padding: 1.6em 1.3em 1.6em;
  box-shadow: 0 -0.5em 2em rgba(0, 0, 0, 0.4);
}
.su-sheet h2 { font: 500 1.6em/1.2 "Frank Ruhl", serif; margin: 0 0 0.5em; outline: none; }
.su-sheet .su-input { background: var(--su-bg); }
.su-cc { margin-top: 0.6em !important; color: var(--grey); }
.su-label-inline { font-weight: 600; color: var(--cream); margin-right: 0.5em; }
.su-sheet-actions { display: grid; gap: 0.7em; margin-top: 1.2em; }
.su-sheet-actions .su-btn { width: 100%; }
/* TV: no email app. The message is shown large to send from a phone (setup.js adds .is-tv). */
.su-tv-only { display: none !important; }
.su-sheet.is-tv .su-tv-only { display: block !important; }
.su-sheet.is-tv .su-btn.su-tv-only { display: inline-flex !important; }
.su-sheet.is-tv .su-mail-only { display: none !important; }
.su-sheet.is-tv .su-sheet-actions .su-secondary { grid-column: 1 / -1; }
.su-tv-note { font-weight: 600; font-size: 1.1em; color: var(--cream); margin: 0 0 0.2em !important; }
.su-tvmsg { margin-top: 1.2em; padding: 1em 1.1em; background: var(--su-bg); border-radius: 0.8em; font-size: 1.12em; line-height: 1.45; }
.su-tvmsg p + p { margin-top: 0.35em !important; }
.su-tvmsg .su-label-inline { display: inline-block; min-width: 4.6em; color: var(--grey); font-weight: 600; }
#tvTo { font-weight: 600; word-break: break-all; }
#tvTo.su-tv-missing { font-weight: 400; color: var(--grey); word-break: normal; }
.su-tvmsg-body { white-space: pre-wrap; margin-top: 0.8em !important; padding-top: 0.8em; border-top: 1px solid var(--su-line); }
@media (prefers-reduced-motion: no-preference) {
  .su-sheet { animation: su-up 0.25s ease-out; }
  @keyframes su-up { from { transform: translateY(1.5em); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Phones */
@media (max-width: 480px) {
  .su-wrap { padding: 1.6em 1.1em 3em; }
  .su-head h1 { font-size: 2em; }
  .su-time-big { font-size: 2.45em; }
  .su-times { padding: 1em 1em 1.1em; }
  /* No room for a ✓ column: the ✓ becomes a gold badge on the picked option's top-right border. */
  .su-option { grid-template-columns: auto 5.1em 1fr; column-gap: 0.6em; position: relative; }
  .su-option::after { position: absolute; }
  .su-option.is-checked::after {
    top: -0.55em; right: 0.7em; width: 1.4em; height: 1.4em; display: grid; place-items: center;
    background: var(--gold); color: var(--su-bg); border-radius: 50%; font-size: 0.8em;
  }
  .su-shul .su-btn { min-width: 0; padding: 0.5em 0.9em; }
  .su-row { grid-template-columns: 1fr; }
  .su-actions .su-primary.su-big, #timesAsk .su-btn { flex: 1 1 100%; }
}

/* Tablets and up: the sheet becomes a centred panel */
@media (min-width: 700px) {
  .su-sheet-back { align-items: center; padding: 2em; }
  .su-sheet { border-radius: 1.2em; max-height: 88vh; padding: 2em 2em 1.8em; }
  .su-sheet-actions { grid-template-columns: 1fr 1fr; }
  .su-sheet-actions .su-primary { grid-column: 1 / -1; }
  .su-sheet-actions .su-plain { grid-column: 1 / -1; justify-self: center; width: auto; min-width: 8em; }
}

/* Wide screens and TVs: title and progress on the left, the steps on the right */
@media (min-width: 1200px) {
  .su-wrap { max-width: 64em; display: grid; grid-template-columns: 22em minmax(0, 34em); gap: 0 5em; justify-content: center; padding: 3em 2em 5em; }
  .su-head { position: sticky; top: 3em; align-self: start; padding-top: 2.2em; }
  .su-progress { display: block; list-style: none; margin: 2.2em 0 0; padding: 0; }
  .su-progress li { display: flex; align-items: center; gap: 0.7em; color: var(--small); padding: 0.35em 0; }
  .su-progress li.done { color: var(--grey); }
  .su-progress .su-num { transform: none; font-size: 0.85em; }
  #setup.editing .su-progress { display: none; }
}