.lab-values-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(10, 132, 255, 0.28);
background: var(--accent-soft, rgba(10, 132, 255, 0.10));
color: var(--accent-strong, #0066cc);
font-size: 13px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
@media (hover: hover) and (pointer: fine) {
.lab-values-trigger:hover {
background: rgba(10, 132, 255, 0.18);
border-color: rgba(10, 132, 255, 0.45);
}
}
.lab-values-trigger:active { transform: translateY(1px); }
.lab-values-trigger-icon { display: inline-flex; align-items: center; }
.assessment-session-shell {
transition: padding-right 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1024px) {
body.lab-values-docked-open .assessment-session-shell {
padding-right: 464px;
}
}
.lab-values-overlay {
position: fixed;
inset: 0;
z-index: 1400;
pointer-events: none;
}
.lab-values-overlay[hidden] { display: none; }
.lab-values-panel {
pointer-events: auto;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: min(440px, 92vw);
display: flex;
flex-direction: column;
background: #ffffff;
border-left: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: -28px 0 60px rgba(15, 23, 42, 0.18);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.lab-values-overlay.is-open .lab-values-panel:not(.is-floating) { transform: translateX(0); }
.lab-values-panel.is-floating {
top: 88px;
right: auto;
height: 520px;
width: 380px;
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 18px;
box-shadow: 0 26px 70px rgba(15, 23, 42, 0.26);
overflow: hidden;
transform: none;
opacity: 0;
transition: opacity 0.18s ease;
}
.lab-values-overlay.is-open .lab-values-panel.is-floating { opacity: 1; }
.lab-values-panel.is-floating .lab-values-head {
cursor: move;
user-select: none;
}
.lab-values-panel.is-compact {
height: auto !important;
}
.lab-values-panel.is-compact .lab-values-head { padding-bottom: 10px; }
.lab-values-panel.is-compact .lab-values-eyebrow { display: none; }
.lab-values-panel.is-compact .lab-values-tabs { display: none; }
.lab-values-panel.is-compact .lab-values-unit-toggle { display: none; }
.lab-values-panel.is-compact .lab-values-resize { display: none; }
.lab-values-panel.is-compact .lab-values-body {
flex: 0 1 auto;
max-height: 320px;
padding-top: 6px;
}
.lab-values-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 18px 20px 12px;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
flex: 0 0 auto;
}
.lab-values-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-strong, #0066cc);
}
.lab-values-head h3 {
margin: 4px 0 0;
font-size: 22px;
letter-spacing: -0.03em;
color: var(--text, #111318);
}
.lab-values-panel.is-floating .lab-values-head h3 { font-size: 18px; }
.lab-values-head-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
.lab-values-icon-btn {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
border: 1px solid rgba(15, 23, 42, 0.10);
background: #f7f9fc;
color: #475467;
font-size: 19px;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.lab-values-icon-btn:hover {
background: #eef2f7;
color: var(--accent-strong, #0066cc);
border-color: rgba(10, 132, 255, 0.35);
}
}
.lab-values-icon-btn[hidden] { display: none; }
.lab-values-close { font-size: 20px; }
.lab-values-controls {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px 10px;
flex: 0 0 auto;
}
.lab-values-search {
flex: 1 1 auto;
min-width: 0;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: #f7f9fc;
font-size: 14px;
font-family: inherit;
color: var(--text, #111318);
}
.lab-values-search:focus {
outline: none;
border-color: var(--accent, #0a84ff);
background: #fff;
box-shadow: 0 0 0 3px var(--accent-soft, rgba(10, 132, 255, 0.10));
}
.lab-values-unit-toggle {
flex: 0 0 auto;
display: inline-flex;
padding: 3px;
border-radius: 999px;
background: #eef2f7;
border: 1px solid rgba(15, 23, 42, 0.06);
}
.lab-values-unit-toggle button {
border: none;
background: transparent;
padding: 7px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
font-family: inherit;
color: #667085;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.lab-values-unit-toggle button.active {
background: #fff;
color: var(--accent-strong, #0066cc);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}
.lab-values-tabs {
display: flex;
gap: 6px;
padding: 6px 20px 12px;
overflow-x: auto;
overflow-y: hidden;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
scrollbar-width: thin;
flex: 0 0 auto;
}
.lab-values-tabs button {
flex: 0 0 auto;
margin: 2px 0;
border: 1px solid rgba(15, 23, 42, 0.08);
background: #f7f9fc;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
font-family: inherit;
line-height: 1;
color: #475467;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.lab-values-tabs button:hover { background: #eef2f7; }
}
.lab-values-tabs button.active {
background: var(--accent, #0a84ff);
border-color: var(--accent, #0a84ff);
color: #fff;
}
.lab-values-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 16px 20px 28px;
}
.lab-values-cat + .lab-values-cat { margin-top: 22px; }
.lab-values-cat-title {
margin: 0 0 10px;
font-size: 15px;
letter-spacing: -0.01em;
color: var(--text, #111318);
padding-bottom: 6px;
border-bottom: 2px solid var(--accent-soft, rgba(10, 132, 255, 0.10));
}
.lab-values-group { margin-bottom: 16px; }
.lab-values-group-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent-strong, #0066cc);
margin-bottom: 6px;
}
.lab-values-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.lab-values-table td {
padding: 7px 8px;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
vertical-align: top;
line-height: 1.4;
}
.lab-values-table tr:last-child td { border-bottom: none; }
.lvt-name {
font-weight: 600;
color: var(--text, #111318);
width: 46%;
}
.lvt-qual {
color: #667085;
font-size: 12px;
width: 22%;
}
.lvt-val {
color: var(--muted-strong, #475467);
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.lab-values-empty,
.lab-values-hint {
padding: 28px 12px;
text-align: center;
color: #667085;
font-size: 14px;
}
.lab-values-dropdown {
display: flex;
flex-direction: column;
}
.lab-values-drop-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 8px 6px;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
font-size: 13px;
}
.lab-values-drop-item:last-child { border-bottom: none; }
.ldi-name { font-weight: 600; color: var(--text, #111318); }
.ldi-name em { font-style: normal; color: #667085; font-weight: 500; }
.ldi-val {
color: var(--muted-strong, #475467);
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
flex: 0 0 auto;
}
.lab-values-resize {
display: none;
position: absolute;
right: 0;
bottom: 0;
width: 18px;
height: 18px;
cursor: nwse-resize;
z-index: 2;
}
.lab-values-panel.is-floating .lab-values-resize { display: block; }
.lab-values-panel.is-floating .lab-values-head,
.lab-values-resize {
touch-action: none;
}
@media (pointer: coarse) {
.lab-values-resize { width: 36px; height: 36px; }
.lab-values-icon-btn { width: 40px; height: 40px; }
}
.lab-values-resize::after {
content: "";
position: absolute;
right: 3px;
bottom: 3px;
width: 9px;
height: 9px;
border-right: 2px solid rgba(15, 23, 42, 0.28);
border-bottom: 2px solid rgba(15, 23, 42, 0.28);
border-bottom-right-radius: 3px;
}
@media (max-width: 540px) {
.lab-values-panel { width: 100vw; border-left: none; }
.lab-values-panel.is-floating {
width: 92vw !important;
left: 4vw !important;
right: auto;
}
.lab-values-controls { flex-direction: column; align-items: stretch; }
.lab-values-unit-toggle { align-self: flex-start; }
.lvt-val { white-space: normal; }
}