/* Reel Lab — the account page.  Markup shell: ../account.html · logic: ../js/account.js
   Spec: ../../docs/specs/account/spec.md

   A SMALL file on purpose. Almost everything this page needs already exists in site.css,
   under the "CHECKOUT · RECEIPT · DOWNLOAD" block that receipt.html and download.html
   already use: .page, .panel, .panel__t, .line, .keyblock, .fld, .btn-wide, .note, .trust,
   .steps. This page is the fourth member of that family and reuses all of it.

   What is here is only what that family has no answer for: a seat row with a destructive
   action on the right, the sign-in card, and the status pips. Everything is prefixed
   `acct__` so nothing can shadow a site.css rule — the comment on `.fld` in site.css
   records what happened the last time a page-level class collided with a global one.

   Tokens only. No literal colours: the palette is acid green on neutral darks and it is
   declared once, in site.css `:root`. */

/* ── sign in ──────────────────────────────────────────────────────────────────────────── */

.acct__in { max-width: 420px; }
.acct__in .fld { margin-bottom: 20px; }

/* The address / code input. Sits inside a `.fld` label, so site.css's `.fld input` already
   gives it its box, focus ring and full width — this class exists so js/account.js has a
   stable hook to swap between the two states below, and so the swap cannot depend on a
   selector that belongs to another page's stylesheet. */
.acct__field { width: 100%; }

/* The six-digit field. Wide tracking and tabular figures because the one thing a person
   does here is compare what they typed against what is in the mail. */
.acct__code {
  font-family: var(--mono) !important;
  font-size: 19px !important;
  letter-spacing: .34em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Says what just happened, in one line, under the button. `role="status"` in the markup —
   the tone attribute only carries colour, never meaning on its own. */
.acct__say {
  min-height: 18px;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--fg-muted);
}
.acct__say[data-tone='ok']   { color: var(--ok); }
.acct__say[data-tone='warn'] { color: var(--warn); }
.acct__say[data-tone='bad']  { color: var(--danger); }

/* ── who you are ──────────────────────────────────────────────────────────────────────── */

.acct__who {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.acct__mail {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
  word-break: break-all;
  min-width: 0;
}
.acct__whoR { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── seats ────────────────────────────────────────────────────────────────────────────── */

.acct__seats { display: grid; gap: 8px; }
.acct__seat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--border-2);
  border-radius: 9px;
  background: var(--sunk);
}
.acct__seatN { font-size: 13.5px; font-weight: 600; color: var(--fg); min-width: 0; word-break: break-word; }
.acct__seatS {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--fg-faint);
}
.acct__seatGo { margin-left: auto; flex: none; }

/* A released row does not vanish — it greys and says so, then goes on the next load.
   A row that disappears under the cursor reads as a mis-click, not a confirmation. */
.acct__seat[data-gone='1'] { opacity: .45; }
.acct__seat[data-gone='1'] .acct__seatGo { pointer-events: none; }

/* Seat counter: three pips, filled for used. Small enough to sit in a panel title row and
   quicker to read than "2 of 3", which is also printed next to it for anyone who cannot
   see the pips. */
.acct__pips { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.acct__pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--border-3);
}
.acct__pip[data-on='1'] { background: var(--accent); border-color: var(--accent); }
.acct__panelH { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.acct__panelH .panel__t { margin: 0; }

/* ── purchases ────────────────────────────────────────────────────────────────────────── */

/* A status word, not a badge with a shape. `paid` is the boring case and gets the muted
   treatment; `refunded` is the one a person is looking for. */
.acct__stat {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.acct__stat[data-s='paid']     { color: var(--ok); }
.acct__stat[data-s='refunded'] { color: var(--warn); }
.acct__stat[data-s='pending']  { color: var(--marked); }

.acct__ord { display: grid; gap: 10px; }
.acct__ordRow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.acct__ordRow:last-child { border-bottom: 0; padding-bottom: 0; }
.acct__ordN { font-size: 14px; font-weight: 600; color: var(--fg); }
.acct__ordS {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--fg-faint);
}
/* Status right, amount hard right, and the amount reserves a column so the statuses line
   up with each other instead of drifting with the length of the plan name beside them.
   `margin-left: auto` sits on the STATUS, not the amount — pushing only the amount right
   left the status floating mid-row at a different x on every line. */
.acct__ordRow .acct__stat { margin-left: auto; }
.acct__ordAmt {
  margin-left: 16px;
  min-width: 86px;
  text-align: right;
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

/* ── small buttons ────────────────────────────────────────────────────────────────────── */

/* One quiet button, three tones. Borrowed shape from `.notify__go` in site.css rather than
   a new language: outline, mono caps, tint on hover. `danger` is outline-only too — a
   filled red button next to a licence key reads as "delete my licence", which is not what
   releasing a seat does. */
.acct__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--border-2);
  border-radius: 7px;
  background: transparent;
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.acct__btn:hover:not(:disabled) { border-color: var(--accent-35); background: var(--accent-05); color: var(--fg-soft); }
.acct__btn:disabled { opacity: .5; cursor: default; }
.acct__btn[data-tone='danger'] { color: var(--fg-faint); }
.acct__btn[data-tone='danger']:hover:not(:disabled) { border-color: var(--danger); background: transparent; color: var(--danger); }

.acct__hint {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--fg-faint);
}
.acct__hint a { color: var(--fg-muted); }

/* The page-level message under everything, reusing site.css `.note`. Tone is colour only —
   the sentence carries the meaning, which is what a screen reader gets. */
.note[data-tone='ok']  { border-color: var(--accent-35); color: var(--fg-muted); }
.note[data-tone='bad'] { border-color: var(--danger); color: var(--fg-muted); }

/* Nothing bought, nothing running — a sentence and a way out, never a bare empty box. */
.acct__empty {
  padding: 20px 0 4px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-muted);
}

@media (max-width: 560px) {
  .acct__whoR { margin-left: 0; width: 100%; }
  .acct__seat { flex-wrap: wrap; }
  .acct__seatGo { margin-left: 0; }

  /* The amount wraps onto its own line at this width, and the reserved 86px column then
     reads as a stray indent rather than a column — there is nothing left on the line to
     align it against. Drop the column and push it to the right edge instead. */
  .acct__ordAmt { min-width: 0; margin-left: auto; }
}