/* design/site/account.css
 *
 * My page (/me) and the operator view (/admin), the full scan build, 2026-10-20. Plain cards on the site's stone, one
 * column, the site's own field and buttons (site.css .em-in, .btn). On top of tokens.css and site/site.css.
 */

.me-main { display: block; }
body:has(.me-ground) .foot { margin-top: 0; }
.me-ground { background: linear-gradient(180deg, var(--tint-v-soft), var(--stone) 320px); padding: var(--space-32) var(--space-16) var(--space-64); }
.me { max-width: 760px; margin: 0 auto; }
.op { max-width: 1040px; }
.me-h { margin: 0 0 var(--space-20); font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; }
.me-wait, .me-msg { margin: var(--space-16) 0; font-family: var(--font-display); font-weight: 600; color: var(--ink-dim); }
.me-msg[hidden], .me-wait[hidden], .me-in[hidden], .me-out[hidden], .op-in[hidden], .op-person[hidden] { display: none; }
.me-who { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8) var(--space-16); margin: 0 0 var(--space-20); font-family: var(--font-display); font-weight: 500; font-size: var(--text-small); }
.me-who .quiet { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.me-card { margin-top: var(--space-16); padding: var(--space-28) var(--space-28) var(--space-24); background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.me-card > .h3 { margin: 0 0 var(--space-12); }
.me-lead, .me-line { margin: 0 0 var(--space-12); max-width: 60ch; line-height: 1.5; }
.me-line { color: var(--ink-dim); font-size: var(--text-small); }
.me-dim { margin-top: var(--space-4); }
.me-note { margin: var(--space-16) 0 0; font-size: var(--text-small); color: var(--ink-dim); }
.me-note a { color: var(--ink); font-weight: 600; }
.me-lab { display: block; margin-bottom: var(--space-8); font-family: var(--font-display); font-weight: 600; font-size: var(--text-small); }
.me-f .em-row { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.me-f .em-row[hidden] { display: none; }
.me-f .em-err { margin: var(--space-10) 0 0; }
.me-ok { margin: var(--space-10) 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-small); }
.me-ok[hidden] { display: none; }
.me-sub { margin: var(--space-24) 0 var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: var(--text-small); color: var(--ink-dim); }

/* the profile: both types, then per aspect the total first and its parts */
.me-prof-in[hidden], .me-prof-none[hidden], .me-now-p[hidden] { display: none; }
.me-types { display: grid; gap: var(--space-8); margin-bottom: var(--space-16); }
.me-type { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); margin: 0; font-family: var(--font-display); font-weight: 500; }
.me-type b { font-weight: 800; font-size: var(--text-title); }
.me-tw { overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); }
.me-tab, .op-tab { width: 100%; border-collapse: collapse; font-family: var(--font-display); font-size: var(--text-small); }
.me-tab th, .me-tab td, .op-tab th, .op-tab td { padding: var(--space-8) var(--space-6); border-bottom: var(--hair) solid var(--line); text-align: left; vertical-align: top; }
.me-tab thead th, .op-tab thead th { font-weight: 600; font-size: var(--text-micro); color: var(--ink-dim); }
.me-tab tbody th { font-weight: 600; white-space: nowrap; }
.me-tab .me-t { font-weight: 800; }
.me-go-r { margin-top: var(--space-20); }
.me-list, .op-list, .op-comments { margin: 0 0 var(--space-16); padding-left: var(--space-20); line-height: 1.7; font-family: var(--font-display); font-size: var(--text-small); }
.me-list a, .op-list a { color: var(--ink); font-weight: 600; }

/* a switch: a pill with a knob, on in the action colour */
.me-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-20); padding: var(--space-14) 0; border-top: var(--hair) solid var(--line); }
.me-k { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: var(--text-body, 1rem); }
.me-row .me-line { margin-bottom: 0; }
.me-sw { position: relative; flex: none; width: 52px; height: 30px; margin-top: var(--space-2); border: 0; border-radius: var(--r-pill); background: var(--line-strong); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.me-sw i { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: var(--r-round); background: var(--paper); box-shadow: var(--lift); transition: transform var(--dur-fast) var(--ease-out); }
.me-sw[aria-checked="true"] { background: var(--action); }
.me-sw[aria-checked="true"] i { transform: translateX(22px); }
.me-sw:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
.me-l3 { flex: none; }
.me-danger { box-shadow: var(--ring-1) var(--line-strong); }

.op-totals { margin: 0 0 var(--space-8); font-family: var(--font-display); font-weight: 600; }
.op-tab .quiet { padding: 0; font-weight: 600; text-align: left; }
.op-person { margin-top: var(--space-16); padding-top: var(--space-16); border-top: var(--hair) solid var(--line); }
.op-del { margin-top: var(--space-12); display: grid; gap: var(--space-8); max-width: 520px; }

@media (max-width: 559.98px) {
  .me-card { padding: var(--space-20) var(--space-16); }
  /* the profile's table, one aspect a block, each reading with its label */
  .me-tab thead { display: none; }
  .me-tab, .me-tab tbody, .me-tab tr, .me-tab th, .me-tab td { display: block; width: auto; }
  .me-tab tr { padding: var(--space-10) 0; border-bottom: var(--hair) solid var(--line); }
  .me-tab th, .me-tab td { padding: var(--space-2) 0; border: 0; }
  .me-tab td { display: flex; justify-content: space-between; gap: var(--space-12); }
  .me-tab td::before { content: attr(data-l); color: var(--ink-dim); font-weight: 500; }
  .me-row { flex-wrap: wrap; }
}

/* the phrase to type, set apart; and the last chance before deleting (the operator, 2026-10-20) */
.me-phrase { font-family: var(--font-display); font-weight: 800; color: var(--ink); white-space: nowrap; }
.me-last { width: min(440px, calc(100vw - 2 * var(--space-16))); padding: var(--space-24); border: 0; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--lift); }
.me-last::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.me-last .h3 { margin: 0 0 var(--space-8); }
.me-last-acts { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-20); }
.me-last[open] { animation: me-last-in var(--dur-fast) var(--ease-out); }
@keyframes me-last-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .me-last[open] { animation: none; } }