/* Bygmedai · Havvilla — static preview stylesheet (Phase 1, ADR-0001).
   Ports SharedStyle (shared.jsx) + ReceiptStyle (case-receipt-window.jsx)
   from the client-side JSX into a static stylesheet. HV tokens are
   consolidated into a single :root set per ADR-0001 §5. Additive only —
   the live client-Babel frontpage is untouched. */

:root {
  --hv-paper: #eef0eb;
  --hv-paper-lift: #e6e9e3;
  --hv-ink: #1b2027;
  --hv-ink-soft: #4a5562;
  --hv-ink-mute: #7a8693;
  --hv-ink-faint: rgba(27, 32, 39, 0.35);
  --hv-rule: #cdd2d3;
  --hv-rule-faint: #e0e3e1;
  --hv-blue-fog: #dce5ea;
  --hv-blue-mid: #9ab4c1;
  --hv-blue-deep: #3e607a;
  --hv-blue-night: #1f3447;
  --hv-accent: #8a1d1d;

  /* Phase-7 Claude Design golden-hour extension — afledt af dusk-tonen
     (#d8c4ad), IKKE opfundet fra bunden. Lever kun i vinduer, billed-grade
     og dybe dusk-bånd. Steven-ratificeret design-handoff 2026-05-31. */
  --hv-gold:       #e7c79a;   /* varm himmel, golden hour */
  --hv-gold-mid:   #c98a63;   /* terrakotta / kobber */
  --hv-ember:      #b25a3a;   /* glød — varm sekundær-accent, sparsomt */
  --hv-dusk-sky:   #d8c4ad;   /* canon dusk top */
  --hv-dusk-deep:  #3a3050;   /* dusk overgang mod night */
  --hv-warmth:     1;         /* 0..1 golden-hour intensitet på billeder */
  --hv-serif: 'Lora', Georgia, serif;
  --hv-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--hv-paper);
  font-family: var(--hv-serif);
}
body {
  color: var(--hv-ink);
  font-size: 18px;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.hvp-stage { max-width: 1280px; margin: 0 auto; }

/* ── SharedStyle — ported 1:1 from shared.jsx ── */
.hv-meta {
  font-family: var(--hv-mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hv-ink-mute);
}
.hv-meta-sm {
  font-family: var(--hv-mono);
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hv-ink-faint);
}
.hv-h1 {
  font-family: var(--hv-serif);
  font-weight: 500; font-size: 88px;
  letter-spacing: -0.025em; line-height: 1.04;
  margin: 0; color: var(--hv-ink);
}
.hv-h2 {
  font-family: var(--hv-serif);
  font-weight: 500; font-size: 48px;
  letter-spacing: -0.02em; line-height: 1.1;
  margin: 0; color: var(--hv-ink);
}
.hv-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--hv-rule);
  transition: border-color .15s;
}
.hv-link:hover { border-bottom-color: var(--hv-ink); }
.hv-rule { border: 0; border-top: 1px solid var(--hv-rule); margin: 0; }
.hv-rule-faint { border: 0; border-top: 1px solid var(--hv-rule-faint); margin: 0; }

@keyframes hv-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.hv-rec { animation: hv-rec-pulse 2.4s ease-in-out infinite; }

.hv-ticker {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  border-top: 1px solid var(--hv-rule-faint);
  border-bottom: 1px solid var(--hv-rule-faint);
}
.hv-ticker > div {
  padding: 14px 24px;
  border-right: 1px solid var(--hv-rule-faint);
  font-family: var(--hv-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hv-ink-soft);
  display: flex; align-items: baseline; gap: 10px;
}
.hv-ticker > div:last-child { border-right: none; }
.hv-ticker .tick-k { color: var(--hv-ink-mute); font-size: 9px; letter-spacing: 0.2em; }
.hv-ticker .tick-v { color: var(--hv-ink); }
.hv-ticker .tick-accent { color: var(--hv-accent); }

/* ── Window — ported from shared.jsx Window component ── */
.hv-window {
  position: relative; width: 100%;
  background: var(--hv-paper-lift); overflow: hidden;
}
.hv-window--dim { filter: grayscale(0.55) brightness(0.92) contrast(0.92); }
.hv-window--frameless .hv-window__frame { display: none; }
.hv-window__img,
.hv-window__img-direct,
.hv-window__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.hv-window__grade {
  position: absolute; inset: 0; pointer-events: none;
}
.hv-window__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,28,38,0) 0%, rgba(20,28,38,0.52) 100%);
}
.hv-window__sky, .hv-window__sea { position: absolute; left: 0; right: 0; }
.hv-window__sky { top: 0; }
.hv-window__sea { bottom: 0; }
.hv-window__horizon {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--hv-blue-deep); opacity: 0.55;
}
.hv-window__tideline {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--hv-paper);
}
.hv-window__mullion-v {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: var(--hv-paper); opacity: 0.85;
}
.hv-window__mullion-h {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
  background: var(--hv-paper); opacity: 0.85;
}
.hv-window__frame {
  position: absolute; inset: 0;
  border: 1px solid var(--hv-rule); pointer-events: none;
}
.hv-window__badge {
  position: absolute; top: 16px; left: 20px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--hv-mono); font-size: 10px;
  letter-spacing: 0.22em; color: #fff; text-transform: uppercase;
}
.hv-window__rec {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--hv-accent); box-shadow: 0 0 10px var(--hv-accent);
}
.hv-window__rec--off { background: var(--hv-ink-faint); box-shadow: none; }
.hv-window__tag {
  position: absolute; top: 16px; left: 20px;
  font-family: var(--hv-mono); font-size: 10px;
  letter-spacing: 0.22em; color: #fff; text-transform: uppercase;
}
.hv-window__tag--fig { opacity: 0.85; }
.hv-window__tag--foto { opacity: 0.7; }
.hv-window__archive {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--hv-mono); font-size: 10px;
  letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.72);
}
.hv-window__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(31, 52, 71, 0.18);
  border-top: 1px solid var(--hv-paper);
}
.hv-window__caption {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.hv-window__label {
  font-family: var(--hv-mono); font-size: 11px;
  letter-spacing: 0.16em; color: #fff; text-transform: uppercase;
}
.hv-window__sublabel {
  font-family: var(--hv-mono); font-size: 10px;
  letter-spacing: 0.10em; color: rgba(255, 255, 255, 0.65); margin-top: 4px;
}

/* ── CaseReceiptWindow — ported from case-receipt-window.jsx ReceiptStyle ── */
.receipt-window { position: relative; }
.receipt-animation { position: absolute; inset: 0; }
.receipt-frame { position: absolute; inset: 0; transform-origin: 50% 50%; }
.receipt-page--seed {
  position: absolute; top: 50%; left: 50%;
  width: 92px; height: 122px; margin: -61px 0 0 -46px;
  background: var(--hv-paper);
  border: 1px solid var(--hv-ink-soft);
  box-shadow: 0 2px 0 rgba(27, 32, 39, 0.14);
  opacity: 0;
}
.receipt-suite-grid {
  position: absolute; inset: 13% 12% 22%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr; gap: 6px;
}
.receipt-suite-cell {
  background: var(--hv-paper);
  border: 1px solid var(--hv-rule);
  opacity: 1;
}
.receipt-grid-glow {
  position: absolute; inset: 13% 12% 22%;
  border: 1px solid var(--hv-blue-mid);
  box-shadow: 0 0 24px rgba(154, 180, 193, 0.6);
  opacity: 0; pointer-events: none;
}
.receipt-i18n-toggle {
  position: absolute; left: 20px; bottom: 52px;
  font-family: var(--hv-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  display: flex; gap: 6px; align-items: baseline;
}
.receipt-i18n-da { opacity: 0.4; }
.receipt-i18n-en { opacity: 1; }
.receipt-voice {
  position: absolute; right: 20px; bottom: 48px;
  text-align: right;
  font-family: var(--hv-mono); font-size: 10px;
  letter-spacing: 0.07em; line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
}
.receipt-voice-line { opacity: 1; }

@keyframes inkandart-page-seed {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  55%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px) scale(0.95); }
}
@keyframes inkandart-mullion-open {
  0%   { transform: scale(0.94); opacity: 0.82; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes inkandart-suite-reveal {
  0%   { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes inkandart-grid-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
@keyframes inkandart-i18n-switch {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.receipt-window--playing .receipt-page--seed {
  animation: inkandart-page-seed 1.4s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.receipt-window--playing .receipt-frame {
  animation: inkandart-mullion-open 1s cubic-bezier(0.23, 1, 0.32, 1) 0.8s both;
}
.receipt-window--playing .receipt-suite-cell {
  animation: inkandart-suite-reveal 0.55s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.receipt-window--playing .receipt-grid-glow {
  animation: inkandart-grid-glow 0.4s ease-in-out 4.5s both;
}
.receipt-window--playing .receipt-i18n-en {
  animation: inkandart-i18n-switch 0.5s cubic-bezier(0.23, 1, 0.32, 1) 3s both;
}
.receipt-window--playing .receipt-voice-line {
  animation: inkandart-i18n-switch 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* Motion accessibility — receipt CSS-media-query is primary (per JSX). */
@media (prefers-reduced-motion: reduce) {
  .receipt-window *, .hv-rec {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Responsive — per DESIGN.md S428 "Responsive disciplin" ──
   The client-side JSX has no mobile implementation; this block
   implements the ratified S428 collapse so the preview is usable
   on narrow viewports (AC-P1-12). */
@media (max-width: 767px) {
  .hvp-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hv-h1 { font-size: clamp(2.5rem, 12vw, 88px); text-wrap: balance; }
  .hvp-grid { grid-template-columns: 1fr !important; }
  .hvp-grid--reverse > *:first-child { order: 2; }
  .hv-ticker { grid-auto-flow: row; }
  .hv-ticker > div {
    border-right: none;
    border-bottom: 1px solid var(--hv-rule-faint);
  }
  .hv-ticker > div:last-child { border-bottom: none; }
}

/* Phase-7 Fig partials — tegnede figurer i havvilla-hånd.
   Container-query-skaleret så intet klippes på smalle vinduer. */
.hv-fig {
  position: absolute; inset: 0; overflow: hidden;
  container-type: inline-size;
}
.hv-fig--klamsine {
  background: linear-gradient(168deg, #2b3b4e 0%, #1d2935 54%, #131c26 100%);
}
.hv-fig--klamsine .hv-fig__horizon-line {
  position: absolute; left: 0; right: 0; top: 38%; height: 1px;
  background: rgba(238,240,235,0.14);
}
.hv-fig--klamsine .hv-fig__sea-shimmer {
  position: absolute; left: -10%; right: -10%; bottom: -20%; height: 55%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(120,160,185,0.20) 0%, rgba(120,160,185,0) 70%);
}
.hv-fig__klamsine-content {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 3.2em 1.6em 4em;
  text-align: center; font-size: clamp(11px, 4.5cqw, 22px);
}
.hv-fig__label {
  font-family: var(--hv-mono, 'JetBrains Mono', monospace);
  font-size: 0.82em; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(238,240,235,0.5); margin-bottom: 2em;
}
.hv-fig__sublabel {
  font-family: var(--hv-mono, 'JetBrains Mono', monospace);
  font-size: 0.78em; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(238,240,235,0.55); margin-top: 2.2em;
}
.hv-fig__klamsine-row {
  display: flex; align-items: center; gap: 1.05em;
}
.hv-fig__klamsine-zero {
  font-family: 'Lora', Georgia, serif; font-style: italic;
  font-size: 1.7em; color: rgba(238,240,235,0.4); line-height: 1;
}
.hv-fig__klamsine-hundred {
  font-family: 'Lora', Georgia, serif; font-weight: 500;
  font-size: 4.2em; letter-spacing: -0.03em;
  color: #e0794f; line-height: 0.85;
}
.hv-fig__klamsine-sign { font-size: 0.5em; }
.hv-fig__arrow {
  display: inline-flex; align-items: center;
}
.hv-fig__arrow-line {
  width: 2.6em; height: 1px; background: rgba(238,240,235,0.5);
}
.hv-fig__arrow-tip {
  width: 0; height: 0;
  border-left: 0.5em solid rgba(238,240,235,0.5);
  border-top: 0.32em solid transparent;
  border-bottom: 0.32em solid transparent;
}

.hv-fig--geopol {
  background: linear-gradient(180deg, #252e38 0%, #18202a 100%);
}
.hv-fig__geopol-grid {
  position: absolute; inset: 0; padding: 2.7em 1.4em 3em;
  display: grid; grid-template-columns: 1fr 1.12fr; gap: 0.9em;
  font-size: clamp(10px, 3.7cqw, 16px);
}
.hv-fig__geopol-panel {
  border: 1px solid rgba(226,231,234,0.16);
  padding: 0.7em;
  display: flex; flex-direction: column; gap: 0.5em;
  min-width: 0; overflow: hidden;
}
.hv-fig__geopol-panel-label {
  font-family: var(--hv-mono, 'JetBrains Mono', monospace);
  font-size: 0.6em; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(226,231,234,0.45); margin-bottom: 0.2em;
}
.hv-fig__geopol-rows {
  flex: 1; display: flex; flex-direction: column; justify-content: space-around;
}
.hv-fig__geopol-row {
  display: flex; align-items: center; gap: 0.5em;
}
.hv-fig__geopol-num {
  font-family: var(--hv-mono, 'JetBrains Mono', monospace);
  font-size: 0.58em; color: rgba(226,231,234,0.4);
}
.hv-fig__geopol-bar {
  height: 0.5em; background: rgba(226,231,234,0.16); flex: 1;
}
.hv-fig__geopol-bar--heading { height: 0.8em; background: rgba(226,231,234,0.3); }
.hv-fig__geopol-bar--line { flex: none; display: block; }
.hv-fig__geopol-cal {
  width: 2.4em; height: 0.34em; background: rgba(226,231,234,0.1);
  position: relative; flex-shrink: 0;
}
.hv-fig__geopol-cal > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: #c0563c; opacity: 0.7; display: block;
}
.hv-fig__geopol-chips {
  margin-top: auto; display: flex; gap: 0.45em;
}
.hv-fig__geopol-chip {
  font-family: var(--hv-mono, 'JetBrains Mono', monospace);
  font-size: 0.52em; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(226,231,234,0.4);
  border: 1px solid rgba(226,231,234,0.18);
  padding: 0.28em 0.5em;
}