/* ═══ §13 · TAB: SETTINGS ═════════════════════════════════════════════════════════════
   Settings is built almost entirely from §5 and §6. What is left is its own. */

/* ── THE ACCOUNT PICTURE ────────────────────────────────────────────────────────────────────
   The circle is dimensioned and dressed EXACTLY like `.statik-chat-avatar` (modals.css §8.6) on
   purpose: one stored document drawn on two surfaces, so a picture that reads well in Settings
   cannot read badly in the chat. Only the size differs — 44px here because this is the editable
   original and a thumbnail you are about to judge should be the larger of the two.
   Every value below is an existing token; this card introduces no colour of its own (R10). */
.acct-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.acct-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--accent-gold);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  /* the picture is drawn EDGE TO EDGE inside the circle, so the frame clips it rather than
     letting a non-square source letterbox itself against the fill */
  overflow: hidden;
}
.acct-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.acct-avatar.has-pfp {
  padding: 0;
  border-color: var(--glass-border-active);
}
/* THE NATIVE CONTROL IS NEVER DRAWN — `.settings-btn` beside it is what the operator presses, and
   `app.pickAvatar()` forwards the press. A file input cannot be styled into this theme, and
   building a second theme for one control is the thing R10 refuses. It stays in the DOM (rather
   than being created on demand) so the `change` handler is bound by the markup like every other
   control on this surface. */
.acct-avatar-input { display: none; }
/* a press that is in flight, and the disabled Remove when there is nothing to remove */
.settings-btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/* the read-only scanner roster box */
.settings-scanner-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* the Race toggle is a STATE READOUT, not a control — the brain steers its own scanning, so
   this one is painted on and cannot be pressed. */
.toggle-track.race {
  background: linear-gradient(120deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.45) 100%);
  pointer-events: none;
  opacity: 0.85;
}
.toggle-track.race .toggle-thumb { transform: translateX(100%); }

/* ── the set-point cells: a cell's `why` is documentation, its reading is not ──────────────
   The `why` explains the quantity once; the evidence line and the absent-reason under it are the
   LIVE finding and change every fit. On a 390px phone an unclamped three-paragraph `why` pushed
   that finding off the screen, so the prose is clamped to three lines and the finding never is.
   ⚠ CLAMPED, NEVER TRUNCATED — the whole sentence stays in the DOM (selectable, and a checker can
   read it), and a tap opens it. A `…` written into the text would be a sentence nothing could
   recover; `-webkit-line-clamp` is a way of DRAWING less, not of saying less. */
.knob-why {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  cursor: pointer;
}
.knob-why.open {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}