/* Shell styling. Token system adopted from the paper-muted design
   language (LOCKED 2026-08-21): canonical neutral tokens, 4 themes.
   The accent pair deviates by design (bgcheck teal, locked 2026-09-15,
   see DESIGN.md); the high-contrast themes keep the audited paper-muted
   accent values verbatim — contrast beats brand hue in HC modes. */

[data-theme="light"] {
  --page: #f0efe9;
  --card: #faf9f4;
  --surface: #f4f3ee;
  --bubble: #eeede5;
  --input-bg: #f4f3ee;
  --line: #dddcd2;
  --fg: #1c1e1f;
  --muted: #60676c;
  --para: #3d444b;
  --accent: #3f7d74;
  --accent-cta: #1d8577;
  --on-accent: #ffffff;
  --danger: #ab504a;
  --hover-wash: rgba(28, 30, 31, 0.05);
  --modal-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 14px 36px rgba(0, 0, 0, 0.12);
  color-scheme: light;
}
[data-theme="dark"] {
  --page: #171612;
  --card: #211f19;
  --surface: #1b1a15;
  --bubble: #26241e;
  --input-bg: #171612;
  --line: #2e2c25;
  --fg: #e8e5de;
  --muted: #ada99f;
  --para: #d2cec4;
  --accent: #7fb8ad;
  --accent-cta: #1d8577;
  --on-accent: #ffffff;
  --danger: #ce7773;
  --hover-wash: rgba(255, 255, 255, 0.06);
  --modal-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 3px rgba(255, 255, 255, 0.08), 0 6px 22px rgba(255, 255, 255, 0.045), 0 24px 64px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
/* High-contrast pair: audited paper-muted values, used verbatim. */
[data-theme="hclight"] {
  --page: #ffffff;
  --card: #ffffff;
  --surface: #f2f1ec;
  --bubble: #ececec;
  --input-bg: #ffffff;
  --line: #6f6f6f;
  --fg: #111111;
  --muted: #3f3f3f;
  --para: #2e2e2e;
  --accent: #175e3e;
  --accent-cta: #0e5c33;
  --on-accent: #ffffff;
  --danger: #8c2f28;
  --hover-wash: rgba(17, 17, 17, 0.08);
  --modal-shadow: 0 0 0 1px var(--line);
  color-scheme: light;
}
[data-theme="hcdark"] {
  --page: #000000;
  --card: #141414;
  --surface: #101010;
  --bubble: #1a1a1a;
  --input-bg: #000000;
  --line: #9a9a9a;
  --fg: #ffffff;
  --muted: #d4d4d4;
  --para: #e6e6e6;
  --accent: #7ce094;
  --accent-cta: #5ee280;
  --on-accent: #04160b;
  --danger: #ff8f86;
  --hover-wash: rgba(255, 255, 255, 0.10);
  --modal-shadow: 0 0 0 1px var(--line);
  color-scheme: dark;
}

/* Control geometry is theme-independent. */
:root { --radius: 10px; }

* { box-sizing: border-box; }

/* Author display rules (flex status line) beat the UA sheet's
   [hidden] { display: none }, so hide-by-attribute needs this guard. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--fg);
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  /* Buttons must never squish: on narrow screens the tagline wraps to
     its own line instead of squeezing the controls. */
  flex-wrap: wrap;
  row-gap: 0.4rem;
}
.brand { font-weight: 700; font-size: 1.25rem; flex-shrink: 0; }
.tag { margin: 0; color: var(--accent); min-width: 0; }
#theme_toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
}
#theme_toggle .icon { width: 16px; height: 16px; }
/* Show the mode the click leads to: moon in light modes (light, hclight),
   sun in dark modes (dark, hcdark). The contrast glyph was removed when
   the toggle became a two-way light/dark switch. */
:root[data-theme="light"] #theme_toggle .icon-sun,
:root[data-theme="hclight"] #theme_toggle .icon-sun { display: none; }
:root[data-theme="dark"] #theme_toggle .icon-moon,
:root[data-theme="hcdark"] #theme_toggle .icon-moon { display: none; }

form {
  display: grid;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

label { font-size: 0.875rem; font-weight: 600; }

textarea, input, select {
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--fg);
}

#secondary { display: grid; gap: 0.5rem; }

button {
  font: inherit;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
}

button#submit, button#add_secondary[type="submit"] { background: var(--accent-cta); color: var(--on-accent); }
button.ghost { background: transparent; color: var(--accent); border-color: var(--line); }

/* Canonical CTA class (was unstyled: the sign-in modal's send button
   rendered as a bare browser button). */
.cta {
  background: var(--accent-cta);
  color: var(--on-accent);
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font-weight: 600;
}

.help { font-size: 0.875rem; color: var(--muted); }

.linklike { color: var(--accent); text-decoration: none; font-weight: 600; }
.linklike:hover { text-decoration: underline; }

/* Policy pages (privacy/terms) and the shell footer. */
.policy {
  max-width: 38rem;
  display: grid;
  gap: 0.75rem;
}
.policy h2 { font-size: 1.0625rem; margin: 0.75rem 0 0; }
.policy ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.35rem; }
.policy a { color: var(--accent); }
.foot {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  padding: 1.5rem 0;
  font-size: 0.85rem;
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); }

#result {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.note { color: var(--accent); }

/* Research status: pulsing teal dot, from design/teal-dark.html. Killed
   outright for reduced-motion users rather than slowed down. */
.status-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cta);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

/* Static variant for non-polling notices (created-state resume): the
   pulsing dot would read as live progress, so it is parked. */
.status-line.static .live-dot { display: none; }

.error-line { color: var(--danger); }

/* Output cards: blurb is the money artifact, so it gets the emphasized
   card treatment; downloads and sources stay visually quiet. */
.blurb-card {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card);
}
.blurb-card p { margin: 0 0 0.75rem; }
.downloads { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.sources-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.sources {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.25rem;
  font-size: 0.875rem;
  word-break: break-all;
}
.sources a { color: var(--accent); }

/* Submit is inert while researching; canonical disabled treatment — the
   fill stays, a uniform fade marks inertness without a text-color trap. */
button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Payment rails: card vs crypto choice, then the invoice rows with the
   EIP-681 deep links. Rows stack on mobile. */
.pay-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0.25rem 0 0.75rem;
}
.pay-card {
  background: var(--accent-cta);
  color: var(--on-accent);
  border: none;
}
/* Invoice view: scan-first column layout — a big centered QR, details
   under it. The QR tile is 232px: phone scanners need physical size and
   the SVG inside carries a full 4-module quiet zone. */
.invoice-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
.invoice-row code {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  word-break: break-all;
}
.invoice-row a, .invoice-row button {
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
}
.invoice-qr {
  width: 232px;
  height: 232px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 8px;
}
.invoice-qr svg { width: 100%; height: 100%; }

/* Pipeline stepper: honest progress from the backend's stage marker — no
   fake percentages. Done steps get the check, the active one is accented. */
.progress-steps {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.progress-steps .step { opacity: 0.6; }
.progress-steps .step.done { opacity: 1; color: var(--accent); }
.progress-steps .step.active {
  opacity: 1;
  color: var(--fg);
  font-weight: 600;
  border-bottom: 1px solid var(--accent);
}

/* Auth controls: signed-out shows the sign-in pill; signed-in collapses to
   one icon control with the teal dot, everything else behind the menu. */
.auth-box { position: relative; margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.auth-button {
  background: var(--accent-cta);
  color: var(--on-accent);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
.user-menu-toggle {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--accent);
  flex-shrink: 0;
}
.user-menu-toggle .icon { width: 16px; height: 16px; }
/* The dot is the logged-in indicator, same treatment as the old chip. */
.user-menu-toggle .dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cta);
}
.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 13rem;
  padding: 0.35rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--modal-shadow);
}
.user-menu a, .user-menu button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
}
.user-menu a:hover, .user-menu button:hover { background: var(--hover-wash); }
.user-menu #logout { color: var(--danger); }
.user-menu-email {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.45rem 0.65rem 0.5rem;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.3rem;
}
/* High contrast row: label + a small pill switch, state readable from
   aria-checked so it states itself on the control. */
#contrast_switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
#contrast_switch .switch {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bubble);
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#contrast_switch .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s ease;
}
#contrast_switch[aria-checked="true"] .switch {
  background: var(--accent-cta);
  border-color: var(--accent-cta);
}
#contrast_switch[aria-checked="true"] .switch::after {
  transform: translateX(14px);
  background: var(--on-accent);
}
@media (prefers-reduced-motion: reduce) {
  #contrast_switch .switch, #contrast_switch .switch::after { transition: none; }
}

/* History items: the run link takes the space; per-run actions stay
   crisp at the right edge and never squeeze the link. */
#history_list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#history_list li > a { flex: 1; min-width: 0; }
.history-actions { display: inline-flex; gap: 0.35rem; flex-shrink: 0; }
.history-actions button {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
}

/* Modals: paper-muted dialog over a dimmed page; Esc and backdrop both
   dismiss. The dialog must always be opaque — the transparent incident
   came from an undefined --surface token (see LESSONS.md). */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 20, 15, 0.55);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal-dialog {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: 1.375rem;
  width: min(26.25rem, 100%);
  display: grid;
  gap: 0.6rem;
  position: relative;
  box-shadow: var(--modal-shadow);
}
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}
.modal-close:hover { background: var(--hover-wash); color: var(--fg); }

/* Invoice rows with QR: the scan target sits left of the rail details.
   The QR tile stays white in every theme — scanners need the contrast. */
.row-gap { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* Admin dash per-rail table: horizontal scroll on small screens. */
.rail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.rail-table th, .rail-table td {
  text-align: left;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--line);
}
.rail-table th { color: var(--accent); font-weight: 600; }

/* Coin chooser: three logo buttons in a row inside the payment modal. */
.coin-row { display: flex; gap: 0.6rem; margin: 0.5rem 0; flex-wrap: wrap; }
.coin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
}
.coin-btn:hover { border-color: var(--accent); }
.coin-btn.small { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
.coin-logo { width: 18px; height: 18px; }
#pay_options .pay-card { margin-bottom: 0.75rem; }