/* ============ SETTINGS > YOU > MANAGE — Profile & Account ============ */
/* The drill-in reuses the Focus Shield skeleton: a section list on the left,
   the selected section on the right, a 72px strip above the footer. Surface,
   typography, toggle, segmented control and text buttons are inherited; only
   the layout of this screen is defined here. Monochrome only. */

/* the profile card's new subtitle, above the Manage control */
.set-profile__sub {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  opacity: 0.4;
}

/* ---- shell ---- */
/* The panel keeps its own geometry; the drill-in only redistributes height
   inside it. The body is the one flexible row, so the strip and the footer are
   never pushed out. What does not fit scrolls inside the two columns. */
.settings-panel.is-drillin {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}
.settings-panel.is-drillin > .set-backrow,
.settings-panel.is-drillin > .set-footer { flex: 0 0 auto; }
/* pulled against the panel's 20px gap: 14px above the back row, 12px below */
.settings-panel.is-drillin > .set-backrow { margin-top: -6px; margin-bottom: -8px; }
/* 16px under the action strip, matching the gap above it */
.settings-panel.is-drillin > .set-footer { margin-top: -4px; }
.settings-body--drillin {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-mask-image: none;
  mask-image: none;
}

/* back row — the drill-in's only heading. It owns no vertical padding; the
   margins on the panel child set its spacing. */
.set-backrow {
  display: flex;
  align-items: center;
  padding: 0;
}
.set-back {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  padding: 4px 0;
  transition: color 0.2s ease;
}
.set-back:hover { color: var(--wear-primary); }
.set-back:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
  border-radius: 8px;
}
.set-back__chev { display: inline-flex; }
.set-back__chev .set-chev { width: 18px; height: 18px; transform: rotate(180deg); }
.set-back__divider {
  align-self: center;
  width: 1px;
  height: 22px;
  margin: 0 20px;
  background: rgba(255, 255, 255, 0.07);
}
.set-back__titles { align-self: center; display: flex; flex-direction: column; gap: 2px; }
.set-back__title {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.set-back__sub {
  font-size: 12px;
  font-weight: 300;
  color: var(--wear-primary);
  opacity: 0.4;
}

/* ---- body: two columns with a rule centred in the gutter ---- */
.acct { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 16px; }
.acct__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  column-gap: 24px;
}
/* centred in the gutter and outside both scroll boxes, so it runs the full
   body height and is never faded or clipped */
.acct__vdiv {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 248px;
  width: 1px;
  background: rgba(255, 255, 255, 0.05);
}
/* No percentage height in this chain: the grid row stretches these to the
   body's height, while a percentage against an ancestor that is still
   indefinite collapses the scroll box to nothing. min-height: 0 on every link
   is what lets a column shrink below its content and scroll, not be clipped. */
.acct__left,
.acct__right {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.acct__left { position: relative; }
.acct__right { overflow-y: hidden; }
.acct__left { overscroll-behavior: contain; }

/* inside the scroll, not pinned above it — it moves with the rows it names */
.acct__seclabel {
  padding: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wear-primary);
  opacity: 0.45;
}

/* the only scrolling regions. No scrollbar, no track, no arrows and no edge
   fade: content stays fully legible right up to the box's edges. */
.acct__left,
.acct__scroll {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.acct__left::-webkit-scrollbar,
.acct__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* the inline padding is what the rows bleed back into, so a hover fill reaches
   both edges of the box while its content stays on the section label's line */
.acct__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 10px 12px 0;
}
.acct__left { padding-top: 10px; }
.acct__rows { display: flex; flex-direction: column; }
/* nothing inside a column may be compressed to make room */
.acct__rows > * { flex: 0 0 auto; }
.acct__rows.is-in { animation: acctFade 280ms cubic-bezier(0.22, 1, 0.36, 1); }
/* the incoming section travels in from the list it was chosen from */
@keyframes acctFade {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}
.settings-panel.is-reduced-motion .acct__rows.is-in { animation: none; }
@media (prefers-reduced-motion: reduce) { .acct__rows.is-in { animation: none; } }

/* ---- left column: the section list ---- */
.acct-sec {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  /* the row holds its own height rather than collapsing onto its neighbours
     when the column runs short */
  flex: 0 0 34px;
  height: 34px;
  min-height: 34px;
  padding: 0 10px 0 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--wear-primary);
  opacity: 0.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.acct-sec:hover { opacity: 0.8; }
.acct-sec.is-active { opacity: 1; font-weight: 500; }
/* one pill for the whole list, so choosing a section slides the selection onto
   it rather than repainting a background on a different button */
.acct__ink {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--acct-ink-h, 34px);
  transform: translateY(var(--acct-ink-y, 0));
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  opacity: 0;
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    height 380ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}
.acct__ink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 2px;
  border-radius: 1px;
  background: var(--wear-primary);
}
.acct__ink.is-ready { opacity: 1; }
.acct__ink.is-instant { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .acct__ink { transition: none; }
}
.acct-sec:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: -2px; }
/* the destructive group, marked by opacity alone — never by colour */
.acct-sec--destructive { opacity: 0.4; }
.acct-sec--destructive:hover { opacity: 0.8; }
.acct-sec--destructive.is-active { opacity: 1; }
.acct-divider--list { flex: 0 0 1px; margin: 14px 10px; }

/* ---- rows ---- */
/* The Messages pattern: the row spans the box edge to edge so its hover fill
   does too, while the inline padding keeps its content and its rule inset. */
.acct-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  margin-inline: -12px;
  min-height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--wear-primary);
  font-family: inherit;
  text-align: left;
  transition: background 0.2s ease;
}
.acct-row::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.acct__rows > .acct-row:last-child::after { display: none; }
.acct-row:hover { background: rgba(255, 255, 255, 0.04); }
.acct-row.is-off:hover { background: transparent; }
.acct-row--field { min-height: 42px; }
.acct-row--nav { min-height: 44px; cursor: pointer; }
.acct-row--nav:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: -2px; }
.acct-row--toggle { min-height: 44px; }
.acct-row--toggle.has-caption { min-height: 48px; }
.acct-row--seg { min-height: 46px; }
.acct-row--seg.has-caption { min-height: 54px; }
.acct-row--status { min-height: 46px; }
.acct-row.is-muted .acct-row__label { opacity: 0.55; }
.acct-row.is-off { pointer-events: none; }
.acct-row.is-off .acct-row__label { opacity: 0.55; }
.acct-row.is-off .acct-row__value { opacity: 0.55; }

.acct-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-row__label {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-row__text .acct-row__label { flex: none; }
.acct-row__label--auto { flex: 0 1 auto; }
/* the whole row is the hit target, so it reads as one control */
.acct-row--toggle,
.qh-allow { cursor: pointer; }
.qh-allow.is-locked { cursor: not-allowed; }
/* an off row reads as unlit, matching the inline toggle's own dot and word */
.acct-row:has(.atmos-switch:not(.is-on)) .acct-row__label,
.acct-row:has(.atmos-switch:not(.is-on)) .acct-row__caption { color: var(--wear-muted); }
.acct-row__label,
.acct-row__caption { transition: color 0.2s ease; }
.acct-row__caption {
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  opacity: 0.4;
}
.acct-row__value {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--wear-primary);
  opacity: 0.4;
  white-space: nowrap;
}
.acct-nav__chev { flex-shrink: 0; display: inline-flex; color: var(--wear-muted); }
.acct-nav__chev .set-chev { width: 16px; height: 16px; }
.acct-lockwrap { flex-shrink: 0; display: inline-flex; color: var(--wear-muted); }
.acct-lock { width: 14px; height: 14px; fill: none; stroke: currentColor; }
.acct-row--status .acct-row__label--auto + .acct-chip { margin-right: auto; }

/* ---- radio list: mutually exclusive choices, shared across drill-ins ---- */
.acct-radios { display: flex; flex-direction: column; }
.acct-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.acct-radios > .acct-radio:last-child { border-bottom: none; }
.acct-radio:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: -2px; }
/* selection is the filled ring, never colour */
.acct-radio__mark {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.acct-radio.is-on .acct-radio__mark {
  border-color: var(--wear-primary);
  box-shadow: inset 0 0 0 4px var(--wear-primary);
}
.acct-radio__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-radio .acct-row__label { flex: none; opacity: 0.7; }
.acct-radio.is-on .acct-row__label { opacity: 1; font-weight: 400; }

.acct-caption {
  padding: 12px 0 2px;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--wear-primary);
  opacity: 0.4;
}
.acct-sublabel {
  padding: 4px 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wear-primary);
  opacity: 0.45;
}
.acct-divider { display: block; height: 1px; margin: 14px 0; background: rgba(255, 255, 255, 0.06); }
.acct-error { padding-top: 4px; font-size: 11.5px; font-weight: 300; color: var(--wear-primary); opacity: 0.8; }

/* A group of rows that a switch reveals. The inset matches the scroll box so a
   row inside can still bleed its hover fill out to both edges. Entry is opt-in:
   sections repaint on every change, and only the switch that opened the group
   should make it unroll again. The exit is played by drillCardOut. */
.acct-reveal {
  overflow: hidden;
  margin-inline: -12px;
  padding-inline: 12px;
}
.acct-reveal.is-in { animation: acct-reveal-down 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.acct-reveal.is-out { animation: acct-reveal-up 190ms ease forwards; }
@keyframes acct-reveal-down {
  from { opacity: 0; max-height: 0; transform: translateY(-10px); }
  to { opacity: 1; max-height: 520px; transform: none; }
}
@keyframes acct-reveal-up {
  from { opacity: 1; max-height: 520px; transform: none; }
  to { opacity: 0; max-height: 0; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .acct-reveal { animation: none; }
}
/* the override switch keeps its distance from the group it opens */
.acct-row--toggle:has([data-speaks-toggle="emergency"]) { margin-bottom: 10px; }

/* ---- controls ---- */
.acct-input {
  flex-shrink: 0;
  width: 196px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-align: right;
  color: var(--wear-primary);
}
.acct-input::placeholder { color: var(--wear-primary); opacity: 0.4; }
.acct-input:focus { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: 1px; }
.acct-input--wide { width: 100%; height: 32px; text-align: left; }

/* ---- personal information: each field is a box carrying its own label ----
   Two per line, with the display name across the full width. The box itself is
   the label element, so clicking anywhere in it puts the caret in the field. */
.acct-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 2px 0 6px;
}
.acct-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 14px 11px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  cursor: text;
  transition: background 0.15s ease;
}
.acct-field--wide { grid-column: 1 / -1; }
.acct-field:hover { background: rgba(255, 255, 255, 0.06); }
/* focus is carried by the surface alone, since the boxes have no edge */
.acct-field:focus-within { background: rgba(255, 255, 255, 0.09); }
.acct-field__head { display: flex; align-items: baseline; gap: 10px; }
.acct-field__label {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  opacity: 0.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-field__opt {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  opacity: 0.35;
}
.acct-field__input {
  width: 100%;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.acct-field__input::placeholder { color: var(--wear-primary); opacity: 0.32; }
.acct-field__input:focus { outline: none; }

/* sized by its options rather than a fixed track: a four-option group used to
   overrun the 200px cap and spill its last chip outside the pill */
.acct-seg { flex: 0 0 auto; max-width: 100%; margin-left: auto; }
.acct-seg--narrow { flex: 0 0 auto; max-width: 100%; }
.acct-seg .atmos-seg__opt { padding: 5px 11px; font-size: 11.5px; }
/* the label yields first, so the control is never the thing that gets cut */
.acct-row--seg .acct-row__text,
.acct-row--seg > .acct-row__label { flex: 1 1 auto; min-width: 0; }

.acct-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4.5px;
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  opacity: 0.75;
  white-space: nowrap;
}
/* status is carried by the label and the border style, never by colour */
.acct-chip--attention { border-style: dashed; border-width: 1px; border-color: rgba(255, 255, 255, 0.3); }

.acct-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  transition: background 0.15s ease;
}
.acct-btn:hover { background: rgba(255, 255, 255, 0.06); }
.acct-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: 2px; }
/* the primary action in a strip: the same ghost, one step stronger */
.acct-btn--filled {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: var(--wear-primary);
  font-weight: 400;
}
.acct-btn--filled:hover { background: rgba(255, 255, 255, 0.09); }
.acct-btn:disabled {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(243, 242, 238, 0.3);
  cursor: not-allowed;
}
.acct-action { flex-shrink: 0; font-size: 12px; }

/* ---- cards ---- */
.acct-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  margin: 10px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.acct-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-card__title { font-size: 16px; font-weight: 300; letter-spacing: -0.01em; color: var(--wear-primary); }
.acct-card__title--sm { font-size: 13.5px; }
.acct-card__note { font-size: 11.5px; font-weight: 300; color: var(--wear-primary); opacity: 0.4; }
.acct-card__acts { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.acct-card--email { height: 62px; }
.acct-card--id { height: 56px; }
.acct-card--note { min-height: 46px; }
.acct-card--confirm { min-height: 74px; }
/* raised and dismissed inline cards unroll instead of blinking into place; the
   exit is played by drillCardOut before the repaint that removes the card */
.acct-card--confirm,
.acct-card--id { overflow: hidden; }
.acct-card--confirm.is-in,
.acct-card--id.is-in { animation: acct-card-down 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.acct-card--confirm.is-out,
.acct-card--id.is-out { animation: acct-card-up 190ms ease forwards; }
@keyframes acct-card-down {
  from { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; transform: translateY(-6px); }
  to { opacity: 1; max-height: 140px; margin-top: 10px; margin-bottom: 10px; transform: none; }
}
@keyframes acct-card-up {
  from { opacity: 1; max-height: 140px; margin-top: 10px; margin-bottom: 10px; transform: none; }
  to { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; transform: translateY(-6px); }
}
/* the leave prompt takes the strip's fixed slot, so it must not unroll */
.acct__strip .acct-card--confirm { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .acct-card--confirm,
  .acct-card--id { animation: none; }
}
.acct-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--wear-primary);
  opacity: 0.55;
}
.acct-card--delete {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  min-height: 176px;
  padding: 18px 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.acct-card--delete .acct-card__title { font-size: 14px; }
.acct-card__prompt { margin-top: 8px; font-size: 11.5px; font-weight: 300; color: var(--wear-primary); opacity: 0.55; }
.acct-card--delete .acct-card__acts { align-self: flex-end; margin-top: 10px; }

/* profile picture */
.acct-avatarrow { display: flex; align-items: center; gap: 16px; padding: 4px 0 12px; }
.acct-avatar { width: 54px; height: 54px; flex-shrink: 0; }
.acct-avatarrow__side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acct-avatarrow__acts { display: flex; align-items: center; gap: 14px; }
.acct-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* read-only grid — two columns, 52px per line, no control and not focusable */
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.acct-grid__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.acct-grid__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--wear-primary);
  opacity: 0.4;
}
.acct-grid__value { font-size: 14px; font-weight: 300; letter-spacing: -0.01em; color: var(--wear-primary); }

/* ---- the 56px action strip ---- */
.acct__strip { flex: 0 0 56px; min-height: 56px; }
.acct-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
/* the leave prompt takes the strip's place and must keep the strip's height */
.acct__strip .acct-card--confirm { min-height: 56px; height: 56px; margin: 0; }
.acct-strip__dot {
  flex: 0 0 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--wear-primary);
  opacity: 0.4;
}
.acct-strip__dot.is-on { opacity: 1; }
.acct-strip__label {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  opacity: 0.4;
}
.acct-strip__label.is-on { opacity: 1; }