/* ═══════════════════════════════════════════════════════════════════════════
   BOTANICAL / ORGANIC SERIF — applied to the Rise demo.

   Source: aimshreem.com/uiux-gallery → id:"botanical" (designprompts.dev).
   Full spec kept at research/botanical-style-prompt.md.

   Scoped to :root[data-style="botanical"] so the research dossier keeps its own
   look. Overrides the token layer in styles.css, so every shared component —
   check-in, scale, widget — follows without being rewritten.

   Spec says light mode. CLAUDE.md says always ship a light/dark toggle. Both are
   honoured: Botanical light is primary; dark is a forest-floor variant that stays
   inside the same palette rather than reverting to the old indigo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Light: the canonical Botanical palette, verbatim from the spec ───────── */
:root[data-style="botanical"],
:root[data-style="botanical"][data-theme="light"] {
  --bg:          #F9F8F4;  /* Warm Alabaster / Rice Paper — never stark white */
  --bg-1:        #FFFFFF;
  --bg-2:        #F2F0EB;  /* Soft Clay */
  --bg-3:        #E9E5DC;
  --surface:     rgba(45, 58, 49, .028);
  --surface-2:   rgba(45, 58, 49, .05);
  --line:        #E6E2DA;  /* Stone — very subtle, low contrast */
  --line-strong: #DCCFC2;  /* Soft Clay / Mushroom */
  --ink:         #2D3A31;  /* Deep Forest Green — softer than black */
  --ink-2:       #5A6B5F;
  --ink-3:       #59685D;  /* clears bg/bg-2/bg-3 at 5.55/5.18/4.69. #8A9690 was 2.89. */

  --zone-heavy:    #6B7A6F;  /* moss    */
  --zone-churning: #C27B66;  /* terracotta */
  --zone-steady:   #8C9A84;  /* sage — the primary accent */
  --zone-open:     #C9A227;  /* dried wheat */

  --sem-fact: #6E8CA0;
  --sem-good: #8C9A84;
  --sem-warn: #C9A227;
  --sem-bad:  #9E4632;   /* deeper terracotta-red: 5.46:1 on the readout card */
  --sem-ours: #8C9A84;

  /* Soft, diffused. No harsh dark drops. */
  --shadow: 0 20px 40px -10px rgba(45, 58, 49, .05);
  --glow:   0 25px 50px -12px rgba(45, 58, 49, .10);

  /* Highly rounded. Standard card 24px; images arch. */
  --radius:   24px;
  --radius-s: 16px;

  /* Slow, graceful, fluid — like plants in breeze. */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Botanical's brand hues are FILL colours. Measured against alabaster they are
     sage 2.79:1, terracotta 3.13:1, wheat 2.28:1 — all below AA for text. Fills,
     borders and decoration use the brand hue; anything that is actually text uses
     the -text variant, same hue, darkened until it passes. */
  --sage-text:  #5F6E56;   /* 5.13:1 */
  --terra-text: #A85C46;   /* 4.61:1 */
  --wheat-text: #8A6D12;   /* 4.62:1 */

  --font-display: 'Playfair Display', ui-serif, Charter, Georgia, serif;
  --font-body:    'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ── Dark: forest floor after dusk. Same garden, night-time. ─────────────── */
:root[data-style="botanical"][data-theme="dark"] {
  --bg:          #1C231D;
  --bg-1:        #232C24;
  --bg-2:        #2A342B;
  --bg-3:        #313D33;
  --surface:     rgba(249, 248, 244, .04);
  --surface-2:   rgba(249, 248, 244, .07);
  --line:        rgba(220, 207, 194, .12);
  --line-strong: rgba(220, 207, 194, .24);
  --ink:         #F2F0EB;
  --ink-2:       #BFC9BE;
  --ink-3:       #98A69B;  /* 6.32:1 on forest. Light-mode value must NOT leak here. */

  --zone-heavy:    #7C8B80;
  --zone-churning: #D08D77;
  --zone-steady:   #A3B39A;
  --zone-open:     #DCBA4E;

  --sem-fact: #8FA9BC;
  --sem-good: #A3B39A;
  --sem-warn: #DCBA4E;
  --sem-bad:  #DD8B76;   /* lighter salmon: 4.94:1 on the dark readout card */
  --sem-ours: #A3B39A;
  --sage-text:  #A3B39A;   /* 7.24:1 on forest */
  --terra-text: #D08D77;
  --wheat-text: #DCBA4E;

  --shadow: 0 20px 40px -10px rgba(0, 0, 0, .35);
  --glow:   0 25px 50px -12px rgba(163, 179, 154, .12);
}

@media (prefers-color-scheme: dark) {
  :root[data-style="botanical"]:not([data-theme]) {
    --bg:#1C231D; --bg-1:#232C24; --bg-2:#2A342B; --bg-3:#313D33;
    --surface:rgba(249,248,244,.04); --surface-2:rgba(249,248,244,.07);
    --line:rgba(220,207,194,.12); --line-strong:rgba(220,207,194,.24);
    --ink:#F2F0EB; --ink-2:#BFC9BE; --ink-3:#98A69B;
    --zone-heavy:#7C8B80; --zone-churning:#D08D77; --zone-steady:#A3B39A; --zone-open:#DCBA4E;
    --sem-fact:#8FA9BC; --sem-good:#A3B39A; --sem-warn:#DCBA4E; --sem-bad:#DD8B76; --sem-ours:#A3B39A;
    --shadow: 0 20px 40px -10px rgba(0,0,0,.35);
  }
}

/* ── PAPER GRAIN — the spec calls this non-negotiable. It's what stops the
      design reading as flat digital. Fixed, full-screen, 0.015 opacity. ──── */
:root[data-style="botanical"] body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
:root[data-style="botanical"][data-theme="dark"] body::after { opacity: .028; }

/* ── Typography: Playfair is the protagonist ─────────────────────────────── */
:root[data-style="botanical"] body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
}
:root[data-style="botanical"] h1,
:root[data-style="botanical"] h2,
:root[data-style="botanical"] h3,
:root[data-style="botanical"] h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
}
/* Italic emphasis on a single word inside a headline — spec's signature move. */
:root[data-style="botanical"] h1 em,
:root[data-style="botanical"] h2 em {
  font-style: italic; font-weight: 500; color: var(--sage-text);
}
:root[data-style="botanical"] strong { font-weight: 600; color: var(--ink); }

/* ── Buttons: pill, uppercase, wide tracking, small ──────────────────────── */
:root[data-style="botanical"] .d-btn {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--font-body);
  padding: 0 30px;
  transition: transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
:root[data-style="botanical"] .d-btn-primary {
  /* Fore/back must BOTH flip with the theme. Hardcoding the light foreground
     against var(--ink) rendered a near-white label on a near-white button in
     dark mode — measured 1.07:1, i.e. invisible. */
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
:root[data-style="botanical"] .d-btn-primary:hover {
  background: var(--zone-churning);  /* shifts to Terracotta */
  border-color: var(--zone-churning);
  color: #F9F8F4;                    /* terracotta is dark enough for white in both themes */
}
:root[data-style="botanical"] .d-btn:not(.d-btn-primary) {
  background: transparent;
  border: 1px solid var(--zone-steady);   /* border keeps the brand sage */
  color: var(--sage-text);                /* label must pass AA */
}
:root[data-style="botanical"] .d-btn:not(.d-btn-primary):hover {
  background: color-mix(in srgb, var(--zone-steady) 12%, transparent);
}

/* ── Nav: soft, low-contrast, pill affordances ───────────────────────────── */
:root[data-style="botanical"] .nav {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
:root[data-style="botanical"] .nav-links a { border-radius: 999px; transition: all .5s var(--ease); }
:root[data-style="botanical"] .theme-btn { border-radius: 999px; border-color: var(--line-strong); }
:root[data-style="botanical"] .brand .mark {
  border-radius: 50%;
  background: linear-gradient(150deg, var(--zone-steady), var(--zone-open));
  box-shadow: none;
}
:root[data-style="botanical"] .brand .tag {
  border-radius: 999px; color: var(--terra-text);
  border-color: color-mix(in srgb, var(--zone-churning) 40%, transparent);
  letter-spacing: .14em;
}

/* ── Hero: grand, airy, with an arch behind it ───────────────────────────── */
:root[data-style="botanical"] .d-hero { padding: 128px 0 112px; }
:root[data-style="botanical"] .d-hero h1 {
  font-size: clamp(3rem, 6.4vw, 5.4rem);
  font-weight: 600;
  max-width: 15ch;
}
:root[data-style="botanical"] .d-hero::before {
  /* An arch of sage light rising behind the headline, not a tech glow. */
  inset: -10% auto auto 50%;
  transform: translateX(-50%);
  width: min(760px, 88vw); height: 620px;
  border-radius: 380px 380px 40px 40px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--zone-steady) 15%, transparent),
    transparent 72%);
  filter: blur(6px);
}
:root[data-style="botanical"] .eyebrow,
:root[data-style="botanical"] .d-n {
  font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .7rem; font-weight: 600;
}
:root[data-style="botanical"] .d-n { color: var(--sage-text); }

/* ── Cards: rounded-3xl, hairline stone, bloom on hover ──────────────────── */
:root[data-style="botanical"] .d-card,
:root[data-style="botanical"] .card,
:root[data-style="botanical"] .ci,
:root[data-style="botanical"] .sc,
:root[data-style="botanical"] .tbl-wrap {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
:root[data-style="botanical"] .d-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
/* Staggered rhythm — every second card drifts down. Breaking the grid on
   purpose; md+ only, or it stacks awkwardly on mobile. */
@media (min-width: 780px) {
  :root[data-style="botanical"] .d-sec-alt .grid.g3 > .d-card:nth-child(2) {
    transform: translateY(38px);
  }
  :root[data-style="botanical"] .d-sec-alt .grid.g3 > .d-card:nth-child(2):hover {
    transform: translateY(32px);
  }
}
:root[data-style="botanical"] .d-ico {
  border-radius: 50% 50% 50% 6px;   /* an organic pebble, not a rounded square */
  width: 52px; height: 52px;
}

/* ── The check-in: soft pebbles ──────────────────────────────────────────── */
:root[data-style="botanical"] .ci-btn {
  border-radius: 20px;
  transition: transform .5s var(--ease), background .5s var(--ease);
}
:root[data-style="botanical"] .ci-btn:hover { transform: translateY(-4px); }
:root[data-style="botanical"] .ci-q,
:root[data-style="botanical"] .ci-state,
:root[data-style="botanical"] .ci-label,
:root[data-style="botanical"] .sc-card-name {
  font-family: var(--font-display); font-weight: 600;
}
:root[data-style="botanical"] .ci-again,
:root[data-style="botanical"] .d-prompt {
  border-radius: 999px;
  transition: transform .5s var(--ease), background .5s var(--ease);
}
:root[data-style="botanical"] .ci-practice,
:root[data-style="botanical"] .ci-note { border-radius: var(--radius-s); }

/* ── The scale: leaves, not bars. Rounded, and it breathes. ──────────────── */
:root[data-style="botanical"] .sc-bar {
  border-radius: 999px;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
:root[data-style="botanical"] .sc-card { border-radius: var(--radius-s); }
:root[data-style="botanical"] .sc-read-empty { border-radius: var(--radius-s); }

/* ── Inputs: underline only. No harsh rings — a soft sage transition. ────── */
:root[data-style="botanical"] .ft input {
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid transparent;
}
:root[data-style="botanical"] .ft input:focus {
  outline: none;
  border-color: var(--zone-steady);
  background: var(--bg-1);
}
:root[data-style="botanical"] :focus-visible {
  outline: 2px solid var(--zone-steady);
  outline-offset: 3px;
}

/* ── Sections: whitespace is sacred ──────────────────────────────────────── */
:root[data-style="botanical"] .d-sec { padding: 112px 0; border-top: 1px solid var(--line); }
:root[data-style="botanical"] .d-disc { border-radius: var(--radius-s); }
:root[data-style="botanical"] .foot { border-top: 1px solid var(--line); }
:root[data-style="botanical"] .wm {
  border-radius: 999px; color: var(--terra-text);
  border-color: color-mix(in srgb, var(--zone-churning) 34%, transparent);
}

/* ── A meandering vine between sections — 1px, curved, like a root ───────── */
:root[data-style="botanical"] .d-sec + .d-sec::before {
  content: '';
  display: block; width: 120px; height: 34px; margin: -76px auto 42px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34'%3E%3Cpath d='M2 17c18-18 34 18 52 0s34-18 52 0' fill='none' stroke='%238C9A84' stroke-width='1' stroke-linecap='round' opacity='.5'/%3E%3Ccircle cx='60' cy='17' r='2.5' fill='%23C27B66' opacity='.55'/%3E%3C/svg%3E");
}

@media (max-width: 780px) {
  :root[data-style="botanical"] .d-hero { padding: 72px 0 64px; }
  :root[data-style="botanical"] .d-sec { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-style="botanical"] * { transition-duration: .001ms !important; }
  :root[data-style="botanical"] .d-sec-alt .grid.g3 > .d-card:nth-child(2) { transform: none; }
}

/* ── The voice widget ─────────────────────────────────────────────────────
   Lives in a shadow DOM, so page rules can't reach inside it — but custom
   properties DO cross the boundary. widget.js reads --vv-* off its host and
   falls back to its original indigo, so the dossier is untouched. This block
   is the only thing that makes the widget wear Botanical.                  */
:root[data-style="botanical"] #voxvani-host {
  --vv-accent:     #8C9A84;              /* Sage */
  --vv-accent-2:   #6B7A6F;              /* Moss */
  --vv-accent-rgb: 140, 154, 132;
  --vv-panel:      #F9F8F4;              /* Warm Alabaster — a light panel */
  --vv-ink:        #2D3A31;              /* Deep Forest Green text */
  --vv-on-accent:  #F9F8F4;
  --vv-line:       #E6E2DA;              /* Stone hairline */
  --vv-focus:      #C27B66;              /* Terracotta — visible on alabaster */
  --vv-shadow:     0 24px 60px -12px rgba(45, 58, 49, .18);
  --vv-ink-2:      #5A6B5F;              /* 6.3:1 on alabaster */
  --vv-ink-3:      #59685D;              /* 5.39:1 on the tinted header; #6E7D72 measured 3.84 */
  --vv-chip-ink:   #3D5142;              /* was pale lavender at 1.58:1 — a hard fail */
  --vv-veil:       rgba(45, 58, 49, .045);
  --vv-veil-2:     rgba(45, 58, 49, .075);
  --vv-line-soft:  #E6E2DA;
  --vv-scroll:     rgba(45, 58, 49, .22);
}
:root[data-style="botanical"][data-theme="dark"] #voxvani-host {
  --vv-accent:     #A3B39A;
  --vv-accent-2:   #7C8B80;
  --vv-accent-rgb: 163, 179, 154;
  --vv-panel:      #232C24;
  --vv-ink:        #F2F0EB;
  --vv-on-accent:  #1C231D;
  --vv-line:       rgba(220, 207, 194, .14);
  --vv-focus:      #D08D77;
  --vv-shadow:     0 24px 70px rgba(0, 0, 0, .5);
  --vv-ink-2:      #BFC9BE;
  --vv-ink-3:      #98A69B;
  --vv-chip-ink:   #D6E0D2;
  --vv-veil:       rgba(249, 248, 244, .055);
  --vv-veil-2:     rgba(249, 248, 244, .08);
  --vv-line-soft:  rgba(220, 207, 194, .12);
  --vv-scroll:     rgba(249, 248, 244, .18);
}

/* ── The scale (§03) ──────────────────────────────────────────────────────
   styles.css paints white text on saturated bars and builds the power ramp as
   color-mix(--sem-ours → --zone-steady). In Botanical BOTH resolve to sage, so
   the ramp came out perfectly flat — all eight power levels measured an
   identical 2.79:1 against white text. Two bugs wearing one coat: no gradient,
   and no contrast.

   Rebuilt with real Botanical stops — wheat→sage ascending toward light,
   terracotta→moss descending toward weight — kept pale, with forest text on
   top. Measured 4.9–8.6:1.                                                  */
:root[data-style="botanical"] .sc-bar {
  color: var(--ink);
  border-radius: 999px;
  font-weight: 500;
}
:root[data-style="botanical"] .sc-cal { opacity: .72; }

/* Enlightenment (i=0) → Neutrality (i=7): gold easing into sage. */
:root[data-style="botanical"] .sc-power {
  background: color-mix(in srgb,
    color-mix(in srgb, var(--zone-open), var(--zone-steady) calc(var(--i) * 14%))
    68%, var(--bg));
}
/* Pride (i=9) → Shame (i=16): terracotta cooling into moss. */
:root[data-style="botanical"] .sc-force {
  background: color-mix(in srgb,
    color-mix(in srgb, var(--zone-churning), var(--zone-heavy) calc((var(--i) - 9) * 13%))
    64%, var(--bg));
}
/* Courage — the threshold. The one bar allowed to be emphatic. */
:root[data-style="botanical"] .sc-line {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--zone-open) 76%, var(--bg)),
    color-mix(in srgb, var(--zone-steady) 70%, var(--bg)));
  color: var(--ink); font-weight: 600;
}
:root[data-style="botanical"] .sc-line .sc-cal { opacity: .85; }
:root[data-style="botanical"] .sc-bar:hover { filter: brightness(.96); }

/* The brightened ramp is for LIGHT mode. In dark, brighter bars = lighter bars,
   which the light bar-text can't sit on — so dark keeps the original, dimmer mix
   (verified AA with light text). Direction of the fix is opposite by theme. */
:root[data-style="botanical"][data-theme="dark"] .sc-power {
  background: color-mix(in srgb,
    color-mix(in srgb, var(--zone-open), var(--zone-steady) calc(var(--i) * 14%))
    46%, var(--bg));
}
:root[data-style="botanical"][data-theme="dark"] .sc-force {
  background: color-mix(in srgb,
    color-mix(in srgb, var(--zone-churning), var(--zone-heavy) calc((var(--i) - 9) * 13%))
    58%, var(--bg));
}
:root[data-style="botanical"][data-theme="dark"] .sc-line {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--zone-open) 62%, var(--bg)),
    color-mix(in srgb, var(--zone-steady) 58%, var(--bg)));
}

/* Level-name accents in the read-out card — brand hue is a fill, not text. */
:root[data-style="botanical"] .sc-card-power .sc-card-name { color: var(--sage-text); }
:root[data-style="botanical"] .sc-card-force .sc-card-name { color: var(--terra-text); }
:root[data-style="botanical"] .sc-card-line  .sc-card-name { color: var(--wheat-text); }

/* Links and any remaining sage-as-text. --sem-ours is sage here, which is a
   2.79:1 fill colour; text needs the darkened variant. */
:root[data-style="botanical"] a { color: var(--sage-text); }
:root[data-style="botanical"] .d-hint,
:root[data-style="botanical"] .ci-hint,
:root[data-style="botanical"] .ci-line span,
:root[data-style="botanical"] .sc-cal { color: var(--ink-3); }
:root[data-style="botanical"] .nav-links a { color: var(--ink-2); }
:root[data-style="botanical"] .nav-links a:hover,
:root[data-style="botanical"] .nav-links a.on { color: var(--ink); }
:root[data-style="botanical"] .nav-doc { color: var(--ink-3); }
:root[data-style="botanical"] .nav-doc:hover { color: var(--sage-text); }
/* Skip link: white on sage is 2.79:1. Forest on sage reads, and matches the
   primary button's treatment. */
:root[data-style="botanical"] .skip { background: var(--ink); color: var(--bg); }

/* Axis labels are sage/terracotta text on alabaster — fill hues again (2.97 and
   3.32). And .sc-cal's own opacity:.72 was quietly undoing the colour fix I'd
   just made to it: a passing colour, faded back under the line. */
:root[data-style="botanical"] .sc-axis-power span { color: var(--sage-text); }
:root[data-style="botanical"] .sc-axis-force span { color: var(--terra-text); }
:root[data-style="botanical"] .sc-cal { color: var(--ink); opacity: .82; }
:root[data-style="botanical"] .sc-line .sc-cal { opacity: .9; }
/* The 200 threshold marker: wheat #C9A227 is 2.28:1 on alabaster — the palest
   of the brand hues and the last fill-as-text case. Rules stay wheat; the label
   takes the darkened variant (4.62:1). */
:root[data-style="botanical"] .sc-threshold { color: var(--wheat-text); }

:root[data-style="botanical"] .sc-rise-k { color: var(--who-adler); }