/* ════════════════════════════════════════════════════════════════════════════
   PantheonIQ — the component layer.

   Consumes public/css/tokens.css and contains NO literal colour, spacing value
   or font size of its own. Everything below is var(--…). tools/verify-ui.js
   fails the build on a literal in this file, which is what stops a screen
   quietly acquiring its own palette.

   The set is deliberately small: shell, buttons, inputs, cards, tables,
   badges, toasts, modals, and the three states every screen owes a person —
   empty, loading, error.
   ════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-base)/var(--lh-base) var(--f-sans);
  /* Responsive to 375px: the body itself never scrolls sideways. Wide things
     scroll inside their own .scroll-x container. */
  overflow-x: hidden;
}

/* ── Focus: visible, always, and never removed ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

.skip-link {
  position: absolute;
  left: var(--s-3);
  top: calc(var(--s-3) * -6);
  z-index: 100;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-4);
  text-decoration: none;
  transition: top var(--dur);
}
.skip-link:focus { top: var(--s-3); }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) var(--s-4);
}
.topbar-in {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.01em;
}
.wordmark .iq { color: var(--brand-text); }
.wordmark svg { display: block; }

.console-tag {
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-radius: var(--r-full);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--brand-line);
  background: var(--brand-bg);
  color: var(--brand-text);
}
.console-tag.dev {
  border-color: var(--info-line);
  background: var(--info-bg);
  color: var(--info-text);
}

.topbar-spacer { flex: 1 1 var(--s-4); }

.whoami {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.nav ul {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--s-4);
  list-style: none;
  display: flex;
  gap: var(--s-1);
}
.nav a {
  display: block;
  white-space: nowrap;
  padding: var(--s-3) var(--s-3);
  font-size: var(--fs-base);
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] {
  color: var(--brand-text);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

.crumbs {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-3) var(--s-4) 0;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crumbs a { color: var(--text-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-strong); }

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-8);
}

.page-head { margin-bottom: var(--s-5); }
.auth-page { max-width: var(--auth-maxw); padding-top: var(--s-7); }
.page-head h1 { margin: 0; font-size: var(--fs-xl); letter-spacing: -.015em; line-height: var(--lh-tight); }
.page-head p { margin: var(--s-2) 0 0; color: var(--text-muted); font-size: var(--fs-base); max-width: 68ch; }

h2 { margin: 0 0 var(--s-2); font-size: var(--fs-md); font-weight: 650; letter-spacing: -.01em; }
h3 { margin: 0 0 var(--s-2); font-size: var(--fs-base); font-weight: 650; }
a { color: var(--brand-text); }

/* ── Grid ───────────────────────────────────────────────────────────────── */
/* ALL TWELVE are defined, not just the ones in use today. A screen written with
   an undefined .col-N does not fail loudly — the item silently takes a single
   grid track, roughly 94px, and pushes the page sideways. That happened once,
   with .col-5 and .col-7 on the Help screen, and tools/verify-ui.js now also
   checks that every col-N class a page uses actually exists here. */
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(12, 1fr); }
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10  { grid-column: span 10; }
.col-11  { grid-column: span 11; }
.col-12  { grid-column: span 12; }
@media (max-width: 900px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 { grid-column: span 12; }
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-4);
  box-shadow: var(--shadow-1);
}
.card > .hint {
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  margin: 0 0 var(--s-4);
  line-height: var(--lh-base);
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }

/* ── Stat tile ──────────────────────────────────────────────────────────── */
.stat { display: flex; flex-direction: column; gap: var(--s-1); }
.stat .n { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.02em; line-height: 1; }
.stat .k { font-size: var(--fs-sm); color: var(--text-muted); }
.stat.alarm .n { color: var(--danger-text); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
button, .btn {
  font: 600 var(--fs-sm)/1 var(--f-sans);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-decoration: none;
  transition: background var(--dur), border-color var(--dur);
}
button:hover, .btn:hover { background: var(--surface-3); }
button:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand); filter: brightness(1.08); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }
.btn-danger:hover { background: var(--danger); filter: brightness(1.08); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); }
.btn-icon { padding: var(--s-2); width: calc(var(--s-4) + var(--s-5)); }

.btn-row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-bottom: var(--s-2); }
label .opt { font-weight: 400; color: var(--text-subtle); }

input[type=text], input[type=url], input[type=email], input[type=search], input[type=password],
input[type=number], input[type=time], input[type=color], select, textarea {
  width: 100%;
  font: var(--fs-base)/var(--lh-base) var(--f-sans);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: var(--s-3);
}
textarea { resize: vertical; }
input[type=color] { padding: var(--s-1); height: calc(var(--s-6) + var(--s-2)); cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
.field { margin-bottom: var(--s-4); }
.field .note { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: var(--s-2); }
.field .note.bad { color: var(--danger-text); }
.field .note.good { color: var(--ok-text); }

.checkline { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3); }
.checkline input { margin-top: var(--s-1); flex: none; }
.checkline label { margin: 0; font-weight: 400; color: var(--text); font-size: var(--fs-base); }

fieldset { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-3) var(--s-4) var(--s-4); margin: 0 0 var(--s-4); }
legend { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); padding: 0 var(--s-2); }

/* ── Table ──────────────────────────────────────────────────────────────── */
/* `position: relative` is not decoration. .sr-only below is absolutely
   positioned, and an absolutely-positioned element with no positioned ancestor
   resolves against the page — so a visually-hidden <th> caption inside a table
   wider than the viewport was landing at x=594 and giving the whole PAGE a
   sideways scrollbar at 375px. Making the scroll container the containing block
   keeps it inside the thing that actually scrolls. */
.scroll-x { overflow-x: auto; overscroll-behavior-x: contain; position: relative; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 650; color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--f-mono); font-size: var(--fs-xs); }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 650;
  border-radius: var(--r-full);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  white-space: nowrap;
}
.badge.ok      { background: var(--ok-bg);     border-color: var(--ok-line);     color: var(--ok-text); }
.badge.warn    { background: var(--warn-bg);   border-color: var(--warn-line);   color: var(--warn-text); }
.badge.bad     { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-text); }
.badge.info    { background: var(--info-bg);   border-color: var(--info-line);   color: var(--info-text); }
.badge.brand   { background: var(--brand-bg);  border-color: var(--brand-line);  color: var(--brand-text); }

/* ── Callout ────────────────────────────────────────────────────────────── */
.callout {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  background: var(--surface-2);
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
}
.callout.info   { background: var(--info-bg);   border-color: var(--info-line);   color: var(--info-text); }
.callout.warn   { background: var(--warn-bg);   border-color: var(--warn-line);   color: var(--warn-text); }
.callout.bad    { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-text); }
.callout.ok     { background: var(--ok-bg);     border-color: var(--ok-line);     color: var(--ok-text); }
.callout strong { color: inherit; }

/* ── The three states every screen owes a person ────────────────────────── */
.state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-2);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.state h3 { color: var(--text); margin-bottom: var(--s-2); }
.state p { margin: 0 auto; max-width: 52ch; }
.state.error { border-style: solid; border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger-text); }
.state.error h3 { color: var(--danger-text); }

.loading { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-6); color: var(--text-subtle); font-size: var(--fs-sm); }
.spinner {
  width: var(--s-4); height: var(--s-4); flex: none;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand-text);
  border-radius: var(--r-full);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
  * { transition-duration: .01ms !important; }
}

.skeleton {
  background: var(--surface-2);
  border-radius: var(--r-1);
  height: var(--s-4);
  margin-bottom: var(--s-2);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%) translateY(calc(var(--s-8) * 2));
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-3);
  border-radius: var(--r-full);
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  max-width: calc(100vw - var(--s-6));
  transition: transform var(--dur) ease-out;
  z-index: 50;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.ok  { background: var(--ok-bg);     border-color: var(--ok-line);     color: var(--ok-text); }
.toast.bad { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-text); }

/* ── Modal ──────────────────────────────────────────────────────────────── */
dialog {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  background: var(--surface);
  color: var(--text);
  padding: var(--s-5);
  max-width: 46ch;
  width: calc(100vw - var(--s-6));
  box-shadow: var(--shadow-3);
}
dialog::backdrop { background: var(--overlay); }
dialog h2 { margin-bottom: var(--s-3); }
dialog p { margin: 0 0 var(--s-4); color: var(--text-muted); font-size: var(--fs-sm); }
dialog .btn-row { justify-content: flex-end; }

/* ── Misc ───────────────────────────────────────────────────────────────── */
.mono { font-family: var(--f-mono); font-size: var(--fs-xs); word-break: break-all; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); font-size: var(--fs-sm); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.list li:last-child { border-bottom: 0; }
.dl { display: grid; grid-template-columns: minmax(0, 11em) 1fr; gap: var(--s-2) var(--s-4); margin: 0; font-size: var(--fs-sm); }
.dl dt { color: var(--text-subtle); }
.dl dd { margin: 0; }
.stack > * + * { margin-top: var(--s-4); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
img { max-width: 100%; height: auto; }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--s-3); }
.m-0 { margin: 0; }
.mt-only-3 { margin: var(--s-3) 0 0; }
.justify-center { justify-content: center; }
.measure-wide { max-width: 80ch; }
.text-danger { color: var(--danger-text); }
.section-rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }
.embed-code { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-3); white-space: pre-wrap; margin: 0 0 var(--s-3); }
.preview-empty { border: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.swatch-light { background: var(--fixed-light); }
.swatch-dark { background: var(--fixed-dark); }

/* Shared review shell: quiet workspace, with a denser operational console. */
.eyebrow { text-transform: uppercase; letter-spacing: .12em; color: var(--brand-text); font-size: var(--fs-xs); font-weight: 650; margin: 0 0 var(--s-3); }
.review-banner { margin: 0 0 var(--s-5); color: var(--brand-text); font-size: var(--fs-xs); letter-spacing: .035em; }
.page-head .eyebrow { color: var(--brand-text); font-size: var(--fs-xs); margin: 0 0 var(--s-3); }
.billing-plan { background: linear-gradient(120deg, var(--surface), var(--brand-bg)); }
.plan-label { font-size: var(--fs-lg); font-weight: 600; }
.billing-price { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.035em; margin: var(--s-4) 0; font-variant-numeric: tabular-nums; }
.billing-price span { font-size: var(--fs-base); color: var(--text-muted); font-weight: 400; letter-spacing: 0; }
.invoice-history { position: relative; }
.invoice-history td.num { white-space: nowrap; }
@media (max-width: 620px) {
  .invoice-history table, .invoice-history tbody { display: block; }
  .invoice-history thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .invoice-history tbody tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .invoice-history tbody tr:last-child { border: 0; }
  .invoice-history td { border: 0; padding: 0; text-align: left; }
  .invoice-history td:first-child { grid-column: span 2; }
  .invoice-history td::before { content: attr(data-label); display: block; margin-bottom: var(--s-1); font-size: var(--fs-xs); color: var(--text-subtle); }
}
.next-actions { list-style: none; padding: 0; margin: 0; }
.next-actions li { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.next-actions li:last-child { border: 0; }
.next-actions .step-number { border: 1px solid var(--brand-line); color: var(--brand-text); border-radius: var(--r-full); min-width: 32px; height: 32px; display: grid; place-items: center; }
.next-actions p { margin: var(--s-1) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.metric-row .stat { border-left: 1px solid var(--line); padding-left: var(--s-4); }
.metric-row .stat:first-child { border: 0; padding-left: 0; }
@media (max-width: 620px) { .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
[data-console] .topbar { padding: var(--s-4) var(--s-6); }
[data-console] .topbar-in { max-width: none; }
[data-console] .nav { position: fixed; left: 0; top: 77px; bottom: 0; width: var(--nav-w); border-right: 1px solid var(--line); border-bottom: 0; padding: var(--s-6) var(--s-3); display: flex; flex-direction: column; }
[data-console] .nav ul { display: grid; gap: var(--s-2); padding: 0; margin: 0; }
[data-console] .nav a { border: 0; border-radius: var(--r-2); padding: var(--s-3) var(--s-4); min-height: 44px; }
[data-console] .nav a[aria-current] { background: var(--brand-bg); box-shadow: inset 3px 0 var(--brand); }
.nav-label { padding: 0 var(--s-4); margin: 0 0 var(--s-4); text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-xs); color: var(--text-subtle); }
.nav-foot { margin-top: auto; padding: var(--s-5) var(--s-4) 0; color: var(--text-muted); font-size: var(--fs-xs); }
.nav-foot strong { font-weight: 600; }
.nav-foot p { line-height: 1.65; }
.nav-foot a { display: block; padding: var(--s-2) 0 !important; white-space: normal; }
.dev-review-link { color: var(--brand-text); font-size: var(--fs-xs); margin-top: var(--s-3); border-top: 1px solid var(--line) !important; }
[data-console] main, [data-console] .crumbs { margin-left: var(--nav-w); max-width: calc(var(--maxw) + var(--s-8)); padding-left: var(--s-7); padding-right: var(--s-7); }
[data-console] main { padding-top: var(--s-7); }
[data-console] .page-head { margin-bottom: var(--s-6); }
[data-console] .page-head h1 { font-size: var(--fs-2xl); letter-spacing: -.035em; }
[data-console] .card { padding: var(--s-5); box-shadow: none; }
[data-console] .grid { gap: var(--s-5); grid-template-columns: repeat(12, minmax(0, 1fr)); }
[data-console] .page-head p { line-height: 1.7; }
[data-console="dev"] main { padding-top: var(--s-5); }
[data-console="dev"] .card { padding: var(--s-4); }
[data-console="dev"] .grid { gap: var(--s-4); }
.card, .dl dd { min-width: 0; overflow-wrap: anywhere; }
button, .btn { min-height: 44px; }
input, select, textarea { scroll-margin-top: var(--s-6); }
.stat .n { font-variant-numeric: tabular-nums; }
.card-head { margin-bottom: var(--s-3); }
.toast.error { background: var(--danger-bg); color: var(--danger-text); }
#piq-menu { display: none; }
.nav-drawer { margin: 0; height: 100dvh; max-height: none; max-width: 320px; border-radius: 0; padding: var(--s-4); }
@media (max-width: 1050px) {
  [data-console] .topbar { padding: var(--s-3) var(--s-4); }
  [data-console] .topbar-in { gap: var(--s-2); }
  [data-console] .console-tag { display: none; }
  [data-console] .whoami { flex-basis: 100%; order: 5; font-size: var(--fs-xs); }
  [data-console] main, [data-console] .crumbs { margin-left: 0; padding-left: var(--s-4); padding-right: var(--s-4); }
  [data-console] main { padding-top: var(--s-6); }
  [data-console] #piq-shell > .nav { display: none; }
  #piq-menu { display: inline-flex; }
  [data-console] .nav-drawer .nav { position: static; width: 100%; padding: var(--s-5) 0; border: 0; min-height: calc(100dvh - 110px); }
  [data-console] .card { padding: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}