/* ============================================================
   Dr. Rosie DVM — shared site theme layer
   Loads AFTER each page's own <style>, so it wins on conflicts.
   Same file is copied into drrosie.ai/ , rosapet.ai/ , rosavet.ai/
   Pairs with motion.js (which injects the aurora + progress bar).
   ============================================================ */

:root{
  --accent-text: #8d4f59;          /* AA-safe accent for small text on cream */
  --teal: #0a7d78;                 /* "the AI is working" signal */
  --teal-fill: rgba(10,125,120,.10);
  --teal-line: rgba(10,125,120,.28);
  --aurora-op: .38;
  --grain-op: .030;
  --shadow-big: 0 30px 80px rgba(31,26,24,.12);
}
[data-theme="dark"]{
  --accent-text: #d99aa3;
  --teal: #81d8d0;
  --teal-fill: rgba(129,216,208,.10);
  --teal-line: rgba(129,216,208,.30);
  --aurora-op: .30;
  --grain-op: .020;
  --shadow-big: 0 40px 110px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent-text:#d99aa3; --teal:#81d8d0;
    --teal-fill:rgba(129,216,208,.10); --teal-line:rgba(129,216,208,.30);
    --aurora-op:.30; --grain-op:.020; --shadow-big:0 40px 110px rgba(0,0,0,.5);
  }
}

html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }

/* wider column — the original 820px was too tight for cards */
.wrap{ max-width:980px !important; position:relative; z-index:1; }
.lede, .lede-2{ max-width:680px; }

/* ---- ambient background (elements injected by motion.js) ---- */
#rosie-aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:var(--aurora-op); }
#rosie-aurora i{ position:absolute; display:block; border-radius:50%; filter:blur(100px); }
#rosie-aurora .b1{ width:560px; height:560px; background:var(--accent); top:-200px; left:-160px; animation:rz1 34s ease-in-out infinite; }
#rosie-aurora .b2{ width:460px; height:460px; background:var(--teal);   top:58%;   right:-190px; animation:rz2 42s ease-in-out infinite; }
#rosie-aurora .b3{ width:520px; height:520px; background:var(--accent-soft); top:165%; left:6%; animation:rz1 48s ease-in-out infinite reverse; }
@keyframes rz1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(90px,70px) scale(1.14)} }
@keyframes rz2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-75px,105px) scale(1.09)} }
#rosie-grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#rosie-prog{ position:fixed; top:0; left:0; height:2px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--accent),var(--teal)); }

/* ---- scroll reveal (gated on .js so no-JS still renders) ---- */
.js .rv{ opacity:0; transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.rv.in{ opacity:1 !important; transform:none !important; }
.js .ww span.w{ display:inline-block; opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.ww.in span.w{ opacity:1 !important; transform:none !important; }

/* ---- topbar dot gets a pulse ---- */
.topbar .dot{ position:relative; }
.topbar .dot::after{ content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--accent); opacity:.45; animation:rzhalo 3s ease-out infinite; }
@keyframes rzhalo{ 0%{transform:scale(.7);opacity:.6} 100%{transform:scale(2);opacity:0} }

/* ---- section labels ---- */
.section-label{ margin-top:72px !important; }

/* ---- feature cards: sweep beam + lift ---- */
.feature{ position:relative; overflow:hidden; }
.feature::before{ content:''; position:absolute; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--teal)); transition:transform .5s; }
@media (hover:hover){
  .feature:hover{ transform:translateY(-3px); border-color:var(--accent); }
  .feature:hover::before{ transform:scaleX(1); }
}

/* ---- sister-product pills ---- */
.pill{ transition:transform .25s ease, background-color .2s ease; }
@media (hover:hover){ .pill:hover{ transform:translateY(-2px); } }

/* ---- FAQ: keeps native <details> so existing analytics still fire ---- */
details summary::after{ transition:transform .3s ease, color .2s ease; }
details[open] summary{ color:var(--accent); }
details[open] summary::after{ color:var(--accent); }
details > p{ animation:rzfade .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes rzfade{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

/* ---- small-text contrast fix: the light rose fails on cream ---- */
.tag{ color:var(--accent-text) !important; }
.fits a, .calcnote a, footer a:hover{ color:var(--accent-text); }

/* ---- focus visibility ---- */
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
.rosie-skip{ position:absolute; left:-9999px; top:0; z-index:200; padding:14px 22px;
  background:var(--bg-soft); color:var(--ink); border:1px solid var(--rule); border-radius:0 0 12px 0; }
.rosie-skip:focus{ left:0; }

/* ---- stat strip (optional, used where a page has one) ---- */
.rzstats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:26px 0; margin-top:8px; }
.rzstat b{ display:block; font-family:'Fraunces',serif; font-size:clamp(28px,4vw,40px);
  line-height:1; letter-spacing:-.03em; color:var(--accent); }
.rzstat span{ display:block; font-size:13px; color:var(--ink-faint); margin-top:8px; }

@media (prefers-reduced-motion: reduce){
  #rosie-aurora i, .topbar .dot::after{ animation:none !important; }
  .js .rv, .js .ww span.w{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   SIGNATURE WIDGETS
   Shared chrome for the interactive centerpiece on each site.
   drrosie.ai -> retrieval pipeline + database constellation
   rosapet.ai -> chocolate toxicity calculator
   ============================================================ */

.rzwin{ border:1px solid var(--rule); border-radius:16px; overflow:hidden;
  background:var(--bg-soft); box-shadow:var(--shadow-big); margin-top:8px; }
.rzbar{ display:flex; align-items:center; gap:8px; padding:12px 18px;
  border-bottom:1px solid var(--rule); background:var(--bg); flex-wrap:wrap; }
.rzbar i.dotx{ width:9px; height:9px; border-radius:50%; background:var(--rule); display:block; }
.rzbar .fn{ margin-left:12px; font-size:13px; color:var(--ink-faint); }
.rzcap{ font-size:12.5px; color:var(--ink-faint); margin-top:10px; text-align:center; }

/* ---- ask row ---- */
.rzask{ padding:20px 22px; border-bottom:1px solid var(--rule); display:flex;
  align-items:center; gap:14px; flex-wrap:wrap; }
.rzask .q{ flex:1 1 260px; font-size:16px; color:var(--ink); min-height:1.6em; }
.rzcaret{ display:inline-block; width:2px; height:1.05em; background:var(--accent);
  vertical-align:-3px; animation:rzbl .9s steps(2) infinite; }
@keyframes rzbl{ 50%{opacity:0} }
.rzbadge{ font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; padding:5px 12px;
  border-radius:999px; border:1px solid var(--rule); color:var(--ink-faint);
  white-space:nowrap; opacity:0; transition:.4s; font-weight:700; }
.rzbadge.on{ opacity:1; border-color:var(--accent); color:var(--accent-text); }
.rzbadge.emg{ border-color:#a3373d; color:#a3373d; background:rgba(163,55,61,.08); }
[data-theme="dark"] .rzbadge.emg{ border-color:#da7a7a; color:#da7a7a; background:rgba(218,122,122,.12); }

/* ---- 4-stage pipeline ---- */
.rzpipe{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); }
.rzstep{ background:var(--bg-soft); padding:18px 16px; position:relative; overflow:hidden; transition:background .4s; }
.rzstep .n{ font-size:10px; letter-spacing:.16em; color:var(--ink-faint); margin-bottom:8px; }
.rzstep .t{ font-size:13.5px; font-weight:600; margin-bottom:4px; color:var(--ink); }
.rzstep .s{ font-size:12px; color:var(--ink-faint); }
.rzstep .bar{ position:absolute; bottom:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--teal)); transition:width .8s; }
.rzstep.act{ background:color-mix(in srgb, var(--accent) 7%, var(--bg-soft)); }
.rzstep.act .bar{ width:100%; }
.rzdots{ display:flex; gap:3px; margin-top:10px; height:14px; align-items:flex-end; }
.rzdots i{ width:3px; background:var(--teal); border-radius:2px; height:20%; opacity:.28; display:block; }
.rzstep.act .rzdots i{ opacity:1; animation:rzeq .9s ease-in-out infinite; }
@keyframes rzeq{ 0%,100%{height:20%} 50%{height:100%} }
@media (max-width:760px){ .rzpipe{ grid-template-columns:repeat(2,1fr); } }

/* ---- answer + citations ---- */
.rzans{ padding:22px; font-size:15px; line-height:1.7; color:var(--ink-soft); min-height:150px; }
.rzans > p{ opacity:0; transform:translateY(8px); transition:.6s; margin:0; }
.rzans > p.on{ opacity:1; transform:none; }
.rzcite{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:3px 10px;
  border-radius:999px; margin:8px 6px 0 0; border:1px solid var(--teal-line);
  background:var(--teal-fill); color:var(--teal); font-weight:600;
  opacity:0; transform:scale(.85); transition:.45s cubic-bezier(.16,1,.3,1); }
.rzcite.on{ opacity:1; transform:none; }
.rzconf{ margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); display:flex;
  justify-content:space-between; align-items:center; gap:12px; font-size:12.5px;
  color:var(--ink-faint); flex-wrap:wrap; }
.rzmeter{ width:130px; height:6px; border-radius:999px; overflow:hidden; display:block;
  background:color-mix(in srgb, var(--ink) 9%, transparent); }
.rzmeter i{ display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--teal)); transition:width 1.4s cubic-bezier(.16,1,.3,1); }
.rztabs{ display:flex; gap:8px; padding:14px 22px; border-top:1px solid var(--rule);
  background:var(--bg); flex-wrap:wrap; }
.rztab{ font-size:13px; padding:7px 14px; border-radius:999px; border:1px solid var(--rule);
  cursor:pointer; color:var(--ink-soft); background:transparent; font-family:inherit; transition:.25s; }
.rztab:hover{ border-color:var(--accent); color:var(--ink); }
.rztab.on{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
[data-theme="dark"] .rztab.on{ color:#1d1816; }

/* ---- database constellation ---- */
.rzconst{ position:relative; min-height:380px; display:flex; align-items:center;
  justify-content:center; flex-wrap:wrap; gap:9px; margin-top:10px; }
.rzcore{ width:124px; height:124px; border-radius:50%; display:grid; place-items:center;
  text-align:center; font-family:'Fraunces',serif; font-size:14px; line-height:1.2; z-index:3;
  color:#fff; background:linear-gradient(140deg,var(--accent-soft),var(--accent) 60%,var(--accent-deep));
  box-shadow:0 0 50px color-mix(in srgb, var(--accent) 45%, transparent); }
[data-theme="dark"] .rzcore{ color:#1d1816; }
.rznode{ padding:8px 14px; border-radius:999px; font-size:12.5px; white-space:nowrap; z-index:2;
  border:1px solid var(--rule); background:var(--bg-soft); color:var(--ink-soft);
  transition:box-shadow .5s, border-color .5s, color .5s, transform .5s; }
.rznode b{ color:var(--accent-text); font-weight:600; margin-left:5px; }
.rznode.hot{ border-color:var(--teal); color:var(--ink);
  box-shadow:0 0 22px var(--teal-fill); transform:scale(1.07); }
.rzlines{ position:absolute; inset:0; z-index:0; pointer-events:none; width:100%; height:100%; }
.rzlines line{ stroke:var(--rule); stroke-width:1; }
.rzlines line.hot{ stroke:var(--teal); stroke-width:1.5; }
.rzconst.orbital .rzcore, .rzconst.orbital .rznode{ position:absolute; }
.rzplus{ text-align:center; margin-top:26px; color:var(--ink-faint); font-size:14.5px;
  font-style:italic; font-family:'Fraunces',serif; }

/* ---- calculator ---- */
.rzcalc{ padding:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.rzfield label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.rzfield input, .rzfield select{ width:100%; font-family:inherit; font-size:15px; padding:11px 12px;
  border-radius:10px; border:1px solid var(--rule); background:var(--bg); color:var(--ink); }
.rzfield input:focus, .rzfield select:focus{ border-color:var(--accent); outline:none; }
.rzunit{ display:flex; gap:6px; margin-top:6px; }
.rzunit button{ flex:1; font-family:inherit; font-size:12px; padding:6px; border-radius:8px;
  border:1px solid var(--rule); background:transparent; color:var(--ink-soft); cursor:pointer; }
.rzunit button.on{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
[data-theme="dark"] .rzunit button.on{ color:#1d1816; }
.rzresult{ padding:22px; border-top:1px solid var(--rule); background:var(--bg); }
.rzdose{ font-family:'Fraunces',serif; font-size:clamp(26px,4vw,38px); line-height:1.1;
  letter-spacing:-.02em; margin-bottom:6px; }
.rzband{ display:inline-block; font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:12px; }
.rzband.b0{ background:var(--teal-fill); color:var(--teal); border:1px solid var(--teal-line); }
.rzband.b1{ background:rgba(212,167,44,.14); color:#8a6a12; border:1px solid rgba(212,167,44,.4); }
.rzband.b2, .rzband.b3{ background:rgba(163,55,61,.10); color:#a3373d; border:1px solid rgba(163,55,61,.35); }
[data-theme="dark"] .rzband.b1{ color:#d4a72c; }
[data-theme="dark"] .rzband.b2, [data-theme="dark"] .rzband.b3{ color:#da7a7a; }
.rzadvice{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; }
.rzcallout{ margin-top:14px; padding:14px 16px; border-radius:10px; font-size:13.5px; line-height:1.55;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:color-mix(in srgb, var(--accent) 6%, transparent); color:var(--ink); }
.rzcallout strong{ color:var(--accent-text); }