/* Shared clinical research theme. Existing layouts and interaction hooks remain intact. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root,
:root[data-clinical-skin] body {
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --paper: #f8fafc;
  --blue: #047857;
  --green: #047857;
  --lime: #d1fae5;
  --amber: #92400e;
  --shelf-green: #0f172a;
  --shelf-mint: #ecfdf5;
  --clinical-signal: #10b981;
  --clinical-warning: #f59e0b;
  --clinical-body: 'Inter', system-ui, sans-serif;
  --clinical-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --clinical-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --clinical-shadow: 0 4px 6px -1px rgba(0,0,0,.05);
  color-scheme: light;
}
:root[data-clinical-skin] body { background: #f8fafc !important; color: #0f172a; font-family: var(--clinical-body); line-height: 1.6; }
:root[data-clinical-skin] body :is(p,li) { font-family: var(--clinical-body); color: #334155; line-height: 1.6; }
:root[data-clinical-skin] body :is(button,input,select,textarea) { font-family: var(--clinical-body); line-height: 1.6; }
:root[data-clinical-skin] body :is(h1,h2,h3),
:root[data-clinical-skin] body :is(h1,h2,h3) em {
  font-family: var(--clinical-heading); font-weight: 700;
  letter-spacing: -.03em; color: #0f172a;
}
:root[data-clinical-skin] body :is(h1,h2,h3) em { font-style: normal; color: #047857; }
:root[data-clinical-skin] body :is(h1,h2,h3)>span:not(.pp-number) {
  font-family: inherit; font-weight: inherit; font-style: normal; letter-spacing: inherit;
}
:root[data-clinical-skin] body .filters button { white-space: nowrap; }
:root[data-clinical-skin] body :is(.brand,.rail-brand,.footer-top>strong,.journal-footer>strong,.app-context strong,.rail-note strong) {
  font-family: var(--clinical-heading); color: #0f172a;
}
:root[data-clinical-skin] body :is(.eyebrow,.brand-name,.journal-brand,.topic-kicker,.app-context>span,.rail-label) { color: #475569; }
::selection { background: #d1fae5; color: #064e3b; }

/* Monospaced data: preserve text and units, including asynchronously rendered values. */
:root[data-clinical-skin] body :is(table,table p,table li,table a,table strong,table span,
  input[type=number],input[inputmode=decimal],input[inputmode=numeric],
  .pp-number,.facts strong,.trial-facts strong,.result-totals strong,
  .hero-stats strong,.journal-stats strong,.card-number,.section-number,
  .benefit-number,.trace-number,.explore-number,.dossier-id,.format,.pack,
  .product-format,.source-date,.article-meta,time,kbd) {
  font-family: var(--clinical-mono); font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
:root[data-clinical-skin] body .pp-number { display: inline; font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: inherit; color: inherit; }
:root[data-clinical-skin] body :is(.pp-price,.result-totals strong) { color: #047857; }
:root[data-clinical-skin] body .result .result-totals strong { color: #10b981; }

/* Consistent surfaces, without changing display, grid tracks, widths or ordering. */
:root[data-clinical-skin] body :is(.desktop-rail,.topbar,.app-dock,.catalogue-toolbar,.journal-filters,.hero-search,.search,
  .catalogue-card,.journal-card,.learn-card,.wellbeing-card,.brand-card,
  .product-card,.detail,.voice-card,.guide-welcome,.guide-answer,.guide-topics>button,
  .cost-column,.facts,.trial-facts,.evidence-card,.product-comparison,.buy-panel,
  .product-stage,.product-notes>article,.related-grid>article,.benefit-card,
  .quick-find-dialog,.install-sheet,dialog,.compare-notice) {
  background: #fff; border-color: #e2e8f0; color: #0f172a;
}
:root[data-clinical-skin] body :is(.catalogue-card,.journal-card,.learn-card,.wellbeing-card,.brand-card,
  .product-card,.detail,.voice-card,.guide-answer,.cost-column,.facts,.trial-facts,
  .evidence-card,.product-comparison,.buy-panel,.product-notes>article,
  .related-grid>article,.benefit-card,.table-scroll,#compare-content) {
  border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: var(--clinical-shadow);
}
:root[data-clinical-skin] body :is(.product-photo,.catalogue-card:nth-child(n) .product-photo,.product-stage,
  .journal-card-image,.journal-feature,.article-art,.spotlight,.spotlight-art,
  .hero-visual,.wellbeing-hero-scene,.wellbeing-article-art,.nutrition-mosaic>a) {
  background: linear-gradient(135deg,#fff,#f1f5f9); border-color: #e2e8f0;
}
:root[data-clinical-skin] body :is(.spotlight-caption,.spotlight-controls,.card-copy,.journal-card-copy) { background: #fff; }
:root[data-clinical-skin] body :is(.spotlight-top>span,#motion-toggle,#spotlight-counter,.spotlight-controls button) { color: #475569; }
:root[data-clinical-skin] body .spotlight-art:before { background: #d1fae5; }
:root[data-clinical-skin] body :is(.spotlight-go,.hero-search button) { background: #0f172a; color: #fff; }
:root[data-clinical-skin] body :is(.quick-picks a,.guide-crosslinks>a,.header-voice) { background: #f1f5f9; color: #334155; }
:root[data-clinical-skin] body :is(.rail-note,.guide-feature,.learning-path,.takeaways,.trust-strip,.wellbeing-values) {
  background: #f1f5f9; border-color: #e2e8f0; color: #334155;
}
:root[data-clinical-skin] body :is(.brand-icon,.rail-spark,.spotlight-spark,.article-spark,.amp) { color: #047857; }
:root[data-clinical-skin] body :is(.desktop-rail nav a[aria-current],.app-dock .dock-active,.category-pills button[aria-pressed=true],
  .wellbeing-filters button[aria-pressed=true],.filters button.selected,.mode-bar button[aria-pressed=true],
  .compare-toggle[aria-pressed=true],.save-toggle[aria-pressed=true]) {
  background: #ecfdf5; color: #065f46; border-color: #a7f3d0;
}
:root[data-clinical-skin] body .product-card.chosen { border-color: #10b981; background: #f0fdf8; }
:root[data-clinical-skin] body .product-card.chosen:before { background: #10b981; }
:root[data-clinical-skin] body .research-tabs button[aria-selected=true] { color: #047857; }
:root[data-clinical-skin] body .research-tabs button[aria-selected=true]:after { background: #10b981; }
:root[data-clinical-skin] body :is(.research-tabs,.sources,.research-actions,.cost-heading,.card-bottom,.footer-top,footer) { border-color: #e2e8f0; }
:root[data-clinical-skin] body :is(.research-actions,.product-comparison>summary,.compare-deep>summary) { background: #f8fafc; }
:root[data-clinical-skin] body :is(input,select,textarea,.input-wrap) { border-color: #cbd5e1; background-color: #fff; color: #0f172a; }
:root[data-clinical-skin] body :is(.hero-search,.search,.input-wrap):focus-within { outline: 2px solid #10b981; outline-offset: 2px; }
:root[data-clinical-skin] body :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid #047857; outline-offset: 4px; }
:root[data-clinical-skin] body :is(input,select) { accent-color: #047857; }

/* Tables retain their existing scroll containers, sticky headings and cell widths. */
:root[data-clinical-skin] body table,
:root[data-clinical-skin] body #compare-content table {
  background: #fff; color: #0f172a; border: 1px solid #e2e8f0;
  border-radius: 12px; border-collapse: separate; border-spacing: 0;
  box-shadow: var(--clinical-shadow); line-height: 1.6;
}
:root[data-clinical-skin] body :is(.table-scroll,#compare-content) { background: #fff; }
:root[data-clinical-skin] body :is(th,td),:root[data-clinical-skin] body #compare-content :is(th,td) {
  border-color: #e2e8f0; border-width: 0 0 1px; border-style: solid;
  background: #fff; color: #334155; transition: all .3s ease;
}
:root[data-clinical-skin] body :is(thead th,tbody th),:root[data-clinical-skin] body #compare-content th { background: #f8fafc; color: #0f172a; }
:root[data-clinical-skin] body table tr:last-child>* { border-bottom-width: 0; }
:root[data-clinical-skin] body table thead tr:first-child>*:first-child { border-top-left-radius: 11px; }
:root[data-clinical-skin] body table thead tr:first-child>*:last-child { border-top-right-radius: 11px; }
:root[data-clinical-skin] body table tbody tr:last-child>*:first-child { border-bottom-left-radius: 11px; }
:root[data-clinical-skin] body table tbody tr:last-child>*:last-child { border-bottom-right-radius: 11px; }
:root[data-clinical-skin] body :is(table caption,table small,table p) { color: #475569; }
:root[data-clinical-skin] body table td strong { color: #047857; }
:root[data-clinical-skin] body #compare-dialog { background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 24px 80px #0f172a26; }
:root[data-clinical-skin] body dialog::backdrop { background: #0f172a80; backdrop-filter: blur(4px); }

/* Badge colors describe the existing words; no verification claims are added. */
:root[data-clinical-skin] body :is(.state-label,.allergen-status,.tag,.pp-status,.category-tag,.paid-label,.demand-badge,.product-chips>span,.card-tags>span) {
  display: inline-block; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 4px 10px; background: #f1f5f9; color: #475569;
  line-height: 1.5; font-size: .75rem; font-weight: 500; max-width: 100%;
}
:root[data-clinical-skin] body :is(.pp-status-verified,[data-status=verified]) { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
:root[data-clinical-skin] body :is(.state-label.unknown,.allergen-status.unknown,.pp-status-unknown) { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
:root[data-clinical-skin] body :is(.state-label.documented,.allergen-status.stated,.pp-status-label) { background: #eff6ff; color: #334155; border-color: #dbeafe; }
:root[data-clinical-skin] body :is(.tag.amber,.pp-status-warning) { background: #fffbeb; color: #92400e; border-color: #fde68a; }

/* Quiet, readable trust notes. Clinical caution stays distinct from shopping. */
:root[data-clinical-skin] body :is(.affiliate-note,#affiliate-disclosure,.research-disclosure,.pp-disclosure) {
  background: #f0fdf8; border: 1px solid #d1fae5; border-left: 4px solid #10b981;
  border-radius: 0 12px 12px 0; padding: 16px 20px; color: #334155;
}
:root[data-clinical-skin] body :is(.catalogue-fineprint,.guide-note,.article-caution,.wellbeing-scope,
  .wellbeing-reading .wellbeing-care,.research-callout,.interaction-box,.example-label,.pp-medical) {
  background: #fffdf5; border: 1px solid #fef3c7; border-left: 4px solid #f59e0b;
  border-radius: 0 12px 12px 0; padding: 16px 20px; color: #334155;
}
:root[data-clinical-skin] body :is(.article-caution,.pp-medical,.pp-disclosure) :is(p,li) { color: #334155; }
:root[data-clinical-skin] body .article-caution h3 { color: #92400e; }

/* One interaction rhythm; retain deliberate animations and centered fixed controls. */
:root[data-clinical-skin] body :is(a,button,input,select,textarea,summary,[role=button],[role=tab],
  .catalogue-card,.journal-card,.product-card,.learn-card,.wellbeing-card) { transition: all .3s ease; }
:root[data-clinical-skin] body :is(.button,.primary-cta,.shop-link,.journal-button,.wellbeing-primary,
  .header-cta,.load-more button,.journal-more button,.quick-find-dialog form button,
  .guide-type form button,#compare-open) {
  border-radius: 50px; border: 1px solid #0f172a; background: #0f172a; color: #fff;
  box-shadow: inset 0 1px 0 #ffffff18,0 4px 6px -1px #0f172a0d;
}
:root[data-clinical-skin] body :is(.button,.primary-cta,.shop-link,.journal-button,.wellbeing-primary,.header-cta) :is(span,.pp-number) { color: inherit; }
:root[data-clinical-skin] body :is(.result,.compare-bar) { background: #0f172a; color: #fff; border-color: #334155; }
:root[data-clinical-skin] body .result h3 { color: #d1fae5; }
:root[data-clinical-skin] body :is(.result p,.result small,.result em) { color: #cbd5e1; }
:root[data-clinical-skin] body .result-badge { border-radius: 999px; border-color: #64748b; color: #e2e8f0; }
:root[data-clinical-skin] body .compare-bar #compare-open { border-color: #64748b; }
:root[data-clinical-skin] body .compare-bar #compare-clear { color: #fff; }
:root[data-clinical-skin] body .pp-external-arrow { display: inline-block; transition: transform .3s ease; }

@media (hover:hover) and (pointer:fine) {
  :root[data-clinical-skin] body a:hover { color: #047857; }
  :root[data-clinical-skin] body :is(.button,.primary-cta,.shop-link,.journal-button,.wellbeing-primary,.header-cta,
    .load-more button,.journal-more button,.quick-find-dialog form button,.guide-type form button,#compare-open):not(:disabled):hover {
    background: #10b981; border-color: #10b981; color: #0f172a; translate: 0 -2px;
    box-shadow: 0 8px 18px -8px #10b98166;
  }
  :root[data-clinical-skin] body :is(a,button):hover .pp-external-arrow { transform: translateX(4px); }
  :root[data-clinical-skin] body :is(.catalogue-card,.journal-card,.learn-card,.wellbeing-card,.product-card):hover {
    border-color: #a7f3d0; box-shadow: 0 12px 28px -12px #0f172a26;
  }
  :root[data-clinical-skin] body tbody tr:hover>*, :root[data-clinical-skin] body #compare-content tbody tr:hover>* { background: #f1f5f9; }
}
@media (prefers-reduced-motion:reduce) {
  :root[data-clinical-skin] body *, :root[data-clinical-skin] body *::before, :root[data-clinical-skin] body *::after { transition: none !important; animation: none !important; }
  :root[data-clinical-skin] body :is(a,button):hover { translate: none !important; }
  :root[data-clinical-skin] body .pp-external-arrow { transform: none !important; }
}
@media print {
  :root[data-clinical-skin] body { background: #fff !important; }
  :root[data-clinical-skin] body :is(table,.catalogue-card,.detail,.cost-column,.facts,.product-comparison) { box-shadow: none; }
}