/* Shared UI rules. Loaded after feature styles to keep controls and navigation consistent. */
:root {
  --ui-ink: #193743;
  --ui-muted: #58717b;
  --ui-border: #c8d9d6;
  --ui-accent: #087c80;
  --ui-focus: #087c80;
}
[hidden] { display: none !important; }
html { scroll-padding-top: 20px; }
body { overflow-wrap: break-word; }
body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 4000;
  padding: 12px 18px; border-radius: 8px; background: #fff; color: #16454d;
  box-shadow: 0 3px 14px #173e4933; transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.page { padding-top: 28px; }
.site-registration {
  padding: 16px 20px 24px; text-align: center;
  color: var(--ui-muted); font-size: .8rem; line-height: 1.7; overflow-wrap: anywhere;
}
.site-registration a { display: inline-block; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px; }
.site-registration a:hover { color: var(--ui-accent); }
.page-head { margin-bottom: 24px; }
.page-head > div:first-child { min-width: 0; }
h1 { font-size: clamp(1.85rem, 2.9vw, 2.55rem); line-height: 1.25; letter-spacing: -.025em; }
h2 { font-size: 1.25rem; line-height: 1.45; }
.eyebrow { font-size: .76rem; letter-spacing: .08em; }
.page-head p, .section-intro { color: var(--ui-muted); line-height: 1.75; }
.section-head { margin-top: 32px; align-items: center; }
.section-head > span, .tab-section-head span, .filter-foot, .help-text,
.setting-card small, .person-info small, .person-last, .row-main small,
.event-main small, .review-row small, .preview-head small {
  color: var(--ui-muted);
}
.local-banner { font-size: .8rem; margin-bottom: 20px; line-height: 1.6; }
.button { min-height: 44px; padding: 10px 16px; line-height: 1.45; }
.button:disabled, .button[aria-disabled="true"] { transform: none; cursor: not-allowed; opacity: .65; }
.button[aria-busy="true"] { cursor: wait; }
.button.secondary { border-color: var(--ui-border); }
.button.primary { box-shadow: 0 3px 9px #087c8018; }
.panel { box-shadow: 0 3px 14px #18434508; }
.empty { line-height: 1.8; color: var(--ui-muted); }
.empty a { color: #086d74; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb { flex-wrap: wrap; gap: 6px 9px; }
.breadcrumb a { padding: 4px 0; }

/* Every search/filter and form control uses the same readable dimensions. */
:where(.document-filter-panel, .form-grid, .filter-bar, .login-card, .search-panel, .group-form)
:where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  min-width: 0; width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--ui-border); border-radius: 9px;
  background: #fff; color: #23444d; font: inherit; line-height: 1.45;
}
:where(.document-filter-panel, .form-grid, .filter-bar, .login-card, .search-panel)
:where(input, select, textarea):focus {
  border-color: var(--ui-accent); box-shadow: 0 0 0 3px #dbf2ed;
}
:where(input, textarea)::placeholder { color: #688087; opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-accent); }
.filter-top { align-items: end; gap: 12px; }
.filter-keyword { min-width: 0; }
.filter-grid { gap: 16px; }
.filter-grid label, .filter-keyword { color: #365662; font-size: .87rem; line-height: 1.6; }
.document-filter-panel { padding: 22px 24px; }
.filter-foot { line-height: 1.75; margin-top: 14px; }
.advanced-filters { border-top: 1px solid #e3ece9; margin-top: 18px; padding-top: 3px; }
.advanced-filters > summary { min-height: 44px; padding: 12px 0; font-weight: 650; }
.document-status-tabs { margin-bottom: 18px; }
.status-pills a, .member-pills a, .summary-anchors a { min-height: 40px; display: inline-flex; align-items: center; }
.field-error, .form-error, .errorlist { line-height: 1.7; }
.form-actions { align-items: center; }
.form-actions p { max-width: 70ch; line-height: 1.8; color: var(--ui-muted); }
.field label { line-height: 1.6; }
.assistant-form .field > div[id] label { align-items: flex-start; padding: 10px 4px; line-height: 1.7; }
.assistant-form input[type="checkbox"] { margin-top: 4px; }
.drop-zone { padding: 28px 20px; }
.drop-zone input[type="file"] { padding: 6px; line-height: 1.6; }
.drop-zone input[type="file"]::file-selector-button {
  min-height: 40px; padding: 7px 12px; margin-right: 10px;
  border: 1px solid #b1cec7; border-radius: 7px; background: #fff; color: #245b64; cursor: pointer;
}
.upload-steps > div { min-width: 0; }
.upload-steps small { color: var(--ui-muted); }

/* The member shell keeps its dimensions across all five tabs. */
.person-shell .person-head { min-height: 100px; gap: 20px; margin-bottom: 18px; }
.person-shell .person-heading p { color: var(--ui-muted); }
.person-shell .person-tabs { gap: 24px; margin-bottom: 26px; scrollbar-width: thin; }
.person-tabs a { min-height: 48px; padding: 12px 4px; color: #516d76; }
.person-tabs a[aria-current="page"] { font-weight: 780; }
.tab-section-head h2 { font-size: 1.4rem; }
.timeline-year { margin-top: 24px; font-size: 1.3rem; }
.encounter-card { padding: 21px 24px; }
.encounter-card h3 { line-height: 1.55; }
.encounter-card p { color: #536f79; }
.encounter-card-side { color: #526f79; }
.summary-row-source { color: var(--ui-muted); }
.summary-row-source > summary { padding: 5px 0; }
.summary-row-edit, .fact-edit { padding: 5px 0; }
.summary-row-body > p { font-size: 15px; }
.health-summary-document .basics-grid dt { font-size: 13px; color: var(--ui-muted); }
.summary-anchors { gap: 8px; }

/* Long standardized names must remain distinguishable in lists and source headers. */
.document-row { padding: 17px 20px; align-items: flex-start; }
.document-row .file-icon { margin-top: 2px; }
.document-row .row-main strong, .original-heading .row-main strong,
.encounter-original > summary .row-main strong {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.6;
}
.document-row .row-main small { white-space: normal; line-height: 1.7; overflow-wrap: anywhere; }
.document-row .row-side { flex: none; padding-top: 3px; }
.row-side .review-action { font-size: 12px; line-height: 1.6; }
.detail-panel dl > div { grid-template-columns: 104px minmax(0,1fr); }
.detail-panel dt { color: var(--ui-muted); }
.preview-body { border-radius: 8px; background: #f0f5f4; }
.preview-panel .preview-body iframe { background: #fff; }
.original-heading { align-items: flex-start; }
.original-heading .file-icon { margin-top: 2px; }
.original-heading .original-status { padding-top: 5px; }
.package-row { align-items: flex-start; padding-top: 16px; padding-bottom: 16px; }
.package-row > input { flex: none; margin-top: 5px; }
.package-row strong { line-height: 1.7; }
.package-row small { white-space: normal; line-height: 1.7; }

/* Navigation: all members and account actions are available on small screens. */
.sidebar { padding-top: 22px; padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: #668a91 transparent; }
.main-nav { margin-top: 24px; gap: 3px; scrollbar-width: thin; scrollbar-color: #668a91 transparent; }
.main-nav a { min-height: 40px; padding: 8px 11px; }
.main-nav .nav-person { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.nav-caption { padding: 6px 11px; margin-bottom: 0; }
.member-caption { margin-top: 8px; }
.sidebar-foot { gap: 7px; padding: 12px 11px 0; }
.sidebar-foot a, .sidebar-foot button { min-height: 28px; display: inline-flex; align-items: center; }
.user-chip { margin-bottom: 1px; }
.main-nav a[aria-current="page"] { box-shadow: inset 3px 0 #a8e1d5; }
.mobile-family-menu { position: relative; font-size: 13px; }
.mobile-family-menu > summary {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
  padding: 8px 10px; border: 1px solid #64828a; border-radius: 8px; list-style: none; cursor: pointer;
}
.mobile-family-menu > summary::-webkit-details-marker { display: none; }
.mobile-family-menu[open] > summary { background: #315e68; }
.mobile-family-menu[open] > summary > span { transform: rotate(180deg); }
.mobile-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1100;
  width: min(320px, calc(100vw - 32px)); max-height: calc(100dvh - 98px); overflow: auto;
  padding: 10px; border: 1px solid #cbdcd8; border-radius: 12px; background: #fff; color: var(--ui-ink);
  box-shadow: 0 15px 40px #173e4933;
}
.mobile-menu-caption { margin: 0; padding: 8px 10px; font-size: 12px; color: var(--ui-muted); }
.mobile-menu-panel nav { display: grid; gap: 3px; }
.mobile-menu-panel nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; min-height: 44px; border-radius: 8px; }
.mobile-menu-panel nav a[aria-current="page"] { background: #e5f3ef; color: #086d74; font-weight: 700; }
.mobile-menu-panel .nav-avatar { background: #e2f0eb; color: #196e70; }
.mobile-menu-panel nav small { margin-left: auto; color: var(--ui-muted); }
.mobile-menu-upload { display: block; min-height: 44px; padding: 11px 10px; color: #086d74; font-weight: 700; }
.mobile-menu-account { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; border-top: 1px solid #e1ebe8; padding: 12px 10px 0; }
.mobile-menu-account p { flex-basis: 100%; margin-bottom: 3px; font-weight: 700; }
.mobile-menu-account small { font-weight: 400; margin-left: 5px; color: var(--ui-muted); }
.mobile-menu-account a, .mobile-menu-account button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; border: 0; background: none; font: inherit; color: #315e68; }
.mobile-menu-empty { padding: 10px; line-height: 1.7; color: var(--ui-muted); }

/* Authentication uses the full window with a compact brand header. */
.signed-out .app-shell { display: block; }
.signed-out .sidebar { display: block; position: static; width: 100%; height: auto; min-height: 0; padding: 18px 28px; background: #fff; color: #173e49; border-bottom: 1px solid #dbe7e3; }
.signed-out .brand { width: max-content; padding: 0; }
.signed-out .brand small { color: #5d777f; }
.signed-out .page { max-width: 1100px; margin: auto; padding-top: 24px; padding-bottom: 30px; }
.signed-out .local-banner { max-width: 520px; margin-left: auto; margin-right: auto; }
.signed-out .login-wrap { min-height: calc(100dvh - 210px); }
.login-card { width: min(100%, 440px); padding: 32px; }
.login-card h1 { font-size: 2rem; }
.login-card .fine-print { color: var(--ui-muted); line-height: 1.8; }

/* Operation feedback uses real form/loading state, without artificial progress. */
.button, .main-nav a, .mobile-nav a, .status-pills a, .member-pills a,
.selected-file button, .mobile-family-menu > summary {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.button:hover { transform: none; }
.button:active:not(:disabled) { box-shadow: none; }
.is-submitting .button:disabled { cursor: wait; opacity: .78; }
.busy-spinner {
  display: inline-block; width: 16px; height: 16px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  vertical-align: -2px; animation: ui-spin .8s linear infinite;
}
.form-status, .upload-validation, .preview-load-status {
  padding: 12px 15px; border: 1px solid #c5ded8; border-radius: 9px;
  background: #eaf5f1; color: #275d62; font-size: 13px; line-height: 1.75;
  overflow-wrap: anywhere;
}
.form-status { grid-column: 1/-1; flex-basis: 100%; margin: 0; }
.task-actions form { flex-wrap: wrap; }
.task-actions .form-status { margin-top: 2px; }
.upload-selection-summary { margin: 14px 0 9px; color: #365f67; font-size: 13px; line-height: 1.7; }
.selected-files { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 0; }
.selected-files .selected-file {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 100%; min-width: 0; padding: 4px 5px 4px 13px;
  border: 1px solid #dce8e3; border-radius: 8px; background: #f5f9f7;
}
.selected-files .selected-file-name {
  min-width: 0; padding: 0; background: transparent; color: #345862;
  font-size: 13px; line-height: 1.7; overflow-wrap: anywhere;
}
.selected-file button {
  min-width: 52px; min-height: 44px; flex: none; padding: 8px 10px;
  border: 0; border-radius: 6px; background: transparent; color: #3b6570; font-size: 12px;
}
.selected-file button:hover { background: #e4eeeb; color: #144e5d; }
.upload-validation { margin: 12px 0 0; }
.upload-validation, .preview-load-status.is-error {
  background: #fff4e3; border-color: #ead5ae; color: #755321;
}
.upload-validation p { margin: 0 0 5px; }
.upload-validation p:last-child { margin-bottom: 0; }
.preview-load-status { flex: none; margin: 0 0 12px; }
.preview-load-status:not(.is-error)::before {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 8px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  vertical-align: -2px; animation: ui-spin .8s linear infinite;
}
.preview-load-status a { color: #245f70; text-decoration: underline; text-underline-offset: 3px; }
.message, .form-status, .upload-validation, .preview-load-status.is-error {
  animation: ui-feedback-in 180ms ease-out both;
}
.mobile-family-menu[open] .mobile-menu-panel, .advanced-filters[open] > .filter-grid {
  animation: ui-feedback-in 140ms ease-out both;
}
.mobile-family-menu > summary > span { transition: transform 160ms ease; }
.drop-zone { cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.drop-zone.dragging { box-shadow: 0 0 0 4px #dcefe8; }
.drop-zone:focus-within { border-color: #087c80; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-feedback-in { from { opacity: .5; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) {
  .detail-grid { grid-template-columns: minmax(0,1fr); }
  .detail-grid > .detail-panel { height: auto; max-height: none; overflow: visible; }
  .detail-grid > .preview-panel:not(.preview-expanded) { height: clamp(430px, 72vh, 800px); }
}
@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 100; background: #173e49; color: #fff; padding: 10px 16px; }
  .mobile-header .brand { font-size: 1rem; padding: 0; gap: 9px; }
  .mobile-header .brand-mark { width: 30px; height: 30px; }
  .mobile-nav { display: flex; flex-wrap: nowrap; justify-content: space-around; gap: 4px; background: #214a55; padding: 3px 8px 5px; color: #d8e9e6; }
  .mobile-nav a { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 13px; font-weight: 650; }
  .mobile-nav a[aria-current="page"] { background: #dff2eb; color: #154e58; font-weight: 800; }
  .page { padding: 24px 22px 70px; }
  .filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workflow-overview { gap: 12px; }
  .person-shell .person-head { grid-template-columns: minmax(0,1fr); }
  .person-shell .head-actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .page { padding: 20px 16px 60px; }
  .page-head { gap: 16px; margin-bottom: 22px; }
  h1 { font-size: 1.85rem; }
  .page-head p { font-size: 14px; }
  .local-banner { font-size: 12px; padding: 9px 11px; }
  .section-head { margin-top: 26px; gap: 12px; }
  .section-head > span { display: block; font-size: 12px; }
  .person-shell .person-heading { gap: 13px; }
  .person-shell .person-head { min-height: 0; gap: 16px; }
  .person-shell .person-heading p { font-size: 13px; }
  .person-shell .head-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 8px; }
  .person-shell .head-actions .primary { grid-column: 1/-1; grid-row: 1; }
  .person-shell .head-actions .button { font-size: 13px; padding: 10px 11px; white-space: normal; }
  .person-shell .person-tabs { gap: 18px; margin-bottom: 22px; }
  .person-tabs a { flex-shrink: 0; font-size: 13px; }
  .tab-section-head h2 { font-size: 1.22rem; }
  .document-filter-panel { padding: 18px; }
  .filter-top { gap: 9px; }
  .filter-top .button { flex: 1; }
  .filter-grid { gap: 13px; }
  .status-pills a, .member-pills a { min-height: 44px; padding: 8px 11px; }
  .timeline-filter { grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
  .timeline-filter input { grid-column: 1/-1; }
  .timeline-item { grid-template-columns: 16px minmax(0,1fr); gap: 6px; }
  .encounter-card { padding: 17px; gap: 8px 12px; }
  .encounter-card h3 { font-size: 1.03rem; }
  .encounter-card-side { font-size: 12px; }
  .encounter-summary-paragraph ol { padding-left: 19px; }
  .document-row { padding: 15px 13px; gap: 10px; }
  .document-row .file-icon { width: 34px; height: 38px; font-size: 11px; }
  .document-row .row-main strong { font-size: 14px; }
  .document-row .row-main small { font-size: 12px; }
  .document-row .badge { padding: 4px 7px; font-size: 11px; }
  .document-row .row-side { max-width: 65px; white-space: normal; }
  .detail-panel, .preview-panel, .review-panel { padding: 18px; }
  .detail-panel dl > div { grid-template-columns: 84px minmax(0,1fr); gap: 12px; font-size: 14px; }
  .detail-grid > .preview-panel:not(.preview-expanded) { height: min(74vh, 640px); min-height: 400px; }
  .original-heading { gap: 10px; padding: 15px; flex-wrap: wrap; }
  .original-heading .row-main { flex-basis: calc(100% - 56px); }
  .original-heading .original-status { margin-left: 52px; padding-top: 0; }
  .encounter-original-body { padding: 15px; }
  .preview-actions { gap: 7px; }
  .preview-actions .button { font-size: 12px; padding: 9px 11px; }
  .summary-toolbar { margin-top: 20px; }
  .summary-anchors a { min-height: 40px; font-size: 12px; }
  .summary-row { padding: 17px 0; }
  .summary-row-body > p { font-size: 14px; }
  .summary-empty { flex-wrap: wrap; }
  .upload-panel, .form-panel { padding: 19px; }
  .upload-steps { gap: 7px; }
  .upload-steps > div { padding: 12px 9px; }
  .upload-steps strong { font-size: 13px; }
  .drop-zone { padding: 22px 13px; }
  .drop-zone input[type="file"] { font-size: 12px; }
  .assistant-form .field > div[id] { padding: 9px; }
  .pagination { flex-wrap: wrap; row-gap: 12px; }
  .pagination > div { flex-wrap: wrap; }
  .account-permission summary { flex-wrap: wrap; gap: 8px; }
  .permission-head, .permission-row { grid-template-columns: minmax(85px,1fr) 66px 66px; }
  .signed-out .sidebar { padding: 16px; }
  .signed-out .page { padding: 20px 16px; }
  .login-card { padding: 26px 24px; }
  .login-card h1 { font-size: 1.75rem; }
}
@media (max-width: 420px) {
  .filter-grid { grid-template-columns: minmax(0,1fr); }
  .basic-filters.has-member-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .basic-filters.has-member-filter .filter-category { grid-column: 1/-1; }
  .mobile-header { padding-left: 13px; padding-right: 13px; }
  .mobile-header .brand { font-size: .93rem; gap: 7px; }
  .mobile-family-menu > summary { padding-left: 8px; padding-right: 8px; font-size: 12px; }
  .care-stats strong { font-size: 25px; }
  .care-stats > .panel { padding: 13px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .busy-spinner, .preview-load-status::before { animation: none !important; }
}

/* Report interpretation stays attached to its original and uses the shared controls. */
.report-reading-preview, .report-reading, .report-prepare { margin-top: 22px; padding: 24px; }
.report-reading-preview .section-head, .report-reading .section-head { margin-top: 0; margin-bottom: 16px; }
.report-reading-preview .section-head p, .report-reading .section-head p { color: var(--ui-muted); margin: 6px 0 0; }
.report-source-name { overflow-wrap: anywhere; }
.report-reading .answer-text { line-height: 1.9; overflow-wrap: anywhere; margin: 20px 0; }
.report-answer-snippet { line-height: 1.8; overflow-wrap: anywhere; }
@media (max-width: 600px) { .report-reading-preview, .report-reading, .report-prepare { padding: 18px; } .report-reading-preview .section-head, .report-reading .section-head { align-items: flex-start; flex-wrap: wrap; gap: 12px; } }