/* ============================================================
   IgniteData — Archer Clinician Web App prototype
   Material Design 3 (m3.material.io) tokens, themed verbatim
   from Figma "Archer - DSM - V2.3" M3 variable collection.
   Light scheme primary: #2961DB · Dark scheme primary: #EC7A1A
   ============================================================ */

:root {
  /* ---- M3 sys color — Light (from Archer DSM V2.3) ---- */
  --md-sys-color-primary: #2961DB;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D6E3FF;
  --md-sys-color-on-primary-container: #284777;
  --md-sys-color-secondary: #0088FF;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #D1E7FA;
  --md-sys-color-on-secondary-container: #071C33;
  --md-sys-color-tertiary: #217853;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #D8F3E7;
  --md-sys-color-on-tertiary-container: #1A4C36;
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #93000A;
  --md-sys-color-background: #F9FBFD;
  --md-sys-color-on-background: #191C20;
  --md-sys-color-surface: #F9FBFD;
  --md-sys-color-on-surface: #191C20;
  --md-sys-color-surface-variant: #E0E2EC;
  --md-sys-color-on-surface-variant: #44474E;
  --md-sys-color-outline: #C4C6D0; /* JJ: every grey border identical (= outline-variant) */
  --md-sys-color-outline-variant: #C4C6D0;
  --md-sys-color-surface-dim: #ECF0F7;
  --md-sys-color-surface-bright: #F9FBFD;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F9FBFD;
  --md-sys-color-surface-container: #F1F4F9;
  --md-sys-color-surface-container-high: #EDF2F9;
  --md-sys-color-surface-container-highest: #F1F3F4;
  --md-sys-color-inverse-surface: #2E3036;
  --md-sys-color-inverse-on-surface: #F0F0F7;
  --md-sys-color-inverse-primary: #AAC7FF;
  --md-sys-color-surface-tint: #415F91;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  /* ---- M3 shape (Archer DSM Shape collection) ---- */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 1000px;

  /* ---- M3 type (Font theme: Brand/Plain = Inter) ---- */
  --md-sys-typescale-font: 'Inter', system-ui, sans-serif;
  --md-ref-typeface-brand: 'Inter';
  --md-ref-typeface-plain: 'Inter';

  /* Material Web component hooks */
  --md-filled-button-container-shape: var(--md-sys-shape-corner-full);
  --md-outlined-button-container-shape: var(--md-sys-shape-corner-full);
  --md-text-button-container-shape: var(--md-sys-shape-corner-full);
  --md-dialog-container-shape: var(--md-sys-shape-corner-extra-large);
  --md-dialog-container-color: var(--md-sys-color-surface-container-high);

  /* Archer link accent: secondary blue in light, primary orange in dark */
  --archer-link: var(--md-sys-color-primary);
  --archer-crumb-root: #2961DB;
  --archer-page-bg: #FFFFFF;
  --archer-card-hover: #FCFDFF;
}

[data-theme="dark"] {
  /* ---- M3 sys color — Dark (from Archer DSM V2.3) ---- */
  --md-sys-color-primary: #EC7A1A;
  --md-sys-color-on-primary: #281200;
  --md-sys-color-primary-container: #763600;
  --md-sys-color-on-primary-container: #FFDBBC;
  --md-sys-color-secondary: #FFDBBC;
  --md-sys-color-on-secondary: #4D2716;
  --md-sys-color-secondary-container: #633D2C;
  --md-sys-color-on-secondary-container: #FFDBCA;
  --md-sys-color-tertiary: #EFB8C8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633B48;
  --md-sys-color-on-tertiary-container: #FFD8E4;
  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;
  --md-sys-color-background: #141218;
  --md-sys-color-on-background: #E6E0E9;
  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #E6E0E9;
  --md-sys-color-surface-variant: #49454F;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;
  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3B383E;
  --md-sys-color-surface-container-lowest: #0F0D13;
  --md-sys-color-surface-container-low: #1D1B20;
  --md-sys-color-surface-container: #211F26;
  --md-sys-color-surface-container-high: #2B2930;
  --md-sys-color-surface-container-highest: #36343B;
  --md-sys-color-inverse-surface: #E6E0E9;
  --md-sys-color-inverse-on-surface: #322F35;
  --md-sys-color-inverse-primary: #6750A4;
  --md-sys-color-surface-tint: #D0BCFF;

  --archer-link: var(--md-sys-color-primary);
  --archer-crumb-root: var(--md-sys-color-primary); /* dark mode: crumb CTA matches primary orange */
  --archer-page-bg: #141218;
  --archer-card-hover: #1D1B20;
}

/* ============ Inter v3.19 (matches Figma's bundled Inter) ============ */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: block;
  src: url('vendor/fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: block;
  src: url('vendor/fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: block;
  src: url('vendor/fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: block;
  src: url('vendor/fonts/Inter-Bold.woff2') format('woff2'); }

/* ============ Reset / base ============ */
* { box-sizing: border-box; }
*:where(:not(md-filled-button, md-outlined-button, md-text-button, md-elevated-button,
  md-filled-tonal-button, md-icon-button, md-outlined-icon-button, md-filled-icon-button,
  md-filled-tonal-icon-button, md-icon, md-dialog, md-switch, md-checkbox, md-radio,
  md-outlined-text-field, md-filled-text-field, md-filter-chip, md-assist-chip,
  md-input-chip, md-suggestion-chip, md-chip-set, md-menu, md-menu-item, md-select-option,
  md-outlined-select, md-filled-select, md-tabs, md-primary-tab, md-secondary-tab,
  md-fab, md-divider, md-list, md-list-item, md-linear-progress, md-circular-progress,
  md-slider, md-elevation, md-ripple, md-focus-ring)) { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--md-sys-typescale-font);
  background: var(--archer-page-bg);
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  overflow: hidden;
}

/* M3 typescale helpers (Archer Typescale collection = M3 baseline) */
.headline-small { font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; }
.title-large    { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
.title-medium   { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px; }
.title-small    { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; }
.body-large     { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0.5px; }
.body-medium    { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.25px; }
.body-small     { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.4px; }
.label-large    { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; }
.label-medium   { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; }
.label-small    { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 22px;
  user-select: none;
}
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ============ App shell ============ */
.app {
  display: grid;
  grid-template-columns: 95px 1fr;
  width: 1920px;
  height: 100vh;
  transform-origin: top left;
  background: var(--archer-page-bg);
}
html, body { overflow: hidden; }

/* Left nav rail */
.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 40px;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  background: var(--archer-page-bg);
  z-index: 5;
}
.rail .logo { width: 52px; height: auto; margin-top: 28px; margin-bottom: 22px; flex: none; cursor: pointer; display: block; }
.rail .menu-btn { color: var(--md-sys-color-on-surface); }
.rail .menu-btn .material-symbols-outlined { font-size: 26px; }
.rail .spacer { flex: 1; }
.rail .rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.rail .med {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  color: var(--md-sys-color-on-surface); font-size: 11px; font-weight: 600; letter-spacing: .5px;
}
.rail .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 500; letter-spacing: .4px;
  margin-top: 4px; cursor: default;
}

/* Icon button (M3 standard icon button) */
.icon-btn {
  width: 40px; height: 40px; border: none; border-radius: var(--md-sys-shape-corner-full);
  display: grid; place-items: center; background: transparent; cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
  transition: background-color .15s;
  position: relative;
}
.icon-btn:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
.icon-btn:active { background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
.icon-btn.tonal { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.icon-btn.tonal:hover { background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, var(--md-sys-color-primary-container)); }
.icon-btn.outlined { border: 1px solid var(--md-sys-color-outline); }
.icon-btn.filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.icon-btn.small { width: 32px; height: 32px; }
.icon-btn.small .material-symbols-outlined { font-size: 18px; }

/* ============ Main column ============ */
/* The whole page scrolls (topbar is NOT sticky and scrolls away); sidebar + info panel stick */
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow-y: auto; }

/* Top app bar */

.topbar {
  height: 96px; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 28px 0 25px;
  background: var(--archer-page-bg);
}
.topbar .crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crumb-root {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--archer-crumb-root); color: #FFFFFF;
  display: grid; place-items: center; border: none; cursor: pointer; flex: none;
  margin-right: 10px;
}
.crumb-root .material-symbols-outlined { font-size: 22px; }
.crumb-root.neutral { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); border-radius: 14px; }
/* dark mode: primary container, on-primary (dark) icon */
[data-theme="dark"] .crumb-root { color: var(--md-sys-color-on-primary); }
[data-theme="dark"] .crumb-root.neutral { background: var(--archer-crumb-root); color: var(--md-sys-color-on-primary); }
.crumb-current.xl { font-size: 30px; line-height: 40px; letter-spacing: 0; }
.crumb-link {
  background: none; border: none; cursor: pointer;
  color: var(--archer-link);
  font-family: inherit; font-size: 30px; letter-spacing: -0.9px;
}
.crumb-link:hover { text-decoration: none; opacity: .85; }
.crumb-current { font-size: 30px; letter-spacing: -0.9px; color: var(--md-sys-color-on-surface); }
.crumb-sep { color: var(--md-sys-color-on-surface-variant); font-size: 30px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; margin: 0 14px 0 18px; }
.crumb-bar { width: 1px; height: 28px; border-radius: 1px; background: var(--md-sys-color-outline-variant); margin: 0 22px; align-self: center; flex: none; }
.crumb-sub { font-size: 30px; letter-spacing: -0.9px; color: var(--md-sys-color-on-surface); }

.topbar .top-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.info-btn {
  --md-outlined-icon-button-container-width: 40px;
  --md-outlined-icon-button-container-height: 40px;
  --md-outlined-icon-button-icon-size: 22px;
  --md-outlined-icon-button-outline-color: var(--md-sys-color-outline-variant);
  --md-outlined-icon-button-icon-color: var(--md-sys-color-on-surface);
}
.info-btn md-icon { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.patient-chip { display: flex; align-items: flex-end; gap: 24px; color: var(--md-sys-color-on-surface); }
.patient-chip .overline { display: block; font-size: 10px; font-weight: 600; letter-spacing: .5px; color: var(--md-sys-color-on-surface-variant); text-align: right; }
.patient-chip .name { display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 14px; font-weight: 500; }
.patient-chip .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20; }

/* ============ Screen area ============ */
.screens { flex: 1 0 auto; position: relative; display: flex; }
.screen { display: none; flex: 1; min-width: 0; }
.screen.active { display: flex; }

/* Generic content card page (Studies, Visits) */
.page-card-wrap { flex: 1; padding: 0 25px; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.page-card {
  flex: none; min-width: 0; overflow: visible;
  min-height: calc(100% - 25px);
  margin-bottom: 25px;
  background: var(--archer-page-bg);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  padding: 0 23px 24px;
}

/* Split layout pages (Vitals / Perf / AE): left panel + main */
.split { flex: 1; display: flex; min-width: 0; }
/* Assign Visit Date block (new sidebar date pattern) */
.avd-head { display: flex; align-items: center; gap: 10px; }
.avd-head .material-symbols-outlined { font-size: 22px; }
.avd-head .avd-title { font-size: 16px; font-weight: 600; flex: 1; }
.avd-action {
  background: none; border: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--archer-link); font-size: 14px; font-weight: 500;
}
.avd-action .material-symbols-outlined { font-size: 16px; }
.avd-fields { display: flex; gap: 17px; margin-top: 12px; } /* row spans the full content width = divider width */
.avd-fields md-outlined-text-field {
  min-width: 0; flex: 1;
  --md-outlined-text-field-label-text-font: 'Inter';
  --md-outlined-text-field-input-text-font: 'Inter';
  --md-outlined-text-field-input-text-size: 16px;
  --md-outlined-text-field-container-shape: 4px;
  --md-outlined-text-field-top-space: 15px;
  --md-outlined-text-field-bottom-space: 15px;
}
.tf.error { border: 2px solid var(--md-sys-color-error); }
.tf.error label { color: var(--md-sys-color-error); }
.tf .err-ico { color: var(--md-sys-color-error); }
.tf .err-ico .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 1; }
.avd-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; margin-top: 10px; }
.get-results-btn {
  align-self: flex-start;
  margin-top: 10px;
  --md-filled-button-container-height: 44px;
  --md-filled-button-label-text-size: 14px;
  --md-filled-button-label-text-font: 'Inter';
  --md-filled-button-leading-space: 22px;
  --md-filled-button-trailing-space: 22px;
}
/* expanded group children */
.qg-child-plain {
  display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 15px; color: var(--md-sys-color-on-surface);
  height: 44px; padding: 0 14px 0 42px; border-radius: 22px;
}
.qg-wrap.collapsed .qg-child-plain { display: none; }
.qg-wrap .qg-item .arrow { transition: transform .15s; }
.qg-wrap.collapsed .qg-item .arrow { transform: rotate(-90deg); }
.qg-child-plain:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent); }
.qg-child-plain.selected { background: #E9EFFB; font-weight: 500; }
[data-theme="dark"] .qg-child-plain.selected { background: var(--md-sys-color-secondary-container); }
.dates-fields { display: flex; gap: 13px; }
.dates-fields .tf { width: 149px; min-width: 0; height: 50px; flex: none; }
.side-panel {
  width: 325px; flex: none;
  display: flex; flex-direction: column;
  padding: 24px 24px 16px 24px; /* 24px top = calendar icon 24px from screen top when stuck; 24px sides */
  gap: 14px;
  /* sticky while the page scrolls; only the question groups scroll internally */
  position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow: hidden;
  transition: width .25s ease, padding .25s ease;
}
/* Rail menu icon collapses/expands the in-page sidebar */
.sidebar-collapsed .side-panel { width: 0; padding-left: 0; padding-right: 0; }
.sidebar-collapsed .split-main { padding-left: 24px; }
/* Divider between the date-selection area and Question Groups (content width) */
.sp-divider { flex: none; height: 1px; background: var(--md-sys-color-outline-variant); margin: 10px 0; } /* 14 flex-gap + 10 = 24px each side */
.side-panel .panel-head { display: flex; align-items: center; gap: 12px; }
.side-panel .panel-head .title-small { font-size: 16px; font-weight: 500; }
.side-panel .panel-head .grow { flex: 1; }
.side-panel .reset-link {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--archer-link); font-size: 13px; font-weight: 500;
}
.search-field {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 0 14px; height: 50px;
  color: var(--md-sys-color-on-surface-variant);
}
.search-field input {
  border: none; outline: none; background: none; flex: 1; min-width: 0;
  font-family: inherit; font-size: 16px; color: var(--md-sys-color-on-surface);
}
.chip-row { display: flex; gap: 8px; }

/* M3 chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent; cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .1px;
}
.chip:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
.chip.selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.chip .material-symbols-outlined { font-size: 16px; }

/* Status chips inside tables */
.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px;
  border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.status-chip .material-symbols-outlined { font-size: 16px; }
.status-chip.exported .material-symbols-outlined { color: var(--md-sys-color-primary); }
.status-chip.changed { color: var(--md-sys-color-on-surface-variant); }
.status-chip.changed .material-symbols-outlined { color: var(--md-sys-color-error); }
.status-chip.review {
  border: none; background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface); cursor: pointer;
}
.status-chip.linked .material-symbols-outlined { color: var(--md-sys-color-on-surface-variant); }
.status-chip.partial { border-color: #F5A623; }
.status-chip.partial .material-symbols-outlined { color: #E8710A; }
.status-chip.exported-green { border-color: #34A853; }
.status-chip.exported-green .material-symbols-outlined { color: #1E8E3E; }
.status-chip.unknown { border-color: var(--md-sys-color-outline-variant); }
.status-chip.unknown .material-symbols-outlined { color: var(--md-sys-color-on-surface-variant); }
.status-chip.failed { border-color: #D93025; }
.status-chip.failed .material-symbols-outlined { color: #D93025; font-variation-settings: 'FILL' 1; }
.status-chip.not-reviewed { border-color: #2961DB; }
.status-chip.not-reviewed .material-symbols-outlined { color: #2961DB; }
.status-chip.date-chip { cursor: pointer; height: 52px; border-radius: 26px; font-size: 15px; padding: 0 22px; gap: 10px; }
.status-chip.date-chip .material-symbols-outlined { font-size: 20px; }
.link-action {
  background: none; border: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--archer-link); font-size: 13px; font-weight: 500;
}
.link-action .material-symbols-outlined { font-size: 15px; }

/* Question-group tree */
.qg-scroll {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  /* scrollbar sits in the 24px gutter, 8px off the divider — same as the form scrollbar */
  /* 6px scrollbar dead-centred in the 24px gutter between sidebar content and the forms card;
     left margin/padding pair keeps the qg-wrap's -8px bleed visible instead of clipped by the scroll box */
  margin-right: -16px; padding-right: 16px; margin-left: -8px; padding-left: 8px; scrollbar-gutter: stable;
}
.qg-scroll::-webkit-scrollbar { width: 6px; }
.qg-scroll::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: 3px; }
.qg-scroll::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-outline); }
.qg-scroll::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
@supports (scrollbar-width: thin) { .qg-scroll { scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline-variant) transparent; } }
.qg-tree { display: flex; flex-direction: column; gap: 10px; }
/* Expanded-group surface bleeds into the side padding so its content stays on the 24px line */
.qg-wrap { background: #F7F9FC; border-radius: 16px; padding: 8px; margin: 0 -8px; display: flex; flex-direction: column; gap: 6px; }
[data-theme="dark"] .qg-wrap { background: var(--md-sys-color-surface-container-low); }
/* Default (collapsed, inactive) group: plain background — surface tint only while expanded */
.qg-wrap.collapsed, [data-theme="dark"] .qg-wrap.collapsed { background: transparent; }
.qg-item.child {
  background: #E9EFFB; border-radius: 22px; height: 44px; padding-left: 14px;
  font-weight: 400; font-size: 16px;
}
.qg-item.child b { font-weight: 700; }
[data-theme="dark"] .qg-item.child { background: var(--md-sys-color-secondary-container); }
.qg-item.child.selected { background: #E9EFFB; color: var(--md-sys-color-on-surface); }
.qg-item {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 10px; border-radius: var(--md-sys-shape-corner-small);
  cursor: pointer; color: var(--md-sys-color-on-surface); font-size: 16px;
  border: none; background: none; font-family: inherit; text-align: left; width: 100%;
}
.qg-item:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); }
.qg-item .material-symbols-outlined { font-size: 20px; color: var(--md-sys-color-on-surface-variant); }
.qg-item .grow { flex: 1; }

.qg-item.selected { background: #E9EFFB; color: var(--md-sys-color-on-surface); border-radius: 22px; font-weight: 500; }
[data-theme="dark"] .qg-item.selected { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.qg-item.check { gap: 8px; }

/* Export total card */
.export-total {
  flex: none; margin-top: 12px;
}
.export-total .et-title { font-size: 16px; font-weight: 500; color: var(--md-sys-color-on-surface); margin-bottom: 14px; }
.export-total .et-rows {
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 4px 18px;
}
.export-total .et-row { display: flex; justify-content: space-between; padding: 15px 0; font-size: 16px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.export-total .et-row:first-of-type { border-top: none; }
.export-total .et-row.selected { color: var(--archer-link); font-weight: 500; }

/* Main content column of split pages */
/* 8px padding + 8px margin centres the 6px scrollbar in the gutter beside the info panel;
   24px bottom = gap between export bar and bottom of the content area */
/* left padding 0: the sidebar's 24px right padding IS the gutter, so sidebar content → forms card = 24px.
   No inner scroll — the page itself scrolls; 24px right padding to the info panel / screen edge */
.split-main { flex: 1; min-width: 0; padding: 0 24px 24px 0; display: flex; flex-direction: column; gap: 16px; }
.split-main .page-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 0; }
.split-main .page-head .grow { flex: 1; }

/* Section card (question group card) */
.qcard {
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  padding: 20px 24px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.qcard .qcard-head { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.qcard .qcard-head .icon-btn { background: var(--md-sys-color-surface-container); }
.qcard .qcard-head .grow { flex: 1; }
.qcard .qcard-title { font-size: 20px; font-weight: 400; letter-spacing: .1px; }
.qcard .divider { height: 1px; background: var(--md-sys-color-outline-variant); }

/* Include-switch row */
.inc-section { padding: 6px 0 18px; }
.inc-section + .inc-section { border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: 20px; }
.qcard.formlevel { padding: 0; }
.qcard.formlevel .qcard-head { padding: 28px 24px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
/* Sections are inset by margin (not padding) so inner dividers span content width only;
   the head divider above stays full width. padding-top 20 + card flex-gap 16 = 36 divider→toggle,
   matched by sibling sections' 36 — identical everywhere. */
.qcard.formlevel .inc-section { padding: 20px 0 24px; margin: 0 24px; }
.qcard.formlevel .inc-section + .inc-section { border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: 36px; }
/* last row → card bottom matches the 38px toggle → row gap */
.qcard.formlevel .inc-section:last-child { padding-bottom: 38px; }
/* 38px = height of the column-label band, so unlabelled rows sit exactly
   where labelled rows do — as if the label copy were there but invisible */
.qcard.formlevel .inc-section .pill-row { margin-top: 38px; }
/* Table-card include section: taller row (40px view-switch) — trim padding so the toggle sits
   40px below the head divider and content starts 38px below the row, same as every other section */
.qcard.formlevel .inc-section:has(.view-switch) { padding-top: 16px; padding-bottom: 22px; }
.qcard.formlevel .inc-section .inc-mini-label + .pill-row,
.qcard.formlevel .inc-section .inc-mini-labels + .pill-row { margin-top: 0; }
.qcard.formlevel .data-table.bleed { margin: 0; width: 100%; }
/* Table view inside form cards: checkbox column aligns with the Include toggle above,
   lighter column titles, breathing room at both edges, values styled exactly like list values */
.qcard.formlevel .data-table th { font-weight: 500; }
.qcard.formlevel .data-table.bleed th:first-child, .qcard.formlevel .data-table.bleed td:first-child { padding-left: 24px; }
.qcard.formlevel .data-table.bleed th:last-child, .qcard.formlevel .data-table.bleed td:last-child { padding-right: 24px; }
.qcard.formlevel .data-table .num { font-variant-numeric: normal; }
/* Collapsible form-level cards */
.qcard.collapsed > :not(.qcard-head) { display: none; }
.qcard.collapsed .qcard-head { border-bottom-color: transparent; }
/* Selected-count notification: visible on collapsed groups with active selections */
.qc-badge {
  display: none; align-items: center; margin-left: 14px;
  height: 30px; padding: 0 14px; border-radius: var(--md-sys-shape-corner-full);
  background: #E9EFFB; color: var(--md-sys-color-primary);
  font-size: 13px; font-weight: 600; line-height: 1;
}
.qcard.collapsed .qc-badge.has { display: inline-flex; }
[data-theme="dark"] .qc-badge { background: var(--md-sys-color-secondary-container); }
.inc-mini-label { text-align: right; font-size: 13px; font-weight: 600; color: var(--md-sys-color-on-surface); padding: 10px 24px 8px 0; }
.inc-mini-labels { display: flex; justify-content: flex-end; padding: 10px 0 8px; font-size: 15px; font-weight: 500; color: var(--md-sys-color-on-surface); }
.inc-mini-labels span { width: 150px; text-align: center; }
.pill-row .ps-col { width: 150px; display: flex; justify-content: center; color: var(--md-sys-color-on-surface-variant); }
.pill-row .ps-chip-col { width: 150px; display: flex; justify-content: center; }
.src-info { position: relative; display: inline-flex; align-items: center; margin-left: 10px; color: var(--md-sys-color-on-surface-variant); cursor: default; }
.src-info .material-symbols-outlined { font-size: 18px; }
.src-info::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: #2F3033; color: #FFFFFF; font-size: 12px; line-height: 16px;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.src-info:hover::after { opacity: 1; }
.pill-row {
  display: flex; align-items: center; gap: 20px;
}
.pill-row > span { display: inline-flex; align-items: center; }

.pill-row {
  background: var(--md-sys-color-surface-container-low);
  border-radius: 12px; min-height: 64px; padding: 0 18px 0 24px;
  font-size: 16px;
}
.pill-row .grow { flex: 1; }
.pill-row .utc { font-size: 13px; color: var(--md-sys-color-on-surface-variant); margin-left: 14px; }
.pill-row b { font-weight: 600; }
.pill-row .muted { color: var(--md-sys-color-on-surface-variant); }
.include-row { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.include-row .inc-label { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.include-row .question { font-size: 20px; font-weight: 400; margin-left: 12px; }

/* ============ Tables ============ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; font-size: 16px; font-weight: 600; letter-spacing: .1px;
  color: var(--md-sys-color-on-surface); padding: 31px 2px 32px;
  background: var(--md-sys-color-surface-container-low);
  white-space: nowrap;
}
.data-table td {
  padding: 0 2px; height: 67px; font-size: 16px; letter-spacing: .2px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
}
.data-table th:first-child, .data-table td:first-child { padding-left: 89px; }
.data-table.plain th { background: none; padding: 10px 2px 14px; font-weight: 600; font-size: 16px; color: var(--md-sys-color-on-surface); }
.data-table.plain th:first-child, .data-table.plain td:first-child { padding-left: 24px; }
.data-table.bleed { margin: 0 -24px -24px; width: calc(100% + 48px); }
.data-table.bleed th:first-child, .data-table.bleed td:first-child { padding-left: 84px; }
.data-table.wrap th { white-space: normal; font-weight: 500; padding: 18px 8px; vertical-align: middle; }
.data-table tr.row-active td { background: var(--md-sys-color-surface-container); }
.data-table tr.row-checked td { background: #FCFDFF; }
[data-theme="dark"] .data-table tr.row-checked td { background: var(--md-sys-color-surface-container-low); }
.data-table td:last-child { text-align: right; padding-right: 10px; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.row-hover:hover td { background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent); }
.data-table .num { font-variant-numeric: tabular-nums; }
.data-table td.right, .data-table th.right { text-align: right; }
.data-table tr.selected-row td { background: color-mix(in srgb, var(--md-sys-color-secondary-container) 45%, transparent); }
.data-table .cell-muted { color: var(--md-sys-color-on-surface-variant); }

/* Plain visit-forms table (Select Visits screen) */
.form-row td:first-child { cursor: pointer; }
.form-row:hover td:first-child { text-decoration: none; }

/* ============ Buttons (M3) ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: .1px;
  cursor: pointer; border: none; white-space: nowrap;
  transition: box-shadow .15s, background-color .15s;
}
.btn .material-symbols-outlined { font-size: 18px; }
.btn.filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn.filled:hover { box-shadow: none; filter: brightness(1.04); }
.btn.tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn.outlined { background: transparent; border: 1px solid var(--md-sys-color-outline); color: var(--md-sys-color-primary); }
.btn.outlined:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.btn.text { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; }
.btn.soft {
  background: #EEF0FB; color: var(--md-sys-color-primary);
  height: 48px; padding: 0 24px; font-size: 15px;
}
.btn.soft:hover { background: #E3E8F8; }
[data-theme="dark"] .btn.soft { background: color-mix(in srgb, var(--md-sys-color-primary) 14%, var(--md-sys-color-surface-container-high)); color: var(--md-sys-color-primary); }
.dialog .dlg-actions .btn.filled { height: 48px; padding: 0 26px; font-size: 15px; }
.btn.text:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.btn:disabled { opacity: .38; cursor: default; box-shadow: none !important; }
.btn.split-l { border-radius: var(--md-sys-shape-corner-full) 0 0 var(--md-sys-shape-corner-full); padding-right: 18px; }
.btn.split-r {
  border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0;
  padding: 0 10px; margin-left: 1px; min-width: 0;
}

/* ============ Selection controls (M3) ============ */
.m3-checkbox {
  appearance: none; width: 20px; height: 20px; flex: none;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: 2px; cursor: pointer; position: relative; background: transparent;
}
.m3-checkbox:checked, .m3-checkbox.mixed {
  background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary);
}
.m3-checkbox:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid var(--md-sys-color-on-primary);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.m3-checkbox.mixed::after {
  content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 2px;
  background: var(--md-sys-color-on-primary); border: none; transform: none;
}
.m3-radio {
  appearance: none; width: 20px; height: 20px; flex: none;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: 50%; cursor: pointer; position: relative; background: transparent;
}
.m3-radio:checked { border-color: var(--md-sys-color-primary); }
.m3-radio:disabled {
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  cursor: default; pointer-events: none;
}
.m3-radio:disabled:checked::after { background: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
.m3-radio:checked::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--md-sys-color-primary);
}

/* M3 switch */
.m3-switch { position: relative; width: 52px; height: 32px; flex: none; cursor: pointer; }
.m3-switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; }
.m3-switch .track {
  position: absolute; inset: 0; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  border: 2px solid var(--md-sys-color-outline);
  transition: background-color .15s, border-color .15s;
}
.m3-switch .thumb {
  position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--md-sys-color-outline);
  transition: transform .15s, background-color .15s, width .15s, height .15s, top .15s;
}
.m3-switch input:checked + .track { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.m3-switch input:checked ~ .thumb {
  transform: translateX(20px); background: var(--md-sys-color-on-primary);
  width: 24px; height: 24px; top: 4px; left: 4px;
}

/* ============ Text fields (M3 outlined) ============ */
.tf {
  position: relative; display: inline-flex; align-items: center;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  height: 44px; padding: 0 14px; min-width: 130px;
  background: transparent;
}
.tf input {
  border: none; outline: none; background: none; width: 100%;
  font-family: inherit; font-size: 14px; color: var(--md-sys-color-on-surface);
}
.tf label {
  position: absolute; top: -8px; left: 10px; padding: 0 4px;
  background: var(--md-sys-color-surface-container-lowest);
  font-size: 11px; color: var(--md-sys-color-on-surface-variant);
}
.tf.focused { border: 2px solid var(--md-sys-color-primary); }
.tf.focused label { color: var(--md-sys-color-primary); }
.tf.on-surface label { background: var(--md-sys-color-surface); }

/* Select (dropdown) */
.tf.select { cursor: pointer; min-width: 200px; justify-content: space-between; }
.tf.select .material-symbols-outlined { color: var(--md-sys-color-on-surface-variant); }

/* ============ Banners ============ */
.banner {
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 14px 16px;
}
.banner .banner-icon { flex: none; display: flex; align-items: center; gap: 8px; }
.banner .banner-body { flex: 1; min-width: 0; }
.banner .banner-title { font-size: 15px; font-weight: 500; margin-bottom: 2px; }
.banner .banner-text { font-size: 12.5px; line-height: 18px; color: var(--md-sys-color-on-surface-variant); }
.banner.info { background: color-mix(in srgb, var(--md-sys-color-secondary-container) 55%, var(--md-sys-color-surface-container-lowest)); }
.banner.info .banner-icon { color: var(--md-sys-color-on-surface-variant); }
.banner.warning { background: var(--md-sys-color-surface-container-low); padding: 36px 30px; border-radius: 16px; }
.banner.warning .btn.filled { height: 52px; padding: 0 26px; font-size: 15px; }
.banner.info { padding: 30px 30px; border-radius: 16px; }
.banner .banner-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.banner .banner-text { font-size: 15px; line-height: 22px; }
.banner .err-badge {
  width: 32px; height: 32px; border-radius: 50%; background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error); display: grid; place-items: center;
}
.banner .err-badge .material-symbols-outlined { font-size: 18px; }

/* Values-selected bar */
.select-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 8px 8px 8px 16px; margin: 4px 0 0;
}
.select-bar .count { font-size: 15px; font-weight: 600; }
.select-bar .grow { flex: 1; }

/* ============ Dialogs ============ */
.scrim {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--md-sys-color-scrim) 32.2%, transparent);
  display: none; align-items: center; justify-content: center; z-index: 50;
}
.scrim.open { display: flex; }
.dialog {
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: 28px;
  max-width: 560px; width: calc(100% - 64px);
  padding: 24px;
  overflow: hidden;
}
.dialog.wide { max-width: 918px; width: 918px; padding: 0; align-self: flex-start; margin-top: 262px; }
.dialog.wide .dlg-band { background: var(--md-sys-color-surface-container); padding: 24px 27px 20px; }
.dialog.wide .dlg-band .dlg-title { font-size: 24px; font-weight: 400; margin-bottom: 8px; }
.dialog.wide .dlg-band .dlg-body { font-size: 15px; }
.dialog.wide .dlg-content { padding: 40px 27px 24px; }
.dialog.wide .cols { grid-template-columns: 433px 1fr; gap: 27px; margin-top: 0; }
.dialog.wide .dlg-actions { padding: 0 23px 24px; margin-top: 10px; }
.dialog.wide .dlg-actions .btn.filled { height: 48px; padding: 0 26px; font-size: 15px; }
.dialog.wide .dlg-actions .btn.text { font-size: 15px; }
.dialog .dlg-title { font-size: 22px; line-height: 28px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.dialog .dlg-body { font-size: 13.5px; color: var(--md-sys-color-on-surface-variant); line-height: 19px; }
.dialog .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.dialog .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 18px; }
.dialog .col-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid var(--md-sys-color-outline-variant); margin-bottom: 12px; }
.dialog .col-head .material-symbols-outlined { font-size: 19px; }
.dialog .kv-label { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.dialog .rm-row {
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
  border-radius: var(--md-sys-shape-corner-small); padding: 10px 14px; font-size: 15px; min-height: 52px;
}
.dialog .byline { margin-top: 10px; font-size: 12px; color: var(--md-sys-color-on-surface-variant); }

/* ============ Slide-in info panel (global — pushes the current screen's content in from the right) ============ */
.info-panel {
  width: 0; flex: none; overflow: hidden;
  transition: width .25s ease, margin-right .25s ease;
  border: 1px solid transparent;
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-large);
  margin: 0 0 24px 0; /* 24px clear space below; 24px right added when open */
  /* sticks 24px from the top of the screen once scrolled to; zero height while closed
     so it never stretches the page when hidden */
  position: sticky; top: 24px; align-self: flex-start; height: 0;
}
.info-panel.open { width: 440px; margin-right: 24px; border-color: var(--md-sys-color-outline-variant); } /* height set by syncSidePanels */
.info-panel .ip-inner { width: 440px; padding: 16px 25px 24px; display: flex; flex-direction: column; }
.info-panel .ip-head { display: flex; align-items: center; margin-bottom: 34px; }
.info-panel .ip-head .grow { flex: 1; }
.info-panel h2 { font-size: 28px; font-weight: 400; letter-spacing: 0; margin: 0 0 30px; }
.info-panel .ip-section { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--md-sys-color-on-surface); margin: 0 0 16px; }
.info-panel .ip-section .material-symbols-outlined { font-size: 20px; color: var(--md-sys-color-on-surface); }
.info-panel .ip-card {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium); padding: 18px 20px;
  margin-bottom: 36px;
}
.info-panel .ip-card .jd {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--md-sys-color-secondary-container);
  display: grid; place-items: center; font-size: 13px; font-weight: 500;
  color: var(--md-sys-color-on-secondary-container);
}
/* Name/ID and DOB share a baseline grid: fixed 110px left-aligned DOB column,
   so the DOB block never moves regardless of value length */
.info-panel .ip-card .pc-grid {
  flex: 1; display: grid; grid-template-columns: 1fr 110px;
  column-gap: 16px; row-gap: 4px; align-items: baseline; text-align: left;
}
.info-panel .ip-card .nm { font-size: 16px; font-weight: 500; }
.info-panel .ip-card .id { font-size: 14px; color: var(--md-sys-color-on-surface-variant); }
.info-panel .ip-card .dob-l { font-size: 12px; font-weight: 500; color: var(--md-sys-color-on-surface-variant); }
.info-panel .ip-card .dob-v { font-size: 15px; font-weight: 500; color: var(--md-sys-color-on-surface); }
.info-panel .ip-study { font-size: 16px; font-weight: 600; margin: 6px 0 28px; }
.info-panel .sponsor { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; }
.info-panel .sponsor .r-logo {
  width: 56px; height: 56px; border-radius: var(--md-sys-shape-corner-small);
  background: #1D4ED8; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 28px; font-style: italic;
}
.info-panel .sp-label { font-size: 13px; color: var(--md-sys-color-on-surface-variant); margin-bottom: 4px; }
.info-panel .sp-name { font-size: 20px; }
.info-panel .kv { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); font-size: 13px; }
.info-panel .kv:first-of-type { border-top: none; }
.info-panel .kv .k { color: var(--md-sys-color-on-surface-variant); font-size: 13px; }
.info-panel .kv .v { font-size: 16px; color: var(--md-sys-color-on-surface); font-variant-numeric: tabular-nums; }

/* ============ Studies screen ============ */
.studies-head {
  display: flex; justify-content: flex-end; align-items: center;
  background: var(--md-sys-color-surface-container-low);
  margin: 0 -23px 25px; padding: 21px 25px;
  border-radius: 11px 11px 0 0;
}
.study-card {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 26px 24px 28px; margin: 0 0 24px;
  transition: border-color .15s, background-color .15s;
  cursor: pointer;
}
.study-card:hover, .study-card.sim-hover {
  border: 2px solid var(--md-sys-color-primary);
  padding: 25px 23px 27px;
  background: var(--archer-card-hover);
}
.study-card h3 { font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: 0.62px; margin: 0 0 28px 2px; }
.study-card .fields { display: flex; align-items: center; gap: 0; min-height: 60px; }
.study-card .f { flex: 0 1 384px; min-width: 130px; }
.study-card .f.imaging { flex: 0 1 auto; min-width: 90px; }
.study-card .f .fl { font-size: 16px; line-height: 24px; color: var(--md-sys-color-on-surface-variant); margin-bottom: 8px; }
.study-card .f .fv { font-size: 22px; line-height: 28px; letter-spacing: 0; }
.study-card .grow { flex: 1; }

/* ---- Material Web component sizing (Studies screen, per Figma export) ---- */
.link-study-btn {
  letter-spacing: -0.3px;
  --md-outlined-button-container-height: 56px;
  --md-outlined-button-label-text-size: 16px;
  --md-outlined-button-label-text-font: 'Inter';
  --md-outlined-button-label-text-weight: 500;
  --md-outlined-button-label-text-color: var(--md-sys-color-on-surface);
  --md-outlined-button-hover-label-text-color: var(--md-sys-color-on-surface);
  --md-outlined-button-focus-label-text-color: var(--md-sys-color-on-surface);
  --md-outlined-button-pressed-label-text-color: var(--md-sys-color-on-surface);
  --md-outlined-button-icon-color: var(--md-sys-color-on-surface);
  --md-outlined-button-hover-icon-color: var(--md-sys-color-on-surface);
  --md-outlined-button-icon-size: 20px;
  --md-outlined-button-leading-space: 22px;
  --md-outlined-button-trailing-space: 26px;
  --md-outlined-button-with-leading-icon-leading-space: 28px;
  --md-outlined-button-with-leading-icon-trailing-space: 27px;
}
.select-btn {
  width: 147px;
  letter-spacing: -0.35px;
  --md-filled-button-container-height: 56px;
  --md-filled-button-label-text-size: 16px;
  --md-filled-button-label-text-font: 'Inter';
  --md-filled-button-label-text-weight: 500;
  --md-filled-button-leading-space: 27px;
  --md-filled-button-trailing-space: 27px;
}
.edit-btn {
  --md-outlined-icon-button-container-width: 62px;
  --md-outlined-icon-button-container-height: 56px; /* identical height to the Select Study CTA */
  --md-outlined-icon-button-icon-size: 22px;
  --md-outlined-icon-button-outline-color: var(--md-sys-color-outline-variant);
  margin-left: 0;
}
.edit-btn md-icon { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.refresh-btn {
  --md-filled-tonal-icon-button-container-color: var(--md-sys-color-primary-container);
  --md-filled-tonal-icon-button-icon-color: var(--md-sys-color-on-primary-container);
  --md-filled-tonal-icon-button-container-width: 40px;
  --md-filled-tonal-icon-button-container-height: 40px;
  --md-filled-tonal-icon-button-icon-size: 22px;
}
md-icon { font-family: 'Material Symbols Outlined'; }
.head-outlined-btn {
  --md-outlined-button-container-height: 56px;
  --md-outlined-button-label-text-size: 16px;
  --md-outlined-button-label-text-font: 'Inter';
  --md-outlined-button-label-text-color: var(--md-sys-color-on-surface);
  --md-outlined-button-hover-label-text-color: var(--md-sys-color-on-surface);
  --md-outlined-button-icon-size: 20px;
  --md-outlined-button-outline-color: var(--md-sys-color-outline-variant);
}
.head-filled-btn {
  --md-filled-button-container-height: 56px;
  --md-filled-button-label-text-size: 16px;
  --md-filled-button-label-text-font: 'Inter';
  --md-filled-button-icon-size: 20px;
}
md-filled-button, md-outlined-button, md-text-button,
md-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-filled-tonal-button {
  flex: none;
  min-width: fit-content;
  --md-filled-button-hover-container-elevation: 0;
  --md-filled-button-pressed-container-elevation: 0;
  --md-filled-button-container-elevation: 0;
  --md-filled-tonal-button-container-elevation: 0;
  --md-filled-tonal-button-hover-container-elevation: 0;
  --md-filled-tonal-button-pressed-container-elevation: 0;
}
/* No shadows anywhere: suppress every M3 elevation surface */
md-elevation { opacity: 0 !important; }
md-switch { --md-switch-handle-elevation: 0; --md-switch-hover-handle-elevation: 0; --md-switch-pressed-handle-elevation: 0; }

/* ============ Visit accordions ============ */
.visits-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.filter-bar { display: flex; gap: 24px; padding: 16px 25px 25px; flex: none; }
.filter-bar .fb-item {
  width: 390px; min-width: 0;
  --md-outlined-select-text-field-container-shape: 4px;
  --md-outlined-text-field-container-shape: 4px;
  --md-outlined-field-outline-color: var(--md-sys-color-outline-variant);
  --md-outlined-select-text-field-outline-color: var(--md-sys-color-outline-variant);
  --md-outlined-text-field-label-text-font: 'Inter';
  --md-outlined-select-text-field-label-text-font: 'Inter';
}
.vd-editor { display: inline-flex; align-items: center; gap: 12px; }
.vd-editor .vd-end { margin-left: 2px; }
.vd-editor .vd-label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--md-sys-color-on-surface); white-space: nowrap; }
.vd-editor .vd-label .material-symbols-outlined { font-size: 20px; }
.vd-editor md-outlined-text-field {
  width: 173px;
  --md-outlined-text-field-container-shape: 4px;
  --md-outlined-text-field-label-text-font: 'Inter';
  --md-outlined-text-field-input-text-font: 'Inter';
}
.visit-head .vd-editor .icon-btn { width: 48px; height: 48px; border-radius: 50%; }
.visit-head .vd-editor .icon-btn .material-symbols-outlined { font-size: 22px; }
.vd-editor .vd-cancel { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.vd-editor .vd-cancel:hover { background: var(--md-sys-color-surface-container-highest); }
.vd-editor .icon-btn.filled:disabled { background: var(--md-sys-color-surface-container-highest); color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); cursor: default; }
.avd-btn {
  --md-filled-tonal-button-container-color: var(--md-sys-color-secondary-container);
  --md-filled-tonal-button-label-text-color: var(--md-sys-color-on-secondary-container);
  --md-filled-tonal-button-icon-color: var(--md-sys-color-on-secondary-container);
  --md-filled-tonal-button-container-height: 52px;
  --md-filled-tonal-button-label-text-size: 15px;
  --md-filled-tonal-button-label-text-weight: 600;
  --md-filled-tonal-button-label-text-font: 'Inter';
  --md-filled-tonal-button-icon-size: 20px;
}
.sort-ico { font-size: 16px; vertical-align: -3px; color: var(--md-sys-color-on-surface); }
.visit-section { margin: 0 -23px; }
.visit-section + .visit-section { border-top: 1px solid var(--md-sys-color-outline-variant); }
/* Card hugs the last accordion: no stretch, no bottom padding, card edge is the closing line */
.visits-col .page-card { min-height: 0; padding-bottom: 0; }
.visits-col .visit-section:last-of-type { border-bottom: none; }
.visit-section .visit-head { cursor: pointer; }
.visit-section .chev { transition: transform .15s; }
.visit-section.collapsed .chev { transform: rotate(180deg); }
.visit-section.collapsed .data-table { display: none; }
.visit-head { display: flex; align-items: center; gap: 22px; padding: 0 23px 0 33px; height: 99px; }
.visit-head .grow { flex: 1; }
.visit-head h3 { font-size: 20px; font-weight: 400; letter-spacing: 0.1px; color: var(--md-sys-color-on-secondary-container); }
.visit-head .icon-btn { background: var(--md-sys-color-surface-container); width: 30px; height: 30px; }
.visit-head .icon-btn .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20; }
.select-dates-btn {
  width: 176px;
  --md-outlined-button-container-height: 56px;
  --md-outlined-button-label-text-size: 16px;
  --md-outlined-button-label-text-font: 'Inter';
  --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-button-hover-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-button-focus-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-button-pressed-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-button-icon-color: var(--md-sys-color-on-surface);
  --md-outlined-button-hover-icon-color: var(--md-sys-color-on-surface);
  --md-outlined-button-icon-size: 20px;
  --md-outlined-button-outline-color: var(--md-sys-color-outline-variant);
  --md-outlined-button-with-leading-icon-leading-space: 24px;
  --md-outlined-button-with-leading-icon-trailing-space: 24px;
}

/* ============ Wizard (full-screen) ============ */
.wizard { position: fixed; inset: 0; z-index: 20; flex-direction: column; background: var(--archer-page-bg); }
.wizard.active { display: flex; }
.wiz-content-pad { padding: 40px 48px 24px; }
.wiz-tbl-card { border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; overflow: hidden; margin-top: 14px; }
.wiz-tbl-card .data-table th { background: #EFF2F8; padding: 18px 2px; font-weight: 600; font-size: 15px; }
.wiz-tbl-card .data-table th:first-child, .wiz-tbl-card .data-table td:first-child { padding-left: 76px; }
.wiz-tbl-card .data-table td { height: 67px; }
.wiz-tbl-card .radio-cell { padding-left: 32px !important; width: 76px; }
.ehr-chip.current { background: #DCE4F9; color: var(--md-sys-color-on-secondary-container); }
.ehr-chip.exported-chip { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.wiz-tbl-card tr.selected-row td { background: #F7FAFE; }
.wiz-top {
  position: relative;
  display: flex; align-items: center; height: 127px; padding: 0 36px 0 48px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant); flex: none;
}
.wiz-top h1 { font-size: 30px; font-weight: 400; letter-spacing: -0.9px; flex: 1; }
.wiz-top .step { position: absolute; left: 50%; transform: translateX(-50%); font-size: 20px; }
.wiz-top .step b { font-weight: 600; }
.wiz-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.wiz-stepper { width: 300px; flex: none; padding: 32px 8px 24px 28px; }
.wiz-stepper h4 { font-size: 14px; font-weight: 600; line-height: 20px; margin-bottom: 22px; }
.step-item { display: flex; gap: 12px; position: relative; padding-bottom: 26px; }
.step-item:not(:last-child)::before {
  content: ""; position: absolute; left: 9px; top: 24px; bottom: 4px; width: 2px;
  background: var(--md-sys-color-outline-variant);
}
.step-item .dot { z-index: 1; }
.step-item .s-name { font-size: 16px; }
.step-item .s-sub { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.step-item.active .s-name { color: var(--md-sys-color-primary); }
.step-item.done .s-name { color: var(--md-sys-color-on-surface); }
.step-item.active .s-name { color: var(--md-sys-color-secondary); font-weight: 500; }
.step-item.todo .s-name { color: var(--md-sys-color-on-surface-variant); }
.step-done-dot {
  width: 20px; height: 20px; border-radius: 50%; background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary); display: grid; place-items: center;
}
.step-done-dot .material-symbols-outlined { font-size: 13px; font-variation-settings: 'FILL' 1, 'wght' 700; }
.wiz-content { flex: 1; min-width: 0; overflow-y: auto; padding: 28px 40px 24px; }
.wiz-content h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.wiz-content .sub { font-size: 14px; color: var(--md-sys-color-on-surface-variant); margin-bottom: 26px; }
.wiz-content .tbl-label { font-size: 13px; font-weight: 600; margin: 24px 0 0; }
.wiz-content .data-table th:first-child, .wiz-content .data-table td:first-child { padding-left: 89px; }
.wiz-content .data-table tr.selected-row td { background: #EAF2FC; }
.wiz-card {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 16px 18px; margin-bottom: 20px;
}
.wiz-card .wc-title { font-size: 15px; font-weight: 500; margin-bottom: 12px; }
.wiz-foot {
  flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  padding: 19px 25px 20px; border-top: 1px solid var(--md-sys-color-outline-variant);
}
.wiz-foot .btn.filled { height: 48px; padding: 0 24px; font-size: 15px; }
.wiz-foot .btn.text { font-size: 15px; }
.ehr-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-highest);
  font-size: 12px; font-weight: 500; margin-left: 8px;
}
.ehr-chip.suggested { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.ehr-chip.current { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* Linking complete screen */
.lc-center { max-width: 838px; margin: 0 auto; width: 100%; }
.lc-title { text-align: center; font-size: 24px; font-weight: 400; margin: 26px 0 40px; }
.lc-banner {
  display: flex; gap: 26px; align-items: flex-start;
  background: #EDF2FC; border-radius: 20px; padding: 28px 30px 34px;
  margin-bottom: 26px;
}
.lc-banner .lcb-icon {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: #C9D9F8; color: var(--md-sys-color-primary);
  display: grid; place-items: center;
}
.lc-banner .lcb-icon .material-symbols-outlined { font-size: 30px; font-variation-settings: 'FILL' 1; }
.lc-banner h3 { font-size: 22px; font-weight: 400; margin: 6px 0 16px; }
.lc-banner p { font-size: 15px; line-height: 24px; color: var(--md-sys-color-on-surface-variant); }
.lc-item {
  display: flex; align-items: flex-start;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 12px; padding: 26px 28px 30px;
  margin-bottom: 24px;
}
.lc-item .grow { flex: 1; }
.lc-item h3 { font-size: 20px; font-weight: 500; margin-bottom: 22px; }
.lc-item .lc-sub { font-size: 16px; color: var(--md-sys-color-on-surface-variant); }
.lc-item .btn.text { font-size: 15px; height: 36px; padding: 0 10px; }

/* ============ AE empty state ============ */
.ae-empty { display: flex; flex-direction: column; align-items: center; padding: 40px 0 60px; }
.ae-empty .art {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--md-sys-color-surface-container-high);
  display: grid; place-items: center; margin-bottom: 16px;
  color: var(--md-sys-color-on-surface-variant);
}
.ae-empty h2 { font-size: 22px; font-weight: 400; margin-bottom: 4px; }
.ae-empty .qg { font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-bottom: 34px; }
.ae-empty .sd-block { width: 420px; max-width: 90%; }
.ae-empty .sd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ae-empty .sd-head .grow { flex: 1; }
.ae-empty .dates { display: flex; gap: 12px; margin-bottom: 14px; }
.ae-empty .dates .tf { flex: 1; }
.ae-empty .only { display: flex; align-items: center; gap: 10px; font-size: 13.5px; margin-bottom: 22px; }
.ae-empty .btn { width: 100%; }

/* Scrollbars, focus */
/* Global scrollbars match the form-sidebar thin style (6px, outline-variant thumb) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-outline); }
::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }

.crumb-link, .crumb-link:hover, .crumb-link:focus, .crumb-link:active { text-decoration: none !important; }

/* ---- Docked M3 date picker ---- */
.adp {
  position: fixed; z-index: 1000; width: 360px; box-sizing: border-box;
  background: #EDF1F9; border-radius: 16px; padding: 6px 4px 0;
  user-select: none;
}
[data-theme="dark"] .adp { background: var(--md-sys-color-surface-container-high); }
.adp.hidden { display: none; }
.adp-head { display: flex; justify-content: space-between; padding: 8px 4px 10px; }
.adp-nav { display: flex; align-items: center; }
.adp-ib { border: none; background: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--md-sys-color-on-surface-variant); }
.adp-ib:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.adp-ib:disabled { opacity: 0; pointer-events: none; }
.adp-ib .material-symbols-outlined { font-size: 22px; }
.adp-dd { border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; font-family: inherit; font-size: 15px; font-weight: 500; color: var(--md-sys-color-on-surface); padding: 6px 4px; border-radius: 8px; }
.adp-dd:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.adp-dd.dim { color: var(--md-sys-color-on-surface-variant); opacity: .6; }
.adp-dd .material-symbols-outlined { font-size: 20px; }
.adp-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 8px; }
.adp-wd { height: 40px; display: grid; place-items: center; font-size: 14px; color: var(--md-sys-color-on-surface); }
.adp-day { width: min(40px, 100%); height: 40px; margin: 3px auto; border: none; background: none; font-family: inherit; font-size: 15px; color: var(--md-sys-color-on-surface); cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.adp-day:hover:not(.other):not(.sel) { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.adp-day.other { color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent); cursor: default; }
.adp-day.sel { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.adp-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 12px 12px; }
.adp-tb { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--md-sys-color-primary); padding: 8px 12px; border-radius: 18px; }
.adp-tb:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.adp-list { max-height: 340px; overflow-y: auto; border-top: 1px solid var(--md-sys-color-outline-variant); margin-top: 2px; padding-bottom: 8px; border-radius: 0 0 16px 16px; }
.adp-list::-webkit-scrollbar { width: 6px; }
.adp-list::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: 3px; }
.adp-item { display: flex; align-items: center; gap: 14px; width: 100%; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 16px; color: var(--md-sys-color-on-surface); height: 48px; padding: 0 16px; text-align: left; }
.adp-item:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); }
.adp-item.sel { background: color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent); }
.adp-item .chk { font-size: 20px; width: 22px; }

/* ---- Rail sizing (consolidated, per design; keep LAST in file) ---- */
.rail .menu-btn { width: 48px; height: 48px; }
.rail .menu-btn .material-symbols-outlined { font-size: 28px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
#themeToggle { width: 48px; height: 48px; }
#themeToggle .material-symbols-outlined { font-size: 27px; }
.rail .med { gap: 4px; font-size: 14px; font-weight: 500; letter-spacing: .4px; }
.rail .med .material-symbols-outlined { font-size: 27px; }
.rail .avatar { width: 40px; height: 40px; font-size: 15px; font-weight: 500; }
.rail .rail-bottom { gap: 28px; }

/* ---- Bottom export bar ---- */
/* Spacer before the bar: 48px total gap (16 flex-gap x2 + 16 basis) after the last card,
   grows to push the bar to the screen bottom when content is short. Bar itself is in normal flow. */
.eb-spacer { flex: 1 0 16px; }
.export-bar .grow { flex: 1; }
.export-bar {
  display: flex; align-items: center; gap: 18px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 28px; padding: 12px 14px 12px 30px;
}
[data-theme="dark"] .export-bar { background: var(--md-sys-color-surface-container-low); }
.export-bar .eb-label { font-size: 15px; color: var(--md-sys-color-on-surface); margin-right: 14px; }
.export-bar .eb-pill {
  display: inline-flex; align-items: center; justify-content: space-between;
  width: 296px; height: 44px; padding: 0 18px; border-radius: 8px;
  background: #EDF1FA; font-size: 15px; color: var(--md-sys-color-on-surface);
}
.export-bar .eb-pill b { font-weight: 500; }
.export-bar .eb-pill.selected { background: #EDF1FA; color: var(--md-sys-color-primary); }
.export-bar .eb-pill.selected b { color: var(--md-sys-color-primary); }
[data-theme="dark"] .export-bar .eb-pill { background: var(--md-sys-color-surface-container-high); }
[data-theme="dark"] .export-bar .eb-pill.selected { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-primary); }
.export-bar .eb-export {
  --md-filled-button-container-height: 56px;
  --md-filled-button-label-text-size: 16px;
  --md-filled-button-label-text-font: 'Inter';
  --md-filled-button-leading-space: 44px;
  --md-filled-button-trailing-space: 44px;
}

/* vd-editor CTAs: primary filled tick, standard tonal cross (must outrank .visit-head .icon-btn) */
.visit-head .vd-editor .icon-btn.vd-confirm:not(:disabled) { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.visit-head .vd-editor .icon-btn.vd-cancel { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }

/* ============ Card/list view switch + card view of table data ============ */
.view-switch { display: inline-flex; gap: 8px; }
.view-switch .vs-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--md-sys-color-outline-variant); background: transparent;
  display: grid; place-items: center; cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
}
.view-switch .vs-btn .material-symbols-outlined { font-size: 20px; }
.view-switch .vs-btn.active { background: #E9EFFB; border-color: transparent; color: var(--md-sys-color-primary); }
[data-theme="dark"] .view-switch .vs-btn.active { background: var(--md-sys-color-secondary-container); }

.card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 24px 24px; }
.include-row .grow { flex: 1; }
.d-card { border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; background: var(--md-sys-color-surface-container-lowest); }
.d-card .d-card-body {
  display: flex; align-items: flex-start; gap: 20px; padding: 22px 24px;
  background: #F8FAFD; border-radius: 12px 12px 0 0; /* data panel surface, matches list-view value rows */
}
[data-theme="dark"] .d-card .d-card-body { background: var(--md-sys-color-surface-container-low); }
.d-card .d-card-body > md-checkbox { margin-top: 2px; flex: none; }
/* Column-flow grid: all labels share row 1, all values share row 2 — the label row grows to the
   tallest label, so values always start at the same y no matter how many lines labels wrap to */
.d-card .d-cells {
  flex: 1; display: grid; grid-auto-flow: column;
  grid-template-rows: auto auto; grid-auto-columns: minmax(0, 1fr); column-gap: 16px;
}
.d-card .d-cell { display: contents; }
.d-card .d-cell .lbl { font-size: 14px; line-height: 19px; color: var(--md-sys-color-on-surface-variant); padding-bottom: 8px; }
.d-card .d-cell .val { font-size: 16px; letter-spacing: .2px; font-weight: 400; color: var(--md-sys-color-on-surface); }
.d-card .d-card-foot {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--md-sys-color-outline-variant); padding: 12px 24px;
  min-height: 56px;
}
.d-card .d-status { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: var(--md-sys-color-on-surface); }
.d-card .d-status .material-symbols-outlined { font-size: 18px; font-variation-settings: 'wght' 600; color: var(--md-sys-color-primary); }
.d-card .d-status.partial .material-symbols-outlined { color: #E8710A; }
.d-card .d-status.failed .material-symbols-outlined { color: #D93025; font-variation-settings: 'FILL' 1; }
.d-card .d-status.unknown .material-symbols-outlined { color: var(--md-sys-color-on-surface-variant); }
.d-card .d-status.muted { color: var(--md-sys-color-on-surface-variant); font-weight: 400; }
.d-card .d-dot { color: var(--md-sys-color-on-surface-variant); }
.d-card .d-when { color: var(--md-sys-color-on-surface); font-size: 15px; }
.d-card .d-review {
  background: #EFF1F6; border: none; border-radius: var(--md-sys-shape-corner-full);
  height: 34px; padding: 0 16px; font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--md-sys-color-on-surface); cursor: pointer;
}
[data-theme="dark"] .d-card .d-review { background: var(--md-sys-color-surface-container-high); }
.d-card .d-card-foot .grow { flex: 1; }