/* ══════════════════════════════════════════════════════════════
   Meetback — Settings (the account screen at /settings)

   Lifted from the pinned reference
   design-system/products/meetback/assets/settings.html @ d5226d84,
   a signet-transcript already re-skinned to the Meetback names by the
   transcriber. This file finishes that job against the tokens as they exist in
   this repo — the same mapping scanner.css and contacts.css made:

     reference :root       → this repo
     --ink      var(--ink-900)    → var(--ink)                (tokens.css)
     --mist     var(--page)    → var(--surface-muted)      (the transcript's own
                             "var(--surface2) → var(--mist)" re-skin note)
     --surface             → var(--surface)
     --border/--muted/--text/--accent → the vars cards-home.css declares at :root
     --font-display        → var(--font-display)       ('Fraunces', serif)
     --r-card   16px       → var(--r-md)               (exactly 16px)
     --r-field  10px       → var(--r-sm)               (exactly 10px)
     24 / 14 / 13 / 11px   → --t-xl / --t-sm / --t-sm / --t-xs, whose clamp()
                             maxima are those sizes, so the drawing holds at
                             460px and stays fluid below it (the iOS-first
                             adaptive invariant).

   ONLY THE TRANSCRIPT'S SECOND CARD IS STYLED. The panel that is most of the
   reference is not built at all — owner-ruled, DECISIONS D13 — so its rules
   (.field, .field-row, .label) are absent rather than dead. A stylesheet that
   still dresses a dropped panel is how that panel comes back.

   `.chip` is gone with it: the chip said "Coming soon" and the live account is
   what replaced it, so keeping its rule would be keeping the thing this build
   exists to remove.

   DEPENDS ON cards-home.css BEING LOADED FIRST, exactly as welcome.css,
   scanner.css and contacts.css do: --border, --muted, --text, --accent, --bg
   and the safe-area vars (--sat/--sab) are declared there, not in tokens.css.

   Everything is scoped under `.settings` because the reference's class names
   are deliberately generic — .wrap, .card, .btn — and unscoped they would
   collide with the other screens' stylesheets in this single-document app.
   `.card` and `.btn` in particular already exist elsewhere.
   ══════════════════════════════════════════════════════════════ */

/* A flex column that does not itself scroll, with `.st-scroll` taking the
   overflow — the shape contacts.css arrived at. The content here is one short
   card and does not overflow an SE today, but the shell is a fixed-height
   column: without a scroller, a large accessibility text size or a landscape
   phone would push the card under the tab bar with no way to reach it. */
.settings {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
}

.settings .st-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Explicit, for the reason scanner.css gives: `overflow-y:auto` alone makes
     overflow-x compute to `auto` too, and THIS box is the scroll container, so
     #app{overflow-x:hidden} cannot help it. A long e-mail address is one
     unbreakable token wider than an SE. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* The reference's `.wrap{max-width:460px;margin:0 auto;padding:8px 2px}`. The
   2px gutter is right for a 460px page centred in a desktop window and wrong in
   the app, where the shell is edge-to-edge and the card would touch the screen.

   EACH SAFE-AREA INSET IS PAID EXACTLY ONCE, and only the top is paid here:
   left/right are applied by #app for every screen (cards-home.css), and bottom
   is paid by the tab bar, which is an opaque sibling in the flex column rather
   than an overlay. Paying either again cost 82px of content width and 34px of
   dead scroll on the scanner; the same arithmetic applies here. */
.settings .wrap {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: calc(8px + var(--sat)) clamp(14px, 4.5vw, 18px) 8px;
}

/* Q46 — INTER, NOT FRAUNCES, the same correction all three directions carried
   and the same one contacts made. LANGUAGE.md §2.1: the display face is for the
   name on a card and is spent by repetition. */
.settings .screen-title {
  font-family: var(--font-body);
  font-size: var(--t-xl);            /* clamp(20px, 5.5vw, 24px) — 24px at width */
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 6px 0 14px;
}

/* ── the card ──────────────────────────────────────────────────
   Q46 / DIRECTION B — THE CARDS, TIGHTENED. Owner, 2026-08-08: "the four cards
   stay, the border comes off the outside edge and stays on the divider rows
   inside, and the buttons take the app's indigo instead of black."

   It won over the grouped list because this app leans on explanatory sentences
   far more than iOS Settings does, and a grouped list has nowhere natural to
   put them — the pick says the copy keeps the place it was written for.

   ⚠ B RATHER THAN C MEANS THE ORDER DOES NOT MOVE. C was this tightening plus a
   new order (Appearance first). The owner took the tightening WITHOUT the
   reorder, so Account / Appearance / Your data / About stay as written. The
   item's own note called that order "the actual complaint"; the owner has ruled
   otherwise, and a later fire proposing the reorder is proposing something
   already declined. Nothing in the markup moves, which also makes C's
   accessibility caveat moot — the CSS-only reorder was never going to ship.

   LANGUAGE.md §2.2 is what the tightening IS: a card is defined by its radius
   and its inset, not by a border; hairlines stay for dividers INSIDE a surface
   and come off the outside edge of one; the shadow is a single soft ambient
   token, never a stack. */
.settings .card {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-md);        /* the reference's --r-card:16px */
  box-shadow: 0 1px 3px var(--sheet-shadow);
  padding: clamp(16px, 4.8vw, 18px);
  margin-bottom: 12px;
}

.settings .card-title {
  font-size: var(--t-base);          /* B raises it; the title leads the card */
  font-weight: 700;
  margin-bottom: 6px;
}

.settings .card-copy {
  font-size: var(--t-xs);            /* B lowers it; the sentence supports */
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

/* ── the account row ───────────────────────────────────────────
   The reference has no drawing for this: its second card is a chip. So the row
   is built from the parts this app already uses for a person — the circular
   monogram of cards-home's medallion and the name/sub pair of the contacts row
   — rather than from a new visual language invented on this screen. */
.settings .st-account {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}

.settings .st-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The letter sits UNDER the photo and is always present, so a photo that is
   slow shows the letter, and a photo that fails needs only its <img> removed —
   there is no second render path and no flash of an empty circle. */
.settings .st-initial {
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}

.settings .st-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* An <img> whose src fails paints the broken-image glyph in some engines
     before the error handler runs. The circle is opaque and the glyph is
     removed with the element; this keeps the intervening frame clean. */
  background: var(--ink);
}

.settings .st-who {
  flex: 1 1 auto;
  min-width: 0;
}

.settings .st-name {
  font-size: var(--t-base);
  font-weight: 700;
  /* A display name is provider-supplied and can be long; an e-mail address can
     be the widest thing on this screen and takes this line when there is no
     name. `anywhere` also shrinks the box's min-content width, so it cannot
     push the card wide in the first place. */
  overflow-wrap: anywhere;
}

.settings .st-sub {
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* The second line when it is a STATEMENT about the account rather than the
   address itself ("No e-mail address on this account"). Italic so it does not
   read as a value the provider supplied. */
.settings .st-sub.st-none {
  font-style: italic;
}

/* ── sign out ──────────────────────────────────────────────────
   The reference's `.btn`: ink, white, --r-field. It gains a 44pt minimum and a
   real focus ring, which a static drawing cannot express, and it is left
   aligned at its own width rather than stretched — this is the only button on
   the screen and a full-bleed one would read as the primary action of the app.

   `letter-spacing` and the colour are the reference's own; nothing here
   restyles it. */
.settings .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  /* Q46/B — "the buttons take the app's indigo instead of black".
     ⚠ --accent-dk, NOT --accent, and the difference is measured rather than
     stylistic: white on --accent measures 6.29:1 and white on --accent-dk
     measures 7.90:1, and Q43 already put the editor's Save on --accent-dk.
     Two primary buttons in one app at two different indigos is a second palette
     in effect, whatever the token names say. The proposal drew --accent; this
     is the same ruling spent on the rung the app already uses. */
  background: var(--accent-dk);
  color: var(--surface);
  border: none;
  border-radius: var(--r-sm);        /* the reference's --r-field:10px */
  font-family: inherit;
  font-size: var(--t-sm);            /* the reference's 13px */
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}

.settings .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* WORKING — the call is in flight. Disabled, so a double-tap cannot fire a
   second sign-out; the reference has no drawing for this state because the
   reference makes no calls. */
.settings .btn.working,
.settings .btn:disabled {
  opacity: .6;
  cursor: default;
  pointer-events: none;
}

/* ── the status line ───────────────────────────────────────────
   Directly under the button, because that is where the user is looking when a
   sign-out fails. Always in the DOM — a live region inserted at the moment its
   text changes is not reliably announced — and collapsed to nothing when there
   is nothing to say, so the card does not carry a gap in the common case. */
.settings .st-msg {
  margin-top: 12px;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
}
/* COLLAPSED, NOT UNRENDERED. This was `display: none`, and that defeated the
   exact protection the module's comment claims for this element: a live region
   that is display-toggled at the moment its text changes is not reliably
   announced, and the only signal a failed sign-out gives is this sentence. The
   region now stays in the box tree at zero height and gives back its margin, so
   an empty one still costs nothing visually — measured by the critic, chromium
   375x667: display none→block on the failure, i.e. exactly the toggle the code
   said it was avoiding. (contacts.css carries the same rule and the same bug;
   it is a separate item, not a settings fix smuggled wider.) */
.settings .st-msg:empty { margin-top: 0; }

/* A failed sign-out is the one failure this screen can produce, and it is a
   claim the user cannot otherwise check — they tapped a button and are still
   here. --err is the token already carrying the irreversible action elsewhere. */
.settings .st-msg[data-tone="error"] {
  color: var(--err);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .settings .btn { transition: none; }
}

/* ── About (Q27) ──
   A key/value row rather than a sentence with a number in it: the build is
   something the owner reads back to me when something is wrong, so it wants to
   be findable and selectable, not buried in prose. */
.settings .st-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-top: 1px solid var(--border);
}
/* Q46 — THE ONE OVERRIDE ALL THREE DIRECTIONS APPLIED, and it was ruled when
   the language was agreed rather than here: LANGUAGE.md §2.1 puts secondary
   labels at 11–12px and reserves 13px and up for content. This key was at 13px
   (Q27's row), so it comes down. `.st-diag-k` was already at 11 and needs
   nothing. The VALUE keeps its size — the build string is the content. */
.settings .st-row-k { font-size: var(--t-xs); color: var(--muted); }
.settings .st-row-v {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 13px; font-weight: 600; color: var(--text);
  -webkit-user-select: text; user-select: text;
}
.settings .st-about-note {
  margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--muted);
}

/* ── Q47 — the height readings ──
   TWO COLUMNS, and that is the whole design constraint: there are eight rows
   and they have to survive being read off a photograph of a phone screen. As
   full-width st-rows they run past the fold and the pair of screenshots the
   item asks for would not carry all of it. Monospaced and tabular so the digits
   line up down the column — the reading is a COMPARISON between four numbers,
   and unaligned digits are what makes 844 and 782 look alike at a glance. */
.settings .st-diag {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
  margin-top: 4px; border-top: 1px solid var(--border); padding-top: 8px;
}
.settings .st-diag-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 3px 0; min-width: 0;
}
.settings .st-diag-k {
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settings .st-diag-v {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-user-select: text; user-select: text; white-space: nowrap;
}
.settings .st-diag-how { margin-top: 10px; }

/* ── Appearance (Q28) ──
   A segmented control rather than a switch, because there are THREE states and
   a switch can only say two. "System" is one of them and it is the default, so
   it has to be as reachable as the other two rather than being the absence of
   a choice. */
.settings .st-seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-4); border-radius: 12px;
}
.settings .st-seg-b {
  flex: 1; padding: 9px 8px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.settings .st-seg-b.on {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.settings .st-seg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Delete account (Q30) ──
   The last card on the screen, and the only one that is allowed to look
   different: everything else here is neutral chrome, and a destructive control
   that looks like the rest is one somebody taps on the way past.

   ⚠ COLOUR IS THE SUPPORTING SIGNAL, NEVER THE CARRYING ONE — Q24's rule, and
   it binds here more than anywhere. The confirming button says what it does in
   WORDS ("Delete all of this, permanently"); the red is what makes it findable,
   not what makes it understood. */
/* ⚠ THE DANGER CARD KEEPS ITS BORDER, AND IT HAD TO BE RE-DECLARED RATHER THAN
   INHERITED. It used to say `border-color: var(--del-line)` and rely on `.card`
   for the 1px; B takes that 1px off every card, so the colour would have had
   nothing to colour and the one destructive card on the screen would have gone
   out looking exactly like Appearance. §2.2's "no border on the outside edge of
   a card" is a rule about NEUTRAL surfaces; the paragraph above is this file's
   own standing exception, ruled before B existed and not up for re-reading by a
   tightening. Written in full so nothing here depends on a shorthand elsewhere. */
.settings .card.danger { border: 1px solid var(--del-line); }
.settings .card.danger .card-title { color: var(--del); }
.settings .btn.out {
  background: var(--surface); color: var(--del);
  border: 1px solid var(--del-line);
}

/* The sheet. Rises from the foot like the editor's item sheet — the app's
   existing idiom for "one decision, made now" — rather than inventing a third
   popover shape. */
.settings .del-scrim {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--scrim);
}
.settings .del-sheet {
  width: 100%; max-width: 460px; margin: 0 auto;
  background: var(--surface); color: var(--text);
  border-radius: 24px 24px 0 0;
  padding: 18px clamp(16px, 4.8vw, 20px) calc(18px + var(--sab));
  box-shadow: 0 -6px 24px var(--sheet-shadow);
  animation: del-rise .22s cubic-bezier(.2, .8, .3, 1);
  max-height: 100%; overflow-y: auto;
}
@keyframes del-rise { from { transform: translateY(14px); } to { transform: none; } }
.settings .del-h { font-size: 17px; font-weight: 700; color: var(--del); margin-bottom: 8px; }
.settings .del-copy { font-size: 13px; line-height: 1.5; color: var(--muted); margin-bottom: 10px; }
.settings .del-copy b { color: var(--text); }
.settings .del-list {
  list-style: none; padding: 0; margin: 0 0 14px;
  font-size: 13.5px; line-height: 1.8; color: var(--muted);
}
.settings .del-list b { color: var(--text); }
.settings .del-field {
  width: 100%; min-height: 44px; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--del-line); border-radius: 12px;
  background: var(--field); color: var(--text);
  font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 15px;
}
.settings .del-field:focus-visible { outline: 2px solid var(--del); outline-offset: 1px; }
.settings .btn.del-go {
  width: 100%; background: var(--del); color: var(--on-del);
  border: 0; font-weight: 700; margin-bottom: 8px;
}
.settings .btn.del-go[disabled] { opacity: .45; }
.settings .btn.ghost {
  width: 100%; background: none; color: var(--muted); border: 1px solid var(--border);
}
@media (prefers-reduced-motion: reduce) { .settings .del-sheet { animation: none; } }

/* ── Q63: autofill takes this surface's own colours. The reasoning and the
   box-shadow trap are written out once, in editor.css. ── */

.settings .del-field:-webkit-autofill,
.settings .del-field:-webkit-autofill:hover,
.settings .del-field:-webkit-autofill:focus,
.settings .del-field:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px var(--field) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}