/* =========================================================================
   OAT — styles.css
   Base reset + universal components.
   Depends on theme.css tokens.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--surface) !important;
}

body {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
}
h1 { font-size: var(--size-h1); font-weight: var(--weight-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--size-h2); font-weight: var(--weight-h2); letter-spacing: -0.005em; }
h3 { font-size: var(--size-h3); font-weight: var(--weight-h3); }
h4 { font-size: var(--size-h4); font-weight: var(--weight-h4); }

p { margin: 0 0 1em; }
p + p { margin-top: 0; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* External links — subtle glyph after, never used inside data */
a[rel*="external"]::after,
a[href^="http"]:not([href*="openagtechnology"])::after {
  content: " ↗";
  font-feature-settings: "tnum" 1;
  color: var(--text-muted);
  font-size: 0.85em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

::selection { background: var(--brand-blue-mark); color: white; }

img { max-width: 100%; height: auto; display: block; }

/* Visually-hidden (a11y) */
.visually-hidden {
  position: absolute !important;
  clip: rect(0 0 0 0);
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
}

/* Reading column */
.reading-column { max-width: var(--reading-width); }
.content-column { max-width: var(--content-width); }
.full-bleed     { max-width: var(--site-width); margin-inline: auto; padding-inline: var(--spacing-inline); }

/* =========================================================================
   EYEBROW — uppercase data labels, mono, used as a functional signal
   ========================================================================= */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* =========================================================================
   LEDE — the first paragraph is the answer.
   First-class component, visually isolated, high-contrast.
   Per brief §6: "first paragraph IS the answer an AI engine will extract."
   ========================================================================= */
.lede {
  font-family: var(--font-reading);
  font-size: var(--size-lead);
  line-height: 1.45;
  color: var(--text-heading);
  font-weight: 400;
  max-width: 40rem;
  padding-block: var(--space-5) var(--space-5);
  border-block: 1px solid var(--border);
  position: relative;
  text-wrap: pretty;
}
.lede::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px;
  width: 48px; height: 2px;
  background: var(--gradient-frame);
}

/* =========================================================================
   KEY-FACTS — the GEO citation engine.
   Per brief §2.2.
   ========================================================================= */
.fact-block {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-blue-mark);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-reading);
}
.fact-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.fact-block li {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--space-4);
  align-items: baseline;
}
.fact-block li strong {
  font-family: var(--font-mono);
  font-size: var(--size-tiny);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* =========================================================================
   FITS / DOES NOT FIT — the honesty pair.
   Per brief §7 archetype 3: "Where It Does Not Fit" gets real visual weight.
   ========================================================================= */
.fit-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-block: var(--space-6);
}
@media (max-width: 760px) { .fit-pair { grid-template-columns: 1fr; } }
.fit-card {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  position: relative;
}
.fit-card--yes { border-top: 2px solid var(--green-500); }
.fit-card--no  { border-top: 2px solid var(--neutral-500); }
.fit-card h3 {
  font-family: var(--font-mono);
  font-size: var(--size-tiny);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.fit-card--yes h3 { color: var(--green-700); }
.fit-card--no  h3 { color: var(--neutral-600); }
.fit-card ul {
  margin: 0; padding-left: 1.1em;
  font-size: var(--size-small);
  line-height: 1.55;
}
.fit-card ul li { margin-block: var(--space-2); }
.fit-card ul li::marker { color: var(--text-muted); }

/* =========================================================================
   FAQ ACCORDION — native <details>, scales from 3 to 70 items.
   Per UC §5.3 + brief §1.16.
   ========================================================================= */
.faq {
  display: flex;
  flex-direction: column;
  border-block: 1px solid var(--border-strong);
}
.faq details {
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease-out);
}
.faq details:last-child { border-bottom: none; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) 0;
  font-family: var(--font-reading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-heading);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--text-muted);
  width: 1.5rem;
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after { content: "−"; color: var(--brand-blue-deep); }
.faq details[open] { background: linear-gradient(180deg, transparent, var(--surface-alt) 60%); }
.faq summary:hover { color: var(--brand-blue-deep); }
.faq .faq-answer {
  padding: 0 0 var(--space-5);
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--text-body);
  max-width: 40rem;
}
.faq .faq-answer p:last-child { margin-bottom: 0; }

/* =========================================================================
   CITATION — outbound source with attribution.
   Per brief §2.2 GEO patterns.
   ========================================================================= */
cite[data-source] {
  font-style: normal;
}
cite[data-source] a {
  background-image: linear-gradient(transparent 90%, var(--brand-blue-mark) 90%);
  text-decoration: none;
  padding-block: 1px;
  color: var(--text-body);
}
cite[data-source] a:hover {
  background-image: linear-gradient(transparent 0%, var(--blue-100) 0%);
  color: var(--text-heading);
}
.citation-meta {
  font-family: var(--font-mono);
  font-size: var(--size-tiny);
  color: var(--text-muted);
}

/* =========================================================================
   BYLINE + UPDATED STAMP — author + freshness signals.
   ========================================================================= */
.byline {
  font-size: var(--size-small);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-4);
}
.byline a { color: var(--text-body); }
.byline .sep { color: var(--neutral-400); }
.byline time { font-family: var(--font-mono); font-size: var(--size-tiny); }
.updated {
  font-family: var(--font-mono);
  font-size: var(--size-tiny);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* =========================================================================
   RAIL CARD — right column. Glass at the frame is allowed.
   ========================================================================= */
.rail-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.rail-card__label {
  font-family: var(--font-mono);
  font-size: var(--size-tiny);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.rail-card__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: var(--space-2);
  color: var(--text-heading);
}
.rail-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.rail-card li { font-size: var(--size-small); line-height: 1.4; }
.rail-card li a {
  text-decoration: none;
  color: var(--text-body);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-3);
  display: block;
}
.rail-card li:last-child a { border-bottom: none; padding-bottom: 0; }
.rail-card li a:hover { color: var(--brand-blue-deep); }
.rail-card__meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
  display: block;
}

/* =========================================================================
   BUTTONS — the canonical interactive surface.
   One primary per view. Ghost for secondary. Link for inline.
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6rem 1.1rem;
  font-family: var(--font-reading);
  font-size: var(--size-button);
  font-weight: var(--weight-button);
  line-height: 1.2;
  text-decoration: none;
  color: var(--text-heading);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  cursor: pointer;
  position: relative;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Primary — the strong call */
.btn--primary {
  background: var(--brand-blue-deep);
  color: var(--text-on-primary);
  border-color: var(--brand-blue-deep);
}
.btn--primary:hover:not([disabled]) {
  background: var(--blue-800);
  border-color: var(--blue-800);
}
.btn--primary:active:not([disabled]) { transform: translateY(var(--hover-shift)); }

/* Ghost — the secondary */
.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-heading);
}
.btn--ghost:hover:not([disabled]) {
  background: var(--hover-tint);
  border-color: var(--text-muted);
}

/* Link — inline action, no chrome */
.btn--link {
  background: transparent;
  color: var(--brand-blue-deep);
  padding-inline: 0.25rem;
  border-color: transparent;
  text-underline-offset: 4px;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}
.btn--link:hover:not([disabled]) {
  color: var(--brand-blue-mark);
  text-decoration-color: var(--brand-blue-mark);
}
.btn--link::after {
  content: "→";
  font-family: var(--font-reading);
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn--link:hover::after { transform: translateX(3px); }

/* Destructive — rare, for irreversible */
.btn--destructive {
  background: var(--danger);
  color: var(--text-on-primary);
  border-color: var(--danger);
}
.btn--destructive:hover:not([disabled]) {
  background: var(--danger-dark);
  border-color: var(--danger-dark);
}

/* Sizes */
.btn--sm { padding: 0.45rem 0.85rem; font-size: 0.875rem; }
.btn--lg { padding: 0.8rem 1.4rem; font-size: 1.0625rem; }

/* Icon-only */
.btn--icon {
  padding: 0;
  width: 2.25rem;
  height: 2.25rem;
}
.btn--icon.btn--sm { width: 1.8rem; height: 1.8rem; }

/* Loading state */
.btn[data-loading] {
  color: transparent !important;
  pointer-events: none;
}
.btn[data-loading]::before {
  content: "\2022\00a0\2022\00a0\2022";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--text-on-primary);
  animation: btn-loading-pulse 1.2s ease-in-out infinite;
}
.btn--ghost[data-loading]::before,
.btn--link[data-loading]::before { color: var(--text-heading); }
@keyframes btn-loading-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.btn-row { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* =========================================================================
   FORMS — the canonical input set.
   Quiet chrome. Focus brings the brand blue. Errors are inline messages.
   ========================================================================= */
.field {
  display: grid;
  gap: var(--space-1);
  font-family: var(--font-reading);
  width: 100%;
  max-width: 24rem;
}
.field--wide { max-width: 100%; }
.field__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: 500;
}
.field__label .field__req {
  color: var(--brand-blue-mark);
  margin-left: 0.2em;
}
.field__hint {
  font-family: var(--font-reading);
  font-size: var(--size-tiny);
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0.15rem 0 0;
}
.field__error {
  font-family: var(--font-reading);
  font-size: var(--size-tiny);
  color: var(--danger);
  line-height: 1.45;
  margin: 0.15rem 0 0;
}
.input,
.textarea,
.select {
  width: 100%;
  font-family: var(--font-reading);
  font-size: var(--size-body);
  line-height: 1.5;
  color: var(--text-heading);
  background: var(--card-bg);
  border: var(--rule-strong);
  border-radius: var(--radius-base);
  padding: 0.65rem 0.85rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-muted); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand-blue-mark);
  box-shadow: var(--focus-ring);
  background: var(--card-bg-raised);
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(154,51,36,0.12);
}
.textarea { min-height: 6rem; resize: vertical; }
.select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

/* Search input with embedded glyph */
.input--search {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23928B7C' stroke-width='1.8'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
  background-position: 0.65rem 50%;
  background-repeat: no-repeat;
  padding-left: 2.4rem;
}

/* Choice — checkbox / radio with custom chrome */
.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.65rem;
  font-family: var(--font-reading);
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--text-body);
  cursor: pointer;
}
.choice input {
  appearance: none;
  width: 1rem; height: 1rem;
  border: var(--rule-strong);
  background: var(--card-bg);
  margin-top: 0.25rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.choice input[type="checkbox"] { border-radius: 2px; }
.choice input[type="radio"]    { border-radius: 50%; }
.choice input:hover { border-color: var(--text-muted); }
.choice input:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.choice input:checked {
  background: var(--brand-blue-deep);
  border-color: var(--brand-blue-deep);
}
.choice input[type="checkbox"]:checked {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.choice input[type="radio"]:checked {
  box-shadow: inset 0 0 0 3px var(--card-bg);
}
.choice__note {
  display: block;
  font-size: var(--size-tiny);
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Form layouts */
.form-stack { display: grid; gap: var(--space-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-2);
  border-top: var(--rule-hairline);
  margin-top: var(--space-2);
}

/* Inline / subscribe — input + submit on one row */
.inline-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  max-width: 28rem;
}
@media (max-width: 480px) { .inline-form { grid-template-columns: 1fr; } }

/* The sign-in surface — a card with two fields and a primary action */
.signin {
  max-width: 24rem;
  padding: var(--card-pad);
  background: var(--card-bg-raised);
  border: var(--card-border);
}
.signin__head {
  display: grid;
  gap: 0.2rem;
  padding-bottom: var(--card-pad-tight);
  margin-bottom: var(--card-pad-tight);
  border-bottom: var(--rule-hairline);
}
.signin__head h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  margin: 0;
  letter-spacing: var(--tracking-base);
}
.signin__head p {
  font-size: var(--size-small);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}
.signin__foot {
  margin-top: var(--card-pad-tight);
  padding-top: var(--card-pad-tight);
  border-top: var(--rule-dashed);
  font-family: var(--font-reading);
  font-size: var(--size-tiny);
  color: var(--text-muted);
  text-align: center;
}

/* =========================================================================
   GLASS — chrome material. Used on header, modals, rail-card variants.
   ========================================================================= */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* =========================================================================
   VISIBILITY DEFAULTS — for the prototype, show anonymous state.
   In production, PHP `lib/visibility.php` strips one of these server-side
   based on the active session. Important here because the prototype loads
   utility CSS (.iconbtn etc) after this stylesheet — visibility must win.
   ========================================================================= */
[data-visible="authenticated"],
[data-visible*="tier:"],
[data-visible="staff"] { display: none !important; }

/* Toggle to preview the signed-in state:
   <html data-session="authenticated"> shows authenticated, hides anonymous */
[data-session="authenticated"] [data-visible="anonymous"] { display: none !important; }
[data-session="authenticated"] [data-visible="authenticated"] { display: inline-flex !important; }

/* =========================================================================
   RFC-2119 KEYWORDS — for the spec template.
   ========================================================================= */
.rfc-must, .rfc-should, .rfc-may {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: 2px;
}
.rfc-must   { color: var(--danger);   background: var(--danger-light); }
.rfc-should { color: var(--warning);  background: var(--warning-light); }
.rfc-may    { color: var(--blue-700); background: var(--blue-50); }

/* Tabular numerals utility — for data alignment */
.tnum { font-variant-numeric: tabular-nums; }

/* Consent banner — Doctrine §2.10. Renders only when SITE_GTM_CONTAINER is set. */
.oat-consent {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 1000;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--surface, #fff);
  color: var(--text, #1c1c1c);
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  font-size: 0.9375rem; line-height: 1.45;
}
.oat-consent__text { margin: 0; flex: 1 1 320px; min-width: 240px; color: var(--text-muted, #555); }
.oat-consent__actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
@media (min-width: 768px) {
  .oat-consent { left: auto; right: 1.5rem; bottom: 1.5rem; max-width: 32rem; }
}