/* The client page. Tokens only (web/ui/tokens.css owns every colour). Quiet = grey, not-confirmed = amber,
   ended = blue-grey; never the magenta of EMITTING and never green. */
.portal { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 16px;
  background: var(--canvas); min-height: 100vh; align-content: start; }
.portal-brand { font-weight: 700; color: var(--brand); letter-spacing: .02em; }
.portal h1 { margin: 0; font-size: 22px; }
.portal h2 { margin: 0; font-size: 18px; }
.portal-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px;
  padding: 20px; display: grid; gap: 14px; }
.portal-note { margin: 0; font-size: 13px; color: var(--ink-faint); }
.portal-error { margin: 0; padding: 10px 12px; border-radius: 8px; font-weight: 600;
  background: var(--state-fault-bg); color: var(--state-fault-fg); }
.portal-clock { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.portal-status { margin: 0; padding: 18px 16px; border-radius: 12px; font-size: 22px; font-weight: 700;
  line-height: 1.25; border: 2px solid var(--state-warn-line); background: var(--state-warn-bg);
  color: var(--state-warn-fg); }
.portal-status[data-kind="QUIET"] { border-color: var(--state-quiet-line); background: var(--state-quiet-bg);
  color: var(--state-quiet-fg); }
.portal-status[data-kind="ENDED"] { border-color: var(--state-done-line); background: var(--state-done-bg);
  color: var(--state-done-fg); }
.portal-reason { margin: 0; font-size: 15px; color: var(--ink-muted); }
.portal-logout { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0;
  font-size: 13px; color: var(--ink-faint); }
.portal .fld input, .portal .fld select { width: 100%; }
.portal .btn { width: 100%; }
.portal .btn--sm { width: auto; }