/* Settings (js/views/settings.js, #/settings), Sign in (js/views/login.js) and Connect PeerEdge
   (js/views/connect.js). Shared tokens and components are in /styles.css (docs/ui-notes-v2.md).
   Every class made here starts with "settings-"; none of them is in the interim block of
   styles.css, so these screens look the same before and after that block goes. Sign in also
   keeps three classes as hooks for test/e2e/pwa.test.js: "login" on its root, "lead" on the
   line that counts the recovery codes left, and "codes" on the list of codes. The rules on
   .settings-login and .settings-login-intro below set every property the interim .login and
   .lead rules touch, so those hooks change nothing on screen. Plain ASCII only. */

/* ------------------------------------------------------------ Settings: the list */
/* #/settings is two short lists: the everyday groups, then For engineers. Each row is a link to
   its group's page: a status lamp where the state is a status (the words say it too), the
   group's name, its state in words, and a chevron. Phones put the state under the name. */
.settings-lists { display: grid; gap: 16px; max-width: 56rem; }
.settings-lists > .panel + .panel { margin-top: 0; }
@media (min-width: 720px) { .settings-lists { gap: 24px; } }
.settings-list-panel { padding-top: 6px; padding-bottom: 6px; }
@media (min-width: 720px) { .settings-list-panel { padding-top: 8px; padding-bottom: 8px; } }
.settings-list-panel > .panel-head { margin: 10px 0 6px; }
.settings-list { margin: 0; padding: 0; list-style: none; }
.settings-list > li + li { border-top: 1px solid var(--rule); }
.settings-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 12px;
  grid-template-areas: "lamp name chev" ". state chev";
  align-items: center;
  gap: 2px 14px;
  min-height: 64px;
  margin: 0 -8px;
  padding: 11px 12px 11px 8px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.settings-row-lamp { display: inline-flex; grid-area: lamp; }
.settings-row-name { grid-area: name; font-weight: 700; line-height: 1.3; }
.settings-row-state { grid-area: state; min-width: 0; color: var(--slate); font-size: 14px; line-height: 1.35; }
.settings-row::after {
  content: "";
  grid-area: chev;
  justify-self: end;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: rotate(-45deg);
}
.settings-row:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.settings-row:hover .settings-row-name { color: var(--accent); }
.settings-row:hover::after { border-color: var(--accent); }
.settings-row:focus-visible { outline-offset: -2px; }
@media (min-width: 720px) {
  .settings-row {
    grid-template-columns: 10px minmax(11em, 15em) minmax(0, 1fr) 12px;
    grid-template-areas: "lamp name state chev";
    gap: 0 16px;
    min-height: 56px;
  }
  .settings-row-state { font-size: 16px; }
}

/* A group's own page: one panel. Its heading takes the focus when it opens. */
.settings-group { scroll-margin-top: 76px; }
@media (min-width: 960px) { .settings-group { scroll-margin-top: 96px; } }

/* The Save of a group's one form, set apart from the boxes above it. */
.actions.settings-save { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }

/* Notes and lines under a box. */
.settings-note { max-width: 46em; margin: 12px 0 0; }
.settings-note + .settings-note { margin-top: 4px; }
.hint.settings-says { margin: 8px 0 0; }

/* Mode: the two modes side by side. The one in use has a line in its own colour and "On now";
   the other holds the button that switches to it. */
.settings-modes { display: grid; gap: 12px; }
@media (min-width: 720px) { .settings-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.settings-mode { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.settings-mode-now { padding: 15px; border-width: 2px; }
.settings-mode-test.settings-mode-now { border-color: var(--test); }
.settings-mode-live.settings-mode-now { border-color: var(--ok); }
.settings-mode-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.settings-mode-name .whatis { margin-left: -8px; }
.settings-mode-name .badge { margin-left: auto; font-family: var(--font-body); }
.settings-mode-text { max-width: 36em; margin: 0; color: var(--slate); }
.settings-mode .actions { margin-top: 14px; }
.hint.settings-mode-hint { margin: 8px 0 0; }

/* Rotation limits and timer: Sippy vendors and PeerEdge trunk groups, then Count attempts over. */
.settings-switches { display: grid; gap: 24px; }
@media (min-width: 1100px) { .settings-switches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.settings-sw { min-width: 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.settings-sw > h3 { display: flex; align-items: center; margin: 0; font-size: 16px; }
.settings-sw-now { max-width: 40em; margin: 2px 0 12px; color: var(--slate); font-size: 14px; }
.settings-range { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); }
.settings-range legend { display: flex; align-items: center; margin: 0 0 4px; font-size: 16px; }
.settings-range .settings-note { margin: 0 0 8px; font-weight: 700; }
.settings-range-choices { gap: 0 24px; }
@media (min-width: 720px) { .settings-range-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A checkbox and the values that belong to it, shown while it is ticked. */
.settings-opt { margin: 0 0 8px; }
.settings-opt-body { margin: 0 0 12px; padding: 6px 0 6px 32px; }
.settings-opt:has(> .check input:not(:checked)) > .settings-opt-body { display: none; }
.settings-opt-body > .field:last-child, .settings-opt-body > .settings-asr > .field:last-child { margin-bottom: 0; }

/* "More settings for Sippy vendors" and the other closed parts. */
.settings-extra { margin: 0 0 8px; }
.settings-extra:last-child, .settings-extras > .settings-extra:last-child { margin-bottom: 0; }
.settings-extra > div > :first-child { margin-top: 0; }
.settings-extra .settings-note + .settings-steplist { margin-top: 12px; }
.settings-extras { margin-top: 12px; }

/* Boxes keep a width that fits what goes in them (the shared input rule would stretch them). */
.settings-group .w-short { max-width: 16em; }
.settings-group .w-medium { max-width: 24em; }

/* A label with its "What is this?" beside it. */
.settings-label-row { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 6px; }
.settings-label-row > label { font-weight: 700; }

/* Two boxes side by side where there is room. */
.settings-two { display: grid; gap: 0 24px; }
@media (min-width: 720px) { .settings-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Steps that are a real sequence, numbered like keypad keys (as in the Overview welcome). */
.settings-steplist { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.settings-steplist > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.settings-step-n {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.settings-step-text { min-width: 0; padding-top: 3px; }
.settings-step-text .bullets { margin-top: 4px; }

/* Alerts. */
.settings-alerts .input-unit > input { flex-basis: 6em; }
.settings-alerts #al-zone { width: 100%; max-width: 16em; }
.settings-two.settings-times { max-width: 30em; gap: 16px 24px; }
.settings-times .field { margin-bottom: 0; }
.field.settings-quiet { margin-bottom: 0; }
/* Alerts, Sounds: kept on this device, under a rule as Count attempts over is. The switch is the
   one the alert rules use (css/alerts.css), at the size of a label here. */
.settings-sounds { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); }
.settings-sounds > h3 { margin: 0 0 4px; font-size: 16px; }
.settings-sounds .alerts-switch { font-size: 16px; }
.settings-sounds .hint { max-width: 46em; margin: 2px 0 0; }
.settings-sounds .actions { margin-top: 12px; }
.settings-sounds .alert { margin: 12px 0 0; }

/* PeerEdge and Telegram: the state in a badge, then what to do. */
.settings-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.settings-group .summary { margin-bottom: 16px; }
.actions.settings-after-list { margin-top: 0; }
.settings-codebox { margin: 16px 0 0; padding: 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--mist); }
.settings-codebox > p + p { margin-top: 6px; }
.settings-codebox > .settings-steplist { margin: 12px 0 0; }
.settings-codebox > .actions { margin-top: 12px; }
.settings-everychange { margin-top: 12px; }

/* Appearance: Light or dark, then Show times in, each three choices side by side where there
   is room. */
.settings-look legend { margin-bottom: 4px; font-size: 16px; }
.settings-zone { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.settings-zone .field { margin-bottom: 0; }
.settings-zone .hint { max-width: 46em; margin: 8px 0 0; }
@media (min-width: 720px) { .settings-look .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; } }

/* Import. */
.settings-import { margin-top: 16px; }
.settings-import textarea { max-width: 44em; }
.settings-import-report { max-width: 44em; margin-top: 16px; }
.settings-import-report .plain-list > li + li { margin-top: 2px; }
.settings-import-check { margin-top: 8px; font-weight: 700; }

/* Sign-in and devices, and the parts of Advanced. */
.settings-you { gap: 24px; }
.settings-sub { min-width: 0; }
.settings-sub h3 { margin: 0 0 6px; font-size: 16px; }
.settings-sub p + p, .settings-sub section > p + p { margin-top: 6px; }
.settings-sub section + section { margin-top: 24px; }
.settings-ways { margin: 12px 0 0; padding: 0; list-style: none; }
.settings-ways > li + li { margin-top: 12px; }
.settings-ways .hint { margin: 6px 0 0; }
/* Advanced: Usage counts and Monitoring are one form; Import and the backup follow, each set
   apart by a rule. */
.settings-advanced .settings-sub + .settings-sub { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
.settings-advanced .settings-sub > p, .settings-part > p { max-width: 44em; }
.settings-advanced .settings-sub > .field:first-of-type { margin-top: 16px; }
.settings-sub.settings-part { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.settings-part > p + .settings-steplist { margin-top: 12px; }
.settings-part > form { margin-top: 16px; }
.settings-reportview { margin: 16px 0 20px; }
.settings-reportview > legend { margin-bottom: 8px; }

/* ------------------------------------------------------------------ Sign in */
/* No app shell on this screen: the page centres itself, the mark and the name sit on top, then
   what the app does, then one white panel with one main action. */
body.signed-out main:has(> .settings-login) { margin-right: auto; margin-left: auto; }
.settings-login { max-width: 460px; margin: 0 auto; padding: 8px 0 0; }
@media (min-width: 720px) { .settings-login { padding-top: 8vh; } }
.settings-login-brand { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--ink); }
.settings-login-brand .logo-mark { display: block; flex: none; width: 40px; height: 40px; }
.settings-login-name { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; }
.settings-login-about { max-width: 26em; margin: 12px 0 20px; color: var(--ink); font-size: 18px; line-height: 1.45; }
.settings-login-panel { padding: 20px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
@media (min-width: 720px) { .settings-login-panel { padding: 28px 32px 32px; } }
.settings-login-brand + .settings-login-panel { margin-top: 20px; }
.settings-login-panel > h1 { margin: 0 0 8px; font-size: 28px; }
.settings-login-intro { margin: 0 0 20px; color: var(--ink); font-size: 18px; line-height: 1.45; }
.settings-login-panel > p + p { margin-top: 8px; }
.settings-login .btn.primary, .settings-login-go { width: 100%; min-width: 0; }
.settings-login-h2 { margin: 28px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-size: 16px; }
.settings-login-ways { margin: 0; padding: 0; list-style: none; }
.settings-login-ways > li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.settings-login-ways > li:last-child { padding-bottom: 0; border-bottom: 0; }
.settings-login-ways .btn { width: 100%; }
.settings-login-ways .hint { margin: 8px 0 0; }
.settings-login-error { margin: 16px 0 0; padding: 12px 16px; border-radius: 8px; background: var(--bad-pale); }
.settings-login-error:empty { display: none; }
.settings-login-error p + p { margin-top: 4px; }
.settings-login-back { margin: 12px 0 0; }
.settings-login-next { margin: 24px 0 12px; }
.settings-login .settings-login-codes { grid-template-columns: minmax(0, 1fr); margin: 16px 0 0; }
.settings-login-codes > li { padding: 10px 6px; font-size: 16px; }
@media (min-width: 480px) { .settings-login .settings-login-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.settings-login .settings-steplist { margin-bottom: 20px; }

/* ------------------------------------------------------------ Connect PeerEdge */
.settings-connect-error { margin: 0 0 16px; }
.settings-connect { display: grid; gap: 16px; }
.settings-connect > .panel + .panel { margin-top: 0; }
.settings-connect .settings-steplist { margin: 0; }
@media (min-width: 720px) { .settings-connect { gap: 24px; } }
@media (min-width: 1200px) {
  .settings-connect {
    grid-template-columns: minmax(0, 474px) minmax(0, 1fr);
    grid-template-areas: "page steps" "page tools";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .settings-connect-page { grid-area: page; }
  .settings-connect-steps { grid-area: steps; }
  .settings-connect-tools { grid-area: tools; }
}

/* The PeerEdge page, drawn from the frames the server sends. A tap shows a small ring. */
.settings-connect-screen {
  position: relative;
  max-width: 430px;
  min-height: 220px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--mist);
}
.settings-connect-screen img { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.settings-connect-screen:not(.has-frame) img { position: absolute; visibility: hidden; }
.settings-connect-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; color: var(--slate); text-align: center; }
.settings-connect-screen.has-frame .settings-connect-wait { display: none; }
.settings-connect-tap {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid var(--accent);
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.settings-connect-tap.show { opacity: 1; transition: none; }

/* Typing tools. */
.settings-connect-type > label { display: block; margin: 0 0 4px; font-weight: 700; }
.settings-connect-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 30em; }
.settings-connect-label { margin: 20px 0 6px; font-weight: 700; }
.settings-connect-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 30em; }
.settings-connect-keys .btn { padding: 0 4px; }
.settings-connect-end { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 30em; margin-top: 16px; }
.settings-connect-end .btn { padding: 4px 10px; line-height: 1.25; white-space: normal; }
.hint.settings-connect-hint { margin: 8px 0 0; }

/* Rotation sounds (js/sound-dialog.js): the window opened from Rotation, Settings and a vendor's
   page. On or off for this device, the sound for everyone as a list of choices with Play, and
   each vendor's own sound. */
dialog.sound-dlg { width: min(580px, calc(100vw - 32px)); }
.sound-dlg-body > .alerts-switch { margin-top: 2px; }
.sound-dlg-body > .hint { margin-top: 2px; }
.sound-dlg-set { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.sound-dlg-set legend { margin: 0 0 8px; padding: 0; font-size: 15px; font-weight: 700; }
.sound-dlg-set .hint { margin: 8px 0 0; }
.sound-dlg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.sound-dlg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 2px 6px 2px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
}
.sound-dlg-item.is-on { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.sound-dlg-pick { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; min-height: 42px; font-weight: 700; cursor: pointer; }
.sound-dlg-pick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sound-dlg-play.btn { flex: none; min-height: 32px; padding: 0 10px; gap: 6px; font-size: 13px; }
.sound-dlg-own { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--rule); }
.sound-dlg-own > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.sound-dlg-own > summary::-webkit-details-marker { display: none; }
.sound-dlg-own > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.sound-dlg-own[open] > summary::before { margin-top: -4px; transform: rotate(45deg); }
.sound-dlg-own > summary:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 0.18em; }
.sound-dlg-table { width: 100%; margin-top: 4px; border-collapse: collapse; font-size: 14px; }
.sound-dlg-table th, .sound-dlg-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.sound-dlg-table tr:last-child > * { border-bottom: 0; }
.sound-dlg-name { display: block; font-weight: 700; overflow-wrap: anywhere; }
.sound-dlg-where { display: block; color: var(--slate); font-size: 12px; font-weight: 400; }
.sound-dlg-table select { width: 100%; min-width: 10.5em; }
.sound-dlg-row-play { width: 1%; padding-right: 0; white-space: nowrap; }
@media (max-width: 480px) {
  .sound-dlg-list { grid-template-columns: 1fr; }
  .sound-dlg-table th { width: 40%; }
}

/* The Rotation toolbar's button for it: the speaker and the sound in use, or Sound off. */
.rotation-sound-btn .glyph { flex: none; }
.rotation-sound-btn.is-off { color: var(--slate); }
/* A vendor's page: its sound, chosen in place. */
.rotation-sound-panel .rotation-sound-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rotation-sound-panel select { max-width: 16em; }

/* When numbers change (Settings, and Change settings on a vendor's page): one way out of two, at
   an attempts limit or on a timer, each with its one number. The way not chosen is dimmed;
   typing in it chooses it. On Settings each switch is a card with its name in its own colour. */
.settings-whens { display: grid; gap: 14px; }
@media (min-width: 900px) { .settings-whens { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }
.settings-when { min-width: 0; margin: 0; padding: 12px 16px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
/* The name sits inside the card, not on its border. */
.settings-when-name { float: left; width: 100%; margin: 0; padding: 0; font-size: 16px; font-weight: 700; }
.settings-when-name + * { clear: both; }
.settings-when.sw-0 .settings-when-name { color: var(--sw-0); }
.settings-when.sw-1 .settings-when-name { color: var(--sw-1); }
.settings-when.sw-pe .settings-when-name { color: var(--sw-pe); }
:root[data-theme="dark"] .settings-when .settings-when-name { color: var(--ink); }
.settings-when-sub { margin: 2px 0 4px; color: var(--slate); font-size: 14px; }
.settings-when .settings-note, .rotation-when .settings-note { margin: 6px 0 2px; font-size: 14px; }
.settings-when-opt { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding-top: 8px; font-weight: 700; cursor: pointer; }
.settings-when-opt input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.settings-when-text small { display: block; margin-top: 1px; color: var(--slate); font-size: 13px; font-weight: 400; line-height: 1.35; }
.settings-when-value { margin: 4px 0 2px 30px; transition: opacity 120ms ease; }
.settings-when-value input { width: 8.5em; }
.settings-when-every { color: var(--slate); }
.settings-when-opt:has(input:not(:checked)) + .settings-when-value { opacity: 0.5; }
.settings-when-opt:has(input:not(:checked)) + .settings-when-value:focus-within { opacity: 1; }
.rotation-when { margin: 0 0 8px; padding: 0; border: 0; }
.rotation-when > legend { margin-bottom: 2px; font-weight: 700; }
.settings-more-parts { display: grid; gap: 8px; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .settings-when-value { transition: none; } }