/* ============================================================
   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: #DEE0E8; /* JJ: every grey border identical (= outline-variant); lightened 20 Oct — #C4C6D0 read too heavy */
  --md-sys-color-outline-variant: #DEE0E8;
  --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: 12px; 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;
  /* rail · main · info panel · new-study panel · EDC panel (closed panels collapse to 0) */
  grid-template-columns: 95px 1fr auto auto auto;
  /* fluid: the layout fills whatever window it gets (designed at 1920, holds down
     to ~1280 — narrower than that scrolls sideways rather than breaking) */
  width: 100vw; min-width: 1280px;
  height: 100vh;
  background: var(--archer-page-bg);
}
html, body { overflow: hidden; overflow-x: auto; }

/* 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: 12px; 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.
   The native scrollbar is hidden so content keeps its full-width position; a custom overlay
   thumb (#pageScrollbar) is drawn over the right padding instead — zero layout shift. */
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow-y: auto; }
.main::-webkit-scrollbar { width: 0; height: 0; }
.page-scrollbar {
  position: fixed; right: 5px; width: 6px; border-radius: 3px;
  background: var(--md-sys-color-outline-variant);
  z-index: 90; pointer-events: none; transition: opacity .15s;
}
.page-scrollbar.hidden { opacity: 0; }

/* 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; }
.topbar .refresh-btn { margin-left: 10px; }
.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; }
/* active (panel open): M3 neutral tonal — surface-container-highest circle
   with an on-surface filled icon, no colour accent */
.info-btn.on {
  background: var(--md-sys-color-surface-container-highest); border-radius: 50%;
  --md-outlined-icon-button-outline-color: transparent;
  --md-outlined-icon-button-icon-color: var(--md-sys-color-on-surface);
}
.info-btn.on md-icon { font-variation-settings: 'FILL' 1, '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: 12px; 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;
  /* sidebar labels never wrap — long question titles truncate with an ellipsis */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qg-item .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qg-wrap.collapsed .qg-child-plain { display: none; }
/* the defined accordion pattern: the keyboard chevron points down
   when collapsed and up when open */
.qg-item .arrow { transition: transform .15s; }
.qg-wrap:not(.collapsed) .qg-item .arrow { transform: rotate(180deg); }
.qg-wrap.collapsed .qg-item .arrow { transform: none; }
.qg-child-plain:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent); }

.dates-fields { display: flex; gap: 13px; }
.dates-fields .tf { width: 149px; min-width: 0; height: 50px; flex: none; }
.side-panel {
  width: var(--side-w, 360px); 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;
  /* open/close is a pure slide: the panel keeps its width and internal layout throughout */
  transition: margin-left .25s ease;
}
.split { overflow-x: clip; }
/* 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: 14px; 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: 14px; 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;
  font-family: inherit; /* <button> chips must not fall back to the UA's Arial */
}
.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; }
/* visit-level statuses (Exported / Not Exported / Export Changed) */
.status-chip.not-exported { border-color: #2961DB; }
.status-chip.not-exported .material-symbols-outlined { color: #2961DB; }
.status-chip.export-changed { border-color: #D93025; }
.status-chip.export-changed .material-symbols-outlined { color: #D93025; }
.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: 14px; 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 */
/* nested radius rule: the wrap's corner radius is the inner pill's
   22px plus the 8px padding between them, so the curves run
   concentric (outer = inner + gap). */
.qg-wrap { background: #F7F9FC; border-radius: 30px; 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: 22px; /* same pill as the selected state */
  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;
}
.qg-item .arrow { font-size: 20px; }
.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 24px 28px; width: calc(100% - 48px); }
/* inside a .table-scroll wrapper the wrapper already provides the 24px inset
   (meds pattern) — the table fills it edge to edge */
.qcard.formlevel .table-scroll .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 */
#aeTableWrap:not(.hidden) { display: flex; flex-direction: column; gap: 12px; }
.ae-qcard > :not(.qcard-head) { margin-left: 24px; margin-right: 24px; }
.ae-qcard > .banner { margin-top: 20px; }
.ae-qcard > .data-table { width: calc(100% - 48px); }
.ae-qcard > :last-child { margin-bottom: 24px; }
.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: 14px; 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: 14px; 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: 190px; text-align: right; }
.pill-row .ps-col { width: 190px; display: flex; justify-content: flex-end; color: var(--md-sys-color-on-surface-variant); }
.pill-row .ps-chip-col { width: 190px; display: flex; justify-content: flex-end; }
/* uniform chip width so the Review buttons line up whatever the status says */

.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: 14px; 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 ============ */
/* every data table is its own bounded tonal surface: hairline border, rounded,
   tonal header — clearly separated from the card padding around it */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table:not(.plain) {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px; overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest);
}
.data-table th {
  text-align: left; font-size: 16px; font-weight: 600; letter-spacing: .1px;
  color: var(--md-sys-color-on-surface); padding: 31px 14px 32px;
  background: var(--md-sys-color-surface-container-low);
  white-space: nowrap;
}
.data-table td {
  padding: 0 14px; 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: 24px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 24px; }
.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; }
/* the visits screen keeps its original full-bleed tables — the bounded surface
   applies to form-level tables (vitals grid, medications), not the visit lists */
.visits-col .data-table { border: none; border-radius: 0; background: none; }
.visits-col .data-table th, .visits-col .data-table td { padding-left: 2px; padding-right: 2px; }
.visits-col .data-table th:first-child, .visits-col .data-table tr:not(.pn-panel-row) > td:first-child { padding-left: 77px; }
.visits-col .data-table th:last-child, .visits-col .data-table td:last-child { padding-right: 2px; }

/* tables sit on their own bounded surface, inset from the card padding */
.data-table.bleed { margin: 0 24px 28px; width: calc(100% - 48px); }
/* Column titles align to the top of the header band; select-all checkbox stays centred */
/* the selector column is fixed; the data columns share the width evenly instead
   of being crushed against the right edge by the inline width:100% first cell */
.data-table.wrap { table-layout: fixed; }
.data-table.wrap th:first-child { width: 56px !important; }
.data-table.wrap th { white-space: normal; font-weight: 500; padding: 18px 14px; vertical-align: middle; }
.data-table.wrap th:first-child { 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); }
/* the visits form lists right-align their trailing action (⋮) column; bounded
   form tables keep values under their headers with the standard 24px edge inset */
.visits-col .data-table td:last-child { text-align: right; padding-right: 10px; }
.data-table tr:last-child td { border-bottom: none; }
/* when filtering hides trailing rows, the last VISIBLE row drops its border too */
.data-table tr.last-visible td { border-bottom: none; }
/* row hover mirrors the study-card hover: blue outline + the same hover wash */
.data-table tr.row-hover:hover td {
  background: var(--archer-card-hover);
  box-shadow: inset 0 1px 0 0 var(--md-sys-color-primary), inset 0 -1px 0 0 var(--md-sys-color-primary);
}
.data-table tr.row-hover:hover td:first-child {
  box-shadow: inset 1px 0 0 0 var(--md-sys-color-primary), inset 0 1px 0 0 var(--md-sys-color-primary), inset 0 -1px 0 0 var(--md-sys-color-primary);
}
.data-table tr.row-hover:hover td:last-child {
  box-shadow: inset -1px 0 0 0 var(--md-sys-color-primary), inset 0 1px 0 0 var(--md-sys-color-primary), inset 0 -1px 0 0 var(--md-sys-color-primary);
}
/* the row outline and wash honour the same corner radius as the card hover they mirror */
.data-table tr.row-hover:hover td:first-child,
.data-table tr.selected-row td:first-child {
  border-top-left-radius: var(--md-sys-shape-corner-medium);
  border-bottom-left-radius: var(--md-sys-shape-corner-medium);
}
.data-table tr.row-hover:hover td:last-child,
.data-table tr.selected-row td:last-child {
  border-top-right-radius: var(--md-sys-shape-corner-medium);
  border-bottom-right-radius: var(--md-sys-shape-corner-medium);
}
.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: 12px; 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: flex-start; gap: 16px;
  border-radius: 16px;
  padding: 28px 30px;
}
.banner .banner-icon { flex: none; display: flex; align-items: center; gap: 10px; min-height: 26px; }
.banner .banner-icon > .material-symbols-outlined { font-size: 24px; }
.banner .banner-body { flex: 1; min-width: 0; }
.banner .banner-title { font-size: 18px; font-weight: 600; line-height: 26px; margin-bottom: 6px; }
.banner .banner-text { font-size: 15px; line-height: 24px; color: var(--md-sys-color-on-surface-variant); }
.banner > .btn { align-self: center; }
.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); }
.banner.warning .btn.filled { height: 48px; padding: 0 24px; font-size: 15px; }
.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: 600px; width: calc(100% - 64px);
  padding: 28px;
  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: 20px; font-weight: 500; line-height: 28px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.dialog .dlg-title.multiline { align-items: flex-start; }
.dlg-title .dlg-icon { font-size: 28px; flex: none; }
.dlg-title .dlg-icon.warn { color: #E8710A; }
.dlg-title .dlg-icon.info { color: var(--md-sys-color-primary); }
.dlg-title .err-badge.dlg-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); display: grid; place-items: center; }
.dlg-title .err-badge.dlg-badge .material-symbols-outlined { font-size: 16px; }
.dialog .dlg-body { font-size: 15px; color: var(--md-sys-color-on-surface-variant); line-height: 24px; }
.dialog .dlg-body b { color: var(--md-sys-color-on-surface); font-weight: 600; }
.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: 20px; }
.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; overflow: hidden;
  transition: width .25s ease;
  background: var(--md-sys-color-surface-container-lowest);
  border-left: 1px solid transparent;
  /* third column of the app grid: full window height, flush to the top, bottom and
     right edge, separated from the content by a single hairline */
  height: 100vh; margin: 0; border-radius: 0;
}
.info-panel.open { width: 441px; border-left-color: var(--md-sys-color-outline-variant); }
/* the EDC Data panel can be widened by dragging its left edge */
.edc-panel.open { width: var(--edc-w, 441px); }
.info-panel.edc-panel .ip-inner { width: calc(var(--edc-w, 441px) - 1px); }
.ep-resize {
  position: absolute; top: 0; bottom: 0; left: 0; width: 12px;
  cursor: col-resize; z-index: 6;
  display: flex; align-items: center; justify-content: center;
}
.ep-resize::after {
  content: ''; width: 4px; height: 34px; border-radius: 2px;
  background: var(--md-sys-color-outline-variant); opacity: .8; transition: background .12s, height .12s;
}
.ep-resize:hover::after, .ep-resize.dragging::after {
  background: var(--md-sys-color-primary); height: 48px; opacity: 1;
}
.info-panel .ip-inner {
  width: 440px; height: 100%; overflow-y: auto;
  /* top padding centres the head row on the topbar icons' centreline */
  padding: 28px 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; }
/* panel title sits inline with the close button — one head row, no separate heading */
.info-panel .ip-head h2 { font-size: 18px; font-weight: 500; letter-spacing: 0; margin: 0; }
.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: 14px; 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-col { display: flex; flex-direction: column; gap: 4px; }
.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.no-study .ip-study-block { display: none; }
.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 .sp-logo { width: 56px; height: 56px; border-radius: var(--md-sys-shape-corner-small); }
/* kept for future Regeneron studies */
.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: 14px; 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: 14px; }
.info-panel .kv:first-of-type { border-top: none; }
.info-panel .kv .k { color: var(--md-sys-color-on-surface-variant); font-size: 14px; }
.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;
}
/* 2px ring via inset shadow on the unchanged 1px border: zero layout shift,
   so contents stay put under fractional zoom (border/padding round differently) */
.study-card:hover, .study-card.sim-hover {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
  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; }
/* 364 basis + 20 gap keeps the 384 column pitch at full width, but guarantees
   20px separation when the row is squeezed (e.g. info panel open) */
.study-card .fields { display: flex; align-items: center; gap: 20px; min-height: 60px; }
.study-card .f { flex: 0 1 364px; min-width: 130px; }
.study-card .f .fv { white-space: nowrap; }
/* invisible stand-in for the edit button so every card's columns line up top to bottom */
.study-card .edit-slot { width: 62px; flex: none; }
.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; align-items: center; gap: 24px; padding: 16px 25px 25px; flex: none; }
.filter-bar .grow { flex: 1; }
/* Toolbar actions match the 56px filter fields for a consistent control row */
.filter-bar .fb-action {
  --md-outlined-button-label-text-font: 'Inter';
  --md-filled-tonal-button-label-text-font: 'Inter';
  --md-outlined-button-label-text-size: 16px;
  --md-filled-tonal-button-label-text-size: 16px;
  --md-outlined-button-container-height: 56px;
  --md-filled-tonal-button-container-height: 56px;
  --md-outlined-button-leading-space: 24px;
  --md-outlined-button-trailing-space: 24px;
  --md-filled-tonal-button-leading-space: 24px;
  --md-filled-tonal-button-trailing-space: 24px;
  --md-outlined-button-icon-size: 20px;
  --md-filled-tonal-button-icon-size: 20px;
  --md-outlined-button-outline-color: var(--md-sys-color-outline-variant);
  /* Clear filters: soft tonal, primary label — clearly an action on the fields beside it */
  --md-filled-tonal-button-container-color: #E9EFFB;
  --md-filled-tonal-button-label-text-color: var(--md-sys-color-primary);
  --md-filled-tonal-button-icon-color: var(--md-sys-color-primary);
  flex: none;
}
[data-theme="dark"] .filter-bar .fb-action { --md-filled-tonal-button-container-color: var(--md-sys-color-secondary-container); }
/* Expand/Collapse all: fixed width (the wider label) so it never resizes;
   fixed label width keeps icon + text left-anchored across both states */
#fbExpand { width: 182px; }
#fbExpand .lbl { display: inline-block; width: 90px; text-align: left; }
/* Status multi-select: field-look trigger + M3 menu with checkboxes */
.fb-status { position: relative; flex: none; }
.fb-status-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 250px; height: 56px; padding: 0 12px 0 16px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: 4px;
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: 16px; color: var(--md-sys-color-on-surface-variant);
}
.fb-status-trigger .material-symbols-outlined { font-size: 24px; }
.fb-status md-menu {
  min-width: 250px;
  --md-menu-container-color: var(--md-sys-color-surface-container-lowest);
  --md-menu-container-shape: 12px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px;
}
.fb-status md-menu md-menu-item { --md-menu-item-label-text-font: 'Inter'; --md-menu-item-label-text-size: 15px; }
.filter-bar .fb-chips {
  --md-input-chip-label-text-font: 'Inter';
  --md-input-chip-label-text-size: 14px;
  --md-input-chip-container-height: 36px;
  --md-input-chip-outline-color: var(--md-sys-color-outline-variant);
}
/* Visits select matches the Status filter field width */
.filter-bar md-outlined-select.fb-item { width: 250px; }
/* Clear (✕): M3 icon button overlaid beside the select's own dropdown arrow,
   inside the field outline */
.fb-select-wrap { position: relative; flex: none; display: inline-flex; }
#visitsClear {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px;
  --md-icon-button-state-layer-width: 32px;
  --md-icon-button-state-layer-height: 32px;
  --md-icon-button-icon-size: 20px;
  --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
}
/* Collapsed search: field-styled button (icon + "Search") that expands into the input */
.fb-search-btn {
  height: 56px; flex: none; padding: 0 20px;
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: 4px;
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: 16px; color: var(--md-sys-color-on-surface-variant);
}
.fb-search-btn .material-symbols-outlined { font-size: 22px; }
/* Expanded search: cross overlaid beside the field's own search glyph — same pattern as Visits */
.fb-overlay-clear {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px;
  --md-icon-button-state-layer-width: 32px;
  --md-icon-button-state-layer-height: 32px;
  --md-icon-button-icon-size: 20px;
  --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
}
.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); }
.visit-section.first-visible { border-top: none; }
/* 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; }
/* the card's bottom row: hover/selected background keeps the card's rounded corner */
.visits-col .visit-section:last-of-type .data-table tbody tr:last-child td:first-child,
.visits-col .visit-section:last-of-type .data-table tbody tr.last-visible td:first-child { border-bottom-left-radius: 11px; }
.visits-col .visit-section:last-of-type .data-table tbody tr:last-child td:last-child,
.visits-col .visit-section:last-of-type .data-table tbody tr.last-visible td:last-child { border-bottom-right-radius: 11px; }
.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: 14px; padding: 0 20px 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; }
.ehr-chip.current { background: var(--md-sys-color-secondary-container); 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-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; }
/* reserve the helper-label line so steps never shift when "Linked" appears */
.step-item > div:last-child { min-height: 40px; }
.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: 14px; 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: 14px; font-weight: 600; margin: 24px 0 0; }
.wiz-content .data-table tr.selected-row td { background: color-mix(in srgb, var(--md-sys-color-secondary-container) 45%, transparent); }
.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); }


/* 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: color-mix(in srgb, var(--md-sys-color-secondary-container) 55%, var(--md-sys-color-surface-container-lowest)); border-radius: 20px; padding: 28px 30px 34px;
  margin-bottom: 26px;
}
.lc-banner .lcb-icon {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: var(--md-sys-color-secondary-container); 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; }
.lc-item .btn.text .material-symbols-outlined { font-size: 18px; }

/* ============ 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: 14px; 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: 22px;
  background: var(--md-sys-color-surface-container-low);
  /* full-radius pill, 100px tall: 8px breathing room around the 84px Export button */
  border-radius: var(--md-sys-shape-corner-full); padding: 8px 12px 8px 44px; min-height: 100px;
}
[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: 36px; white-space: nowrap; }
.export-bar .eb-pill {
  /* the signed-off design: a wide panel per figure, label left, count right;
     the pair reads as one connected M3 block - small inner radius, full outer */
  display: inline-flex; align-items: center; justify-content: space-between;
  width: 310px; height: 56px; padding: 0 22px;
  border-radius: 10px 4px 4px 10px;
  background: #EDF1FA; font-size: 15px; color: var(--md-sys-color-on-surface);
  white-space: nowrap;
}
.export-bar .eb-pill.selected { border-radius: 4px 10px 10px 4px; }
.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: 84px;
  --md-filled-button-label-text-size: 22px;
  --md-filled-button-label-text-font: 'Inter';
  --md-filled-button-label-text-weight: 400;
  --md-filled-button-icon-size: 24px;
  --md-filled-button-leading-space: 44px;
  --md-filled-button-trailing-space: 44px;
  --md-filled-button-with-leading-icon-leading-space: 40px;
  --md-filled-button-with-leading-icon-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; }

/* ============ Concomitant Medications (source-data reconciliation table) ============ */
/* toolbar lives in the question-group card head, like the clinician's other form cards */
.meds-include { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; cursor: default; }
.meds-count {
  font-size: 14px; color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: 14px; padding: 5px 12px; white-space: nowrap;
}
/* denser grid than the visits form list: 11 columns of reconciliation data */
.meds-table th, .meds-table td { font-size: 14px; }
.meds-table th { white-space: nowrap; }
.meds-table th.cb, .meds-table td.cb { width: 52px; }
.meds-table td { padding-top: 16px; padding-bottom: 16px; }
.meds-table .med-name { max-width: none; white-space: nowrap; }  /* one line always: the horizontal scroll absorbs the width */
.meds-table td.unit-invalid .src-val { color: var(--md-sys-color-error); font-weight: 600; }
.meds-table tr.med-blocked td:not(.unit-invalid) { color: var(--md-sys-color-on-surface-variant); }
.meds-table .med-name.diff { color: var(--md-sys-color-error); font-weight: 500; }
.meds-table .num { font-variant-numeric: tabular-nums; }
.meds-table .nowrap { white-space: nowrap; }
/* value + the app's .src-info source-data component — only the hovered row shows its
   icons (opacity, not display, so nothing reflows as the pointer moves down the table) */
.src-val { display: inline-flex; align-items: center; white-space: nowrap; }
.meds-table .src-info { opacity: 0; transition: opacity .12s; }
.meds-table tr:hover .src-info { opacity: 1; }

/* ============ Responsive (laptop widths) ============ */
/* export bar pills give way before the bar overflows */
.export-bar .eb-pill { flex: 0 0 auto; min-width: 0; }
/* the 11-column medications table scrolls inside its card rather than breaking the page */
/* the 11-column table keeps its 1240px grid and scrolls inside the card when the
   window is narrower, rather than breaking out of it; same 84px first-column inset
   as the clinician's bleed tables so it reads identically at full width */
/* horizontal scrolling happens inside a padded wrapper WITHIN the card, so an
   open Information panel never reflows the table — you scroll it instead, and
   the scrollbar sits in the gap between the table and the card's bottom edge */
.table-scroll { overflow-x: auto; margin: 0 24px 14px; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline-variant) transparent; }
.table-scroll .data-table { margin: 0; width: 100%; }
/* clean scrollbar: just a floating thumb — no track background, no border */
.table-scroll::-webkit-scrollbar { height: 6px; background: transparent; }
.table-scroll::-webkit-scrollbar-track { background: transparent; border: none; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: 3px; border: none; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-outline); }
.meds-table { min-width: 1240px; }
.data-table.wrap { min-width: 1380px; }
/* controls row: the Include toggle leads from the left, like every include-row */
.meds-controls { display: flex; align-items: center; gap: 16px; padding: 20px 24px 18px; }
.meds-controls .grow { flex: 1; }
/* breadcrumb trail never wraps; it steps down a size on laptop widths instead */
.crumb-link, .crumb-current, .crumb-sub { white-space: nowrap; }
.topbar .crumbs { min-width: 0; overflow: hidden; }
.patient-chip .name { white-space: nowrap; }
@media (max-width: 1440px) {
  .crumb-link, .crumb-current, .crumb-sub { font-size: 24px; }
  .crumb-sep { margin: 0 10px 0 12px; }
  .crumb-bar { margin: 0 16px; }
}

/* ============ Date-gated empty state (Performance Status) ============ */
.date-gate {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 110px 48px 72px;   /* content sits high in the card */
}
.date-gate .dg-icon {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-primary);
  margin-bottom: 26px;
}
.date-gate .dg-icon .material-symbols-outlined { font-size: 36px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; }
.date-gate .dg-title { font-size: 22px; font-weight: 400; letter-spacing: 0; color: var(--md-sys-color-on-surface); }
/* the steps live on their own bounded surface, like every list in the app */
.date-gate .dg-steps {
  display: flex; flex-direction: column; width: fit-content; min-width: 380px; max-width: 100%; margin-top: 36px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px;
  background: var(--md-sys-color-surface-container-lowest); overflow: hidden;
}
.date-gate .dg-step {
  display: flex; align-items: center; gap: 18px; text-align: left;
  padding: 20px 28px 20px 24px; font-size: 15px; color: var(--md-sys-color-on-surface-variant);
}
.date-gate .dg-step + .dg-step { border-top: 1px solid var(--md-sys-color-outline-variant); }
.date-gate .dg-step b { color: var(--md-sys-color-on-surface); font-weight: 500; }
.date-gate .dg-step .n {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-primary);
  font-size: 14px; font-weight: 600;
}

/* Forms search matches the other filters' width */
.filter-bar #fbForms { width: 250px; }

/* rail hamburger slides the form screens' side panel closed and open;
   the content keeps its 24px gutter once the panel is gone */
.app.side-closed .side-panel { margin-left: calc(-1 * var(--side-w, 360px)); }
.app.side-closed .split-main { padding-left: 24px; }

/* rule: navigation options only exist once there is data — before dates are
   committed, a gated screen's Question Groups block stays hidden */
.side-panel.no-data .qg-scroll, .side-panel.no-data .sp-divider { display: none; }

/* step link in the date-gate empty state */
.date-gate .dg-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; font-weight: 500; color: var(--archer-link);
}
.date-gate .dg-link:hover { text-decoration: underline; }

/* Active filter chips ride a single-line carousel: they scroll horizontally and
   clip at the end of the available space instead of stacking onto a second row */
.fb-chips-scroll {
  min-width: 0; flex: 0 1 auto; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.fb-chips-scroll::-webkit-scrollbar { display: none; }
.fb-chips-scroll .fb-chips { width: max-content; flex-wrap: nowrap; }

/* ============ Vitals 2.0 — EDC Data journey ============ */
/* banner: EDC data found, not yet exported */
.edc-banner {
  display: flex; align-items: center; gap: 18px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large); padding: 26px 28px;
}
.edc-banner .eb-ico {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-primary);
}
.edc-banner .eb-ico .material-symbols-outlined { font-size: 26px; }
.edc-banner .eb-link-ico { font-size: 24px; color: var(--md-sys-color-on-surface); }
.edc-banner .eb-text { flex: 1; min-width: 0; }
.edc-banner .eb-text .t { font-size: 20px; font-weight: 400; }
.edc-banner .eb-text .d { font-size: 14px; color: var(--md-sys-color-on-surface-variant); margin-top: 8px; }

/* header toggle: M3 filled tonal button, icon-button height; active = the same
   inverse-surface fill the Information button uses when its panel is open */
.edc-pill {
  --md-filled-tonal-button-container-height: 40px;
  --md-filled-tonal-button-label-text-size: 14px;
  --md-filled-tonal-button-label-text-weight: 500;
  --md-filled-tonal-button-icon-size: 22px;
}
.edc-pill.on {
  --md-filled-tonal-button-container-color: var(--md-sys-color-inverse-surface);
  --md-filled-tonal-button-label-text-color: var(--md-sys-color-inverse-on-surface);
  --md-filled-tonal-button-hover-label-text-color: var(--md-sys-color-inverse-on-surface);
  --md-filled-tonal-button-focus-label-text-color: var(--md-sys-color-inverse-on-surface);
  --md-filled-tonal-button-pressed-label-text-color: var(--md-sys-color-inverse-on-surface);
  --md-filled-tonal-button-icon-color: var(--md-sys-color-inverse-on-surface);
  --md-filled-tonal-button-hover-icon-color: var(--md-sys-color-inverse-on-surface);
  --md-filled-tonal-button-focus-icon-color: var(--md-sys-color-inverse-on-surface);
  --md-filled-tonal-button-pressed-icon-color: var(--md-sys-color-inverse-on-surface);
}
/* Unlinked column: shown while EDC data is unreviewed, hidden when the panel is open */
.v2-mini { display: flex; justify-content: flex-end; gap: 44px; }
.v2-mini span { font-size: 14px; font-weight: 600; }
.v2-linkcol { width: 120px; text-align: right; flex: none; }
.v2-chip {
  display: inline-block; padding: 6px 14px; border-radius: 8px; font-size: 14px;
  background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface);
}
[data-screen="vitals2"].edc-open .v2-linkcol,
[data-screen="vitals2"].edc-reviewed .v2-linkcol { display: none; }

/* EDC Data panel: the Information panel's shell, with the form card's exact
   section/row/pill rhythm so panel rows sit level with the card rows */
.edc-panel .ip-head { margin-bottom: 39px; }   /* title text + divider sit level with the form card head */
/* panel content moves 1:1 with the main column's scroll (cross-referencing) —
   the viewport clips it below the fixed head */
.edc-panel .ip-inner { overflow: hidden; }
.edc-panel .ep-viewport { flex: 1; overflow: hidden; }
.edc-panel .ep-scroll { will-change: transform; }
.edc-panel .ep-title { font-size: 20px; font-weight: 400; letter-spacing: .1px; padding: 24px 0 43px; }
.edc-panel .ep-divider { height: 1px; background: var(--md-sys-color-outline-variant); flex: none; }
/* the divider aligns with the card head's border; this gap puts the rows back level with the card rows */
.edc-panel .ep-divider + .inc-section { margin-top: 16px; }
.edc-panel .inc-section { padding: 20px 0 24px; }
/* margin-top 16 mirrors the form card's internal flex gap between sections */
.edc-panel .inc-section + .inc-section { border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: 36px; margin-top: 16px; }
.edc-panel .inc-section .pill-row { margin-top: 38px; }
.edc-panel .inc-section .inc-mini-labels + .pill-row { margin-top: 0; }
.edc-panel .include-row { min-height: 40px; }
.edc-panel .include-row .question { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 0; }

/* custom Source Info icon (document + i): sized and coloured like the old glyph */
.src-info .src-ico { display: block; }
.src-info { line-height: 0; }

/* drag the sidebar's right edge to widen it (double-click resets) — hidden for now */
.sp-resize { display: none !important; }
.sp-resize-disabled {
  position: absolute; top: 0; bottom: 0; right: 0; width: 12px;
  cursor: col-resize; z-index: 5;
  display: flex; align-items: center; justify-content: center;
}
/* always-visible grip so the affordance is discoverable */
.sp-resize::after {
  content: ''; width: 4px; height: 34px; border-radius: 2px;
  background: var(--md-sys-color-outline-variant); opacity: .8; transition: background .12s, height .12s;
}
.sp-resize:hover::after, .sp-resize.dragging::after {
  background: var(--md-sys-color-primary); height: 48px; opacity: 1;
}

/* ============ New Study panel (link a new study journey) ============ */
.ns-panel .ip-head { margin-bottom: 26px; gap: 10px; }
/* the rows' hover bleed extends past the content column — clip it, never scroll */
.ns-panel .ip-inner { overflow-x: hidden; }
.ns-sp-label { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; margin: 8px 0 18px; }
/* open two-line rows, separators inset to the text edge, quiet hover */
.ns-intro { font-size: 14px; color: var(--md-sys-color-on-surface-variant); margin: 2px 0 18px; line-height: 19px; }
.ns-sp-list { display: flex; flex-direction: column; overflow-y: auto; overflow-x: clip; padding-bottom: 10px; }
.ns-sp-row {
  display: flex; align-items: center; gap: 16px; flex: none;
  /* logo aligns with the body copy; the hover wash extends past the content */
  width: calc(100% + 28px); margin: 0 -14px; padding: 15px 14px;
  background: none; border: none; border-radius: 12px;
  cursor: pointer; font-family: inherit; text-align: left; color: var(--md-sys-color-on-surface);
  transition: background .15s;
}
.ns-sp-row:hover { background: var(--md-sys-color-surface-container-low); }
.ns-sp-row .nm { font-size: 15px; font-weight: 500; line-height: 20px; }
.ns-chev { margin-left: auto; font-size: 20px; color: var(--md-sys-color-outline); transition: transform .15s, color .15s; }
.ns-sp-row:hover .ns-chev { transform: translateX(3px); color: var(--md-sys-color-on-surface); }
.ns-tile {
  border-radius: 12px; display: inline-grid; place-items: center; color: #fff;
  font-weight: 700; font-size: 15px; letter-spacing: .2px; flex: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14);
}
.study-card .sp-fv { display: inline-flex; align-items: center; gap: 8px; }
.ns-tile-img { border-radius: 12px; flex: none; object-fit: cover; }
.ns-sponsor-id { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.ns-fields { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; }
.ns-fields md-outlined-select, .ns-fields md-outlined-text-field { width: 100%; }
.ns-sub-wrap { position: relative; }
.ns-dd {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--md-sys-color-surface-container-low); border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .16); max-height: 320px; overflow-y: auto; padding: 6px 0;
}
.ns-dd button {
  display: block; width: 100%; text-align: left; padding: 12px 16px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 14px; color: var(--md-sys-color-on-surface);
}
.ns-dd button:hover { background: var(--md-sys-color-surface-container); }
.ns-foot { margin-top: auto; display: flex; justify-content: flex-end; gap: 12px; padding-top: 18px; border-top: 1px solid var(--md-sys-color-outline-variant); }


/* ============ COMPACT VIEW ============
   The whole app rendered at 85% — a proportionate condensation so more content
   fits on screen. Viewport-sized elements are compensated so the shell still
   fills the window exactly. */
body { zoom: 0.8122; }
/* vh/vw units are NOT rescaled inside a zoomed subtree — every viewport-sized
   element must be compensated or it falls 20% short of the window */
.app { width: calc(100vw / 0.8122); height: calc(100vh / 0.8122); }
.main { height: calc(100vh / 0.8122); }
.side-panel { max-height: calc(100vh / 0.8122); }
.info-panel { height: calc(100vh / 0.8122); }
/* at the condensed optical size the display-size crumbs read too tight —
   relax the negative tracking; headroom guards clipped descenders */
.crumb-link, .crumb-current, .crumb-sub { letter-spacing: 0; line-height: 1.4; }
/* compact: the export bar comes down proportionately — the button stops dominating */
.export-bar { min-height: 68px; padding: 6px 8px 6px 32px; gap: 6px; }
.export-bar .eb-export {
  --md-filled-button-container-height: 54px;
  --md-filled-button-label-text-size: 16px;
  --md-filled-button-icon-size: 20px;
  --md-filled-button-leading-space: 26px;
  --md-filled-button-trailing-space: 26px;
}
/* fractional zoom can round line boxes down and shave descenders on clipped
   (nowrap/ellipsis) text — give those elements explicit headroom */
.qg-child-plain, .qg-item .grow, .include-row .question, .qcard-title,
.eb-label, .avd-title, .sb-name { line-height: 1.4; }
/* fractional zoom also rounds the icon font's ascent/descent, seating every
   Material Symbols glyph ~0.5px high in its line box — invisible beside text,
   glaring inside a circular icon button. Re-seat the ink (transforms paint
   sub-pixel, so this survives any zoom/DPR combination). */
md-icon-button md-icon, md-outlined-icon-button md-icon, md-filled-icon-button md-icon,
md-filled-tonal-icon-button md-icon, .icon-btn > .material-symbols-outlined {
  transform: translateY(0.5px);
}

/* The rail's selection on a form section: a permanent surface tint
   that bleeds the card's 24px insets so it fills the card's width,
   painted by shadow so every divider and spacing stays untouched. */
.qcard.formlevel{overflow:hidden}
/* the resting shadow is transparent so the bleed fades in step with
   the background, one soft wash in and out, never staggered */
.inc-section{box-shadow:24px 0 0 transparent,-24px 0 0 transparent;transition:background .25s ease,box-shadow .25s ease}
.inc-section.qg-selected{background:#F3F6FC;box-shadow:24px 0 0 #F3F6FC,-24px 0 0 #F3F6FC}
[data-theme="dark"] .inc-section.qg-selected{background:var(--md-sys-color-surface-container);box-shadow:24px 0 0 var(--md-sys-color-surface-container),-24px 0 0 var(--md-sys-color-surface-container)}

/* The EDC panel's meds table: the main table's design, scrolling
   inside the panel so the centre-wide state shows most of it. */
.edc-panel .ep-table { margin-top: 102px; margin-left: 0; margin-right: 0; overflow: auto; }
.edc-panel .ep-table .data-table { min-width: 860px; }
/* the table's own vertical edges: the closure the card border gives the main
   table, visible when scrolled to either end */
.edc-panel .ep-table .data-table {
  border-left: 1px solid var(--md-sys-color-outline-variant);
  border-right: 1px solid var(--md-sys-color-outline-variant);
}


/* ---- breadcrumb '...' dropdown: the pages collapsed out of the trail ---- */
.crumb-dd { position: relative; display: inline-flex; }
.crumb-menu {
  position: fixed; z-index: 60;
  min-width: 200px; padding: 6px 0;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, .16);
}
.crumb-menu.hidden { display: none; }
.crumb-menu button {
  display: block; width: 100%; text-align: left; padding: 11px 18px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 14px; color: var(--md-sys-color-on-surface); white-space: nowrap;
}
.crumb-menu button:hover { background: var(--md-sys-color-surface-container); }


/* condensed breadcrumb state: the small-screen type ramp, applied when the
   trail must share the row with an open right-hand panel */
#crumbs.cond .crumb-link, #crumbs.cond .crumb-current, #crumbs.cond .crumb-sub { font-size: 24px; }
#crumbs.cond .crumb-sep { margin: 0 10px 0 12px; }
#crumbs.cond .crumb-bar { margin: 0 16px; height: 24px; }

#crumbs.cond2 .crumb-link, #crumbs.cond2 .crumb-current, #crumbs.cond2 .crumb-sub { font-size: 20px; }
#crumbs.cond2 .crumb-sep { margin: 0 8px 0 10px; }
#crumbs.cond2 .crumb-bar { margin: 0 12px; height: 20px; }

/* stacked tail: visit name over form name when the row is at its narrowest */
/* exactly the patient-chip pattern: 12/600/.5 overline, 14/500 value */
/* identical to the patient chip: 20px line boxes, 12/600/.5 over 14/500 */
.crumb-stack { display: inline-flex; flex-direction: column; justify-content: center; }
.crumb-stack .cs-top { font-size: 12px; font-weight: 600; letter-spacing: .5px; line-height: 20px; color: var(--md-sys-color-on-surface-variant); }
.crumb-stack .cs-bottom { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--md-sys-color-on-surface); white-space: nowrap; }


/* breadcrumb vs patient block: minimum gap equals the DOB-to-refresh gap (26px);
   when space runs out the tail truncates and the full name shows on hover */
#crumbs { margin-right: 26px; }
#crumbs .crumb-current, #crumbs .crumb-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#crumbs .crumb-stack { min-width: 0; }
#crumbs .cs-bottom { overflow: hidden; text-overflow: ellipsis; }

/* closing divider under the EDC table, level with the bottom edge of the
   main card on the left (card bottom 773 - table bottom 757 - 1px line) */
.edc-panel .ep-foot-divider { height: 1px; margin-top: 20px; background: var(--md-sys-color-outline-variant); flex: none; }
.edc-panel .ep-table { margin-bottom: 0; }

/* meds card + EDC panel: 12px from table bottom to scrollbar (6px bar inside
   an 18px padding), 12px from scrollbar to the card bottom / closing divider */
.meds-qcard .table-scroll, .edc-panel .ep-table { padding-bottom: 18px; margin-bottom: 10px; }


/* ---- Scout review flow: dialog + row chips ---- */
.rv-notes { font-size: 13.5px; line-height: 1.55; color: var(--md-sys-color-on-surface); }  /* no artificial cap: the note shows in full */
.rv-notes p { margin: 0 0 12px; }
.rv-seg { display: inline-flex; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); overflow: hidden; margin-top: 16px; }
.rv-seg-btn {
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .3px;
  background: none; border: none; cursor: pointer; padding: 11px 18px;
  color: var(--md-sys-color-on-surface-variant);
}
.rv-seg-btn + .rv-seg-btn { border-left: 1px solid var(--md-sys-color-outline-variant); }
.rv-seg-btn.ap { color: #178746; }
.rv-seg-btn.rj { color: #D93025; }
.rv-seg-btn.nr.on { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.rv-seg-btn.ap.on { background: #178746; color: #fff; }
.rv-seg-btn.rj.on { background: #D93025; color: #fff; }
.rv-fb-selwrap { margin-top: 2px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 10px; padding: 11px 12px 11px 14px; margin-left: 0; width: 100%; justify-content: space-between; }
.rv-fb-text {
  width: 100%; margin-top: 12px; font: inherit; font-size: 14px; color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small); padding: 12px 14px; resize: vertical; outline: none;
}
.rv-fb-text:focus { border-color: var(--md-sys-color-primary); }
.rv-note-foot .material-symbols-outlined { font-size: 15px; }
.ns-sp-name { font-size: 15px; font-weight: 500; }
.rv-fb-label { margin-top: 18px; }
.rv-fb-inline { margin: 0 10px 0 0; }
.rv-fb-ico { opacity: 1; }
.rv-phi { margin-top: 10px; }
.rv-fb-hint { font-size: 12.5px; color: var(--md-sys-color-on-surface-variant); margin-top: 10px; }
.rv-chip {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; border-radius: 6px; padding: 4px 9px; white-space: nowrap;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  margin-right: 10px;
}
.rv-chip.ok { background: #E3F2E7; color: #178746; }
.rv-chip.bad { background: #FBE7E5; color: #C5221F; }
.rm-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); font-size: 15px; }
.ps-feedback { display: flex; align-items: baseline; font-size: 13.5px; color: var(--md-sys-color-on-surface); padding: 10px 0 2px 46px; }

/* text-like select (shared pattern with the eSourcing app): invisible native
   select overlays the label + arrow so the whole control opens the dropdown */
.es-subj-wrap {
  position: relative; display: inline-flex; align-items: center; vertical-align: middle;
  border-radius: 8px; cursor: pointer; transition: background .12s;
}
.es-subj-wrap:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); }
.es-subj-wrap:focus-within { background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); }
.es-subj-label { font-size: 14px; line-height: 20px; }
.es-subj-ico { font-size: 20px; color: var(--md-sys-color-on-surface-variant); pointer-events: none; margin-left: 2px; }
.es-subj-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; margin: 0; padding: 0; cursor: pointer; }


/* ---- Review confirmation: clinical polish (scoped to this dialog) ---- */
#reviewDlg .dlg-content { padding: 36px 36px 28px; }
#reviewDlg .cols { grid-template-columns: 420px 1fr; gap: 44px; }
#reviewDlg .col-head { font-size: 14px; padding-bottom: 12px; margin-bottom: 18px; }
#reviewDlg .kv-label { font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: var(--md-sys-color-on-surface-variant); margin-bottom: 8px; }
#reviewDlg .rm-row { padding: 14px 16px; min-height: 56px; margin-bottom: 22px; border-radius: var(--md-sys-shape-corner-small); border-bottom: none; }
#reviewDlg .rv-notes { font-size: 14px; line-height: 1.65; }
#reviewDlg .rv-notes p { margin: 0 0 14px; }
#reviewDlg .rv-seg { margin-top: 26px; }
#reviewDlg .rv-seg-btn { padding: 12px 22px; }
#reviewDlg .rv-fb .kv-label { margin-top: 26px; margin-bottom: 10px; }
#reviewDlg .rv-fb-selwrap { padding: 13px 14px 13px 16px; }
#reviewDlg .rv-fb-text { margin-top: 14px; padding: 13px 16px; line-height: 1.55; }
#reviewDlg .rv-fb-hint { margin-top: 12px; }
#reviewDlg .dlg-actions { padding: 0 36px 30px; margin-top: 16px; gap: 12px; }
#reviewDlg .byline { font-size: 13.5px; }

/* standardised note meta: labelled Author / Authored Date, badge for missing */
#reviewDlg .rv-meta { display: flex; gap: 44px; margin: 0 0 20px; }
#reviewDlg .rv-meta-f { display: flex; flex-direction: column; gap: 5px; }
#reviewDlg .rv-meta-f b { font-size: 14px; font-weight: 600; color: var(--md-sys-color-on-surface); }
#reviewDlg .rv-meta .kv-label { margin-bottom: 0; }
.rv-chip.warn { background: #FDECD9; color: #A8500A; }

/* review dialog can outgrow the viewport: the scrim scrolls, the dialog sits
   near the top with breathing room top and bottom */
#reviewDlg { overflow-y: auto; align-items: flex-start; }
#reviewDlg .dialog.wide { margin: 56px 0 64px; align-self: center; }

/* review dialog: highlighted value inside the clinical note */
.rv-notes mark { background: transparent; color: inherit; }
.rv-notes .rv-hl {
  background: color-mix(in srgb, #FFD54F 55%, transparent);
  color: inherit; border-radius: 3px; padding: 1px 4px; font-weight: 600;
}

/* review dialog: note excerpt / full-note toggle */
.rv-note-foot {
  display: flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: 12.5px; color: var(--md-sys-color-on-surface-variant);
  border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: 12px;
}
.rv-note-toggle {
  border: none; background: none; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--md-sys-color-primary); padding: 0; margin-left: auto;
}
.rv-note-toggle:hover { text-decoration: underline; }

/* select-visit-date note + AI processing affordances (14 Oct call) */
.avd-note { font-size: 11.5px; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); margin: 10px 2px 0; }
.ai-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 2px 24px 6px; padding: 10px 14px; border-radius: 10px;
  background: var(--md-sys-color-surface-container-low);
  font-size: 12.5px; line-height: 1.5; color: var(--md-sys-color-on-surface-variant);
}
.ai-note .material-symbols-outlined { font-size: 18px; color: var(--md-sys-color-primary); margin-top: 1px; }
.status-chip.review.busy { opacity: .65; cursor: default; }
.crumb-datebtn {
  width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer; flex: none;
  background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface);
  display: grid; place-items: center; margin-right: 2px;
}
.crumb-datebtn:hover { background: var(--md-sys-color-surface-container-high); }
.crumb-datebtn .material-symbols-outlined { font-size: 18px; }

/* Angelo 19 Oct: quieter Include toggle, resource datetimes, process-notes, blocked export */
.include-row md-switch { transform: scale(.72); transform-origin: left center; margin-right: -21px; }


.ai-note .pn-btn { margin-left: auto; flex: none; --md-filled-tonal-button-container-height: 32px; font-size: 12.5px; }
.status-chip.export-blocked { background: #FBE7E5; color: #C5221F; border-color: transparent; }
.status-chip.review[disabled] { opacity: .45; cursor: default; }

/* Process-notes on the visits row: the platform's standard filled CTA, chip-sized */
.status-chip.pn-row {
  margin-left: 10px; cursor: pointer; border: none; font-weight: 500;
  border-radius: var(--md-sys-shape-corner-full, 999px);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.status-chip.pn-row:hover { background: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary)); }
.status-chip.pn-row[disabled] { cursor: default; opacity: .7; }

/* nudge towards the only Process-notes control when the form is still locked */
.status-chip.pn-row.attention { animation: pn-pulse 0.4s ease-in-out 3; }
@keyframes pn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent); }
}

/* row-level CTA sits far right, centred on the row line like every cell */
.data-table td.row-cta { text-align: right; padding-right: 24px; }
.visits-col .data-table td.row-cta { padding-right: 20px; }
/* hovering a form row renders its name as a link - primary colour, weight unchanged */
.visits-col .data-table tr.row-hover:hover > td:first-child { color: var(--md-sys-color-primary); }
.data-table td.row-cta .status-chip.pn-row { margin-left: 0; vertical-align: middle; }

/* the resource datetime is plain info, same treatment as the status columns */
.pill-row .ps-col { white-space: nowrap; }

/* label row shares the pill-row's exact column geometry so headers sit over cells */
.inc-mini-labels { gap: 20px; padding-right: 18px; }

/* the Include label operates the toggle too */
.include-row .inc-label { cursor: pointer; user-select: none; }


/* the Review CTA matches Process notes exactly; its pencil marks it editable */
.status-chip.pn-row .material-symbols-outlined { font-size: 13px; }

/* breathing room: action chips read as real buttons, status chips step up a size */
.rv-chip { font-size: 12px; }
.status-chip.pn-row {
  height: 32px; padding: 0 16px; font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: .1px;
}
.status-chip.pn-row .material-symbols-outlined { font-size: 15px; }
/* verdict chips share the status-chip family: same type size, still editable */
.status-chip.rv-edit { height: 32px; border: none; cursor: pointer; gap: 8px; font-weight: 500; font-family: inherit; }
.status-chip.rv-edit.ok { background: #E3F2E7; color: #178746; }
.status-chip.rv-edit.bad { background: #FBE7E5; color: #C5221F; }
.status-chip.rv-edit .material-symbols-outlined { font-size: 15px; }
.status-chip.rv-edit:hover { filter: brightness(.97); }

/* timestamp-match card inside the auto-select dialog */
.ts-card { border: 1px solid var(--md-sys-color-outline-variant); border-radius: 10px; margin: 18px 0 14px; overflow: hidden; }
.ts-group { background: var(--md-sys-color-surface-container-low); font-size: 13px; font-weight: 600; padding: 10px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.ts-list { margin: 0; padding: 10px 16px 12px 34px; font-size: 14px; }
.ts-list li { padding: 3px 0; }

/* wizard tables honour their declared column widths so the EDC and EHR cards align 1:1 */
.wiz-card .data-table { table-layout: fixed; }
/* AE results table: dates and link-status never wrap */
#aeTbody td:nth-child(3), #aeTbody td:nth-child(4), #aeTbody td:nth-child(8) { white-space: nowrap; }

/* Visit dates: slim bar inside the open accordion, one dropdown opens the range calendar */
.vd-bar {
  /* an outlined card of its own; the calendar sits in the 48px icon column,
     the label on the visit-title line (85px) */
  display: flex; align-items: center; gap: 14px;
  margin: 0 20px 18px 18px; padding: 13px 18px 13px 19px;
  background: transparent;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
}
.vd-bar-label { margin-left: 5px; }
.vd-bar-ico { font-size: 20px; color: var(--md-sys-color-on-surface-variant); flex: none; }
.visit-section.collapsed .vd-bar { display: none; }
.vd-bar-label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.vd-bar .grow { flex: 1; }
.vd-bar .vdp-btn { width: auto; min-width: 250px; height: 48px; background: var(--md-sys-color-surface-container-lowest); }
.vd-sum { pointer-events: none; }
.vd-sum .material-symbols-outlined { font-size: 16px; }
/* range-calendar popover */
.vdp-pop {
  position: fixed; z-index: 1200; width: 360px;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: 18px 18px 14px;
}
.vdp-pop.hidden { display: none; }
.vdp-range { font-size: 15px; font-weight: 600; min-height: 22px; margin-bottom: 10px; }
.vdp-range .muted { color: var(--md-sys-color-on-surface-variant); font-weight: 400; }
.vdp-nav { display: flex; align-items: center; margin-bottom: 6px; }
.vdp-nav .vdp-month { flex: 1; text-align: center; font-size: 14px; font-weight: 600; }
.vdp-nav .icon-btn { width: 36px; height: 36px; }
.vdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.vdp-grid .dow { text-align: center; font-size: 12px; color: var(--md-sys-color-on-surface-variant); padding: 6px 0; }
.vdp-grid .day {
  height: 40px; border: none; background: none; font: inherit; font-size: 13.5px;
  color: var(--md-sys-color-on-surface); cursor: pointer; border-radius: 999px;
  display: grid; place-items: center;
}
.vdp-grid .day:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.vdp-grid .day.pad { visibility: hidden; }
.vdp-grid .day.mid { background: var(--md-sys-color-secondary-container); border-radius: 0; }
.vdp-grid .day.end { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.vdp-grid .day.end.a { border-radius: 999px 0 0 999px; }
.vdp-grid .day.end.b { border-radius: 0 999px 999px 0; }
.vdp-grid .day.end.only { border-radius: 999px; }
.vdp-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }

/* form-screen sidebar: the two date fields are driven by the dropdown and stay hidden */
.side-panel .avd-fields { display: none; }
.side-panel .sb-vdp { width: 100%; margin-top: 2px; background: var(--md-sys-color-surface-container-lowest); }

.form-row.form-locked td:first-child { cursor: default; color: var(--md-sys-color-on-surface-variant, #6b6b6b); }

/* Imaging link panel */
.img-panel .ip-head h2 { line-height: 26px; }
.img-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.img-row .k { font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.img-row .v { font-size: 15px; color: var(--md-sys-color-on-surface); text-align: right; }
.img-sel-wrap { margin-top: 26px; width: 100%; display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: 4px; height: 56px; padding: 0 12px 0 16px; }
.img-sel-wrap .es-subj-label { color: var(--md-sys-color-on-surface-variant); font-size: 16px; }
.img-hint { font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin: 8px 2px 0; }
.img-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; }

/* Secondary row action: straight to the matching EDC form */
.status-chip.edc-row {
  height: 32px; border: none; cursor: pointer; gap: 6px;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-primary);
  font-weight: 500; white-space: nowrap;
}
.status-chip.edc-row:hover { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.status-chip.edc-row .material-symbols-outlined {
  font-size: 15px; line-height: 1; display: inline-flex; align-items: center;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.status-chip.edc-row { line-height: 1; }
.status-chip.edc-row .edc-lbl {
  /* uppercase has no descenders: its glyphs ride high in a centred box - optical 1px drop */
  line-height: 1; transform: translateY(1px);
}
.data-table td.row-cta { white-space: nowrap; }

/* Process-notes: the row stays plain; an attached notification panel explains the step */
tr.has-pn-panel td { border-bottom: none !important; }
/* the connected lower half: a full-width surface row; text shares the 89px title line,
   icon shares the 48px icon column, the action shares the 38px row-action line */
.visits-col .data-table .pn-panel-row td, .pn-panel-row td {
  padding: 0 !important; text-align: left !important; height: 67px;
  background: color-mix(in srgb, var(--md-sys-color-secondary-container) 55%, var(--md-sys-color-surface-container-lowest));
}
.pn-note { display: flex; align-items: center; height: 100%; padding: 0 20px 0 37px; }
.pn-note-ico { font-size: 22px; color: var(--md-sys-color-primary); flex: none; }
.pn-note-text { font-size: 13px; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 18px; }
.pn-note .grow { flex: 1; }
.pn-note .status-chip.pn-row { flex: none; }
.pn-spin {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: pnspin .8s linear infinite;
}
@keyframes pnspin { to { transform: rotate(360deg); } }
.pn-done { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #1E8E3E; }
.status-chip.pn-row { transition: background-color .25s ease, color .25s ease; }
.status-chip.pn-row.done {
  background: #E6F4EA; color: #1E8E3E; cursor: default; opacity: 1;
}
.status-chip.pn-row.done .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
[data-theme="dark"] .status-chip.pn-row.done { background: color-mix(in srgb, #1E8E3E 24%, var(--md-sys-color-surface-container-high)); color: #7ED49A; }
tr.pn-panel-row { transition: opacity .3s ease; }
/* the refresh glyph's visual mass sits up-right in its em box - optical correction */
.refresh-btn md-icon { transform: translate(-0.5px, 0.5px); }
.pn-done .material-symbols-outlined { font-size: 18px; font-variation-settings: 'FILL' 1; }

/* list-of-values rows sit tight, like one stacked control */
#vs7Rows .pill-row { margin-top: 4px; }
#vs7Rows .pill-row:first-child { margin-top: 0; }

/* the gated form row offers no hover affordance until its notes are processed */
tr.has-pn-panel td:first-child { cursor: default; }