/* A shared, quiet material for the clinical interface. Screen-only so patient
   handouts and print layouts keep their established opaque paper surfaces. */
@media screen {
  :root {
    --bg: #f5f7f8;
    --surface: #ffffff;
    --ink: #24343e;
    --text: #24343e;
    --muted: #596b76;
    --line: #dce3e7;
    --teal: #267a7c;
    --ui-accent: #267a7c;
    --read-ink: var(--ink);
    --read-muted: var(--muted);
    --read-teal: #267a7c;
    --read-blue: #496d8b;
    --read-line: var(--line);
    --read-surface: var(--surface);
    --read-soft: #f0f5f5;
    --read-blue-soft: #f1f4f8;
    --glass-base: rgb(255 255 255 / 76%);
    --glass-top: rgb(255 255 255 / 94%);
    --glass-edge: rgb(148 166 179 / 55%);
    --glass-shadow: 0 3px 14px rgb(37 58 76 / 5%);
    --glass-hover-shadow: 0 6px 20px rgb(37 58 76 / 7%);
    --glass-hover: rgb(255 255 255 / 91%);
    --glass-soft: rgb(236 242 244 / 64%);
    --glass-control: rgb(255 255 255 / 90%);
    --glass-nav: rgb(247 250 251 / 88%);
    --glass-focus: #267a7c;
    --control-active: #267a7c;
    --control-active-ink: #ffffff;
    color: var(--ink);
    background: var(--bg);
    color-scheme: light;
  }
  html[data-theme='dark'] {
    --bg: #131c24;
    --surface: #1d2832;
    --ink: #e5edf1;
    --text: #e5edf1;
    --muted: #aec0ca;
    --line: #394751;
    --teal: #90cdc9;
    --ui-accent: #90cdc9;
    --read-ink: var(--ink);
    --read-muted: var(--muted);
    --read-line: var(--line);
    --read-surface: var(--surface);
    --read-teal: #90cdc9;
    --read-blue: #abc5df;
    --read-soft: #26343d;
    --read-blue-soft: #283541;
    --glass-base: rgb(30 41 52 / 82%);
    --glass-top: rgb(42 54 66 / 88%);
    --glass-edge: rgb(170 192 207 / 18%);
    --glass-shadow: 0 3px 16px rgb(0 0 0 / 9%), inset 0 1px 0 rgb(219 236 248 / 6%);
    --glass-hover-shadow: 0 6px 20px rgb(37 58 76 / 7%), inset 0 1px 0 var(--glass-top);
    --glass-hover: rgb(43 56 69 / 93%);
    --glass-soft: rgb(49 65 77 / 58%);
    --glass-control: #202e39;
    --glass-nav: rgb(25 36 46 / 93%);
    --glass-focus: #90cdc9;
    --control-active: #90cdc9;
    --control-active-ink: #132c32;
    color-scheme: dark;
  }
  html[data-theme] body {
    color: var(--ink);
    background: var(--bg);
  }
  html[data-theme] .workspace { background: var(--bg); }
  html[data-theme] body::before { display: none; }
  /* The navigation is part of the same light surface as the workspace. */
  html[data-theme] .sidebar {
    color: var(--ink);
    background: var(--glass-nav);
    border-color: var(--glass-edge);
    box-shadow: 4px 0 24px rgb(36 57 75 / 3%);
  }
  html:not([data-theme='dark']) .sidebar {
    --muted: #3d5360;
    --read-teal: #1b6b69;
  }
  html:not([data-theme='dark']) .sidebar :is(nav small,.nav-label,.sidebar-bottom p) {
    color: var(--muted);
  }
  html[data-theme] .sidebar nav a { color: var(--muted); }
  html[data-theme] .sidebar nav a:hover {
    color: var(--ink);
    background: var(--glass-soft);
    border-color: var(--glass-edge);
  }
  html[data-theme] .sidebar nav a.active {
    color: var(--read-teal);
    background: var(--read-soft);
    border-color: var(--glass-edge);
    box-shadow: inset 2px 0 var(--read-teal);
  }
  html[data-theme] .sidebar nav .nav-group-toggle,
  html[data-theme] .sidebar nav .contains-active > .nav-group-toggle {
    color: var(--muted);
  }
  html[data-theme] .sidebar nav .nav-group-toggle:hover {
    color: var(--ink);
    background: var(--glass-soft);
  }
  html[data-theme] .sidebar :is(.sidebar-search-box,.nav-search) {
    color: var(--muted);
    background: var(--glass-control);
    border-color: var(--glass-edge);
    box-shadow: inset 0 1px 0 var(--glass-top);
  }
  html[data-theme] .sidebar .sidebar-controls :is(.sidebar-search,.mobile-menu) {
    color: var(--muted);
    background: transparent;
    border-color: var(--glass-edge);
  }
  html[data-theme] .sidebar .sidebar-controls :is(.sidebar-search,.mobile-menu):hover {
    color: var(--ink);
    background: var(--glass-soft);
  }
  html[data-theme] .sidebar :is(.mobile-brand-tagline,.polish-mark) { color: var(--muted); }
  html[data-theme] .sidebar .theme-toggle { background: var(--glass-soft); border-color: var(--glass-edge); }
  html:not([data-theme='dark']) .theme-moon { color: #667a8c; }
  html:not([data-theme='dark']) .theme-toggle-thumb {
    background: linear-gradient(145deg,#fff,#e8eef1);
    box-shadow: 0 1px 4px rgb(33 55 71 / 15%), inset 0 1px 0 #fff;
  }
  html:not([data-theme='dark']) .theme-sun { color: #526976; }
  html:not([data-theme='dark']) .brand-lockup { content: url('brand-clinical-light.svg?v=plus-vector-v9'); }
  html:not([data-theme='dark']) .brand-reveal-wordmark { content: url('brand-clinical-wordmark-light.svg?v=plus-vector-v9'); }
  html:not([data-theme='dark']) .brand-reveal-plus { content: url('brand-clinical-symbol-light.svg?v=plus-vector-v9'); }
  html[data-theme] #main:has(#overview-search) h1 {
    background: none;
    color: var(--ink);
    -webkit-text-fill-color: currentColor;
  }
  /* Catalogue cards and working panels share the material, without changing
     their dimensions, grids, sticky positions or clinical status borders. */
  html[data-theme] #main :is(
    a.card,.si-card,.pv-entry,.atb-card,.ref-specialty,.vc-module-card,
    .vc-choice,.guide-condition-card,.ph-medicine-card,.exercise-card,
    .wh-card,.wh-care-card,.wh-method-card,.wh-event,.news-card,.evidence-article,
    .panel,.si-box,.pv-box,.pv-screen,.ref-section,.ref-criterion-card,
    .atb-inputs,.atb-output,.atb-regimen,.score-card,.result-panel,.question,
    .condition-section,.condition-header,.condition-aside,.rx-card,.guide-sources,
    .ph-bi-card,.ph-bi-context,.ph-plan,.ct-panel,.ct-treatment,.cv-box,
    .ts-card,.ls-card,.vs-record,.vc-row,.vs-selected,.wp-dating,.wp-calendar,
    .wp-consult-sheet,.cp-dating,.cp-oral-overview,.weekly-evidence,
    .pa-builder form,.pa-result,.pa-result-card,.pa-indication-panel,
    .si-age-disclosure,.si-table-wrap,.pv-table-wrap,.program-exercise
  ):where(:not(.danger):not(.urgent):not(.si-alert):not(.condition-alert):not(.rx-card-referral):not([data-tone='danger']):not([data-tone='caution'])) {
    background: linear-gradient(145deg,var(--glass-top),var(--glass-base));
    border-color: var(--glass-edge);
    box-shadow: var(--glass-shadow);
    color: var(--ink);
  }
  html[data-theme] #main .home-access-grid a.si-card,
  html[data-theme] #main .home-access-grid a.si-card.home-primary {
    background: linear-gradient(145deg,var(--glass-top),var(--glass-base));
    border-color: var(--glass-edge);
    box-shadow: var(--glass-shadow);
    color: var(--ink);
  }
  html[data-theme] #main .home-access-grid a.si-card.home-primary {
    border-color: color-mix(in srgb,var(--read-teal) 24%,var(--line));
  }
  /* Restore the real top border removed by the older featured-card design.
     A white highlight cannot replace a visible edge on a light workspace. */
  html:not([data-theme='dark']) #main .home-access-grid a.si-card.home-primary {
    border-top-width: 1px;
    border-top-style: solid;
  }
  html:not([data-theme='dark']) #main .home-access-grid a.si-card::before {
    display: none;
  }
  html[data-theme] #main .home-access-grid a.si-card :is(h2,h3),
  html[data-theme] #main .home-access-grid a.si-card.home-primary :is(h2,h3) { color: var(--ink); }
  html[data-theme] #main .home-access-grid a.si-card p,
  html[data-theme] #main .home-access-grid a.si-card.home-primary p { color: var(--muted); }
  html[data-theme] #main .home-access-grid a.si-card svg,
  html[data-theme] #main .home-access-grid a.si-card.home-primary svg { color: var(--read-teal); }
  html[data-theme] #main :is(.icon,.si-icon,.pv-entry-icon,.atb-icon,.ref-specialty-icon,
    .vc-module-icon,.ts-hero-icon,.ls-hero-icon,.ph-medicine-icon,.ph-directory-emblem) {
    background: var(--glass-soft);
    color: var(--read-teal);
    border-color: var(--glass-edge);
    box-shadow: inset 0 1px 0 var(--glass-top);
  }
  html[data-theme] #main .home-access-grid a.si-card .si-icon,
  html[data-theme] #main .home-access-grid a.si-card.home-primary .si-icon { background: var(--glass-soft); }
  html[data-theme] #main :is(.home-access,.overview-section) > h2 { color: var(--muted); }
  html[data-theme] #main :is(.si-hero,.vc-hero,.catalog-toolbar,.guide-search,.guide-filters,
    .clinical-section-nav,.cv-tabs,.ts-tabs,.ls-tabs,#overview-search) {
    color: var(--ink);
    background: var(--glass-control);
    border-color: var(--glass-edge);
    box-shadow: var(--glass-shadow);
  }
  html[data-theme] #main :is(.cp-summary,.wp-next,.ph-bi-profile-grid .ph-bi-card > header,
    .cp-empty,.overview-empty) {
    background: var(--glass-soft);
    color: var(--muted);
    border-color: var(--glass-edge);
  }
  html[data-theme] #main .overview-empty { box-shadow: none; }
  html[data-theme] #main .result-panel :is(h2,.result-number,.result-row) { color: var(--ink); }
  html[data-theme] #main .result-panel :is(p,.result-label) { color: var(--muted); }
  html[data-theme] #main .result-panel .result-row { border-color: var(--line); }
  /* Results are now light/glass surfaces: every nested dose value must use
     the same palette, including the isolated calculator document in dialogs. */
  html[data-theme] #main .dose-posology-item {
    color: var(--ink);
    background: var(--read-soft);
    border-color: var(--line);
  }
  html[data-theme] #main .dose-posology-item > strong { color: var(--ink); }
  html[data-theme] #main .dose-posology-item :is(span,small) { color: var(--muted); }
  html[data-theme] #main .dose-posology-volume > strong { color: var(--read-teal); }
  html[data-theme] #main .score-breakdown summary { color: var(--read-teal); }
  html[data-theme] #main .dm-node i { color: inherit; }
  html[data-theme] #main .am-dose-component + .am-dose-component { border-color: var(--line); }
  html[data-theme] #main .error { color: #a12c35 !important; }
  html[data-theme='dark'] #main .error { color: #ffb4b9 !important; }
  html[data-theme] #main :is(.home-shortcuts a,.context-links > a,.btn.secondary,
    .history-back,.history-navigation .btn,.favorite-toggle,.pill) {
    color: var(--muted);
    background: var(--glass-control);
    border-color: var(--glass-edge);
    box-shadow: none;
  }
  /* A selected control keeps its visible state after the glass treatment.
     Pair light accents with dark text in dark mode instead of white on mint. */
  html[data-theme] #main :is(.btn.secondary,.chip,.pv-reset)[aria-pressed='true'],
  html[data-theme] #main .si-chips a[aria-current='page'],
  html[data-theme] #main .ph-shell .btn[aria-pressed='true'],
  html[data-theme] #main .dm-rail .dm-primary,
  html[data-theme] #main :is(.hta-dose-buttons,.hta-mode-tabs,.hta-catalogue-tabs) button.active {
    color: var(--control-active-ink);
    background: var(--control-active);
    border-color: var(--control-active);
  }
  html[data-theme] #main .favorite-toggle[aria-pressed='true'] { color: #906715; background: #faf4e6; border-color: #d6c290; }
  html[data-theme='dark'] #main .favorite-toggle[aria-pressed='true'] { color: #f1d185; background: #403829; border-color: #8f7849; }
  html[data-theme] #main :is(.cp-planner,.wp-planner,.cv-module,.vc-shell,.ts-shell,.ls-shell,.ph-shell) {
    --cp-ink: var(--ink); --cp-muted: var(--muted); --cp-line: var(--line);
    --cp-surface: var(--surface); --cp-soft: var(--read-soft); --cp-teal: var(--read-teal); --cp-blue: var(--read-blue);
    --wp-ink: var(--ink); --wp-muted: var(--muted); --wp-line: var(--line);
    --wp-surface: var(--surface); --wp-tint: var(--read-soft); --wp-accent: var(--read-teal);
    --cv-bg: var(--surface); --cv-ink: var(--ink); --cv-muted: var(--muted);
    --cv-border: var(--line); --cv-soft: var(--read-soft);
    --vc-soft: var(--read-soft); --ts-soft: var(--read-soft); --ls-soft: var(--read-soft);
    --ts-line: var(--line); --ls-line: var(--line); --ph-line: var(--line);
    --ts-muted: var(--muted); --ls-muted: var(--muted);
  }
  html[data-theme] #main :is(.wp-result-strip > div,.cp-stops button) {
    background: var(--glass-control);
    border-color: var(--glass-edge);
  }
  html[data-theme] #main :is(input:not([type='checkbox']):not([type='radio']):not([type='range']),select,textarea) {
    color: var(--ink);
    background-color: var(--glass-control);
    border-color: var(--line);
  }
  html[data-theme] #main :is(input,select,textarea):focus-visible,
  html[data-theme] :is(a,button):focus-visible { outline-color: var(--glass-focus); }
  html[data-theme] #main :is(table thead,table th) {
    background: var(--read-soft);
    color: var(--ink);
  }
  /* Existing modules must inherit a complete palette, not white fallbacks. */
  html[data-theme] #main .dm-module,
  html[data-theme] .dm-target-dialog {
    --background: var(--surface);
    --border: var(--line);
    --dm-accent: var(--read-teal);
  }
  html[data-theme] #main .am-presentation {
    background: var(--read-soft);
    color: var(--ink);
    border-color: var(--line);
    border-left-color: var(--read-teal);
  }
  html[data-theme] #main .am-presentation :is(h2,h3,label) { color: var(--ink); }
  html[data-theme] #main .am-presentation :is(p,.atb-meta) { color: var(--muted); }
  html[data-theme] #main .am-presentation a { color: var(--read-teal); }
  html[data-theme] #main .ph-table tr { background: var(--surface); color: var(--ink); }
  html[data-theme] #main .ph-table :is(td,th) { color: var(--ink); }
  html[data-theme] #main .ph-table td::before { color: var(--muted); }
  html[data-theme] #main .ph-table tr.ph-selected > * {
    background: var(--read-soft);
    color: var(--ink);
  }
  html[data-theme] #main .score-danger { background: #fff0ee; color: #78251e; }
  html[data-theme] #main .score-danger :is(strong,p) { color: inherit; }
  html[data-theme='dark'] #main .score-danger { background: #3c2227; color: #ffb4b9; }
  html[data-theme] #main .pv-calendar td > span { color: var(--muted); }
  html[data-theme] #main .btn:not(.secondary):not(.dm-danger):not(.urgent-btn):not(.atb-cross-primary),
  html[data-theme] #main .dm-module .dm-step-heading b,
  html[data-theme] #main .dm-module .dm-shortcuts a[aria-current='page'] {
    color: var(--control-active-ink);
    background: var(--control-active);
    border-color: var(--control-active);
  }
  html[data-theme] #main :is(.exercise-add,.program-instructions,.exercise-dialog-meta,.exercise-caveat strong,.program-order) {
    color: var(--read-teal);
  }
  html[data-theme] #main .is-selected .exercise-add { color: var(--muted); }
  /* The printable sheet stays white in its screen preview in either theme. */
  html[data-theme] #main .exercise-print { color: #173244; background: #fff; }
  html[data-theme] #main .exercise-print :is(h2,h3) { color: #173244; }
  html[data-theme] #main .exercise-print :is(p,small,footer) { color: #526a78; }
  html[data-theme] #main .exercise-print strong { color: #0f766e; }
  html[data-theme] #main .exercise-print-alert :is(strong,p) { color: #6f171e; }
  /* Floating layers are more opaque for legibility over the page beneath. */
  html[data-theme] :is(dialog,.dm-context) {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--glass-edge);
    box-shadow: 0 22px 70px rgb(25 43 59 / 20%), inset 0 1px 0 var(--glass-top);
  }
  html[data-theme] dialog::backdrop { background: rgb(35 50 63 / 28%); }
  html[data-theme='dark'] dialog::backdrop { background: rgb(6 12 18 / 66%); }
  html[data-theme] :is(.favorite-tool-header,.command-foot,.bi-safety-dialog-header,
    .feedback-dialog header,.dm-context header) { background: var(--read-soft); color: var(--ink); }
  html[data-theme] .favorite-tool-dialog .favorite-tool-heading h2 { color: var(--ink); }
  /* Keep diagrams sharp; transparency and blur belong to their controls,
     never to zoomable clinical nodes or warning/result semantics. */
  html[data-theme] #main :is(.dm-frame,.dm-frame-controls) {
    background: var(--glass-control);
    border-color: var(--glass-edge);
    box-shadow: var(--glass-shadow);
  }
  html[data-theme] .feedback-launch { background: var(--surface); color: var(--read-teal); border-color: var(--line); box-shadow: var(--glass-shadow); }
  html[data-theme] footer { color: var(--muted); background: transparent; border-color: var(--line); }
}
@media screen and (hover: hover) and (pointer: fine) {
  html[data-theme] #main :is(a.card,a.si-card,a.pv-entry,a.atb-card,a.ref-specialty,
    .vc-module-card,.vc-choice,.ph-medicine-card,.wh-card,.wh-care-card,.guide-condition-card):hover,
  html[data-theme] #main :is(.resource-favorite,.tool-card):hover > :is(a.card,a.si-card,a.pv-entry,a.atb-card,a.ref-specialty) {
    background: var(--glass-hover);
    border-color: color-mix(in srgb,var(--read-teal) 30%,var(--line));
    box-shadow: var(--glass-hover-shadow);
  }
  html[data-theme] #main .home-access-grid a.si-card.home-primary:hover { background: var(--glass-hover); }
}
/* Restrict live backdrop blur to the few floating surfaces; repeated cards
   get their frosted material from alpha and edge highlights, for mobile speed. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media screen {
    html[data-theme] .sidebar {
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }
    html[data-theme] dialog::backdrop { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
    html[data-theme] #main .clinical-section-nav { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  }
}
@media screen and (prefers-reduced-transparency: reduce) {
  :root,html[data-theme='dark'] {
    --glass-base: var(--surface); --glass-top: var(--surface);
    --glass-control: var(--surface); --glass-nav: var(--bg);
  }
  html[data-theme] .sidebar,html[data-theme] #main .clinical-section-nav,html[data-theme] dialog::backdrop {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  html[data-theme] .sidebar,html[data-theme] #main :is(.si-card,.card,.panel,.condition-section),html[data-theme] dialog {
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}