/* ============================================================================
   settings.css — shared by settings.html and privacy.html.

   These two pages were one page ("Privacy & account") that carried four
   unrelated jobs. Splitting them put the choices a reader changes often
   (appearance, account, support) on Settings, and the one decision that
   deserves its own room — where your reflections are allowed to live — on
   Privacy, linked from Settings.
   ========================================================================== */

/* ---------- setting groups ------------------------------------------------- */

.set-stack { display: grid; gap: 1.1rem; max-width: 44rem; }

.set-group {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--surface);
}

.set-group > h2 {
  font-size: 1.16rem;
  margin: 0 0 0.3rem;
}

.set-group > .sub {
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 1.15rem;
}

/* A whole group that is itself a link onward — Privacy, from Settings. The
   chevron and the hover lift say "this opens somewhere else", which a panel
   full of controls must never say. */
.set-link {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.set-link:hover {
  border-color: var(--hairline-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.set-link__body { flex: 1 1 auto; }
.set-link__body h2 { font-size: 1.16rem; margin: 0 0 0.3rem; }
.set-link__body p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.6; margin: 0; }
.set-link__go { flex-shrink: 0; color: var(--purple); }
.set-link:hover .set-link__go { transform: translateX(2px); }
.set-link__go { transition: transform 200ms var(--ease-out); }

/* ---------- prayer text (ADR-142) ------------------------------------------
   The devotion card's own size picker (styles.css `.dv-size`), and one line of
   preview in the scripture face at the reader's size — `--prayer-size`, the
   same token every card's body reads, so the preview IS what a card will draw. */
.set-prayer .dv-size { max-width: 24rem; }
.set-prayer__preview {
  margin-top: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--prayer-size);
  line-height: 1.15;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- choice cards (appearance, storage tier) ----------------------- */

.tier-list { display: grid; gap: 0.7rem; }

.tier-card {
  display: flex; gap: 1rem; align-items: flex-start; text-align: left;
  padding: 1.05rem 1.2rem; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--surface);
  transition: border-color 180ms, box-shadow 180ms;
  font: inherit; color: inherit; width: 100%;
}
.tier-card:hover { border-color: var(--purple); }
.tier-card.is-active,
.tier-card[aria-checked="true"] { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }

.tier-card .radio {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.2rem;
  border-radius: 50%; border: 2px solid var(--ink-3);
  transition: border-color 180ms;
}
.tier-card.is-active .radio,
.tier-card[aria-checked="true"] .radio {
  border-color: var(--purple);
  background: radial-gradient(circle at center, var(--purple) 0 45%, transparent 50%);
}

.tier-card h3 { font-size: 1rem; margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.5rem; }
.tier-card h3 svg { width: 16px; height: 16px; color: var(--purple); flex-shrink: 0; }
.tier-card p { margin: 0; font-size: 0.88rem; color: var(--ink-2); line-height: 1.55; }
.tier-card .tag {
  font-size: 0.72rem; color: var(--purple-ink); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---------- account / support panels -------------------------------------- */

.acct-panel {
  max-width: 44rem; padding: 1.5rem 1.6rem;
  border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface);
}
.acct-panel h2 { font-size: 1.16rem; margin: 0 0 0.3rem; }
.acct-panel .sub { font-size: 0.9rem; color: var(--ink-2); margin: 0 0 1.15rem; line-height: 1.6; }
.acct-form { display: grid; gap: 0.8rem; }
.acct-form label { font-size: 0.82rem; font-weight: 500; color: var(--ink-2); display: grid; gap: 0.3rem; }
.acct-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-top: 0.4rem; }
.acct-check, .acct-form label.acct-check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; }
.acct-check input { margin-top: 0.2rem; }
.acct-warn {
  padding: 0.9rem 1.1rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.55;
  background: color-mix(in oklab, var(--purple) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--purple) 30%, transparent);
}
.acct-err { color: var(--danger-ink); font-size: 0.86rem; min-height: 1.2em; }
.acct-built {
  padding: 0.9rem 1.1rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.55;
  background: color-mix(in oklab, var(--orange) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--orange) 28%, transparent);
  margin-bottom: 1.2rem;
}
.acct-built .bl {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange-ink); margin-bottom: 0.3rem;
}
.acct-built p { margin: 0; color: var(--ink-2); }

.sup-disclose {
  background: color-mix(in oklab, var(--orange) 10%, var(--tint));
  border: 1px solid color-mix(in oklab, var(--orange) 35%, transparent);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 1.1rem;
}
.sup-disclose strong { color: var(--orange-ink); }

.sup-thread {
  display: grid; gap: 0.8rem;
  max-height: 22rem; overflow-y: auto;
  padding: 0.2rem 0.1rem 0.6rem;
  margin-bottom: 1rem;
}
.sup-msg { display: grid; justify-items: end; gap: 0.2rem; }
.sup-msg--admin { justify-items: start; }
.sup-bubble {
  margin: 0; max-width: 85%;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r-md);
  font-size: 0.9rem; line-height: 1.55;
  white-space: pre-wrap;
  background: var(--purple-fill); color: white;
}
.sup-msg--admin .sup-bubble {
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--hairline);
}
.sup-when { font-size: 0.72rem; color: var(--ink-3); }

.sup-form textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 0.9rem; line-height: 1.55;
  resize: vertical;
}
.sup-form textarea:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }

.sup-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.8rem; margin-top: 0.7rem;
}
.sup-status { font-size: 0.82rem; color: var(--danger-ink); margin-right: auto; }

.tier-card p.tier-built { margin-top: 0.45rem; font-size: 0.82rem; color: color-mix(in oklab, var(--purple) 75%, var(--ink)); font-weight: 500; }
.su-hint { font-size: 0.78rem; color: var(--ink-3); margin-top: -0.35rem; line-height: 1.5; }
.su-hint button { color: var(--purple-ink); font-weight: 500; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.acct-status { display: flex; gap: 0.6rem; align-items: center; font-size: 0.92rem; margin-bottom: 1rem; }
.acct-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #2f9e64; }
.acct-sep { border: none; border-top: 1px solid var(--hairline); margin: 1.5rem 0; }
/* web.md §7.6: the remembered-device note sits under the session row, apart
   from it, because Forget touches this browser and the row above touches the
   account. */
.acct-remembered { margin-top: 1.2rem; }
.acct-remembered .sub { margin-bottom: 0.3rem; }
.danger-zone summary { cursor: pointer; font-size: 0.9rem; color: var(--ink-2); }
.hidden { display: none !important; }

/* `.set-back` itself now lives in styles.css — every feature page uses it. */

@media (max-width: 560px) {
  .set-group, .acct-panel { padding: 1.25rem 1.1rem; }
}

/* ---- the account-kind chooser and the recovery code (ADR-112) ---- */

/* The kind chooser reuses .tier-card: it is the same shape of decision — a few
   options, each needing its consequences spelled out rather than merely named —
   and a second card style would drift from this one the first time either
   moved. */
.kind-heading { margin-top: 1.4rem; }
.kind-list { margin-bottom: 1.2rem; }

/* Monospaced and roomy because this is read off a screen and written onto
   paper. The alphabet already excludes the characters that get misread by eye
   (no I, L, O or U), so what this buys is the five groups lining up. */
.recovery-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  /* No fallback: --surface-2 is defined in styles.css for both themes, and the
     fallback that was here was a GRAY — neutrals in this system are tinted. */
  background: var(--surface-2);
  border: 1px solid var(--purple);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0.4rem 0 0.8rem;
  user-select: all;
  word-break: break-all;
}

/* The sign-in identity switch. Two quiet buttons, the active one carrying the
   brand edge — not a <select>, because it swaps a field rather than setting a
   value. */
.acct-row--tabs { gap: 0.4rem; margin-bottom: 0.2rem; }
.acct-row--tabs .btn.is-active {
  border-color: var(--purple);
  color: var(--purple);
}

@media (max-width: 560px) {
  .recovery-code { font-size: 1.1rem; letter-spacing: 0.04em; }
}

/* The tier sheet a finish at `none` opens (ADR-145). Three cards with their full
   descriptions outgrow a phone, so the dialog scrolls inside the viewport rather
   than clipping its own Continue off the bottom. */
.ic-dialog.ic-tiersheet { width: min(100%, 32rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.ic-dialog.ic-tiersheet .tier-list { margin-top: 1.2rem; }