/* Tikrar — the Account screen, copied from the approved sheet (T-243 / D-T17 · D-T27 · D-T28 · D-T31).
 *
 * The spec is evidence/design-bevel-home-2026-10-23/bevel-stats-account.html: the face (a bare circle with
 * its camera badge), the five rows that open a screen plus the Priming switch, Sign out, then the red
 * Delete account switch. The header carries NO second avatar (D-T31) — the face below it is the only one.
 * The class names in web/app.js's viewMe are this sheet's class names.
 *
 * Loaded after the app's own layers, so a rule here wins on equal specificity. Scoped to `.d2.account`.
 */

/* the screen owns its top edge; its own header carries the word */
body.is-me > #appbar { display: none; }
body.is-me .view {
  max-width: none;
  padding: 0 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

.d2.account { background: #0A0C0B; min-height: 100%; }
.d2.account main { padding-top: 4px; }

/* ── the face: the disc is the photo control, the badge says what it does ── */
.d2.account .face { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.d2.account .me__id {
  position: relative; width: 96px; height: 96px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer; font: inherit;
}
.d2.account .av {
  width: 88px; height: 88px; border-radius: 999px; background: #1B211E; border: 1px solid #2C3531;
  display: grid; place-items: center; font-size: 30px; font-weight: 700; color: #8D9A94;
  overflow: hidden;
}
.d2.account .av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d2.account .cam {
  position: absolute; right: 3px; bottom: 3px; width: 26px; height: 26px; border-radius: 999px;
  background: #1B211E; border: 1px solid #2C3531; display: grid; place-items: center; color: #8D9A94;
}
.d2.account .cam svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.d2.account .face .nm { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-top: 12px;
  color: #F2F5F3; }
.d2.account .face .em { font-size: 11.5px; color: #8D9A94; margin-top: 3px; direction: ltr; }

/* ── the five rows and the switch: a word, its value, the chevron ────────── */
.d2.account .alist { margin-top: 18px; }
.d2.account .arow {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 14px 0;
  border: 0; border-top: 1px solid #242B28; border-radius: 0;
  background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.d2.account .arow .lbl { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: #F2F5F3; }
.d2.account .arow .val { font-size: 12.5px; color: #8D9A94; max-width: 150px; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d2.account .arow svg.ch { width: 13px; height: 13px; stroke: #6E7A74; fill: none; stroke-width: 2;
  flex: 0 0 auto; }
.d2.account .arow:focus-visible { outline: 3px solid #C9F45A; outline-offset: -3px; }

/* the one row that acts in place: 42 × 26, the knob on the side that means its state */
.d2.account .switch { width: 42px; height: 26px; border-radius: 99px; background: #2B332F;
  position: relative; flex: 0 0 auto; transition: background .15s ease; }
.d2.account .switch i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px;
  border-radius: 99px; background: #0A0C0B; transition: left .15s ease, right .15s ease; }
.d2.account .switch.is-on { background: #C9F45A; }
.d2.account .switch.is-on i { left: auto; right: 3px; }

/* ── Sign out, then the red switch below it (D-T28) ───────────────────── */
/* the sheet draws Sign out as a word with no rule over it, so the app's footer hairline steps aside */
.d2.account .account-footer { padding-top: 0; border-top: 0; }
.d2.account .signout { margin: 22px 0 0; text-align: center; }
.d2.account .signout__btn {
  min-height: 44px; padding: 0 16px; border: 0; background: none;
  color: #7E8C86; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.d2.account .signout__btn:hover { color: #F2F5F3; }

.d2.account .switch-off { margin: 6px 0 0; }
.d2.account .arow--danger { border-top: 1px solid #242B28; }
.d2.account .arow--danger .lbl { color: #FF6B57; }
/* the switch is RED and it is OFF: the knob stays on the left until his word by mail (D-T28) */
.d2.account .switch--danger { background: #FF6B57; }
.d2.account .switch--danger i { background: #0A0C0B; }
.d2.account .switch-off__note,
.d2.account .switch-off__warn {
  font-size: 10.5px; color: #7E8C86; line-height: 1.4; margin: 2px 0 0; text-align: start;
}

/* ── Admin: one collapsed fold at the foot, never deleted (T-226 tracks its overflow) ── */
.d2.account .admin-fold { margin: 26px 0 0; border-top: 1px solid #242B28; }
.d2.account .admin-fold > summary {
  list-style: none; padding: 14px 0; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #8D9A94; font-weight: 700; cursor: pointer;
}
.d2.account .admin-fold > summary::-webkit-details-marker { display: none; }
.d2.account .admin-fold > summary::after {
  content: ""; float: right; width: 8px; height: 8px; margin-top: 4px;
  border-right: 2px solid #7E8C86; border-bottom: 2px solid #7E8C86; transform: rotate(45deg);
}
.d2.account .admin-fold[open] > summary::after { transform: rotate(-135deg); }
/* whatever ends the screen clears the floating bar — with the admin fold, without it, always 96 px */
.d2.account main > :last-child { padding-bottom: 96px; }

/* wider screens: the sheet's 600 px column, centred */
@media (min-width: 600px) {
  .d2.account main { padding: 8px 30px 0; max-width: 600px; margin: 0 auto; width: 100%; }
  .d2.account header { padding: 20px 30px 4px; max-width: 600px; margin: 0 auto; width: 100%; }
}

/* the report word sits at the header's inline end, its only other child */
.d2.account header .report-mark { margin-inline-start: auto; margin-inline-end: 4px; }

/* ═══ T-403 — the Appearance screen: three full-width rows, one word each, the
   certainty control's grammar (T-276) reused for a setting. Values are the
   app's own tokens, so the rows read right in BOTH skins; the swatches are
   deliberate constants — each shows the canvas of the skin it names.
   The rows live BOTH in the centred sheet card (openMeSheet) and on the
   #/me/appearance wizard screen — styled on the class, never on ancestry. ═══ */
.themeopts { margin-top: 10px; }
.themeopt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  background: none; border: 0; border-top: 1px solid var(--line); min-height: 52px;
  padding: 10px 2px; color: inherit; font: inherit; cursor: pointer;
}
.themeopt:first-child { border-top: 0; }
.themeopt__swatch { width: 18px; height: 18px; border-radius: 999px; flex: 0 0 auto;
  border: 1px solid #7E93A6; }
.themeopt__swatch--light { background: #F5F8FA; }
.themeopt__swatch--dark { background: #0A0C0B; }
.themeopt__swatch--auto {
  background: linear-gradient(90deg, #F5F8FA 0 50%, #0A0C0B 50% 100%);
}
.themeopt__word { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.themeopt[aria-checked="true"] .themeopt__word { color: var(--teal-dark); }
.themeopt[aria-checked="true"]::after {
  content: ""; margin-inline-start: auto; width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 2px solid var(--teal-dark); border-bottom: 2px solid var(--teal-dark);
  transform: rotate(45deg) translateY(-1px);
}
.themeopt:disabled { cursor: default; }
/* every tap answers: the rows ride the app's own press response */
.themeopt { transition: transform .09s ease, opacity .09s ease; }
.themeopt:active { transform: scale(.985); opacity: .92; }
@media (prefers-reduced-motion: reduce) {
  .themeopt { transition: none; }
}