/* Common palette roles. Category colors never describe a medical state. */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10191e;
  --panel: #1c292f;
  --surface-raised: #27373e;
  --soft: #24343b;
  --surface-hover: #30454c;
  --text: #edf3f2;
  --muted: #b1c2c8;
  --line: #445a63;
  --control-border: #79919a;
  --accent: #8cd7cb;
  --accent-soft: #244941;
  --on-accent: #102c28;
  --focus: #a0e9df;
  --status-range: #98d4ad;
  --status-attention: #efbe7c;
  --status-review: #edc4ee;
  --status-review-bg: #49334e;
  --status-review-border: #a781ae;
  --status-error: #ffb8b0;
  --category-lab: #a9cbff;
  --category-visit: #cfc0fa;
  --tracker-mint: #23483f;
  --tracker-blue: #263f59;
  --tracker-lavender: #403654;
  --tracker-cream: #4b422a;
  --tracker-peach: #503b31;
  --tracker-rose: #4d3344;
  --tracker-grid: #58707b;
  --tracker-head: #30434d;
  --tracker-stripe: #202f37;
  --tracker-number: #f5f8fb;
  --map-line: #b1c2c8;
  --shadow: #0005;
  --motion-fast: 160ms;
  --paper: var(--panel);
  --paper-head: var(--soft);
  --paper-line: var(--line);
  --paper-muted: var(--muted);
  --ink: var(--text);
  --green: var(--status-range);
  --amber: var(--status-attention);
  background: var(--bg);
  color: var(--text);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f0;
  --panel: #ffffff;
  --surface-raised: #f8faf9;
  --soft: #eaf0ef;
  --surface-hover: #dce9e6;
  --text: #23373d;
  --muted: #526870;
  --line: #c3cfce;
  --control-border: #70878c;
  --accent: #17695e;
  --accent-soft: #dceee7;
  --on-accent: #ffffff;
  --focus: #106d76;
  --status-range: #256541;
  --status-attention: #855016;
  --status-review: #734576;
  --status-review-bg: #f3e9f3;
  --status-review-border: #a57aa8;
  --status-error: #a23129;
  --category-lab: #315f9b;
  --category-visit: #6e4798;
  --tracker-mint: #e0f0e7;
  --tracker-blue: #e1edf9;
  --tracker-lavender: #ece5f6;
  --tracker-cream: #fbf0cf;
  --tracker-peach: #f9e5d6;
  --tracker-rose: #f5e2eb;
  --tracker-grid: #b8c8cd;
  --tracker-head: #e7eef2;
  --tracker-stripe: #f6f8fa;
  --tracker-number: #213742;
  --map-line: #526870;
  --shadow: #253d3814;
}

/* Text and controls use the same roles in tables, dialogs and side panels. */
button, a, input, select, textarea, summary {
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease,
    color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
button, input, select, textarea { font: inherit; }
input, select, textarea { color-scheme: inherit; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  min-height: 44px;
  border-radius: 7px;
}
textarea { color: var(--text); background: var(--surface-raised); border: 1px solid var(--control-border); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.primary-button, .secondary-button, .group-tab, .text-button, .quiet-button,
.theme-toggle-button, .region-close, .close-button, .calendar-trigger, .report-button {
  min-height: 44px;
  line-height: 1.4;
}
.primary-button { color: var(--on-accent); background: var(--accent); padding: 10px 14px; font-size: 14px; }
.secondary-button { font-size: 14px; padding: 9px 13px; }
.brand-mark, .skip-link, .calendar-day.selected { color: var(--on-accent); }
button:disabled { cursor: not-allowed; }
.nav-item:hover, .quiet-button:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.active { background: var(--accent-soft); border-color: var(--accent); }
.group-tab.active, .table-mode-switch button[aria-pressed="true"],
.table-mode-switch button.active, .alphabet-index button.active,
.alphabet-index button[aria-pressed="true"], .workflow-panel .group-tab.active,
.region-tabs button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.region-tabs button:hover:not(.active) { background: var(--surface-hover); }
.search-field { background: var(--surface-raised); border: 1px solid var(--control-border); border-radius: 7px; padding: 0 9px; }
.search-field:focus-within { border-color: var(--focus); }
.search-field input:focus-visible { outline-offset: -3px; }
.analyses-panel, .records-panel, .body-panel, .documents-panel, dialog { border-color: var(--line); }
.records-filter select, .action-control select, .calendar-trigger, .measurement-form input,
.measurement-form select, .workflow-panel input, .workflow-panel select,
.workflow-panel textarea, #input-panel .measurement-form textarea { border-color: var(--control-border); }

/* Both avatars keep their transparent source image and full anatomy. */
.body-panel, [data-theme="light"] .body-panel { background: var(--panel); border-color: var(--line); }
.body-stage { background: var(--panel); }
.body-stage img { animation: none; }
.body-halo, .body-grid { opacity: .25; }
[data-theme="light"] .body-stage img { filter: drop-shadow(0 10px 15px var(--shadow)); }
.body-panel .panel-heading h2, .organ-marker { color: var(--text); }
.body-panel .eyebrow, .body-panel .map-tag, [data-theme="light"] .body-panel .map-tag,
.body-caption, .map-legend, .map-explanation, .avatar-controls,
.avatar-controls>span, .organ-marker .marker-label small { color: var(--muted); }
.map-tag, .map-legend { border-color: var(--line); }
.organ-marker .marker-label { background: var(--surface-raised); border-color: var(--control-border); box-shadow: 0 3px 12px var(--shadow); }
.organ-marker.active .marker-label, .organ-marker.related .marker-label {
  background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
.organ-marker.abnormal .marker-label small { color: var(--status-attention); }
.organ-hit:hover { border-color: var(--accent); background: var(--accent-soft); }
#organ-lines .organ-connector { stroke: var(--map-line); stroke-opacity: 1; }
#organ-lines .organ-anchor { fill: var(--panel); stroke: var(--map-line); }
#organ-lines [stroke="#dfab71"] { stroke: var(--status-attention); }
#organ-lines .organ-anchor[fill="#dfab71"] { fill: var(--status-attention); }
.more-regions button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.avatar-controls select { background: var(--surface-raised); border-color: var(--control-border); color: var(--text); }

/* A laboratory range, a discrepancy and a review request remain different. */
.value-button.in_range, dialog .value-button.in_range, [data-theme="light"] dialog .value-button.in_range,
.detail-status.in_range, [data-theme="light"] .detail-status.in_range { color: var(--status-range); }
.value-button.high, .value-button.low, .value-button.abnormal,
.detail-status.high, .detail-status.low, .detail-status.abnormal,
[data-theme="light"] .detail-status.high, [data-theme="light"] .detail-status.low,
[data-theme="light"] .detail-status.abnormal { color: var(--status-attention); }
.review-badge, .draft-label, .value-button .review-badge-compact,
.results-table .value-button .review-badge-compact, .lab-reading-key .compact-review-example {
  background: var(--status-review-bg); color: var(--status-review); border-color: var(--status-review-border);
}
.history-mobile-meta { color: var(--status-review); }
.range-key { background: var(--status-range); }
.indicator-badge { color: var(--category-lab); background: var(--soft); border-color: var(--line); }
.results-table.full-history-table td.row-reference-cell,
.results-table.full-history-table th.row-reference-cell { background: var(--soft); }
.results-table tbody tr:hover th.result-label-cell { background: var(--surface-hover); }
.table-scroll, .table-scroll-rail { scrollbar-color: var(--control-border) var(--soft); }
.table-scroll-rail { background: var(--soft); }
.table-scroll-rail>div { background: repeating-linear-gradient(90deg,transparent 0,transparent 39px,var(--line) 40px,var(--line) 41px); }
.table-scroll-rail::-webkit-scrollbar-track { background: var(--soft); }
.table-scroll-rail::-webkit-scrollbar-thumb { background: var(--control-border); border-color: var(--soft); }

/* Only short state feedback; medical values and anatomy never animate. */
dialog[open], .region-panel:not([hidden]) { animation: surface-appear var(--motion-fast) ease-out; }
@keyframes surface-appear { from { opacity: .65; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media(max-width:720px) {
  input, select, textarea, .workflow-panel input, .workflow-panel select,
  .workflow-panel textarea, .search-field input { font-size: 16px; }
}

.recognition-actions { display:flex; flex-wrap:wrap; gap:8px; margin-block:8px; }
.recognition-summary, .recognition-page, .recognition-issue, .upload-result { overflow-wrap:anywhere; }
.recognition-summary summary { cursor:pointer; min-height:44px; padding-block:10px; }
.recognition-context { border:1px solid var(--control-border); }
.recognition-context mark { color:var(--status-review); background:var(--status-review-bg); }
.upload-result { padding-block:14px; border-bottom:1px solid var(--line); }

/* Native profile options must not dictate the width of the entire page header. */
.page-header { flex-wrap:wrap; }
.page-header>div { min-width:0; max-width:100%; }
.header-meta { min-width:0; max-width:100%; flex-wrap:wrap; }
.profile-control { min-width:0; width:230px; max-width:100%; flex:0 1 230px; grid-template-columns:minmax(0,1fr); }
.profile-control select { width:100%; min-width:0; max-width:100%; }
@media(max-width:720px) { .profile-control { flex:1 1 160px; } }

/* Period colors organize time; result colors retain their separate meaning. */
.workflow-year-month:nth-child(4n+1) { --period-surface: var(--tracker-mint); }
.workflow-year-month:nth-child(4n+2) { --period-surface: var(--tracker-blue); }
.workflow-year-month:nth-child(4n+3) { --period-surface: var(--tracker-lavender); }
.workflow-year-month:nth-child(4n) { --period-surface: var(--tracker-peach); }
.workflow-panel .workflow-year-month {
  border: 1px solid var(--tracker-grid);
  border-top: 5px solid var(--period-surface);
  background: var(--panel);
  color: var(--text);
  border-radius: 9px;
}
.workflow-year-month>strong {
  background: var(--period-surface);
  color: var(--text);
  padding: 3px 9px;
  border-radius: 4px;
}
.workflow-panel .workflow-year-month.active {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--accent-soft);
  color: var(--text);
}
.measurement-table {
  border: 1px solid var(--tracker-grid);
  font-variant-numeric: tabular-nums;
}
.measurement-table thead th { background: var(--tracker-mint); color: var(--text); }
@media(min-width:721px) {
  .measurement-table tbody th, .measurement-table tbody td,
  .measurement-table thead th { border: 1px solid var(--tracker-grid); }
  .measurement-table tbody tr:nth-child(even) { background: var(--tracker-stripe); }
  .measurement-table .secondary-button { display:inline-flex; margin:4px 4px 0 0; }
}