/*
  site-polish.v62.css
  Purpose: sitewide consistency + design tokens (spacing/type/radius/shadow) + typography tuning.

  Goals:
  - Keep MVG pages looking like one system (quiet, Apple-grade finish).
  - Provide a small token layer so future page-level polish does not drift.
  - No external deps. CSP-friendly. Low risk.

  Tokens:
  - Spacing scale (4/8/12/16/24/32/48/64)
  - Component radii (card/button/input/chip)
  - Focus ring / outline
  - Reading measure + line-height
  - Code contrast + tabular numerals
*/

:root{
  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Component radii */
  --radius-card: var(--radius);
  --radius-btn: 14px;
  --radius-input: 14px;
  --radius-chip: 999px;

  /* Component spacing tokens (keep current feel; centralize for consistency) */
  --card-pad: var(--s-4);
  --card-pad-sm: 14px;
  --btn-pad-y: 10px;
  --btn-pad-x: 14px;
  --btn-gap: 10px;

  /* Focus / outline (quiet ring) */
  --focus-ring: 0 0 0 4px rgba(124,92,255,.10);
  --focus-outline: rgba(124,92,255,.45);

  /* Typography */
  --measure: 68ch;
  --measure-hero: 58ch;
  --lh-body: 1.68;
  --lh-h1: 1.04;
  --lh-h2: 1.16;
  --lh-h3: 1.24;

  /* Code presentation */
  --code-bg: rgba(255,255,255,.04);
  --code-border: rgba(255,255,255,.10);


  /* Motion tokens (Apple-grade consistency) */
  --mvg-motion-fast: 120ms;
  --mvg-motion-base: 180ms;
  --mvg-ease: cubic-bezier(.2,.8,.2,1);

}

:root[data-theme="light"]{
  --code-bg: rgba(12,16,32,.05);
  --code-border: rgba(12,16,32,.12);
}

/* Accessibility: respect OS preferences without changing the aesthetic. */
@media (prefers-reduced-motion: reduce){
  :root{
    --mvg-motion-fast: 0ms;
    --mvg-motion-base: 0ms;
  }
}

@media (prefers-contrast: more){
  :root{
    /* Slightly stronger focus visibility, still quiet. */
    --focus-ring: 0 0 0 5px rgba(124,92,255,.18);
    --focus-outline: rgba(124,92,255,.72);
    --code-border: rgba(255,255,255,.18);
  }
  :root[data-theme="light"]{
    --code-border: rgba(12,16,32,.18);
  }
  .card:focus-within{
    border-color: rgba(124,92,255,.72);
  }
  .receipt-mark{ opacity: 1; }
}

/* --- Layout utilities --- */

/* 2-column grid utility (matches grid-3 rhythm; uses token gap) */
.grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 980px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* Compact hero variant (used sparingly for auditor hubs) */
.hero.hero-tight{
  padding: 54px 0 24px;
}
@media (max-width: 920px){
  .hero.hero-tight{
    padding: 56px 0 22px;
  }
}

/* Spacing utilities (CSP-friendly; replaces inline style attrs) */
.mvg-mt-125 { margin-top: 1.25rem; }
.mvg-mt-1   { margin-top: 1rem; }
.mvg-mt-075 { margin-top: 0.75rem; }
.mvg-mt-06  { margin-top: 0.6rem; }
.mvg-mt-05  { margin-top: 0.5rem; }
.mvg-mt-035 { margin-top: 0.35rem; }
.mvg-ml-025 { margin-left: 0.25rem; }

/* --- Component semantics (optional classes for consistent rhythm) --- */

/* Card: unify padding + radius via tokens (specialized pages may override with more specific selectors) */
.card{
  padding: var(--card-pad);
  border-radius: var(--radius-card);
}
@media (max-width: 520px){
  .card{ padding: var(--card-pad-sm); }
}

.card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}

.card-title{
  margin: 10px 0 6px;
}

.card-text{
  margin: 0;
  color: var(--muted);
}

/* Buttons: centralize the core geometry without changing the design language */
.btn{
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-btn);
}
.icon-btn{
  border-radius: var(--radius-btn);
}

/* --- Reveal fallback --- */

/*
  Many pages use .reveal for progressive disclosure.
  If JS is blocked (or held), .reveal can remain hidden.
  This fallback guarantees visibility after a short delay.
*/
html:not(.js) .reveal{
  animation: mvg-reveal-fallback 0s linear 0.20s forwards;
}
@keyframes mvg-reveal-fallback{
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  html:not(.js) .reveal{ animation-delay: 0s; }
}

/* --- Typography tuning (authority / readability) --- */

body{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p{ line-height: var(--lh-body); }

/* Keep existing hero/section measures, but route through tokens for consistency */
.hero-lede{ max-width: var(--measure-hero); }
.section-head p{ max-width: var(--measure); }

h1{ line-height: var(--lh-h1); }
h2{ line-height: var(--lh-h2); }
h3{ line-height: var(--lh-h3); }

h1,h2,h3{ letter-spacing: -0.022em; }

/* Code/URLs/SHA: stable alignment + consistent contrast */
:not(pre) > code{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--text);
}
pre, pre code{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Focus polish (quiet ring) --- */

.btn:focus-visible{
  box-shadow: var(--focus-ring), var(--shadow-soft);
}
.btn.ghost:focus-visible{
  box-shadow: var(--focus-ring);
}
.card:focus-within{
  border-color: rgba(124,92,255,.45);
  box-shadow: var(--focus-ring), var(--shadow-soft);
}


/* --- Touch physics (sitewide) --- */
/* Apple-grade interaction consistency: same lift/press rhythm across buttons and cards. */
:root{
  --touch-lift: 1px;
  --touch-dur: var(--mvg-motion-base);
  --touch-ease: var(--mvg-ease);
}

.btn, .card{
  transition: transform var(--mvg-motion-base) var(--mvg-ease),
              border-color var(--mvg-motion-base) var(--mvg-ease),
              background var(--mvg-motion-base) var(--mvg-ease),
              box-shadow var(--mvg-motion-base) var(--mvg-ease);
}
.btn:hover, .card:hover{ transform: translateY(calc(-1 * var(--touch-lift))); }
.btn:active, .card:active{ transform: translateY(0); }


/* --- Signature glyph: Tri‑State Receipt Mark (PASS / HOLD / FAIL) --- */
.receipt-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 14px;
  opacity: .88;
  vertical-align: middle;
}
.receipt-mark svg{ display:block; }
.receipt-mark .ts-line{
  stroke: rgba(255,255,255,.18);
  stroke-width: 1.25;
  stroke-linecap: round;
}
:root[data-theme="light"] .receipt-mark .ts-line{
  stroke: rgba(0,0,0,.14);
}
.receipt-mark .ts{
  fill: rgba(255,255,255,.10);
  stroke: rgba(255,255,255,.22);
  stroke-width: 1.25;
}
:root[data-theme="light"] .receipt-mark .ts{
  fill: rgba(0,0,0,.04);
  stroke: rgba(0,0,0,.18);
}

/* Default: neutral (iconic but quiet). Highlight when a receipt state is known. */
[data-receipt-state="ok"] .receipt-mark .ts-pass{
  fill: color-mix(in srgb, var(--ok) 82%, transparent);
  stroke: var(--ok);
  filter: drop-shadow(0 0 10px rgba(46,229,157,.18));
}
[data-receipt-state="hold"] .receipt-mark .ts-hold{
  fill: color-mix(in srgb, var(--brand) 80%, transparent);
  stroke: var(--brand);
  filter: drop-shadow(0 0 10px rgba(124,92,255,.18));
}
[data-receipt-state="deny"] .receipt-mark .ts-fail{
  fill: color-mix(in srgb, var(--bad) 82%, transparent);
  stroke: var(--bad);
  filter: drop-shadow(0 0 10px rgba(255,77,103,.18));
}

/* Fallback for browsers without color-mix (keeps it subtle). */
@supports not (color: color-mix(in srgb, white, black)){
  [data-receipt-state="ok"] .receipt-mark .ts-pass{ fill: rgba(46,229,157,.35); stroke: var(--ok); }
  [data-receipt-state="hold"] .receipt-mark .ts-hold{ fill: rgba(124,92,255,.30); stroke: var(--brand); }
  [data-receipt-state="deny"] .receipt-mark .ts-fail{ fill: rgba(255,77,103,.32); stroke: var(--bad); }
}

/* --- Front door readability: down‑tone URLs/code in mini contexts (CEO scan flow) --- */
.door-front .mini code,
.door-front .mini .mono,
.door-front .meta-row code{
  font-size: 12px;
  opacity: .88;
}