/* Members: /signin/ and /me/. THE ONLY FILE that may contain colour values for these pages (a redesign will replace this one file).
   Everything else is classes: .mem-* layout, .avatar / .av-pal-N / .px-N avatar pixels, .is-* states. Mobile first (375px). */
:root {
  --m-ok: #7bdc8e; --m-warn: #ffcf5c; --m-danger: #ff7a6b; --m-danger-bg: rgba(255, 107, 94, .12);
  --m-plus: #ffd23f; --m-plus-ink: #241a00;
  --m-av-bg: #1d1a23;
  --m-p0-1: #5cffa1; --m-p0-2: #03170b;
  --m-p1-1: #ff4fa3; --m-p1-2: #35e6ff;
  --m-p2-1: #ffa53a; --m-p2-2: #9b8cff;
  --m-p3-1: #79a8ff; --m-p3-2: #f1ebdf;
}
.mem-page { max-width: 900px; margin: 0 auto; padding: 8px var(--gutter) 0; }
.mem-page [hidden] { display: none; }
.mem-head { display: grid; gap: 8px; margin-bottom: 18px; }
.mem-head h1 { margin: 0; font: 700 clamp(1.8rem, 1.2rem + 2.6vw, 2.8rem)/1.05 var(--f-display); }
.mem-lede { max-width: 60ch; color: var(--ink-2); }
.mem-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .mem-grid { grid-template-columns: 1fr 1fr; } .mem-card.is-wide { grid-column: 1 / -1; } }
.mem-card { padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--room-2); min-width: 0; }
.mem-card h2 { margin: 0 0 10px; font: 700 1.15rem/1.2 var(--f-display); }
.mem-card h3 { margin: 14px 0 6px; font: 500 .72rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mem-note { margin: 6px 0 0; color: var(--ink-3); font-size: .92rem; max-width: 62ch; }
.mem-status { min-height: 1.5em; margin: 10px 0; font: 400 .95rem var(--f-mono); color: var(--ink-2); }
.mem-status.is-error { color: var(--m-danger); }
.mem-status.is-ok { color: var(--m-ok); }

.mem-form { display: grid; gap: 14px; }
.mem-field { display: grid; gap: 4px; }
.mem-field label, .mem-legend { font: 500 .7rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mem-field input[type="text"], .mem-field input[type="email"], .mem-field select {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: var(--r-s); background: var(--room); color: var(--ink); font: 500 1rem var(--f-display);
}
.mem-field input:focus-visible, .mem-field select:focus-visible, .mem-check input:focus-visible, .mem-radio input:focus-visible + span { outline: 2px solid var(--era); outline-offset: 2px; }
.mem-field .mem-hint { color: var(--ink-3); font-size: .88rem; }
fieldset.mem-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.mem-check, .mem-radio { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.mem-check input, .mem-radio input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--era); }
.mem-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mem-btn-danger { border-color: var(--m-danger); color: var(--m-danger); }
.mem-btn-danger:hover:not(:disabled) { background: var(--m-danger-bg); }
.mem-danger { border-color: var(--m-danger); }

.mem-choices { display: grid; gap: 12px; }
@media (min-width: 760px) { .mem-choices { grid-template-columns: 1fr 1fr; } }
.mem-or { text-align: center; color: var(--ink-3); font: 500 .8rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }

/* avatars: structure from avatars.js, colour from here */
.avatar { display: block; width: 64px; height: 64px; background: var(--m-av-bg); border-radius: var(--r-s); image-rendering: pixelated; }
.avatar .px-1 { fill: var(--av-1); }
.avatar .px-2 { fill: var(--av-2); }
.av-pal-0 { --av-1: var(--m-p0-1); --av-2: var(--m-p0-2); }
.av-pal-1 { --av-1: var(--m-p1-1); --av-2: var(--m-p1-2); }
.av-pal-2 { --av-1: var(--m-p2-1); --av-2: var(--m-p2-2); }
.av-pal-3 { --av-1: var(--m-p3-1); --av-2: var(--m-p3-2); }
.mem-id { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mem-id .avatar { width: 72px; height: 72px; }
.mem-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.mem-avatar-opt { display: block; position: relative; cursor: pointer; }
.mem-avatar-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mem-avatar-opt .avatar { width: 100%; height: auto; aspect-ratio: 1; border: 2px solid transparent; }
.mem-avatar-opt input:checked + .avatar { border-color: var(--era); }
.mem-avatar-opt input:focus-visible + .avatar { outline: 2px solid var(--ink); outline-offset: 2px; }

.mem-badge { display: inline-block; padding: 2px 8px; border: 1px solid var(--rule-2); border-radius: 4px; font: 500 .68rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.mem-badge.is-plus { background: var(--m-plus); border-color: var(--m-plus); color: var(--m-plus-ink); }

.mem-scroll { overflow-x: auto; }
.mem-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mem-table th, .mem-table td { padding: 8px 10px; text-align: left; border-top: 1px solid var(--rule); font-weight: 400; }
.mem-table thead th { font: 500 .68rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-top: 0; }
.mem-table .is-num { text-align: right; }
.mem-stat { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; margin: 0; }
.mem-stat dt { font: 500 .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mem-stat dd { margin: 0; font: 700 1.25rem var(--f-display); }
.mem-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mem-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--rule); }
.mem-empty { color: var(--ink-3); }
.mem-handle { margin: 0 0 4px; font: 700 1.5rem/1.1 var(--f-display); }