/* ============ TOKENS ============ */
:root, [data-theme="light"] {
  /* Warm sage + clay wellness palette */
  --color-bg: #f4f1ea;
  --color-surface: #faf8f3;
  --color-surface-2: #ffffff;
  --color-surface-offset: #eceadf;
  --color-border: #ddd8c9;
  --color-divider: #e6e2d6;

  --color-text: #2c2a24;
  --color-text-muted: #6f6a5c;
  --color-text-faint: #a8a293;
  --color-text-inverse: #faf8f3;

  --color-primary: #4a6c5d;        /* deep sage */
  --color-primary-hover: #3a5648;
  --color-primary-soft: #dfe7e0;
  --color-accent: #b06a3f;         /* warm clay */
  --color-accent-soft: #ecdccf;
  --color-gold: #c89a3c;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(60,52,40,0.06);
  --shadow-md: 0 6px 22px rgba(60,52,40,0.09);
  --shadow-lg: 0 20px 50px rgba(60,52,40,0.14);

  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --text-xs: clamp(0.75rem, 0.72rem + 0.18vw, 0.84rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.25vw, 0.97rem);
  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
  --text-lg: clamp(1.18rem, 1.05rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
  --text-2xl: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;

  --content: 1080px;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
}

[data-theme="dark"] {
  --color-bg: #1a1916;
  --color-surface: #211f1b;
  --color-surface-2: #262420;
  --color-surface-offset: #2c2a25;
  --color-border: #3a3730;
  --color-divider: #312f29;

  --color-text: #e8e4d9;
  --color-text-muted: #a39e90;
  --color-text-faint: #6f6a5c;
  --color-text-inverse: #1a1916;

  --color-primary: #7fa890;
  --color-primary-hover: #93b9a3;
  --color-primary-soft: #2b3a32;
  --color-accent: #d08f63;
  --color-accent-soft: #3a2c22;
  --color-gold: #d6ad53;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 6px 22px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}

/* ============ BASE ============ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; scroll-behavior:smooth; scroll-padding-top:5rem;
}
body {
  min-height:100dvh; line-height:1.65; font-family:var(--font-body);
  font-size:var(--text-base); color:var(--color-text);
  background:var(--color-bg);
  background-image: radial-gradient(circle at 20% 10%, color-mix(in oklab, var(--color-primary) 7%, transparent), transparent 40%),
                    radial-gradient(circle at 85% 80%, color-mix(in oklab, var(--color-accent) 6%, transparent), transparent 45%);
  background-attachment: fixed;
}
img,svg { display:block; max-width:100%; }
button { cursor:pointer; background:none; border:none; font:inherit; color:inherit; }
select { font:inherit; color:inherit; }
h1,h2,h3 { text-wrap:balance; line-height:1.14; font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em; }
p { text-wrap:pretty; }
em { font-style:italic; color:var(--color-primary); }
a { color:inherit; }
table { border-collapse:collapse; width:100%; }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; border-radius:var(--radius-sm); }
a,button,select,[role=button] {
  transition:color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}
.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; }
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;} }

main { max-width:var(--content); margin-inline:auto; padding-inline:var(--space-5); }

/* ============ HEADER ============ */
.site-header {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-4) var(--space-5);
  background:color-mix(in oklab, var(--color-bg) 82%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-divider);
}
.brand { display:flex; align-items:center; gap:var(--space-3); text-decoration:none; color:var(--color-text); }
.brand-mark { color:var(--color-primary); }
.brand-name { font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; letter-spacing:-.01em; }
.header-nav { display:flex; align-items:center; gap:var(--space-5); }
.header-nav a { font-size:var(--text-sm); text-decoration:none; color:var(--color-text-muted); }
.header-nav a:hover { color:var(--color-primary); }
.theme-btn { display:grid; place-items:center; width:38px;height:38px; border-radius:var(--radius-full); border:1px solid var(--color-border); color:var(--color-text-muted); }
.theme-btn:hover { color:var(--color-primary); border-color:var(--color-primary); }

/* ============ BUTTONS ============ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-6); border-radius:var(--radius-full);
  font-size:var(--text-sm); font-weight:500; text-decoration:none; border:1px solid transparent;
}
.btn-lg { padding:var(--space-4) var(--space-8); font-size:var(--text-base); }
.btn-primary { background:var(--color-primary); color:var(--color-text-inverse); box-shadow:var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background:var(--color-primary-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-primary:disabled { opacity:.4; cursor:not-allowed; }
.btn-ghost { color:var(--color-text-muted); border-color:var(--color-border); }
.btn-ghost:hover { color:var(--color-text); border-color:var(--color-text-muted); }

.eyebrow {
  text-transform:uppercase; letter-spacing:.18em; font-size:var(--text-xs);
  font-weight:600; color:var(--color-accent); margin-bottom:var(--space-4);
}

/* ============ HERO ============ */
.hero { text-align:center; padding-block:var(--space-20) var(--space-16); }
.hero h1 { font-size:var(--text-2xl); margin-bottom:var(--space-5); }
.hero-sub { max-width:54ch; margin:0 auto var(--space-8); font-size:var(--text-lg); color:var(--color-text-muted); line-height:1.55; }

/* ============ SELECTOR ============ */
.selector { padding-bottom:var(--space-16); }
.wizard {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); padding:clamp(var(--space-6), 4vw, var(--space-12));
  box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.step { animation:fade .4s ease; }
@keyframes fade { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
.step-head { margin-bottom:var(--space-8); }
.step-count { font-size:var(--text-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent); }
.step-head h2 { font-size:var(--text-xl); margin:var(--space-2) 0 var(--space-3); }
.step-head p { color:var(--color-text-muted); max-width:52ch; }

.grid-goals { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
.grid-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-3); }
.grid-2 { grid-template-columns:repeat(2,1fr); }

.choice {
  text-align:left; padding:var(--space-5); border:1.5px solid var(--color-border);
  border-radius:var(--radius-lg); background:var(--color-surface-2);
  display:flex; flex-direction:column; gap:var(--space-2); position:relative;
}
.choice:hover { border-color:var(--color-primary); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.choice[aria-pressed="true"], .choice.selected {
  border-color:var(--color-primary); background:var(--color-primary-soft);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--color-primary) 18%, transparent);
}
.choice .ico { width:30px;height:30px; color:var(--color-primary); }
.choice .c-title { font-weight:600; font-size:var(--text-base); }
.choice .c-desc { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.45; }
.choice .check { position:absolute; top:var(--space-3); right:var(--space-3); width:22px;height:22px; border-radius:var(--radius-full); background:var(--color-primary); color:#fff; display:none; place-items:center; font-size:13px; }
.choice[aria-pressed="true"] .check, .choice.selected .check { display:grid; }

.subgroup { border:none; margin-bottom:var(--space-6); }
.subgroup legend { font-weight:600; font-size:var(--text-base); margin-bottom:var(--space-3); padding:0; }

.step-actions { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-8); }
.hint { font-size:var(--text-sm); color:var(--color-text-faint); }

.progress { height:5px; background:var(--color-surface-offset); border-radius:var(--radius-full); margin-top:var(--space-5); overflow:hidden; }
#progressBar { display:block; height:100%; width:25%; background:linear-gradient(90deg,var(--color-primary),var(--color-accent)); border-radius:var(--radius-full); transition:width .4s cubic-bezier(.16,1,.3,1); }

/* ============ RESULTS ============ */
.results { padding-block:var(--space-12) var(--space-16); }
.results-head { text-align:center; margin-bottom:var(--space-10); }
.results-head h2 { font-size:var(--text-xl); margin-bottom:var(--space-3); }
.results-summary { color:var(--color-text-muted); max-width:56ch; margin:0 auto var(--space-5); }
.result-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-5); }
.rcard {
  text-align:left; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3);
  position:relative; overflow:hidden;
}
.rcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-primary); }
.rcard.top { border-color:var(--color-primary); box-shadow:var(--shadow-md); }
.rcard-rank { position:absolute; top:0; right:0; background:var(--color-primary); color:#fff; font-size:var(--text-xs); font-weight:600; padding:var(--space-1) var(--space-4); border-bottom-left-radius:var(--radius-md); }
.rcard.top .rcard-rank { background:var(--color-accent); }
.rcard h3 { font-size:var(--text-lg); padding-right:var(--space-12); }
.rcard .r-tradition { font-size:var(--text-xs); color:var(--color-accent); text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
.rcard .r-tag { color:var(--color-text-muted); font-size:var(--text-sm); font-style:italic; }
.match-bar { height:6px; background:var(--color-surface-offset); border-radius:var(--radius-full); overflow:hidden; margin-top:var(--space-1); }
.match-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--color-primary),var(--color-accent)); border-radius:var(--radius-full); }
.match-label { font-size:var(--text-xs); color:var(--color-text-muted); }
.rcard-meta { display:flex; gap:var(--space-4); flex-wrap:wrap; font-size:var(--text-xs); color:var(--color-text-muted); margin-top:auto; padding-top:var(--space-2); }
.rcard-meta b { color:var(--color-text); font-weight:600; }
.results-note, .footer-sources { font-size:var(--text-sm); color:var(--color-text-faint); }
.results-note { text-align:center; margin-top:var(--space-8); max-width:60ch; margin-inline:auto; }

/* ============ COMPARE TABLE ============ */
.compare { padding-block:var(--space-16); border-top:1px solid var(--color-divider); }
.compare-head { text-align:center; margin-bottom:var(--space-8); }
.compare-head h2 { font-size:var(--text-xl); margin-bottom:var(--space-3); }
.compare-head p { color:var(--color-text-muted); max-width:54ch; margin-inline:auto; }
.table-controls { display:flex; justify-content:flex-end; margin-bottom:var(--space-4); }
.sort-label { font-size:var(--text-sm); color:var(--color-text-muted); display:flex; align-items:center; gap:var(--space-2); }
.sort-label select { padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-2); }
.table-wrap { overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
table { font-size:var(--text-sm); }
thead th { text-align:left; padding:var(--space-4); font-weight:600; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); border-bottom:2px solid var(--color-divider); white-space:nowrap; background:var(--color-surface-offset); }
tbody tr { border-bottom:1px solid var(--color-divider); cursor:pointer; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--color-primary-soft); }
tbody td { padding:var(--space-4); vertical-align:middle; }
.td-name { font-weight:600; color:var(--color-text); min-width:160px; }
.td-name small { display:block; font-weight:400; color:var(--color-text-muted); font-style:italic; }
.td-tradition { color:var(--color-text-muted); min-width:130px; }
.posture-pill { display:inline-block; padding:2px 10px; border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:500; background:var(--color-accent-soft); color:var(--color-accent); text-transform:capitalize; }
.dots { display:inline-flex; gap:3px; }
.dot { width:9px;height:9px;border-radius:50%; background:var(--color-surface-offset); border:1px solid var(--color-border); }
.dot.on { background:var(--color-primary); border-color:var(--color-primary); }
.best-tags { display:flex; flex-wrap:wrap; gap:4px; }
.best-tag { font-size:11px; padding:2px 8px; border-radius:var(--radius-full); background:var(--color-surface-offset); color:var(--color-text-muted); white-space:nowrap; }

/* ============ MODAL ============ */
[hidden] { display:none !important; }
.modal { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:var(--space-4); }
.modal-overlay { position:absolute; inset:0; background:rgba(20,18,14,.55); backdrop-filter:blur(4px); animation:fade .25s ease; }
.modal-panel {
  position:relative; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); max-width:680px; width:100%; max-height:88vh; overflow-y:auto;
  padding:clamp(var(--space-6),4vw,var(--space-10)); box-shadow:var(--shadow-lg); animation:pop .3s cubic-bezier(.16,1,.3,1);
}
@keyframes pop { from{opacity:0;transform:scale(.96) translateY(12px);} to{opacity:1;transform:none;} }
.modal-close { position:absolute; top:var(--space-4); right:var(--space-5); font-size:2rem; line-height:1; color:var(--color-text-muted); width:40px;height:40px; border-radius:var(--radius-full); }
.modal-close:hover { color:var(--color-text); background:var(--color-surface-offset); }
.m-tradition { font-size:var(--text-xs); color:var(--color-accent); text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.modal-panel h2 { font-size:var(--text-xl); margin:var(--space-2) 0; padding-right:var(--space-8); }
.m-tagline { font-style:italic; color:var(--color-text-muted); margin-bottom:var(--space-6); }
.m-section { margin-bottom:var(--space-6); }
.m-section h4 { font-family:var(--font-body); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--color-accent); font-weight:600; margin-bottom:var(--space-2); }
.m-section p { color:var(--color-text); line-height:1.6; }
.m-levels { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.m-level { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-4); }
.m-level h5 { font-size:var(--text-sm); color:var(--color-primary); margin-bottom:var(--space-2); }
.m-level p { font-size:var(--text-sm); color:var(--color-text-muted); }
.m-benefits { list-style:none; display:flex; flex-direction:column; gap:var(--space-2); }
.m-benefits li { display:flex; gap:var(--space-2); align-items:flex-start; font-size:var(--text-sm); }
.m-benefits li::before { content:""; flex:none; width:7px;height:7px;border-radius:50%; background:var(--color-primary); margin-top:8px; }
.m-stats { display:flex; gap:var(--space-6); flex-wrap:wrap; padding:var(--space-4) 0; border-block:1px solid var(--color-divider); margin-bottom:var(--space-6); }
.m-stat { display:flex; flex-direction:column; gap:2px; }
.m-stat .k { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); }
.m-stat .v { font-weight:600; font-size:var(--text-base); }
.m-source { font-size:var(--text-sm); color:var(--color-text-muted); }
.m-source a { color:var(--color-primary); }

@media (max-width:640px){
  .grid-goals { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .m-levels { grid-template-columns:1fr; }
  .header-nav a:not(.theme-link){ display:none; }
}