/* Xavira portal — utility classes (vanilla equivalents of the design-system primitives).
 * Loaded AFTER tokens.css. Replaces the legacy styles.css for pages that have been rebranded.
 * Page-specific styles stay inline in each HTML <style> block. */

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--x-ink-0); min-height: 100vh; color: var(--x-fg); font-family: var(--x-sans); -webkit-font-smoothing: antialiased; }
/* Kill horizontal page scroll. Any single oversized element (wide table,
   long unwrapped URL, off-screen aurora blob, full-bleed code <pre>)
   would otherwise let the user drag the whole page sideways — feels
   broken / cheap on mobile. `overflow-x: clip` is the modern equivalent
   of `overflow-x: hidden` but doesn't create a new scroll container, so
   position:sticky etc. keep working. */
html, body { overflow-x: clip; max-width: 100vw; }
/* Wrap long inline code / URLs so they never push the page wider than the
   viewport on phones. Big <pre> blocks already have overflow-x: auto. */
code { overflow-wrap: anywhere; word-break: break-word; }
a { color: var(--x-accent); text-decoration: none; cursor: pointer; }
a:hover { color: var(--x-accent-press); }
button { font-family: inherit; }
code, pre { font-family: var(--x-mono); }
pre { background: var(--x-ink-2); padding: 16px; border-radius: 10px; border: 1px solid var(--x-line); overflow-x: auto; font-size: 13px; line-height: 1.5; color: var(--x-fg); }
::selection { background: var(--x-accent); color: #fff; }

/* ───── Aurora wash (already in tokens.css; ensure z-index works) ───── */

/* ───── App layout ───── */
.x-app   { max-width: 1200px; margin: 0 auto; padding: 0 32px 80px; }
.x-page-head { padding: 40px 0 28px; border-bottom: 1px solid var(--x-line); margin-bottom: 32px; display: flex; align-items: flex-end; gap: 24px; }
.x-page-head h1 { margin: 0; font: 600 40px/1.08 var(--x-sans); letter-spacing: -0.03em; }
.x-page-head .x-lede { margin: 8px 0 0; font: 400 15px/1.5 var(--x-sans); color: var(--x-fg-soft); }
.x-page-head .x-action { margin-left: auto; }

.x-section { margin-bottom: 32px; }

/* ───── Cards ───── */
.x-card { background: var(--x-ink-1); border: 1px solid var(--x-line); border-radius: 10px; padding: 24px; box-shadow: 0 1px 2px rgba(20,20,26,0.03); }
.x-card-sheen { background: linear-gradient(180deg, var(--x-ink-1) 0%, var(--x-ink-2) 100%); }
.x-card-flat { padding: 0; overflow: hidden; }

/* ───── Buttons ───── */
.x-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; font: 500 14px/1 var(--x-sans); letter-spacing: -0.005em; border-radius: 6px; border: 0; cursor: pointer; transition: background var(--x-dur-fast) var(--x-ease), filter var(--x-dur-fast) var(--x-ease), box-shadow var(--x-dur-fast) var(--x-ease); white-space: nowrap; }
.x-btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
.x-btn-sm { height: 28px; padding: 0 12px; font-size: 12px; border-radius: 5px; }
/* Primary keeps its gradient on hover — flicker came from gradient → solid swap.
   `filter: brightness` smoothly lifts the whole layer without re-blending the bg. */
.x-btn-primary { background: var(--x-gradient-brand); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 16px var(--x-accent-glow); }
.x-btn-primary:hover { background: var(--x-gradient-brand); color: #fff; filter: brightness(1.08); }
.x-btn-secondary { background: var(--x-ink-1); color: var(--x-fg); border: 1px solid var(--x-line-strong); }
.x-btn-secondary:hover { background: var(--x-ink-2); color: var(--x-fg); }
.x-btn-ghost { background: transparent; color: var(--x-fg-soft); }
.x-btn-ghost:hover { background: var(--x-ink-2); color: var(--x-fg); }
.x-btn-danger { background: transparent; color: var(--x-danger); border: 1px solid var(--x-line-strong); }
.x-btn-danger:hover { background: var(--x-danger-soft); color: var(--x-danger); }
.x-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.x-btn-block { width: 100%; justify-content: center; }

/* ───── Inputs ───── */
.x-input { display: flex; align-items: center; background: var(--x-ink-1); border: 1px solid var(--x-line); border-radius: 6px; padding: 0 12px; height: 36px; transition: border-color var(--x-dur-fast), box-shadow var(--x-dur-fast); width: 100%; }
.x-input:focus-within { border-color: var(--x-accent); box-shadow: 0 0 0 3px var(--x-accent-glow); }
.x-input input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--x-fg); font: 400 14px/1.4 var(--x-sans); width: 100%; }
.x-input input::placeholder { color: var(--x-fg-dim); }
.x-input-mono input { font: 400 13px/1.4 var(--x-mono); }

/* ───── Type ───── */
.x-caption { font: 500 11px/1.3 var(--x-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--x-fg-muted); }
.x-mono   { font: 400 13px/1.5 var(--x-mono); }
.x-mono-sm{ font: 400 11px/1.4 var(--x-mono); }

/* ───── Pills ───── */
.x-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font: 500 10px/1 var(--x-mono); text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; }
.x-pill::before { content: ''; width: 5px; height: 5px; border-radius: 99px; background: currentColor; }
.x-pill-nodot::before { display: none; }
.x-pill-positive { color: var(--x-positive); background: var(--x-positive-soft); }
.x-pill-warn     { color: var(--x-warn);     background: var(--x-warn-soft); }
.x-pill-danger   { color: var(--x-danger);   background: var(--x-danger-soft); }
.x-pill-info     { color: var(--x-info);     background: var(--x-info-soft); }
.x-pill-brand    { color: var(--x-accent);   background: var(--x-accent-soft); }
.x-pill-teal     { color: var(--x-accent-2); background: var(--x-accent-2-soft); }
.x-pill-amber    { color: var(--x-accent-3); background: var(--x-accent-3-soft); }
.x-pill-neutral  { color: var(--x-fg-soft);  background: var(--x-ink-2); }

/* ───── Tables ───── */
.x-table { width: 100%; border-collapse: collapse; }
.x-table thead th { text-align: left; padding: 10px 20px; background: var(--x-ink-2); font: 500 10px/1 var(--x-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--x-fg-muted); border-bottom: 1px solid var(--x-line); }
.x-table tbody td { padding: 14px 20px; border-top: 1px solid var(--x-line); font: 400 13px/1.4 var(--x-mono); color: var(--x-fg); vertical-align: middle; }
.x-table tbody tr { cursor: pointer; transition: background var(--x-dur-fast); }
.x-table tbody tr:hover td { background: var(--x-ink-2); }
.x-table-empty { padding: 32px; text-align: center; color: var(--x-fg-muted); font: 400 13px/1.4 var(--x-sans); }

/* ───── Metric blocks ───── */
.x-metric .x-caption { margin-bottom: 10px; }
.x-metric-value { font: 500 40px/1.05 var(--x-sans); letter-spacing: -0.03em; color: var(--x-fg); font-variant-numeric: tabular-nums; margin: 0 0 6px; }
.x-metric-hint  { font: 400 12px/1.4 var(--x-mono); color: var(--x-fg-muted); }
.x-metric-big .x-metric-value { font-size: 56px; line-height: 1.05; }
/* Amber→magenta gradient — used on credit balance */
.x-metric-amber-magenta { background: linear-gradient(135deg, var(--x-accent-3) 0%, var(--x-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ───── Nav ───── */
#xavira-nav { position: sticky; top: 0; z-index: 10; background: rgba(250,246,242,0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--x-line); }
[data-theme="dark"] #xavira-nav { background: rgba(7,7,11,0.78); }
.x-nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 28px; }
.x-nav-brand { display: inline-flex; align-items: center; gap: 1px; color: var(--x-fg); }
.x-nav-brand:hover { color: var(--x-fg); }
.x-nav-brand svg { display: block; flex-shrink: 0; }
.x-nav-brand .x-wordmark { font: 900 18px/1 var(--x-sans); letter-spacing: -0.025em; color: var(--x-fg); }
.x-nav-links { display: flex; gap: 4px; align-items: center; }
.x-nav-links a { padding: 7px 12px; font: 500 13px/1 var(--x-sans); color: var(--x-fg-muted); border-radius: 6px; transition: color var(--x-dur-fast), background var(--x-dur-fast); }
.x-nav-links a:hover { color: var(--x-fg); }
.x-nav-links a.x-active { color: var(--x-fg); background: var(--x-ink-2); }
.x-nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.x-nav-balance { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: var(--x-ink-2); border: 1px solid var(--x-line); color: var(--x-fg); font-variant-numeric: tabular-nums; text-decoration: none; }
.x-nav-balance:hover { color: var(--x-fg); background: var(--x-ink-3); }
.x-nav-balance .x-balance-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--x-positive); }
.x-nav-balance .x-balance-num { font: 500 12px/1 var(--x-mono); }
.x-nav-balance .x-balance-cr  { font: 500 10px/1 var(--x-mono); color: var(--x-fg-muted); text-transform: uppercase; letter-spacing: 0.12em; }
.x-nav-avatar { width: 30px; height: 30px; border-radius: 99px; background: var(--x-accent-soft); border: 1px solid var(--x-accent-line); display: flex; align-items: center; justify-content: center; font: 600 11px/1 var(--x-sans); color: var(--x-accent); cursor: pointer; text-decoration: none; transition: background var(--x-dur-fast), filter var(--x-dur-fast); }
.x-nav-avatar:hover { color: var(--x-accent); filter: brightness(0.96); }
.x-nav-avatar svg { width: 14px; height: 14px; }
/* Separate sign-out button — door-arrow icon, danger-tint on hover so
   the action reads as "leave" not "close". Sits next to the avatar
   (which now links to /profile) so the two affordances don't collide. */
.x-nav-signout { width: 30px; height: 30px; padding: 0; border-radius: 99px; background: transparent; border: 1px solid var(--x-line); color: var(--x-fg-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color var(--x-dur-fast), border-color var(--x-dur-fast), background var(--x-dur-fast); }
.x-nav-signout:hover { color: var(--x-danger); border-color: var(--x-danger); background: var(--x-danger-soft); }

/* Mobile hamburger + drawer for the shared nav. Mirrors the landing
   marketing-nav pattern. ≤720px: nav links collapse into a drawer
   triggered by the hamburger. */
.x-nav-hamburger { display: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--x-line); background: transparent; border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; transition: background var(--x-dur-fast); }
.x-nav-hamburger:hover { background: var(--x-ink-2); }
.x-nav-hamburger span { display: block; width: 18px; height: 1.6px; background: var(--x-fg); border-radius: 2px; transition: transform var(--x-dur-fast), opacity var(--x-dur-fast); }
.x-nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.x-nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.x-nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.x-nav-mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(250,246,242,0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--x-line); padding: 14px 24px 20px; }
[data-theme="dark"] .x-nav-mobile-menu { background: rgba(7,7,11,0.97); }
.x-nav-mobile-menu.x-show { display: block; }
.x-nav-mobile-menu nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.x-nav-mobile-menu nav a { padding: 12px 8px; font: 500 15px/1 var(--x-sans); color: var(--x-fg); text-decoration: none; border-bottom: 1px solid var(--x-line); }
.x-nav-mobile-menu nav a:last-child { border-bottom: 0; }
.x-nav-mobile-menu nav a.x-active { color: var(--x-accent); }
.x-nav-mobile-menu .x-nav-mobile-signout { width: 100%; justify-content: center; }

@media (max-width: 720px) {
  .x-nav-links { display: none; }
  .x-nav-hamburger { display: inline-flex; }
  /* Hide avatar + signout in top-bar on mobile — both move into the drawer */
  .x-nav-right .x-nav-avatar,
  .x-nav-right .x-nav-signout { display: none; }
}

/* ───── Banners ───── */
.x-banner-key { background: var(--x-positive-soft); border: 1px solid var(--x-positive); border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; display: flex; align-items: center; gap: 16px; }
.x-banner-key .x-banner-content { flex: 1; }
.x-banner-key .x-banner-title { font: 500 13px/1.4 var(--x-sans); color: var(--x-positive); }
.x-banner-key .x-banner-key-text { font: 400 13px/1.5 var(--x-mono); color: var(--x-positive); margin-top: 6px; word-break: break-all; }
.x-banner-warn { background: var(--x-warn-soft); border: 1px solid var(--x-warn); color: var(--x-warn); border-radius: 10px; padding: 14px 18px; font: 400 13px/1.4 var(--x-sans); margin-bottom: 16px; }
.x-banner-danger { background: var(--x-danger-soft); border: 1px solid var(--x-danger); color: var(--x-danger); border-radius: 10px; padding: 14px 18px; font: 400 13px/1.4 var(--x-sans); margin-bottom: 16px; }

/* ───── Section heads (inside tables/cards) ───── */
.x-section-head { display: flex; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--x-line); }
.x-section-head .x-title { font: 600 18px/1.25 var(--x-sans); letter-spacing: -0.015em; }
.x-section-head .x-subtitle { font: 400 12px/1.4 var(--x-mono); color: var(--x-fg-muted); margin-top: 4px; }
.x-section-head .x-actions { margin-left: auto; display: flex; gap: 8px; }

/* ───── Legal pages (terms / privacy / dpa) ───── */
.x-legal { max-width: 760px; margin: 0 auto; padding: 0 32px 120px; }
.x-legal-meta { font: 500 11px/1 var(--x-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--x-fg-muted); margin-bottom: 14px; }
.x-legal h1 { font: 600 36px/1.1 var(--x-sans); letter-spacing: -0.03em; margin: 0 0 12px; }
.x-legal .x-lede { font: 400 16px/1.55 var(--x-sans); color: var(--x-fg-soft); margin: 0 0 8px; }
.x-legal .x-effective { font: 400 13px/1.4 var(--x-mono); color: var(--x-fg-muted); padding: 12px 16px; background: var(--x-ink-2); border-radius: 8px; margin: 24px 0 40px; border: 1px solid var(--x-line); }
.x-legal .x-effective strong { color: var(--x-fg); font-weight: 500; }
.x-legal h2 { font: 600 22px/1.25 var(--x-sans); letter-spacing: -0.02em; margin: 40px 0 12px; color: var(--x-fg); }
.x-legal h2 .x-num { font: 500 14px/1 var(--x-mono); color: var(--x-fg-muted); margin-right: 12px; }
.x-legal h3 { font: 600 15px/1.3 var(--x-sans); margin: 24px 0 8px; color: var(--x-fg); }
.x-legal p { font: 400 15px/1.65 var(--x-sans); color: var(--x-fg); margin: 0 0 14px; }
.x-legal ul, .x-legal ol { font: 400 15px/1.65 var(--x-sans); color: var(--x-fg); padding-left: 22px; margin: 0 0 16px; }
.x-legal li { margin-bottom: 6px; }
.x-legal a { color: var(--x-accent); text-decoration: underline; text-underline-offset: 2px; }
.x-legal code { background: var(--x-ink-2); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 13px; }
.x-legal blockquote { border-left: 3px solid var(--x-accent); padding: 4px 0 4px 16px; margin: 16px 0; font: 400 14px/1.55 var(--x-sans); color: var(--x-fg-soft); }
.x-legal table { width: 100%; border-collapse: collapse; font: 400 14px/1.45 var(--x-sans); margin: 12px 0 16px; }
.x-legal table th { text-align: left; padding: 8px 12px; background: var(--x-ink-2); border-bottom: 1px solid var(--x-line); font: 500 11px/1 var(--x-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--x-fg-muted); }
.x-legal table td { padding: 10px 12px; border-bottom: 1px solid var(--x-line); vertical-align: top; }
.x-legal .x-warn-note { background: var(--x-warn-soft); border: 1px solid var(--x-warn); border-radius: 8px; padding: 14px 16px; font: 400 14px/1.55 var(--x-sans); color: var(--x-warn); margin: 24px 0; }

/* ───── Footer (legal links across all pages) ───── */
.x-footer { border-top: 1px solid var(--x-line); margin-top: 80px; padding: 24px 32px; max-width: 1200px; margin-left: auto; margin-right: auto; display: flex; gap: 24px; align-items: center; font: 400 12px/1 var(--x-sans); color: var(--x-fg-muted); flex-wrap: wrap; }
.x-footer a { color: var(--x-fg-muted); text-decoration: none; }
.x-footer a:hover { color: var(--x-fg); text-decoration: none; }
.x-footer .x-footer-brand { color: var(--x-fg); font: 500 12px/1 var(--x-sans); }
.x-footer .x-footer-sep { margin-left: auto; }