/* File: assets/app.css
   Project: Lexis (single PHP app)
   Version: 3.0.0
   Last updated: 2026-07-06
   Purpose: The single stylesheet for Lexis — a full visual redesign to a clean,
            dense, modern-SaaS aesthetic (Linear / Stripe): a real design-token
            system, a proper app bar, unified data tables (header + rows one cohesive
            element), styled inputs with focus rings, and a hero fetched-code card.
            Presentation only — the class + markup contract from R2/R3 is unchanged,
            so no app/JS wiring is affected. CSP-safe (external stylesheet only; the
            select caret is a data: URI, permitted by img-src 'self' data:). Fully
            responsive mobile-first (320 / 768 / 1280), grid/flex (no fixed-px
            layouts), >=44px touch targets on coarse pointers, WCAG AA contrast,
            visible focus, prefers-reduced-motion honored. Retheme from :root only.
   Dependencies: markup/classes in src/Web/templates/*, JS hooks in assets/app.js
                 (.code-reveal / .result / .toast / .is-loading / .flash — all styled
                 here, none renamed).
   Changelog:
     3.0.1 (2026-07-06) — Cache-bust companion (the 3.0.0 redesign was correct —
             headless render confirms unified tables — but a stable /assets/app.css
             with Cache-Control max-age=604800 meant browsers served week-old CSS, so
             prior fixes never reached the operator; the <link>s now carry ?v=. Also
             fixed a mobile (<=768) table-cell overflow: multi-element cells
             (Account/Tenant) stacked the data-th label ABOVE the value instead of on
             one flex row, so long emails/badges no longer push off-screen.
     3.0.0 (2026-07-06) — Full redesign (R3-UI-redesign). The prior 2.0.0 "brand
             restyle" underdelivered (read as near-plain); this replaces the whole
             system: token scales, app bar, cohesive tables, real form controls,
             hero code card, denser purposeful layout. Same class names/markup.
     2.0.0 (2026-07-06) — Indigo brand restyle (superseded — insufficient).
     1.0.0 (2026-07-04) — R2 initial. */

/* ===================================================================== *
 * Tokens
 * ===================================================================== */
:root {
  /* accent — one confident indigo/violet */
  --accent: #5b5bd6;
  --accent-hover: #4e4ec9;
  --accent-active: #4444b8;
  --accent-050: #f3f3fd;
  --accent-100: #e7e7fb;
  --accent-200: #cfcff5;
  --accent-ink: #35357a;

  /* neutrals — cool, Linear-like */
  --bg: #fbfbfc;
  --panel: #ffffff;
  --panel-2: #f6f7f9;
  --panel-3: #eef0f3;
  --border: #e7e9ee;
  --border-strong: #d6d9e0;
  --text: #16181d;
  --text-2: #3b4048;
  --muted: #656b76;
  --faint: #8a909b;

  /* status */
  --ok: #0a7d46;      --ok-bg: #e7f5ee;   --ok-bd: #bfe6d1;
  --warn: #9a5a00;    --warn-bg: #fbf1e1; --warn-bd: #efd7ac;
  --danger: #b4241c;  --danger-bg: #fdecea; --danger-bd: #f3c9c5;

  /* type scale */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
          "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
  --fs-11: 0.6875rem; --fs-12: 0.75rem;   --fs-13: 0.8125rem; --fs-14: 0.875rem;
  --fs-15: 0.9375rem; --fs-16: 1rem;      --fs-18: 1.125rem;  --fs-22: 1.375rem;
  --fs-28: 1.75rem;

  /* spacing (4px rhythm) */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;

  /* radius */
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-pill: 999px;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(18, 20, 26, .05);
  --shadow: 0 1px 2px rgba(18, 20, 26, .05), 0 4px 12px rgba(18, 20, 26, .05);
  --shadow-md: 0 4px 16px rgba(18, 20, 26, .08), 0 16px 40px rgba(18, 20, 26, .07);
  --ring: 0 0 0 3px rgba(91, 91, 214, .30);

  --container: 1080px;
  --dur: 160ms;
}

/* ===================================================================== *
 * Reset / base
 * ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
h1, h2, h3, p, ul, ol { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 600; }
svg { display: block; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

.muted { color: var(--muted); }
.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;
}

/* ===================================================================== *
 * App bar
 * ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--container); margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap;
}
.site-header__brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.wordmark {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--text); font-weight: 700; font-size: var(--fs-16); letter-spacing: -.01em;
}
.wordmark:hover { text-decoration: none; }
.wordmark__glyph { color: var(--accent); flex: none; }
.wordmark__text { color: var(--text); }
.site-header__tenant {
  display: inline-flex; align-items: center; max-width: 220px;
  padding: 3px var(--sp-3);
  font-size: var(--fs-13); font-weight: 500; color: var(--text-2);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-pill);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-header__tenant::before {
  content: ""; width: 6px; height: 6px; margin-right: var(--sp-2);
  border-radius: 50%; background: var(--accent); flex: none;
}
.site-header__user { display: flex; align-items: center; gap: var(--sp-3); }
.site-header__username { font-size: var(--fs-14); color: var(--muted); font-weight: 500; }

.site-nav { border-top: 1px solid var(--border); background: var(--panel); }
.site-nav__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6);
  display: flex; gap: var(--sp-1); overflow-x: auto;
}
.site-nav__link {
  position: relative; padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-14); font-weight: 500; color: var(--muted);
  white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color var(--dur) ease;
}
.site-nav__link:hover { color: var(--text); text-decoration: none; }
.site-nav__link.is-current { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ===================================================================== *
 * Layout
 * ===================================================================== */
.container {
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding: var(--sp-8) var(--sp-6); flex: 1 0 auto;
}
.site-footer {
  max-width: var(--container); width: 100%; margin: 0 auto;
  padding: var(--sp-6); color: var(--faint); font-size: var(--fs-12);
}

.page-head { margin-bottom: var(--sp-6); }
.page-head--split {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.page-title { font-size: var(--fs-22); font-weight: 650; letter-spacing: -.02em; color: var(--text); }
.page-sub { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-14); max-width: 60ch; }

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}

/* ===================================================================== *
 * Buttons
 * ===================================================================== */
.btn {
  --btn-h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--btn-h); padding: 0 var(--sp-4);
  font-family: inherit; font-size: var(--fs-14); font-weight: 600; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease;
}
.btn:focus-visible { box-shadow: var(--ring); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-active); }

.btn--secondary { background: var(--panel); color: var(--text-2); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--panel-2); border-color: var(--muted); color: var(--text); }

.btn--danger { background: var(--panel); color: var(--danger); border-color: var(--danger-bd); }
.btn--danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn--sm { --btn-h: 34px; padding: 0 var(--sp-3); font-size: var(--fs-13); }
.btn--block { width: 100%; }

@media (pointer: coarse) { .btn--sm { --btn-h: 44px; } }

/* ===================================================================== *
 * Badges
 * ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--sp-2); border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 600; line-height: 1.4;
  border: 1px solid transparent; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge--role { color: var(--accent-ink); background: var(--accent-100); border-color: var(--accent-200); }
.badge--role::before { display: none; }
.badge--active   { color: var(--ok);     background: var(--ok-bg);     border-color: var(--ok-bd); }
.badge--reauth   { color: var(--warn);   background: var(--warn-bg);   border-color: var(--warn-bd); }
.badge--disabled { color: var(--muted);  background: var(--panel-3);   border-color: var(--border-strong); }
.badge--warn     { color: var(--warn);   background: var(--warn-bg);   border-color: var(--warn-bd); }

/* ===================================================================== *
 * Data tables — header + rows are ONE cohesive element
 * ===================================================================== */
.table-wrap {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.data-table thead th {
  padding: var(--sp-3) var(--sp-4); text-align: left;
  font-size: var(--fs-12); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.data-table tbody td {
  padding: var(--sp-3) var(--sp-4); vertical-align: middle;
  border-bottom: 1px solid var(--border); color: var(--text-2);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background var(--dur) ease; }
.data-table tbody tr:hover { background: var(--panel-2); }
.cell-label { display: block; color: var(--text); font-weight: 600; }
.cell-sub { display: block; font-size: var(--fs-12); margin-top: 1px; }

.inline-form { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ===================================================================== *
 * Forms
 * ===================================================================== */
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.field__hint { font-size: var(--fs-12); color: var(--muted); }

.input {
  width: 100%; min-height: 40px; padding: var(--sp-2) var(--sp-3);
  font-family: inherit; font-size: var(--fs-15); color: var(--text);
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
  appearance: none; -webkit-appearance: none;
}
.input::placeholder { color: var(--faint); }
.input:hover { border-color: var(--muted); }
.input:focus-visible, .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
select.input {
  padding-right: var(--sp-8); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23656b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-3) center;
}
.input--sm { min-height: 34px; font-size: var(--fs-13); padding: var(--sp-1) var(--sp-2); }
.input--sm[type], select.input--sm { min-width: 130px; }

@media (max-width: 768px) { .input { font-size: var(--fs-16); } } /* prevent iOS zoom */
@media (pointer: coarse) { .input--sm { min-height: 44px; } }

.form-card { padding: var(--sp-6); }
.form-card--narrow { max-width: 460px; margin-top: var(--sp-6); }
.form-card__title { font-size: var(--fs-16); font-weight: 650; margin-bottom: var(--sp-4); }

.form-error {
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  background: var(--danger-bg); border: 1px solid var(--danger-bd);
  border-radius: var(--r); color: var(--danger); font-size: var(--fs-14);
}
.form-error--list ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.form-error--list li { margin-top: 2px; }
.form-error__lead { font-weight: 600; }

/* ===================================================================== *
 * Account grid + cards (dashboard)
 * ===================================================================== */
.account-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.account-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); }
.account-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.account-card__id { min-width: 0; }
.account-card__label { display: block; font-size: var(--fs-16); font-weight: 650; color: var(--text); letter-spacing: -.01em; }
.account-card__email { display: block; font-size: var(--fs-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card__meta { font-size: var(--fs-12); margin-top: calc(-1 * var(--sp-2)); }
.account-card__fetch { margin-top: auto; }

/* ===================================================================== *
 * Fetched-code card — the hero payoff
 * ===================================================================== */
.result:empty { display: none; }
.code-reveal {
  position: relative; margin-top: var(--sp-2);
  padding: var(--sp-5); padding-top: var(--sp-6);
  background: linear-gradient(180deg, var(--accent-050), var(--panel));
  border: 1px solid var(--accent-200); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.code-reveal::before {
  content: "Verification code";
  position: absolute; top: var(--sp-3); left: var(--sp-5);
  font-size: var(--fs-11); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-ink);
}
.code-reveal__code {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.9rem, 9vw, 2.6rem); line-height: 1.05; letter-spacing: .08em;
  color: var(--text); word-break: break-all; user-select: all;
  margin: var(--sp-2) 0 var(--sp-4);
}
.code-reveal__actions { display: flex; gap: var(--sp-2); }
.code-reveal__meta {
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--accent-100);
  font-size: var(--fs-13); color: var(--muted);
}

.result__msg {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r); font-size: var(--fs-14); border: 1px solid transparent;
}
.result__msg--ok       { color: var(--ok);     background: var(--ok-bg);     border-color: var(--ok-bd); }
.result__msg--no_code,
.result__msg--info     { color: var(--text-2); background: var(--panel-2);   border-color: var(--border); }
.result__msg--needs_reauth { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.result__msg--error,
.result__msg--disabled { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-bd); }

/* button busy state */
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  color: #fff; animation: spin .6s linear infinite;
}
.btn--secondary.is-loading::after, .btn--danger.is-loading::after { color: var(--text-2); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================================================================== *
 * Flash + toast
 * ===================================================================== */
.flash {
  max-width: var(--container); margin: var(--sp-5) auto 0; width: 100%;
  padding: 0 var(--sp-6);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
}
.flash__msg {
  flex: 1; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r); font-size: var(--fs-14);
  border: 1px solid var(--border); border-left-width: 3px; background: var(--panel-2);
}
.flash--ok .flash__msg   { color: var(--ok);     background: var(--ok-bg);     border-color: var(--ok-bd);     border-left-color: var(--ok); }
.flash--err .flash__msg  { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-bd); border-left-color: var(--danger); }
.flash--info .flash__msg { color: var(--accent-ink); background: var(--accent-050); border-color: var(--accent-200); border-left-color: var(--accent); }
.flash__close {
  flex: none; width: 32px; height: 32px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-18); line-height: 1; color: var(--muted);
  background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.flash__close:hover { color: var(--text); background: var(--panel-2); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  z-index: 50; padding: var(--sp-3) var(--sp-5);
  background: var(--text); color: #fff; font-size: var(--fs-13); font-weight: 500;
  border-radius: var(--r-pill); box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) ease, transform var(--dur) ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ===================================================================== *
 * Empty state, info panel, tenant key status
 * ===================================================================== */
.empty-state { padding: var(--sp-10) var(--sp-6); text-align: center; }
.empty-state__icon { width: 40px; height: 40px; margin: 0 auto var(--sp-3); color: var(--faint); }
.empty-state__title { font-size: var(--fs-16); font-weight: 650; color: var(--text); }
.empty-state__body { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-14); }

.info-panel { padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-6); background: var(--accent-050); border-color: var(--accent-200); }
.info-panel__title { font-size: var(--fs-15); font-weight: 650; color: var(--accent-ink); margin-bottom: var(--sp-3); }
.info-panel__steps { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-14); color: var(--text-2); }
.info-panel__steps a { font-weight: 600; }
.info-panel__note { margin-top: var(--sp-3); font-size: var(--fs-12); color: var(--muted); }

.key-status { display: flex; flex-direction: column; gap: var(--sp-1); }
.key-status__hint { font-size: var(--fs-12); color: var(--muted); }
.key-status__hint code, .info-panel code, .empty-state code, td code {
  font-family: var(--mono); font-size: .92em;
  background: var(--panel-3); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; color: var(--text-2); word-break: break-all;
}

/* ===================================================================== *
 * Auth (login / setup)
 * ===================================================================== */
.body--bare { background: var(--bg); }
.auth {
  flex: 1 0 auto; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8) var(--sp-5); min-height: 70vh;
}
.auth__card { width: 100%; max-width: 400px; padding: var(--sp-8); }
.auth__card--wide { max-width: 460px; }
.auth__brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-18); color: var(--text); margin-bottom: var(--sp-5); }
.auth__brand .wordmark__glyph { color: var(--accent); }
.auth__title { font-size: var(--fs-22); font-weight: 650; letter-spacing: -.02em; margin-bottom: var(--sp-2); }
.auth__lead { color: var(--muted); font-size: var(--fs-14); margin-bottom: var(--sp-5); }
.auth__card .stack { margin-top: var(--sp-5); }

/* ===================================================================== *
 * Responsive — tables become cards below 768
 * ===================================================================== */
@media (max-width: 768px) {
  .site-header__inner { padding: var(--sp-3) var(--sp-4); }
  .site-nav__inner { padding: 0 var(--sp-4); }
  .container { padding: var(--sp-6) var(--sp-4); }
  .flash { padding: 0 var(--sp-4); }

  .table-wrap { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table tbody tr {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); margin-bottom: var(--sp-4); padding: var(--sp-2) var(--sp-4);
  }
  .data-table tbody tr:hover { background: var(--panel); }
  .data-table tbody td {
    display: block; border-bottom: 1px solid var(--border); padding: var(--sp-3) 0;
  }
  .data-table tbody td:last-child { border-bottom: 0; }
  .data-table tbody td::before {
    content: attr(data-th); display: block; margin-bottom: var(--sp-2);
    font-size: var(--fs-11); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted);
  }
  .data-table tbody td .inline-form { justify-content: flex-start; }
  .input--sm[type], select.input--sm { min-width: 0; flex: 1 1 auto; }
}

@media (max-width: 380px) {
  .site-header__username { display: none; }
}

/* ===================================================================== *
 * Motion preferences
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}