/* ===================================================
   CSS CUSTOM PROPERTIES
   Palette locked in BACKLOG.md (Phase 4) — do not
   re-derive these values without checking BACKLOG.md first.
=================================================== */
:root {
  --bg:           #131210;
  --surface:      rgba(255,255,255,0.04);
  --surface-hi:   rgba(255,255,255,0.08);
  --surface-modal: #251d15;
  --border:       rgba(255,255,255,0.09);
  --border-gold:  rgba(195,157,99,0.32);
  --gold:         #c39d63;
  --gold-glow:    rgba(195,157,99,0.14);
  --on-gold:      #241c0e;
  --warm:         #EDE9E1;
  --warm-70:      rgba(237,233,225,0.75);
  --warm-45:      rgba(237,233,225,0.50);
  /* Lifestage tier colors — shared by .lifestage-badge and .arc-pip.active
     (see BACKLOG.md's badge table). One source of truth, not duplicated. */
  --tier-baby:     #9dca8b;
  --tier-young:    #89bbde;
  --tier-adult:    var(--gold);
  --tier-mature:   #c8c5bc;
  --tier-senior:   #c0aee0;
  --tier-geriatric: #cb96c8;
  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --ease: 0.25s cubic-bezier(0.4,0,0.2,1);
  --spring: 0.45s cubic-bezier(0.34,1.56,0.64,1);
}

/* ===================================================
   RESET & BASE
=================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  background-image: url('/images/leopardBackground-faded.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--warm);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: url('/static/paw_tan.png') 10 10, auto;
}

/* Background image swap only — not a light/dark color theme (dark theme only, see BACKLOG.md) */
@media (prefers-color-scheme: dark) {
  body { background-image: url('/images/leopardBackground_dark.jpg'); }
}

body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

body::after {
  content: ''; position: fixed; top: -200px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(195,157,99,0.07) 0%, transparent 68%);
  pointer-events: none; z-index: 0;
  animation: ambientFloat 22s ease-in-out infinite alternate;
}

@keyframes ambientFloat {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(60px); }
}

/* ===================================================
   LAYOUT
=================================================== */
.app-wrap {
  position: relative; z-index: 1; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 16px 64px;
}

/* ===================================================
   HEADER
=================================================== */
header {
  text-align: center; padding: 40px 0 24px;
  animation: riseIn 0.7s cubic-bezier(0.34,1.3,0.64,1) both;
}
.logo-mark {
  font-size: 28px; display: inline-block;
  animation: pawBreathe 4s ease-in-out infinite; margin-bottom: 4px;
}
@keyframes pawBreathe {
  0%, 100% { transform: scale(1) rotate(-6deg); }
  50%      { transform: scale(1.22) rotate(6deg); }
}
header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 6vw, 36px); font-weight: 600;
  color: var(--warm); letter-spacing: 0.01em; line-height: 1.15;
}
header p {
  font-size: 12px; font-weight: 300; color: var(--warm-45);
  letter-spacing: 0.05em; margin-top: 4px;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===================================================
   MAIN CARD
=================================================== */
.container {
  width: 100%; max-width: 520px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: clamp(20px,4vw,32px) clamp(16px,4vw,28px);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 32px 72px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: riseIn 0.75s cubic-bezier(0.34,1.2,0.64,1) 0.06s both;
}

.sec-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--gold);
  margin-bottom: .6rem;
  line-height: 1.4;
}
.sec-label-note {
  font-size: 1rem;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}
.divider { height: 1px; background: var(--border); margin: 20px 0; }

/* ===================================================
   TOGGLE SWITCH
   DOM structure preserved (checkbox + .slider span) —
   only colors/style updated to new palette.
=================================================== */
.toggle-container {
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.30); border: 1px solid var(--border); border-radius: var(--r);
  padding: 5px; margin-bottom: 4px; gap: clamp(8px, 2.2vw, 20px);
}
.toggle-label {
  flex: 1; padding: 10px 12px; border-radius: calc(var(--r) - 3px);
  font-size: 13px; font-weight: 500; color: var(--warm-45);
  text-align: center; transition: var(--ease); user-select: none;
  cursor: url('/static/paw_grey.png') 10 10, auto !important;
}
.toggle-label.active,
.toggle-container:has(#calcModeToggle:not(:checked)) .toggle-label.label-left,
.toggle-container:has(#calcModeToggle:checked) .toggle-label.label-right {
  background: var(--surface-hi); color: var(--warm);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.toggle-switch {
  position: relative; display: flex; align-items: center; padding: 0 10px; flex-shrink: 0;
  cursor: url('/static/paw_grey.png') 10 10, auto !important;
}
.toggle-switch input[type="checkbox"] { opacity: 0; width: 0; height: 0; }
.slider {
  position: relative;
  width: clamp(40px, 10vw, 44px); height: 24px;
  background: var(--border); border-radius: 100px;
  transition: background var(--ease);
  cursor: url('/static/paw_grey.png') 10 10, auto;
}
.slider:before {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--warm-70); top: 3px; left: 3px;
  transition: transform 0.25s var(--ease), background 0.2s;
}
.toggle-switch input:checked + .slider { background: rgba(195,157,99,0.4); }
.toggle-switch input:checked + .slider:before { transform: translateX(20px); background: var(--gold); }

/* ===================================================
   SPECIES CHIPS
=================================================== */
.species-chips-container { position: relative; overflow: hidden; margin-bottom: 18px; }
.species-chips-container::before, .species-chips-container::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 2; pointer-events: none;
}
.species-chips-container::before { left: 0; background: linear-gradient(to right, var(--bg) 0%, transparent 100%); }
.species-chips-container::after  { right: 0; background: linear-gradient(to left, var(--bg) 0%, transparent 100%); }

.scroll-arrow {
  display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(195,157,99,0.15); border: 1px solid var(--border-gold); color: var(--gold);
  font-size: 11px; align-items: center; justify-content: center; transition: var(--ease);
}
@media (hover: hover) { .scroll-arrow { display: flex; } }
.scroll-arrow.left  { left: 2px; }
.scroll-arrow.right { right: 2px; }
.scroll-arrow:hover { background: var(--gold-glow); }
.scroll-arrow.disabled { opacity: 0.25; pointer-events: none; }

.species-chips {
  display: flex; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 6px 32px; scrollbar-width: none;
}
.species-chips::-webkit-scrollbar { display: none; }

.species-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px 11px; min-width: 88px; flex: 0 0 88px;
  scroll-snap-align: center; border: 1px solid var(--border); border-radius: var(--r);
  background: transparent; color: var(--warm-45); transition: var(--ease);
  position: relative; overflow: hidden;
}
.species-chip::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: var(--ease); border-radius: inherit; }
.species-chip:hover { border-color: rgba(255,255,255,0.16); color: var(--warm-70); transform: translateY(-2px); }
.species-chip.selected, .species-chip:has(input:checked) {
  background: rgb(195 157 99 / 12%);
  border-color: var(--border-gold);
  color: var(--warm);
  box-shadow: 0 0 0 1px rgba(195,157,99,0.3), 0 6px 10px rgba(195,157,99,0.15);
}
.species-chip.selected::after, .species-chip:has(input:checked)::after {
  background: radial-gradient(ellipse at center, rgba(195,157,99,0.10) 0%, transparent 70%); opacity: 1;
}
.species-chip input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.chip-emoji { font-size: 28px; line-height: 1; display: block; transition: var(--spring); position: relative; z-index: 1; }
.species-chip:hover .chip-emoji, .species-chip.selected .chip-emoji, .species-chip:has(input:checked) .chip-emoji { transform: scale(1.2); }
.chip-name { font-size: 11.5px; font-weight: 500; letter-spacing: 0.03em; position: relative; z-index: 1; }

/* ===================================================
   BREED SELECT
=================================================== */
.breed-section { margin-bottom: 20px; }
.breed-input-container { position: relative; }
#breed {
  width: 100%; padding: 12px 40px 12px 16px;
  background: rgba(0,0,0,0.28); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--warm-70); font-family: 'DM Sans', sans-serif; font-size: 13.5px;
  appearance: none; -webkit-appearance: none; outline: none;
  transition: border-color var(--ease), color var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23c39d63' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  cursor: url('/static/paw_grey.png') 10 10, auto;
}
#breed:focus { border-color: var(--border-gold); color: var(--warm); }
#breed option { background: var(--surface-modal); color: var(--warm); }
#breed[data-no-species-selected="true"] { opacity: 0.5; }
#breed:disabled { cursor: not-allowed; opacity: 0.6; }

#breedSpinner { margin-top: 8px; text-align: center; display: none; }
#breedHelp { font-size: 11.5px; color: var(--warm-45); font-style: italic; margin-top: 6px; }

/* Default-hidden state lives here (not as an inline style="" attribute in
   the HTML) because the CSP style-src directive has no 'unsafe-inline' —
   inline style attributes would be blocked. JS toggles .style.display at
   runtime, which is unaffected by CSP since it isn't parsed from markup. */
#humanInputDiv,
#results {
  display: none;
}

/* ===================================================
   AGE FORM / STEPPER INPUTS
=================================================== */
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
#humanInputDiv .input-row { grid-template-columns: 1fr; }
.input-group {
  display: flex; align-items: stretch;
  background: rgba(0,0,0,0.28); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; transition: border-color var(--ease);
}
.input-group:focus-within { border-color: var(--border-gold); }
.stepper {
  width: 36px; border: none; background: transparent; color: var(--warm-45);
  font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: var(--ease);
  cursor: url('/static/paw_grey.png') 10 10, auto !important;
}
.stepper:hover { color: var(--warm); background: rgba(255,255,255,0.04); }
.input-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 4px; }
.age-number {
  width: 100%; text-align: center; border: none; background: transparent; color: var(--warm);
  font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; line-height: 1; outline: none;
}
.age-number::-webkit-inner-spin-button, .age-number::-webkit-outer-spin-button { -webkit-appearance: none; }
.age-unit { font-size: 9.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--warm-45); margin-top: 3px; }

/* ===================================================
   BUTTONS
=================================================== */
.btn-primary {
  width: 100%; padding: 14px 20px; border: none; border-radius: var(--r);
  background: var(--gold); color: var(--on-gold);
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.05em;
  transition: var(--ease); display: flex; align-items: center; justify-content: center; gap: 9px;
  cursor: url('/static/paw_grey.png') 10 10, auto;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 14px rgba(195,157,99,0.36); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  margin-top: 14px; padding: 10px 18px; border: 1px solid var(--border-gold); border-radius: var(--r);
  background: transparent; color: var(--gold); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  transition: var(--ease);
  cursor: url('/static/paw_grey.png') 10 10, auto;
}
.btn-secondary:hover { background: var(--gold-glow); }

/* #moreInfo only ever renders inside #results (see BACKLOG.md) — centered
   underneath the result-divider rather than left-aligned like a normal
   .btn-secondary. */
#moreInfo {
  display: block;
  margin: 14px auto 0;
  box-shadow: 2px 2px 2px #281d08;
}

/* ===================================================
   RESULTS
   #results is populated via innerHTML by script.js
   (h2/h3/#humanAge/.lifestage-badge below match what it injects)
=================================================== */
#results-placeholder {
  margin-top: 18px; padding: 24px 20px;
  border: 1px dashed rgba(255,255,255,0.10); border-radius: var(--r);
  text-align: center;
}
#results-placeholder .placeholder-emoji { font-size: 32px; display: block; margin-bottom: 8px; opacity: 0.5; }
#results-placeholder p { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-style: italic; color: var(--warm-45); line-height: 1.5; }

#results {
  margin-top: 18px;
  background: var(--surface); border: 1px solid var(--border-gold); border-radius: var(--r-xl);
  padding: 24px 22px 22px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(195,157,99,0.08), 0 24px 52px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative; overflow: hidden;
  animation: riseIn 0.55s cubic-bezier(0.34,1.2,0.64,1) both;
}
#results::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}
#results h2 {
  font-family: 'Cormorant Garamond', serif;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: #c39d63;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Two-column label/value grid — label and value share a common center
   divide regardless of label text length (right-aligned label column,
   left-aligned value column). */
.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 16px;
  align-items: baseline;
  margin-top: 4px;
}
.result-label {
  text-align: right;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-45);
}
.result-value { text-align: left; }
.result-value--hero {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; font-weight: 600; line-height: 1.1;
  color: var(--warm);
  text-shadow: 2px 2px 2px #281d08;
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}

.result-divider {
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 18px;
}

/* ===================================================
   NARRATIVE RESULT + LIFE ARC + LIFESTAGE COMMENT
   Replaces the old .result-grid hero/lifestage rows as
   the results-panel centerpiece. .result-value--hero
   above is reused as-is for the hero number.
=================================================== */
.narrative-result {
  text-align: center;
  margin-top: 4px;
  margin-bottom: 20px;
  font-family: 'DM Sans', sans-serif;
}
.result-eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--warm-45);
}
.narrative-suffix { white-space: nowrap; }

.arc-wrap { margin-bottom: 20px; }
.arc-meta {
  display: flex; justify-content: space-between;
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--warm-45);
  margin-bottom: 8px;
}
.arc-track {
  height: 4px;
  background: var(--border);
  border-radius: 100px;
  position: relative;
}
.arc-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(195,157,99,0.35) 0%, var(--gold) 65%, color-mix(in srgb, var(--gold) 70%, white) 100%);
  width: 0%;
  transition: width 1.1s cubic-bezier(0.4,0,0.2,1) 0.5s;
  position: relative;
}
.arc-marker {
  position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}
.arc-pips {
  display: flex; justify-content: space-between; gap: 2px;
  margin-top: 10px;
}
.arc-pip {
  flex: 1; text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: .5rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--warm-45);
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  transition: var(--ease);
  white-space: nowrap;
}
/* Generic fallback (e.g. an unrecognized stage slug) — per-tier rules below
   override this via higher specificity (two classes vs one). */
.arc-pip.active {
  color: var(--gold);
  border-top-color: var(--gold);
  font-weight: 500;
}
.arc-pip.active.puppy, .arc-pip.active.kitten, .arc-pip.active.kit {
  color: var(--tier-baby); border-top-color: var(--tier-baby);
  background-color: color-mix(in srgb, var(--tier-baby) 15%, transparent);
  padding-bottom: .35rem;
}
.arc-pip.active.junior, .arc-pip.active.juvenile, .arc-pip.active.young-adult {
  color: var(--tier-young); border-top-color: var(--tier-young);
  background-color: color-mix(in srgb, var(--tier-young) 15%, transparent);
  padding-bottom: .35rem;
}
.arc-pip.active.prime {
  color: var(--tier-adult); border-top-color: var(--tier-adult);
  background-color: color-mix(in srgb, var(--tier-adult) 15%, transparent);
  padding-bottom: .35rem;
}
.arc-pip.active.mature-adult, .arc-pip.active.mature {
  color: var(--tier-mature); border-top-color: var(--tier-mature);
  background-color: color-mix(in srgb, var(--tier-mature) 15%, transparent);
  padding-bottom: .35rem;
}
.arc-pip.active.senior {
  color: var(--tier-senior); border-top-color: var(--tier-senior);
  background-color: color-mix(in srgb, var(--tier-senior) 15%, transparent);
  padding-bottom: .35rem;
}
.arc-pip.active.geriatric {
  color: var(--tier-geriatric); border-top-color: var(--tier-geriatric);
  background-color: color-mix(in srgb, var(--tier-geriatric) 15%, transparent);
  padding-bottom: .35rem;
}

.lifestage-comment {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-weight: 300; font-style: italic;
  color: var(--warm-70);
  line-height: 1.5;
  text-align: center;
  margin-bottom: 4px;
}

/* Lifestage badge — script.js writes class="lifestage-badge {slug}" (hyphenated, see BACKLOG.md) */
.lifestage-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px 5px 10px; border-radius: 100px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  background: var(--gold-glow); border: 1px solid var(--border-gold); color: var(--gold);
  box-shadow: 2px 2px 2px #281d08;
}
.lifestage-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.7; animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.6); }
}
.lifestage-badge.puppy, .lifestage-badge.kitten, .lifestage-badge.kit {
  background: rgba(123,155,107,0.15); border-color: rgba(123,155,107,0.30); color: var(--tier-baby);
}
.lifestage-badge.junior, .lifestage-badge.juvenile, .lifestage-badge.young-adult {
  background: rgba(91,143,190,0.15); border-color: rgba(91,143,190,0.30); color: var(--tier-young);
}
.lifestage-badge.prime {
  background: var(--gold-glow); border-color: var(--border-gold); color: var(--tier-adult);
}
.lifestage-badge.mature-adult, .lifestage-badge.mature {
  background: rgb(200 197 188 / 16%); border-color: rgba(200,197,188,0.32); color: var(--tier-mature);
}
.lifestage-badge.senior {
  background: rgba(152,135,181,0.15); border-color: rgba(152,135,181,0.30); color: var(--tier-senior);
}
.lifestage-badge.geriatric {
  background: rgba(168,110,165,0.16); border-color: rgba(168,110,165,0.32); color: var(--tier-geriatric);
}

/* Loading spinner — injected by script.js */
.loading-spinner { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; }
.spin { width: 36px; height: 36px; border: 3px solid var(--gold-glow); border-top-color: var(--gold); border-radius: 50%; animation: spinAnim 0.75s linear infinite; }
@keyframes spinAnim { to { transform: rotate(360deg); } }
.loading-text { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: var(--warm-45); letter-spacing: 0.05em; }

/* ===================================================
   BREED MODAL
=================================================== */
#breedModal {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); overflow-y: auto;
}
.modal-content {
  background: var(--surface-modal); border: 1px solid var(--border-gold); color: var(--warm);
  max-width: 580px; margin: 8vh auto; padding: 2rem; border-radius: var(--r-lg);
  position: relative; box-shadow: 0 24px 60px rgba(0,0,0,0.6); max-height: 80vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-gold) transparent;
}
.modal-content::-webkit-scrollbar { width: 4px; }
.modal-content::-webkit-scrollbar-thumb { background: var(--border-gold); border-radius: 4px; }
.modal-content h2 {
  font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: var(--warm);
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.modal-content h3 {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  margin: 20px 0 8px; padding: 8px 12px; background: var(--gold-glow); border-radius: var(--r-sm);
  border-left: 2px solid var(--gold);
}
.modal-content div, .modal-content p { font-size: 14.5px; color: var(--warm-70); line-height: 1.7; }
.modal-content ul { list-style: none; padding: 0; }
.modal-content ul li {
  font-size: 14px; color: var(--warm-70); padding: 6px 0 6px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04); position: relative; line-height: 1.55;
}
.modal-content ul li::before { content: '›'; position: absolute; left: 0; color: var(--gold); font-size: 16px; line-height: 1.3; }
#closeModal {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--warm-45);
  font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: var(--ease); cursor: url('/static/paw_grey.png') 10 10, auto;
}
#closeModal:hover { background: var(--surface-hi); color: var(--warm); border-color: var(--border-gold); }

/* ===================================================
   FOOTER
   Footer text uses --warm directly (full opacity) — see BACKLOG.md
=================================================== */
.footer-container { width: 100%; padding: 28px 20px 20px; margin-top: 8px; }
.footer-container::before { content: ''; display: block; width: 100%; height: 1px; background: var(--border); margin-bottom: 20px; }
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .footer-content {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .footer-nav     { order: 1; flex: 1 1 0%; }
  .footer-contact { order: 2; flex: 1 1 0%; min-width: 40%; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
  .footer-copy    { order: 3; flex: 1 1 0%; }
}
.footer-nav { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 120px; }
.footer-nav a { font-size: 12px; color: var(--warm); text-decoration: none; transition: color 0.2s; padding: 2px 0; }
.footer-nav a:hover { color: var(--gold); }
.footer-nav span { color: var(--warm); font-size: 10px; }
.footer-contact { text-align: center; padding: 0 20px; }
.footer-contact a, .footer-contact p { font-size: 12.5px; color: var(--warm); line-height: 1.8; text-decoration: none; transition: color 0.2s; }
.footer-contact a:hover { color: var(--gold); }
.footer-copy { font-size: 10.5px; color: var(--warm); text-align: center; line-height: 1.7; min-width: 160px; }
.footer-copy a { color: var(--warm); text-decoration: none; }
.disclaimer { font-size: 10px; font-style: italic; color: var(--warm); text-align: center; margin-top: 12px; }

/* ===================================================
   FOOTER MODAL
=================================================== */
.footer-modal {
  display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); overflow-y: auto;
  opacity: 0; transition: opacity 0.3s ease;
}
.footer-modal.show { display: block; opacity: 1; }
.footer-modal-content {
  background: var(--surface-modal); border: 1px solid var(--border-gold); color: var(--warm-70);
  max-width: 680px; margin: 6vh auto; padding: 2rem; border-radius: var(--r-lg);
  position: relative; box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  transform: translateY(30px); opacity: 0; transition: all 0.3s ease;
}
.footer-modal.show .footer-modal-content { transform: translateY(0); opacity: 1; }
.footer-modal-content h2 {
  font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--warm);
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.footer-modal-content p, .footer-modal-content div { font-size: 14px; line-height: 1.75; color: var(--warm-70); }
.footer-modal-body { white-space: pre-wrap; line-height: 1.25; }
#footerModalClose {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--warm-45);
  font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: var(--ease); cursor: url('/static/paw_grey.png') 10 10, auto;
}
#footerModalClose:hover { background: var(--surface-hi); color: var(--warm); border-color: var(--border-gold); }

/* ===================================================
   SILKTIDE COOKIE BANNER
=================================================== */
#silktide-banner { padding: 1.5rem; bottom: 1rem; right: 1rem; width: clamp(320px, 44vw, 540px); }
#silktide-banner p { font-size: .8rem; line-height: 1.1rem; margin: 0 0 16px; }
#silktide-banner .preferences { font-size: 1rem; }
#silktide-modal { width: clamp(340px, 44vw, 560px); max-width: 44vw; max-height: 100%; padding: 2rem; }
#silktide-modal h1 { font-size: 1.5rem; font-weight: 600; }
#silktide-modal p { font-size: .8rem; line-height: 1.1rem; color: var(--textColor); }
#silktide-modal .modal-close {
  display: inline-flex; padding: 6px; border: 0px; cursor: pointer;
  background: var(--backgroundColor); color: var(--primaryColor);
}
#silktide-modal .switch { flex-shrink: 0; position: relative; display: inline-block; height: 28px; width: 71px; }
#silktide-modal .switch__pill { position: relative; display: block; height: 26px; width: 67px; background: var(--textColor); border-radius: 24px; }
#silktide-modal .switch:focus-within { outline: none; box-shadow: none; }
#silktide-modal .switch__dot {
  position: absolute; top: 1px; left: 2px; display: block; height: 24px; width: 24px;
  background: var(--backgroundColor); border-radius: 50%; transition: left 150ms ease-out;
}
#silktide-modal .switch input:checked ~ .switch__dot { left: calc(100% - 29px); }
#silktide-modal .switch__off, #silktide-modal .switch__on {
  text-transform: uppercase; font-size: 14px; font-weight: 500; color: var(--backgroundColor);
  position: absolute; top: 3px; right: 15px; transition: right 150ms ease-out, opacity 150ms ease-out;
}
#silktide-wrapper .st-button { padding: 6px 12px; line-height: 1.1rem; }
#silktide-cookie-icon { bottom: .6rem; left: .6rem; width: 1.8rem; height: 1.8rem; }
#silktide-cookie-icon svg { width: 1.2rem; height: 1.2rem; }

/* ===================================================
   CURSORS
=================================================== */
input[type="radio"],
input[type="checkbox"],
select,
label,
#calcModeToggle {
  cursor: url('/static/paw_grey.png') 10 10, auto !important;
}

/* ===================================================
   RESPONSIVE
=================================================== */
@media (hover: none) and (pointer: coarse) {
  .scroll-arrow { opacity: 0.6; pointer-events: none; }
}
@media (hover: hover) and (pointer: fine) {
  .scroll-arrow { pointer-events: auto; cursor: pointer; opacity: 0.6; }
  .scroll-arrow:hover    { opacity: 0.9; }
  .scroll-arrow.disabled { opacity: 0.6; cursor: not-allowed; }
}
@media (max-width: 480px) {
  .container, .modal-content { border-radius: var(--r-lg); }
  .modal-content { width: 90%; margin: 5vh auto; }
  .arc-pip { font-size: 6.8px; letter-spacing: 0; }
  .arc-pips { gap: 1px; }
}