/* Focused clinical surface: legible measurements and anchored floating records. */
.app-shell { max-width: 1800px; padding: 10px 14px 20px; }
.clinical-grid { grid-template-columns: minmax(270px, .94fr) minmax(425px, 1.8fr) minmax(240px, .92fr); gap: 10px; }
.column, .right-column { gap: 10px; }
.patient-header { grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.5fr) 142px; }
.patient-facts { font-size: 12px; }
.context-item strong { font-size: 12px; }
.context-item > span { font-size: 10px; }
.main-tabs { margin: 8px 0 10px; }
.last-update { font-size: 10px; }
.panel { border-color: #d7e0dc; }
.panel-header.compact,
.left-column .panel-header.compact,
.right-column .panel-header.compact { min-height: 52px; margin: 6px; padding: 8px 10px; border-radius: 8px; background: #eef4f2; }
.panel-header h2,
.left-column .panel-header h2,
.right-column .panel-header h2 { font-size: 14px; font-weight: 700; line-height: 1.25; }
.panel-header > div > span { font-size: 10px; margin-top: 3px; }
.panel-header > div > span .icon { width: 12px; height: 12px; color: #009689; }
.section-expand { flex-shrink: 0; width: 29px; height: 29px; border-color: #d3dfd9; color: #507169; background: rgba(255,255,255,.8); }
.section-expand .icon { width: 14px; height: 14px; }
.summary-body p { font-size: 12px; line-height: 1.65; }
.summary-signal { gap: 6px; }
.summary-signal span { font-size: 10px; letter-spacing: 0; white-space: nowrap; }
.summary-signal strong { font-size: 9px; }
.panel-link { height: 36px; font-size: 11px; }

/* Large numbers sit above the recorded series. Missing values break the graph. */
.vitals-matrix { grid-template-columns: repeat(3,minmax(0,1fr)); }
.vital-cell, .vital-cell:nth-child(even) { isolation: isolate; min-width: 0; min-height: 97px; padding: 10px 8px 9px; background: #fcfefd; overflow: hidden; }
.vital-cell:hover { background: #f0f9f6; }
.vital-cell > svg.vital-background { z-index: -1; position: absolute; width: 100%; height: 66%; inset: auto 0 0; opacity: 1; }
.spark-area { fill: #0f98851c; }
.spark-line { fill: none; stroke: #218d7861; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.vital-name { position: relative; z-index: 1; color: #48615b; font-size: 10px; line-height: 1.2; gap: 4px; white-space: nowrap; }
.vital-name .icon { width: 11px; height: 11px; }
.vital-cell > strong { display: block; margin: 10px 0 1px; color: #143c32; font-family: Arial,sans-serif; font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 5px #fff; }
.vital-cell.vital-pas > strong { font-size: 23px; letter-spacing: -1.2px; }
.vital-unit { display: block; font-size: 11px; color: #58756b; margin-top: 4px; }
.vital-context { min-height: 97px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: #7b9188; background: #f4f8f6; font-size: 10px; text-align: center; }
.vital-context .icon { width: 15px; height: 15px; }
.balance-summary { padding: 11px 6px; grid-template-columns: 1fr 10px 1fr 1.1fr; }
.balance-summary strong { font-size: 17px; }
.balance-summary small { font-size: 9px; }
.balance-summary em { font-size: 9px; }
.scales-grid button { min-height: 58px; padding: 8px 10px; gap: 3px; }
.scales-grid small { font-size: 11px; color: #5f766d; }
.scales-grid strong { font-family: Arial,sans-serif; font-size: 22px; font-weight: 500; }
.right-column .compact-list > button { min-height: 61px; padding: 9px 10px; }
.right-column .compact-list strong { font-size: 12px; }
.right-column .compact-list small { font-size: 10px; white-space: normal; line-height: 1.4; margin-top: 2px; }
.right-column .watch-grid button { min-height: 83px; column-gap: 5px; }
.right-column .watch-grid small { font-size: 10px; }
.right-column .watch-grid strong { font-size: 12px; }
.right-column .watch-grid em { font-size: 9px; }
.watch-grid button > span { width: 24px; height: 27px; }

/* Each record is an independent surface. Pins use image-relative coordinates. */
.anatomy-panel { overflow: hidden; background: #f6faf8; }
.anatomy-panel::before { content: none; }
.map-controls { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 2px 12px 7px; }
.map-controls .segmented { background: #e7efeb; }
.map-controls .segmented button { font-size: 10px; padding: 0 9px; height: 29px; }
.map-orientation { color: #788d83; font-size: 10px; white-space: nowrap; }
.anatomy-float-stage { position: relative; height: 590px; isolation: isolate; background: radial-gradient(ellipse at 24% 39%, #fff 0%, #edf5f0 48%, #f6faf8 76%); overflow: hidden; }
.anatomy-float-stage::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#4478631c .7px, transparent .7px); background-size: 17px 17px; mask-image: linear-gradient(100deg, #0002, #0009); pointer-events: none; }
.anatomy-orbit { position: absolute; width: 48%; height: 76%; left: 2%; top: 4%; border: 1px solid #789b8520; border-radius: 50%; box-shadow: 0 0 0 22px #518b6a06, 0 0 0 44px #518b6a04; }
.anatomy-figure { position: absolute; left: -7%; top: 10px; width: min(62%,385px); aspect-ratio: 2/3; z-index: 1; }
.anatomy-figure > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(7px 10px 8px #315d4417); user-select: none; }
.anatomy-point { position: absolute; left: var(--point-x); top: var(--point-y); transform: translate(-50%,-50%); z-index: 4; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #008d7a; box-shadow: 0 4px 12px #004d3d30,0 0 0 5px #ffffff55; transition: box-shadow .2s, background .2s; }
.anatomy-point .icon { width: 18px; height: 18px; }
.anatomy-point.diagnosis { background: #e5f5a0; color: #005243; }
.anatomy-point.selected { box-shadow: 0 0 0 6px #00524320,0 4px 16px #003b3545; }
.anatomy-point:hover { box-shadow: 0 0 0 8px #00968920,0 4px 16px #003b3545; }
.floating-cards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.floating-card { position: absolute; right: 14px; width: 49%; max-width: 308px; min-width: 0; color: #254d41; border: 1px solid #fff; border-radius: 16px; background: linear-gradient(120deg, #fffffff5, #f3faf6f5); box-shadow: 0 14px 26px -16px #174c3f65,0 3px 7px #174c3f08; pointer-events: auto; transform: perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .2s ease,box-shadow .2s ease,border-color .2s; }
.floating-card:hover, .floating-card:focus-within { box-shadow: 0 20px 28px -15px #174c3f70,0 0 0 1px #84b3a070; }
.floating-card.selected { border-color: #93bfa9; }
.float-oxygen { top: 22px; right: 12px; }
.float-diagnosis { top: 175px; right: 24px; }
.float-avp { top: 328px; right: 10px; }
.floating-card.diagnosis { background: linear-gradient(122deg, #005243, #006958); color: #fff; border-color: #2b7b62; box-shadow: 0 18px 30px -15px #003f3980; }
.float-card-select { position: relative; width: 100%; min-height: 106px; display: flex; flex-direction: column; align-items: flex-start; padding: 13px 12px 11px 47px; background: transparent; border: 0; color: inherit; text-align: left; border-radius: 15px 15px 0 0; }
.floating-icon { position: absolute; left: 11px; top: 13px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: #dff1e9; color: #00765c; }
.floating-icon .icon { width: 16px; height: 16px; }
.diagnosis .floating-icon { background: #dfee9c; color: #005243; }
.floating-type { font-size: 10px; color: #71877a; line-height: 1.3; }
.diagnosis .floating-type { color: #b4d4be; }
.float-card-select > strong { font-size: 17px; line-height: 1.25; margin: 5px 0 3px; font-weight: 700; }
.float-diagnosis .float-card-select > strong { font-size: 23px; letter-spacing: -.5px; }
.floating-description { font-size: 11px; color: #6b8577; }
.diagnosis .floating-description { color: #c8ddcd; }
.floating-value { font-family: Arial,sans-serif; font-size: 22px; font-weight: 500; margin-top: 7px; line-height: 1; }
.floating-value small { font-family: Quicksand,sans-serif; font-size: 11px; margin-left: 4px; font-weight: 600; color: #57786a; }
.floating-card footer { min-height: 31px; display: flex; align-items: center; gap: 7px; justify-content: space-between; border-top: 1px solid #1e6d4010; margin: 0 10px; color: #758878; font-size: 9px; padding: 4px 0; }
.diagnosis footer { border-top-color: #ffffff20; color: #b6cebf; }
.float-detail { flex-shrink: 0; display: grid; place-items: center; height: 23px; width: 23px; border: 0; border-radius: 6px; background: #e3f0e9; color: #306652; }
.float-detail .icon { width: 12px; height: 12px; }
.diagnosis .float-detail { color: #fff; background: #ffffff18; }
.connection-fallback,.anatomy-link-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.connection-fallback path { fill: none; stroke: #4d9f87; stroke-width: 1.4; }
.connection-fallback path.diagnosis-connection { stroke: #7e976b; }
.nonfocal-diagnoses { position: absolute; left: 43%; right: 10px; bottom: 18px; z-index: 3; }
.nonfocal-diagnoses > span { display: block; font-size: 9px; color: #84968a; margin: 0 0 6px 4px; }
.nonfocal-diagnoses > div { display: flex; flex-direction: column; gap: 5px; }
.nonfocal-diagnoses button { display: flex; align-items: center; gap: 6px; background: #edf4eef0; border: 1px solid #dae6da; border-radius: 9px; padding: 8px; color: #46614f; font-size: 10px; text-align: left; }
.nonfocal-diagnoses b { font-size: 9px; color: #52745e; }
.nonfocal-diagnoses .icon { margin-left: auto; width: 11px; height: 11px; }
.anatomy-caption { position: absolute; left: 14px; bottom: 13px; color: #809586; font-size: 9px; }

.modal.map-modal { width: min(1040px,calc(100vw - 30px)); }
.modal .expanded-anatomy { max-width: 780px; margin: auto; }
.modal .expanded-anatomy .anatomy-float-stage { height: 640px; }
.modal .expanded-anatomy .anatomy-figure { left: 0; width: 410px; max-width: 66%; }
.modal .record-text, .modal .watch-detail p { font-size: 14px; }
.modal .details-grid dt { font-size: 11px; }
.modal .details-grid dd { font-size: 14px; }
.modal table { font-size: 12px; }
.modal th { font-size: 10px; }
.watch-detail { border-bottom: 1px solid #e0e9e3; padding-bottom: 14px; margin-bottom: 14px; }
.watch-detail h3 { font-size: 15px; color: #005243; margin: 0; }
.source-link { display: inline-flex; align-items: center; gap: 8px; border: 0; background: #edf5ef; color: #005243; padding: 7px 10px; border-radius: 6px; }
.source-link .icon { width: 13px; }

@media (max-width: 1100px) {
 .clinical-grid { grid-template-columns: minmax(265px,.95fr) minmax(405px,1.6fr) minmax(230px,.85fr); }
 .right-column { grid-column: auto; display: flex; }
 .anatomy-float-stage { height: 612px; }
 .floating-card { width: 51%; right: 8px; }
 .float-diagnosis { right: 14px; }
 .float-card-select { padding-left: 39px; }
 .floating-icon { left: 8px; width: 24px; height: 24px; }
 .float-card-select > strong { font-size: 15px; }
 .float-diagnosis .float-card-select > strong { font-size: 21px; }
 .nonfocal-diagnoses { left: 38%; }
 .right-column .watch-grid { grid-template-columns: 1fr; }
 .right-column .watch-grid button { min-height: 58px; }
}
@media (max-width: 960px) {
 .patient-header { height: auto; grid-template-columns: minmax(0,1fr) 140px; }
 .patient-identity { min-height: 69px; }
 .encounter-context { display: none; }
 .clinical-grid { grid-template-columns: minmax(270px,.8fr) minmax(420px,1.2fr); }
 .map-column { grid-row: auto; }
 .left-column { display: flex; }
 .right-column { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 740px) {
 .clinical-grid { grid-template-columns: minmax(0,1fr); }
 .map-column { grid-row: auto; }
 .left-column { display: flex; }
 .right-column { grid-column: auto; display: flex; }
 .anatomy-float-stage { height: 640px; }
 .anatomy-figure { width: 62%; left: -8%; }
 .floating-card { width: 52%; }
 .map-controls { flex-wrap: wrap; }
 .map-orientation { font-size: 9px; }
 .patient-title-row h1 { white-space: normal; }
 .patient-header { grid-template-columns: minmax(0,1fr); }
 .allergy-button { min-height: 40px; }
 .main-tabs button { min-width: 112px; }
 .last-update { display: none; }
 .right-column .watch-grid { grid-template-columns: 1fr 1fr; }
 .modal .expanded-anatomy .anatomy-figure { left: -8%; max-width: 62%; }
 .nonfocal-diagnoses { left: 18%; right: 9px; }
 .anatomy-caption { bottom: 3px; }
}
@media (prefers-reduced-motion: reduce) { .floating-card,.anatomy-point { transition: none; transform: none; } .anatomy-point { transform: translate(-50%,-50%); } }

/* A compact patient ribbon and a continuous, rounded navigation surface. */
.patient-ribbon { display: grid; grid-template-columns: minmax(330px,max-content) minmax(505px,1fr) auto; gap: 12px; align-items: center; min-height: 86px; padding: 10px; border: 1px solid #d5e0da; border-radius: 25px; background: linear-gradient(110deg,#fff 45%,#f8fbf9); box-shadow: 0 4px 14px #1a443907, inset 0 1px 0 #fff; }
.patient-profile { display: flex; align-items: center; min-width: 0; gap: 12px; padding-left: 2px; }
.patient-monogram { width: 52px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(145deg,#006f5b,#004c3f); font-size: 22px; font-weight: 500; box-shadow: 0 5px 12px #0052431a,inset 0 1px 0 #ffffff25; }
.patient-profile-text { min-width: 0; }
.patient-reference { display: flex; align-items: center; gap: 5px; color: #75877f; font-size: 11px; line-height: 1.3; }
.patient-reference b { font-weight: 600; font-variant-numeric: tabular-nums; color: #567166; }
.patient-heading { display: flex; align-items: center; gap: 7px; }
.patient-heading h1 { margin: 2px 0 4px; color: #163c31; font-size: 18px; line-height: 1.25; font-weight: 700; }
.profile-expand { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; padding: 0; border: 1px solid #dce6df; background: #f7faf8; color: #5b7c6c; border-radius: 50%; transition: background .18s,border-color .18s; }
.profile-expand .icon { width: 13px; height: 13px; }
.profile-expand:hover { background: #e3f0e9; border-color: #aec9bb; }
.patient-demographics { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; font-size: 12px; color: #667d71; line-height: 1.4; }
.patient-age { font-weight: 700; color: #005243; }
.patient-demographics > span + span { padding-left: 9px; border-left: 1px solid #d9e4dd; }
.patient-measures { display: inline-flex; gap: 9px; }
.patient-measures span + span { border-left: 1px solid #d9e4dd; padding-left: 9px; }
.encounter-ribbon { align-self: stretch; display: grid; grid-template-columns: 1.16fr 1fr .95fr; align-items: center; padding: 5px 2px; border: 1px solid #e3ebe6; border-radius: 18px; background: #f1f6f3; }
.encounter-fact { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 2px 12px; }
.encounter-fact + .encounter-fact { border-left: 1px solid #dce6df; }
.encounter-fact > span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #678073; line-height: 1.3; }
.encounter-fact > span .icon { width: 13px; height: 13px; }
.encounter-fact strong { font-size: 14px; line-height: 1.3; font-weight: 600; color: #254d3d; white-space: nowrap; }
.encounter-fact strong > span { color: #597767; }
.encounter-fact em { font-style: normal; padding: 2px 6px; margin-left: 2px; border-radius: 20px; color: #256b52; background: #dfede3; font-size: 10px; font-weight: 700; }
.bed-number { margin-left: 6px; font-size: 12px; font-weight: 700; color: #005243; }
.encounter-fact .unrecorded { font-weight: 500; color: #75867a; }
.allergy-pill { min-height: 62px; align-self: stretch; display: flex; align-items: center; gap: 9px; padding: 8px 13px 8px 10px; border: 1px solid #f0d9d7; border-radius: 19px; color: #a52b29; background: #fdf0ef; text-align: left; transition: background .18s,box-shadow .18s; }
.allergy-pill:hover { background: #fbe5e3; box-shadow: 0 4px 12px #b32f2012; }
.allergy-pill-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #f9ddd9; }
.allergy-pill-icon .icon { width: 17px; height: 17px; }
.allergy-pill > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.allergy-pill strong { font-size: 14px; font-weight: 700; }
.allergy-pill small { font-size: 11px; color: #b26059; }
.allergy-pill > .icon { width: 12px; height: 12px; margin-left: 4px; }
.view-switcher { display: flex; align-items: center; min-width: 0; gap: 14px; min-height: 57px; padding: 5px; margin: 10px 0 12px; border: 1px solid #d5dfd9; border-radius: 999px; background: #ffffffed; box-shadow: 0 4px 14px #1a443906,inset 0 1px 0 #fff; }
.view-tabs { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.view-tabs button { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; height: 45px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; color: #51645b; background: transparent; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .2s,color .2s,box-shadow .2s; }
.view-tabs button .icon { width: 19px; height: 19px; }
.view-tabs button:hover { color: #005243; background: #edf4ef; }
.view-tabs button.active { color: #fff; background: linear-gradient(115deg,#005243,#08745e); border-color: #005243; box-shadow: 0 3px 9px #00524325,inset 0 1px 0 #ffffff21; }
.view-tabs button:focus-visible { outline: 2px solid #009689; outline-offset: -3px; }
.view-tabs button.active:focus-visible { outline-color: #c7e9da; }
.view-update { display: flex; flex-direction: column; gap: 2px; padding: 0 19px 0 17px; border-left: 1px solid #e0e7e2; color: #7d8d82; font-size: 11px; white-space: nowrap; }
.view-update > span:last-child { display: flex; align-items: center; gap: 5px; color: #526f5e; }
.view-update .icon { width: 12px; height: 12px; }
@media (max-width: 1180px) {
 .patient-ribbon { grid-template-columns: minmax(315px,max-content) minmax(460px,1fr) auto; gap: 8px; padding: 8px; }
 .encounter-fact { padding-left: 9px; padding-right: 9px; }
 .encounter-fact strong { font-size: 13px; }
 .allergy-pill { gap: 7px; padding-left: 8px; padding-right: 8px; }
 .allergy-pill > .icon { display: none; }
 .view-tabs button { padding: 0 12px; }
}
@media (max-width: 1040px) {
 .patient-ribbon { grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 10px; border-radius: 24px; }
 .patient-profile { grid-column: 1; grid-row: 1; }
 .allergy-pill { grid-column: 2; grid-row: 1; min-height: 58px; padding: 8px 12px; }
 .encounter-ribbon { grid-column: 1/-1; grid-row: 2; padding: 8px 3px; }
 .encounter-fact { gap: 3px; }
 .view-switcher { gap: 5px; }
 .view-update { padding-left: 12px; padding-right: 12px; }
 .view-tabs button { font-size: 13px; gap: 7px; padding: 0 10px; }
}
@media (max-width: 740px) {
 .patient-heading h1 { font-size: 16px; }
 .patient-profile { gap: 9px; }
 .patient-monogram { width: 43px; height: 50px; font-size: 19px; border-radius: 15px; }
 .patient-demographics { gap: 3px 6px; }
 .patient-demographics > span + span { padding-left: 6px; }
 .patient-measures { gap: 6px; }
 .patient-measures span + span { padding-left: 6px; }
 .allergy-pill { padding: 8px 10px; gap: 6px; }
 .allergy-pill-icon { display: none; }
 .allergy-pill strong { font-size: 13px; }
 .allergy-pill small { font-size: 10px; }
 .encounter-fact > span { font-size: 10px; }
 .encounter-fact strong { font-size: 12px; white-space: normal; }
 .bed-number { display: block; margin: 2px 0 0; }
 .encounter-fact em { font-size: 9px; padding: 1px 4px; }
 .encounter-fact > span .icon { display: none; }
 .view-switcher { min-height: 52px; margin-top: 9px; }
 .view-tabs { overflow-x: auto; scrollbar-width: none; border-radius: 999px; }
 .view-tabs button { flex: 1 0 auto; height: 40px; padding: 0 15px; font-size: 12px; }
 .view-tabs button .icon { width: 17px; height: 17px; }
 .view-update { display: none; }
}
@media (prefers-reduced-motion: reduce) { .view-tabs button,.profile-expand,.allergy-pill { transition: none; } }

/* Compact desktop overview: preserve type size and fit the full anatomy. */
.app-shell { padding-top: 6px; padding-bottom: 8px; }
.patient-ribbon { min-height: 58px; padding: 6px 8px; gap: 8px; border-radius: 20px; grid-template-columns: minmax(315px,max-content) auto minmax(650px,1fr); }
.patient-profile { gap: 9px; }
.patient-monogram { width: 40px; height: 42px; border-radius: 14px; font-size: 19px; }
.patient-heading h1 { font-size: 17px; margin: 0 0 3px; }
.patient-demographics { flex-wrap: nowrap; gap: 6px; font-size: 11px; }
.patient-demographics > span + span { padding-left: 6px; }
.patient-record { white-space: nowrap; }
.patient-record { font-weight: 400; }
.encounter-ribbon { grid-template-columns: 1.27fr 1.03fr .91fr 1.19fr 1fr; padding: 3px 0; border-radius: 14px; }
.encounter-fact { padding: 1px 9px; gap: 3px; }
.encounter-fact > span { font-size: 10px; gap: 4px; }
.encounter-fact strong { font-size: 12px; }
.encounter-fact > span .icon { width: 11px; height: 11px; }
.encounter-fact em { font-size: 9px; padding: 1px 4px; margin-left: 0; }
.bed-number { margin-left: 4px; font-size: 12px; }
.anthropometry strong { display: flex; align-items: baseline; gap: 6px; }
.anthropometry strong > span { color: #254d3d; }
.anthropometry .measure-divider { color: #91a297; }
.allergy-pill { min-height: 42px; padding: 4px 9px; border-radius: 14px; gap: 7px; }
.allergy-pill-icon { width: 25px; height: 25px; }
.allergy-pill-icon .icon { width: 14px; height: 14px; }
.allergy-pill strong { font-size: 12px; }
.allergy-pill small { font-size: 10px; }
.allergy-pill > .icon { display: none; }
.view-switcher { min-height: 40px; padding: 3px; margin: 6px 0 8px; }
.view-tabs button { height: 32px; font-size: 13px; gap: 8px; }
.view-tabs button .icon { width: 17px; height: 17px; }
.view-update { font-size: 10px; line-height: 1.2; }
.column,.right-column { gap: 6px; }
.panel-header.compact,.left-column .panel-header.compact,.right-column .panel-header.compact { min-height: 38px; padding: 3px 8px; margin: 4px; }
.panel-header > div > span { margin-top: 1px; }
.section-expand { width: 27px; height: 27px; }
.summary-body p { line-height: 1.5; }
.ai-summary .summary-body { padding: 5px 12px 8px; }
.summary-signal { margin-bottom: 5px; }
.panel-link { height: 29px; }
.vital-cell,.vital-cell:nth-child(even),.vital-context { min-height: 66px; padding: 7px 5px; }
.vital-reading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 3px; margin-top: 7px; white-space: nowrap; }
.vital-reading strong { color: #143c32; font-family: Arial,sans-serif; font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 5px #fff; }
.vital-pas .vital-reading strong { font-size: 23px; letter-spacing: -1.2px; }
.vital-reading .vital-unit { display: inline; margin: 0; font-size: 11px; letter-spacing: -.25px; }
.vital-context { flex-direction: row; gap: 5px; }
.vital-context span { line-height: 1.3; }
.balance-summary { padding: 5px 6px; }
.balance-result { padding: 4px 7px!important; }
.scales-grid button { min-height: 48px; padding: 5px 10px; gap: 1px; }
.scales-grid small { line-height: 1.2; }
.scales-grid strong { line-height: 1.1; }
.right-column .compact-list > button { min-height: 42px; padding: 4px 10px; }
.right-column .watch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.right-column .watch-grid button { min-height: 54px; padding: 4px 6px; }

@media (min-width: 961px) {
 .anatomy-panel:not(.expanded-anatomy) { --anatomy-stage-height: clamp(480px,calc(100dvh - 190px),590px); }
 .anatomy-panel:not(.expanded-anatomy) .anatomy-float-stage { height: var(--anatomy-stage-height); }
 .anatomy-panel:not(.expanded-anatomy) .anatomy-figure { top: 8px; width: min(62%,calc((var(--anatomy-stage-height) - 24px) * .666667)); }
 .anatomy-panel:not(.expanded-anatomy) .floating-cards { display: flex; flex-direction: column; gap: 10px; left: 52%; right: 10px; top: 12px; bottom: auto; }
 .anatomy-panel:not(.expanded-anatomy) .floating-card { position: relative; width: auto; max-width: none; top: auto; right: auto; }
 .anatomy-panel:not(.expanded-anatomy) .float-diagnosis { margin-left: -10px; margin-right: 8px; }
 .anatomy-panel:not(.expanded-anatomy) .float-avp { margin-left: 2px; }
 .anatomy-panel:not(.expanded-anatomy) .float-card-select { min-height: 78px; padding: 8px 10px 8px 43px; }
 .anatomy-panel:not(.expanded-anatomy) .floating-icon { top: 10px; left: 9px; }
 .anatomy-panel:not(.expanded-anatomy) .float-card-select > strong { font-size: 16px; margin-top: 3px; margin-bottom: 2px; }
 .anatomy-panel:not(.expanded-anatomy) .float-diagnosis .float-card-select > strong { font-size: 22px; }
 .anatomy-panel:not(.expanded-anatomy) .floating-value { margin-top: 4px; }
 .anatomy-panel:not(.expanded-anatomy) .floating-card footer { min-height: 27px; padding: 2px 0; }
 .anatomy-panel:not(.expanded-anatomy) .nonfocal-diagnoses { bottom: 10px; }
 .anatomy-panel:not(.expanded-anatomy) .nonfocal-diagnoses button { padding: 6px 8px; }
}
@media (min-width: 961px) and (max-width: 1200px) {
 .anatomy-panel:not(.expanded-anatomy) { --anatomy-stage-height: clamp(480px,calc(100dvh - 240px),590px); }
}
@media (max-width: 1200px) {
 .patient-ribbon { grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; }
 .patient-profile { grid-column: 1; grid-row: 1; }
 .allergy-pill { grid-column: 2; grid-row: 1; }
 .encounter-ribbon { grid-column: 1/-1; grid-row: 2; min-height: 42px; }
}
@media (max-width: 740px) {
 .patient-ribbon { padding: 7px; }
 .patient-heading h1 { font-size: 15px; }
 .patient-demographics { flex-wrap: wrap; gap: 3px 6px; }
 .patient-monogram { width: 35px; height: 39px; font-size: 17px; }
 .profile-expand { width: 24px; height: 24px; }
 .encounter-ribbon { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 8px; padding: 7px 0; }
 .encounter-fact { padding: 1px 8px; }
 .encounter-fact:nth-child(4) { border-left: 0; grid-column: 1/3; }
 .encounter-fact:nth-child(5) { grid-column: 3; }
 .bed-number { display: inline; margin-left: 4px; }
 .anthropometry strong { flex-wrap: wrap; gap: 3px; }
 .view-tabs button { height: 32px; }
}

/* Compact pill navigation shared with the timeline filter language. */
.view-switcher {
 display: flex;
 justify-content: flex-start;
 min-height: 0;
 margin: 7px 0 9px;
 padding: 0;
 border: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
 overflow: visible;
}
.view-tabs { flex: 0 1 auto; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.view-tabs::-webkit-scrollbar { display: none; }
.view-tabs button {
 flex: 0 0 auto;
 width: auto;
 min-width: 0;
 height: 35px;
 justify-content: flex-start;
 gap: 7px;
 padding: 0 14px;
 border: 1px solid #dce3d7;
 border-radius: 999px;
 background: #f9faf7;
 color: #43584c;
 font-size: 12px;
 font-weight: 600;
 box-shadow: none;
}
.view-tabs button .icon { width: 16px; height: 16px; }
.view-tabs button:hover { border-color: #a7b6a1; background: #fff; transform: translateY(-1px); }
.view-tabs button.active { border-color: #005243; background: #005243; color: #fff; box-shadow: 0 2px 5px #00524324; }
.view-update { display: none; }

/* Keep the patient context visually continuous and tab hover inside its bounds. */
.encounter-ribbon { background: #fdfdfd; }
.view-tabs button:hover { transform: none; }

/* AI provenance is visible without consuming another content row. */
.panel-header h2 .title-context { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: #6f8077; font-size: 10px; font-weight: 400; white-space: nowrap; }
.panel-header h2 .title-context i { width: 3px; height: 3px; border-radius: 50%; background: #7d8e85; }
.panel-header > div > span:has(.ai-meta) { display: block; }
.ai-meta { position: relative; display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.ai-meta > .icon { width: 13px; height: 13px; color: #009689; }
.ai-meta > span:not(.ai-tooltip) { white-space: nowrap; }
.ai-help { position: relative; z-index: 2; display: grid; place-items: center; width: 13px; height: 13px; flex: 0 0 auto; padding: 0; border: 1px solid #aabbb1; border-radius: 50%; background: #fff; color: #557266; font: 700 8px/1 Arial,sans-serif; }
.ai-help:hover,.ai-help:focus-visible { color: #fff; border-color: #005243; background: #005243; }
.ai-tooltip { position: absolute; left: 0; top: calc(100% + 7px); z-index: 30; width: max-content; max-width: 240px; padding: 8px 10px; border: 1px solid #d4dfd7; border-radius: 10px; background: #173e33; color: #fff; box-shadow: 0 8px 24px #153d3127; font-size: 11px; line-height: 1.4; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .15s,transform .15s,visibility .15s; pointer-events: none; }
.ai-help:hover + .ai-tooltip,.ai-help:focus-visible + .ai-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
.ai-summary .summary-body { padding-top: 4px; padding-bottom: 9px; }

/* A deliberately absent latest value stays explicit without implying a trend. */
.vital-cell.is-missing { background: #fcfefd; }
.vital-cell.is-missing .vital-background { display: none; }
.vital-cell.is-missing .vital-reading strong { color: #718078; font-size: 20px; font-weight: 500; letter-spacing: 0; }

/* Scale cells follow the same visual grammar as vital signs. */
.scales-grid button { position: relative; isolation: isolate; min-height: 66px; overflow: hidden; align-items: flex-start; justify-content: flex-start; background: #fcfefd; }
.scales-grid button:hover { background: #f0f9f6; }
.scale-background { position: absolute; z-index: -1; inset: auto 0 0; width: 100%; height: 66%; opacity: 1; }
.scale-background .spark-area { fill: #0f98851c; }
.scale-background .spark-line { fill: none; stroke: #218d7861; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.scale-name { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; color: #48615b; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.scale-name .icon { width: 11px; height: 11px; color: #009689; }
.scale-reading { display: flex; align-items: baseline; margin-top: 7px; white-space: nowrap; }
.scales-grid .scale-reading strong { color: #143c32; font: 700 27px/1 Arial,sans-serif; letter-spacing: -1px; text-shadow: 0 1px 5px #fff; }

/* Demographics use quiet dot separators and equal typographic weight. */
.patient-age,.patient-record { font-weight: 400; }
.patient-demographics > span + span { display: inline-flex; align-items: center; padding-left: 0; border-left: 0; }
.patient-demographics > span + span::before { content: ''; width: 3px; height: 3px; margin-right: 6px; border-radius: 50%; background: #9aa9a1; }

/* Center the body within its visual half and strengthen the non-focal group. */
.anatomy-caption { display: none; }
.nonfocal-diagnoses > span { margin: 0 0 7px 4px; color: #486657; font-size: 12px; line-height: 1.25; font-weight: 700; }
@media (min-width: 741px) {
 .anatomy-panel:not(.expanded-anatomy) .anatomy-figure { left: 1.5%; }
 .anatomy-panel:not(.expanded-anatomy) .anatomy-orbit { left: 6%; }
}
@media (max-width: 740px) {
 .view-switcher { margin: 7px 0 8px; }
 .view-tabs button { height: 34px; padding: 0 13px; }
 .panel-header .ai-meta { max-width: min(240px,65vw); }
 .ai-meta > span:not(.ai-tooltip) { overflow: hidden; text-overflow: ellipsis; }
 .anatomy-figure { left: 0; }
}

/* Clinical overview shares the same quiet canvas as the timeline and analytical views. */
body:has(#main.clinical-grid) { background: linear-gradient(180deg,#f3f6f7 0,#e9eef0 100%); }

/* Patient profile modal: grouped clinical identity instead of a flat form. */
.modal.patient-data-modal,.modal.allergy-data-modal { width: min(820px,100%); border-color: #d7e1dc; border-radius: 22px; box-shadow: 0 28px 80px #173a312e,0 6px 20px #173a310f; }
.patient-data-modal > header,.allergy-data-modal > header { height: auto; min-height: 66px; padding: 10px 14px 10px 17px; border-bottom: 1px solid #d9e4df; background: linear-gradient(110deg,#edf4f2,#f8fbfa 62%,#eef5f2); }
.modal-heading { min-width: 0; }
.modal-heading > small { display: block; margin-bottom: 3px; color: #6e8178; font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.modal-heading h2 { display: flex; align-items: center; gap: 8px; }
.modal-heading h2 > .icon { width: 17px; height: 17px; color: #397668; }
.patient-data-modal > header .icon-button,.allergy-data-modal > header .icon-button { border-radius: 50%; border-color: #d4e0da; background: #ffffffc7; }
.patient-data-modal .modal-content { padding: 0 16px 16px; background: #fbfcfc; }
.patient-modal-hero { display: grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; margin:0 -16px 14px; padding:15px 18px; border-bottom:1px solid #e0e8e4; background:linear-gradient(105deg,#fff 0,#f7faf8 72%,#edf5f1); }
.patient-modal-monogram { width: 48px; height: 50px; border-radius: 16px; font-size: 21px; }
.patient-modal-identity { min-width: 0; display: flex; flex-direction: column; }
.patient-modal-identity > strong { margin:0 0 2px; color:#173e33; font-size:17px; line-height:1.2; }
.patient-modal-identity > span { color:#718078; font-size:10px; }
.patient-modal-quick { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.patient-modal-quick span { padding:6px 9px; border:1px solid #dce7e1; border-radius:999px; background:#fff; color:#4e6b5f; font-size:10px; font-weight:600; white-space:nowrap; box-shadow:0 2px 7px #1b44380a; }
.patient-data-layout { display:grid; grid-template-columns:1.12fr .88fr; gap:10px; }
.patient-data-section { min-width:0; overflow:hidden; border:1px solid #dce5e1; border-radius:15px; background:#fff; box-shadow:0 4px 14px #153d3108; }
.patient-data-section > header { display:flex; align-items:center; gap:9px; min-height:50px; padding:8px 10px; border-bottom:1px solid #e4ebe8; background:#f1f6f4; }
.patient-data-section > header > span { width:30px; height:30px; display:grid; place-items:center; flex:none; border-radius:10px; background:#dfeee9; color:#276e5d; }
.patient-data-section > header .icon { width:15px; height:15px; }
.patient-data-section > header h3 { margin:0; color:#254f42; font-size:12px; line-height:1.2; }
.patient-data-section > header p { margin:2px 0 0; color:#7c8a85; font-size:9px; line-height:1.25; }
.patient-data-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0; padding:4px 10px 7px; }
.patient-datum { min-width:0; padding:8px 7px; border-bottom:1px solid #edf1ef; }
.patient-datum:nth-last-child(-n+2) { border-bottom:0; }
.patient-datum.span-two { grid-column:1/-1; }
.patient-datum.span-two:not(:last-child) { border-bottom:1px solid #e5ece8; }
.patient-datum dt { margin-bottom:3px; color:#7b8984; font-size:8px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.patient-datum dd { margin:0; color:#203f36; font-size:12px; font-weight:650; line-height:1.35; overflow-wrap:anywhere; }
.patient-datum small { display:block; margin-top:2px; color:#7a8b84; font-size:9px; line-height:1.35; }
.patient-datum.document-number dd { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; letter-spacing:.025em; font-variant-numeric:tabular-nums; }
.patient-birth dd { display:flex; align-items:center; gap:9px; }
.patient-birth dd > span { font-variant-numeric:tabular-nums; }
.patient-birth dd > i { width:3px; height:3px; flex:none; border-radius:50%; background:#91a49b; }
.patient-birth dd > em { padding:3px 7px; border-radius:999px; background:#e8f1ed; color:#497064; font-size:9px; font-style:normal; font-weight:600; letter-spacing:.02em; }
.patient-data-grid.single-column { grid-template-columns:1fr; }
.patient-data-grid.single-column .patient-datum { border-bottom:1px solid #edf1ef; }
.patient-data-grid.single-column .patient-datum:last-child { border-bottom:0; }
.patient-measurements .patient-datum dd { color:#245f50; font-size:14px; }

/* The main header distinguishes the social name without adding another text row. */
.civil-name-help { position:relative; width:19px; height:19px; display:grid; place-items:center; flex:none; border:1px solid #d2e0d9; border-radius:50%; background:#f5f9f7; color:#55776a; outline:0; }
.civil-name-help > .icon { width:11px; height:11px; }
.civil-name-help [role="tooltip"] { position:absolute; z-index:60; left:50%; top:calc(100% + 8px); width:max-content; max-width:230px; padding:7px 9px; border-radius:9px; background:#173e33; color:#fff; box-shadow:0 8px 22px #153d312b; font-size:10px; font-weight:500; line-height:1.35; opacity:0; visibility:hidden; transform:translate(-50%,-3px); transition:opacity .15s,transform .15s,visibility .15s; pointer-events:none; }
.civil-name-help:hover,.civil-name-help:focus-visible { border-color:#91b5a7; color:#005243; background:#e9f3ef; }
.civil-name-help:hover [role="tooltip"],.civil-name-help:focus-visible [role="tooltip"] { opacity:1; visibility:visible; transform:translate(-50%,0); }
.patient-heading { gap:6px; }
.patient-heading .profile-expand { width:19px; height:19px; margin-left:0; }
.patient-heading .profile-expand .icon { width:11px; height:11px; }

/* Prescriptions are compact read-only rows in the overview. */
.prescription-preview .compact-list > .prescription-row { width:100%; min-height:42px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; padding:4px 10px; border-top:1px solid var(--line-soft); background:#fff; }
.prescription-row > span:nth-child(2) { min-width:0; display:flex; flex-direction:column; }
.prescription-row strong { font-size:10px; }
.prescription-row small { color:var(--muted); font-size:8px; line-height:1.4; white-space:normal; }

/* Allergy details use the same modal grammar with severity-led records. */
.allergy-data-modal .modal-content { padding:14px 16px 16px; background:#fbfcfc; }
.allergy-data-modal .modal-heading h2 > .icon { color:#a54a42; }
.allergy-modal-summary { display:flex; align-items:center; gap:10px; margin-bottom:11px; padding:10px 12px; border:1px solid #eadbd7; border-radius:14px; background:linear-gradient(110deg,#fdf5f3,#fff); }
.allergy-modal-summary > span { width:32px; height:32px; display:grid; place-items:center; flex:none; border-radius:10px; background:#f4dfdb; color:#a8433b; }
.allergy-modal-summary .icon { width:16px; height:16px; }
.allergy-modal-summary div { display:flex; flex-direction:column; }
.allergy-modal-summary strong { color:#6e322d; font-size:12px; }
.allergy-modal-summary small { margin-top:1px; color:#986760; font-size:9px; }
.allergy-records { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.allergy-record { min-width:0; overflow:hidden; border:1px solid #dde5e1; border-radius:15px; background:#fff; box-shadow:0 4px 14px #153d3108; }
.allergy-record > header { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:84px; padding:11px 12px 10px; border-bottom:1px solid #ebe4e1; background:#faf5f3; }
.allergy-record > header > span { margin-bottom:6px; padding:3px 6px; border-radius:999px; background:#eee7e4; color:#6e625e; font-size:8px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.allergy-record > header > strong { max-width:calc(100% - 64px); color:#432d2b; font-size:15px; line-height:1.25; }
.allergy-record > header > em { position:absolute; top:10px; right:10px; padding:4px 7px; border-radius:999px; background:#eed1cc; color:#922f27; font-size:8px; font-style:normal; font-weight:700; text-transform:uppercase; }
.allergy-record.moderate > header { background:#fdf9ee; border-bottom-color:#eee6d1; }
.allergy-record.moderate > header > em { background:#f5e6bd; color:#805a10; }
.allergy-record.mild > header { background:#f3f8f6; border-bottom-color:#e0e9e5; }
.allergy-record.mild > header > em { background:#dcece6; color:#356c5d; }
.allergy-record dl { margin:0; padding:5px 11px 8px; }
.allergy-record dl > div { padding:7px 1px; border-bottom:1px solid #edf1ef; }
.allergy-record dl > div:last-child { border-bottom:0; }
.allergy-record dt { margin-bottom:2px; color:#84908b; font-size:8px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.allergy-record dd { margin:0; color:#344740; font-size:10px; line-height:1.45; }

@media (max-width: 680px) {
 .modal.patient-data-modal,.modal.allergy-data-modal { border-radius:18px; }
 .patient-data-modal .modal-content { padding:0 10px 10px; }
 .patient-modal-hero { grid-template-columns:auto minmax(0,1fr); margin:0 -10px 10px; padding:12px; }
 .patient-modal-quick { grid-column:1/-1; justify-content:flex-start; }
 .patient-data-layout { grid-template-columns:1fr; }
 .allergy-records { grid-template-columns:1fr; }
}