/* Live Commerce Copilot — account portal
   ---------------------------------------------------------------------------
   Load tokens.css before this file. The portal previously defined its own
   orange, its own ink and its own font, so a visitor crossing from the
   marketing site into signup saw the design change under them. It now consumes
   exactly the same tokens, type stack and interaction rules.

   It also had no hover, focus, active or transition states of any kind. */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-items: center;
  padding: 32px 18px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.portal {
  width: min(100%, 560px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 20px 60px oklch(var(--shadow-ch) / 0.10);
}

.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.brand img { width: 38px; height: 38px; }

h1 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.08; margin: 34px 0 10px; text-wrap: balance; }
h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; margin: 28px 0 10px; }
p { color: var(--ink-soft); line-height: 1.55; }

/* --------------------------------------------------------------- forms --- */

form { display: grid; gap: 14px; margin-top: 26px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }

input, select {
  width: 100%;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 12px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 150ms ease-out;
}

input:hover, select:hover { border-color: var(--ink-faint); }
input:focus-visible, select:focus-visible { border-color: var(--flame-deep); }

/* ------------------------------------------------------------- buttons --- */

button, .button {
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--flame-solid);
  color: var(--on-flame-strong);
  padding: 13px 18px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}

button:hover, .button:hover { background: var(--flame-solid-hover); color:var(--on-button-hover); }
button:active, .button:active { transform: translateY(1px); }

button.secondary, .button.secondary {
  background: var(--paper-sunk);
  color: var(--ink);
  border-color: var(--rule-strong);
}
button.secondary:hover, .button.secondary:hover { background: var(--surface); border-color: var(--ink); color:var(--ink); }

button:disabled, button[disabled] { opacity: 0.55; cursor: not-allowed; }
button:disabled:hover { background: var(--flame-solid); }

/* -------------------------------------------------------------- status --- */

.form-message { margin-top: 18px; font-size: 14px; color: var(--ink-soft); }
.form-message:empty { margin-top: 0; }
.form-message.error { color: var(--danger); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.seats { list-style: none; padding: 0; display: grid; gap: 8px; }
.seats li { border: 1px solid var(--rule); border-radius: 12px; padding: 12px; display: grid; gap: 3px; }
.seats span { color: var(--ink-soft); font-size: 13px; }

.privacy { font-size: 12px; margin-top: 26px; color: var(--ink-faint); }

/* Links inside portal copy are body-copy links: underlined at rest. */
p a, label a {
  color: var(--flame-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color 150ms ease-out, text-decoration-thickness 150ms ease-out;
}
p a:hover, label a:hover,
p a:focus-visible, label a:focus-visible { text-decoration-thickness: 2px; }

/* A checkbox and its wording belong on one line; the grid `label` rule above is
   for stacked field labels and was breaking this row into three. */
label.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
label.consent input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin-top: 2px;
  accent-color: var(--flame-deep);
}

/* Legal pages are long-form reading rather than a form, so they get a wider
   measure and more room between sections than the card default. */
.portal.legal { width: min(100%, 720px); }
.portal.legal h2 { margin-top: 32px; }
.portal.legal p { margin: 10px 0; }
.portal.legal p + h2 { margin-top: 34px; }

/* --------------------------------------------------------- theme toggle --- */

.portal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* The shared .theme-toggle rules in tokens.css must beat portal.css's blanket
   `button` fill, which would otherwise paint all three as orange blocks. */
.theme-toggle button { background: none; border: 0; padding: 0; }
.theme-toggle button:hover { background: var(--paper-sunk); }

/* Keep the existing sign-in and legal pages usable on small trial devices. */
.portal { min-width: 0; overflow-wrap: anywhere; }
.portal-head { flex-wrap: wrap; }
.brand img { flex: none; }
input, select { min-width: 0; max-width: 100%; }
@media (max-width: 520px) {
  body { padding: 20px 16px; }
  .portal { padding: 24px; border-radius: 16px; }
  .portal-head { gap: 18px; }
  .actions > a { max-width: 100%; }
}

/* The hidden attribute always wins over component display rules (invite page states). */
.portal [hidden] { display: none !important; }