/* ════════════════════════════════════════════════════════════
   PsychoQuant — Application styles (supplements pq.css)
   Loaded by every non-landing page after pq.css.
   Provides utilities + page-specific components for:
     assess, login, profile, report, report-free, about,
     pricing, privacy, terms.
   Does NOT touch the canonical landing design system.
   ════════════════════════════════════════════════════════════ */

/* ── LAYOUT UTILITIES ───────────────────────────────────── */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wrap      { width: 100%; max-width: var(--max-w);  padding: 0 var(--pad); }
.wrap-wide { width: 100%; max-width: var(--page-max); padding: 0 var(--pad); }

.stack    { display: flex; flex-direction: column; }
.stack-xs { gap: 8px; }
.stack-sm { gap: 16px; }
.stack-md { gap: 24px; }
.stack-lg { gap: 32px; }
.stack-xl { gap: 48px; }
.center   { text-align: center; align-items: center; }


/* ── TYPOGRAPHY UTILITIES ───────────────────────────────── */

.label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t4);
  font-weight: 500;
}
.rule {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--t4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.divider {
  width: 100%;
  height: 1px;
  background: var(--line);
}

.body-lg em, .body-md em, .body-sm em {
  font-style: normal;
  color: var(--t2);
}

.stat-number {
  font-family: var(--sans);
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--t1);
}
.stat-number-sm {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--t1);
}


/* ── BUTTONS ────────────────────────────────────────────── */
/* .btn-primary and .btn-secondary live in pq.css legacy block. */
/* Add the generic .btn base + .btn-sm sizing that those build on. */

.btn {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  padding: 16px 48px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, opacity 0.25s ease, border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:hover    { transform: translateY(-1px); }
.btn:active   { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }

.btn-sm { font-size: 12px; padding: 10px 28px; }


/* ── FORMS ──────────────────────────────────────────────── */

.input {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--t1);
  background: var(--bg-input);
  border: 1px solid var(--line);
  padding: 14px 18px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease;
}
.input::placeholder { color: var(--t5); }
.input:focus        { border-color: var(--t4); }

.input-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t4);
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}


/* ── LOADING ────────────────────────────────────────────── */

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--t3);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ── CARD SWIPE (assess.html only) ──────────────────────── */
/* The landing has its own .swipe-card / .swipe-label scoped under
   body.landing. These rules apply on assess.html where body.landing
   is absent. */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.screen.active { opacity: 1; pointer-events: auto; }

.card-area {
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.card {
  position: absolute;
  width: calc(100% - 40px);
  min-height: 240px;
  border-radius: 12px;
  padding: 36px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}
.card-bg {
  background: var(--card-back);
  transform: scale(0.96) translateY(8px);
  z-index: 1;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.card-top {
  background: var(--card);
  z-index: 10;
  cursor: grab;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-top.dragging { cursor: grabbing; transition: none; }
.card-top.exiting {
  transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1), opacity 0.28s ease;
  opacity: 0;
}
.card-text {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.72;
  text-align: center;
  font-weight: 400;
  color: var(--card-text);
}

/* Swipe affordance — the YES / NO labels overlaid on the active card.
   Scoped to .card-top so the chevron buttons' inner .swipe-label
   doesn't pick this up. */
.card-top .swipe-label {
  position: absolute;
  top: 20px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 6px;
  border: 2px solid;
  opacity: 0;
  pointer-events: none;
}
.card-top .label-yes { right: 20px; color: var(--yes); border-color: var(--yes); }
.card-top .label-no  { left: 20px;  color: var(--no);  border-color: var(--no); }

/* Chevron flanking the card (mirrors landing's swipe demo). Lifted out of
   body.landing scope so the same look works on /assess. */
.swipe-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: calc(var(--max-w) + 160px);
  margin: 0 auto;
  flex-wrap: wrap;
}
.swipe-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--orange);
  transition: color 0.2s ease, transform 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.swipe-arrow:hover  { color: var(--orange-deep); transform: translateY(-1px); }
.swipe-arrow:active { transform: translateY(0); }
.swipe-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }

.swipe-arrow .swipe-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t3);
}

/* Mobile: card on top, arrows below side-by-side (matches landing demo). */
@media (max-width: 600px) {
  .swipe-row .card-area { order: -1; width: 100%; }
}

/* Progress bar — full-width track at the very top of the viewport,
   2px high, with an orange fill that grows from 0 → 100% as the user
   moves through the deck. Ambient only: no labels, no milestones. */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--line);
  z-index: 100;
  pointer-events: none;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--orange);
  transition: width 200ms ease;
}

.progress-text {
  position: fixed;
  top: 16px; right: 20px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--t5);
  z-index: 100;
}

.hint-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-w);
  padding: 20px var(--pad) 0;
}
.hint {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t5);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hint-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--line-light);
  border-radius: 4px;
  font-size: 10px;
  color: var(--t4);
}


/* ── CLASSIFICATION BADGE (profile + reports) ──────────── */

.cls-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-raised);
  text-align: left;
}
.cls-badge .swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}
.cls-badge .label-text {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--t1);
  line-height: 1.3;
}
.cls-badge .explanation {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--t4);
  line-height: 1.5;
  margin-top: 2px;
}


/* ── BAR CHARTS (free report + profile) ─────────────────── */

.bar-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bar-row {
  display: grid;
  grid-template-columns: 32px 1fr 56px;
  gap: 14px;
  align-items: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--t3);
}
.bar-row .bar-code  { color: var(--t2); font-weight: 500; letter-spacing: 0.05em; }
.bar-row .bar-track { background: var(--bg-input); height: 10px; border-radius: 2px; overflow: hidden; }
.bar-row .bar-fill  { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.bar-row .bar-value { color: var(--t4); font-size: 12px; text-align: right; letter-spacing: 0.05em; }

.bar-section[data-matrix="enkian"]   .bar-fill { background: var(--orange); }
.bar-section[data-matrix="enlilian"] .bar-fill { background: var(--rust);   }
.bar-section[data-matrix="mekanian"] .bar-fill { background: var(--gold);   }


/* ── HEATMAPS (free report) ─────────────────────────────── */

.heatmap-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.heatmap-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t4);
}
.heatmap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
}
.heatmap .cell {
  aspect-ratio: 1;
  background: var(--bg-input);
  border-radius: 1px;
  transition: background 0.2s ease;
}
.heatmap[data-matrix="enkian"]   .cell[data-on="1"] { background: var(--orange); }
.heatmap[data-matrix="enlilian"] .cell[data-on="1"] { background: var(--rust);   }
.heatmap[data-matrix="mekanian"] .cell[data-on="1"] { background: var(--gold);   }
.heatmap .cell.diag { outline: 1px solid var(--t5); outline-offset: -1px; }

.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  width: 100%;
}


/* ── PAYWALL CARDS (profile + free report + pricing) ───── */

.paywall-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}
@media (min-width: 720px) {
  .paywall-grid { grid-template-columns: repeat(3, 1fr); }
}

.paywall-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.paywall-card.bundle {
  border: 1px solid var(--line-light);
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-input));
}
.paywall-card .lens-name  { font-family: var(--serif); font-size: 18px; color: var(--t1); }
.paywall-card .lens-blurb { font-family: var(--serif); font-size: 14.5px; line-height: 1.6; color: var(--t3); flex-grow: 1; }
.paywall-card .lens-price { font-family: var(--sans);  font-size: 22px; font-weight: 300; color: var(--t1); }
.paywall-card .lens-price small { font-size: 12px; color: var(--t4); letter-spacing: 0.05em; margin-left: 6px; }
.paywall-card .lens-cta   { margin-top: 6px; }

.bundle-strip {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  width: 100%;
}
@media (max-width: 540px) {
  .bundle-strip { grid-template-columns: 1fr; text-align: center; }
}


/* ── REPORT PROSE (paid reports) ────────────────────────── */

.report-prose {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--t2);
}
.report-prose h1 { font-size: 28px; font-weight: 400; margin: 32px 0 16px; color: var(--t1); }
.report-prose h2 { font-size: 22px; font-weight: 400; margin: 28px 0 12px; color: var(--t1); }
.report-prose h3 { font-size: 18px; font-weight: 500; margin: 24px 0 10px; color: var(--t1); }
.report-prose p  { margin: 0 0 18px; }
.report-prose strong { color: var(--t1); font-weight: 500; }
.report-prose em     { font-style: italic; }
.report-prose blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 18px;
  margin: 16px 0;
  font-style: italic;
}


/* ── CLASSIFICATION BADGE (free report) ─────────────────── */

.pq-classification {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.pq-classification-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--t4);
  margin: 0 0 14px;
}
.pq-classification-name {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.pq-classification-explainer {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--t2);
  margin: 0;
}

.pq-class-enkian   { color: var(--cls-enkian);   }
.pq-class-enlilian { color: var(--cls-enlilian); }
.pq-class-mekanian { color: var(--cls-mekanian); }

.stat-denominator {
  font-size: 0.5em;
  color: var(--t4);
  font-weight: 400;
  margin-left: 2px;
  letter-spacing: 0.02em;
}

/* ── STRONGEST / QUIETEST CALLOUT (free report) ─────────── */

.pq-callout {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.pq-callout-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.pq-callout-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--t4);
}
.pq-callout-value {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--t1);
  font-weight: 400;
}


/* ── PROFILE / DASHBOARD ────────────────────────────────── */

.profile-shell {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 48px var(--pad);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.profile-header .who {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--t4);
}
.banner-confirmed {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--t2);
  text-align: center;
}
.danger-zone {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 16px;
}
.danger-zone .section-h {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 12px;
}
.danger-zone .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.danger-zone .row:last-child { border-bottom: none; }
.danger-zone .row-label  { color: var(--t3); font-size: 14px; }
.danger-zone .delete-btn { color: var(--no); }


/* ── SCREEN-READER UTILITY ──────────────────────────────── */

.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;
}


/* ════════════════════════════════════════════════════════════
   ENKIAN 144 RESULTS VISUALIZATION (component)
   Self-contained, prefixed `.e144i-`. The block is verbatim from
   enkian_144_results.html — do not edit. The token-bridge `:root`
   on `.e144i-wrap` translates the component's expected design-system
   tokens to PsychoQuant's existing tokens; nothing else is changed.
   ════════════════════════════════════════════════════════════ */

/* Token bridge — maps component-expected tokens to project tokens.
   Shared by all `*144i-wrap` matrix components (Enkian, Enlilian, …). */
.e144i-wrap, .el144i-wrap, .m144i-wrap {
  --font-sans: var(--sans);
  --font-mono: var(--mono);
  --color-text-primary:    var(--t1);
  --color-text-secondary:  var(--t2);
  --color-text-tertiary:   var(--t4);
  --color-background-primary:    var(--bg);
  --color-background-secondary:  var(--bg-raised);
  --color-border-tertiary: var(--line-light);
  --border-radius-lg: 6px;
}

/* —— Component CSS, copied verbatim from enkian_144_results.html —— */
.e144i-wrap{padding:1.5rem 0;font-family:var(--font-sans)}
.e144i-title{font-size:18px;font-weight:500;color:var(--color-text-primary);text-align:center;margin:0 0 2px}
.e144i-sub{font-size:12px;color:var(--color-text-tertiary);text-align:center;margin:0 0 24px}
.e144i-grid{display:grid;grid-template-columns:32px repeat(12,1fr);gap:2px;margin-bottom:20px}
.e144i-corner{}
.e144i-col-head{display:flex;align-items:flex-end;justify-content:center;padding:4px 0;font-size:11px;font-weight:500;line-height:1.1}
.e144i-row-head{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:11px;font-weight:500;line-height:1.1}
.e144i-cell{aspect-ratio:1;border-radius:3px;display:flex;align-items:center;justify-content:center;line-height:1;border:0.5px solid;cursor:pointer;transition:transform 0.15s ease;font-size:8.5px}
.e144i-cell:hover{transform:scale(1.2);z-index:5;position:relative;box-shadow:0 0 0 2px var(--color-background-primary)}
.e144i-cell.active{transform:scale(1.2);z-index:5;position:relative;box-shadow:0 0 0 2px var(--color-text-primary)}
.e144i-cell .syms{display:flex;align-items:center;gap:1px}
.e144i-cell .x{font-size:7px;opacity:0.45}
.e144i-cell.diag{font-weight:500;font-size:11px}

.e144i-cell.yes.fam-percep{background:#E1F5EE;border-color:#0F6E56;color:#085041}
.e144i-cell.yes.fam-build{background:#E6F1FB;border-color:#185FA5;color:#0C447C}
.e144i-cell.yes.fam-human{background:#EEEDFE;border-color:#534AB7;color:#3C3489}
.e144i-cell.yes.fam-temp{background:#EAF3DE;border-color:#3B6D11;color:#27500A}
.e144i-cell.yes.diag.fam-percep{background:#0F6E56;color:#E1F5EE;border-color:#085041}
.e144i-cell.yes.diag.fam-build{background:#185FA5;color:#E6F1FB;border-color:#0C447C}
.e144i-cell.yes.diag.fam-human{background:#534AB7;color:#EEEDFE;border-color:#3C3489}
.e144i-cell.yes.diag.fam-temp{background:#3B6D11;color:#EAF3DE;border-color:#27500A}
.e144i-cell.no{background:transparent;border-color:var(--color-border-tertiary);border-style:dashed;color:var(--color-text-tertiary);opacity:0.5}
.e144i-cell.no.diag{border-style:solid;opacity:0.55}

.e144i-fam-percep{color:#0F6E56}
.e144i-fam-build{color:#185FA5}
.e144i-fam-human{color:#534AB7}
.e144i-fam-temp{color:#3B6D11}

.e144i-inspector{background:var(--color-background-secondary);border-radius:var(--border-radius-lg);padding:1rem 1.25rem;min-height:120px;display:flex;align-items:flex-start;gap:14px;transition:background 0.2s ease}
.e144i-inspector.empty{justify-content:center;align-items:center;font-size:13px;color:var(--color-text-tertiary);font-style:italic}
.e144i-inspector-swatch{width:48px;height:48px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;border:0.5px solid;margin-top:2px}
.e144i-inspector-body{flex:1;min-width:0}
.e144i-inspector-coord{font-size:11px;color:var(--color-text-tertiary);font-family:var(--font-mono);letter-spacing:0.05em;margin:0 0 2px}
.e144i-inspector-name{font-size:16px;font-weight:500;color:var(--color-text-primary);margin:0 0 6px}
.e144i-inspector-status{font-size:13px;color:var(--color-text-secondary);margin:0 0 6px;line-height:1.5}
.e144i-inspector-status .yes-tag{color:#0F6E56;font-weight:500}
.e144i-inspector-status .no-tag{color:var(--color-text-tertiary);font-style:italic}
.e144i-inspector-finding{font-size:13px;color:var(--color-text-primary);line-height:1.55;margin:6px 0 0}
.e144i-inspector-tease{font-size:12px;color:var(--color-text-tertiary);margin:6px 0 0;font-style:italic}

.e144i-stats{display:flex;justify-content:center;gap:24px;margin:14px 0 0;font-size:11px;color:var(--color-text-secondary)}
.e144i-stat-num{font-size:13px;font-weight:500;color:var(--color-text-primary)}
@media(prefers-color-scheme:dark){
.e144i-cell.yes.fam-percep{background:#085041;border-color:#5DCAA5;color:#9FE1CB}
.e144i-cell.yes.fam-build{background:#0C447C;border-color:#85B7EB;color:#B5D4F4}
.e144i-cell.yes.fam-human{background:#3C3489;border-color:#7F77DD;color:#CECBF6}
.e144i-cell.yes.fam-temp{background:#27500A;border-color:#97C459;color:#C0DD97}
.e144i-cell.yes.diag.fam-percep{background:#5DCAA5;color:#04342C}
.e144i-cell.yes.diag.fam-build{background:#85B7EB;color:#042C53}
.e144i-cell.yes.diag.fam-human{background:#AFA9EC;color:#26215C}
.e144i-cell.yes.diag.fam-temp{background:#97C459;color:#173404}
.e144i-fam-percep{color:#5DCAA5}
.e144i-fam-build{color:#85B7EB}
.e144i-fam-human{color:#AFA9EC}
.e144i-fam-temp{color:#97C459}
.e144i-inspector-status .yes-tag{color:#5DCAA5}
}


/* ════════════════════════════════════════════════════════════
   ENLILIAN 144 RESULTS VISUALIZATION (component)
   Self-contained, prefixed `.el144i-`. Block is verbatim from
   enlilian_144_results.html. The token bridge above already
   covers `.el144i-wrap`.
   ════════════════════════════════════════════════════════════ */

/* —— Component CSS, copied verbatim from enlilian_144_results.html —— */
.el144i-wrap{padding:1.5rem 0;font-family:var(--font-sans)}
.el144i-title{font-size:18px;font-weight:500;color:var(--color-text-primary);text-align:center;margin:0 0 2px}
.el144i-sub{font-size:12px;color:var(--color-text-tertiary);text-align:center;margin:0 0 24px}
.el144i-grid{display:grid;grid-template-columns:32px repeat(12,1fr);gap:2px;margin-bottom:20px}
.el144i-corner{}
.el144i-col-head{display:flex;align-items:flex-end;justify-content:center;padding:4px 0;font-size:11px;font-weight:500;line-height:1.1}
.el144i-row-head{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:11px;font-weight:500;line-height:1.1}
.el144i-cell{aspect-ratio:1;border-radius:3px;display:flex;align-items:center;justify-content:center;line-height:1;border:0.5px solid;cursor:pointer;transition:transform 0.15s ease;font-size:8.5px}
.el144i-cell:hover{transform:scale(1.2);z-index:5;position:relative;box-shadow:0 0 0 2px var(--color-background-primary)}
.el144i-cell.active{transform:scale(1.2);z-index:5;position:relative;box-shadow:0 0 0 2px var(--color-text-primary)}
.el144i-cell .syms{display:flex;align-items:center;gap:1px}
.el144i-cell .x{font-size:7px;opacity:0.45}
.el144i-cell.diag{font-weight:500;font-size:11px}

.el144i-cell.yes.fam-power{background:#FCEBEB;border-color:#A32D2D;color:#791F1F}
.el144i-cell.yes.fam-social{background:#FAECE7;border-color:#993C1D;color:#712B13}
.el144i-cell.yes.fam-oper{background:#FAEEDA;border-color:#854F0B;color:#633806}
.el144i-cell.yes.fam-react{background:#FBEAF0;border-color:#993556;color:#72243E}
.el144i-cell.yes.fam-appet{background:#F1EFE8;border-color:#5F5E5A;color:#444441}
.el144i-cell.yes.diag.fam-power{background:#A32D2D;color:#FCEBEB;border-color:#791F1F}
.el144i-cell.yes.diag.fam-social{background:#993C1D;color:#FAECE7;border-color:#712B13}
.el144i-cell.yes.diag.fam-oper{background:#854F0B;color:#FAEEDA;border-color:#633806}
.el144i-cell.yes.diag.fam-react{background:#993556;color:#FBEAF0;border-color:#72243E}
.el144i-cell.yes.diag.fam-appet{background:#5F5E5A;color:#F1EFE8;border-color:#444441}
.el144i-cell.no{background:transparent;border-color:var(--color-border-tertiary);border-style:dashed;color:var(--color-text-tertiary);opacity:0.5}
.el144i-cell.no.diag{border-style:solid;opacity:0.55}

.el144i-fam-power{color:#A32D2D}
.el144i-fam-social{color:#993C1D}
.el144i-fam-oper{color:#854F0B}
.el144i-fam-react{color:#993556}
.el144i-fam-appet{color:#5F5E5A}

.el144i-inspector{background:var(--color-background-secondary);border-radius:var(--border-radius-lg);padding:1rem 1.25rem;min-height:120px;display:flex;align-items:flex-start;gap:14px;transition:background 0.2s ease}
.el144i-inspector.empty{justify-content:center;align-items:center;font-size:13px;color:var(--color-text-tertiary);font-style:italic}
.el144i-inspector-swatch{width:48px;height:48px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;border:0.5px solid;margin-top:2px}
.el144i-inspector-body{flex:1;min-width:0}
.el144i-inspector-coord{font-size:11px;color:var(--color-text-tertiary);font-family:var(--font-mono);letter-spacing:0.05em;margin:0 0 2px}
.el144i-inspector-name{font-size:16px;font-weight:500;color:var(--color-text-primary);margin:0 0 6px}
.el144i-inspector-status{font-size:13px;color:var(--color-text-secondary);margin:0 0 6px;line-height:1.5}
.el144i-inspector-status .yes-tag{color:#A32D2D;font-weight:500}
.el144i-inspector-status .no-tag{color:var(--color-text-tertiary);font-style:italic}
.el144i-inspector-finding{font-size:13px;color:var(--color-text-primary);line-height:1.55;margin:6px 0 0}
.el144i-inspector-tease{font-size:12px;color:var(--color-text-tertiary);margin:6px 0 0;font-style:italic}

.el144i-stats{display:flex;justify-content:center;gap:24px;margin:14px 0 0;font-size:11px;color:var(--color-text-secondary)}
.el144i-stat-num{font-size:13px;font-weight:500;color:var(--color-text-primary)}
@media(prefers-color-scheme:dark){
.el144i-cell.yes.fam-power{background:#791F1F;border-color:#F09595;color:#F7C1C1}
.el144i-cell.yes.fam-social{background:#712B13;border-color:#F0997B;color:#F5C4B3}
.el144i-cell.yes.fam-oper{background:#633806;border-color:#FAC775;color:#FAEEDA}
.el144i-cell.yes.fam-react{background:#72243E;border-color:#ED93B1;color:#F4C0D1}
.el144i-cell.yes.fam-appet{background:#444441;border-color:#B4B2A9;color:#D3D1C7}
.el144i-cell.yes.diag.fam-power{background:#F09595;color:#501313}
.el144i-cell.yes.diag.fam-social{background:#F0997B;color:#4A1B0C}
.el144i-cell.yes.diag.fam-oper{background:#FAC775;color:#412402}
.el144i-cell.yes.diag.fam-react{background:#ED93B1;color:#4B1528}
.el144i-cell.yes.diag.fam-appet{background:#B4B2A9;color:#2C2C2A}
.el144i-fam-power{color:#F09595}
.el144i-fam-social{color:#F0997B}
.el144i-fam-oper{color:#FAC775}
.el144i-fam-react{color:#ED93B1}
.el144i-fam-appet{color:#B4B2A9}
.el144i-inspector-status .yes-tag{color:#F09595}
}


/* ════════════════════════════════════════════════════════════
   MEKANIAN 144 RESULTS VISUALIZATION (component)
   Self-contained, prefixed `.m144i-`. Block is verbatim from
   mekanian_144_results.html. The token bridge above already
   covers `.m144i-wrap`.

   STRUCTURALLY DIFFERENT from Enkian/Enlilian:
     - rows = currents, cols = engines (asymmetric)
     - no diagonal pure-form treatment (different element types)
     - row colour by current family, col header colour by engine family
   ════════════════════════════════════════════════════════════ */

/* —— Component CSS, copied verbatim from mekanian_144_results.html —— */
.m144i-wrap{padding:1.5rem 0;font-family:var(--font-sans)}
.m144i-title{font-size:18px;font-weight:500;color:var(--color-text-primary);text-align:center;margin:0 0 2px}
.m144i-sub{font-size:12px;color:var(--color-text-tertiary);text-align:center;margin:0 0 24px}
.m144i-axis-labels{display:flex;justify-content:space-between;margin:0 0 8px;font-size:10px;color:var(--color-text-tertiary);font-family:var(--font-mono);letter-spacing:0.06em;text-transform:uppercase;padding:0 4px}
.m144i-axis-row{padding-left:38px}
.m144i-grid{display:grid;grid-template-columns:32px repeat(12,1fr);gap:2px;margin-bottom:20px}
.m144i-corner{}
.m144i-col-head{display:flex;align-items:flex-end;justify-content:center;padding:4px 0;font-size:11px;font-weight:500;line-height:1.1}
.m144i-row-head{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:11px;font-weight:500;line-height:1.1}
.m144i-cell{aspect-ratio:1;border-radius:3px;display:flex;align-items:center;justify-content:center;line-height:1;border:0.5px solid;cursor:pointer;transition:transform 0.15s ease;font-size:8.5px}
.m144i-cell:hover{transform:scale(1.2);z-index:5;position:relative;box-shadow:0 0 0 2px var(--color-background-primary)}
.m144i-cell.active{transform:scale(1.2);z-index:5;position:relative;box-shadow:0 0 0 2px var(--color-text-primary)}
.m144i-cell .syms{display:flex;align-items:center;gap:1px}
.m144i-cell .x{font-size:7px;opacity:0.45}

.m144i-cell.yes.fam-power{background:#FCEBEB;border-color:#A32D2D;color:#791F1F}
.m144i-cell.yes.fam-social{background:#FAECE7;border-color:#993C1D;color:#712B13}
.m144i-cell.yes.fam-oper{background:#FAEEDA;border-color:#854F0B;color:#633806}
.m144i-cell.yes.fam-react{background:#FBEAF0;border-color:#993556;color:#72243E}
.m144i-cell.yes.fam-appet{background:#F1EFE8;border-color:#5F5E5A;color:#444441}
.m144i-cell.no{background:transparent;border-color:var(--color-border-tertiary);border-style:dashed;color:var(--color-text-tertiary);opacity:0.5}

.m144i-row-fam-power{color:#A32D2D}
.m144i-row-fam-social{color:#993C1D}
.m144i-row-fam-oper{color:#854F0B}
.m144i-row-fam-react{color:#993556}
.m144i-row-fam-appet{color:#5F5E5A}

.m144i-col-fam-percep{color:#0F6E56}
.m144i-col-fam-build{color:#185FA5}
.m144i-col-fam-human{color:#534AB7}
.m144i-col-fam-temp{color:#3B6D11}

.m144i-inspector{background:var(--color-background-secondary);border-radius:var(--border-radius-lg);padding:1rem 1.25rem;min-height:120px;display:flex;align-items:flex-start;gap:14px;transition:background 0.2s ease}
.m144i-inspector.empty{justify-content:center;align-items:center;font-size:13px;color:var(--color-text-tertiary);font-style:italic}
.m144i-inspector-swatch{width:48px;height:48px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;border:0.5px solid;margin-top:2px}
.m144i-inspector-body{flex:1;min-width:0}
.m144i-inspector-coord{font-size:11px;color:var(--color-text-tertiary);font-family:var(--font-mono);letter-spacing:0.05em;margin:0 0 2px}
.m144i-inspector-name{font-size:16px;font-weight:500;color:var(--color-text-primary);margin:0 0 6px}
.m144i-inspector-status{font-size:13px;color:var(--color-text-secondary);margin:0 0 6px;line-height:1.5}
.m144i-inspector-status .yes-tag{color:#854F0B;font-weight:500}
.m144i-inspector-status .no-tag{color:var(--color-text-tertiary);font-style:italic}
.m144i-inspector-finding{font-size:13px;color:var(--color-text-primary);line-height:1.55;margin:6px 0 0}
.m144i-inspector-tease{font-size:12px;color:var(--color-text-tertiary);margin:6px 0 0;font-style:italic}

.m144i-stats{display:flex;justify-content:center;gap:24px;margin:14px 0 0;font-size:11px;color:var(--color-text-secondary)}
.m144i-stat-num{font-size:13px;font-weight:500;color:var(--color-text-primary)}
@media(prefers-color-scheme:dark){
.m144i-cell.yes.fam-power{background:#791F1F;border-color:#F09595;color:#F7C1C1}
.m144i-cell.yes.fam-social{background:#712B13;border-color:#F0997B;color:#F5C4B3}
.m144i-cell.yes.fam-oper{background:#633806;border-color:#FAC775;color:#FAEEDA}
.m144i-cell.yes.fam-react{background:#72243E;border-color:#ED93B1;color:#F4C0D1}
.m144i-cell.yes.fam-appet{background:#444441;border-color:#B4B2A9;color:#D3D1C7}
.m144i-row-fam-power{color:#F09595}
.m144i-row-fam-social{color:#F0997B}
.m144i-row-fam-oper{color:#FAC775}
.m144i-row-fam-react{color:#ED93B1}
.m144i-row-fam-appet{color:#B4B2A9}
.m144i-col-fam-percep{color:#5DCAA5}
.m144i-col-fam-build{color:#85B7EB}
.m144i-col-fam-human{color:#AFA9EC}
.m144i-col-fam-temp{color:#97C459}
.m144i-inspector-status .yes-tag{color:#FAC775}
}


/* ── ASSESS-PAGE RESPONSIVE TWEAKS ──────────────────────── */

@media (max-height: 680px) {
  .card-area { height: 300px; }
  .card { min-height: 200px; padding: 28px 24px; }
  .card-text { font-size: 15.5px; line-height: 1.65; }
}
@media (max-width: 380px) {
  .card { padding: 28px 22px; }
  .card-text { font-size: 15px; }
}