/* The calm redesign (Oct 16, 2026): Settings (settings/). Loaded after styles.css, so a rule here wins over the same rule there.
   Docs/Hub design standard.md has the rules (Motion; Calm and focus). Colours only from the tokens in styles.css.
   Round 2 (Oct 16, 2026): Settings looks like the iPhone's Settings app. The list is short groups of rows; each row opens a
   small page that slides in (the shared enter-push / enter-pop, app.js). Every class here starts with sg- (a Settings page). */

/* ---------- A Settings page: Back, the big title, then groups ---------- */
.sg-screen { display: flex; flex-direction: column; gap: 16px; }
.sg-top { display: flex; align-items: center; margin-bottom: -4px; }
.sg-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-left: -10px; padding: 0 14px 0 6px; border: 0; border-radius: var(--r-pill); background: none;
  color: var(--link); font: 600 1rem/1 var(--rt-body); cursor: pointer; }
.sg-back:hover { background: var(--rt-hover); }
.sg-back .ic { width: 22px; height: 22px; transform: rotate(90deg); }
body.big-text .sg-back { min-height: var(--tap-s); }

/* A group: a small title, then one rounded card of rows. */
.sg-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sg-gt { margin: 8px 6px 0; font: 700 .9375rem/1.3 var(--rt-body); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.sg-group:first-child .sg-gt { margin-top: 0; }
.sg-rows { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.sg-rows > * + * { border-top: 1px solid var(--border); }

/* A row: its drawing, its name over one quiet line, a pill when something needs a look, and a chevron. */
.sg-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 16px; border: 0; border-radius: 0; background: none; color: var(--text);
  font: inherit; text-align: left; }
button.sg-row { cursor: pointer; }
button.sg-row:hover { background: var(--rt-hover); }
button.sg-row:active { background: var(--rt-hover); }
button.sg-row:disabled { opacity: .6; cursor: default; }
.sg-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-n { font: 600 1.0625rem/1.25 var(--rt-body); color: var(--text); overflow-wrap: anywhere; }
.sg-s { font: 400 .875rem/1.35 var(--rt-body); color: var(--text-3); overflow-wrap: anywhere; }
.sg-s.is-bad { color: var(--text); }
.sg-s.is-bad::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--alert); vertical-align: 1px; }
.sg-row > .pill { flex: none; }
.sg-row > .go { flex: none; width: 18px; height: 18px; color: var(--text-3); }
.sg-row .ichip { width: 40px; height: 40px; }
.sg-row > .ib-row, .sg-row > .btn { flex: none; }
.sg-row .ib-row { display: flex; gap: 6px; }
.av.sg-av { flex: none; width: 44px; height: 44px; background: var(--pick); color: var(--on-pick); font: 800 1.1875rem/1 var(--rt-cond); letter-spacing: 0; }
.sg-add .sg-n { color: var(--link); }
.sg-add .ichip { background: none; color: var(--link); border: 1.5px solid var(--link-line); }
body.big-text .sg-row { min-height: var(--tap); }

/* Look & text: Look with its three choices, then Larger text; they are the ☰ menu's own controls. */
.sg-ctl { min-height: 64px; padding-block: 8px; }
.sg-ctl > .look, .sg-ctl > .switch { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; }
.sg-ctl > .look { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sg-ctl > .look .sw-words { flex: 1 1 auto; }
.sg-ctl > .look .seg { flex: 1 1 210px; display: flex; width: auto; gap: 2px; padding: 3px; border: 0; background: var(--surface-2); }
.sg-ctl > .look .seg button { flex: 1; min-height: 44px; padding: 0 12px; font: 600 .875rem/1 var(--rt-body); color: var(--text-2); }
.sg-ctl > .look .seg button[aria-pressed="true"] { color: var(--on-pick); }
.sg-ctl > .look .seg button .ic { display: none; }
.sg-ctl .sw-name { font: 600 1.0625rem/1.25 var(--rt-body); }

/* A switch row inside a group (the Personal links, Crew lead, the Hub helper, the Hub's switches). */
.sg-rows > .switch { min-height: 64px; padding: 8px 16px; border-radius: 0; }
.sg-rows > .switch:first-child { border-top: 0; }
.sg-rows > .switch .sw-name { font: 600 1.0625rem/1.25 var(--rt-body); }
.sg-rows > .switch .sw-what { font-size: .875rem; }

/* A person's page: the initials, their role and when they last opened the Hub, and their link's on/off switch. */
.sg-head { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.sg-head .sg-av { width: 52px; height: 52px; font-size: 1.375rem; }
.sg-head-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sg-head-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 700 1.125rem/1.2 var(--rt-body); }
.sg-head .pc-tag { padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: 700 .8125rem/1.4 var(--rt-body); letter-spacing: 0; }
.sg-head [data-opened] { white-space: normal; }
.sg-onoff { flex: none; width: auto; min-height: 44px; padding: 0; gap: 10px; border-top: 0; }
.sg-onw { display: none; font: 600 .875rem/1 var(--rt-body); color: var(--text-2); }
@media (min-width: 480px) { .sg-onw { display: inline; } }
.sg-head.is-off > :not(.sg-onoff) { opacity: .55; }

/* A form or a note on its own card (Add a person, the number editor, a link and its QR code). */
.sg-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.sg-form .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sg-form .acts .btn.small { border: 1px solid var(--btn-line); background: var(--surface); }
.sg-form .acts .btn.small.primary { border-color: transparent; background: var(--cta); color: var(--on-cta); }
.sg-form .acts .btn.link { border: 0; background: none; color: var(--text-2); }
.pp-link { gap: 10px; }
.pp-link .ib-row { justify-content: flex-end; }
.sg-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sg-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sg-more { border-radius: var(--r-box); }
.fb-callback { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.fb-callback code { min-width: 0; overflow-wrap: anywhere; }
.fb-callback .ib { margin-left: auto; }
[data-screen="set-fbkey"] .warnline, [data-screen="set-fbkey"] .meta { padding-inline: 4px; }

/* On a wide computer the Settings list is two columns of groups instead of one long column. */
@media (min-width: 900px) {
  .sg-screen { max-width: 720px; }
}
@media (min-width: 1000px) {
  [data-screen="settings"].sg-screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px 24px; max-width: 1040px; }
  [data-screen="settings"].sg-screen > .st { grid-column: 1 / -1; }
  [data-screen="settings"].sg-screen .sg-group .sg-gt { margin-top: 0; }
}

/* ---------- Reply settings, Follow-up settings, Reply guide ---------- */
[data-screen="followups-settings"], [data-screen="headhouse-settings"], [data-screen="playbook"] { display: flex; flex-direction: column; gap: 16px; }
.ts-guide-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 18px; border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ts-guide-link:hover { background: var(--rt-hover); }
.ts-guide-link .mi-ic { flex: none; width: 22px; height: 22px; color: var(--text-2); }
.ts-guide-link .mi-w { flex: 1; min-width: 0; }
.ts-guide-link .go { flex: none; color: var(--text-3); }
[data-tool] { gap: 16px; }
[data-tool] > .card { gap: 14px; }
/* A setting's note opens with its (i) beside the name. */
.ts-lab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.ts-lab > label { flex: 1; min-width: 0; margin: 0; }
.ts-info { margin-right: -6px; }
.ts-lab + input, .ts-lab + select, .ts-lab + textarea { margin-top: 2px; }
.field > .hint { margin-top: 2px; }
.acts .ib { flex: none; }
/* The Reply guide's hero: the search box and the plus that adds a row. */
.pg-bar { flex-direction: row; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; }
.pg-search { position: relative; flex: 1; min-width: 0; margin: 0; }
.pg-search input { width: 100%; }
.pg-bar .ib.solid { width: 52px; height: 52px; }
.pg-bar .ib.solid .ic { width: 24px; height: 24px; }
.ts-rows .ib-row { justify-content: flex-end; }
.ts-rows .row-name { font-weight: 600; }
@media (min-width: 900px) {
  [data-screen="followups-settings"], [data-screen="headhouse-settings"], [data-screen="playbook"] { max-width: 860px; }
  .pg-bar { padding: 12px 12px 12px 18px; }
}
/* A card that is the only one on its screen has no head of its own: its rows start at the top. */
.card.ts-bare { padding-top: 0; padding-bottom: 20px; overflow: hidden; }
.card.ts-bare > .rows.ts-rows { margin-top: 0; border-top: 0; }
.card.ts-bare > .rows.ts-rows > .row:first-child > summary { border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); }
/* On a wide computer: Follow-up settings' two cards side by side. */
@media (min-width: 1100px) {
  [data-screen="followups-settings"] { max-width: none; }
  [data-screen="followups-settings"] [data-tool] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 16px; }
}