(staff.php, .user_content_container), so the
content column is sized by its WIDEST CONTENT rather than by the viewport. Anything inside it with a
large min-content width stretches the whole column — search bar, tab strip and rows together — while
the header above the table stays correctly at viewport width. It showed only on the Leads tab because
an inactive .tab-pane is display:none and contributes nothing to that calculation.
width: 0 makes this box contribute nothing; min-width: 100% then hands it the whole cell back, so the
used width is exactly what it was. That is the surgical way to stop a cell being sized by its contents
without switching the entire portal to table-layout: fixed. The availability dashboard needed the same
thing for the same reason and solved it with a max-width clamp, which does NOT work here — a percentage
max-width resolves against the cell, and the cell is the box that is too wide. */
.staff_messages_screen {
width: 0;
min-width: 100%;
}
/* THE INBOX TAB STRIP — four tabs where there used to be two (CMR-2026-11-03-546). It reads as the Visits
strip does: same font size, set inline on the
exactly as that one sets it, and the stock badge. The
only thing added here is that a label may not wrap, because a tab wrapping onto a second row moves the
list under it by a whole row height. "Voice" rather than "Voicemail" is what makes four fit at 390px. */
.staff_inbox_navigation
{
flex-wrap: nowrap;
}
.staff_inbox_navigation .nav-link
{
white-space: nowrap;
}
/* ONE SEARCH BOX, NOT TWO. The Email list carries its own search input, which is right on the Menu page
where it is the only one; inside the Inbox the box above the tab strip drives it, so the pane's own is
not shown. A row hidden by that search uses .hide_me, which is the list's own mechanism. */
.staff_inbox_lazy_pane .email_inbox_search_wrap
{
display: none;
}
/* A SEARCH OVER THE FAX AND VOICEMAIL LISTS MUST NOT OWN THEIR display. The fax filter pills write an
inline display on every row, so a search that wrote one too would fight them -- and whichever ran last
would win. This overrides an inline value without taking it over: clear the box and the pills' own
decision is what shows again. */
.inbox_search_hidden
{
display: none !important;
}
/* A LIST INSIDE A TAB HAS NO TITLE BLOCK. The three lazy panes render the same body as their Menu section,
and that body carries a page heading -- which is correct on a page of its own and redundant under a tab
already labelled with the same word. Same reasoning as the Email section's own heading rule below. */
.staff_inbox_lazy_pane .staff_nav_page_header
{
display: none;
}
.staff_inbox_lazy_pane .mchat_container.staff_nav_page
{
padding-bottom: 0;
}
.staff_inbox_pane_loading
{
display: flex;
align-items: center;
justify-content: center;
min-height: 220px;
}
/* THE FAX LIST. Its content column has no gutter of its own on a phone -- .user_content_container drops its
padding below 768px -- so the filter pills sat against the left edge and the View button against the right.
The gutter goes on the wrap, once, and matches .staff_search_bar_container above it so the pills, the dates
and the button all line up with the search box. Scoped to .staff_nav_page_body because the same list also
renders inside a side panel, where .mchat_messages already supplies 15px. */
.staff_nav_page_body .fax_inbox_wrap
{
padding: 0 10px;
}
.fax_filter_tabs
{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
/* the three colour properties stay inline, because the filter handler rewrites them on every tap */
.fax_filter_tab
{
border-radius: 20px;
padding: 5px 12px;
font-size: 0.76em;
cursor: pointer;
}
/* the same card the Email list is: white, rounded, one rule between rows. The three lists behind the Inbox
tabs are the same kind of thing and should not each look like a different screen. */
.fax_inbox_table
{
width: 100%;
border-collapse: collapse;
background: var(--surface, #fff);
border-radius: 10px;
overflow: hidden;
}
.fax_inbox_table td
{
padding: 12px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.fax_inbox_table td.fax_row_main
{
padding-right: 0;
}
.fax_inbox_table tr:last-child td
{
border-bottom: none;
}
.fax_row_action
{
text-align: right;
white-space: nowrap;
width: 1%;
}
.fax_row_action .view_fax_button
{
padding: 5px 14px;
}
/* an assigned fax says so before its date; an unassigned one says nothing, which is the common case */
.fax_row_assigned
{
color: #865EBF;
margin-right: 6px;
}
.fax_row_deleted
{
color: #ccc;
margin-right: 6px;
}
/* PRACTICE LEADS — rendered as a list, not a table, so no zebra striping or cell padding.
The rounded corners live on the container so the stack reads as one card. */
.practice_leads_list {
width: 100%;
overflow: hidden;
border-radius: 10px;
background: var(--surface, #fff);
}
.practice_leads_list .vm_row {
border-bottom: 1px solid #e5e5e5;
}
.practice_leads_list .practice_lead_swipe_wrap:last-child .vm_row {
border-bottom: 0;
}
/* the "to " line is a tertiary detail — it was inheriting body size and competing
with the message preview above it */
.vm_line {
margin-top: 2px;
color: var(--ink_soft, #6b7280);
font-size: 0.75rem;
line-height: 1.35;
}
/* contact rows inside the lead side panel */
.practice_lead_detail .lead_detail_row {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 0;
border-bottom: 1px solid var(--line, #e5e7eb);
font-size: 0.9rem;
word-break: break-word;
}
.practice_lead_detail .lead_detail_row:last-of-type {
border-bottom: 0;
}
.practice_lead_detail .lead_detail_row i {
color: var(--ink_soft, #6b7280);
flex: 0 0 auto;
}
/* UNREAD DOT */
.vm_unread .vm_from::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: var(--brand);
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
.vm_unread .vm_from {
font-weight: 700;
}
/* AVATAR */
.vm_avatar_circle {
width: 44px;
height: 44px;
background: linear-gradient(135deg, #9bb3da, #7d8fc9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
}
/* MAIN CONTENT */
.vm_main {
flex: 1;
min-width: 0;
}
.vm_top {
display: flex;
justify-content: space-between;
align-items: center;
}
.vm_from {
font-size: 17px;
font-weight: 600;
color: #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vm_time {
font-size: 14px;
color: #000;
white-space: nowrap;
}
.vm_bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2px;
}
.vm_preview {
font-size: 15px;
color: #8e8e93;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines */
-webkit-box-orient: vertical;
overflow: hidden;
/* word-break: break-word breaks a long run when it is PAINTED but does not reduce the box's
min-content width, so an unbroken run — a URL or an email address in a lead's message — still
counted toward the column width above. overflow-wrap: anywhere does reduce it, which is the
half this needed. Both are kept: they are not the same property and not the same effect. */
word-break: break-word;
overflow-wrap: anywhere;
}
.vm_duration {
font-size: 14px;
color: #8e8e93;
white-space: nowrap;
}
.vm_badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
border-radius: 10px;
margin-left: 5px;
vertical-align: middle;
}
.vm_badge_spam {
background: #fee2e2;
color: #dc2626;
}
.audit_list {
background: #fff;
border-radius: 10px;
border: 1px solid #e5e7eb;
}
/* EACH ROW */
.audit_item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-bottom: 1px solid #e5e7eb;
}
.audit_item:last-child {
border-bottom: none;
}
.audit_item:hover {
background: #f9fafb;
}
/* AVATAR */
.audit_avatar {
font-size: 28px;
color: #6b7280;
}
/* BODY */
.audit_body {
flex: 1;
min-width: 0;
}
.audit_top {
display: flex;
justify-content: space-between;
gap: 10px;
}
.audit_name {
font-weight: 600;
font-size: 15px;
color: #111827;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.audit_time {
font-size: 13px;
color: #6b7280;
white-space: nowrap;
}
/* MOBILE */
@media (max-width: 600px) {
.audit_item {
align-items: flex-start;
}
.audit_top {
flex-direction: column;
gap: 2px;
}
.audit_time {
font-size: 12px;
}
}
#chartTabsContent .tab-pane
{
padding: 10px;
}
.patient_left_sidebar {
width: 100%;
background-color: #f8f9fa;
border-right: 1px solid #e0e0e0;
padding: 5px;
min-height: 0;
overflow-y: auto;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
.patient-header {
text-align: center;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #ede8f5;
}
.patientphoto {
margin-bottom: 15px;
}
.patientphoto img {
width: 120px;
min-width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #865EBF;
box-shadow: 0 2px 8px rgba(134, 94, 191, 0.2);
}
.patient-info h2 {
font-size: 18px;
margin: 10px 0 5px 0;
color: #333;
}
.patient-id, .patient-dob {
font-size: 13px;
color: #666;
margin: 3px 0;
}
.section {
margin-bottom: 12px;
padding: 12px 14px;
background-color: #fff;
border-radius: 6px;
border: 1px solid #ede8f5;
box-shadow: 0 1px 2px rgba(134, 94, 191, 0.04);
}
.section h3 {
font-size: 12px;
font-weight: 600;
color: #865EBF;
margin: 0 0 10px 0;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.allergies-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.allergy_badge {
padding: 8px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
}
.allergy_badge.critical, .allergy_badge.severe {
background-color: #fee;
color: #c33;
border: 1px solid #f99;
}
.allergy_badge.high, .allergy_badge.moderate {
background-color: #fef3cd;
color: #856404;
border: 1px solid #ffc107;
}
.allergy_badge.mild {
background-color: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
.no-data {
color: #999;
font-style: italic;
font-size: 12px;
}
.contact-details p,
.insurance-details p,
.emergency-details p,
.mysidesection {
margin: 6px 0;
font-size: 12px;
line-height: 1.5;
}
.contact-details strong,
.insurance-details strong,
.emergency-details strong {
color: #333;
display: inline-block;
min-width: 70px;
}
.floating_video_container {
touch-action: none; /* disables browser panning */
user-select: none; /* prevents text selection */
}
/* Keep active staff video above the Visit drawer (z-index 1000). */
.floating_video_container.active_video_container {
z-index: 1010 !important;
}
.floating_video_container button {
pointer-events: auto;
}
.myvisit_col2 {
position: relative;
}
.column_resizer {
position: absolute;
top: 0;
right: 0;
width: 6px;
height: 100%;
cursor: col-resize;
background: transparent;
transition: background 0.2s;
}
.column_resizer:hover {
background: rgba(134, 94, 191, 0.12);
}
.column_resizer::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 40px;
background: rgba(134, 94, 191, 0.35);
transform: translate(-50%, -50%);
border-radius: 2px;
transition: background 0.2s;
}
.column_resizer:hover::after {
background: rgba(134, 94, 191, 0.7);
}
/* prevents text selection while drag to resize */
body.resizing {
cursor: col-resize;
user-select: none;
}
.myvisit_col1,
.myvisit_col2,
.myvisit_col3 {
min-width: 0;
transition: flex 0.25s ease, width 0.25s ease;
}
.skeleton-card {
background: #ffffff;
border-radius: 12px;
padding: 14px;
margin-bottom: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.skeleton-card.large {
min-height: 260px;
}
.skeleton-title {
height: 34px;
width: 55%;
border-radius: 8px;
margin-bottom: 12px;
background: linear-gradient(90deg,#e4e7eb 25%,#f0f2f5 37%,#e4e7eb 63%);
background-size: 400% 100%;
animation: shimmer 1.4s ease infinite;
}
.skeleton-line {
height: 14px;
border-radius: 6px;
margin-bottom: 10px;
background: linear-gradient(90deg,#e4e7eb 25%,#f0f2f5 37%,#e4e7eb 63%);
background-size: 400% 100%;
animation: shimmer 1.4s ease infinite;
}
.w40 { width:40%; }
.w50 { width:50%; }
.w55 { width:55%; }
.w60 { width:60%; }
.w65 { width:65%; }
.w70 { width:70%; }
.w75 { width:75%; }
.w80 { width:80%; }
.w85 { width:85%; }
.w90 { width:90%; }
.w95 { width:95%; }
@keyframes shimmer {
0% { background-position:100% 0; }
100% { background-position:0 0; }
}
:root {
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
}
.video-display video {
width: 100%;
height: 100%;
object-fit: contain;
}
.video-display.portrait-video video {
max-height: min(45vh, 360px);
}
.video-display.landscape-video video {
max-height: min(35vh, 260px);
}
/* CSS: Add Smooth Aspect-Ratio + Size Transitions */
.video-display
{
aspect-ratio: 16 / 9; /* temporary placeholder */
background: #000;
transition:
aspect-ratio 220ms ease,
width 220ms ease,
height 220ms ease;
}
/* Floating video container */
.floating_video_container
{
transition:
width 220ms ease,
height 220ms ease,
/*
top 220ms ease,
left 220ms ease;
*/
}
/* Prevent stretch */
.video-display video
{
width: 100%;
height: 100%;
object-fit: cover;
}
.fullsize_class
{
max-height: 100dvh !important;
margin-left: auto;
margin-right: auto;
}
.patient_fullsize
{
height: 100dvh;
background: black !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.patient_fullsize #primary_video_container
{
max-height: 100dvh !important;
}
.patient_fullsize .video-display
{
height: 100dvh;
max-width: 100dvw;
}
.patient_fullsize .lower_video_controls
{
padding-bottom: env(safe-area-inset-bottom);
}
.patient_fullsize .upper_video_controls
{
padding-top: env(safe-area-inset-top);
background: rgb(17, 17, 17);
color: white;
}
.patient_fullsize .show_when_fullscreen
{
display: inline-block;
}
.patient_fullsize #self_video_container
{
top: calc(env(safe-area-inset-top) + 8px + 45px) !important;
}
.video_camera_off_placeholder
{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* ============================================================
Clinician interest side panel
============================================================ */
.provider_interest_panel .mchat_header
{
background:
radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--surface) 14%, transparent), transparent 38%),
var(--brand);
}
.provider_interest_header_copy
{
padding-left: 0 !important;
text-align: left;
}
.provider_interest_header_subtitle
{
display: block;
margin-top: 2px;
color: color-mix(in srgb, var(--surface) 76%, transparent);
font-size: 0.72rem;
font-weight: 500;
}
.provider_interest_time_badge
{
display: inline-flex;
padding: 5px 8px;
align-items: center;
gap: 4px;
border-radius: var(--radius_pill);
background: color-mix(in srgb, var(--surface) 13%, transparent);
color: var(--surface);
font-size: 0.67rem;
font-weight: 700;
white-space: nowrap;
}
.provider_interest_messages
{
display: block;
padding: 22px 20px 28px;
background: var(--page);
overscroll-behavior: contain;
}
.provider_interest_intro_card
{
position: relative;
overflow: hidden;
padding: 21px;
border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.provider_interest_intro_card::after
{
position: absolute;
top: -48px;
right: -45px;
width: 118px;
height: 118px;
border-radius: 50%;
background: var(--brand_soft);
content: '';
opacity: 0.7;
}
.provider_interest_intro_icon
{
position: relative;
z-index: 1;
display: inline-flex;
width: 42px;
height: 42px;
margin-bottom: 15px;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: var(--brand_soft);
color: var(--brand);
font-size: 1.05rem;
}
.provider_interest_intro_card h2
{
position: relative;
z-index: 1;
margin: 0;
color: var(--brand_deep);
font-size: 1.26rem;
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.15;
}
.provider_interest_intro_card p
{
position: relative;
z-index: 1;
max-width: 410px;
margin: 9px 0 0;
color: var(--muted);
font-size: 0.83rem;
line-height: 1.6;
}
.provider_interest_section
{
margin-top: 24px;
}
.provider_interest_section_heading
{
display: flex;
margin-bottom: 11px;
align-items: baseline;
justify-content: space-between;
gap: 16px;
color: var(--ink);
font-size: 0.78rem;
font-weight: 800;
}
.provider_interest_section_heading span
{
color: var(--muted);
font-size: 0.67rem;
font-weight: 500;
}
.provider_profession_grid
{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.provider_profession_option
{
min-height: 78px;
padding: 11px 8px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
color: var(--muted);
text-align: center;
transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.provider_profession_option i
{
display: block;
margin-bottom: 5px;
font-size: 1.05rem;
}
.provider_profession_option span
{
display: block;
font-size: 0.71rem;
font-weight: 750;
line-height: 1.25;
}
.provider_profession_option.selected
{
border: 2px solid var(--brand);
background: var(--brand_soft);
box-shadow: var(--shadow_xs);
color: var(--brand);
}
.provider_interest_field_card
{
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.provider_interest_field_card .form-control
{
color: var(--ink);
}
.provider_interest_field_card .form-control:focus
{
box-shadow: inset 3px 0 0 var(--brand);
}
.provider_state_field
{
position: relative;
}
.provider_state_trigger
{
display: flex;
width: 100%;
min-height: 51px;
padding: 8px 10px 8px 13px;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
color: var(--ink);
text-align: left;
}
.provider_state_trigger:hover,
.provider_state_trigger[aria-expanded='true']
{
border-color: var(--brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.provider_state_trigger_copy
{
display: flex;
align-items: center;
gap: 10px;
}
.provider_state_trigger_icon
{
display: inline-flex;
width: 30px;
height: 30px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: var(--brand_soft);
color: var(--brand);
}
.provider_state_trigger_copy strong,
.provider_state_trigger_copy small
{
display: block;
}
.provider_state_trigger_copy strong
{
font-size: 0.79rem;
font-weight: 750;
}
.provider_state_trigger_copy small
{
margin-top: 1px;
color: var(--muted);
font-size: 0.66rem;
}
.provider_selected_states
{
display: flex;
margin-top: 10px;
gap: 7px;
flex-wrap: wrap;
}
.provider_selected_state
{
display: inline-flex;
min-height: 30px;
padding: 4px 8px 4px 10px;
align-items: center;
gap: 7px;
border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
border-radius: var(--radius_pill);
background: var(--brand_soft);
color: var(--brand);
font-size: 0.7rem;
font-weight: 750;
}
.provider_selected_state.hide_me
{
display: none;
}
.provider_remove_state
{
display: inline-flex;
width: 19px;
height: 19px;
padding: 0;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--brand) 13%, transparent);
color: var(--brand);
line-height: 1;
}
.provider_state_picker
{
position: absolute;
top: calc(100% + 8px);
right: 0;
left: 0;
z-index: 10;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow);
}
.provider_state_picker_header
{
padding: 14px;
border-bottom: 1px solid var(--line);
}
.provider_state_picker_title_row
{
display: flex;
margin-bottom: 10px;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 0.78rem;
}
.provider_state_done
{
padding: 4px 7px;
border: 0;
background: transparent;
color: var(--brand);
font-size: 0.72rem;
font-weight: 800;
}
.provider_state_search_group
{
position: relative;
}
.provider_state_search_group i
{
position: absolute;
top: 50%;
left: 11px;
color: var(--muted);
transform: translateY(-50%);
}
.provider_state_search
{
width: 100%;
height: 40px;
padding: 0 12px 0 35px;
border: 1px solid var(--line);
border-radius: var(--radius);
outline: 0;
background: var(--page);
color: var(--ink);
font-size: 0.78rem;
}
.provider_state_search:focus
{
border-color: var(--brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.provider_state_options
{
display: grid;
max-height: 230px;
overflow-y: auto;
padding: 7px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3px;
}
.provider_state_option
{
display: flex;
min-height: 43px;
padding: 7px 9px;
align-items: center;
gap: 9px;
border-radius: var(--radius);
cursor: pointer;
}
.provider_state_option:hover
{
background: var(--page);
}
.provider_state_option input
{
width: 17px;
height: 17px;
margin: 0;
accent-color: var(--brand);
}
.provider_state_abbr
{
display: inline-flex;
width: 27px;
height: 27px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border-radius: 7px;
background: var(--page);
color: var(--brand_deep);
font-size: 0.62rem;
font-weight: 800;
}
.provider_state_name
{
overflow: hidden;
color: var(--ink);
font-size: 0.7rem;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.provider_state_option:has(input:checked)
{
background: var(--brand_soft);
}
.provider_state_option:has(input:checked) .provider_state_abbr
{
background: var(--brand);
color: var(--surface);
}
.provider_state_empty
{
padding: 22px;
color: var(--muted);
font-size: 0.76rem;
text-align: center;
}
.provider_interest_privacy_note
{
display: flex;
margin-top: 18px;
padding: 12px 13px;
align-items: flex-start;
gap: 10px;
border-radius: var(--radius);
background: var(--surface);
color: var(--muted);
font-size: 0.69rem;
line-height: 1.5;
}
.provider_interest_privacy_note i
{
margin-top: 1px;
color: var(--green);
}
.provider_interest_footer
{
display: block;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
border-top: 0;
background: var(--surface);
box-shadow: none;
}
.provider_interest_footer_note
{
margin-top: 7px;
color: var(--muted);
font-size: 0.64rem;
text-align: center;
}
@media (max-width: 720px)
{
.provider_interest_messages
{
padding: 18px 15px 24px;
}
.provider_state_picker
{
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
max-height: min(74vh, 620px);
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 18px 18px 0 0;
box-shadow: 0 -20px 60px color-mix(in srgb, var(--brand_deep) 20%, transparent);
}
.provider_state_picker::before
{
display: block;
width: 38px;
height: 4px;
margin: 8px auto 0;
border-radius: var(--radius_pill);
background: var(--line);
content: '';
}
.provider_state_options
{
max-height: min(51vh, 430px);
grid-template-columns: 1fr;
}
.provider_state_option
{
min-height: 48px;
}
}
@media (max-width: 390px)
{
.provider_profession_grid
{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.provider_interest_time_badge
{
display: none;
}
}
/* ============================================================
AI Scribe – Conflict Strikethrough
Strikethrough marks applied by scribe to contradicted content
are styled red so physicians can spot them instantly.
============================================================ */
.chart_editor_container .ProseMirror s,
.chart_editor_container .ProseMirror del
{
color: #dc3545;
text-decoration-color: #dc3545;
}
/* ============================================================
AI Scribe Floating Panel
============================================================ */
.ai_scribe_panel
{
position: fixed;
bottom: calc(80px + env(safe-area-inset-bottom));
right: 20px;
width: 280px;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.22);
z-index: 99999;
overflow: hidden;
}
.ai_scribe_panel_header
{
background: #865EBF;
color: #fff;
padding: 10px 14px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 0.95em;
}
.ai_scribe_panel_header .btn
{
color: #fff;
border-color: rgba(255,255,255,0.5);
padding: 2px 8px;
font-size: 0.8em;
line-height: 1.4;
}
.ai_scribe_panel_body
{
padding: 24px 20px 20px;
text-align: center;
}
.scribe_mic_button
{
width: 80px;
height: 80px;
border-radius: 50%;
background: #dc3545;
border: none;
color: #fff;
font-size: 2em;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
box-shadow: 0 4px 14px rgba(220,53,69,0.35);
cursor: pointer;
transition: transform 0.15s;
}
.scribe_mic_button:hover
{
transform: scale(1.06);
}
.scribe_mic_button.recording_active
{
animation: scribe_mic_pulse 1.4s infinite;
}
@keyframes scribe_mic_pulse
{
0% { box-shadow: 0 0 0 0 rgba(220,53,69,0.55); }
70% { box-shadow: 0 0 0 18px rgba(220,53,69,0); }
100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}
.scribe_timer_display
{
font-size: 30px;
font-weight: 700;
color: #dc3545;
letter-spacing: 1px;
line-height: 1;
}
.scribe_status_label
{
font-size: 12px;
color: #888;
margin-top: 6px;
}
/* AI scribe panel controls, scoped to the panel id so no page or WebView default can repaint them white */
#ai_scribe_panel .scribe_mic_button
{
background: var(--brand);
color: #fff;
box-shadow: 0 4px 14px rgba(134,94,191,0.35);
}
#ai_scribe_panel .scribe_mic_button i
{
color: #fff;
}
#ai_scribe_panel .scribe_mic_button.recording_active
{
background: #dc3545;
box-shadow: 0 4px 14px rgba(220,53,69,0.35);
}
#ai_scribe_panel .scribe_status_label
{
color: var(--muted);
}
#ai_scribe_panel .stop_scribe_recording_button
{
background: var(--brand);
color: #fff;
border: none;
}
/* ===================================================
Staff Availability Calendar (.edit_staffcal_container)
All display_admin_calendar output lives here.
Changes are fully scoped — no other calendars affected.
=================================================== */
.staff_availability_dashboard,
.staff_availability_dashboard > .tab-content,
.staff_availability_dashboard > .tab-content > .tab-pane
{
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: hidden;
}
.edit_staffcal_container
{
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
}
.edit_staffcal_container .StaffCalendarSwiper
{
overflow: hidden;
width: 100%;
max-width: 100%;
min-width: 0;
}
.require_legal_field
{
position: relative;
border: 1px solid #c4a8e8;
border-radius: 4px;
background: #faf5ff;
transition: box-shadow 0.3s, background 0.3s;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 8px;
padding-right: 8px;
margin-left: -8px;
margin-right: -8px;
}
.legal_doc_active_field
{
background: #f3e8ff !important;
box-shadow: 0 0 0 7px #f3e8ff, 0 0 0 9px #865EBF;
border-radius: 12px;
transition: background 0.2s, box-shadow 0.2s;
}
/* Signing-line alignment: label column + stretching input column */
p.doc_signing_line
{
display: flex;
align-items: baseline;
gap: 6px;
}
p.doc_signing_line .doc_signing_label
{
flex-shrink: 0;
white-space: nowrap;
vertical-align: baseline;
}
/* Prefilled value — looks like a locked filled field */
p.doc_signing_line .doc_signing_prefilled
{
flex: 1 1 auto;
display: inline-block;
vertical-align: baseline;
border-bottom: 2px solid #865EBF;
padding-bottom: 1px;
color: #1f2937;
font-size: 1em;
}
/* ============================================================
FULLSCREEN PATIENT CHART v2
============================================================ */
.chart_fs_overlay
{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
background: white;
z-index: 10000;
display: flex;
flex-direction: column;
opacity: 0;
transform: scale(0.99);
transition: opacity 0.2s ease, transform 0.2s ease;
overflow: hidden;
}
.chart_fs_overlay.chart_fs_open
{
opacity: 1;
transform: scale(1);
}
/* — Topbar — */
.chart_fs_topbar
{
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
padding: 10px 16px;
padding-top: calc(10px + env(safe-area-inset-top));
background: white;
border-bottom: 1px solid #e5e7eb;
flex-shrink: 0;
z-index: 10;
gap: 12px;
}
.chart_fs_topbar_left
{
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
flex: 1;
min-width: 0;
}
.chart_fs_topbar_right
{
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.chart_fs_avatar
{
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
background: #e5e7eb;
flex-shrink: 0;
}
.chart_fs_patient_name
{
font-size: 15px;
font-weight: 600;
color: #111827;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chart_fs_patient_meta
{
font-size: 12px;
color: #6b7280;
white-space: nowrap;
}
.chart_fs_allergy_badge
{
display: inline-flex;
align-items: center;
gap: 4px;
background: #fee2e2;
color: #dc2626;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
cursor: pointer;
}
/* — Body (sidebar + content) — */
.chart_fs_body
{
display: flex;
flex: 1;
overflow: hidden;
position: relative;
}
/* — Sidebar — */
.chart_fs_sidebar
{
width: 200px;
background: #f9fafb;
border-right: 1px solid #e5e7eb;
overflow-y: auto;
flex-shrink: 0;
padding: 8px 0 40px;
}
.chart_fs_nav_group_label
{
font-size: 10px;
font-weight: 700;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 14px 16px 4px;
}
.chart_fs_nav_item
{
display: flex;
align-items: center;
gap: 9px;
padding: 9px 16px;
font-size: 13.5px;
color: #374151;
cursor: pointer;
text-decoration: none;
border-left: 3px solid transparent;
transition: background 0.1s, color 0.1s;
}
.chart_fs_nav_item:hover
{
background: #f3f4f6;
color: #111827;
text-decoration: none;
}
.chart_fs_nav_item.active
{
background: #f3e8ff;
color: #865EBF;
border-left-color: #865EBF;
font-weight: 600;
}
.chart_fs_nav_item i
{
font-size: 14px;
width: 16px;
text-align: center;
flex-shrink: 0;
}
/* — Mobile tabs (hidden on desktop) — */
.chart_fs_mobile_tabs
{
display: none;
background: white;
border-bottom: 1px solid #e5e7eb;
flex-shrink: 0;
}
.chart_fs_mobile_tabs_scroll
{
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0 8px;
}
.chart_fs_mobile_tabs_scroll::-webkit-scrollbar
{
display: none;
}
.chart_fs_mobile_tab
{
flex-shrink: 0;
padding: 10px 14px;
font-size: 13px;
color: #6b7280;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
}
.chart_fs_mobile_tab.active
{
color: #865EBF;
font-weight: 600;
border-bottom-color: #865EBF;
}
/* — Content area — */
.chart_fs_content
{
flex: 1;
overflow-y: auto;
background: #f5f5f7;
padding: 20px;
padding-bottom: calc(60px + env(safe-area-inset-bottom));
min-width: 0;
}
.chart_fs_section
{
display: block;
}
.chart_fs_section.hide_me
{
display: none !important;
}
/* — Section cards — */
.chart_fs_card
{
background: white;
border-radius: 10px;
padding: 20px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.chart_fs_card_header
{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #f3f4f6;
}
.chart_fs_card_title
{
font-size: 14px;
font-weight: 600;
color: #111827;
display: flex;
align-items: center;
gap: 7px;
}
.chart_fs_card_title i
{
color: #865EBF;
font-size: 15px;
}
.chart_fs_card_action
{
font-size: 12px;
color: #865EBF;
cursor: pointer;
background: none;
border: none;
padding: 0;
font-weight: 600;
}
.chart_fs_card_action:hover
{
text-decoration: underline;
}
.chart_fs_empty_state
{
text-align: center;
padding: 32px 20px;
color: #9ca3af;
font-size: 13px;
}
.chart_fs_empty_state i
{
font-size: 28px;
display: block;
margin-bottom: 8px;
color: #d1d5db;
}
/* — Skeleton loader — */
.chart_fs_skeleton_line
{
height: 14px;
background: #e5e7eb;
border-radius: 4px;
margin-bottom: 10px;
animation: chart_fs_pulse 1.5s ease-in-out infinite;
}
@keyframes chart_fs_pulse
{
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* — Mobile responsive — */
@media (max-width: 767px)
{
.chart_fs_sidebar
{
display: none;
}
.chart_fs_mobile_tabs
{
display: block;
}
.chart_fs_content
{
padding: 12px;
padding-bottom: calc(40px + env(safe-area-inset-bottom));
}
.chart_fs_topbar_right .chart_fs_action_btn
{
display: none;
}
.chart_fs_patient_meta
{
display: none;
}
}
/* ============================================================
LONGITUDINAL PATIENT CHART SIDE PANEL
============================================================ */
.patient_chart_panel_v2
{
background: var(--page);
}
.patient_chart_panel_v2 .patient_chart_panel_header
{
display: block;
padding: calc(14px + env(safe-area-inset-top)) 12px 0;
background: var(--patient_chart);
color: var(--surface);
}
.patient_chart_identity_row
{
display: grid;
grid-template-columns: 75px minmax(0, 1fr) 40px;
align-items: start;
gap: 12px;
}
.patient_chart_photo
{
width: 75px;
height: 75px;
overflow: hidden;
border-radius: 4px;
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.patient_chart_photo img
{
width: 75px;
height: 75px;
object-fit: cover;
}
.patient_chart_identity_text
{
min-width: 0;
padding-top: 2px;
}
.patient_chart_patient_name
{
overflow: hidden;
color: var(--surface);
font-size: 1rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.patient_chart_patient_meta,
.patient_chart_record_meta
{
margin-top: 4px;
color: rgba(255, 255, 255, 0.82);
font-size: 0.8rem;
}
.patient_chart_record_meta
{
display: flex;
align-items: center;
gap: 4px;
}
.patient_chart_close_button
{
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--radius_pill);
background: transparent;
color: rgba(255, 255, 255, 0.82);
font-size: 1.35rem;
}
.patient_chart_header_actions
{
display: grid;
grid-template-columns: repeat(4, 42px) minmax(82px, 1fr);
gap: 5px;
margin: 13px 0 12px;
}
.patient_chart_header_action,
.patient_chart_tools_button
{
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 5px;
background: transparent;
color: var(--surface);
}
.patient_chart_header_action:hover
{
background: rgba(255, 255, 255, 0.12);
color: var(--surface);
}
.patient_chart_tools_container
{
width: 100%;
}
.patient_chart_tools_button
{
width: 100%;
padding: 0 10px;
border-color: var(--surface);
background: var(--surface);
color: var(--patient_chart);
font-size: 0.85rem;
font-weight: 700;
}
.patient_chart_panel_v2 .patient_chart_primary_tabs
{
display: block;
border: 0;
background: transparent;
}
.patient_chart_panel_v2 .chart_fs_mobile_tabs_scroll
{
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
padding: 0;
overflow: visible;
}
.patient_chart_panel_v2 .chart_fs_mobile_tab
{
min-width: 0;
padding: 11px 4px;
color: rgba(255, 255, 255, 0.78);
border-bottom: 3px solid transparent;
font-size: 0.78rem;
}
.patient_chart_panel_v2 .chart_fs_mobile_tab.active
{
color: var(--surface);
border-bottom-color: var(--surface);
font-weight: 700;
}
.patient_chart_panel_messages
{
display: block;
padding: 0;
background: var(--page);
}
.patient_chart_panel_v2 .patient_chart_panel_content
{
min-height: 100%;
padding: 14px;
padding-bottom: calc(36px + env(safe-area-inset-bottom));
overflow: visible;
background: var(--page);
}
.patient_chart_group_heading
{
margin: 2px 2px 10px;
color: var(--ink);
font-size: 1rem;
font-weight: 700;
}
.patient_chart_section_grid
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.patient_chart_section_button
{
min-width: 0;
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 14px;
align-items: center;
gap: 8px;
padding: 12px 10px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
color: var(--ink);
text-align: left;
box-shadow: var(--shadow_xs);
}
.patient_chart_section_icon
{
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: var(--patient_chart_soft);
color: var(--patient_chart);
}
.patient_chart_section_text,
.patient_chart_section_name,
.patient_chart_section_meta
{
min-width: 0;
display: block;
}
.patient_chart_section_name
{
overflow: hidden;
font-size: 0.86rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.patient_chart_section_meta
{
overflow: hidden;
margin-top: 2px;
color: var(--muted);
font-size: 0.72rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.patient_chart_section_button > .bi-chevron-right
{
color: var(--muted);
font-size: 0.75rem;
}
.patient_chart_detail_header
{
display: grid;
grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.patient_chart_back_button
{
justify-self: start;
padding: 5px 0;
border: 0;
background: transparent;
color: var(--patient_chart);
font-size: 0.8rem;
}
.patient_chart_detail_title
{
color: var(--ink);
font-size: 1rem;
font-weight: 700;
}
.patient_chart_overview_container
{
margin-bottom: 16px;
}
.patient_chart_allergy_alert
{
width: 100%;
display: grid;
grid-template-columns: 20px minmax(0, 1fr) 14px;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding: 11px 12px;
border: 1px solid var(--danger);
border-radius: var(--radius_lg);
background: var(--danger_soft);
color: var(--danger);
text-align: left;
}
.patient_chart_overview_grid
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.patient_chart_overview_item
{
min-width: 0;
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
color: var(--ink);
text-align: left;
box-shadow: var(--shadow_xs);
}
button.patient_chart_overview_item
{
cursor: pointer;
}
.patient_chart_overview_label,
.patient_chart_overview_value
{
display: block;
}
.patient_chart_overview_label
{
color: var(--muted);
font-size: 0.72rem;
}
.patient_chart_overview_value
{
margin-top: 4px;
font-size: 0.9rem;
font-weight: 700;
}
.patient_chart_record_card
{
margin-bottom: 10px;
padding: 13px;
border: 1px solid var(--line);
border-left: 4px solid var(--patient_chart);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.patient_chart_record_date
{
color: var(--muted);
font-size: 0.72rem;
}
.patient_chart_record_value
{
margin-top: 4px;
color: var(--ink);
font-size: 0.86rem;
}
.patient_chart_empty_state
{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 34px 20px;
color: var(--muted);
text-align: center;
}
.patient_chart_empty_state i
{
color: var(--patient_chart);
font-size: 1.5rem;
}
.patient_chart_panel_v2 .chart_fs_card_title i,
.patient_chart_panel_v2 .chart_fs_card_action
{
color: var(--patient_chart);
}
/* Normalize legacy chart content inside the longitudinal mobile shell. */
.patient_chart_loaded_section,
.patient_chart_info_stack
{
width: 100%;
}
.patient_chart_info_stack
{
display: flex;
flex-direction: column;
gap: 10px;
}
.patient_chart_info_card
{
margin: 0 0 10px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.patient_chart_info_stack > .patient_chart_info_card
{
margin-bottom: 0;
}
.patient_chart_info_header
{
min-height: 43px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 11px 8px 13px;
border-bottom: 1px solid var(--line);
color: var(--ink);
font-size: 0.86rem;
font-weight: 700;
}
.patient_chart_info_header .btn,
.patient_chart_panel_v2 .patient_chart_info_body .btn
{
min-height: 30px;
padding: 4px 10px;
border-color: var(--patient_chart);
color: var(--patient_chart);
font-size: 0.76rem;
line-height: 1.2;
}
.patient_chart_info_header .btn:hover,
.patient_chart_panel_v2 .patient_chart_info_body .btn:hover
{
border-color: var(--patient_chart);
background: var(--patient_chart);
color: var(--surface);
}
.patient_chart_info_body
{
padding: 11px 13px;
color: var(--ink);
font-size: 0.82rem;
line-height: 1.45;
}
.patient_chart_legacy_section > .section_outer_container,
.patient_chart_legacy_section > div,
.patient_chart_info_body > .section_outer_container,
.patient_chart_info_body > div:first-child
{
margin-top: 0;
}
.patient_chart_legacy_section .color_gainsboro,
.patient_chart_info_body .color_gainsboro
{
background: var(--surface) !important;
}
.patient_chart_legacy_section > .color_gainsboro:first-child,
.patient_chart_contact_section > div:first-child
{
min-height: 43px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 11px 8px 13px !important;
border-bottom: 1px solid var(--line);
background: var(--surface) !important;
font-size: 0.86rem;
}
.patient_chart_legacy_section table,
.patient_chart_info_body table
{
width: 100% !important;
margin: 0 !important;
border-collapse: collapse;
background: transparent;
font-size: 0.8rem;
}
.patient_chart_legacy_section th,
.patient_chart_legacy_section td,
.patient_chart_info_body th,
.patient_chart_info_body td
{
height: auto !important;
padding: 8px 5px !important;
border-color: var(--line) !important;
vertical-align: top;
}
.patient_chart_legacy_section table.table-striped > tbody > tr:nth-of-type(odd) > *,
.patient_chart_info_body table.table-striped > tbody > tr:nth-of-type(odd) > *
{
--bs-table-accent-bg: var(--page);
}
.patient_chart_status_grid
{
padding: 2px 13px 6px;
}
.patient_chart_status_row
{
min-height: 39px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--line);
color: var(--muted);
font-size: 0.8rem;
}
.patient_chart_status_row:last-child
{
border-bottom: 0;
}
.patient_chart_status_row strong
{
font-size: 0.78rem;
font-weight: 700;
text-align: right;
}
.patient_chart_status_row .is_positive
{
color: var(--green);
}
.patient_chart_status_row .is_negative
{
color: var(--danger);
}
.patient_chart_status_row .is_neutral
{
color: var(--muted);
}
.patient_chart_status_row .is_info
{
color: var(--patient_chart);
}
.patient_chart_panel_v2 .appointment-card,
.patient_chart_panel_v2 .document_tr,
.patient_chart_panel_v2 .imaging_tr,
.patient_chart_panel_v2 .medication-card
{
padding: 12px !important;
margin-bottom: 10px !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius_lg) !important;
background: var(--surface) !important;
box-shadow: var(--shadow_xs);
font-size: 0.82rem;
}
.patient_chart_record_meta_line
{
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
margin-top: 5px;
color: var(--muted);
font-size: 0.76rem;
}
.patient_chart_document_card,
.patient_chart_visit_card
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 12px !important;
}
.patient_chart_document_main
{
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.patient_chart_document_icon
{
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
overflow: hidden;
border-radius: var(--radius);
background: var(--page);
}
.patient_chart_document_icon img
{
width: 100%;
height: 100%;
object-fit: cover;
}
.patient_chart_document_text,
.patient_chart_visit_text
{
min-width: 0;
flex: 1;
}
.patient_chart_document_title
{
overflow: hidden;
color: var(--ink);
font-size: 0.84rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.patient_chart_document_meta
{
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
margin-top: 3px;
color: var(--muted);
font-size: 0.72rem;
}
.patient_chart_document_card > .btn,
.patient_chart_visit_action .btn
{
min-height: 32px;
flex-shrink: 0;
border-color: var(--patient_chart);
color: var(--patient_chart);
font-size: 0.76rem;
}
.patient_chart_visit_icon
{
width: 32px;
flex: 0 0 32px;
text-align: center;
}
.patient_chart_visit_action
{
flex-shrink: 0;
}
.patient_chart_request_card
{
padding: 12px !important;
}
.patient_chart_request_header,
.patient_chart_request_actions
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.patient_chart_request_title
{
color: var(--ink);
font-size: 0.84rem;
font-weight: 700;
}
.patient_chart_request_status
{
padding: 4px 8px;
border-radius: var(--radius_pill);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
}
.patient_chart_request_status.is_pending
{
background: var(--gold_soft);
color: var(--gold);
}
.patient_chart_request_status.is_complete
{
background: var(--green_soft);
color: var(--green);
}
.patient_chart_request_body
{
margin-top: 9px;
}
.patient_chart_request_items
{
margin-bottom: 7px;
}
.patient_chart_request_item
{
margin-top: 3px;
color: var(--ink);
font-size: 0.78rem;
}
.patient_chart_panel_v2 .patient_chart_empty_state,
.patient_chart_panel_v2 .no_data_message,
.patient_chart_panel_v2 .no_results
{
min-height: 150px;
justify-content: center;
margin: 0;
border: 1px dashed var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
font-size: 0.82rem;
}
/* The surrounding chart card supplies the title and edit action. */
.patient_chart_history_block .patient_chart_info_body > .color_gainsboro:first-child,
.patient_chart_history_block .patient_chart_info_body .edit_this_section,
.patient_chart_history_block .patient_chart_info_body .social_edit_class,
.patient_chart_history_block .patient_chart_info_body .staff_add_family,
.patient_chart_history_block .patient_chart_info_body .family_history_edit,
.patient_chart_history_block .patient_chart_info_body .cancel_edit_this_section,
.patient_chart_history_block .patient_chart_info_body .cancel_section_edits,
.patient_chart_allergy_section .patient_chart_info_body .add_allergy_button
{
display: none !important;
}
.patient_chart_child_panel .mchat_messages
{
background: var(--page);
}
.purchase_plan_container[data_patient_chart_refresh_section] .mchat_header
{
background: var(--patient_chart) !important;
}
.purchase_plan_container[data_patient_chart_refresh_section] .mchat_messages
{
background: var(--page) !important;
}
.purchase_plan_container[data_patient_chart_refresh_section] .mchat_input
{
border-top: 0 !important;
background: var(--surface) !important;
box-shadow: none !important;
}
.purchase_plan_container[data_patient_chart_refresh_section] .btn-primary,
.purchase_plan_container[data_patient_chart_refresh_section] .btn_ndd_primary
{
border-color: var(--patient_chart) !important;
background: var(--patient_chart) !important;
color: var(--surface) !important;
}
.purchase_plan_container[data_patient_chart_refresh_section] .emergency-section h3
{
color: var(--patient_chart) !important;
}
.patient_chart_editor_content
{
padding: 14px;
}
.patient_chart_editor_messages
{
display: block;
padding: 14px;
}
.patient_chart_editor_form
{
display: grid;
gap: 12px;
}
.patient_chart_editor_label
{
display: grid;
gap: 5px;
margin-bottom: 12px;
color: var(--muted);
font-size: 0.78rem;
font-weight: 700;
}
.patient_chart_editor_current
{
margin-bottom: 14px;
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
color: var(--ink);
font-size: 0.82rem;
}
.patient_chart_editor_label_text
{
display: block;
margin-bottom: 6px;
color: var(--muted);
font-size: 0.74rem;
}
.patient_chart_editor_footer
{
display: block;
padding: 10px;
padding-bottom: calc(10px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
background: var(--surface);
}
.patient_chart_editor_content .form-control,
.patient_chart_editor_content .form-select
{
min-height: 42px;
border-color: var(--line);
font-size: 0.86rem;
}
.patient_chart_editor_content textarea.form-control
{
min-height: 140px;
}
.patient_chart_editor_errors
{
margin-bottom: 10px;
color: var(--danger);
font-size: 0.8rem;
}
@media (max-width: 390px)
{
.patient_chart_identity_row
{
grid-template-columns: 64px minmax(0, 1fr) 38px;
gap: 9px;
}
.patient_chart_photo,
.patient_chart_photo img
{
width: 64px;
height: 64px;
}
.patient_chart_header_actions
{
grid-template-columns: repeat(4, 38px) minmax(76px, 1fr);
}
.patient_chart_section_grid
{
grid-template-columns: 1fr;
}
}
/*----PROVIDER PROFILE (subscribe panel)----------------------------------------------*/
/* clean footer (no border/shadow on the sticky button bar) — scoped to this panel */
.provider_profile_panel .mchat_input
{
border-top: none;
box-shadow: none;
padding: 12px 16px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
background: white;
}
.provider_profile_messages
{
background: white !important;
padding: 0 !important;
display: block !important;
flex: 1 1 auto !important;
overflow-y: auto !important;
min-height: 0;
}
.provider_profile_identity
{
padding: 22px 16px 16px;
display: flex;
align-items: center;
gap: 16px;
}
.provider_profile_avatar_ring
{
flex: 0 0 auto;
width: 88px;
height: 88px;
border-radius: 50%;
padding: 3px;
background: linear-gradient(135deg, #865EBF 0%, #b794d8 100%);
box-shadow: 0 6px 18px rgba(134, 94, 191, 0.22);
}
.provider_profile_avatar
{
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 3px solid white;
background: #eee;
}
.provider_profile_identity_text
{
flex: 1 1 auto;
min-width: 0;
}
.provider_profile_name
{
font-size: 1.22rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: #1f2330;
}
.provider_profile_name_degree
{
color: #5b6170;
font-weight: 500;
font-size: 0.9rem;
margin-left: 2px;
}
.provider_profile_subtitle
{
color: #5b6170;
font-size: 0.88rem;
margin-top: 3px;
text-transform: capitalize;
}
.provider_profile_meta_row
{
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
flex-wrap: wrap;
}
.provider_profile_meta_item
{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.82rem;
color: #5b6170;
}
.provider_profile_meta_item .star
{
color: #F5A623;
font-size: 0.95rem;
}
.provider_profile_meta_item b
{
color: #1f2330;
font-weight: 600;
}
.provider_profile_meta_item.clickable_rating
{
cursor: pointer;
text-decoration: underline;
text-decoration-color: #e0c8ff;
text-underline-offset: 2px;
}
.provider_profile_meta_dot
{
width: 3px;
height: 3px;
border-radius: 50%;
background: #8b909f;
opacity: 0.5;
}
.provider_profile_care_strip
{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 0 16px 18px;
}
.provider_profile_care_chip
{
background: #f6f7fb;
border: 1px solid #ececf2;
border-radius: 12px;
padding: 10px 6px;
text-align: center;
font-size: 0.7rem;
color: #5b6170;
line-height: 1.2;
}
.provider_profile_care_chip i
{
display: block;
font-size: 1.1rem;
margin-bottom: 4px;
}
.provider_profile_care_chip.on
{
background: white;
border-color: #865EBF;
color: #4a2f7a;
}
.provider_profile_care_chip.on i
{
color: #865EBF;
}
.provider_profile_care_chip.off i
{
color: #8b909f;
}
.provider_profile_section
{
background: white;
border-top: 1px solid #ececf2;
padding: 18px 16px;
}
.provider_profile_section_head
{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
gap: 8px;
}
.provider_profile_section_title
{
font-size: 0.95rem;
font-weight: 700;
color: #1f2330;
letter-spacing: -0.01em;
}
.provider_profile_section_aux
{
font-size: 0.78rem;
color: #865EBF;
font-weight: 500;
}
.provider_profile_next_avail
{
display: inline-flex;
align-items: center;
gap: 5px;
background: #e9f9ef;
color: #15693c;
font-size: 0.75rem;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
}
.provider_profile_next_avail i { font-size: 0.7rem; }
.provider_profile_availability
{
display: flex;
align-items: center;
gap: 14px;
}
.provider_profile_availability_icon
{
width: 46px;
height: 46px;
flex: 0 0 auto;
border-radius: 12px;
background: #f5f0ff;
color: #865EBF;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
}
.provider_profile_availability_text strong
{
display: block;
font-size: 1rem;
color: #1f2330;
}
.provider_profile_availability_text span
{
font-size: 0.85rem;
color: #5b6170;
}
.provider_profile_availability_limited .provider_profile_availability_icon
{
background: #fff6e8;
color: #a35c06;
}
.provider_profile_availability_full .provider_profile_availability_icon
{
background: #fff4f4;
color: #b03030;
}
/* .card_ndd lifts on hover to signal "clickable"; the availability card is not */
.provider_profile_availability.card_ndd:hover
{
border-color: var(--line);
box-shadow: var(--shadow_xs);
transform: none;
}
.provider_profile_pricing_toggle
{
display: flex;
background: #f6f7fb;
border-radius: 10px;
padding: 3px;
margin-bottom: 14px;
}
.provider_profile_pricing_toggle button
{
flex: 1 1 0;
background: transparent;
border: none;
padding: 8px 12px;
font-size: 0.85rem;
font-weight: 600;
color: #5b6170;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.provider_profile_pricing_toggle button.active
{
background: white;
color: #4a2f7a;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.provider_profile_pricing_pane { display: none; }
.provider_profile_pricing_pane.active { display: block; }
.provider_profile_plan
{
border: 1px solid #ececf2;
border-radius: 12px;
padding: 14px;
margin-bottom: 10px;
position: relative;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
/* THE PUBLIC PROFILE'S PRICING PANE mirrors the patient membership offer panel: a row of plan tiles is the
choice, and the selected plan's rates, coverage and how-it-works stack underneath as card_ndd blocks.
Every plan's detail is rendered server-side and all but one hidden, so switching tiles costs no request. */
.provider_profile_plan_picker
{
display: flex;
flex-direction: column;
gap: 10px;
}
.provider_profile_plan_detail
{
display: flex;
flex-direction: column;
gap: 10px;
}
/* .hide_me is only display:none and carries the same specificity, so it loses to the rule above on source
order — without this every plan's detail renders at once and the tiles appear to do nothing */
.provider_profile_plan_detail.hide_me
{
display: none;
}
/* THE PROVIDER PROFILE'S CARE OPTIONS SHEET — the two ways into a practice, as full-width rows rather than
tiles, because each needs a sentence of explanation and a three-across tile cannot carry one. The sheet
slides up out of the footer button instead of opening another window, so the profile stays on screen
behind it — same treatment as the prescribing workflow's send options sheet. */
.provider_profile_footer
{
position: relative;
width: 100%;
}
/* the footer's own controls sit above the sheet, which slides out from behind them */
.provider_profile_footer > .btn_ndd,
.provider_profile_footer > .privacy_consent_errors
{
position: relative;
z-index: 26;
}
.provider_profile_care_backdrop
{
position: absolute;
z-index: 24;
left: -15px;
right: -15px;
bottom: calc(100% + 10px);
height: 100dvh;
padding: 0;
border: 0;
background: rgba(25, 20, 32, 0.3);
opacity: 0;
visibility: hidden;
transition: opacity 160ms ease, visibility 160ms ease;
pointer-events: none;
}
.provider_profile_care_backdrop.open
{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.provider_profile_care_sheet
{
position: absolute;
z-index: 25;
left: -15px;
right: -15px;
bottom: calc(100% + 10px);
padding: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--surface);
box-shadow: 0 -12px 28px rgba(46, 34, 62, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(18px);
transition: transform 180ms ease, opacity 160ms ease, visibility 160ms ease;
pointer-events: none;
}
.provider_profile_care_sheet.open
{
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.provider_profile_care_sheet_head
{
padding: 14px 16px 12px;
}
.provider_profile_care_sheet_title
{
font-size: 0.92rem;
font-weight: 700;
line-height: 1.3;
}
.provider_profile_care_sheet_sub
{
margin-top: 4px;
color: var(--muted);
font-size: 0.76rem;
line-height: 1.45;
}
/* the rows carry the sheet's own gutter rather than the card padding they were written for */
.provider_profile_care_sheet .establish_care_option_row
{
padding: 14px 16px;
border-top: 1px solid var(--line);
}
.provider_profile_care_sheet .establish_care_option_row:active
{
background: var(--brand_soft);
}
@media (prefers-reduced-motion: reduce)
{
.provider_profile_care_sheet,
.provider_profile_care_backdrop
{
transition: none;
}
}
.establish_care_option_row
{
width: 100%;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
padding: 14px 0;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
}
.establish_care_option_row + .establish_care_option_row
{
border-top: 1px solid var(--line);
}
.establish_care_option_icon
{
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius_pill);
background: var(--brand_soft);
color: var(--brand);
font-size: 0.9rem;
}
.establish_care_option_body,
.establish_care_option_title,
.establish_care_option_meta
{
display: block;
min-width: 0;
}
.establish_care_option_title
{
font-size: 0.88rem;
font-weight: 700;
line-height: 1.3;
}
.establish_care_option_meta
{
margin-top: 4px;
color: var(--muted);
font-size: 0.76rem;
line-height: 1.45;
}
.establish_care_option_chevron
{
margin-top: 10px;
color: var(--muted);
font-size: 0.72rem;
}
/* the join-first route with no invitation behind it — still shown so the patient learns it exists, but it
is not a control, so it loses the pointer and the brand-tinted icon */
.establish_care_option_unavailable
{
cursor: default;
}
.establish_care_option_unavailable .establish_care_option_icon
{
background: var(--line);
color: var(--muted);
}
.establish_care_option_unavailable .establish_care_option_title
{
color: var(--muted);
}
/* .card_ndd lifts on hover to signal "clickable"; nothing in here is */
.provider_profile_plan_detail .card_ndd:hover
{
border-color: var(--line);
box-shadow: var(--shadow_xs);
transform: none;
}
.provider_profile_plan_info_row
{
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.provider_profile_plan_info_btn
{
background: none;
border: none;
padding: 0;
color: #b0b4c0;
font-size: 0.95rem;
cursor: pointer;
line-height: 1;
}
.provider_profile_plan_info_btn:hover
{
color: #865EBF;
}
.pp_info_section
{
background: white;
border-radius: 10px;
padding: 14px;
margin-bottom: 10px;
}
.pp_info_section_title
{
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8b909f;
margin-bottom: 10px;
}
.pp_info_bullet i
{
color: #1c9d57;
font-size: 0.85rem;
margin-top: 2px;
flex: 0 0 auto;
}
.pp_info_price_row strong
{
color: #1f2330;
font-weight: 700;
}
.pp_info_how
{
font-size: 0.88rem;
color: #5b6170;
line-height: 1.55;
}
.provider_profile_plan:last-child { margin-bottom: 0; }
.provider_profile_plan.featured
{
border-color: #865EBF;
background: linear-gradient(180deg, #f5f0ff 0%, white 60%);
}
.provider_profile_plan_name i
{
color: #865EBF;
font-size: 0.95rem;
}
.provider_profile_plan_price small
{
font-size: 0.7rem;
color: #8b909f;
font-weight: 500;
margin-left: 1px;
}
.provider_profile_plan_sub
{
font-size: 0.83rem;
color: #5b6170;
line-height: 1.45;
}
.provider_profile_plan_feature i
{
color: #1c9d57;
font-size: 0.85rem;
}
.provider_profile_price_row
{
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 11px 0;
border-bottom: 1px solid #ececf2;
font-size: 0.92rem;
}
.provider_profile_price_row:first-child { padding-top: 0; }
.provider_profile_price_row:last-child { border-bottom: none; padding-bottom: 0; }
.provider_profile_price_row .label { color: #5b6170; }
.provider_profile_price_row .value
{
font-weight: 700;
color: #1f2330;
font-size: 1rem;
}
.provider_profile_price_row .value small
{
font-weight: 500;
color: #8b909f;
font-size: 0.72rem;
margin-left: 1px;
}
.provider_profile_bio
{
color: #1f2330;
font-size: 0.92rem;
line-height: 1.6;
}
.provider_profile_empty_state
{
font-size: 0.85rem;
color: #8b909f;
font-style: italic;
}
.provider_profile_chips
{
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.provider_profile_chip
{
background: #f5f0ff;
color: #4a2f7a;
padding: 5px 11px;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 500;
}
.provider_profile_chip_neutral
{
background: #f6f7fb;
color: #5b6170;
}
.provider_profile_highlight_list
{
list-style: none;
padding: 0;
margin: 0;
}
.provider_profile_highlight_list li
{
position: relative;
padding: 4px 0 4px 22px;
font-size: 0.92rem;
color: #1f2330;
line-height: 1.5;
}
.provider_profile_highlight_list li::before
{
content: '';
position: absolute;
left: 4px;
top: 13px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #865EBF;
}
.provider_profile_edu_row
{
display: flex;
gap: 12px;
padding: 8px 0;
font-size: 0.88rem;
}
.provider_profile_edu_body strong
{
display: block;
color: #1f2330;
font-weight: 600;
}
.provider_profile_edu_body span
{
color: #5b6170;
font-size: 0.82rem;
}
.provider_profile_section_aux_link
{
font-size: 0.78rem;
color: #865EBF;
font-weight: 500;
cursor: pointer;
}
.provider_profile_plan.featured
{
border-color: #865EBF;
background: linear-gradient(180deg, #f5f0ff 0%, white 60%);
}
.provider_profile_practice_row
{
display: flex;
align-items: flex-start;
gap: 12px;
padding: 6px 0;
font-size: 0.9rem;
color: #1f2330;
}
.provider_profile_practice_row i
{
color: #865EBF;
font-size: 1rem;
margin-top: 2px;
flex: 0 0 16px;
}
.provider_profile_practice_row a
{
color: #865EBF;
text-decoration: none;
}
.provider_profile_review_summary
{
display: flex;
align-items: center;
gap: 14px;
padding: 0 0 14px;
border-bottom: 1px solid #ececf2;
margin-bottom: 14px;
}
.provider_profile_review_summary_meta
{
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.provider_profile_review_summary_stars
{
color: #F5A623;
font-size: 1rem;
letter-spacing: 2px;
line-height: 1;
}
.provider_profile_review_score
{
font-size: 2.2rem;
font-weight: 800;
line-height: 1;
color: #1f2330;
letter-spacing: -0.02em;
}
.provider_profile_review_count
{
font-size: 0.8rem;
color: #5b6170;
}
.provider_profile_review_list
{
display: flex;
flex-direction: column;
gap: 0;
}
.provider_profile_review
{
display: block;
padding: 12px 0;
border-bottom: 1px solid #ececf2;
}
.provider_profile_review:last-child { border-bottom: none; padding-bottom: 0; }
.provider_profile_review:first-child { padding-top: 0; }
.provider_profile_review_head
{
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 0.78rem;
}
.provider_profile_review_verified
{
display: inline-flex;
align-items: center;
gap: 4px;
color: #1c9d57;
font-weight: 600;
}
.provider_profile_review_date
{
margin-left: auto;
color: #8b909f;
}
.provider_profile_review_text
{
color: #1f2330;
font-size: 0.9rem;
line-height: 1.55;
}
.provider_profile_info_row
{
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
}
.provider_profile_info_row + .provider_profile_info_row
{
border-top: 1px solid #ececf2;
}
.provider_profile_info_row_icon
{
width: 38px;
height: 38px;
flex: 0 0 auto;
border-radius: 10px;
background: #f5f0ff;
color: #865EBF;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
}
.provider_profile_info_row_title
{
font-size: 0.9rem;
font-weight: 600;
color: #1f2330;
line-height: 1.3;
}
.provider_profile_info_row_sub
{
font-size: 0.82rem;
color: #5b6170;
margin-top: 2px;
line-height: 1.45;
}
@media (min-width: 600px)
{
.provider_profile_avatar_ring { width: 104px; height: 104px; }
.provider_profile_name { font-size: 1.35rem; }
}
/* ─── Patient Left Navbar — dark sidebar ─────────────────── */
.lnav_section_label
{
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.28);
text-transform: uppercase;
padding: 12px 12px 4px;
}
.sidebar_nav_item
{
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 9px;
cursor: pointer;
transition: background 0.12s;
margin-bottom: 1px;
text-decoration: none;
}
.sidebar_nav_item:hover
{
background: rgba(255,255,255,0.07);
}
.sidebar_nav_item.active
{
background: #865EBF;
}
.sidebar_nav_item.active .sni_label
{
color: #fff;
font-weight: 600;
}
.sidebar_nav_item.active .sni_icon
{
color: #fff;
}
.sidebar_nav_item.active .sni_badge
{
background: rgba(255,255,255,0.25);
}
/* override shared .lmenu_class and .lower_nav_td rules for dark sidebar */
.sidebar_nav_item.lmenu_class
{
color: rgba(255,255,255,0.65) !important;
}
.sidebar_nav_item.lmenu_class:hover
{
background: rgba(255,255,255,0.07) !important;
color: rgba(255,255,255,0.65) !important;
border-left: none !important;
}
.sidebar_nav_item.lmenu_class.active,
.sidebar_nav_item.lmenu_class.active:hover
{
background: #865EBF !important;
color: #fff !important;
border-left: none !important;
}
.sni_icon
{
font-size: 1rem;
color: rgba(255,255,255,0.5);
flex-shrink: 0;
width: 18px;
text-align: center;
}
.sni_label
{
font-size: 0.84rem;
font-weight: 500;
color: rgba(255,255,255,0.65);
flex: 1;
}
.sni_badge
{
background: #865EBF;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 20px;
min-width: 18px;
text-align: center;
line-height: 1.6;
}
/* staff sidebar groups — the section label is the collapse toggle */
.lnav_group_toggle
{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
margin-top: 6px;
}
.lnav_group:first-child .lnav_group_toggle
{
margin-top: 0;
}
.lnav_group_toggle:hover
{
color: rgba(255,255,255,0.5);
}
.lnav_group_chevron
{
font-size: 0.6rem;
transition: transform 0.15s;
}
.lnav_group_collapsed .lnav_group_chevron
{
transform: rotate(-90deg);
}
.lnav_group_collapsed .lnav_group_items
{
display: none;
}
/* an Account panel opened from the staff sidebar, rendered as a page: flush with the content area like the Visits list.
It keeps the panel's mchat_container / mchat_messages classes for its handlers, so the panel sizing is undone here */
.mchat_container.staff_nav_page
{
width: auto;
max-width: none;
min-height: 0;
height: auto;
max-height: none;
overflow: visible;
background: transparent;
padding-bottom: 100px;
}
.staff_nav_page_header
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 0 10px;
}
.staff_nav_page_title
{
font-size: 1rem;
font-weight: 700;
color: var(--ink);
}
.staff_nav_page_subtitle
{
font-size: 0.82rem;
color: var(--muted);
}
.staff_nav_page_actions
{
display: flex;
gap: 6px;
}
/* panel header buttons are white-on-purple; on the page they sit on the light content background */
.staff_nav_page_actions .btn-outline-light
{
color: var(--brand);
border-color: var(--brand);
background: var(--surface);
}
.staff_nav_page_actions .btn-outline-light:hover
{
color: #fff;
background: var(--brand);
}
.mchat_messages.staff_nav_page_body
{
flex: none;
overflow: visible;
padding: 0;
background: transparent;
}
.lnav_user_card
{
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: rgba(255,255,255,0.06);
border-radius: 10px;
cursor: pointer;
transition: background 0.12s;
}
.lnav_user_card:hover
{
background: rgba(255,255,255,0.10);
}
.lnav_avatar
{
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #865EBF 0%, #a07de0 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.82rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.lnav_user_name
{
font-size: 0.82rem;
font-weight: 600;
color: #fff;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lnav_user_sub
{
font-size: 0.7rem;
color: rgba(255,255,255,0.45);
}
.lnav_chevron
{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
flex-shrink: 0;
color: rgba(255,255,255,0.4);
transition: color 0.12s;
}
.lnav_user_card:hover .lnav_chevron
{
color: rgba(255,255,255,0.75);
}
.lnav_user_popup
{
position: fixed;
background: #2a1d54;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 6px;
box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
z-index: 9999;
min-width: 180px;
}
.lnav_popup_item
{
display: flex;
align-items: center;
gap: 9px;
padding: 9px 12px;
border-radius: 7px;
font-size: 0.82rem;
font-weight: 500;
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: background 0.12s, color 0.12s;
}
.lnav_popup_item i
{
font-size: 0.9rem;
width: 16px;
text-align: center;
color: rgba(255,255,255,0.45);
}
.lnav_popup_item:hover
{
background: rgba(255,255,255,0.08);
color: #fff;
}
.lnav_popup_item:hover i
{
color: rgba(255,255,255,0.8);
}
.lnav_popup_item_danger { color: #fca5a5; }
.lnav_popup_item_danger i { color: #fca5a5; }
.lnav_popup_item_danger:hover
{
background: rgba(239,68,68,0.12);
color: #fca5a5;
}
/* ─── Patient Dashboard Topbar ───────────────────────────── */
.account_topbar
{
display: none; /* shown only on desktop via media query below */
}
.account_topbar_heading
{
display: flex;
flex-direction: column;
min-width: 0;
}
.account_topbar_title
{
font-size: 1rem;
font-weight: 600;
color: #1a1a2e;
line-height: 1.2;
}
.account_topbar_sub
{
font-size: 0.72rem;
color: #6b7280;
line-height: 1.3;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.account_topbar_actions
{
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
.account_topbar_icon_btn
{
width: 36px;
height: 36px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
background: #fff;
border: 1px solid transparent;
color: #6b7280;
font-size: 1.05rem;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.account_topbar_icon_btn:hover
{
background: #f5f4f8;
border-color: #e5e7eb;
color: #865EBF;
box-shadow: 0 3px 10px rgba(15,23,42,0.08);
}
.account_topbar_notif_dot
{
position: absolute;
top: 7px;
right: 7px;
width: 9px;
height: 9px;
background: #ef4444;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 2px rgba(239,68,68,0.14);
}
@media (min-width: 768px)
{
.account_alert_side_panel
{
width: 420px !important;
max-width: 420px !important;
}
.account_alert_side_panel .mchat_container
{
width: 100%;
max-width: none;
}
}
.account_topbar_avatar
{
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #865EBF 0%, #a07de0 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 700;
color: #fff;
cursor: pointer;
flex-shrink: 0;
user-select: none;
}
@media (min-width: 768px)
{
.account_topbar
{
height: 60px;
min-height: 60px;
background: #fff;
border-bottom: 1px solid #e5e7eb;
display: flex;
align-items: center;
padding: 0 24px;
gap: 12px;
flex-shrink: 0;
z-index: 10;
}
}
/* ─── Account Settings List ──────────────────────────────── */
/* flex row instead of a nested table — avoids WKWebView border/repaint tearing
on scroll. Global, not mobile-scoped: scoping this to max-width 767px left the
icon/label/chevron stacked on top of each other on desktop. */
.ios_settings_edit,
.open_help_panel_class,
.open_security_menu_class,
.security_nav_row
{
display: flex;
align-items: center;
transform: translateZ(0);
}
/* .hide_me is only display:none and carries the same specificity, so it loses to
the rule above on source order — rows like Merge Accounts need this to stay hidden */
.ios_settings_edit.hide_me,
.open_help_panel_class.hide_me,
.open_security_menu_class.hide_me,
.security_nav_row.hide_me
{
display: none;
}
.ios_settings_edit_icon
{
flex: 0 0 auto;
width: 32px;
}
.ios_settings_edit_label
{
flex: 1 1 auto;
padding-left: 10px;
}
.ios_settings_edit_chevron
{
flex: 0 0 auto;
margin-left: auto;
text-align: right;
color: var(--muted);
font-size: 0.94rem;
}
.settings_group_title
{
font-size: 0.68rem;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 30px 0 8px;
padding-left: 2px;
}
.settings_small_container > .settings_group_title:first-child
{
margin-top: 0;
}
.settings_group
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius_lg);
box-shadow: var(--shadow_xs);
overflow: hidden;
}
.settings_row
{
padding: 13px 14px;
border-bottom: 1px solid var(--line);
color: var(--ink);
font-size: 0.9rem;
cursor: pointer;
transition: background 0.12s;
}
.settings_group > .settings_row:last-child
{
border-bottom: 0;
}
.settings_row:hover
{
background: var(--brand_soft);
}
.settings_row:hover .ios_settings_edit_chevron
{
color: var(--brand);
}
.settings_row .ios_settings_edit_icon
{
width: 34px;
color: var(--brand);
font-size: 1.05rem;
}
.settings_row .ios_settings_edit_label
{
padding-left: 2px;
font-weight: 500;
}
.settings_stack
{
display: flex;
flex-direction: column;
gap: 8px;
}
.settings_switch_button
{
display: flex;
align-items: center;
width: 100%;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius_lg);
box-shadow: var(--shadow_xs);
color: var(--ink);
font-size: 0.9rem;
font-weight: 500;
font-family: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.settings_switch_button:hover
{
background: var(--brand_soft);
border-color: var(--brand);
box-shadow: var(--shadow_small);
color: var(--ink);
}
.settings_switch_logo
{
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
margin-right: 11px;
flex: 0 0 auto;
background: var(--page);
border: 1px solid var(--line);
}
.settings_logout_button
{
margin-top: 40px;
margin-bottom: 10px;
}
/* ─── Visits Section ─────────────────────────────────────── */
.visits_section_outer
{
padding: 20px 24px 40px;
}
.section_page_header
{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
gap: 12px;
flex-wrap: wrap;
}
.section_page_title
{
font-size: 1.15rem;
font-weight: 700;
color: #1a1a2e;
line-height: 1.2;
}
.section_page_sub
{
font-size: 0.78rem;
color: #6b7280;
margin-top: 2px;
}
.btn_brand_md
{
display: inline-flex;
align-items: center;
gap: 6px;
background: #865EBF;
color: #fff;
font-size: 0.82rem;
font-weight: 600;
padding: 9px 16px;
border-radius: 9px;
border: none;
cursor: pointer;
white-space: nowrap;
transition: background 0.12s;
text-decoration: none;
}
.btn_brand_md:hover { background: #6a46a3; color: #fff; }
.visits_filter_row
{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.visits_filter_select
{
height: 36px;
padding: 0 28px 0 10px;
border: 1px solid #e5e7eb;
border-radius: 20px;
background: #fff;
font-size: 0.8rem;
color: #1a1a2e;
font-family: inherit;
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.visits_filter_select:focus { border-color: #865EBF; }
/* Tab nav */
.visits_tabs_nav
{
display: flex;
border-bottom: 2px solid #ede8f5;
margin-bottom: 20px;
}
.visits_tab_btn,
.billing_tab_btn
{
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.84rem;
font-weight: 600;
color: #6b7280;
background: none;
border: none;
border-bottom: 2px solid transparent;
padding: 8px 16px 10px;
margin-bottom: -2px;
cursor: pointer;
transition: color 0.12s, border-color 0.12s;
font-family: inherit;
}
.visits_tab_btn:hover,
.billing_tab_btn:hover { color: #865EBF; }
.visits_tab_btn.active,
.visits_tab_btn.visits_tab_active,
.billing_tab_btn.active
{
color: #865EBF !important;
border-bottom: 2px solid #865EBF !important;
}
.vtab_pill
{
font-size: 0.65rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 10px;
line-height: 1;
}
.vtab_pill_brand { background: #865EBF; color: #fff; }
.vtab_pill_gray { background: #e5e7eb; color: #6b7280; }
.vtab_pill_red { background: #fde8e8; color: #dc3545; }
/* Visit cards */
.visit_card
{
display: flex;
flex-direction: column;
background: #fff;
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
text-decoration: none;
color: inherit;
cursor: pointer;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
transition: box-shadow 0.15s, border-color 0.15s;
}
.vc_top
{
display: flex;
align-items: flex-start;
gap: 14px;
width: 100%;
}
.vc_button_row
{
display: flex;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
/*border-top: 1px solid #f3f4f6;*/
width: 100%;
}
.vc_card_btn
{
flex: 1;
text-align: center;
padding: 8px 12px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.2;
}
.vc_btn_subtitle
{
display: block;
font-size: 0.72em;
font-weight: 400;
margin-top: 4px;
line-height: 1.3;
opacity: 0.8;
}
.vc_btn_start_disabled
{
background: #f3f4f6;
color: #9ca3af;
cursor: not-allowed;
}
.vc_btn_start_active
{
background: gold;
color: #000;
cursor: pointer;
}
.vc_btn_checkin_active
{
background: var(--brand);
color: #fff;
cursor: pointer;
}
.vc_btn_details
{
background: #fff;
color: #374151;
border: 1px solid #e5e7eb;
cursor: pointer;
}
.vc_provider_link
{
color: var(--brand);
font-weight: 600;
cursor: pointer;
border-bottom: 1px dotted var(--brand);
}
.vc_meta_row
{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
font-size: 0.73rem;
color: #6b7280;
margin-top: 3px;
line-height: 1.4;
}
.vc_meta_label
{
font-weight: 600;
color: #374151;
}
.vc_meta_sep
{
color: #d1d5db;
}
.visit_card:hover
{
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
border-color: #e8d9f8;
color: inherit;
text-decoration: none;
}
.vc_icon_wrap
{
width: 46px;
height: 46px;
min-width: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.vc_body { flex: 1; min-width: 0; }
.vc_title
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 0.9rem;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 2px;
}
.vc_countdown
{
font-size: 0.7rem;
font-weight: 500;
color: #865EBF;
background: #f3e8ff;
padding: 2px 7px;
border-radius: 10px;
white-space: nowrap;
margin-left: 6px;
}
.vc_patient
{
font-size: 0.75rem;
color: #6b7280;
margin-bottom: 1px;
}
.vc_provider
{
font-size: 0.75rem;
color: #6b7280;
margin-bottom: 3px;
}
.vc_date
{
font-size: 0.73rem;
color: #6b7280;
display: flex;
align-items: center;
gap: 4px;
}
.vc_right
{
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.vc_badge
{
font-size: 0.72rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
white-space: nowrap;
min-width: 80px;
text-align: center;
display: inline-block;
}
.vc_actions
{
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
/* Service-line check-in welcome — the first thing a patient sees in the drawer after booking a service
with an intake form. Tokens only, and the illustration that closes the screen takes its strokes from
currentColor, so a practice's own brand colour carries straight through it. */
/* THIS SCREEN FITS THE PHONE — it is one short invitation and it should not ask to be scrolled before the
patient has done anything. It fits because there is little on it: a greeting block, the practice's own
introduction, and the four things the check-in covers. Nothing decorative was kept to fill the space.
`.mchat_messages` keeps its own overflow, so an unusually long introduction still scrolls rather than being
clipped. If something is added here, check it on a small phone at a large accessibility text size. */
.service_line_intake_kickoff_container
{
padding: 4px 4px 8px;
text-align: center;
}
/* the greeting block: practice name, thanks and invitation together on the brand-soft wash. The wash used to
hold the illustration alone; the drawing now closes the screen instead, so there is one block, not two.
The weights are deliberately light for a greeting — this is a welcome, not a heading that has to carry a
page, and an 800 title with a 700 sub-line under it read as an announcement. */
.service_line_intake_kickoff_header
{
background: var(--brand_soft);
border-radius: 4px;
padding: 22px 16px;
margin-bottom: 16px;
flex: 0 0 auto;
}
/* the art wash, kept for welcome_illustration_html()'s 'wash' style — no caller on this screen any more */
.service_line_intake_kickoff_art
{
background: var(--brand_soft);
border-radius: var(--radius_lg);
color: var(--brand);
height: 132px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
/* --brand_dark, not --muted: grey on the brand_soft wash is about 4.1:1 and fails the small-text minimum,
where --brand_dark is about 5.9:1 — and the practice's own name reads better in brand than in grey */
.service_line_intake_kickoff_badge
{
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand_dark);
margin-bottom: 8px;
}
.service_line_intake_kickoff_title
{
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
line-height: 1.35;
}
/* --brand_dark for the same reason as the badge: plain --brand on the brand_soft wash is about 4:1, which
fails the small-text contrast minimum. That is why this line used to sit on the white card below it. */
.service_line_intake_kickoff_sub
{
font-size: 0.9rem;
font-weight: 500;
color: var(--brand_dark);
margin-top: 3px;
}
/* --ink, not --muted: this reads as one piece with the practice's introduction directly below it, and two
greys at two weights made the platform's own sentences look like a disclaimer under the greeting */
/* one style for this slot whichever text fills it — the practice's own introduction when the form carries one,
the platform's generic fallback when it does not. They are alternatives, never both, so a patient must not be
able to tell from the presentation which of the two they are reading. */
.service_line_intake_kickoff_body
{
font-size: 0.82rem;
line-height: 1.5;
color: var(--ink);
margin: 0 auto 10px;
max-width: 34ch;
}
.service_line_intake_kickoff_body:last-of-type
{
margin-bottom: 0;
}
.service_line_intake_kickoff_steps
{
list-style: none;
margin: 18px 0 0;
padding: 0;
text-align: left;
}
.service_line_intake_kickoff_steps li
{
position: relative;
font-size: 0.82rem;
color: var(--ink);
padding: 7px 0 7px 26px;
border-top: 1px solid var(--line);
}
.service_line_intake_kickoff_steps li:first-child
{
border-top: 0;
}
/* WHAT HAPPENS IF THEY DO NOT FINISH (feature 315). Amber rather than the brand wash the estimate sits in:
the estimate is an invitation and this is a consequence, and the two must not read as the same kind of
statement. --gold on --gold_soft for the heading, --ink for the sentence, because the explanation is the
part that has to be read carefully and amber body text at this size is harder work than it is worth.
Absent entirely for a practice with no deadline set, which is every practice by default. */
.service_line_intake_kickoff_deadline
{
margin-top: 12px;
padding: 10px 12px;
background: var(--gold_soft);
border: 1px solid var(--gold);
border-radius: 4px;
text-align: left;
}
.service_line_intake_kickoff_deadline_head
{
font-size: 0.82rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 4px;
}
/* --ink, not --gold: gold on the soft wash is 1.9:1, and although this icon is aria-hidden beside its own
text and so is not held to the 3:1 for meaningful graphics, at that contrast it simply reads as washed out.
The amber identity is carried by the fill and the border, which do not have to be read. A --gold_dark token
would be the better answer and is a design-system decision, not one to take here. */
.service_line_intake_kickoff_deadline_head .bi
{
margin-right: 6px;
color: var(--ink);
}
.service_line_intake_kickoff_deadline_body
{
font-size: 0.8rem;
line-height: 1.5;
color: var(--ink);
}
/* HOW LONG IT TAKES. The only number on this screen: the question count was taken off it for the same reason
"Step 9 of 19" came off the form, because a count announced before anything has been answered reads as a
bill rather than as progress. A duration is not that — it is the commitment the patient is being asked to
make, and it is what lets them decide whether to start now or come back later.
It closes the list instead of sitting at the foot of the screen. Getting it down there would mean making
the welcome a full-height flex column, which reaches into the panel's own scrolling, and on a tall phone a
single muted line adrift from everything above it reads as an afterthought. Left-aligned and indented to
the list's text, so it lines up with the four rows it follows rather than floating between them and the
centred greeting above.
--brand_dark, not --muted: muted on the page background is 4.44:1, just under the 4.5:1 this text size
needs, which is the same trap the greeting's sub-line and badge hit on the wash above. --brand_dark on the
soft wash is 5.9:1. The border is --brand at 1px rather than the 2px of .tile_ndd.selected: this is a
statement, not something the patient has chosen, and the selected treatment has to stay distinct. */
.service_line_intake_kickoff_estimate
{
margin-top: 16px;
padding: 10px 12px;
background: var(--brand_soft);
border: 1px solid var(--brand);
border-radius: 4px;
text-align: left;
font-size: 0.82rem;
font-weight: 600;
color: var(--brand_dark);
}
.service_line_intake_kickoff_estimate .bi
{
margin-right: 6px;
}
.service_line_intake_kickoff_steps li:before
{
content: '';
position: absolute;
left: 6px;
top: 14px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand);
}
@media (max-width: 480px)
{
.service_line_intake_kickoff_container
{
padding: 2px 2px 8px;
}
.service_line_intake_kickoff_art
{
height: 112px;
}
.service_line_intake_kickoff_header
{
padding: 18px 14px;
margin-bottom: 14px;
}
.service_line_intake_kickoff_title
{
font-size: 1rem;
}
.service_line_intake_kickoff_body
{
max-width: none;
}
.service_line_intake_kickoff_svg
{
width: 76px;
height: 76px;
}
}
/* Visit details side drawer */
.visit_details_panel .mchat_header
{
background: var(--brand);
border-radius: 0;
}
.visit_details_panel .mchat_messages
{
background: var(--page);
padding: 14px;
}
.visit_details_panel .mchat_input
{
background: var(--surface);
border-top: none;
box-shadow: none;
}
/* .mchat_input scopes these to the panel's FOOTER. The header's chat icon is a .message_staff_button inside
this same panel, so an unscoped rule would stretch that icon to a full-width 48px block. */
.visit_details_panel .vc_card_btn,
.visit_details_panel .start_video_button,
.visit_details_panel .mchat_input .message_staff_button,
.visit_details_panel .show_directions_button
{
width: 100% !important;
min-height: 48px;
display: flex !important;
align-items: center;
justify-content: center;
border: none !important;
border-radius: var(--radius) !important;
padding: 0 18px !important;
font-size: 0.9rem !important;
font-weight: 800 !important;
text-align: center;
}
.visit_details_panel .vc_btn_checkin_active,
.visit_details_panel .mchat_input .message_staff_button
{
background: var(--brand) !important;
color: #fff !important;
}
.visit_details_panel .start_video_button
{
background: var(--gold) !important;
color: var(--ink) !important;
}
.visit_details_content
{
display: block;
color: var(--ink);
}
.visit_details_hero_card,
.visit_details_provider_card,
.visit_details_schedule_card,
.visit_details_manage_list
{
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.visit_details_hero_card
{
overflow: hidden;
}
.visit_details_hero_top
{
width: 100%;
display: flex;
align-items: flex-start;
gap: 12px;
border: 0;
background: transparent;
padding: 12px;
color: inherit;
text-align: left;
cursor: pointer;
}
.visit_details_hero_top:hover
{
background: #fcfbfe;
}
.visit_details_visit_icon
{
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--brand_soft);
color: var(--brand);
font-size: 1rem;
flex: 0 0 auto;
}
.visit_details_visit_icon.green
{
background: var(--green_soft);
color: var(--green);
}
.visit_details_visit_icon.gold
{
background: var(--gold_soft);
color: #9a6100;
}
.visit_details_visit_icon.danger
{
background: var(--danger_soft);
color: var(--danger);
}
.visit_details_hero_main
{
min-width: 0;
flex: 1;
}
.visit_details_visit_title,
.visit_details_patient_name
{
display: block;
}
.visit_details_visit_title
{
color: var(--ink);
font-size: 1rem;
font-weight: 800;
line-height: 1.25;
}
.visit_details_patient_name
{
margin-top: 3px;
color: var(--muted);
font-size: 0.76rem;
font-weight: 500;
}
.visit_details_hero_chevron
{
display: flex;
align-items: center;
align-self: center;
color: var(--brand);
font-size: 0.86rem;
flex: 0 0 auto;
}
.visit_details_badge
{
display: inline-flex;
align-items: center;
border-radius: var(--radius_pill);
padding: 4px 8px;
font-size: 0.64rem;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.visit_details_badge.blue
{
background: var(--blue_soft);
color: var(--blue);
}
.visit_details_badge.green
{
background: var(--green_soft);
color: var(--green);
}
.visit_details_badge.gold
{
background: var(--gold_soft);
color: #9a6100;
}
.visit_details_badge.danger
{
background: var(--danger_soft);
color: var(--danger);
}
.visit_details_meta_grid
{
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--line);
}
.visit_details_meta_item
{
min-width: 0;
padding: 12px 15px;
}
.visit_details_meta_item + .visit_details_meta_item
{
border-left: 1px solid var(--line);
}
.visit_details_meta_item small,
.visit_details_meta_item strong
{
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.visit_details_meta_item small
{
color: var(--muted);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.visit_details_meta_item strong
{
margin-top: 4px;
color: var(--ink);
font-size: 0.76rem;
font-weight: 700;
line-height: 1.35;
}
.visit_details_status_banner
{
display: flex;
align-items: flex-start;
gap: 11px;
margin-top: 12px;
padding: 13px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
}
.visit_details_status_banner.green
{
border-color: rgba(28, 157, 87, 0.22);
background: var(--green_soft);
}
.visit_details_status_banner.gold
{
border-color: rgba(245, 166, 35, 0.3);
background: var(--gold_soft);
}
.visit_details_status_banner.danger
{
border-color: rgba(239, 68, 68, 0.25);
background: var(--danger_soft);
}
.visit_details_status_banner.neutral
{
background: #f8f9fa;
}
.visit_details_status_icon
{
width: 33px;
height: 33px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(255, 255, 255, 0.75);
color: var(--brand);
flex: 0 0 auto;
}
.visit_details_status_banner.green .visit_details_status_icon
{
color: var(--green);
}
.visit_details_status_banner.gold .visit_details_status_icon
{
color: #9a6100;
}
.visit_details_status_banner.danger .visit_details_status_icon
{
color: var(--danger);
}
.visit_details_status_banner strong,
.visit_details_status_banner small
{
display: block;
}
.visit_details_status_banner strong
{
color: var(--ink);
font-size: 0.8rem;
font-weight: 800;
}
.visit_details_status_banner small
{
margin-top: 3px;
color: var(--muted);
font-size: 0.72rem;
line-height: 1.45;
}
.visit_details_section_heading
{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin: 18px 2px 9px;
}
.visit_details_section_heading span
{
color: var(--ink);
font-size: 0.82rem;
font-weight: 800;
}
.visit_details_section_heading small
{
color: var(--muted);
font-size: 0.66rem;
font-weight: 600;
}
.visit_details_provider_card
{
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
color: inherit;
cursor: pointer;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid var(--line);
transition: background 0.15s ease, border-color 0.15s ease;
}
.visit_details_provider_card:hover
{
background: #fcfbfe;
border-color: #e8d9f8;
color: inherit;
text-decoration: none;
}
.visit_details_provider_avatar
{
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
.visit_details_provider_initials
{
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, var(--brand_soft), #e2d6f5);
color: var(--brand);
font-weight: 900;
}
.visit_details_provider_content
{
min-width: 0;
flex: 1;
}
.visit_details_provider_name
{
color: var(--ink);
font-size: 0.8rem;
font-weight: 800;
}
.visit_details_provider_meta
{
margin-top: 3px;
color: var(--muted);
font-size: 0.68rem;
line-height: 1.4;
}
.visit_details_provider_chevron
{
color: var(--brand);
font-size: 0.9rem;
flex: 0 0 auto;
}
.visit_details_manage_list
{
overflow: hidden;
}
.visit_details_manage_row
{
width: 100%;
display: flex;
align-items: center;
gap: 11px;
border: 0;
border-bottom: 1px solid var(--line);
background: var(--surface);
padding: 12px;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.visit_details_manage_row:last-child
{
border-bottom: 0;
}
.visit_details_manage_row:hover
{
background: #fcfbfe;
}
.visit_details_checkin_card
{
border-top: 1px solid var(--line);
border-bottom: 0;
}
.visit_details_checkin_card:hover
{
background: #fcfbfe;
}
.visit_manage_row_locked
{
cursor: default;
opacity: 0.6;
}
.visit_manage_row_locked:hover
{
background: var(--surface);
}
.visit_details_checkin_card.visit_manage_row_locked
{
cursor: pointer;
opacity: 1;
}
.visit_details_checkin_card.visit_manage_row_locked:hover
{
background: #fcfbfe;
}
.visit_details_manage_icon
{
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--brand_soft);
color: var(--brand);
flex: 0 0 auto;
}
.visit_details_manage_icon.green
{
background: var(--green_soft);
color: var(--green);
}
.visit_details_manage_icon.blue
{
background: var(--blue_soft);
color: var(--blue);
}
.visit_details_manage_icon.amber
{
background: var(--gold_soft);
color: #9a6100;
}
.visit_details_manage_content
{
min-width: 0;
flex: 1;
}
.visit_details_manage_content strong,
.visit_details_manage_content small
{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.visit_details_manage_content strong
{
color: var(--ink);
font-size: 0.78rem;
font-weight: 800;
}
.visit_details_manage_content small
{
margin-top: 3px;
color: var(--muted);
font-size: 0.68rem;
}
.visit_details_manage_content .visit_details_checkin_complaint
{
color: #4b5563;
line-height: 1.35;
white-space: normal;
}
.visit_details_manage_content .visit_details_checkin_complaint.visit_details_complaint_empty
{
color: var(--muted);
}
.visit_details_manage_action
{
display: flex;
align-items: center;
gap: 5px;
color: var(--brand);
font-size: 0.67rem;
font-weight: 800;
white-space: nowrap;
flex: 0 0 auto;
}
.visit_details_schedule_card
{
overflow: hidden;
}
.visit_details_schedule_group
{
padding: 13px;
border-bottom: 1px solid var(--line);
}
.visit_details_schedule_group:last-child
{
border-bottom: 0;
}
.visit_details_schedule_header
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.visit_details_schedule_header strong
{
color: var(--ink);
font-size: 0.76rem;
font-weight: 800;
}
.visit_details_schedule_header button
{
border: 0;
background: transparent;
padding: 0;
color: var(--brand);
font-size: 0.68rem;
font-weight: 800;
cursor: pointer;
}
.visit_details_time_list
{
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 10px;
}
.visit_details_time_chip,
.visit_details_schedule_empty
{
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--line);
border-radius: var(--radius_pill);
background: var(--page);
padding: 6px 9px;
color: #4b5563;
font-size: 0.65rem;
font-weight: 700;
}
.visit_details_time_chip.accepted
{
border-color: var(--brand);
background: var(--brand_soft);
color: var(--brand);
}
.visit_details_schedule_empty
{
color: var(--muted);
}
.visit_location_panel .mchat_messages,
.visit_location_messages
{
background: var(--page);
padding: 14px;
}
.visit_location_footer
{
display: block;
background: var(--page);
border-top: 0;
box-shadow: none;
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.visit_location_summary,
.visit_location_details,
.visit_location_office_card
{
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.visit_location_summary
{
display: flex;
align-items: flex-start;
gap: 11px;
margin-bottom: 12px;
padding: 12px;
}
.visit_location_summary_icon
{
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--brand_soft);
color: var(--brand);
flex: 0 0 auto;
}
.visit_location_summary strong,
.visit_location_summary small,
.visit_location_instruction_card strong,
.visit_location_instruction_card small,
.visit_location_office_card strong,
.visit_location_office_card small
{
display: block;
}
.visit_location_summary strong
{
color: var(--ink);
font-size: 0.84rem;
font-weight: 800;
}
.visit_location_summary small
{
margin-top: 4px;
color: var(--muted);
font-size: 0.72rem;
line-height: 1.45;
}
.visit_location_details
{
overflow: hidden;
}
.visit_location_instruction_card
{
display: flex;
align-items: flex-start;
gap: 11px;
padding: 13px;
border-bottom: 1px solid var(--line);
}
.visit_location_instruction_card:last-child
{
border-bottom: 0;
}
.visit_location_instruction_card i
{
width: 33px;
height: 33px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--brand_soft);
color: var(--brand);
flex: 0 0 auto;
}
.visit_location_instruction_card strong,
.visit_location_office_card strong
{
color: var(--ink);
font-size: 0.78rem;
font-weight: 800;
}
.visit_location_instruction_card small,
.visit_location_office_card small
{
margin-top: 3px;
color: var(--muted);
font-size: 0.7rem;
line-height: 1.45;
}
.visit_location_office_card
{
margin-bottom: 12px;
padding: 13px;
}
.visit_location_map
{
width: 100%;
height: 250px;
display: block;
margin-bottom: 12px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
}
.visit_location_directions_button
{
width: 100%;
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
border-radius: var(--radius);
background: var(--brand);
color: #fff;
font-size: 0.84rem;
font-weight: 800;
text-decoration: none;
}
.visit_location_directions_button:hover
{
color: #fff;
text-decoration: none;
}
.visit_connection_test_card
{
padding: 13px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.visit_connection_test_header
{
display: flex;
align-items: flex-start;
gap: 11px;
margin-bottom: 12px;
}
.visit_connection_test_icon
{
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--brand_soft);
color: var(--brand);
flex: 0 0 auto;
}
.visit_connection_test_card strong,
.visit_connection_test_card small
{
display: block;
}
.visit_connection_test_card strong
{
color: var(--ink);
font-size: 0.78rem;
font-weight: 800;
}
.visit_connection_test_card small
{
margin-top: 3px;
color: var(--muted);
font-size: 0.7rem;
line-height: 1.45;
}
.visit_connection_test_button
{
width: 100%;
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 0;
border-radius: var(--radius);
background: var(--brand);
color: #fff;
font-size: 0.84rem;
font-weight: 800;
}
.visit_connection_test_button:hover,
.visit_connection_test_button:focus
{
color: #fff;
}
.visit_connection_test_note
{
margin-top: 9px;
color: var(--muted);
font-size: 0.68rem;
line-height: 1.4;
text-align: center;
}
.visit_connection_preview_panel .connection_preview_header,
.visit_connection_preview_panel .connection_preview_messages,
.visit_connection_preview_panel .connection_preview_footer
{
background: #1c1c1e;
}
.visit_connection_preview_panel .connection_preview_header
{
padding-top: env(safe-area-inset-top);
border-bottom: 1px solid #333;
}
.visit_connection_preview_panel .connection_preview_header .mchat_username
{
color: #fff;
}
.visit_connection_preview_panel .connection_preview_header .close_side_menu_button
{
border: 1px solid #444;
color: #ccc;
}
.connection_preview_messages
{
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.connection_preview_video_shell
{
width: 100%;
max-width: 420px;
overflow: hidden;
position: relative;
margin-bottom: 20px;
border-radius: 12px;
background: #000;
}
.connection_preview_video_stage
{
aspect-ratio: 4 / 3;
position: relative;
}
.connection_preview_video_el
{
width: 100%;
height: 100%;
display: none;
object-fit: cover;
transform: scaleX(-1);
}
.connection_preview_camera_placeholder
{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #666;
font-size: 0.85rem;
}
.connection_preview_camera_placeholder i
{
margin-bottom: 10px;
color: #555;
font-size: 3rem;
}
.connection_preview_audio_meter
{
width: 100%;
max-width: 420px;
margin-bottom: 24px;
}
.connection_preview_audio_label
{
display: flex;
justify-content: space-between;
margin-bottom: 6px;
color: #aaa;
font-size: 0.8rem;
}
.connection_preview_audio_track
{
height: 8px;
overflow: hidden;
border-radius: 4px;
background: #333;
}
.connection_preview_audio_level_bar
{
width: 0%;
height: 100%;
border-radius: 4px;
background: var(--brand);
transition: width 0.1s;
}
.connection_preview_controls
{
display: flex;
gap: 32px;
margin-bottom: 20px;
}
.connection_preview_control_group
{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: #aaa;
font-size: 0.75rem;
}
.connection_preview_round_button
{
width: 60px;
height: 60px;
border: 0;
border-radius: 50%;
background: var(--brand);
color: #fff;
font-size: 1.5rem;
}
.connection_preview_round_button.connection_preview_off
{
background: #3a3a3c;
}
.connection_preview_errors
{
width: 100%;
max-width: 420px;
font-size: 0.78rem;
}
.connection_preview_help_text
{
max-width: 320px;
color: #777;
font-size: 0.82rem;
line-height: 1.45;
text-align: center;
}
.connection_preview_footer
{
display: block;
border-top: 1px solid #333;
box-shadow: none;
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.visit_prejoin_footer
{
color: #fff;
}
.visit_prejoin_confirm_row
{
display: flex;
flex-direction: column;
margin-bottom: 10px;
padding: 10px;
border: 1px solid rgba(134, 94, 191, 0.34);
border-radius: var(--radius);
background: #242426;
}
.visit_prejoin_location_option
{
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
gap: 10px;
padding: 6px 2px;
border: 0;
border-radius: 0;
background: transparent;
color: #f5f5f7;
text-align: left;
cursor: pointer;
transition: color 0.12s;
}
.visit_prejoin_location_option.visit_prejoin_location_selected
{
color: #ffffff;
}
.visit_prejoin_radio_circle
{
width: 30px;
height: 30px;
min-width: 30px;
border: 2px solid #a98be0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #1f1f22;
}
.visit_prejoin_radio_dot
{
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--brand);
opacity: 0;
transform: scale(0.5);
transition: opacity 0.12s, transform 0.12s;
}
.visit_prejoin_location_selected .visit_prejoin_radio_circle
{
border-color: var(--brand);
background: #f3e8ff;
}
.visit_prejoin_location_selected .visit_prejoin_radio_dot
{
opacity: 1;
transform: scale(1);
}
.visit_prejoin_location_text
{
flex: 1;
min-width: 0;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.35;
}
.visit_prejoin_change_location_class
{
display: inline-block;
margin-top: 5px;
padding: 0;
border: 0;
background: transparent;
color: #cdb9ff;
font-size: 0.72rem;
font-weight: 700;
text-align: left;
}
.visit_prejoin_location_disclosure
{
margin-top: 5px;
color: rgba(245, 245, 247, 0.55);
font-size: 0.68rem;
line-height: 1.3;
}
.visit_prejoin_errors
{
margin-bottom: 10px;
font-size: 0.78rem;
}
.visit_documents_panel .mchat_messages,
.visit_documents_messages
{
background: var(--page);
padding: 14px;
}
.visit_documents_footer
{
display: block;
background: var(--page);
border-top: 0;
box-shadow: none;
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.visit_documents_summary
{
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 12px;
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.visit_documents_summary_icon,
.visit_documents_icon,
.visit_documents_empty_icon
{
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--brand_soft);
color: var(--brand);
flex: 0 0 auto;
}
.visit_documents_summary strong,
.visit_documents_summary small
{
display: block;
}
.visit_documents_summary strong
{
color: var(--ink);
font-size: 0.82rem;
font-weight: 800;
}
.visit_documents_summary small
{
margin-top: 2px;
color: var(--muted);
font-size: 0.68rem;
}
.visit_documents_list
{
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.visit_documents_row
{
width: 100%;
display: flex;
align-items: center;
gap: 11px;
border: 0;
border-bottom: 1px solid var(--line);
background: var(--surface);
padding: 12px;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.visit_documents_row:last-child
{
border-bottom: 0;
}
.visit_documents_row:hover
{
background: #fcfbfe;
}
.visit_documents_icon.green
{
background: var(--green_soft);
color: var(--green);
}
.visit_documents_icon.blue
{
background: var(--blue_soft);
color: var(--blue);
}
.visit_documents_icon.purple
{
background: var(--brand_soft);
color: var(--brand);
}
.visit_documents_icon.amber
{
background: var(--gold_soft);
color: #9a6100;
}
.visit_documents_icon.pink
{
background: #fff0f6;
color: #b5005b;
}
.visit_documents_icon.neutral
{
background: var(--page);
color: var(--muted);
}
.visit_documents_thumb
{
width: 36px;
height: 36px;
border-radius: 10px;
object-fit: cover;
flex: 0 0 auto;
}
.visit_documents_row_content
{
min-width: 0;
flex: 1;
}
.visit_documents_row_content strong,
.visit_documents_row_content small
{
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.visit_documents_row_content strong
{
color: var(--ink);
font-size: 0.78rem;
font-weight: 800;
}
.visit_documents_row_content small
{
margin-top: 3px;
color: var(--muted);
font-size: 0.68rem;
}
.visit_documents_row_action
{
color: var(--brand);
font-size: 0.78rem;
flex: 0 0 auto;
}
.visit_documents_empty
{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 28px 18px;
text-align: center;
}
.visit_documents_empty strong
{
color: var(--ink);
font-size: 0.88rem;
font-weight: 800;
}
.visit_documents_empty small
{
max-width: 340px;
color: var(--muted);
font-size: 0.72rem;
line-height: 1.45;
}
@media (min-width: 560px)
{
.visit_details_manage_list
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.visit_details_manage_row
{
min-height: 72px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
box-shadow: var(--shadow_xs);
}
.visit_details_checkin_card
{
border-right: 0;
border-left: 0;
border-radius: 0;
box-shadow: none;
}
.visit_details_schedule_card
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.visit_details_schedule_group
{
border-bottom: 0;
}
.visit_details_schedule_group + .visit_details_schedule_group
{
border-left: 1px solid var(--line);
}
}
/* Visits two-column layout */
.visits_two_col
{
display: grid;
grid-template-columns: 1fr 280px;
gap: 24px;
align-items: start;
}
.visits_list_col { min-width: 0; }
.visits_side_col
{
position: sticky;
top: -20px; /*60px;*/
}
/* Card block (side panel) */
.card_block
{
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
border: 1px solid #e5e7eb;
overflow: hidden;
margin-bottom: 16px;
}
.card_block_header
{
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px 12px;
border-bottom: 1px solid #f3f4f6;
}
.card_block_title
{
font-size: 0.85rem;
font-weight: 600;
color: #1a1a2e;
}
.card_block_body { padding: 14px 18px; }
/* Side panel stats */
.vsp_stat_row
{
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 0;
border-bottom: 1px solid #f3f4f6;
}
.vsp_stat_row:last-child { border-bottom: none; padding-bottom: 0; }
.vsp_stat_label
{
font-size: 0.78rem;
color: #6b7280;
}
.vsp_stat_value
{
font-size: 0.82rem;
font-weight: 600;
color: #1a1a2e;
}
/* Quick request buttons */
.vsp_quick_btn
{
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
background: transparent;
border: 1px solid #e5e7eb;
border-radius: 9px;
cursor: pointer;
font-size: 0.8rem;
font-weight: 500;
color: #1a1a2e;
font-family: inherit;
text-align: left;
transition: border-color 0.12s, background 0.12s;
margin-bottom: 6px;
}
.vsp_quick_btn:hover { border-color: #865EBF; background: #f3e8ff; }
.vsp_quick_icon
{
width: 28px;
height: 28px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
}
/* Small card action buttons */
.btn_sm_outline
{
font-size: 0.72rem;
font-weight: 500;
padding: 5px 10px;
border-radius: 7px;
border: 1.5px solid #e5e7eb;
background: transparent;
color: #6b7280;
cursor: pointer;
transition: border-color 0.12s, color 0.12s;
font-family: inherit;
white-space: nowrap;
}
.btn_sm_outline:hover
{
border-color: #865EBF;
color: #865EBF;
}
.btn_sm_brand
{
font-size: 0.72rem;
font-weight: 600;
padding: 5px 12px;
border-radius: 7px;
border: none;
background: #865EBF;
color: #fff;
cursor: pointer;
transition: background 0.12s;
font-family: inherit;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 4px;
}
.btn_sm_brand:hover { background: #6a46a3; }
.btn_sm_ghost
{
font-size: 0.72rem;
font-weight: 500;
padding: 5px 10px;
border-radius: 7px;
border: none;
background: transparent;
color: #9ca3af;
cursor: pointer;
transition: color 0.12s;
font-family: inherit;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 4px;
}
.btn_sm_ghost:hover { color: var(--brand); }
/* Responsive */
@media (max-width: 1100px)
{
.visits_two_col { grid-template-columns: 1fr; }
.visits_side_col { display: none; }
}
@media (max-width: 767px)
{
.visits_section_outer { padding: 12px 14px 80px; }
.visits_tabs_nav
{
width: 100%;
}
.visits_tabs_nav > .visits_tab_btn
{
flex: 1 1 0;
justify-content: center;
min-width: 0;
padding-left: 8px;
padding-right: 8px;
text-align: center;
}
.messages_section_wrap { padding: 0 10px 80px !important; }
.documents_section_wrap { padding: 0 10px 80px !important; }
.msg_inbox_card {
border-radius: 0;
border-left: none;
border-right: none;
margin-left: -10px;
margin-right: -10px;
}
}
/* ─── Documents section ──────────────────────────────────────────── */
.doc_group_label
{
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #6b7280;
padding: 16px 0 6px;
}
.doc_row
{
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border-radius: 12px;
padding: 13px 16px;
margin-bottom: 6px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
cursor: pointer;
transition: box-shadow 0.12s, border-color 0.12s;
}
.doc_row:hover
{
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
border-color: #e8d9f8;
}
.doc_icon_wrap
{
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.doc_thumb
{
width: 60px;
height: 60px;
min-width: 60px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
display: block;
}
.doc_row .chartinfo
{
flex: 1;
min-width: 0;
}
.doc_title
{
font-size: 0.85rem;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 2px;
}
.doc_meta
{
font-size: 0.73rem;
color: #6b7280;
line-height: 1.4;
}
.doc_arrow
{
color: #6b7280;
font-size: 0.75rem;
flex-shrink: 0;
}
.doc_type_chip
{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
font-weight: 500;
padding: 5px 10px;
border-radius: 20px;
border: 1px solid #e5e7eb;
background: #fff;
color: #1a1a2e;
cursor: default;
}
.doc_type_count
{
background: #e5e7eb;
color: #6b7280;
border-radius: 10px;
font-size: 0.62rem;
font-weight: 700;
padding: 1px 5px;
margin-left: 2px;
}
.doc_empty_state
{
padding: 20px;
font-size: 0.85rem;
color: #6b7280;
}
.search_documents_class:focus
{
border-color: #865EBF !important;
outline: none;
box-shadow: 0 0 0 3px rgba(134,94,191,0.15) !important;
}
.doc_filter_btn
{
border: 1.5px solid #865EBF;
color: #865EBF;
background: #fff;
border-radius: 4px;
font-size: 0.8rem;
transition: background 0.12s, color 0.12s;
}
.doc_filter_btn:hover,
.doc_filter_btn.show
{
background: #f3e8ff;
color: #6a46a3;
border-color: #6a46a3;
}
/* ─── Account Drawer ─────────────────────────────────────── */
.acct_drawer_overlay
{
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 1000;
}
.acct_drawer_overlay.open { display: block; }
.acct_drawer
{
position: fixed;
top: 0;
right: -380px;
width: 340px;
height: 100dvh;
background: #1a1040;
z-index: 1001;
transition: right 0.26s cubic-bezier(0.32, 0, 0.15, 1);
box-shadow: -6px 0 32px rgba(0,0,0,0.32);
display: flex;
flex-direction: column;
overflow: hidden;
}
.acct_drawer.open { right: 0; }
@media (max-width: 480px)
{
.acct_drawer { width: 100%; right: -110%; }
}
.acct_drawer_header
{
padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 16px;
border-bottom: 1px solid rgba(255,255,255,0.07);
flex-shrink: 0;
}
.acct_drawer_close_btn
{
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.12s, color 0.12s;
}
.acct_drawer_close_btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.acct_drawer_profile
{
display: flex;
align-items: flex-start;
gap: 12px;
}
.acct_drawer_avatar
{
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #865EBF 0%, #a07de0 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.acct_drawer_name
{
font-size: 0.95rem;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.acct_drawer_email
{
font-size: 0.75rem;
color: rgba(255,255,255,0.45);
margin-top: 1px;
}
.acct_drawer_role_pill
{
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 5px;
background: rgba(134,94,191,0.25);
border: 1px solid rgba(134,94,191,0.4);
border-radius: 20px;
padding: 2px 9px;
font-size: 0.68rem;
font-weight: 600;
color: #c9a5e8;
}
.acct_drawer_footer
{
flex-shrink: 0;
padding: 6px 16px calc(env(safe-area-inset-bottom, 0px) + 10px);
border-top: 1px solid rgba(255,255,255,0.07);
}
.acct_drawer_body
{
flex: 1;
overflow-y: auto;
scrollbar-width: none;
padding: 18px 16px 6px;
}
.acct_drawer_body::-webkit-scrollbar { display: none; }
.acct_section_label
{
font-size: 0.63rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255,255,255,0.28);
padding: 0 4px 8px;
}
.acct_context_toggle
{
display: flex;
background: rgba(255,255,255,0.06);
border-radius: 10px;
padding: 4px;
gap: 4px;
margin-bottom: 16px;
}
.acct_ctx_pill
{
flex: 1;
padding: 7px 10px;
border-radius: 7px;
text-align: center;
font-size: 0.78rem;
font-weight: 600;
color: rgba(255,255,255,0.45);
cursor: pointer;
transition: background 0.15s, color 0.15s;
user-select: none;
}
.acct_ctx_pill.active
{
background: #865EBF;
color: #fff;
}
.acct_context_card
{
display: flex;
align-items: center;
gap: 12px;
padding: 11px 13px;
border-radius: 10px;
background: rgba(255,255,255,0.05);
border: 1.5px solid transparent;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
margin-bottom: 7px;
}
.acct_context_card:hover { background: rgba(255,255,255,0.09); }
.acct_context_card.selected
{
background: rgba(134,94,191,0.15);
border-color: rgba(134,94,191,0.55);
}
.acct_ctx_icon
{
width: 38px;
height: 38px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.acct_ctx_icon_patient { background: rgba(134,94,191,0.2); color: #c9a5e8; }
.acct_ctx_icon_practice { background: rgba(16,185,129,0.15); color: #6ee7b7; }
.acct_ctx_icon_admin { background: rgba(59,130,246,0.15); color: #93c5fd; }
.acct_ctx_text_primary
{
font-size: 0.84rem;
font-weight: 600;
color: #fff;
line-height: 1.3;
}
.acct_ctx_text_sub
{
font-size: 0.72rem;
color: rgba(255,255,255,0.4);
margin-top: 1px;
}
.acct_ctx_check
{
margin-left: auto;
color: #865EBF;
font-size: 0.95rem;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.12s;
}
.acct_context_card.selected .acct_ctx_check { opacity: 1; }
.acct_menu_item
{
display: flex;
align-items: center;
gap: 11px;
padding: 10px 12px;
border-radius: 9px;
font-size: 0.84rem;
font-weight: 500;
color: rgba(255,255,255,0.65);
cursor: pointer;
text-decoration: none;
transition: background 0.12s, color 0.12s;
margin-bottom: 1px;
}
.acct_menu_item i
{
font-size: 0.95rem;
width: 18px;
text-align: center;
color: rgba(255,255,255,0.35);
transition: color 0.12s;
}
.acct_menu_item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.acct_menu_item:hover i { color: rgba(255,255,255,0.7); }
.acct_menu_item_danger { color: #fca5a5; }
.acct_menu_item_danger i { color: #fca5a5; }
.acct_menu_item_danger:hover { background: rgba(239,68,68,0.1); color: #fca5a5; }
.acct_menu_item_danger:hover i { color: #fca5a5; }
.acct_menu_divider
{
height: 1px;
background: rgba(255,255,255,0.07);
margin: 8px 4px;
}
#account_topbar_avatar
{
transition: box-shadow 0.15s;
}
#account_topbar_avatar:hover
{
box-shadow: 0 0 0 3px rgba(134,94,191,0.35);
}
/* ─── Family Members section ────────────────────────────────── */
.family_hub
{
max-width: 1180px;
margin: 0 auto;
padding: 24px 28px 48px;
}
.family_overview_card
{
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 22px;
padding: 20px 22px;
margin-bottom: 22px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: linear-gradient(135deg, var(--surface) 0%, var(--brand_soft) 100%);
box-shadow: var(--shadow_xs);
}
.family_overview_card::after
{
position: absolute;
right: -72px;
bottom: -108px;
width: 240px;
height: 240px;
border-radius: 50%;
background: var(--brand_soft);
content: '';
}
.family_overview_identity
{
position: relative;
z-index: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 18px;
}
.family_avatar_stack
{
min-width: 116px;
display: flex;
padding-left: 12px;
}
.family_stack_avatar
{
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
margin-left: -12px;
border: 3px solid var(--surface);
border-radius: 50%;
box-shadow: var(--shadow_xs);
color: #fff;
font-size: 0.74rem;
font-weight: 800;
}
.family_stack_more
{
background: var(--brand_deep);
}
.family_avatar_0 { background: var(--brand); }
.family_avatar_1 { background: var(--blue); }
.family_avatar_2 { background: var(--teal); }
.family_avatar_3 { background: var(--green); }
.family_avatar_4 { background: var(--gold); }
.family_avatar_5 { background: var(--brand_dark); }
.family_avatar_6 { background: var(--danger); }
.family_overview_copy
{
min-width: 0;
}
.family_overview_label
{
color: var(--brand);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.family_overview_name
{
margin-top: 4px;
color: var(--ink);
font-size: 1.18rem;
font-weight: 800;
line-height: 1.25;
}
.family_overview_hint
{
max-width: 410px;
margin-top: 5px;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.55;
}
.family_overview_stats
{
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.family_overview_stat
{
min-width: 78px;
padding: 10px 11px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.family_stat_value
{
color: var(--ink);
font-size: 1rem;
font-weight: 800;
}
.family_stat_label
{
margin-top: 2px;
color: var(--muted);
font-size: 0.7rem;
}
.family_section_heading
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.family_section_title
{
color: var(--ink);
font-size: 0.98rem;
font-weight: 700;
}
.fmc_list
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.family_member_card
{
min-width: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}
.family_member_card:hover
{
border-color: var(--brand);
box-shadow: var(--shadow_small);
transform: translateY(-1px);
}
.fmc_top
{
display: grid;
grid-template-columns: 58px minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
padding: 16px 16px 14px;
}
.fmc_avatar
{
width: 56px;
height: 56px;
min-width: 56px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50%;
color: #fff;
font-size: 0.88rem;
font-weight: 800;
line-height: 1;
}
.fmc_avatar img
{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.fmc_identity
{
min-width: 0;
padding-top: 2px;
}
.fmc_name
{
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
color: var(--ink);
font-size: 0.92rem;
font-weight: 800;
line-height: 1.25;
}
.fmc_rel
{
margin-top: 5px;
color: var(--muted);
font-size: 0.73rem;
line-height: 1.35;
}
.fmc_self_badge,
.fmc_child_badge
{
min-height: 20px;
display: inline-flex;
align-items: center;
padding: 0 7px;
border-radius: var(--radius_pill);
font-size: 0.61rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.fmc_self_badge
{
background: var(--brand_soft);
color: var(--brand);
}
.fmc_child_badge
{
background: var(--green_soft);
color: var(--green);
}
.fmc_top_right
{
display: flex;
align-items: center;
gap: 8px;
padding-top: 1px;
flex-shrink: 0;
}
.fmc_menu_btn
{
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
color: var(--muted);
font-size: 0.95rem;
cursor: pointer;
transition: border-color 0.12s, color 0.12s;
}
.fmc_menu_btn:hover
{
border-color: var(--brand);
color: var(--brand);
}
.family_member_update
{
min-height: 42px;
display: flex;
align-items: center;
gap: 7px;
padding: 10px 16px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--page);
color: var(--muted);
font-size: 0.7rem;
line-height: 1.35;
}
.family_member_update i
{
color: var(--brand);
font-size: 0.76rem;
}
.fmc_actions
{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 12px;
}
.fmc_actions .btn_ndd
{
width: 100%;
min-height: 36px;
padding: 0 10px;
font-size: 0.76rem;
}
.family_pending_card
{
border-color: var(--gold);
}
.family_pending_avatar
{
background: var(--gold_soft);
color: var(--gold);
}
.family_pending_actions
{
grid-template-columns: 1fr;
}
.family_add_card
{
min-height: 216px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 18px;
border: 1.5px dashed var(--brand);
border-radius: var(--radius_lg);
background: var(--page);
color: var(--brand);
font-family: inherit;
text-align: center;
cursor: pointer;
}
.family_add_card:hover
{
border-color: var(--brand);
background: var(--brand_soft);
}
.family_add_icon
{
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
border-radius: 50%;
background: var(--surface);
box-shadow: var(--shadow_xs);
font-size: 1.05rem;
}
.family_add_text
{
display: flex;
flex-direction: column;
align-items: center;
}
.family_add_title
{
color: var(--brand);
font-size: 0.85rem;
font-weight: 800;
}
.family_add_copy
{
max-width: 200px;
margin-top: 5px;
color: var(--muted);
font-size: 0.7rem;
line-height: 1.45;
}
.family_privacy_note
{
max-width: 680px;
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 0 2px;
color: var(--muted);
font-size: 0.67rem;
line-height: 1.5;
}
.family_privacy_note i
{
color: var(--brand);
font-size: 0.92rem;
}
@media (max-width: 1100px)
{
.family_overview_hint
{
display: none;
}
}
@media (max-width: 900px)
{
.family_avatar_stack
{
display: none;
}
.fmc_list
{
grid-template-columns: 1fr;
}
}
@media (max-width: 767px)
{
.family_hub
{
padding: 18px 14px 82px;
}
.family_overview_card
{
grid-template-columns: 1fr;
align-items: flex-start;
gap: 18px;
padding: 20px 16px;
}
.family_overview_identity
{
gap: 15px;
}
.family_avatar_stack
{
display: flex;
min-width: 99px;
}
.family_stack_avatar
{
width: 40px;
height: 40px;
}
.family_overview_hint
{
display: none;
}
.family_overview_stats
{
width: 100%;
gap: 7px;
}
.family_overview_stat
{
min-width: 0;
flex: 1;
padding: 10px 11px;
}
.family_stat_value
{
font-size: 0.92rem;
}
.family_stat_label
{
font-size: 0.62rem;
}
.fmc_top
{
grid-template-columns: 52px minmax(0, 1fr) auto;
padding: 14px;
}
.fmc_avatar
{
width: 50px;
height: 50px;
min-width: 50px;
}
.family_add_card
{
min-height: 116px;
flex-direction: row;
justify-content: flex-start;
gap: 12px;
text-align: left;
}
.family_add_icon
{
flex: none;
margin: 0;
}
.family_add_text
{
align-items: flex-start;
}
}
/* ─── Care Team section ──────────────────────────────────────────── */
.ct_practice_card
{
background: #ffffff;
border-radius: 12px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
overflow: hidden;
margin-bottom: 12px;
transition: box-shadow 0.15s, border-color 0.15s;
}
.ct_practice_card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #e8d9f8; }
.ct_practice_card_header
{
padding: 16px 18px 14px;
border-bottom: 1px solid #f3f4f6;
display: flex;
align-items: flex-start;
gap: 14px;
}
.ct_practice_avatar
{
width: 52px;
height: 52px;
min-width: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
font-weight: 700;
color: #fff;
}
.ct_avatar_img
{
object-fit: cover;
background: #f3f4f6;
}
.ct_practice_identity { flex: 1; min-width: 0; }
.ct_practice_name
{
font-size: 0.95rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 3px;
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
.ct_practice_specialty { font-size: 0.77rem; color: #6b7280; margin-bottom: 5px; }
.ct_member_since
{
font-size: 0.73rem;
color: #6b7280;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ct_active_badge
{
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.65rem;
font-weight: 700;
background: #f0fdf4;
color: #16a34a;
padding: 3px 9px;
border-radius: 20px;
border: 1px solid #bbf7d0;
white-space: nowrap;
}
.ct_active_badge::before
{
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
display: block;
flex-shrink: 0;
}
.ct_plan_chip
{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.65rem;
font-weight: 700;
background: #f3e8ff;
color: #865EBF;
padding: 3px 9px;
border-radius: 20px;
border: 1px solid #e8d9f8;
white-space: nowrap;
}
.ct_practice_top_right
{
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex-shrink: 0;
}
.ct_practice_stats
{
display: flex;
border-bottom: 1px solid #f3f4f6;
padding: 10px 18px;
background: #fafafa;
}
.ct_stat_item
{
flex: 1;
text-align: center;
padding: 0 8px;
border-right: 1px solid #f3f4f6;
}
.ct_stat_item:first-child { padding-left: 0; text-align: left; }
.ct_stat_item:last-child { border-right: none; text-align: right; }
.ct_stat_val
{
font-size: 0.85rem;
font-weight: 700;
color: #1a1a2e;
line-height: 1.2;
white-space: nowrap;
}
.ct_stat_lbl { font-size: 0.67rem; color: #6b7280; margin-top: 2px; }
.ct_practice_actions
{
padding: 12px 18px;
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
/* ─── Care Team — covered member rows ────────────────────────────── */
/* one row per person on a membership: their own plan + rate, and the actions that apply to them */
.ct_member_section_label
{
padding: 12px 18px 6px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.ct_member_list { padding: 0 0 4px; }
.ct_member_row
{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-top: 1px solid var(--line);
flex-wrap: wrap;
}
.ct_member_row:first-child { border-top: none; }
/* rows that open the patient's profile panel on tap -- the action buttons inside them keep their own clicks */
.ct_member_row_profile
{
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ct_member_row_profile:hover { background: var(--page); }
.ct_member_row_profile:active { background: var(--page); }
.ct_member_avatar
{
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
}
.ct_member_body { flex: 1; min-width: 120px; }
.ct_member_name
{
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
}
/* the plan chip is the affordance that opens the coverage panel — styled as a button, not a static badge */
.ct_member_plan_chip
{
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.68rem;
font-weight: 700;
background: var(--brand_soft);
color: var(--brand);
padding: 4px 10px;
border-radius: 20px;
border: 1px solid #e8d9f8;
white-space: nowrap;
cursor: pointer;
}
.ct_member_plan_chip:hover { background: #ead9ff; border-color: var(--brand); }
.ct_member_plan_chip i { font-size: 0.85em; opacity: 0.8; }
.ct_member_actions
{
display: flex;
gap: 6px;
flex-shrink: 0;
margin-left: auto;
}
.ct_member_btn
{
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
font-weight: 600;
padding: 6px 11px;
border-radius: 7px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
white-space: nowrap;
cursor: pointer;
}
.ct_member_btn:hover { border-color: var(--brand); color: var(--brand); }
.ct_member_btn_brand
{
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.ct_member_btn_brand:hover { background: var(--brand_dark); border-color: var(--brand_dark); color: #fff; }
/* uncovered family members sit in the same list but must not read as covered — ghosted avatar, dashed
quote button, so the row is legible as an offer rather than as someone already on the plan */
.ct_member_sub
{
font-size: 0.72rem;
color: var(--muted);
}
.ct_member_avatar_ghost
{
background: var(--page) !important;
color: var(--muted);
border: 1px dashed var(--line);
}
.ct_member_btn_quote
{
border-style: dashed;
border-color: var(--brand);
color: var(--brand);
background: var(--brand_soft);
}
.ct_member_btn_quote:hover { background: var(--brand); border-style: solid; color: #fff; }
/* iOS home Care Team cards keep each provider as the outer card. */
.ios_home_provider_card + .ios_home_provider_card
{
margin-top: 12px;
}
.ios_home_provider_header
{
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
gap: 12px;
align-items: start;
padding-bottom: 14px;
}
.ios_home_provider_header .ct_practice_avatar
{
align-self: start;
}
.ios_home_provider_menu
{
align-self: start;
}
.ios_home_provider_menu_btn
{
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--muted);
font-size: 1.15rem;
cursor: pointer;
position: relative;
}
.ios_home_provider_menu_btn::after
{
content: '';
position: absolute;
inset: -4px;
}
.ios_home_provider_menu_btn:hover,
.ios_home_provider_menu_btn[aria-expanded='true']
{
background: var(--page);
color: var(--ink);
}
.ios_home_provider_menu .dropdown-item
{
display: flex;
align-items: center;
gap: 8px;
}
.ios_home_provider_status_text
{
margin-top: 5px;
color: var(--danger);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.3;
}
.ios_home_provider_card > .ct_member_list,
.ios_home_provider_card > .ct_member_section_label
{
margin-right: -14px;
margin-left: -14px;
}
.ios_home_care_empty_members
{
padding: 12px 18px;
color: var(--muted);
font-size: 0.78rem;
}
.ios_home_member_avatar_private
{
background: var(--page);
color: var(--muted);
border: 1px solid var(--line);
}
.ios_home_member_book_btn
{
min-height: 36px;
padding: 5px 9px;
font-size: 0.68rem;
border-radius: 4px;
position: relative;
}
.ios_home_member_icon_btn
{
width: 36px;
height: 36px;
min-width: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--surface);
color: var(--brand);
text-decoration: none;
cursor: pointer;
position: relative;
}
.ios_home_member_icon_btn:hover
{
border-color: var(--brand);
background: var(--brand_soft);
color: var(--brand);
}
.ios_home_member_book_btn::after,
.ios_home_member_icon_btn::after
{
content: '';
position: absolute;
top: -4px;
right: 0;
bottom: -4px;
left: 0;
}
.ios_home_member_icon_btn::after
{
right: -4px;
left: -4px;
}
.ios_home_provider_card .ct_member_actions
{
gap: 5px;
}
.ios_home_provider_card .ct_member_name
{
margin-bottom: 0;
}
.ios_home_avatar_color_1
{
background: linear-gradient(135deg, var(--brand_dark), var(--brand));
}
.ios_home_avatar_color_2
{
background: linear-gradient(135deg, var(--brand_deep), var(--brand_dark));
}
.ios_home_avatar_color_3
{
background: linear-gradient(135deg, var(--brand_deep), var(--teal));
}
.ios_home_avatar_color_4
{
background: linear-gradient(135deg, var(--brand_deep), var(--blue));
}
.ios_home_avatar_color_5
{
background: linear-gradient(135deg, var(--brand_deep), var(--danger));
}
.ios_home_avatar_color_6
{
background: linear-gradient(135deg, var(--brand_deep), var(--green));
}
@media (max-width: 767px)
{
.ios_home_care_card .ct_practice_avatar
{
width: 46px;
height: 46px;
min-width: 46px;
}
.ios_home_care_card .ct_member_row
{
align-items: center;
padding: 11px 14px;
}
.ios_home_care_card .ct_member_actions
{
width: auto;
margin-left: auto;
flex-shrink: 0;
}
.ios_home_care_card .ios_home_member_book_btn
{
flex: none;
justify-content: center;
}
.ios_home_care_card .ct_member_section_label
{
padding-right: 14px;
padding-left: 14px;
}
}
@media (max-width: 390px)
{
.ios_home_care_card .ct_practice_avatar
{
width: 42px;
height: 42px;
min-width: 42px;
}
}
/* ─── Membership plan coverage panel ─────────────────────────────── */
.plan_cov_hero
{
display: flex;
align-items: center;
gap: 12px;
}
.plan_cov_hero_icon
{
width: 42px;
height: 42px;
min-width: 42px;
border-radius: 10px;
background: var(--brand_soft);
color: var(--brand);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
}
.plan_cov_hero_rate
{
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
}
.plan_cov_hero_rate span { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.plan_cov_list
{
list-style: none;
padding: 0;
margin: 10px 0 0;
}
.plan_cov_item
{
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 8px;
font-size: 0.83rem;
color: var(--ink);
padding: 5px 0;
}
.plan_cov_check
{
display: grid;
place-items: center;
width: 17px;
height: 17px;
border-radius: 50%;
background: color-mix(in srgb, var(--green) 25%, var(--surface));
color: var(--green);
transition: background-color 0.15s ease, color 0.15s ease;
}
.plan_cov_check::before
{
content: '';
width: 5px;
height: 8px;
margin-top: -2px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
}
/* exclusions block — services the plan does not cover, stated rather than left out (ToS 5.6) */
.plan_cov_excluded_block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.plan_cov_item_excluded { color: var(--muted); }
.plan_cov_cross { color: var(--muted); font-size: 0.9em; margin-top: 2px; }
.plan_cov_excluded_note { font-size: 0.75rem; color: var(--muted); margin-top: 6px; }
/* expandable "what's included" row — the caret opens a plain-English explanation of the benefit */
.plan_cov_item_expandable
{
margin: 2px -9px;
padding: 10px 9px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.plan_cov_item_expandable:hover { background: color-mix(in srgb, var(--green) 7%, var(--surface)); }
.plan_cov_item_expandable.plan_cov_item_open { background: color-mix(in srgb, var(--green) 12%, var(--surface)); }
.plan_cov_item_expandable.plan_cov_item_open .plan_cov_check { background: var(--green); color: var(--surface); }
/* the body wrapper is transparent to the row grid, so the expanded explanation can span both columns and
start at the item's left edge — flush under the check icon rather than indented into the text column */
.plan_cov_item_body { display: contents; }
.plan_cov_item_head
{
grid-column: 2;
min-width: 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.plan_cov_chevron
{
color: var(--muted);
font-size: 0.72em;
flex-shrink: 0;
transition: color 0.15s ease;
}
.plan_cov_item_expandable:hover .plan_cov_chevron,
.plan_cov_item_expandable.plan_cov_item_open .plan_cov_chevron { color: var(--green); }
.plan_cov_detail
{
grid-column: 1 / -1;
font-size: 0.78rem;
line-height: 1.45;
color: var(--muted);
margin-top: 6px;
}
.plan_cov_fee_row
{
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
font-size: 0.83rem;
color: var(--ink);
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.plan_cov_fee_row:last-child { border-bottom: none; }
.plan_cov_fee_amt { font-weight: 700; white-space: nowrap; }
.plan_cov_fee_total
{
border-top: 2px solid var(--line);
border-bottom: none;
margin-top: 4px;
padding-top: 10px;
font-weight: 700;
}
.plan_cov_muted { font-size: 0.75rem; color: var(--muted); }
.plan_cov_stats
{
display: flex;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.plan_cov_stat
{
flex: 1;
min-width: 0;
text-align: center;
padding: 0 8px;
border-right: 1px solid var(--line);
}
.plan_cov_stat:first-child { padding-left: 0; text-align: left; }
.plan_cov_stat:last-child { border-right: none; padding-right: 0; text-align: right; }
.plan_cov_stat_val
{
font-size: 0.85rem;
font-weight: 700;
color: var(--ink);
line-height: 1.2;
white-space: nowrap;
}
.plan_cov_stat_lbl { font-size: 0.67rem; color: var(--muted); margin-top: 2px; }
.plan_cov_cancel_warning
{
font-size: 0.83rem;
font-weight: 600;
color: var(--ink);
text-align: center;
}
/* ─── Settings > Subscriptions panel ─────────────────────────────── */
.subscriptions_outer_container { padding: 0; }
.subs_card
{
background: var(--surface);
border-radius: var(--radius_lg);
border: 1px solid var(--line);
box-shadow: var(--shadow_xs);
overflow: visible;
margin-bottom: 12px;
}
.subs_card_header
{
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
border-radius: var(--radius_lg) var(--radius_lg) 0 0;
}
.subs_row_avatar
{
width: 42px;
height: 42px;
min-width: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 700;
color: #fff;
}
.subs_card_identity { flex: 1; min-width: 0; }
.subs_card_name
{
font-size: 0.9rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 2px;
}
.subs_card_practice { font-size: 0.75rem; color: var(--muted); }
.subs_card_menu { margin-left: -4px; }
.subs_card_menu_button
{
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--radius_pill);
background: transparent;
color: var(--muted);
font-size: 1.1rem;
}
.subs_card_menu_button:hover,
.subs_card_menu_button:focus
{
background: var(--brand_soft);
color: var(--brand);
}
.subs_card_menu .dropdown-item
{
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
}
.subs_plan_row
{
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 11px 16px;
border: 0;
border-bottom: 1px solid var(--line);
background: var(--surface);
color: var(--brand);
font-size: 0.82rem;
font-weight: 700;
text-align: left;
}
button.subs_plan_row:hover,
button.subs_plan_row:focus
{
background: var(--brand_soft);
}
.subs_plan_chevron
{
margin-left: auto;
color: var(--muted);
font-size: 0.78rem;
}
.subs_member_list { padding: 12px 16px; }
.subs_section_label
{
margin-bottom: 7px;
color: var(--muted);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.subs_member_row
{
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
}
.subs_member_icon { color: var(--brand); font-size: 0.82rem; }
.subs_member_row_empty
{
padding: 12px 16px;
font-size: 0.78rem;
color: var(--muted);
}
.subs_member_name
{
flex: 1;
min-width: 0;
font-size: 0.82rem;
font-weight: 600;
color: var(--ink);
}
.subs_price_breakdown
{
padding: 12px 16px;
border-top: 1px solid var(--line);
}
.subs_price_row
{
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 4px 0;
font-size: 0.78rem;
color: var(--ink);
}
.subs_price_row span:last-child { font-weight: 600; white-space: nowrap; }
.subs_price_subtotal
{
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--line);
font-weight: 600;
}
.subs_price_total
{
margin-top: 5px;
padding-top: 9px;
border-top: 1px solid var(--line);
font-size: 0.86rem;
font-weight: 700;
}
.subs_renewal_row
{
display: flex;
align-items: center;
gap: 7px;
padding: 10px 16px;
background: var(--page);
border-top: 1px solid var(--line);
font-size: 0.75rem;
color: var(--muted);
border-radius: 0 0 var(--radius_lg) var(--radius_lg);
}
.subs_renewal_row i { color: var(--brand); }
.manage_membership_plan_name
{
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
color: var(--brand);
font-size: 0.9rem;
font-weight: 700;
}
.manage_membership_member_list { margin-top: 10px; }
.manage_membership_member_row
{
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-top: 1px solid var(--line);
}
.manage_membership_member_identity
{
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-size: 0.84rem;
font-weight: 600;
}
.manage_membership_member_identity i { color: var(--brand); }
.membership_confirmation_row
{
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
margin-bottom: 10px;
border-radius: var(--radius);
background: var(--brand_soft);
}
.membership_confirmation_row .custom_checkbox_container
{
width: 36px;
height: 36px;
}
.membership_confirmation_label
{
flex: 1;
min-width: 0;
color: var(--ink);
font-size: 0.84rem;
font-weight: 500;
line-height: 1.4;
}
/* ─── AI Visit Check-In Components ─────────────────────────────────────── */
.checkin_system_divider
{
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0 8px;
color: var(--brand);
font-size: 0.78em;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.checkin_system_divider::before,
.checkin_system_divider::after
{
content: '';
flex: 1;
height: 1px;
background: var(--brand);
opacity: 0.35;
}
.visit_section_divider
{
background: var(--brand_soft);
padding: 12px 16px 10px;
/*margin: 20px 0 0;*/
text-align: center;
}
/* No top gap when divider is the very first thing in a messages container */
.mchat_messages > .visit_section_divider:first-child,
.mchat_messages > .chat_section_container:first-child > .visit_section_divider:first-child,
.visit_chat_history > .visit_section_divider:first-child
{
margin-top: 0;
}
.visit_section_divider::before,
.visit_section_divider::after
{
display: none;
}
.visit_section_divider_label
{
font-size: 0.85em;
font-weight: 700;
color: var(--brand);
}
.visit_section_divider_date
{
font-size: 0.72em;
color: #6b7280;
margin-top: 3px;
}
.ai_message_bubble .ai_sender_label
{
font-size: 0.72em;
font-weight: 700;
color: var(--brand);
margin-bottom: 4px;
}
.mchat_sender_label
{
font-size: 0.72em;
font-weight: 700;
color: #666;
margin-bottom: 4px;
}
/* Triage follow-up question bubbles — each bullet as its own bubble, visually grouped */
.ai_question_bubble
{
margin-top: 3px;
}
.ai_question_bubble .mchat_message_bubble
{
border-left: 3px solid var(--brand);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.visit_section_status_live
{
color: var(--brand);
}
.visit_triage_in_chat
{
background: rgba(134, 94, 191, 0.04);
border-left: 3px solid var(--brand);
border-radius: 0 8px 8px 0;
padding: 10px 12px 4px 12px;
margin-bottom: 16px;
}
.checkin_question_batch_card
{
background: white;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
padding: 14px;
margin-bottom: 10px;
}
.checkin_question_batch_card.locked
{
opacity: 0.65;
pointer-events: none;
}
/* Visit card — chat inbox State C */
.visit_card_class
{
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
cursor: pointer;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
.visit_card_class:active
{
background: var(--brand_soft);
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 700;
}
.visit_card_date
{
font-size: 0.78rem;
color: #6b7280;
white-space: nowrap;
}
.visit_card_cc
{
flex: 1;
font-size: 0.9rem;
font-weight: 600;
color: #1a1a2e;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.visit_card_chevron
{
color: #9ca3af;
font-size: 0.75rem;
flex-shrink: 0;
}
.visit_cards_container
{
padding: 0 16px;
}
/* State block wrapper (States C and D) */
.main_chat_state_block
{
padding: 16px;
}
/* Locked visit section footer */
.visit_section_locked
{
text-align: center;
font-size: 0.72rem;
color: #9ca3af;
padding: 4px 0 8px;
letter-spacing: 0.02em;
}
.checkin_question_row
{
margin-bottom: 14px;
}
.checkin_question_label
{
font-size: 0.9em;
font-weight: 600;
margin-bottom: 7px;
color: #333;
}
.checkin_yesno_group,
.checkin_scale_group
{
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.checkin_yesno_btn,
.checkin_scale_btn
{
border: 1.5px solid #ccc;
border-radius: 6px;
background: white;
color: #444;
font-size: 0.85em;
padding: 5px 14px;
transition: all 0.12s;
}
.checkin_yesno_btn.selected,
.checkin_scale_btn.selected
{
background: var(--brand_soft);
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 700;
}
.checkin_scale_btn
{
padding: 5px 10px;
min-width: 36px;
text-align: center;
}
.checkin_number_days_input,
.checkin_text_input
{
font-size: 0.88em;
}
.checkin_multi_group
{
display: flex;
flex-direction: column;
gap: 5px;
}
.checkin_multi_item
{
display: flex;
align-items: center;
gap: 7px;
font-size: 0.87em;
cursor: pointer;
}
.checkin_multi_check
{
accent-color: var(--brand);
}
.checkin_ros_card
{
background: white;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
padding: 14px;
margin-bottom: 10px;
}
.checkin_ros_card.locked
{
opacity: 0.65;
pointer-events: none;
}
.checkin_ros_card_header
{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.checkin_ros_none_class
{
font-size: 0.78em;
color: var(--muted);
border: 1px solid var(--line);
border-radius: 20px;
padding: 3px 12px;
background: white;
line-height: 1.4;
white-space: nowrap;
}
.checkin_ros_none_class:hover
{
background: var(--page);
color: var(--ink);
}
.checkin_ros_system_label
{
font-weight: 700;
font-size: 0.95em;
color: var(--brand);
}
.checkin_ros_items_list
{
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 4px;
}
.checkin_ros_item_row
{
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 2px;
border-bottom: 1px solid #f2f2f2;
gap: 10px;
}
.checkin_ros_item_row:last-child
{
border-bottom: none;
}
.checkin_ros_item_name
{
flex: 1;
font-size: 0.88em;
color: #333;
}
.checkin_processing_bar
{
background: #f0f0f0;
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.checkin_processing_inner
{
height: 3px;
background: var(--brand);
border-radius: 2px;
animation: checkin_pulse 1.4s ease-in-out infinite;
width: 40%;
}
.checkin_processing_label
{
font-size: 0.82em;
color: #666;
margin-top: 6px;
}
@keyframes checkin_pulse
{
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
/* -----------------------------------------------
QUESTION BLOCK CARD
----------------------------------------------- */
.question_block_card
{
background: white;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
padding: 14px;
margin-top: 8px;
margin-bottom: 10px;
}
.question_block_card.locked
{
opacity: 0.65;
pointer-events: none;
}
.question_block_label
{
font-weight: 700;
font-size: 0.95em;
color: var(--brand);
margin-bottom: 4px;
}
.question_block_subtitle
{
font-size: 0.82em;
color: var(--muted);
margin-bottom: 10px;
line-height: 1.4;
}
.question_block_items_list
{
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 0px;
}
.question_block_item_row
{
padding: 8px 2px;
border-bottom: 1px solid var(--line);
}
.question_block_item_row:last-child
{
border-bottom: none;
}
.question_block_q_top
{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.question_block_q_text
{
flex: 1;
font-size: 0.88em;
color: var(--ink);
line-height: 1.4;
padding-top: 3px;
}
.question_block_respond_btn
{
font-size: 0.78em;
padding: 3px 10px;
color: var(--brand);
border: 1px solid var(--brand);
border-radius: 20px;
background: white;
white-space: nowrap;
flex-shrink: 0;
}
.question_block_respond_btn:hover
{
background: var(--brand_soft);
}
.question_block_q_status
{
font-size: 0.8em;
color: var(--muted);
margin-top: 3px;
min-height: 1em;
}
.question_block_item_row.answered .question_block_q_status
{
color: var(--brand);
}
.question_block_response_section
{
margin-top: 8px;
padding-top: 6px;
}
.question_block_chip_group
{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.question_block_chip
{
font-size: 0.8em;
padding: 4px 12px;
border-radius: 20px;
border: 1px solid var(--line);
background: white;
color: var(--muted);
cursor: pointer;
}
.question_block_chip.selected
{
background: var(--brand_soft);
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 700;
}
.question_block_free_text
{
font-size: 0.85em;
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px 10px;
resize: none;
min-height: 52px;
margin-bottom: 8px;
}
.question_block_free_text:focus
{
border-color: var(--brand);
outline: none;
}
.question_block_save_btn
{
font-size: 0.82em;
padding: 5px 16px;
}
.question_block_mini_chat_wrap
{
border-top: 1px solid var(--line);
margin-top: 8px;
padding-top: 8px;
}
.question_block_mini_chat_label
{
font-size: 0.78em;
color: var(--muted);
margin-bottom: 6px;
}
.question_block_mini_chat
{
display: flex;
flex-direction: column;
gap: 4px;
min-height: 1em;
}
.question_block_mini_note
{
background: var(--brand_soft);
border-radius: 8px;
padding: 5px 10px;
font-size: 0.82em;
color: var(--ink);
align-self: flex-end;
max-width: 90%;
}
.question_block_done_btn
{
margin-top: 6px;
}
/* ---- interview question card — one question at a time ---- */
.question_block_interview_card
{
background: white;
border: 1px solid #ebe3ff;
border-radius: 14px;
padding: 0;
overflow: hidden;
}
.question_block_interview_row
{
padding: 14px 16px;
}
.question_block_interview_row.answered
{
border-bottom: 1px solid #f0f0f5;
padding: 10px 16px;
}
.question_block_interview_row.answered .question_block_q_text
{
font-size: 0.82rem;
font-weight: 400;
color: var(--muted);
margin-bottom: 2px;
}
.question_block_interview_row.answered .question_block_q_status
{
font-size: 0.82rem;
color: var(--brand);
font-weight: 500;
}
.question_block_interview_active .question_block_q_text
{
font-size: 0.92rem;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 12px;
line-height: 1.45;
}
/* interview chips — full-width left-aligned checkbox/radio style */
.question_block_interview_card .question_block_chip_group
{
display: flex;
flex-direction: column;
gap: 6px;
flex-wrap: nowrap;
margin-bottom: 10px;
}
.question_block_interview_card .question_block_chip
{
display: flex;
align-items: center;
gap: 10px;
text-align: left;
padding: 9px 12px;
font-size: 0.88rem;
/* always 2px border so selected state never shifts layout */
border: 2px solid var(--line);
border-radius: 8px;
width: 100%;
justify-content: flex-start;
}
/* checkbox indicator — used for multi_select chips */
.question_block_interview_card .chip_group_multi .question_block_chip::before
{
content: '';
flex: 0 0 16px;
width: 16px;
height: 16px;
border-radius: 4px;
border: 2px solid #c4b5e0;
background: white;
transition: background 0.12s, border-color 0.12s;
}
.question_block_interview_card .chip_group_multi .question_block_chip.selected::before
{
background: var(--brand);
border-color: var(--brand);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 10px 8px;
}
/* radio indicator — used for single_select chips */
.question_block_interview_card .chip_group_single .question_block_chip::before
{
content: '';
flex: 0 0 16px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #c4b5e0;
background: white;
transition: background 0.12s, border-color 0.12s;
}
.question_block_interview_card .chip_group_single .question_block_chip.selected::before
{
background: white;
border-color: var(--brand);
box-shadow: inset 0 0 0 4px var(--brand);
}
/* selected state — no font-weight change to prevent text layout shift */
.question_block_interview_card .question_block_chip.selected
{
background: var(--brand_soft);
border-color: var(--brand);
color: var(--brand);
}
.question_block_interview_card .question_block_save_btn
{
width: 100%;
margin-top: 8px;
padding: 10px 20px;
font-size: 0.88rem;
border-radius: 4px;
}
/* triage question card — standalone bubble, stacks vertically */
.question_block_triage
{
background: white;
border: 1px solid #ebe3ff;
border-radius: 12px 12px 12px 2px;
padding: 0px;
padding-left: 14px;
font-size: 0.88rem;
line-height: 1.55;
word-break: break-word;
display: block;
overflow: hidden; /* clips the flush-left active border to the card's rounded corners */
}
.question_block_triage .question_block_items_list
{
padding: 0;
}
.question_block_triage_row
{
padding: 20px 0px;
}
.triage_next_wrap
{
padding: 20px 0px;
}
/* border above each question row after the first */
.question_block_triage_row + .question_block_triage_row
{
border-top: 1px solid #f0f0f5;
}
/* active question — same size/weight as normal chat text, accents via ai_highlight */
.question_triage_active .question_block_q_text
{
font-size: 0.9rem;
font-weight: 500;
color: #1a1a2e;
margin-bottom: 4px;
line-height: 1.4;
}
/* answered question: muted and compact */
.question_block_triage_row.answered .question_block_q_text
{
font-size: 0.85rem;
font-weight: 400;
color: var(--muted);
margin-bottom: 2px;
}
.question_triage_answer
{
display: block;
font-size: 0.9rem;
color: var(--brand);
font-weight: 500;
margin-top: 2px;
}
/* active triage question: flush-left brand border against the card wall */
.question_block_item_row.question_triage_active
{
margin-left: -14px; /* cancels card's 14px left padding → border sits at card edge */
border-left: 5px solid var(--brand);
padding-left: 9px; /* 5px border + 9px = 14px total indent, same as answered rows */
background: #f3e8ff;
}
/* hide the answer area until the user has actually answered */
.question_block_triage_row .question_block_q_status:empty
{
display: none;
}
/* typing dots inside triage card */
.question_triage_typing
{
display: flex;
align-items: center;
gap: 4px;
padding: 20px;
/* padding: 12px 0 4px 0; */
}
.question_triage_typing span
{
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand);
animation: help_typing_bounce 1.2s infinite ease-in-out;
}
.question_triage_typing span:nth-child(2) { animation-delay: 0.2s; }
.question_triage_typing span:nth-child(3) { animation-delay: 0.4s; }
/* triage phase complete — auto-advance progress container */
.triage_phase_complete_wrap
{
background: white;
border: 1px solid rgba(106, 27, 154, 0.12);
border-radius: 14px;
padding: 28px 20px 22px;
margin: 10px 0 4px;
text-align: center;
box-shadow: 0 2px 14px rgba(0,0,0,0.06);
}
.triage_phase_complete_icon
{
font-size: 2.4rem;
color: var(--brand);
margin-bottom: 10px;
line-height: 1;
}
.triage_phase_complete_title
{
font-size: 1.0rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 4px;
}
.triage_phase_complete_sub
{
font-size: 0.82rem;
color: var(--muted);
margin-bottom: 18px;
}
.triage_phase_bar_track
{
width: 100%;
height: 6px;
background: var(--brand_soft);
border-radius: 4px;
overflow: hidden;
}
.triage_phase_bar_fill
{
height: 100%;
width: 0%;
background: var(--brand);
border-radius: 4px;
}
.checkin_batch_summary
{
background: #f4f6f8;
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 8px;
}
.checkin_summary_row
{
display: flex;
gap: 8px;
font-size: 0.82em;
padding: 2px 0;
}
.checkin_summary_label
{
color: #888;
min-width: 80px;
}
.checkin_summary_value
{
color: #333;
font-weight: 600;
}
.checkin_ros_skip_prompt
{
margin-bottom: 10px;
}
.checkin_ros_skip_prompt.locked
{
opacity: 0.65;
pointer-events: none;
}
.kb_q_type_badge
{
background: #e8f4fd;
color: #1976d2;
font-size: 0.72em;
padding: 1px 7px;
border-radius: 4px;
margin-left: 6px;
font-weight: 600;
}
.kb_q_group_badge
{
background: #f3e5f5;
color: #7b1fa2;
font-size: 0.72em;
padding: 1px 7px;
border-radius: 4px;
margin-left: 4px;
font-weight: 600;
}
/* --- Provider seen card ----------------------------------------- */
.ct_provider_card
{
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 12px;
margin-bottom: 10px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
transition: box-shadow 0.15s, border-color 0.15s;
overflow: hidden;
}
.ct_provider_card_clickable { cursor: pointer; }
.ct_provider_card_clickable:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #e8d9f8; }
/* top row: avatar + info text + visit chip */
.ct_provider_card_top
{
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px 10px;
}
/* bottom row: action buttons spanning the card */
.ct_provider_card_actions
{
display: flex;
gap: 8px;
padding: 0 18px 14px;
flex-wrap: wrap;
}
.ct_provider_card_actions .btn_sm_brand,
.ct_provider_card_actions .btn_sm_outline
{
flex: 1;
min-width: 0;
justify-content: center;
}
.ct_provider_avatar
{
width: 46px;
height: 46px;
min-width: 46px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.88rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.ct_provider_body { flex: 1; min-width: 0; }
.ct_provider_name { font-size: 0.9rem; font-weight: 600; color: #1a1a2e; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ct_provider_meta { font-size: 0.75rem; color: #6b7280; margin-bottom: 4px; }
.ct_provider_last { font-size: 0.73rem; color: #6b7280; display: flex; align-items: center; gap: 4px; }
.ct_visit_count_chip
{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.73rem;
font-weight: 600;
color: #6b7280;
background: #f9fafb;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid #e5e7eb;
}
.ct_join_nudge
{
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #f3e8ff;
border: 1px solid #e8d9f8;
border-radius: 9px;
font-size: 0.78rem;
color: #865EBF;
margin-top: 2px;
}
.ct_join_nudge i { font-size: 0.9rem; flex-shrink: 0; }
/* section label inside a care team tab pane */
.ct_section_label
{
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand);
padding: 14px 2px 8px;
display: flex;
align-items: center;
gap: 6px;
}
.ct_section_label::after
{
content: '';
flex: 1;
height: 1px;
background: var(--brand);
opacity: 0.15;
}
.ct_section_label_gray { color: #6b7280; }
.ct_section_label_gray::after { background: #6b7280; }
/* "Member" badge shown on provider cards in the All Providers list */
.ct_member_badge
{
display: inline-flex;
align-items: center;
font-size: 0.62rem;
font-weight: 700;
background: var(--brand_soft);
color: var(--brand);
padding: 2px 7px;
border-radius: 20px;
border: 1px solid #e8d9f8;
white-space: nowrap;
vertical-align: middle;
}
/* provider rows inside practice cards (Practices tab) */
.ct_prac_provider_row
{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-top: 1px solid #f3f4f6;
}
.ct_prac_provider_avatar
{
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
color: #fff;
}
.ct_prac_provider_body { flex: 1; min-width: 0; }
.ct_prac_provider_name { font-size: 0.85rem; font-weight: 600; color: #1a1a2e; margin-bottom: 1px; }
.ct_prac_provider_meta { font-size: 0.72rem; color: #6b7280; }
@media (max-width: 600px)
{
.ct_practice_stats { flex-wrap: wrap; }
.ct_stat_item { flex: 0 0 50%; border-right: none; text-align: left !important; padding: 0; margin-bottom: 6px; }
.ct_prac_provider_row { flex-wrap: wrap; }
.ct_prac_provider_row .btn_sm_brand { width: 100%; margin-top: 6px; }
}
/* --- Billing section -------------------------------------------- */
.billing_balance_banner
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: linear-gradient(135deg, #1a7a3e 0%, #22c55e 100%);
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 20px;
box-shadow: 0 4px 16px rgba(34,197,94,0.18);
}
.billing_balance_banner.has_balance
{
background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
box-shadow: 0 4px 16px rgba(245,158,11,0.18);
}
.bbb_label
{
font-size: 0.78rem;
color: rgba(255,255,255,0.8);
font-weight: 500;
margin-bottom: 2px;
}
.bbb_amount
{
font-size: 2rem;
font-weight: 800;
color: #fff;
line-height: 1.1;
}
.bbb_note { font-size: 0.76rem; color: rgba(255,255,255,0.72); margin-top: 4px; }
.billing_invoice_row
{
display: flex;
align-items: flex-start;
gap: 14px;
background: #ffffff;
border-radius: 12px;
padding: 13px 16px;
margin-bottom: 6px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
transition: box-shadow 0.12s, border-color 0.12s;
cursor: pointer;
}
.billing_invoice_row:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #e8d9f8; }
.billing_inv_icon
{
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.billing_inv_info { flex: 1; min-width: 0; }
.billing_inv_title { font-size: 0.85rem; font-weight: 600; color: #1a1a2e; margin-bottom: 2px; }
.billing_inv_meta { font-size: 0.73rem; color: #6b7280; line-height: 1.5; }
.billing_inv_right
{
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
flex-shrink: 0;
}
.billing_inv_amount { font-size: 0.92rem; font-weight: 700; color: #1a1a2e; }
.billing_sub_card
{
background: #ffffff;
border-radius: 12px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
overflow: hidden;
margin-bottom: 12px;
transition: box-shadow 0.15s, border-color 0.15s;
}
.billing_sub_card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #e8d9f8; }
.billing_sub_header
{
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px 14px;
border-bottom: 1px solid #f3f4f6;
}
.billing_sub_body { padding: 12px 18px; }
.billing_sub_actions
{
padding: 10px 18px;
border-top: 1px solid var(--line);
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.cancel_membership_billing_btn
{
color: var(--danger);
border-color: #fca5a5;
}
.cancel_membership_billing_btn:hover
{
color: var(--danger);
border-color: var(--danger);
background: var(--danger_soft);
}
.billing_sub_charge_row
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid #f3f4f6;
font-size: 0.8rem;
}
.billing_sub_charge_row:last-child { border-bottom: none; padding-bottom: 0; }
.billing_method_card
{
display: flex;
align-items: center;
gap: 14px;
background: #ffffff;
border-radius: 12px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
padding: 14px 18px;
margin-bottom: 8px;
transition: box-shadow 0.12s, border-color 0.12s;
}
.billing_method_card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #e8d9f8; }
.billing_method_card.default_method { border-color: #865EBF; }
.billing_card_icon
{
width: 48px;
height: 32px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
flex-shrink: 0;
border: 1px solid #e5e7eb;
}
.billing_card_info { flex: 1; min-width: 0; }
.billing_card_number { font-size: 0.85rem; font-weight: 600; color: #1a1a2e; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.billing_card_expiry { font-size: 0.73rem; color: #6b7280; margin-top: 1px; }
.billing_default_badge
{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.62rem;
font-weight: 700;
background: #f3e8ff;
color: #865EBF;
padding: 2px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
@media (max-width: 600px)
{
.billing_balance_banner { flex-direction: column; align-items: flex-start; }
.billing_invoice_row { flex-wrap: wrap; }
.billing_inv_right { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
.billing_method_card { flex-wrap: wrap; }
}
/* ─── BILLING HISTORY PANEL ────────────────────────────────────────────────── */
.payment_history_outer_container { padding-bottom: 10px; }
.billing_history_row
{
display: flex;
align-items: center;
gap: 14px;
background: var(--surface);
border-radius: var(--radius_lg);
border: 1px solid var(--line);
box-shadow: var(--shadow_xs);
padding: 14px 18px;
margin-bottom: 8px;
cursor: pointer;
transition: box-shadow 0.12s, border-color 0.12s;
}
.billing_history_row:hover { box-shadow: var(--shadow_small); border-color: var(--brand_soft); }
.billing_history_row_icon
{
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--brand_soft);
color: var(--brand);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
flex-shrink: 0;
}
.billing_history_amount { font-size: 0.9rem; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.billing_history_chevron { color: var(--muted); font-size: 0.85rem; flex-shrink: 0; }
.billing_history_empty_state
{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 24px;
}
.billing_history_empty_state_icon
{
font-size: 2.2em;
color: var(--brand);
background: var(--brand_soft);
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.billing_history_empty_state_title { font-weight: 700; color: var(--ink); font-size: 1rem; margin-bottom: 6px; }
.billing_history_empty_state_subtitle { color: var(--muted); font-size: 0.85rem; max-width: 260px; line-height: 1.5; }
/* ─── ACCOUNT INFORMATION PANEL ────────────────────────────────────────────── */
/* Reuses .settings_group / .settings_row from the main settings list — the only
addition is a right-aligned current-value column ahead of the chevron. */
.account_info_panel { padding-bottom: 20px; }
/* the label stops growing so the value column gets the leftover width — a long
email truncates instead of the label reserving space it does not need */
.account_info_panel .ios_settings_edit_label
{
flex: 0 0 auto;
}
.settings_row_value
{
flex: 1 1 auto;
min-width: 0;
padding-left: 10px;
text-align: right;
color: var(--muted);
font-size: 0.85rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings_row_value_empty { color: var(--muted); opacity: 0.7; }
.settings_row_status_badge
{
display: inline-flex;
align-items: center;
font-size: 0.68rem;
font-weight: 700;
background: var(--green_soft);
color: var(--green);
padding: 2px 9px;
border-radius: var(--radius_pill);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.staff_profile_settings_panel
{
padding-bottom: 28px;
}
.staff_profile_settings_row
{
display: flex;
align-items: center;
transform: translateZ(0);
}
.staff_profile_settings_panel .settings_edit_row
{
text-align: left;
}
.staff_profile_row_description
{
color: var(--muted);
font-size: 0.76rem;
font-weight: 400;
line-height: 1.25;
margin-top: 2px;
}
.track_c_availability_card
{
margin-bottom: 10px;
padding: 12px 14px;
}
.track_c_availability_title
{
color: var(--brand);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 4px;
text-transform: uppercase;
}
.track_c_availability_row
{
align-items: center;
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
min-height: 54px;
padding: 8px 0;
}
.track_c_availability_row_last
{
border-bottom: 0;
}
.track_c_availability_copy
{
min-width: 0;
padding-right: 12px;
}
.track_c_availability_label
{
color: var(--ink);
font-size: 0.85rem;
}
.track_c_availability_hint
{
color: var(--muted);
font-size: 0.78rem;
line-height: 1.35;
margin-top: 2px;
}
.track_c_practice_size_input
{
flex: 0 0 80px;
width: 80px;
}
.track_c_plan_tabs
{
border-bottom: 2px solid var(--brand_soft);
}
.track_c_plan_tabs .nav-link
{
color: var(--brand);
font-size: 0.88rem;
}
.track_c_plan_tab_content
{
padding-top: 12px;
}
.track_c_plans_disabled
{
opacity: 0.45;
pointer-events: none;
}
.patient_age_intro
{
color: var(--muted);
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 14px;
}
.patient_age_scope_card
{
margin-bottom: 12px;
padding: 0;
pointer-events: none;
}
.patient_age_scope_header
{
align-items: center;
background: var(--brand_soft);
border-bottom: 1px solid var(--line);
border-radius: var(--radius_lg) var(--radius_lg) 0 0;
display: flex;
gap: 10px;
padding: 12px 14px;
}
.patient_age_scope_icon
{
align-items: center;
background: var(--surface);
border-radius: var(--radius);
color: var(--brand);
display: flex;
flex: 0 0 34px;
font-size: 1rem;
height: 34px;
justify-content: center;
}
.patient_age_scope_title
{
color: var(--ink);
font-size: 0.9rem;
font-weight: 700;
}
.patient_age_scope_subtitle
{
color: var(--muted);
font-size: 0.76rem;
line-height: 1.3;
margin-top: 2px;
}
.patient_age_scope_note
{
align-items: flex-start;
background: var(--blue_soft);
color: var(--blue);
display: flex;
font-size: 0.76rem;
gap: 7px;
line-height: 1.4;
padding: 9px 14px;
}
.patient_age_option_row
{
align-items: center;
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
min-height: 62px;
padding: 10px 14px;
pointer-events: auto;
}
.patient_age_option_row_last
{
border-bottom: 0;
}
.patient_age_option_copy
{
min-width: 0;
padding-right: 12px;
}
.patient_age_option_title
{
color: var(--ink);
font-size: 0.85rem;
font-weight: 600;
}
.patient_age_option_hint
{
color: var(--muted);
font-size: 0.76rem;
line-height: 1.35;
margin-top: 2px;
}
.staff_profile_settings_panel .settings_row_value
{
max-width: 46%;
}
.staff_profile_readonly_row
{
cursor: default;
}
.staff_profile_readonly_row:hover
{
background: var(--surface);
}
.practice_profile_settings_panel
{
padding-bottom: 28px;
}
.practice_profile_settings_row,
.practice_contract_row
{
display: flex;
align-items: center;
gap: 8px;
transform: translateZ(0);
}
.practice_profile_settings_panel .settings_edit_row
{
text-align: left;
}
.practice_profile_settings_panel .settings_row_value
{
max-width: 46%;
}
.practice_profile_row_description
{
color: var(--muted);
font-size: 0.76rem;
font-weight: 400;
line-height: 1.3;
margin-top: 2px;
}
.practice_profile_readonly_row
{
cursor: default;
}
.practice_profile_readonly_row:hover,
.practice_contract_row:hover
{
background: var(--surface);
}
.practice_settings_group_header
{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin-top: 30px;
margin-bottom: 8px;
}
.practice_settings_group_header .settings_group_title
{
margin: 0;
}
.dba_contact_row .ios_settings_edit_label
{
min-width: 0;
overflow-wrap: anywhere;
}
.dba_contact_row .remove_dba_contact_class
{
flex: 0 0 auto;
}
/* the published-address form: the part before the @ takes the room, the domain picker takes what it needs.
column-gap rather than gap, so nothing is double-spaced if this ever wraps on a narrow phone. */
/* Email list sections — Inbox / Spam / Deleted, above the search box. A segmented row rather than a second
set of tabs, so it reads as a filter on the Email tab and not as a peer of Chat / Fax / Voice. */
.email_section_tabs
{
display: flex;
gap: 6px;
padding: 10px 12px 0 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.email_section_tab
{
flex: 0 0 auto;
border: 1px solid var(--border);
background: #fff;
color: var(--text_muted);
border-radius: 999px;
padding: 5px 14px;
font-size: 0.86rem;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
/* the selection pattern this project uses everywhere a single item is chosen from a row */
.email_section_tab.email_section_tab_active
{
background: var(--brand_soft);
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 700;
padding: 4px 13px;
}
.dba_mail_address_row
{
display: flex;
flex-wrap: wrap;
column-gap: 8px;
row-gap: 8px;
align-items: center;
}
.dba_mail_address_row .dba_mail_local_part_input
{
flex: 1 1 120px;
min-width: 0;
}
.dba_mail_address_row .dba_mail_domain_input
{
flex: 0 1 auto;
width: auto;
max-width: 100%;
}
.dba_panel_body_container .settings_group_title:first-child
{
margin-top: 0;
}
.dba_icon_image
{
width: 100%;
height: 100%;
object-fit: contain;
border-radius: var(--radius);
}
.dba_image_row
{
align-items: flex-start;
}
.dba_image_preview_container
{
margin-top: 8px;
}
.dba_icon_preview
{
width: 64px;
height: 64px;
object-fit: contain;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--surface);
}
.dba_logo_preview
{
max-width: 100%;
max-height: 80px;
object-fit: contain;
}
.dba_image_actions
{
display: flex;
flex: 0 0 auto;
gap: 6px;
}
.dba_legal_name_note
{
margin: 20px 4px 0;
}
.practice_contract_status
{
color: var(--muted);
flex: 0 0 auto;
font-size: 0.76rem;
font-weight: 600;
}
.practice_embed_intro
{
color: var(--muted);
font-size: 0.86rem;
line-height: 1.5;
}
.practice_embed_option_body
{
padding: 14px;
}
.practice_embed_option_title
{
color: var(--ink);
font-size: 0.9rem;
font-weight: 700;
}
.practice_embed_option_title i
{
color: var(--brand);
margin-right: 6px;
}
.practice_embed_option_hint
{
color: var(--muted);
font-size: 0.78rem;
line-height: 1.4;
margin: 5px 0 10px;
}
.practice_embed_code_input
{
min-height: 92px;
margin-bottom: 10px;
background: var(--page);
border-color: var(--line);
color: var(--ink);
font-family: monospace;
font-size: 0.76rem;
line-height: 1.45;
resize: vertical;
}
.practice_pricing_widget_code
{
min-height: 190px;
}
.practice_embed_help
{
display: flex;
gap: 9px;
margin-top: 16px;
padding: 12px;
background: var(--brand_soft);
border-radius: var(--radius);
color: var(--brand_dark);
font-size: 0.78rem;
line-height: 1.4;
}
@media (max-width: 480px)
{
.practice_profile_settings_panel .settings_row_value
{
max-width: 40%;
}
.practice_contract_status
{
display: none;
}
}
@media (max-width: 480px)
{
.staff_profile_settings_panel .settings_row_value
{
max-width: 40%;
}
}
/* ─── HELP & SUPPORT PANEL ─────────────────────────────────────────────────── */
.help_panel_messages {
padding: 0 !important;
}
.help_panel_chat {
padding: 10px;
}
.help_article_panel_content {
background: white;
border: 1px solid #ece7f5;
border-radius: 6px;
padding: 14px;
}
.help_article_panel_content .breadcrumb_bar,
.help_article_panel_content .help_article_sidebar {
display: none;
}
.help_article_panel_content .help_article_main {
color: #111827;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.help_article_panel_content .article_title {
color: #111827;
font-size: 1.35rem;
font-weight: 800;
line-height: 1.2;
margin: 0 0 10px;
}
.help_article_panel_content .article_meta {
align-items: center;
display: flex;
gap: 10px;
margin: 16px 0 20px;
}
.help_article_panel_content .author_circle {
align-items: center;
background: #865EBF;
border-radius: 50%;
color: white;
display: flex;
flex-shrink: 0;
font-weight: 700;
height: 34px;
justify-content: center;
width: 34px;
}
.help_article_panel_content .author_name {
color: #1f2937;
font-size: 0.86rem;
font-weight: 700;
}
.help_article_panel_content .updated_text {
color: #6b7280;
font-size: 0.78rem;
}
.help_article_panel_content .article_intro,
.help_article_panel_content .help_article_main p,
.help_article_panel_content .help_article_main li {
color: #374151;
font-size: 0.95rem;
line-height: 1.65;
}
.help_article_panel_content .article_section,
.help_article_panel_content .help_article_main h2,
.help_article_panel_content .help_article_main h3,
.help_article_panel_content .help_article_main h4 {
color: #111827;
font-weight: 800;
line-height: 1.25;
margin-top: 24px;
}
.help_article_panel_content .article_section {
border-bottom: 1px solid #e5e7eb;
font-size: 1.12rem;
padding-bottom: 6px;
}
.help_article_panel_content .article_image_block img {
border-radius: 6px;
height: auto;
max-width: 100%;
}
.help_article_panel_content .article_blockquote {
background: #f7f8fc;
border-left: 4px solid #865EBF;
color: #333;
margin: 18px 0;
padding: 12px 14px;
}
.help_panel_chips {
display: grid;
gap: 8px;
grid-template-columns: repeat(3, 1fr);
margin-top: 12px;
}
.help_chip_class {
align-items: center;
background: white;
border: 2px solid #d4b8f5;
border-radius: 10px;
color: #865EBF;
display: flex;
flex-direction: column;
font-size: 0.78rem;
font-weight: 700;
gap: 8px;
justify-content: center;
min-height: 80px;
padding: 14px 8px;
text-align: center;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.help_chip_class:hover,
.help_chip_class:focus,
.help_chip_class:active {
background: #865EBF;
border-color: #865EBF;
color: white;
}
.help_chip_class i {
flex-shrink: 0;
font-size: 1.4rem;
}
.help_faq_category_header {
padding: 10px 16px 4px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #865EBF;
}
.help_faq_card {
background: white;
border-bottom: 1px solid #f0ecf8;
padding: 12px 16px;
cursor: pointer;
}
.help_faq_card:active {
background: #f8f4ff;
}
.help_faq_question {
font-weight: 600;
font-size: 0.9rem;
color: #1a1a2e;
margin-bottom: 4px;
}
.help_faq_answer {
font-size: 0.84rem;
color: #555;
line-height: 1.5;
}
.help_chat_bubble {
display: flex;
margin-bottom: 12px;
max-width: 92%;
}
.help_chat_bubble span {
display: inline-block;
padding: 10px 14px;
border-radius: 12px;
font-size: 0.88rem;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
}
.help_chat_bubble_user {
flex-direction: column;
align-items: flex-end;
margin-left: auto;
}
.help_chat_bubble_user span {
background: #f3e8ff;
color: #3b1f6b;
border-radius: 12px 12px 2px 12px;
}
.help_chat_bubble_ai {
flex-direction: column;
justify-content: flex-start;
}
.chat_bubble_meta {
font-size: 0.68rem;
color: #aaa;
margin-bottom: 3px;
line-height: 1;
}
.help_chat_bubble_user .chat_bubble_meta {
text-align: right;
}
.help_chat_bubble_ai span {
background: white;
color: #1a1a2e;
border: 1px solid #ebe3ff;
border-radius: 12px 12px 12px 2px;
}
.help_chat_action_list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
width: 100%;
}
.help_chat_action_button {
align-items: center;
background: #865EBF;
border: none;
border-radius: 4px;
color: white;
display: flex;
font-size: 0.86rem;
font-weight: 600;
gap: 8px;
justify-content: center;
line-height: 1.25;
min-height: 42px;
padding: 10px 12px;
text-align: center;
width: 100%;
}
.help_chat_action_button:hover,
.help_chat_action_button:focus {
background: #7449ad;
color: white;
}
.help_chat_action_button span {
background: transparent;
border: none;
border-radius: 0;
color: inherit;
display: inline;
font-size: inherit;
line-height: inherit;
padding: 0;
white-space: normal;
}
.help_chat_bubble_error {
justify-content: flex-start;
}
.help_chat_bubble_error span {
background: #fff0f0;
color: #b91c1c;
border: 1px solid #fecaca;
border-radius: 12px 12px 12px 2px;
}
.visit_chat_user_choices {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 12px;
}
.visit_chat_choice_group {
min-width: 160px;
max-width: 270px;
border-radius: 10px;
overflow: hidden;
border: 1.5px solid var(--brand);
}
.visit_chat_choice_btn {
background: white;
color: var(--brand);
border: none;
border-bottom: 1.5px solid rgba(138, 43, 226, 0.13);
font-size: 0.85em;
padding: 11px 14px;
text-align: left;
cursor: pointer;
transition: background 0.1s;
width: 100%;
border-radius: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.visit_chat_choice_btn::after
{
content: '';
flex-shrink: 0;
width: 16px;
height: 16px;
border: 2px solid rgba(138, 43, 226, 0.35);
background: white;
transition: background 0.12s, border-color 0.12s;
}
[data_choice_type="radio"] .visit_chat_choice_btn::after
{
border-radius: 50%;
}
[data_choice_type="multi"] .visit_chat_choice_btn::after
{
border-radius: 4px;
}
[data_choice_type="radio"] .visit_chat_choice_btn.active::after
{
background: var(--brand);
border-color: var(--brand);
box-shadow: inset 0 0 0 3px white;
}
[data_choice_type="multi"] .visit_chat_choice_btn.active::after
{
background-color: var(--brand);
border-color: var(--brand);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 11px;
}
.visit_chat_choice_btn:last-child {
border-bottom: none;
}
.visit_chat_choice_btn:hover:not(:disabled) {
background: var(--brand_soft);
}
.visit_chat_choice_btn.active {
background: var(--brand_soft);
color: var(--brand);
font-weight: 700;
}
.visit_chat_choice_btn:disabled {
cursor: default;
opacity: 0.55;
}
.visit_chat_choice_btn.active:disabled {
opacity: 1;
}
.vchat_choices_hidden
{
display: none !important;
}
.navbar_brand_link_class
{
align-items: center;
display: inline-flex;
gap: 8px;
text-decoration: none;
white-space: nowrap;
}
.navbar_brand_link_class:hover,
.navbar_brand_link_class:focus
{
text-decoration: none;
}
.navbar_brand_link_class .navbar_icon_class
{
flex: 0 0 auto;
height: 32px !important;
max-width: 32px;
object-fit: contain;
padding-left: 0 !important;
width: 32px;
}
.navbar_title_class
{
color: inherit;
font-family: "Alegreya Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: 1.18rem !important;
font-weight: 800;
letter-spacing: 0;
line-height: 1;
}
.navbar_title_logged_in
{
color: white;
text-shadow: 0 1px 10px rgba(26,16,64,0.18);
}
.navbar_desktop_brand_text
{
color: white;
font-family: "Alegreya Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: 1.05rem !important;
font-weight: 800;
letter-spacing: 0;
line-height: 1;
}
.navbar_brand_title_cell
{
padding-left: 2px;
}
.vchat_bubble_summary
{
cursor: pointer;
margin-top: 0;
}
.vchat_bubble_summary:hover > span,
.vchat_bubble_summary:hover .help_chat_bubble_user span
{
opacity: 0.8;
}
.checkin_anything_else_wrap
{
margin-bottom: 12px;
width: 100%;
}
.checkin_anything_else_input
{
font-size: 0.88em;
resize: none;
border: 1px solid #e0deff;
border-radius: 8px;
width: 100%;
padding: 10px 12px;
outline: none;
}
.checkin_anything_else_input:focus
{
border-color: var(--brand);
box-shadow: 0 0 0 0.15rem rgba(138, 43, 226, 0.15);
}
.help_chat_typing_dots {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 14px;
background: white;
border: 1px solid #ebe3ff;
border-radius: 12px 12px 12px 2px;
align-self: flex-start;
}
.help_chat_typing_dots span {
width: 7px;
height: 7px;
background: #865EBF;
border-radius: 50%;
animation: help_typing_bounce 1.2s infinite ease-in-out;
padding: 0;
border: none;
}
.help_chat_typing_dots span:nth-child(2) { animation-delay: 0.2s; }
.help_chat_typing_dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes help_typing_bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-5px); opacity: 1; }
}
/* dots-only variant used inside mchat_message_bubble (bubble provides background/border/padding) */
.mchat_typing_dots {
display: inline-flex;
align-items: center;
gap: 4px;
padding-top: 3px;
}
.mchat_typing_dots span {
width: 7px;
height: 7px;
background: #865EBF;
border-radius: 50%;
animation: help_typing_bounce 1.2s infinite ease-in-out;
padding: 0;
border: none;
}
.mchat_typing_dots span:nth-child(2) { animation-delay: 0.2s; }
.mchat_typing_dots span:nth-child(3) { animation-delay: 0.4s; }
/* === Workspace generation progress bubble === */
.workspace_gen_label {
font-size: 0.85em;
color: #555;
margin-bottom: 8px;
}
.workspace_gen_bar_track {
width: 100%;
height: 5px;
background: #e8d5f5;
border-radius: 3px;
overflow: hidden;
}
.workspace_gen_bar_fill {
height: 100%;
width: 38%;
background: #865EBF;
border-radius: 3px;
animation: workspace_gen_slide 1.5s ease-in-out infinite;
}
@keyframes workspace_gen_slide {
0% { transform: translateX(-150%); }
100% { transform: translateX(380%); }
}
/* === Landing Nav v2 (mockup style) === */
.landing_top_nav {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
max-width: 100vw;
z-index: 500;
background: rgba(255,255,255,0.84);
border-bottom: 1px solid rgba(229,231,235,0.72);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition: box-shadow 0.18s ease, background 0.18s ease;
padding-top: env(safe-area-inset-top);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.5;
}
.landing_top_nav.scrolled {
background: rgba(255,255,255,0.96);
box-shadow: 0 8px 30px rgba(26,16,64,0.08);
}
.landing_nav_spacer {
height: calc(72px + env(safe-area-inset-top));
}
.landing_nav_inner {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.landing_brand_mark {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex-shrink: 0;
}
.landing_brand_mark:hover {
text-decoration: none;
}
.landing_brand_text {
font-weight: 800;
color: #1a1040;
font-size: 1.08rem;
letter-spacing: 0;
white-space: nowrap;
}
.landing_nav_links {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
justify-content: center;
}
.landing_nav_links .navbar_link_css {
padding: 9px 12px;
border-radius: 7px;
color: #6b7280;
font-size: 0.86rem;
font-weight: 600;
transition: background 0.15s ease, color 0.15s ease;
text-decoration: none;
}
.landing_nav_links .navbar_link_css:hover {
background: #f3e8ff;
color: #865EBF;
text-decoration: none;
}
.landing_nav_actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.landing_btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
border-radius: 7px;
padding: 0 16px;
font-weight: 700;
font-size: 0.88rem;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
/* ---- Risk escalation UI ---- */
.risk_advisory_medium,
.risk_advisory_high
{
display: flex;
gap: 12px;
padding: 14px 16px;
border-radius: 12px;
margin: 12px 16px 0;
align-items: flex-start;
}
.risk_advisory_medium
{
background: #fff8e1;
border: 1.5px solid #f59f00;
}
.risk_advisory_high
{
background: #fff0f0;
border: 1.5px solid #e03131;
}
.risk_advisory_icon
{
font-size: 22px;
flex-shrink: 0;
padding-top: 2px;
}
.risk_advisory_medium .risk_advisory_icon { color: #f59f00; }
.risk_advisory_high .risk_advisory_icon { color: #e03131; }
.risk_advisory_body { flex: 1; }
.risk_advisory_title
{
font-weight: 700;
font-size: 15px;
margin-bottom: 6px;
}
.risk_advisory_medium .risk_advisory_title { color: #7a5100; }
.risk_advisory_high .risk_advisory_title { color: #c92a2a; }
.risk_advisory_text
{
font-size: 14px;
line-height: 1.5;
color: #333;
}
/* point-of-interaction AI disclosure on the advisory (CMR-2026-10-21-400) — quieter than the
advisory text so it reads as a qualifier, not as a second warning competing with the 911 line */
.risk_advisory_automated
{
margin-top: 8px;
font-size: 12px;
line-height: 1.45;
color: #6e6874;
}
.risk_acknowledge_buttons { margin-top: 14px; }
/* Provider Triage tab — risk chip */
.intake_risk_chip_section { padding: 10px 0 6px; }
.intake_risk_chip
{
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
}
.risk_chip_low { background: #d3f9d8; color: #2b8a3e; }
.risk_chip_medium { background: #fff3bf; color: #7a5100; }
.risk_chip_high { background: #ffe3e3; color: #c92a2a; }
/* no assessment was obtained — deliberately neutral, since it is neither a reassuring nor an alarming finding */
.risk_chip_unknown { background: #e9ecef; color: #495057; }
.intake_risk_analysis_body
{
font-size: 13px;
color: #555;
line-height: 1.5;
padding: 8px 10px;
background: #f8f8f8;
border-radius: 8px;
border: 1px solid #eee;
}
/* The patient's recorded answer to the emergency advisory. Rendered in both provider surfaces, so these rules
serve both. Layout only: every colour decision here is borrowed from a design-system component class applied
alongside these, because the bare --danger / --gold / --green tokens are fill values and fail contrast as text
on their own soft backgrounds. The risk chip itself uses badge_ndd and defines nothing here. */
.checkin_risk_choice_heading
{
font-size: 12px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 6px;
}
.checkin_risk_choice_row
{
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
line-height: 1.4;
padding: 8px 10px;
border-radius: var(--radius);
border: 1px solid var(--line);
margin-bottom: 6px;
}
.checkin_risk_choice_row:last-child { margin-bottom: 0; }
/* the two answers are weighted differently because section 5.3 of the screening protocol treats them differently:
one is a statement that the patient intended to seek emergency care. Colour comes from the design system's
alert_ndd_danger class, applied alongside this one, so only the weight is decided here — var(--danger) as text
on var(--danger_soft) is about 3.4:1 and fails AA, which is not acceptable on this particular row. */
.checkin_risk_choice_er { font-weight: 700; }
.checkin_risk_choice_continue
{
background: var(--surface);
color: var(--ink);
}
.checkin_risk_choice_label { flex: 1; }
.checkin_risk_choice_time
{
font-size: 12px;
font-weight: 600;
color: var(--muted);
white-space: nowrap;
}
/* Check-In Reviews queue (the Medical Director's sidebar section) */
.checkin_review_queue { padding: 4px 0; }
.checkin_review_row
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 12px 14px;
margin-bottom: 10px;
}
.checkin_review_row_header
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.checkin_review_row_time
{
font-size: 12px;
font-weight: 600;
color: var(--muted);
white-space: nowrap;
}
.checkin_review_row_analysis
{
font-size: 13px;
color: var(--ink);
line-height: 1.5;
padding: 8px 10px;
background: var(--page);
border-radius: var(--radius);
}
.checkin_review_row_actions
{
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.checkin_review_row_actions .btn_ndd { flex: 1 1 auto; }
/* hide_me does not hide a btn_ndd on its own: both are single-class selectors, so they tie on specificity and
.btn_ndd's display wins on source order. Verified in the browser — the class was applied and the button still
rendered. Scoped here rather than fixed in .hide_me, which is used platform-wide and whose behaviour should
not change as a side effect of this component. */
.checkin_review_row_actions .btn_ndd.hide_me { display: none; }
/* Provider physician review form */
.physician_review_section { padding-top: 10px; }
.physician_determination_badge
{
display: inline-block;
background: var(--brand_soft);
color: var(--brand);
font-size: 13px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
}
.physician_notes_display
{
font-size: 14px;
color: #333;
line-height: 1.5;
white-space: pre-wrap;
}
.physician_reviewed_at_disp { color: #999; }
.physician_review_form { margin-top: 8px; }
.landing_btn:hover {
transform: translateY(-1px);
text-decoration: none;
}
.landing_btn_primary {
background: #865EBF;
color: white !important;
box-shadow: 0 10px 22px rgba(134,94,191,0.22);
}
.landing_btn_primary:hover {
background: #6a46a3;
color: white !important;
}
.landing_btn_secondary {
background: white;
color: #1a1040 !important;
border-color: #e5e7eb;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.landing_btn_secondary:hover {
border-color: #d8c6ee;
color: #865EBF !important;
box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}
.landing_mobile_btn {
display: none;
width: 42px;
height: 42px;
border: 1px solid #e5e7eb;
background: white;
border-radius: 7px;
color: #1a1a2e;
cursor: pointer;
align-items: center;
justify-content: center;
}
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] {
padding: 18px;
}
.landing_booking_mchat .iosfind_appointments_button {
width: 100%;
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
}
.booking_section_container[value="booking_purpose"] {
padding-bottom: 16px;
}
@media (max-width: 768px) {
.landing_nav_inner {
width: min(1180px, calc(100% - 24px));
gap: 10px;
}
.landing_brand_mark {
gap: 8px;
}
.landing_brand_mark .navbar_icon_class {
width: 38px !important;
height: 38px !important;
padding-left: 0 !important;
max-width: none !important;
flex: 0 0 38px;
}
.landing_brand_text {
font-size: 0.98rem;
}
.landing_nav_actions {
gap: 6px;
}
.landing_nav_links {
display: none;
}
.landing_nav_actions .landing_btn_secondary {
display: none;
}
.landing_nav_actions .landing_btn_primary {
display: none;
}
.landing_nav_actions .landing_nav_book_btn {
display: inline-flex;
min-height: 38px;
padding: 0 12px;
font-size: 0.82rem;
}
.landing_mobile_btn {
display: flex;
width: 38px;
height: 38px;
}
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] {
padding: 14px;
}
.landing_booking_mchat .booking_section_container[data-booking-source="landing"] .tile_icon_wrap svg {
width: 38px;
height: 38px;
}
}
/* === Landing Hero Section === */
.hero_section {
min-height: 100vh;
min-height: 100dvh;
height: 100vh;
height: 100dvh;
display: grid;
align-items: center;
padding: 96px 0 56px;
position: relative;
overflow: hidden;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* pull up over the nav spacer so hero fills from top of viewport */
margin-top: calc(-72px - env(safe-area-inset-top));
}
.hero_bg_image {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.9) 36%, rgba(255,255,255,0.22) 60%, rgba(255,255,255,0) 100%),
url("../mockups/assets/nextdaydoctor_hero_telehealth_clean.png") center / cover no-repeat;
transform: scale(1.02);
z-index: 0;
}
.hero_inner {
position: relative;
z-index: 1;
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 680px);
gap: 28px;
align-items: stretch;
height: 100%;
min-height: 0;
}
.hero_copy_block {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 4dvh;
padding-bottom: 8dvh;
}
.hero_title {
margin: 0;
margin-block: 0;
font-size: clamp(2.6rem, 6vw, 5.8rem);
font-weight: 700;
line-height: 0.95;
letter-spacing: 0;
color: #1a1040;
max-width: 790px;
}
.hero_title span {
color: #865EBF;
}
.hero_copy {
max-width: 610px;
margin: 22px 0 0;
color: #4b5563;
font-size: clamp(1.02rem, 1.5vw, 1.24rem);
line-height: 1.5;
}
.hero_copy_mobile {
display: none;
}
.hero_copy_desktop {
display: block;
}
.hero_cta_row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: clamp(34px, 8dvh, 82px);
}
.hero_cta_row .landing_btn {
width: 156px;
}
@media (max-width: 1040px) {
.hero_bg_image {
background:
linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.93) 44%, rgba(255,255,255,0.5) 68%, rgba(255,255,255,0.1) 100%),
url("../mockups/assets/nextdaydoctor_hero_telehealth_clean.png") 64% center / cover no-repeat;
}
.hero_copy_block {
max-width: 570px;
padding-top: 2dvh;
padding-bottom: 12dvh;
}
.hero_title {
font-size: clamp(3rem, 8vw, 4.9rem);
line-height: 0.98;
max-width: 560px;
}
.hero_copy {
max-width: 520px;
font-size: clamp(1rem, 2vw, 1.14rem);
}
.hero_cta_row {
margin-top: clamp(34px, 7dvh, 68px);
}
}
@media (max-width: 720px) {
.hero_section {
align-items: start;
padding: 64px 0 0;
background: linear-gradient(180deg, #ffffff 0%, #ffffff 57%, #f5f0ff 100%);
}
.hero_bg_image {
top: auto;
bottom: 0;
height: 40dvh;
background:
linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 32%),
url("../mockups/assets/nextdaydoctor_hero_telehealth_clean.png") 67% bottom / auto 100% no-repeat;
transform: none;
}
.hero_copy_block {
min-height: 0;
height: auto;
justify-content: flex-start;
max-width: 100%;
padding-top: clamp(22px, 6dvh, 58px);
padding-bottom: 0;
}
.hero_title {
font-size: clamp(2.25rem, 10vw, 3.7rem);
line-height: 1.04;
max-width: 560px;
}
.hero_copy {
max-width: 500px;
margin-top: 14px;
font-size: clamp(0.92rem, 2.8vw, 1.04rem);
line-height: 1.5;
}
.hero_copy_desktop {
display: none;
}
.hero_copy_mobile {
display: block;
}
.hero_cta_row {
align-items: stretch;
margin-top: clamp(18px, 4dvh, 34px);
max-width: 420px;
width: 100%;
}
.hero_cta_row .landing_btn {
display: inline-flex;
flex: 1 1 0;
width: auto;
min-height: 42px;
padding: 0 12px;
font-size: 0.84rem;
}
}
@media (max-width: 430px) {
.hero_section {
padding-top: 58px;
}
.hero_bg_image {
height: 38dvh;
}
.hero_inner {
width: calc(100% - 24px);
height: auto;
}
.hero_copy_block {
padding-top: clamp(22px, 5dvh, 48px);
}
.hero_title {
max-width: 340px;
font-size: clamp(2rem, 10vw, 2.65rem);
line-height: 1.04;
}
.hero_copy {
max-width: 315px;
margin-top: 13px;
font-size: 0.9rem;
line-height: 1.5;
}
.hero_copy_desktop {
display: none;
}
.hero_copy_mobile {
display: block;
}
.hero_cta_row {
max-width: 326px;
gap: 8px;
margin-top: clamp(18px, 3dvh, 28px);
}
.hero_cta_row .landing_btn {
display: inline-flex;
flex: 1 1 0;
width: auto;
min-height: 38px;
padding: 0 9px;
font-size: 0.76rem;
}
}
/* ── PMH Medical Conditions search ── */
.pmh_search_outer {
margin-bottom: 14px;
}
.pmh_search_input_wrap {
position: relative;
}
.pmh_search_input_wrap .pmh_search_icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--muted, #6b7280);
pointer-events: none;
font-size: 0.88em;
z-index: 1;
}
.mypmh_input_class,
.mypsh_input_class {
padding-left: 36px !important;
border-radius: 8px !important;
border: 1.5px solid var(--line, #e5e7eb) !important;
background: white !important;
font-size: 0.9em;
transition: border-color 0.15s, box-shadow 0.15s;
}
.mypmh_input_class:focus,
.mypsh_input_class:focus {
border-color: var(--brand, #865EBF) !important;
box-shadow: 0 0 0 3px rgba(134, 94, 191, 0.12) !important;
outline: none;
}
.pmh_search_results_wrap {
background: white;
border: 1.5px solid var(--brand, #865EBF);
border-top: none;
border-radius: 0 0 8px 8px;
overflow: hidden;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}
.pmh_results_table {
border-collapse: collapse;
width: 100%;
}
.pmh_results_table td {
padding: 10px 14px;
font-size: 0.875em;
color: var(--ink, #1a1a2e);
border-bottom: 1px solid var(--line, #e5e7eb);
cursor: pointer;
}
.pmh_result_row,
.psh_result_row {
cursor: pointer;
transition: background 0.1s;
}
.pmh_result_row:hover td,
.psh_result_row:hover td {
background: var(--brand_soft, #f3e8ff);
color: var(--brand, #865EBF);
}
.pmh_results_table tr:last-child td {
border-bottom: none;
}
.pmh_result_freetext_row td {
color: var(--muted, #6b7280);
font-style: italic;
}
.pmh_result_freetext_row:hover td {
background: var(--brand_soft, #f3e8ff);
color: var(--brand, #865EBF);
font-style: normal;
}
/* PMH tag pills */
.pmh_tag_list {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 4px 0;
}
.pmh_tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 8px 5px 12px;
background: var(--brand_soft, #f3e8ff);
border: 1px solid #e0cefc;
border-radius: var(--radius_pill, 999px);
font-size: 0.82em;
font-weight: 500;
color: var(--brand_dark, #6a46a3);
white-space: nowrap;
}
.pmh_tag_label {
line-height: 1.2;
}
.pmh_tag_remove_btn {
background: none;
border: none;
padding: 0 2px;
color: var(--brand_dark, #6a46a3);
font-size: 1.1em;
line-height: 1;
cursor: pointer;
opacity: 0.55;
transition: opacity 0.12s;
display: flex;
align-items: center;
}
.pmh_tag_remove_btn:hover {
opacity: 1;
}
.pmh_empty_state {
font-size: 0.85em;
color: var(--muted, #6b7280);
padding: 6px 0 2px;
}
/* PMH side drawer */
.health_pmh_drawer_search_outer {
margin-bottom: 14px;
}
.health_pmh_drawer_search_outer .pmh_search_input_wrap {
position: relative;
}
.health_pmh_drawer_search_outer .pmh_search_icon {
left: 14px;
color: var(--brand, #865EBF);
opacity: 0.72;
}
.health_pmh_drawer_search_input {
min-height: 46px;
padding-left: 44px !important;
padding-right: 14px !important;
border: 1.5px solid #e0cefc !important;
border-radius: 8px !important;
background: white !important;
color: var(--ink, #1a1a2e);
font-size: 0.95em;
font-weight: 500;
box-shadow: 0 1px 5px rgba(44, 31, 61, 0.05);
transition: border-color 0.15s, box-shadow 0.15s;
}
.health_pmh_drawer_search_input:focus {
border-color: var(--brand, #865EBF) !important;
box-shadow: 0 0 0 3px rgba(134, 94, 191, 0.14) !important;
outline: none;
}
.health_pmh_drawer_results {
display: flex;
flex-direction: column;
gap: 8px;
}
.health_pmh_drawer_list {
background: white;
border: 1px solid #eadff5;
border-radius: 8px;
overflow: visible;
box-shadow: 0 1px 5px rgba(44, 31, 61, 0.05);
}
.health_pmh_drawer_item,
.health_pmh_drawer_result_row {
width: 100%;
display: flex;
align-items: center;
gap: 11px;
background: white;
padding: 11px 12px;
color: var(--ink, #1a1a2e);
text-align: left;
}
.health_pmh_drawer_item {
position: relative;
border: none;
border-bottom: 1px solid #f0e7fb;
border-radius: 0;
box-shadow: none;
}
.health_pmh_drawer_item:last-child {
border-bottom: none;
}
.health_pmh_drawer_result_row {
border: 1px solid #eadff5;
border-radius: 8px;
box-shadow: 0 1px 5px rgba(44, 31, 61, 0.05);
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.health_pmh_drawer_result_row:hover {
background: var(--brand_soft, #f3e8ff);
border-color: var(--brand, #865EBF);
}
.health_pmh_drawer_item_icon,
.health_pmh_drawer_result_icon,
.health_pmh_drawer_empty_icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--brand_soft, #f3e8ff);
color: var(--brand, #865EBF);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 13px;
}
.health_pmh_drawer_item_text {
flex: 1;
min-width: 0;
font-weight: 500;
line-height: 1.3;
padding: 2px 0;
}
.health_pmh_drawer_remove_wrap {
position: relative;
flex-shrink: 0;
z-index: 30;
}
.health_pmh_drawer_remove_trigger {
border: none;
background: transparent;
color: var(--brand, #865EBF);
padding: 7px;
border-radius: 50%;
line-height: 1;
flex-shrink: 0;
}
.health_pmh_drawer_remove_trigger:hover {
background: var(--brand_soft, #f3e8ff);
}
.health_pmh_remove_confirm {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 190px;
background: white;
border: 1px solid #eadff5;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(44, 31, 61, 0.16);
padding: 10px;
z-index: 20;
}
.health_pmh_remove_confirm_text {
font-size: 0.85em;
font-weight: 600;
color: var(--ink, #1a1a2e);
margin-bottom: 8px;
}
.health_pmh_remove_confirm_actions {
display: flex;
gap: 7px;
justify-content: flex-end;
}
.health_pmh_remove_cancel {
background: #f8f8f8;
color: var(--muted, #6b7280);
border: 1px solid #e5e7eb;
}
.health_pmh_remove_confirm_btn {
background: var(--brand, #865EBF);
color: white;
border: 1px solid var(--brand, #865EBF);
}
.health_pmh_drawer_freetext_row {
border-style: dashed;
}
.health_pmh_drawer_empty {
display: flex;
align-items: center;
gap: 11px;
color: var(--muted, #6b7280);
background: white;
border-radius: 8px;
padding: 14px 12px;
border: 1px solid #eadff5;
}
.health_history_none_confirm_row {
display: flex;
align-items: center;
gap: 10px;
background: white;
border: 1px solid #eadff5;
border-radius: 8px;
padding: 12px;
margin-bottom: 10px;
color: var(--ink, #1a1a2e);
box-shadow: 0 1px 5px rgba(44, 31, 61, 0.05);
cursor: pointer;
}
.health_history_none_confirm_row input {
width: 22px;
height: 22px;
accent-color: var(--brand, #865EBF);
flex-shrink: 0;
}
.health_history_none_confirm_text {
font-weight: 500;
line-height: 1.25;
}
/* PSH side drawer */
.health_psh_drawer_search_outer {
margin-bottom: 14px;
}
.health_psh_drawer_search_outer .pmh_search_input_wrap {
position: relative;
}
.health_psh_drawer_search_outer .pmh_search_icon {
left: 14px;
color: var(--brand, #865EBF);
opacity: 0.72;
}
.health_psh_drawer_search_input {
min-height: 46px;
padding-left: 44px !important;
padding-right: 14px !important;
border: 1.5px solid #e0cefc !important;
border-radius: 8px !important;
background: white !important;
color: var(--ink, #1a1a2e);
font-size: 0.95em;
font-weight: 500;
box-shadow: 0 1px 5px rgba(44, 31, 61, 0.05);
transition: border-color 0.15s, box-shadow 0.15s;
}
.health_psh_drawer_search_input:focus {
border-color: var(--brand, #865EBF) !important;
box-shadow: 0 0 0 3px rgba(134, 94, 191, 0.14) !important;
outline: none;
}
.health_psh_drawer_results {
display: flex;
flex-direction: column;
gap: 8px;
}
.health_psh_drawer_list {
background: white;
border: 1px solid #eadff5;
border-radius: 8px;
overflow: visible;
box-shadow: 0 1px 5px rgba(44, 31, 61, 0.05);
}
.health_psh_drawer_item,
.health_psh_drawer_result_row {
width: 100%;
display: flex;
align-items: center;
gap: 11px;
background: white;
padding: 11px 12px;
color: var(--ink, #1a1a2e);
text-align: left;
}
.health_psh_drawer_item {
position: relative;
border: none;
border-bottom: 1px solid #f0e7fb;
border-radius: 0;
box-shadow: none;
}
.health_psh_drawer_item:last-child {
border-bottom: none;
}
.health_psh_drawer_result_row {
border: 1px solid #eadff5;
border-radius: 8px;
box-shadow: 0 1px 5px rgba(44, 31, 61, 0.05);
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.health_psh_drawer_result_row:hover {
background: var(--brand_soft, #f3e8ff);
border-color: var(--brand, #865EBF);
}
.health_psh_drawer_item_icon,
.health_psh_drawer_result_icon,
.health_psh_drawer_empty_icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--brand_soft, #f3e8ff);
color: var(--brand, #865EBF);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 13px;
}
.health_psh_drawer_item_text {
flex: 1;
min-width: 0;
font-weight: 500;
line-height: 1.3;
padding: 2px 0;
}
.health_psh_drawer_remove_wrap {
position: relative;
flex-shrink: 0;
z-index: 30;
}
.health_psh_drawer_remove_trigger {
border: none;
background: transparent;
color: var(--brand, #865EBF);
padding: 7px;
border-radius: 50%;
line-height: 1;
flex-shrink: 0;
}
.health_psh_drawer_remove_trigger:hover {
background: var(--brand_soft, #f3e8ff);
}
.health_psh_remove_confirm {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 190px;
background: white;
border: 1px solid #eadff5;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(44, 31, 61, 0.16);
padding: 10px;
z-index: 20;
}
.health_psh_remove_confirm_text {
font-size: 0.85em;
font-weight: 600;
color: var(--ink, #1a1a2e);
margin-bottom: 8px;
}
.health_psh_remove_confirm_actions {
display: flex;
gap: 7px;
justify-content: flex-end;
}
.health_psh_remove_cancel {
background: #f8f8f8;
color: var(--muted, #6b7280);
border: 1px solid #e5e7eb;
}
.health_psh_remove_confirm_btn {
background: var(--brand, #865EBF);
color: white;
border: 1px solid var(--brand, #865EBF);
}
.health_psh_drawer_freetext_row {
border-style: dashed;
}
.health_psh_drawer_empty {
display: flex;
align-items: center;
gap: 11px;
color: var(--muted, #6b7280);
background: white;
border-radius: 8px;
padding: 14px 12px;
border: 1px solid #eadff5;
}
.health_psh_none_confirm_empty {
position: relative;
cursor: pointer;
color: var(--ink, #1a1a2e);
margin-bottom: 0;
}
.health_psh_none_confirm_native {
position: absolute;
opacity: 0;
pointer-events: none;
}
.health_psh_none_confirm_square {
width: 28px;
height: 28px;
border-radius: 6px;
border: 2px solid var(--brand, #865EBF);
background: var(--brand_soft, #f3e8ff);
color: var(--brand, #865EBF);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 16px;
}
/* Medication and allergy health drawers */
.health_med_drawer_search_outer,
.health_allergy_drawer_search_outer {
margin-bottom: 14px;
}
.health_med_drawer_search_outer .pmh_search_input_wrap,
.health_allergy_drawer_search_outer .pmh_search_input_wrap {
position: relative;
}
.health_med_drawer_search_outer .pmh_search_icon,
.health_allergy_drawer_search_outer .pmh_search_icon {
left: 14px;
color: var(--brand, #865EBF);
opacity: 0.72;
}
.health_med_drawer_search_input,
.health_allergy_drawer_search_input {
min-height: 46px;
padding-left: 44px !important;
padding-right: 14px !important;
border: 1.5px solid #e0cefc !important;
border-radius: 8px !important;
background: white !important;
color: var(--ink, #1a1a2e);
font-size: 0.95em;
font-weight: 500;
box-shadow: 0 1px 5px rgba(44, 31, 61, 0.05);
transition: border-color 0.15s, box-shadow 0.15s;
}
.health_med_drawer_search_input:focus,
.health_allergy_drawer_search_input:focus {
border-color: var(--brand, #865EBF) !important;
box-shadow: 0 0 0 3px rgba(134, 94, 191, 0.14) !important;
outline: none;
}
.health_med_drawer_results,
.health_allergy_drawer_results {
display: flex;
flex-direction: column;
background: white;
border: 1px solid #eadff5;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 5px rgba(44, 31, 61, 0.05);
}
.health_med_drawer_list,
.health_allergy_drawer_list {
background: white;
border: 1px solid #eadff5;
border-radius: 8px;
overflow: visible;
box-shadow: 0 1px 5px rgba(44, 31, 61, 0.05);
}
.health_med_drawer_item,
.health_med_drawer_result_row,
.health_allergy_drawer_item,
.health_allergy_drawer_result_row {
width: 100%;
display: flex;
align-items: center;
gap: 11px;
background: white;
padding: 11px 12px;
color: var(--ink, #1a1a2e);
text-align: left;
}
.health_med_drawer_item,
.health_allergy_drawer_item {
position: relative;
border: none;
border-bottom: 1px solid #f0e7fb;
border-radius: 0;
box-shadow: none;
}
.health_med_drawer_item:last-child,
.health_allergy_drawer_item:last-child {
border-bottom: none;
}
.health_med_drawer_result_row,
.health_allergy_drawer_result_row {
border: none;
border-bottom: 1px solid #f0e7fb;
border-radius: 0;
box-shadow: none;
cursor: pointer;
transition: background 0.12s;
}
.health_med_drawer_result_row:last-child,
.health_allergy_drawer_result_row:last-child {
border-bottom: none;
}
.health_med_drawer_result_row:hover,
.health_allergy_drawer_result_row:hover {
background: var(--brand_soft, #f3e8ff);
border-color: var(--brand, #865EBF);
}
.health_med_drawer_item_icon,
.health_med_drawer_result_icon,
.health_med_drawer_empty_icon,
.health_allergy_drawer_item_icon,
.health_allergy_drawer_result_icon,
.health_allergy_drawer_empty_icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--brand_soft, #f3e8ff);
color: var(--brand, #865EBF);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 13px;
}
.health_med_drawer_item_text,
.health_allergy_drawer_item_text {
flex: 1;
min-width: 0;
font-weight: 500;
line-height: 1.3;
padding: 2px 0;
}
/* MEDICATION ROW DETAIL (CMR-2026-10-31-506) -- the directions, supply and date prescribed, so the patient
reviewing this list can tell a finished course from something they take daily. Nested inside the existing
text cell rather than added as a sibling: the row is a flex line with no flex-wrap, so a full-width sibling
would take the whole row and leave the drug name a character wide. */
.health_med_drawer_item_detail {
margin-top: 2px;
font-size: 0.82rem;
font-weight: 400;
line-height: 1.35;
color: var(--muted, #6b7280);
}
/* NOT .badge_ndd, deliberately: that component is an inline-flex standalone badge at 3px 9px, and this sits
inside a 0.82rem caption line where it would outweigh the text it qualifies. --brand_dark rather than
--brand, which is only about 4.1:1 on --brand_soft and fails AA at this size. */
.health_med_drawer_item_finished {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: var(--radius_pill, 999px);
background: var(--brand_soft, #f3e8ff);
color: var(--brand_dark, #6a46a3);
font-size: 0.92em;
font-weight: 600;
white-space: nowrap;
}
.health_med_drawer_remove_wrap,
.health_allergy_drawer_remove_wrap {
position: relative;
flex-shrink: 0;
z-index: 30;
}
.health_med_drawer_remove_trigger,
.health_allergy_drawer_remove_trigger {
border: none;
background: transparent;
color: var(--brand, #865EBF);
padding: 7px;
border-radius: 50%;
line-height: 1;
flex-shrink: 0;
}
.health_med_drawer_remove_trigger:hover,
.health_allergy_drawer_remove_trigger:hover {
background: var(--brand_soft, #f3e8ff);
}
.health_med_remove_confirm,
.health_allergy_remove_confirm {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 190px;
background: white;
border: 1px solid #eadff5;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(44, 31, 61, 0.16);
padding: 10px;
z-index: 40;
}
.health_med_remove_confirm_text,
.health_allergy_remove_confirm_text {
font-size: 0.85em;
font-weight: 600;
color: var(--ink, #1a1a2e);
margin-bottom: 8px;
}
.health_med_remove_confirm_actions,
.health_allergy_remove_confirm_actions {
display: flex;
gap: 7px;
justify-content: flex-end;
}
.health_med_remove_cancel,
.health_allergy_remove_cancel {
background: #f8f8f8;
color: var(--muted, #6b7280);
border: 1px solid #e5e7eb;
}
.health_med_remove_confirm_btn,
.health_allergy_remove_confirm_btn {
background: var(--brand, #865EBF);
color: white;
border: 1px solid var(--brand, #865EBF);
}
.health_med_drawer_freetext_row,
.health_allergy_drawer_freetext_row {
color: #888;
font-size: 0.88em;
padding-top: 8px;
padding-bottom: 8px;
border-top: 1px solid #f0e7fb;
border-bottom: none;
}
.health_med_drawer_freetext_row .health_med_drawer_result_icon,
.health_allergy_drawer_freetext_row .health_allergy_drawer_result_icon {
width: 24px;
height: 24px;
font-size: 11px;
background: #f5f5f5;
color: #aaa;
}
.health_med_drawer_empty,
.health_allergy_drawer_empty {
display: flex;
align-items: center;
gap: 11px;
color: var(--ink, #1a1a2e);
background: white;
border-radius: 8px;
padding: 14px 12px;
border: 1px solid #eadff5;
}
.health_med_none_confirm_empty,
.health_allergy_none_confirm_empty {
position: relative;
cursor: pointer;
margin-bottom: 0;
}
.health_med_none_confirm_native,
.health_allergy_none_confirm_native {
position: absolute;
opacity: 0;
pointer-events: none;
}
.health_med_none_confirm_square,
.health_allergy_none_confirm_square {
width: 28px;
height: 28px;
border-radius: 6px;
border: 2px solid var(--brand, #865EBF);
background: var(--brand_soft, #f3e8ff);
color: var(--brand, #865EBF);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 16px;
}
/* -----------------------------------------------------------------------
Visit Intake Summary Panel (provider-facing)
----------------------------------------------------------------------- */
.visit_intake_summary_panel {
padding: 0 0 80px;
}
.intake_disclaimer_banner {
background: #fff8e1;
border-left: 3px solid #f59e0b;
color: #92400e;
font-size: 12px;
padding: 10px 14px;
margin-bottom: 4px;
}
.intake_section {
border-bottom: 1px solid #eee;
padding: 14px 16px;
}
.intake_section:last-child {
border-bottom: none;
}
.intake_section_label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #555;
margin-bottom: 8px;
}
.intake_cc_text {
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
}
.intake_cc_desc {
font-size: 13px;
color: #555;
margin-top: 4px;
line-height: 1.5;
}
.intake_history_table {
border-collapse: separate;
border-spacing: 0 4px;
}
.intake_history_row td {
padding: 6px 0;
vertical-align: top;
border-top: 1px solid #f3f3f3;
font-size: 13px;
}
.intake_dx_name {
font-weight: 600;
width: 38%;
padding-right: 10px;
color: #1a1a1a;
}
.intake_dx_cat {
font-size: 11px;
font-weight: 400;
color: #888;
display: block;
}
.intake_ev_cell {
line-height: 1.6;
}
.intake_ev_for {
display: inline-block;
font-size: 12px;
background: #ecfdf5;
color: #065f46;
border-radius: 4px;
padding: 1px 6px;
margin: 1px 2px 1px 0;
}
.intake_ev_against {
display: inline-block;
font-size: 12px;
background: #fef2f2;
color: #991b1b;
border-radius: 4px;
padding: 1px 6px;
margin: 1px 2px 1px 0;
}
.intake_ev_none {
font-size: 12px;
color: #aaa;
font-style: italic;
}
.intake_rf_note {
font-size: 11px;
color: #888;
margin-bottom: 8px;
}
.intake_rf_row {
border-radius: 6px;
padding: 8px 10px;
margin-bottom: 6px;
font-size: 13px;
}
.intake_rf_critical {
background: #fef2f2;
border-left: 3px solid #dc2626;
}
.intake_rf_important {
background: #fffbeb;
border-left: 3px solid #f59e0b;
}
.intake_rf_flag {
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 3px;
}
.intake_rf_q {
color: #555;
font-style: italic;
margin-bottom: 3px;
}
.intake_rf_answer {
color: #1a1a1a;
font-weight: 600;
}
.intake_rf_not_asked {
color: #dc2626;
font-weight: 600;
}
.intake_no_data {
color: #888;
font-size: 13px;
}
.intake_transcript_body {
margin-top: 10px;
}
.intake_tr_turn {
padding: 8px 10px;
border-radius: 6px;
margin-bottom: 6px;
font-size: 13px;
}
.intake_tr_patient {
background: var(--brand_soft);
border: 1px solid var(--brand);
}
.intake_tr_ai {
background: #f5f5f5;
border: 1px solid #e5e5e5;
}
.intake_tr_role {
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 8px;
}
.intake_tr_ts {
font-size: 11px;
color: #999;
}
.intake_tr_msg {
margin-top: 4px;
line-height: 1.5;
}
.intake_feedback_section {
text-align: center;
padding: 12px;
}
/* ─── Intake question rows ──────────────────────────────────────────── */
.intake_question_row {
display: flex;
align-items: center;
justify-content: space-between;
background: white;
border-radius: 10px;
padding: 13px 14px;
margin-bottom: 8px;
box-shadow: 0 1px 5px rgba(0,0,0,0.07);
gap: 10px;
}
.intake_question_row.answered {
opacity: 0.7;
}
.intake_question_text {
flex: 1;
font-size: 0.9em;
color: #222;
line-height: 1.4;
}
.intake_question_row .intake_yesno_group,
.checkin_ros_item_row .intake_yesno_group {
display: flex;
gap: 7px;
flex-shrink: 0;
align-items: flex-start;
}
.intake_question_row .intake_yesno_btn,
.checkin_ros_item_row .intake_yesno_btn {
border: 1.5px solid #ccc;
border-radius: 7px;
background: white;
color: #555;
font-size: 0.85em;
padding: 5px 18px;
transition: all 0.12s;
white-space: nowrap;
}
.intake_question_row .intake_yesno_btn.selected,
.checkin_ros_item_row .intake_yesno_btn.selected {
background: var(--brand_soft);
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 700;
}
.intake_question_row[data_qtype="text"] {
flex-direction: column;
align-items: stretch;
}
.intake_text_input_wrap {
width: 100%;
}
.intake_text_answer_input {
font-size: 0.9em;
resize: none;
border-radius: 7px;
border: 1.5px solid #ccc;
padding: 8px 10px;
width: 100%;
}
.intake_text_given_answer {
font-size: 0.87em;
color: #555;
font-style: italic;
margin-top: 4px;
padding: 6px 8px;
background: #f0f0f0;
border-radius: 6px;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ── Social History Drawer v2 ──────────────────────────────────── */
.social_section_label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
margin-top: 26px;
margin-bottom: 8px;
padding-top: 18px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
gap: 6px;
}
/* the rule above a section separates it from the one before, so the first section never carries one */
.social_section_label_first,
.social_section_label:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.social_section_label i {
color: var(--brand);
font-size: 0.85rem;
}
.social_section_note {
font-size: 0.78rem;
color: var(--muted);
font-style: italic;
margin-bottom: 10px;
line-height: 1.4;
}
.social_card {
padding: 16px;
cursor: default;
transition: none;
}
/* one card per field, so the gap between them is the drawer's own rhythm rather than a per-card inline style */
.health_social_drawer .social_card {
margin-top: 10px;
}
.health_social_drawer .social_card:first-child {
margin-top: 0;
}
.social_card:hover {
transform: none;
box-shadow: var(--shadow_xs);
}
/* one field per card: its question, and the condensed answer once the record holds one */
.social_card_head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.social_card_head_main {
flex: 1 1 auto;
min-width: 0;
}
.social_card_head_side {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
padding-top: 2px;
}
.social_card_answered .social_card_head {
cursor: pointer;
}
.social_card_caret {
display: none;
color: var(--muted);
font-size: 0.8rem;
transition: transform 0.18s ease;
}
.social_card_answered .social_card_caret {
display: inline-block;
}
.social_card_answered:not(.social_card_collapsed) .social_card_caret {
transform: rotate(180deg);
}
.social_field_question {
font-size: 0.82rem;
color: var(--muted);
line-height: 1.4;
margin-top: 3px;
}
.social_card_collapsed .social_field_question {
display: none;
}
.social_card_summary {
display: none;
font-size: 0.875rem;
font-weight: 600;
color: var(--brand_dark);
line-height: 1.35;
margin-top: 3px;
}
.social_card_collapsed .social_card_summary {
display: block;
}
.social_card_body {
margin-top: 13px;
padding-top: 13px;
border-top: 1px solid var(--line);
}
.social_card_collapsed .social_card_body {
display: none;
}
.social_card_collapsed {
padding-top: 13px;
padding-bottom: 13px;
}
.social_field_header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.social_field_label {
font-size: 0.875rem;
font-weight: 600;
color: var(--ink);
display: flex;
align-items: center;
gap: 5px;
}
.social_field_icon {
color: var(--muted);
font-size: 0.85rem;
}
.social_card_divider {
border: none;
border-top: 1px solid var(--line);
margin: 16px 0;
}
.social_save_check {
font-size: 0.85rem;
transition: opacity 0.3s ease, color 0.3s ease;
}
.social_save_check_show {
color: var(--brand);
opacity: 1;
}
.social_save_check_dim {
color: var(--muted);
opacity: 0.55;
}
.social_tile_grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* the 2px border and the weight are carried unselected too: a social label can wrap ("Prefer not to say",
"Daily <1/2 pack"), and changing either on selection re-flows the row and every row under it */
.social_tile_grid .tile_ndd {
flex: 0 1 auto;
min-width: 0;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 11px;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.25;
text-align: center;
cursor: pointer;
border-radius: var(--radius);
border: 2px solid var(--line);
background: var(--surface);
color: var(--ink);
transition: background 0.12s, border-color 0.12s, color 0.12s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.social_tile_grid .tile_ndd.social_tile_full {
flex: 1 0 100%;
}
.social_tile_row_3 {
display: flex;
gap: 8px;
}
.social_tile_row_3 .tile_ndd {
flex: 1;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 5px;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.25;
text-align: center;
cursor: pointer;
border-radius: var(--radius);
border: 2px solid var(--line);
background: var(--surface);
color: var(--ink);
transition: background 0.12s, border-color 0.12s, color 0.12s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.social_tile_grid .tile_ndd.selected,
.social_tile_row_3 .tile_ndd.selected,
.social_chip_group .tile_ndd.selected {
background: var(--brand_soft);
border-color: var(--brand);
color: var(--brand_dark);
}
.gyn_history_card {
padding: 16px;
}
.gyn_section_block {
display: block;
}
.gyn_status_help {
font-size: 0.8rem;
color: var(--muted);
line-height: 1.45;
margin: 0 0 10px;
}
.gyn_status_grid {
gap: 8px;
}
.gyn_status_grid .tile_ndd {
flex: 1 1 calc(50% - 8px);
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.25;
}
.gyn_single_select_grid {
gap: 8px;
}
.gyn_single_select_grid .tile_ndd {
flex: 1 1 calc(33.333% - 8px);
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
}
.gyn_two_col_grid .tile_ndd {
flex-basis: calc(50% - 8px);
}
.gyn_text_input,
.gyn_textarea_input {
border: 1.5px solid #e0cefc;
border-radius: 8px;
font-weight: 500;
}
.gyn_text_input {
min-height: 44px;
}
.gyn_textarea_input {
min-height: 88px;
resize: vertical;
}
.gyn_text_input:focus,
.gyn_textarea_input:focus,
.gyn_lmp_input:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(134, 94, 191, 0.14);
}
/* same reasons as the social tiles above: body-size text takes --brand_dark on --brand_soft, and neither the
border width nor the weight changes on selection, because these labels wrap */
.gyn_status_grid .tile_ndd.selected,
.gyn_single_select_grid .tile_ndd.selected {
background: var(--brand_soft) !important;
border-color: var(--brand) !important;
color: var(--brand_dark) !important;
}
.gyn_lmp_row {
max-width: 260px;
}
.gyn_lmp_input {
min-height: 44px;
border-radius: 8px;
border: 1.5px solid #e0cefc;
font-weight: 500;
}
@media (max-width: 420px) {
.gyn_status_grid .tile_ndd {
flex-basis: 100%;
}
.gyn_single_select_grid .tile_ndd,
.gyn_two_col_grid .tile_ndd {
flex-basis: 100%;
}
.gyn_lmp_row {
max-width: 100%;
}
}
.social_reveal {
overflow: hidden;
transition: max-height 0.22s ease, opacity 0.18s ease;
max-height: 400px;
opacity: 1;
}
.social_reveal.hide_me {
max-height: 0 !important;
opacity: 0;
display: block !important;
pointer-events: none;
}
.social_reveal_divider {
border: none;
border-top: 1px solid var(--line);
margin: 14px 0;
}
.social_reveal_label {
font-size: 0.82rem;
font-weight: 500;
color: var(--muted);
margin-bottom: 8px;
}
.social_former_block {
overflow: hidden;
transition: max-height 0.18s ease, opacity 0.15s ease;
max-height: 120px;
opacity: 1;
}
.social_former_block.hide_me {
max-height: 0 !important;
opacity: 0;
display: block !important;
pointer-events: none;
}
.social_chip_group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.social_chip_group .tile_ndd {
flex: 0 1 auto;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 11px;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.25;
text-align: center;
cursor: pointer;
border-radius: var(--radius);
border: 2px solid var(--line);
background: var(--surface);
color: var(--ink);
transition: background 0.12s, border-color 0.12s, color 0.12s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.social_stepper {
display: flex;
align-items: center;
gap: 0;
}
.social_stepper_btn {
width: 44px;
height: 44px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.social_stepper_minus { border-radius: var(--radius) 0 0 var(--radius); }
.social_stepper_plus { border-radius: 0 var(--radius) var(--radius) 0; }
.social_stepper_btn:active {
background: var(--brand_soft);
color: var(--brand);
}
.social_stepper_val {
min-width: 56px;
text-align: center;
font-size: 1.25rem;
font-weight: 700;
color: var(--ink);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Family History Drawer ─────────────────────────────────────── */
.family_add_btn {
border: 1px solid rgba(255,255,255,0.6);
color: white;
background: transparent;
border-radius: 20px;
padding: 5px 12px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
min-width: 44px;
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 4px;
transition: background 0.12s;
}
.family_add_btn:active { background: rgba(255,255,255,0.18); }
.family_member_list { padding: 0; }
.family_member_row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
min-height: 60px;
transition: background 0.1s;
-webkit-tap-highlight-color: transparent;
}
.family_member_row:active { background: var(--brand_soft); }
.family_member_row_body { flex: 1; min-width: 0; }
.family_member_name {
font-size: 0.95rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 3px;
}
.family_member_meta {
font-size: 0.78rem;
color: var(--muted);
display: flex;
align-items: center;
gap: 5px;
}
.family_member_chevron {
color: var(--muted);
font-size: 0.85rem;
flex-shrink: 0;
margin-left: 8px;
}
.family_member_divider {
height: 1px;
background: var(--line);
margin: 0 16px;
}
.family_status_dot {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.family_status_alive { background: #16a34a; }
.family_status_deceased { background: var(--muted); }
.family_status_unknown { background: #d97706; }
.family_drawer_empty {
text-align: center;
padding: 60px 24px 40px;
}
.family_drawer_empty_icon {
font-size: 2.5rem;
color: var(--muted);
opacity: 0.5;
display: block;
margin-bottom: 14px;
}
.family_drawer_empty_title {
font-size: 0.95rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 6px;
}
.family_drawer_empty_hint {
font-size: 0.82rem;
color: var(--muted);
}
.family_passing_row {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 8px;
}
.family_passing_col { flex: 1; min-width: 0; }
.family_passing_or {
font-size: 0.78rem;
color: var(--muted);
padding-top: 22px;
flex-shrink: 0;
}
.family_optional_label {
font-size: 0.72rem;
color: var(--muted);
font-weight: 400;
}
.family_conditions_list { margin-top: 12px; }
.family_condition_item {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--brand_soft);
border-radius: var(--radius);
padding: 10px 12px;
margin-bottom: 6px;
}
.family_condition_name {
font-size: 0.875rem;
color: var(--brand);
font-weight: 500;
flex: 1;
}
.family_condition_remove_btn {
background: none;
border: none;
color: var(--muted);
font-size: 1rem;
cursor: pointer;
padding: 0 0 0 8px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: flex-end;
transition: color 0.12s;
}
.family_condition_remove_btn:hover { color: var(--brand); }
/* results container — just spacing, no dropdown chrome */
.family_condition_results { margin-top: 8px; }
.family_condition_no_results {
padding: 10px 2px;
font-size: 0.82rem;
color: var(--muted);
}
/* Demographics summary bar (collapsed) */
.family_demo_summary_bar {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius_lg);
padding: 11px 14px;
margin-bottom: 12px;
cursor: pointer;
box-shadow: var(--shadow_xs);
-webkit-tap-highlight-color: transparent;
transition: background 0.12s;
}
.family_demo_summary_bar:active { background: var(--brand_soft); }
.family_demo_summary_info {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
font-size: 0.875rem;
}
.family_demo_summary_status { color: var(--muted); }
.family_demo_summary_dob { color: var(--muted); }
.family_demo_edit_icon {
color: var(--muted);
font-size: 0.82rem;
flex-shrink: 0;
margin-left: 8px;
}
/* Header name + meta */
.family_header_name {
color: white;
font-weight: 500;
font-size: 1rem;
line-height: 1.2;
}
.family_header_meta {
display: flex;
align-items: center;
gap: 5px;
margin-top: 2px;
color: rgba(255,255,255,0.75);
font-size: 0.78rem;
}
/* ⋮ dropdown menu in header */
.family_header_menu_wrap { position: relative; }
.family_header_menu_btn { padding: 6px 12px; }
.family_header_dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: white;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
min-width: 140px;
z-index: 100;
overflow: hidden;
}
.family_header_edit_btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 11px 14px;
background: none;
border: none;
color: var(--ink);
font-size: 0.875rem;
cursor: pointer;
text-align: left;
transition: background 0.1s;
}
.family_header_edit_btn:hover { background: var(--brand_soft); color: var(--brand); }
/* Edit container + done button */
.family_edit_container { margin-bottom: 14px; }
.family_edit_done_btn {
background: none;
border: none;
color: var(--brand);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
padding: 8px 0;
display: inline-flex;
align-items: center;
gap: 5px;
}
/* Condition search input — matches PMH drawer style */
.family_condition_search_input {
min-height: 46px;
padding-left: 40px !important;
padding-right: 14px !important;
border: 1.5px solid #e0cefc !important;
border-radius: var(--radius) !important;
background: var(--surface) !important;
color: var(--ink);
font-size: 0.95em;
font-weight: 500;
box-shadow: 0 1px 5px rgba(44,31,61,0.05);
transition: border-color 0.15s, box-shadow 0.15s;
}
.family_condition_search_input:focus {
border-color: var(--brand) !important;
box-shadow: 0 0 0 3px rgba(134,94,191,0.14) !important;
outline: none;
}
/* media viewer — lightbox-style image panel; transparent container lets rgba show through */
.media_viewer_container {
background: transparent;
}
.media_viewer_image_area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: rgba(0,0,0,0.92);
min-height: 0;
}
.media_viewer_image_area .zoomableImage {
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform-origin: center center;
transition: transform 0.15s ease;
will-change: transform;
}
.media_viewer_image_area .zoomableImage img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 0;
box-shadow: none;
}
/* PDF media viewer. make_pdf_work() sizes every rendered page from container.offsetWidth,
and #pdfContainer is injected empty — as a bare flex child of a centering row it measured
0, so pdf.js rendered every canvas at scale 0 and the viewer came up blank. Give it the
full row and its own scroller so multi-page scans can be paged through. */
.media_viewer_image_area #pdfContainer {
width: 100%;
height: 100%;
align-self: stretch;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: y mandatory;
}
/* Each page gets its own full-height slot instead of being scaled to container width and
stacked. A cropped, short, or unusually wide scan used to sit tight against the next page;
now the canvas box is the whole viewing area and object-fit centres the rendered page
inside it both ways. Height is 100% of the image area — not 100dvh — so the header, the
caption editor and the meta bar are all accounted for automatically. */
.media_viewer_image_area #pdfContainer canvas {
display: block;
width: calc(100% * var(--mv_pdf_zoom, 1));
height: calc(100% * var(--mv_pdf_zoom, 1));
margin: 0;
object-fit: contain;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* zoomed PDFs pan by scrolling the container in both axes — page snapping would fight that */
.media_viewer_image_area #pdfContainer.mv_pdf_zoomed {
overflow-x: auto;
scroll-snap-type: none;
}
/* video and Office files in the media viewer — the same two shapes the retired lightbox used,
so the viewer covers every media type the platform stores rather than only PDFs and images */
.media_viewer_image_area .media_viewer_video {
width: 100%;
max-height: 100%;
object-fit: contain;
background: #000;
}
.media_viewer_file_card {
width: min(100%, 360px);
padding: 30px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 14px;
background: rgba(255,255,255,0.08);
text-align: center;
color: #fff;
}
.media_viewer_file_card > i {
display: block;
margin-bottom: 12px;
font-size: 3rem;
}
.media_viewer_file_title {
margin-bottom: 18px;
color: rgba(255,255,255,0.8);
}
.media_viewer_meta_bar {
flex-shrink: 0;
background: rgba(0,0,0,0.85);
color: #aaa;
font-size: 0.82em;
padding: 10px 15px;
padding-bottom: calc(10px + env(safe-area-inset-bottom));
border-top: 1px solid rgba(255,255,255,0.08);
}
.media_viewer_meta_bar strong {
color: #ddd;
}
/* ── check_v2 suggestion circles ───────────────────────────────────────── */
.check_v2_suggestions_area {
padding: 4px 0 8px;
}
.check_v2_suggestions_list {
display: flex;
flex-direction: column;
gap: 8px;
}
.check_v2_suggestion_item:not(.hide_me) {
display: flex;
align-items: center;
gap: 10px;
opacity: 1;
transition: opacity 0.3s;
}
.check_v2_suggestion_circle {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--brand);
background: white;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s, border-color 0.25s;
font-size: 0.75em;
color: white;
}
.check_v2_suggestion_circle .bi-check-lg {
opacity: 0;
transition: opacity 0.2s;
}
.check_v2_suggestion_item.covered .check_v2_suggestion_circle {
background: var(--brand);
border-color: var(--brand);
}
.check_v2_suggestion_item.covered .check_v2_suggestion_circle .bi-check-lg {
opacity: 1;
}
.check_v2_suggestion_label {
font-size: 0.85em;
color: #555;
transition: color 0.25s, font-weight 0.25s;
}
.check_v2_suggestion_item.covered .check_v2_suggestion_label {
color: var(--brand);
font-weight: 600;
text-decoration: line-through;
text-decoration-color: var(--brand);
}
.check_v2_suggestions_complete:not(.hide_me) {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0 4px;
color: var(--brand);
font-weight: 700;
font-size: 0.95em;
}
.check_v2_suggestions_complete .bi-check-circle-fill {
font-size: 1.3em;
margin-right: 7px;
}
.check_v2_suggestions_analyzing:not(.hide_me) {
display: block;
}
/* ── check_v2 triage processing progress bar ────────────────────────────── */
.check_v2_triage_processing:not(.hide_me) {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
background: #f8f4ff;
border: 1.5px solid var(--brand_soft);
border-radius: 10px;
}
.check_v2_triage_processing_header {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85em;
color: var(--brand);
font-weight: 600;
}
.check_v2_triage_processing_header .spinner-border-sm {
flex-shrink: 0;
width: 13px;
height: 13px;
border-width: 2px;
color: var(--brand);
}
.check_v2_triage_progress_track {
height: 7px;
background: rgba(134, 94, 191, 0.15);
border-radius: 6px;
overflow: hidden;
}
.check_v2_triage_progress_fill {
height: 100%;
width: 0%;
background: var(--brand);
border-radius: 6px;
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── checkin complete badge ──────────────────────────────────────────────── */
.checkin_complete_badge:not(.hide_me) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 14px;
background: #f8f4ff;
border: 1.5px solid var(--brand_soft);
border-radius: 10px;
text-align: center;
}
.checkin_complete_badge_icon {
font-size: 1.9em;
color: var(--brand);
line-height: 1;
}
.checkin_complete_badge_title {
margin-top: 5px;
font-size: 0.95em;
font-weight: 700;
color: var(--brand);
}
.checkin_complete_badge_sub {
font-size: 0.8em;
color: #777;
}
.check_v2_confirm_hh_row:not(.hide_me) {
display: flex;
}
/* ── check_v2 submit completion — inline inside mchat_messages ───────────── */
.check_v2_success_state {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
}
.check_v2_success_state.hide_me {
display: none;
}
.check_v2_submit_processing {
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
gap: 12px;
}
.check_v2_submit_processing_sub {
font-size: 0.85rem;
color: var(--muted);
text-align: center;
margin-bottom: 4px;
}
/* the sending checklist: each line waits, then spins while it is the one being done, then ticks */
.check_v2_submit_steps {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
text-align: left;
}
.check_v2_submit_step {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
color: var(--muted);
transition: color 0.2s;
}
.check_v2_submit_step_mark {
flex: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
/* the tick is in the markup from the start and simply invisible until the step is done — a glyph swapped in
by JS would be markup built in the browser, and the mark has to hold its size either way */
color: transparent;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.check_v2_submit_step.is_running {
color: var(--ink);
font-weight: 600;
}
.check_v2_submit_step.is_running .check_v2_submit_step_mark {
border-color: var(--brand);
border-top-color: transparent;
animation: check_v2_submit_step_spin 0.7s linear infinite;
}
.check_v2_submit_step.is_done {
color: var(--ink);
}
.check_v2_submit_step.is_done .check_v2_submit_step_mark {
background: var(--brand);
border-color: var(--brand);
color: #fff;
animation: none;
}
@keyframes check_v2_submit_step_spin {
to { transform: rotate(360deg); }
}
/* a spinner conveys "working" by moving; with motion reduced it would be a static broken ring, so the running
step is marked by its brand-coloured border instead and only the rotation is dropped */
@media (prefers-reduced-motion: reduce)
{
.check_v2_submit_step.is_running .check_v2_submit_step_mark { animation: none; border-top-color: var(--brand); }
}
/* the check-in completion mark. Each piece starts in its finished-but-hidden state and is held there by its
own initial values; check_v2_done_play, added once the server has confirmed the submission, is what runs
them. Without that class the mark is simply invisible, so a submission that fails never shows a tick. */
.check_v2_submit_badge:not(.hide_me) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
text-align: center;
}
/* THE BOOKING CONFIRMATION. Reuses the check-in's completion mark and its badge layout, which already
centres the mark and its two lines; this only gives the panel room in the drawer and spaces the button
below it. The badge here is never hidden, so it carries no hide_me and needs no :not() to lay out. */
/* the drawer's messages area is inline overflow: hidden because it carried the swiper. With the swiper
destroyed the confirmation is the only thing in there, and a long prose line on a short phone has to be
able to scroll, so the class the drawer adds overrides that one inline declaration. */
.booking_success_showing .mchat_messages {
overflow-y: auto !important;
}
.booking_success_panel {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
padding: 24px 20px;
}
.booking_success_prose {
color: #555;
font-size: 0.95em;
line-height: 1.5;
margin-top: 22px;
max-width: 420px;
text-align: center;
}
.check_v2_done_mark {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 18px;
}
.check_v2_done_mark svg {
width: 120px;
height: 120px;
display: block;
overflow: visible;
}
.check_v2_done_ring {
fill: none;
stroke: var(--brand_hover);
stroke-width: 4;
stroke-dasharray: 340;
stroke-dashoffset: 340;
}
.check_v2_done_fill {
fill: var(--brand);
transform: scale(0);
transform-origin: 60px 60px;
}
.check_v2_done_tick {
fill: none;
stroke: var(--surface);
stroke-width: 9;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 80;
stroke-dashoffset: 80;
}
.check_v2_done_spark {
position: absolute;
left: 56px;
top: 56px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
opacity: 0;
}
.check_v2_done_spark_2 { background: var(--brand_hover); }
/* brand tints and one green only. --gold is the system's warning colour — an amber particle in a
completion moment reads as a hold or a caution, which is the opposite of what the mark is saying. */
.check_v2_done_spark_4 { background: var(--brand_dark); }
.check_v2_done_spark_6 { background: var(--green); }
.check_v2_done_play .check_v2_done_ring { animation: check_v2_done_draw 0.6s ease-out forwards; }
.check_v2_done_play .check_v2_done_fill { animation: check_v2_done_pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards; }
.check_v2_done_play .check_v2_done_tick { animation: check_v2_done_tick_draw 0.4s ease-out 0.7s forwards; }
.check_v2_done_play .check_v2_done_spark { animation: check_v2_done_spark_fly 0.8s ease-out 0.75s forwards; }
.check_v2_done_play .check_v2_done_spark_1 { --cv2_spark_x: -58px; --cv2_spark_y: -40px; }
.check_v2_done_play .check_v2_done_spark_2 { --cv2_spark_x: 60px; --cv2_spark_y: -46px; }
.check_v2_done_play .check_v2_done_spark_3 { --cv2_spark_x: -66px; --cv2_spark_y: 30px; }
.check_v2_done_play .check_v2_done_spark_4 { --cv2_spark_x: 64px; --cv2_spark_y: 36px; }
.check_v2_done_play .check_v2_done_spark_5 { --cv2_spark_x: -6px; --cv2_spark_y: -70px; }
.check_v2_done_play .check_v2_done_spark_6 { --cv2_spark_x: 8px; --cv2_spark_y: 68px; }
.check_v2_submit_badge_title {
font-size: 1.4rem;
font-weight: 700;
color: var(--ink);
opacity: 0;
transform: translateY(8px);
}
.check_v2_submit_badge_sub {
font-size: 0.9rem;
color: var(--ink);
line-height: 1.5;
max-width: 280px;
margin: 8px auto 0;
opacity: 0;
transform: translateY(8px);
}
.check_v2_done_play .check_v2_submit_badge_title { animation: check_v2_done_rise 0.4s ease-out 0.9s forwards; }
.check_v2_done_play .check_v2_submit_badge_sub { animation: check_v2_done_rise 0.4s ease-out 1.05s forwards; }
@keyframes check_v2_done_draw { to { stroke-dashoffset: 0; } }
@keyframes check_v2_done_pop { to { transform: scale(1); } }
@keyframes check_v2_done_tick_draw { to { stroke-dashoffset: 0; } }
@keyframes check_v2_done_rise { to { opacity: 1; transform: translateY(0); } }
@keyframes check_v2_done_spark_fly {
0% { opacity: 1; transform: translate(0, 0) scale(1); }
100% { opacity: 0; transform: translate(var(--cv2_spark_x), var(--cv2_spark_y)) scale(0.3); }
}
/* reduced motion: the mark still has to ARRIVE, or the patient is left looking at a blank panel — the
animations are collapsed to an instant rather than removed, and the particles are dropped entirely. */
@media (prefers-reduced-motion: reduce)
{
.check_v2_done_play .check_v2_done_ring,
.check_v2_done_play .check_v2_done_fill,
.check_v2_done_play .check_v2_done_tick,
.check_v2_done_play .check_v2_submit_badge_title,
.check_v2_done_play .check_v2_submit_badge_sub { animation-duration: 0.01s; animation-delay: 0s; }
.check_v2_done_play .check_v2_done_spark { animation: none; }
}
/* Patient notification preferences side panel */
.notification_preferences_content {
background: var(--surface-subtle, #f8f8f8);
display: block;
flex: 1 1 auto;
gap: 0;
min-height: 0;
overflow-y: auto;
padding: 16px;
-webkit-overflow-scrolling: touch;
}
.notification_preferences_intro {
color: var(--muted, #77727e);
font-size: 0.92rem;
line-height: 1.5;
padding: 0 4px 17px;
}
.notification_channel_card,
.notification_preference_group {
background: white;
border: 1px solid var(--border, #ece9ef);
border-radius: 14px;
overflow: hidden;
}
.notification_channel_card {
margin-bottom: 17px;
padding: 2px 0;
}
.notification_preference_row {
align-items: center;
border-bottom: 1px solid var(--border, #ece9ef);
display: flex;
gap: 13px;
min-height: 79px;
padding: 14px 16px;
}
.notification_preference_row:last-child,
.notification_preference_row_no_border {
border-bottom: 0;
}
.notification_preference_icon {
align-items: center;
background: var(--brand_soft, #f0e9f8);
border-radius: 50%;
color: var(--brand);
display: flex;
flex: 0 0 38px;
font-size: 18px;
height: 38px;
justify-content: center;
}
.notification_preference_text {
flex: 1;
min-width: 0;
}
.notification_preference_name {
color: var(--text, #25232a);
font-size: 0.96rem;
font-weight: 650;
}
.notification_preference_description {
color: var(--muted, #77727e);
font-size: 0.81rem;
line-height: 1.4;
margin-top: 3px;
}
.notification_section_label {
color: var(--muted, #77727e);
font-size: 0.73rem;
font-weight: 750;
letter-spacing: 0.075em;
padding: 7px 5px 9px;
text-transform: uppercase;
}
.notification_delivery_label {
padding-top: 21px;
}
.notification_switch {
display: inline-block;
flex: 0 0 50px;
height: 30px;
margin: 0;
position: relative;
}
.notification_switch input {
height: 0;
opacity: 0;
width: 0;
}
.notification_switch_slider {
background: #d5d2d8;
border-radius: 30px;
cursor: pointer;
inset: 0;
position: absolute;
transition: background 0.2s;
}
.notification_switch_slider::before {
background: white;
border-radius: 50%;
bottom: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
content: '';
height: 24px;
left: 3px;
position: absolute;
transition: transform 0.2s;
width: 24px;
}
.notification_switch input:checked + .notification_switch_slider {
background: var(--brand);
}
.notification_switch input:checked + .notification_switch_slider::before {
transform: translateX(20px);
}
.notification_switch input:focus-visible + .notification_switch_slider {
outline: 3px solid var(--brand_soft, #f0e9f8);
outline-offset: 2px;
}
.notification_permission_warning {
background: #fff7e6;
border-radius: 10px;
color: #805b16;
font-size: 0.82rem;
line-height: 1.45;
margin: 0 14px 14px;
padding: 12px;
}
.notification_required_notice {
color: var(--muted, #8b8790);
font-size: 0.77rem;
line-height: 1.5;
padding: 16px 5px 8px;
}
.notification_preferences_footer {
background: white;
border-top: 0;
box-shadow: none;
display: block;
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
/* How It Works side panel */
.hiw_panel
{
background: #f8f8fa;
color: var(--ink, #182230);
}
.hiw_panel .mchat_header
{
min-height: 58px;
padding-top: env(safe-area-inset-top);
}
.hiw_panel .mchat_header table
{
table-layout: fixed;
}
.hiw_panel .mchat_username
{
font-size: 0.94rem;
font-weight: 750;
}
.hiw_header_button
{
align-items: center;
background: rgba(255, 255, 255, 0.15);
border: 0;
border-radius: 50%;
color: white;
display: inline-flex;
height: 38px;
justify-content: center;
padding: 0;
width: 38px;
}
.hiw_overview_header
{
background: linear-gradient(145deg, #68409c 0%, var(--brand, #865ebf) 62%, #976bc9 100%);
border-bottom: 0;
}
.hiw_overview_messages
{
background: #f8f8fa;
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
}
.hiw_overview_hero
{
background: linear-gradient(145deg, #68409c 0%, var(--brand, #865ebf) 55%, #a275d4 100%);
color: white;
flex: 0 0 242px;
min-height: 242px;
overflow: hidden;
padding: 18px 24px 20px;
position: relative;
}
.hiw_overview_hero::before,
.hiw_overview_hero::after
{
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
content: '';
position: absolute;
}
.hiw_overview_hero::before
{
height: 210px;
right: -100px;
top: -110px;
width: 210px;
}
.hiw_overview_hero::after
{
bottom: -76px;
height: 130px;
left: -76px;
width: 130px;
}
.hiw_overview_copy
{
position: relative;
width: 56%;
z-index: 2;
}
.hiw_eyebrow
{
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.hiw_overview_copy .hiw_eyebrow
{
opacity: 0.78;
}
.hiw_overview_copy h2,
.hiw_detail_hero_copy h2
{
font-size: 1.88rem;
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.05;
margin: 7px 0 10px;
}
.hiw_overview_copy p,
.hiw_detail_hero_copy p
{
font-size: 0.81rem;
line-height: 1.5;
margin: 0;
}
.hiw_overview_copy p
{
color: rgba(255, 255, 255, 0.84);
}
.hiw_lottie_container
{
bottom: 4px;
height: 190px;
position: absolute;
right: 2px;
width: 46%;
z-index: 1;
}
.hiw_choice_section
{
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
}
.hiw_option_card
{
background: white;
border: 1px solid #e7e8ec;
border-radius: 20px;
box-shadow: 0 6px 20px rgba(25, 31, 43, 0.06);
color: inherit;
cursor: pointer;
display: block;
margin: 0 0 12px;
overflow: hidden;
padding: 0;
text-align: left;
transition: border-color 0.17s ease, box-shadow 0.17s ease, transform 0.17s ease;
width: 100%;
}
.hiw_option_card:last-child
{
margin-bottom: 0;
}
.hiw_option_card:hover,
.hiw_option_card:focus-visible
{
border-color: #d4c1ec;
box-shadow: 0 12px 30px rgba(42, 34, 57, 0.12);
outline: 0;
transform: translateY(-2px);
}
.hiw_choice_visual
{
align-items: center;
background: #eaf3ff;
display: flex;
height: 68px;
overflow: hidden;
padding: 0 14px;
position: relative;
}
.hiw_care_visual
{
background: #e7f7f1;
}
.hiw_choice_badge
{
background: rgba(255, 255, 255, 0.92);
border-radius: 999px;
color: #245ea9;
font-size: 0.62rem;
font-weight: 850;
letter-spacing: 0.04em;
padding: 5px 9px;
position: relative;
text-transform: uppercase;
z-index: 2;
}
.hiw_care_card .hiw_choice_badge
{
color: #0b735a;
}
.hiw_calendar_art
{
background: white;
border-radius: 11px;
box-shadow: 0 9px 24px rgba(43, 127, 255, 0.16);
height: 54px;
position: absolute;
right: 15px;
top: 8px;
transform: rotate(2deg);
width: 76px;
}
.hiw_calendar_art::before
{
background: #2b7fff;
border-radius: 11px 11px 0 0;
content: '';
display: block;
height: 15px;
}
.hiw_calendar_grid
{
display: grid;
gap: 4px;
grid-template-columns: repeat(4, 1fr);
padding: 7px;
}
.hiw_calendar_grid i
{
background: #dde7f5;
border-radius: 3px;
height: 4px;
}
.hiw_calendar_grid i:nth-child(7)
{
background: #2b7fff;
box-shadow: 0 0 0 3px #dbeaff;
}
.hiw_relationship_art
{
height: 60px;
position: absolute;
right: 14px;
top: 5px;
width: 91px;
}
.hiw_relationship_person
{
background: white;
border-radius: 22px 22px 12px 12px;
bottom: 4px;
box-shadow: 0 10px 24px rgba(21, 143, 114, 0.15);
height: 47px;
position: absolute;
width: 43px;
}
.hiw_relationship_person::before
{
background: #d99e7c;
border-radius: 50%;
content: '';
height: 20px;
left: 11px;
position: absolute;
top: 7px;
width: 20px;
}
.hiw_relationship_person::after
{
background: #8dcabb;
border-radius: 12px 12px 6px 6px;
bottom: 5px;
content: '';
height: 13px;
left: 9px;
position: absolute;
width: 25px;
}
.hiw_relationship_provider
{
left: 3px;
}
.hiw_relationship_patient
{
right: 2px;
transform: scale(0.88);
transform-origin: bottom;
}
.hiw_relationship_heart
{
align-items: center;
background: #158f72;
border-radius: 50%;
box-shadow: 0 6px 14px rgba(21, 143, 114, 0.24);
color: white;
display: flex;
font-size: 0.72rem;
height: 25px;
justify-content: center;
left: 35px;
position: absolute;
top: 0;
width: 25px;
z-index: 2;
}
.hiw_choice_body
{
display: block;
padding: 14px 16px 15px;
}
.hiw_choice_title_row
{
align-items: center;
display: flex;
gap: 10px;
}
.hiw_choice_title_row strong
{
flex: 1;
font-size: 1.08rem;
letter-spacing: -0.02em;
}
.hiw_choice_title_row i
{
color: #98a2b3;
}
.hiw_choice_description
{
color: #667085;
display: block;
font-size: 0.8rem;
line-height: 1.5;
margin: 6px 0 11px;
}
.hiw_choice_meta
{
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.hiw_choice_meta > span
{
background: #f4f5f7;
border-radius: 8px;
color: #475467;
font-size: 0.62rem;
font-weight: 750;
padding: 5px 8px;
}
.hiw_detail_header
{
backdrop-filter: none;
color: #182230;
}
.hiw_single_detail .hiw_detail_header
{
background: #eaf3ff;
border-bottom: 1px solid rgba(43, 127, 255, 0.08);
}
.hiw_care_detail .hiw_detail_header
{
background: #e7f7f1;
border-bottom: 1px solid rgba(21, 143, 114, 0.08);
}
.hiw_detail_header .hiw_header_button
{
background: rgba(255, 255, 255, 0.66);
}
.hiw_single_detail .hiw_detail_header .hiw_header_button
{
color: #245ea9;
}
.hiw_care_detail .hiw_detail_header .hiw_header_button
{
color: #0b735a;
}
.hiw_detail_messages
{
background: #f8f8fa;
display: block;
padding: 0;
}
.hiw_detail_hero
{
background: linear-gradient(145deg, #eaf3ff, #f5f9ff);
min-height: 218px;
overflow: hidden;
padding: 26px 22px;
position: relative;
}
.hiw_care_detail .hiw_detail_hero
{
background: linear-gradient(145deg, #e7f7f1, #f4fbf8);
}
.hiw_detail_hero_copy
{
position: relative;
width: 58%;
z-index: 2;
}
.hiw_single_detail .hiw_detail_hero_copy .hiw_eyebrow
{
color: #2b7fff;
}
.hiw_care_detail .hiw_detail_hero_copy .hiw_eyebrow
{
color: #158f72;
}
.hiw_detail_hero_copy p
{
color: #526174;
}
.hiw_single_detail_art,
.hiw_care_detail_art
{
bottom: 3px;
height: 180px;
position: absolute;
right: 7px;
width: 180px;
}
.hiw_channel_card
{
align-items: center;
background: linear-gradient(160deg, #cbe0ff, #8bb8f5);
border: 7px solid white;
border-radius: 22px;
box-shadow: 0 18px 30px rgba(43, 127, 255, 0.18);
color: white;
display: flex;
font-size: 2.6rem;
height: 110px;
justify-content: center;
position: absolute;
right: 10px;
top: 30px;
transform: rotate(4deg);
width: 145px;
}
.hiw_channel_pill
{
background: white;
border-radius: 999px;
bottom: 20px;
box-shadow: 0 8px 20px rgba(43, 127, 255, 0.18);
color: #2b7fff;
display: flex;
font-size: 0.8rem;
gap: 9px;
padding: 8px 11px;
position: absolute;
right: 21px;
transform: rotate(2deg);
}
.hiw_detail_person
{
background: white;
border-radius: 40px 40px 20px 20px;
bottom: 0;
box-shadow: 0 16px 28px rgba(21, 143, 114, 0.14);
height: 94px;
position: absolute;
width: 72px;
}
.hiw_detail_person::before
{
background: #d69a79;
border-radius: 50%;
content: '';
height: 36px;
left: 18px;
position: absolute;
top: 12px;
width: 36px;
}
.hiw_detail_person::after
{
background: #8dcabb;
border-radius: 18px 18px 9px 9px;
bottom: 10px;
content: '';
height: 32px;
left: 13px;
position: absolute;
width: 46px;
}
.hiw_detail_provider
{
left: 4px;
}
.hiw_detail_patient
{
right: 0;
transform: scale(0.88);
transform-origin: bottom;
}
.hiw_detail_heart
{
align-items: center;
animation: hiw_heart_pulse 2s ease-in-out infinite;
background: #158f72;
border-radius: 50%;
box-shadow: 0 9px 18px rgba(21, 143, 114, 0.25);
color: white;
display: flex;
font-size: 1.15rem;
height: 40px;
justify-content: center;
left: 63px;
position: absolute;
top: 18px;
width: 40px;
z-index: 2;
}
.hiw_detail_content
{
padding: 20px 16px 30px;
}
.hiw_fit_card
{
align-items: flex-start;
background: #f8fbff;
border: 1px solid #dce9fb;
border-radius: 16px;
display: flex;
gap: 12px;
padding: 15px 16px;
}
.hiw_care_detail .hiw_fit_card
{
background: #f5fbf8;
border-color: #d6ede5;
}
.hiw_fit_icon
{
align-items: center;
background: #2b7fff;
border-radius: 11px;
color: white;
display: flex;
flex: 0 0 38px;
font-size: 1.1rem;
height: 38px;
justify-content: center;
}
.hiw_care_detail .hiw_fit_icon
{
background: #158f72;
}
.hiw_fit_card strong,
.hiw_fit_card small
{
display: block;
}
.hiw_fit_card strong
{
font-size: 0.81rem;
margin-bottom: 3px;
}
.hiw_fit_card small
{
color: #667085;
font-size: 0.75rem;
line-height: 1.45;
}
.hiw_section_title
{
font-size: 1.02rem;
font-weight: 750;
letter-spacing: -0.02em;
margin: 24px 0 13px;
}
.hiw_step_row
{
min-height: 74px;
padding: 0 0 18px 53px;
position: relative;
}
.hiw_step_row:not(:last-child)::before
{
background: #dce8f8;
bottom: 0;
content: '';
left: 20px;
position: absolute;
top: 40px;
width: 2px;
}
.hiw_care_detail .hiw_step_row:not(:last-child)::before
{
background: #d8ece6;
}
.hiw_step_number
{
align-items: center;
background: #eaf3ff;
border-radius: 13px;
color: #2b7fff;
display: flex;
font-size: 0.8rem;
font-weight: 850;
height: 41px;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 41px;
}
.hiw_care_detail .hiw_step_number
{
background: #e7f7f1;
color: #158f72;
}
.hiw_step_row strong
{
display: block;
font-size: 0.86rem;
padding-top: 2px;
}
.hiw_step_row p
{
color: #667085;
font-size: 0.75rem;
line-height: 1.45;
margin: 4px 0 0;
}
.hiw_feature_grid
{
display: grid;
gap: 9px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hiw_feature_tile
{
background: white;
border: 1px solid #e7e8ec;
border-radius: 15px;
min-height: 108px;
padding: 14px;
}
.hiw_feature_tile > i
{
color: #2b7fff;
display: block;
font-size: 1.3rem;
margin-bottom: 13px;
}
.hiw_care_detail .hiw_feature_tile > i
{
color: #158f72;
}
.hiw_feature_tile strong,
.hiw_feature_tile span
{
display: block;
}
.hiw_feature_tile strong
{
font-size: 0.75rem;
margin-bottom: 3px;
}
.hiw_feature_tile span
{
color: #667085;
font-size: 0.64rem;
line-height: 1.4;
}
.hiw_detail_footer
{
background: white;
border-top: 0;
box-shadow: none;
display: block;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
@keyframes hiw_heart_pulse
{
0%, 100%
{
transform: scale(1);
}
50%
{
transform: scale(1.1);
}
}
@media (max-height: 740px)
{
.hiw_overview_hero
{
flex-basis: 205px;
min-height: 205px;
}
.hiw_lottie_container
{
height: 165px;
}
.hiw_choice_section
{
justify-content: flex-start;
}
}
@media (prefers-reduced-motion: reduce)
{
.hiw_detail_heart
{
animation: none;
}
}
/* ================================================================================================= *
* TRIAGE TAB — the clinician's read of a visit's check-in (CMR-2026-10-28-470).
*
* One reading pattern covers the whole tab: a card with a titled header, and inside it a stack of
* label/value rows. The intake's answers, the visit's own fields, the payment lines and the episode
* all use .triage_answer_row, so a clinician learns the shape once. The 2x4 field grid this replaced
* gave eight equal cells to fields of very different weight.
* ================================================================================================= */
.triage_tab_content
{
display: grid;
font-size: 0.76rem;
gap: 10px;
}
.triage_card
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: 4px;
overflow: hidden;
}
/* wraps because the Intake header carries a title, the approver line and the All/Changes switch, whose
minimum widths exceed a phone-width card and would clip the switch */
.triage_card_header
{
align-items: center;
border-bottom: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
justify-content: space-between;
min-height: 44px;
padding: 8px 12px;
}
.triage_card_title_group
{
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
min-width: 0;
}
.triage_card_icon
{
align-items: center;
background: #eaf3f4;
border-radius: 4px;
color: #1b4d5c;
display: flex;
flex: 0 0 auto;
height: 28px;
justify-content: center;
width: 28px;
}
.triage_card_title
{
color: #1b4d5c;
font-size: 0.82rem;
font-weight: 800;
}
.triage_card_sub
{
color: var(--muted);
font-size: 0.7rem;
}
/* An ADMINISTRATIVE blank — no visit language on file, no clinic. Deliberately plain grey with no icon,
unlike .triage_absence_missing: a missing visit language is not a clinical gap for a clinician to chase,
and putting a warning triangle on one would make the real gaps (allergies, pharmacy, emergency contact)
indistinguishable from housekeeping. The colour is the token because #9aa5a9 measured 2.5:1 on white. */
.triage_field_empty
{
color: var(--muted);
font-weight: 500;
}
/* --- the check-in state strip ------------------------------------------------------------------- */
.triage_checkin_strip
{
align-items: center;
background: var(--surface);
border: 1px solid var(--line);
border-left: 4px solid var(--green);
border-radius: 4px;
display: flex;
gap: 12px;
padding: 10px 12px;
}
.triage_checkin_strip[data_state='in_progress'] { border-left-color: var(--gold); }
.triage_checkin_strip[data_state='not_started'] { border-left-color: var(--danger); }
.triage_checkin_mark
{
align-items: center;
background: var(--green_soft);
border-radius: 50%;
color: var(--green);
display: flex;
flex: 0 0 auto;
font-size: 1rem;
height: 32px;
justify-content: center;
width: 32px;
}
.triage_checkin_strip[data_state='in_progress'] .triage_checkin_mark
{
background: var(--gold_soft);
color: #b06f05;
}
.triage_checkin_strip[data_state='not_started'] .triage_checkin_mark
{
background: var(--danger_soft);
color: var(--danger);
}
.triage_checkin_copy
{
flex: 1 1 auto;
min-width: 0;
}
.triage_checkin_state
{
color: var(--ink);
font-size: 0.82rem;
font-weight: 800;
}
.triage_checkin_meta
{
color: var(--muted);
font-size: 0.72rem;
line-height: 1.45;
margin-top: 2px;
}
.triage_checkin_actions
{
display: flex;
flex: 0 0 auto;
gap: 6px;
}
/* --- the pre-visit risk banner ------------------------------------------------------------------ */
.triage_risk_card
{
background: var(--gold_soft);
border: 1px solid #f0d49a;
border-radius: 4px;
padding: 11px 12px;
}
.triage_risk_card[data_level='high'] { background: var(--danger_soft); border-color: #f6b9bd; }
.triage_risk_card[data_level='low'] { background: var(--green_soft); border-color: #bfe5cf; }
.triage_risk_card[data_level='unknown'] { background: var(--page); border-color: var(--line); }
.triage_risk_card.triage_risk_collapsed
{
background: var(--surface);
border-color: var(--line);
border-left: 4px solid var(--green);
padding: 10px 12px;
}
.triage_risk_toggle_class
{
align-items: center;
background: transparent;
border: 0;
color: inherit;
display: flex;
gap: 12px;
padding: 0;
text-align: left;
width: 100%;
}
.triage_risk_toggle_class[hidden] { display: none; }
.triage_risk_toggle_class .triage_checkin_mark { pointer-events: none; }
.triage_risk_toggle_copy
{
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.triage_risk_toggle_title
{
color: var(--ink);
font-size: 0.82rem;
font-weight: 800;
}
.triage_risk_review_summary
{
color: var(--muted);
font-size: 0.72rem;
line-height: 1.45;
margin-top: 2px;
}
.triage_risk_chevron
{
color: var(--muted);
flex: 0 0 auto;
font-size: 0.85rem;
margin-left: auto;
}
.triage_risk_toggle_class[aria-expanded='true'] .triage_risk_chevron { transform: rotate(180deg); }
.triage_risk_toggle_class:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.triage_risk_details:not([hidden]) { margin-top: 10px; }
.triage_risk_toggle_class[hidden] + .triage_risk_details:not([hidden]) { margin-top: 0; }
.triage_risk_head
{
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: space-between;
}
.triage_risk_title
{
font-size: 0.8rem;
font-weight: 800;
}
.triage_risk_body
{
color: #4a4036;
font-size: 0.73rem;
line-height: 1.55;
margin-top: 7px;
}
/* --- the flagged check-in review panel ---------------------------------------------------------- */
.triage_overview_card
{
border-color: var(--line);
background: var(--surface);
}
.triage_overview_body
{
padding: 14px 16px 16px;
}
.triage_overview_lead
{
color: var(--ink);
font-size: 0.85rem;
font-weight: 400;
line-height: 1.45;
margin: 0;
}
.triage_overview_lead strong
{
color: var(--brand);
font-weight: 750;
}
.triage_overview_facts
{
border-top: 1px solid var(--line);
display: grid;
gap: 8px;
list-style: none;
margin: 12px 0 0;
padding: 12px 0 0;
}
.triage_overview_facts li
{
color: var(--ink);
font-size: 0.85rem;
line-height: 1.45;
}
.triage_overview_facts strong
{
color: var(--brand);
font-weight: 750;
margin-right: 4px;
}
.triage_overview_note,
.triage_overview_empty
{
color: var(--muted);
font-size: 0.78rem;
line-height: 1.45;
}
.triage_overview_note { margin-top: 12px; }
.triage_overview_empty { margin: 0 0 12px; }
.triage_overview_run_class[disabled] { opacity: 0.6; }
.triage_overview_refresh { margin-top: 12px; }
.triage_overview_error { color: var(--danger); font-size: 0.78rem; margin-top: 10px; }
@media (max-width: 600px)
{
.triage_overview_body { padding: 14px; }
.triage_overview_lead { font-size: 0.85rem; }
.triage_overview_facts { gap: 10px; }
}
/* The tier as the panel's first card. The triage strip above uses the same tokens at 0.8rem inside a cramped
workbench column; this is a full-width panel header a clinician reads before the narrative, so it takes its
own sizes rather than overriding that block's. */
.checkin_flag_tier
{
align-items: center;
background: var(--gold_soft);
border: 1px solid #f0d49a;
border-radius: var(--radius_lg);
display: flex;
gap: 12px;
padding: 14px;
}
.checkin_flag_tier[data_level='high'] { background: var(--danger_soft); border-color: #f6b9bd; }
.checkin_flag_tier[data_level='low'] { background: var(--green_soft); border-color: #bfe5cf; }
.checkin_flag_tier[data_level='unknown'] { background: var(--page); border-color: var(--line); }
.checkin_flag_tier_icon
{
flex-shrink: 0;
font-size: 1.6rem;
line-height: 1;
}
.checkin_flag_tier[data_level='high'] .checkin_flag_tier_icon { color: var(--danger); }
/* NOT var(--gold) for the medium icon: the gold token on its own soft fill is about 1.9:1, so the shape
carrying the tier would be the hardest thing on the card to see. This is the badge_gold ink, about 5:1. */
.checkin_flag_tier[data_level='medium'] .checkin_flag_tier_icon { color: #b25e00; }
.checkin_flag_tier[data_level='low'] .checkin_flag_tier_icon { color: var(--green); }
.checkin_flag_tier[data_level='unknown'] .checkin_flag_tier_icon { color: var(--muted); }
/* OFF THE DOCUMENTED SCALE ON PURPOSE: the scale has a card title at 1rem and a section title at 1.4rem, and
this is neither — it is the one word a clinician triaging several flags reads first, and at the card-title
size it loses to the analysis beneath it. The deviation is the size only; the weight and colour are the
scale's own. */
.checkin_flag_tier_words
{
color: var(--ink);
font-size: 1.1rem;
font-weight: 800;
line-height: 1.2;
}
.checkin_flag_tier_when
{
color: var(--muted);
font-size: 0.72rem;
margin-top: 3px;
}
/* A single chat-item row sitting on the panel's own background, rather than one of a stacked list: it needs the
border and the radius the list gets from its neighbours. */
.checkin_flag_visit_list .chat-item,
.checkin_flag_call_list .chat-item
{
border: 1px solid var(--line);
border-radius: var(--radius);
}
.checkin_flag_visit_avatar
{
align-items: center;
background: var(--page);
border-radius: 50%;
display: flex;
flex-shrink: 0;
height: 50px;
justify-content: center;
margin-right: 10px;
overflow: hidden;
width: 50px;
}
.checkin_flag_visit_glyph
{
color: var(--muted);
font-size: 1.4em;
}
.checkin_flag_call_avatar { background: var(--brand_soft); }
.checkin_flag_call_avatar .bi { color: var(--brand); font-size: 1.3em; }
.checkin_flag_call_row
{
align-items: center;
border-top: 1px solid var(--line);
display: flex;
gap: 10px;
padding: 9px 0 0;
margin-top: 9px;
}
.checkin_flag_call_row .bi { flex-shrink: 0; font-size: 1rem; }
.checkin_flag_call_reached .bi { color: var(--green); }
.checkin_flag_call_missed .bi { color: var(--danger); }
.checkin_flag_call_text
{
display: flex;
flex-direction: column;
}
.checkin_flag_call_outcome
{
color: var(--ink);
font-size: 0.82rem;
font-weight: 700;
}
.checkin_flag_call_meta
{
color: var(--muted);
font-size: 0.72rem;
margin-top: 2px;
}
/* --- a Triage section that still wants something from the clinician ------------------------------ */
/* The edge is the whole point: the tab is walked top to bottom, and what is left should show without reading
every card. Brand for outstanding rather than a risk colour, because the card is already tinted by the risk
level underneath it and two meanings on one surface would be read as one. */
.triage_section_needs_action { border-left: 4px solid var(--brand); }
.triage_section_done { border-left: 4px solid var(--green); }
.triage_action
{
border-top: 1px solid var(--line);
margin-top: 10px;
padding-top: 12px;
}
.triage_action_intro
{
align-items: baseline;
color: var(--ink);
display: flex;
font-size: 0.83rem;
font-weight: 700;
gap: 8px;
margin-bottom: 10px;
}
.triage_action_intro span,
.triage_action_optional
{
color: var(--muted);
font-size: 0.7rem;
font-weight: 500;
}
.triage_action_revision_note
{
background: var(--blue_soft);
border-radius: var(--radius);
color: var(--ink);
font-size: 0.77rem;
margin-top: 12px;
padding: 9px 11px;
}
.triage_action_message_input
{
font-size: 0.82rem;
min-height: 80px;
}
.triage_action .tile_ndd
{
background: var(--surface);
border-width: 1px;
border-radius: var(--radius);
padding: 9px 11px;
text-align: left;
}
.triage_action .tile_ndd.selected
{
background: var(--brand_soft);
border-width: 1px;
}
.triage_action .tile_primary { font-size: 0.82rem; }
.triage_action .tile_secondary { font-size: 0.7rem; }
.triage_action_label
{
color: var(--muted);
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.06em;
margin-bottom: 7px;
text-transform: uppercase;
}
/* the answers are the house tile_ndd selection tiles, so choosing one looks the same here as choosing a time
slot or a date does everywhere else, and the selected state comes from the design system rather than from
anything declared here.
EVERY DISPLAY RULE HERE IS GUARDED AGAINST .hide_me. That class and a bare class selector tie on
specificity, so whichever is written later wins — and global.css is tens of thousands of lines past
.hide_me, so a plain `display: flex` on anything hideable silently un-hides it. That is exactly how both
disposition sets came to be on screen at once, letting a clinician tap a tile belonging to the answer they
had not chosen. The same tie was recorded against .btn_ndd in 2026-10-21 and is easy to walk back into. */
/* SIDE BY SIDE, HALF EACH, EQUAL HEIGHT. `flex: 1 1 0` rather than a basis in pixels is what makes them
exactly half each whatever their text, and the row's default align-items: stretch is what makes the shorter
one match the taller — neither needs a height set. No wrapping, or the pair stops being a pair. */
.triage_path_row:not(.hide_me)
{
display: flex;
flex-wrap: nowrap;
gap: 8px;
}
.triage_path_row .tile_ndd { flex: 1 1 0; min-width: 0; }
.triage_disposition_row:not(.hide_me)
{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.triage_path_row .tile_ndd { margin: 0; }
.triage_disposition_row .tile_ndd { flex: 1 1 150px; margin: 0; }
.triage_tile_icon { margin-right: 5px; }
/* a disposition the chosen answer does not offer: visible, so the clinician can see the question has two
answers and why only one is available, and inert, because a hidden tile is still a tappable tile. The
handler refuses it as well — this is the appearance, not the control. */
.tile_ndd_unavailable
{
opacity: 0.38;
cursor: not-allowed;
pointer-events: none;
}
/* each step appears as the one before it is answered, so the card is a short question rather than a form.
Deliberately sets no display property, so .hide_me on the same element is never in a fight it can lose. */
.triage_action_step { margin-top: 11px; }
.triage_action_done_head
{
align-items: center;
display: flex;
gap: 9px;
}
.triage_action_done_tick
{
color: var(--green);
flex-shrink: 0;
font-size: 1.25rem;
}
.triage_action_done_text
{
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
.triage_action_done_label
{
color: var(--ink);
font-size: 0.83rem;
font-weight: 700;
}
.triage_action_done_when
{
color: var(--muted);
font-size: 0.7rem;
margin-top: 2px;
}
.triage_action_done_note
{
color: var(--muted);
font-size: 0.73rem;
line-height: 1.55;
margin-top: 8px;
}
/* --- presenting --------------------------------------------------------------------------------- */
.triage_presenting_body
{
padding: 10px 12px;
}
.triage_presenting_cc
{
font-size: 0.95rem;
font-weight: 800;
line-height: 1.35;
}
.triage_presenting_onset,
.triage_presenting_reported
{
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
margin-top: 7px;
}
.triage_presenting_onset_label
{
color: var(--muted);
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.triage_presenting_words
{
overflow-wrap: anywhere;
background: #f7f9fa;
border-left: 2px solid #d6dfe2;
border-radius: 0 4px 4px 0;
color: #3d4a4f;
font-size: 0.76rem;
line-height: 1.55;
margin-top: 9px;
padding: 7px 10px;
}
.triage_presenting_negatives
{
color: var(--muted);
font-size: 0.71rem;
margin-top: 8px;
}
.triage_uti_group
{
display: grid;
gap: 5px;
margin-top: 11px;
}
.triage_uti_facts
{
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.triage_uti_other summary
{
color: var(--muted);
cursor: pointer;
font-size: 0.78rem;
font-weight: 600;
}
.triage_uti_other summary span
{
font-weight: 400;
}
.triage_uti_fact
{
display: grid;
gap: 4px 10px;
grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
padding: 6px 9px;
}
.triage_uti_fact + .triage_uti_fact
{
border-top: 1px solid var(--line);
}
.triage_uti_fact span
{
color: var(--muted);
font-size: 0.78rem;
min-width: 0;
overflow-wrap: anywhere;
}
.triage_uti_fact strong
{
font-size: 0.82rem;
font-weight: 600;
min-width: 0;
overflow-wrap: anywhere;
}
/* --- health record snapshots ------------------------------------------------------------------- */
/* THE VISIT GOALS CARD BODY (CMR-2026-10-31-500) takes the shared card-body rule above rather than one of
its own: it was 0.86rem against its neighbours' 0.82rem, and — the part that mattered — it had no
overflow-wrap while .triage_card is overflow:hidden, so an unbroken 500-character goal was clipped rather
than wrapped and a clinician simply never saw the end of it.
.triage_goals_placeholder, which rendered the sentence saying goals could not yet be added, is gone: there
is no markup left carrying it. */
/* the patient's own words, numbered as they wrote them. padding-left carries the numbers, which sit outside
the text so a goal that wraps lines up under itself rather than under its own number. */
.triage_goals_list
{
margin: 0;
padding-left: 22px;
}
.triage_goals_list .triage_goal_item
{
margin-bottom: 6px;
}
.triage_goals_list .triage_goal_item:last-child
{
margin-bottom: 0;
}
.triage_health_section
{
margin-top: 12px;
}
.triage_health_grid
{
display: grid;
gap: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.triage_health_card
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow_xs);
min-width: 0;
overflow: hidden;
}
.triage_health_card:nth-child(n + 3)
{
grid-column: 1 / -1;
}
.triage_health_card_head
{
align-items: center;
border-bottom: 1px solid var(--line);
display: flex;
gap: 9px;
min-height: 44px;
padding: 9px 12px;
}
.triage_health_card_icon
{
align-items: center;
background: var(--brand_soft);
border-radius: var(--radius);
color: var(--brand);
display: inline-flex;
flex: 0 0 28px;
height: 28px;
justify-content: center;
}
.triage_health_card_head h3
{
color: var(--ink);
flex: 1 1 auto;
font-size: 0.82rem;
font-weight: 750;
line-height: 1.3;
margin: 0;
min-width: 0;
}
.triage_health_card_body
{
color: var(--ink);
font-size: 0.82rem;
font-weight: 600;
line-height: 1.5;
min-height: 48px;
overflow-wrap: anywhere;
padding: 12px;
}
.triage_health_card_body .triage_answer_chips
{
gap: 6px;
}
.triage_health_medications .triage_health_card_body
{
padding: 0 12px;
}
.triage_health_medication_source
{
color: var(--muted);
font-size: 0.69rem;
font-weight: 500;
}
.triage_health_medication_add
{
background: var(--surface);
border: 1px solid #cbd4d7;
border-radius: var(--radius);
color: var(--brand_dark);
font-size: 0.75rem;
font-weight: 700;
min-height: 36px;
padding: 5px 11px;
}
.triage_health_medication_add:hover
{
background: var(--brand_soft);
}
.triage_current_medications .client_medication_row
{
align-items: start;
cursor: pointer;
display: grid !important;
gap: 10px;
grid-template-columns: 36px minmax(0, 1fr) auto;
min-height: 62px;
padding: 10px 0;
}
.triage_current_medications .client_medication_row + .client_medication_row
{
border-top: 1px solid var(--line);
}
.triage_current_medications .client_medication_icon
{
align-items: center;
background: var(--brand_soft);
border-radius: 50%;
display: flex;
height: 34px;
justify-content: center;
margin: 1px 0 0 !important;
width: 34px;
}
.triage_current_medications .client_medication_icon img
{
height: 23px;
object-fit: contain;
width: 23px;
}
.triage_current_medications .client_medication_copy
{
min-width: 0;
}
.triage_current_medications .client_medication_name
{
color: var(--ink);
font-size: 0.78rem;
font-weight: 800;
line-height: 1.35;
}
.triage_current_medications .client_medication_sig
{
color: var(--ink);
font-size: 0.7rem;
font-weight: 500;
line-height: 1.4;
margin-top: 2px;
}
.triage_current_medications .client_medication_prescribed_date
{
color: var(--muted);
font-size: 0.66rem;
font-weight: 400;
line-height: 1.35;
margin-top: 2px;
}
.triage_current_medications .client_medication_actions
{
align-self: center;
}
.triage_current_medications .client_medication_chevron
{
color: var(--muted);
font-size: 0.8rem;
}
.triage_medication_checkin
{
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.74rem;
font-weight: 500;
padding: 10px 0;
}
.triage_medication_checkin summary
{
color: var(--brand_dark);
cursor: pointer;
font-weight: 700;
}
.triage_medication_checkin_body
{
padding-top: 8px;
}
.triage_medication_row
{
align-items: center;
display: grid;
gap: 10px;
grid-template-columns: 36px minmax(0, 1fr);
min-height: 62px;
padding: 10px 0;
}
.triage_medication_row + .triage_medication_row
{
border-top: 1px solid var(--line);
}
.triage_medication_icon
{
align-items: center;
background: var(--brand_soft);
border-radius: 50%;
display: inline-flex;
height: 34px;
justify-content: center;
width: 34px;
}
.triage_medication_icon img
{
height: 23px;
object-fit: contain;
width: 23px;
}
.triage_medication_name
{
color: var(--ink);
font-size: 0.78rem;
font-weight: 800;
line-height: 1.35;
min-width: 0;
overflow-wrap: anywhere;
}
@media (max-width: 430px)
{
.triage_medication_row
{
gap: 8px;
grid-template-columns: 32px minmax(0, 1fr);
}
.triage_medication_icon
{
height: 30px;
width: 30px;
}
.triage_medication_icon img
{
height: 21px;
width: 21px;
}
.triage_current_medications .client_medication_row
{
gap: 8px;
grid-template-columns: 32px minmax(0, 1fr) auto;
}
.triage_current_medications .client_medication_icon
{
height: 30px;
width: 30px;
}
.triage_current_medications .client_medication_icon img
{
height: 21px;
width: 21px;
}
}
.triage_emergency_contact_body,
.triage_pharmacy_body,
.triage_patient_note_body,
.triage_goals_body
{
color: var(--ink);
font-size: 0.82rem;
line-height: 1.5;
overflow-wrap: anywhere;
padding: 12px;
}
.triage_emergency_contact_source,
.triage_pharmacy_source,
.triage_patient_note_source
{
color: var(--muted);
font-size: 0.72rem;
margin-top: 4px;
}
.triage_pharmacy_note
{
color: var(--ink);
font-size: 0.82rem;
margin-top: 6px;
}
.triage_pharmacy_prior
{
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.76rem;
margin-top: 10px;
padding-top: 8px;
}
.triage_facility_address
{
display: block;
margin-top: 3px;
}
.triage_facility_drawer
{
display: flex;
flex-direction: column;
background: white;
font-size: 0.9em;
}
.triage_facility_drawer .mchat_header
{
background: var(--brand);
padding-top: env(safe-area-inset-top);
flex: none;
}
.triage_facility_tabs
{
display: flex;
background: white;
border-bottom: 1px solid var(--line);
flex: none;
}
.triage_facility_tab
{
width: 50%;
padding: 10px 4px;
border: 0;
border-bottom: 3px solid transparent;
background: white;
color: var(--ink);
font-size: 0.88em;
}
.triage_facility_tab.active
{
border-bottom-color: var(--brand);
font-weight: 700;
}
.triage_facility_search_header
{
padding: 12px 12px 8px;
background: white;
border-bottom: 1px solid #e8e0f5;
flex: none;
}
.triage_facility_search_wrap
{
position: relative;
}
.triage_facility_search_wrap > i
{
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--brand);
z-index: 1;
pointer-events: none;
}
.triage_facility_search_wrap .form-control
{
min-height: 46px;
padding: 8px 38px !important;
border: 1.5px solid #e0cefc !important;
border-radius: 8px 8px 0 0;
font-size: 0.95em;
}
.triage_facility_search_wrap + .triage_facility_search_wrap .form-control
{
border-top: 0 !important;
border-radius: 0 0 8px 8px;
}
.triage_facility_clear
{
position: absolute;
right: 0;
top: 0;
width: 38px;
height: 100%;
border: 0;
background: transparent;
color: var(--muted);
font-size: 1.3rem;
}
.triage_facility_drawer_body
{
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 8px 12px 16px;
background: white;
}
.triage_facility_saved_locations,
.triage_facility_results,
.triage_facility_panel[data_panel="history"]
{
display: grid;
gap: 8px;
}
.triage_facility_location,
.triage_facility_result
{
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 14px;
border: 1.5px solid #e8e0f5;
border-radius: 8px;
background: white;
color: var(--ink);
text-align: left;
overflow-wrap: anywhere;
}
.triage_facility_location > i,
.triage_facility_result > i:first-child
{
color: var(--brand);
flex: none;
}
.triage_facility_current_location
{
color: var(--brand);
}
.triage_facility_results
{
margin-top: 8px;
}
.triage_facility_result.selected
{
border-color: var(--brand);
background: var(--brand_soft);
}
.triage_facility_result_text
{
display: grid;
gap: 2px;
min-width: 0;
flex: 1;
font-size: 0.9em;
}
.triage_facility_result_text > span
{
color: var(--muted);
font-size: 0.89em;
}
.triage_facility_selected_icon
{
visibility: hidden;
color: var(--brand);
}
.triage_facility_result.selected .triage_facility_selected_icon
{
visibility: visible;
}
.triage_facility_distance
{
color: var(--brand) !important;
font-weight: 600;
}
/* These four sit inside .triage_facility_result_text, whose `> span` rule above is (0,1,1) and
out-specifies a bare class. Each is written as a child selector so it actually applies; a
single-class rule here is dead code that reads as though it works. */
/* the registered company name under an operator brand, when it says something the brand does not */
.triage_facility_result_text > .triage_facility_legal
{
font-size: 0.84em;
font-style: italic;
}
/* telephone and facsimile, on the result row and on the selected card */
.triage_facility_contact,
.triage_facility_result_text > .triage_facility_contact
{
display: block;
color: var(--muted);
font-size: 0.84em;
margin-top: 2px;
}
/* the tag and the distance share one wrapping line instead of taking a grid row each, which
keeps a result to about four lines at phone width */
.triage_facility_result_text > .triage_facility_meta
{
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 8px;
margin-top: 3px;
font-size: 1em;
}
/* a service that travels to the patient rather than an address to send one to. The design
system's own muted pill, rather than a hand-rolled one: --line is a border token, and as a
fill behind --muted it does not reach the contrast floor for text this small. */
.triage_facility_result_text .triage_facility_tag
{
width: fit-content;
}
.triage_facility_empty,
.triage_facility_error,
.triage_facility_disclaimer
{
color: var(--muted);
font-size: 0.83rem;
line-height: 1.5;
padding: 14px 4px;
}
.triage_facility_footer
{
flex: none;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
background: white;
border-top: 1px solid #e8e0f5;
}
.triage_facility_footer .btn
{
width: 100%;
min-height: 48px;
}
.triage_facility_error
{
color: var(--danger);
}
.triage_patient_note_body
{
font-size: 0.9rem;
}
.triage_immunization_row
{
border-bottom: 1px solid var(--line);
padding: 11px 12px;
}
.triage_immunization_row:last-child
{
border-bottom: 0;
}
.triage_immunization_name
{
color: var(--ink);
font-size: 0.84rem;
font-weight: 700;
overflow-wrap: anywhere;
}
.triage_immunization_meta,
.triage_immunization_notes
{
color: var(--muted);
font-size: 0.76rem;
line-height: 1.5;
margin-top: 3px;
overflow-wrap: anywhere;
}
@media (max-width: 760px)
{
.triage_health_grid
{
grid-template-columns: minmax(0, 1fr);
}
.triage_health_card:nth-child(n + 3)
{
grid-column: auto;
}
}
/* --- review of systems ------------------------------------------------------------------------- */
.triage_ros_card .triage_card_header
{
flex-wrap: nowrap;
}
.triage_ros_toggle_class
{
align-items: center;
background: var(--brand_soft);
border: 1px solid var(--brand);
border-radius: 50%;
color: var(--brand);
display: inline-flex;
flex: 0 0 36px;
height: 36px;
justify-content: center;
margin-left: auto;
padding: 0;
width: 36px;
}
.triage_ros_toggle_class:focus-visible
{
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.triage_ros_pending
{
color: var(--muted);
font-size: 0.78rem;
line-height: 1.5;
padding: 12px;
}
.triage_ros_details[hidden],
.triage_ros_summary[hidden] { display: none; }
.triage_ros_system
{
border-top: 1px solid var(--line);
}
.triage_ros_details > .triage_ros_system:first-child
{
border-top: 0;
}
.triage_ros_system h3
{
background: var(--page);
color: var(--ink);
font-size: 0.8rem;
font-weight: 750;
margin: 0;
padding: 9px 12px;
}
.triage_ros_item,
.triage_ros_summary_row
{
align-items: flex-start;
display: flex;
gap: 10px;
justify-content: space-between;
padding: 9px 12px;
}
.triage_ros_item + .triage_ros_item,
.triage_ros_summary_row + .triage_ros_summary_row
{
border-top: 1px solid var(--line);
}
.triage_ros_question,
.triage_ros_summary_label
{
color: var(--ink);
flex: 1 1 auto;
font-size: 0.78rem;
line-height: 1.45;
min-width: 0;
overflow-wrap: anywhere;
}
.triage_ros_answer
{
flex: 0 0 auto;
font-weight: 750;
}
.triage_ros_answer_positive { background: var(--brand_soft); color: var(--brand_dark); }
.triage_ros_answer_negative { background: var(--green_soft); color: var(--ink); }
.triage_ros_answer_unanswered { background: var(--gold_soft); color: var(--ink); }
.triage_ros_summary_row
{
flex-wrap: wrap;
}
.triage_ros_summary_label
{
flex: 0 1 45%;
font-weight: 700;
}
.triage_ros_summary_positive,
.triage_ros_summary_clear,
.triage_ros_summary_unanswered
{
flex: 1 1 45%;
font-size: 0.75rem;
line-height: 1.45;
min-width: 0;
overflow-wrap: anywhere;
}
.triage_ros_summary_positive { color: var(--ink); font-weight: 700; }
.triage_ros_summary_clear { font-weight: 700; }
.triage_ros_summary_unanswered { color: var(--ink); font-weight: 700; }
@media (max-width: 400px)
{
.triage_ros_summary_label { flex-basis: 100%; }
.triage_ros_summary_positive,
.triage_ros_summary_clear,
.triage_ros_summary_unanswered { flex-basis: 100%; }
}
.triage_uti_ai_body
{
color: var(--ink);
font-size: 0.9rem;
line-height: 1.5;
padding: 12px;
}
.triage_uti_suggestion_card
{
margin-top: 12px;
}
.triage_uti_dispo_builder
{
background: var(--surface);
border-color: var(--brand_hover);
}
.triage_uti_dispo_builder .triage_card_icon
{
background: var(--brand_soft);
color: var(--brand_dark);
}
.triage_uti_dispo_builder .triage_card_title
{
color: var(--ink);
}
.triage_uti_suggestion_card .triage_card_header
{
padding: 0;
}
.triage_uti_section_toggle,
.triage_uti_section_title
{
align-items: center;
background: transparent;
border: 0;
color: inherit;
display: flex;
flex: 1 1 auto;
gap: 8px;
justify-content: space-between;
min-height: 52px;
min-width: 0;
padding: 10px 4px 10px 12px;
text-align: left;
}
.triage_uti_section_toggle:focus-visible
{
outline: 2px solid var(--brand_dark);
outline-offset: -3px;
}
.triage_uti_section_toggle > .bi
{
color: var(--muted);
flex: 0 0 auto;
}
.triage_uti_section_reviewed
{
align-items: center;
display: inline-flex;
flex: 0 0 auto;
height: 44px;
justify-content: center;
margin-right: 8px;
}
.triage_uti_section_done_button
{
flex: 0 0 auto;
margin-right: 12px;
}
.triage_uti_compact_action
{
align-items: center;
border-radius: 4px;
display: inline-flex;
flex: 0 0 86px;
font-size: 0.75rem;
gap: 4px;
height: 34px;
justify-content: center;
line-height: 1;
min-height: 34px;
padding: 4px 8px;
white-space: nowrap;
width: 86px;
}
.triage_uti_section_circle
{
align-items: center;
border: 2px solid var(--brand);
border-radius: 50%;
display: inline-flex;
height: 28px;
justify-content: center;
width: 28px;
}
.triage_uti_section_reviewed .triage_uti_section_circle
{
background: var(--brand);
color: var(--surface);
}
.triage_uti_section_reviewed .bi
{
font-size: 1.05rem;
line-height: 1;
}
.triage_uti_section_body
{
padding: 5px 6px 10px;
}
.triage_uti_section_body[hidden]
{
display: none;
}
@media (max-width: 420px)
{
.triage_uti_section_toggle .triage_card_title_group
{
flex-wrap: nowrap;
gap: 8px;
}
.triage_uti_section_toggle .triage_card_title
{
font-size: 0.8rem;
}
}
.triage_uti_verdict
{
font-size: 0.86rem;
font-weight: 700;
}
.triage_uti_ai_detail
{
color: var(--muted);
margin: 5px 0;
}
.triage_uti_opinion
{
color: var(--ink);
font-size: 0.95rem;
line-height: 1.55;
margin: 9px 0 12px;
overflow-wrap: anywhere;
}
.triage_uti_evidence
{
background: var(--page);
border: 1px solid var(--line);
border-radius: var(--radius);
margin-top: 10px;
padding: 10px 12px;
}
.triage_uti_evidence strong
{
color: var(--ink);
display: block;
font-size: 0.78rem;
}
.triage_uti_evidence ul
{
margin: 6px 0 0;
padding-left: 18px;
}
.triage_uti_evidence li
{
overflow-wrap: anywhere;
padding: 2px 0;
}
.triage_uti_ai_label
{
color: var(--muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
margin-top: 8px;
text-transform: uppercase;
}
.triage_uti_complexity
{
color: var(--brand_dark);
font-size: 0.78rem;
font-weight: 700;
margin-top: 2px;
}
.triage_uti_evidence_quote
{
color: var(--ink);
display: block;
}
.triage_uti_evidence_question
{
color: var(--muted);
display: block;
font-size: 0.72rem;
margin-top: 1px;
}
.triage_uti_tools
{
margin-left: auto;
}
.triage_uti_tools_button
{
line-height: 1;
}
.triage_uti_tools_menu
{
font-size: 0.82rem;
min-width: 190px;
}
.triage_uti_disposition
{
background: var(--page);
border: 1px solid var(--line);
border-radius: var(--radius);
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 8px;
padding: 10px 12px;
}
.triage_uti_urgency_basis
{
color: var(--muted);
display: block;
font-size: 0.72rem;
margin-top: 4px;
overflow-wrap: anywhere;
}
.triage_uti_disposition span
{
color: var(--muted);
font-size: 0.72rem;
font-weight: 700;
}
.triage_uti_disposition strong
{
color: var(--ink);
font-size: 0.86rem;
}
.triage_uti_recommendation
{
background: var(--brand_soft);
border-radius: var(--radius);
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 11px;
padding: 10px 12px;
}
.triage_uti_recommendation span
{
color: var(--brand_dark);
font-size: 0.72rem;
font-weight: 700;
}
.triage_uti_recommendation strong
{
color: var(--ink);
font-size: 0.86rem;
}
.triage_uti_ai_basis
{
color: var(--muted);
font-size: 0.72rem;
margin-top: 6px;
overflow-wrap: anywhere;
}
.triage_uti_review_actions
{
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 11px;
}
.triage_uti_reviewed
{
color: var(--brand);
font-size: 0.73rem;
font-weight: 700;
margin-top: 9px;
}
.triage_uti_code_section
{
border-top: 1px solid var(--line);
margin-top: 13px;
padding-top: 10px;
}
.triage_uti_medication_empty
{
color: var(--muted);
font-size: 0.875rem;
line-height: 1.5;
margin: 6px 0 12px;
}
.triage_uti_education_row
{
align-items: center;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 0;
display: flex;
gap: 8px;
justify-content: space-between;
margin-top: 5px;
padding: 5px 6px;
}
.triage_uti_education_text
{
display: flex;
flex-direction: column;
font-size: 0.875rem;
min-width: 0;
}
.triage_uti_education_detail
{
color: var(--muted);
font-size: 0.8rem;
overflow-wrap: anywhere;
}
.triage_uti_education_actions
{
align-items: center;
display: flex;
flex-shrink: 0;
gap: 6px;
}
.triage_uti_education_added
{
color: var(--brand_dark);
font-weight: 700;
}
.triage_uti_education_added:disabled
{
color: var(--brand_dark);
cursor: default;
opacity: 1;
}
.triage_uti_item_added
{
color: var(--brand_dark);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
}
.triage_uti_item_added:disabled
{
color: var(--brand_dark);
cursor: default;
opacity: 1;
}
.triage_uti_suggest_more_button,
.triage_uti_more_education_button
{
background: transparent;
border: 0;
color: var(--brand_dark);
display: block;
font-size: 0.82rem;
font-weight: 700;
margin: 5px auto 0;
min-height: 44px;
padding: 7px 12px;
}
@media (max-width: 420px)
{
.triage_uti_education_row
{
align-items: center;
flex-direction: row;
}
.triage_uti_education_actions
{
justify-content: flex-end;
}
}
.triage_uti_code_heading
{
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 5px;
}
.triage_uti_code_heading span,
.triage_uti_code_empty
{
color: var(--muted);
font-size: 0.78rem;
font-weight: 400;
}
.triage_uti_code
{
border-top: 1px solid var(--line);
padding: 6px 0;
}
.triage_uti_code_main
{
align-items: start;
display: grid;
gap: 8px;
grid-template-columns: minmax(0, 1fr) auto;
}
.triage_uti_add_code_button
{
position: relative;
}
.triage_uti_add_code_button::after
{
content: '';
inset: -6px;
position: absolute;
}
.triage_uti_code_text
{
min-width: 0;
overflow-wrap: anywhere;
}
.triage_uti_code_id
{
color: var(--brand);
font-weight: 700;
}
.triage_uti_code small
{
color: var(--muted);
display: block;
margin-top: 3px;
overflow-wrap: anywhere;
}
.triage_uti_inline_error
{
color: var(--danger);
font-size: 0.78rem;
margin-bottom: 8px;
}
.triage_async_chart_body
{
color: var(--ink);
font-size: 0.8rem;
line-height: 1.5;
padding: 12px;
}
.triage_async_chart_label
{
color: var(--muted);
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 6px;
}
.triage_async_chart_suggestion
{
align-items: center;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
display: flex;
gap: 8px;
justify-content: space-between;
margin-bottom: 12px;
padding: 5px 6px;
}
.triage_async_chart_suggestion_text
{
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.triage_async_chart_suggestion_text strong
{
font-size: 0.875rem;
}
.triage_async_chart_suggestion_text span
{
color: var(--muted);
font-size: 0.8rem;
}
.triage_async_chart_body .triage_async_chart_suggestion .triage_uti_compact_action
{
flex: 0 0 86px;
min-height: 34px;
}
.triage_async_chart_draft_prompt p
{
color: var(--muted);
margin: 4px 0 0;
}
.triage_async_chart_ready
{
align-items: center;
color: var(--green);
display: flex;
font-weight: 700;
gap: 7px;
margin-bottom: 10px;
}
.triage_async_chart_draft_prompt
{
border-top: 1px solid var(--line);
margin: 10px 0;
padding-top: 12px;
}
.triage_async_chart_draft_prompt strong
{
font-size: 0.84rem;
}
.triage_async_chart_actions
{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.triage_async_chart_body .btn
{
min-height: 44px;
}
.triage_async_chart_notice
{
color: var(--muted);
margin: 8px 0 12px;
}
.triage_async_chart_error
{
font-size: 0.78rem;
margin-top: 10px;
}
/* --- the label / value row ---------------------------------------------------------------------- */
.triage_group_label
{
align-items: center;
background: #f6f8f8;
border-bottom: 1px solid var(--line);
color: var(--ink);
display: flex;
flex-wrap: wrap;
font-size: 0.68rem;
font-weight: 700;
gap: 4px 8px;
justify-content: space-between;
letter-spacing: 0.08em;
padding: 7px 12px;
text-transform: uppercase;
}
.triage_group_label_count
{
color: var(--muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
}
.triage_answer_row
{
border-bottom: 1px solid #f0f3f3;
border-left: 3px solid transparent;
display: grid;
gap: 4px 14px;
grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
padding: 9px 12px;
}
.triage_card > .triage_answer_row:last-child,
.triage_all_pane > .triage_answer_row:last-child
{
border-bottom: 0;
}
/* .triage_card is overflow:hidden, so an unbroken run of patient free text or a long chip label would be
clipped at the card edge with no scrollbar and no indication anything was cut. */
.triage_answer_q
{
color: var(--muted);
font-size: 0.73rem;
line-height: 1.45;
min-width: 0;
overflow-wrap: anywhere;
}
.triage_answer_a
{
color: var(--ink);
font-size: 0.78rem;
font-weight: 600;
line-height: 1.45;
min-width: 0; overflow-wrap: anywhere;
}
.triage_answer_a_row
{
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* this carries the exclusions the tab is built around — "Denied: …", "Not answered: …", the allergy
and pharmacy warnings — so it has to be readable. #8d979b measured 3.0:1 on white. */
.triage_answer_note
{
color: var(--muted);
font-size: 0.7rem;
line-height: 1.4;
margin-top: 3px;
}
.triage_answer_aside
{
color: var(--muted);
font-weight: 500;
}
/* an answer that states something, as against one that rules something out */
.triage_answer_row_notable
{
background: #fcfaff;
border-left-color: var(--brand);
}
.triage_answer_row_notable > .triage_answer_a
{
font-weight: 800;
}
/* a positive urgent symptom — the one answer on this tab that outranks everything above it */
.triage_answer_row_urgent
{
background: var(--danger_soft);
border-left-color: var(--danger);
}
.triage_answer_row_urgent > .triage_answer_a
{
color: #a11724;
font-weight: 800;
}
/* an answer the latest amendment moved, marked in the all-answers view as well as in the difference */
.triage_answer_row_was_changed
{
border-left-color: var(--blue);
}
.triage_answer_followup
{
overflow-wrap: anywhere;
background: #f7f9fa;
border-left: 2px solid #d6dfe2;
border-radius: 0 4px 4px 0;
color: #3d4a4f;
font-size: 0.73rem;
font-weight: 500;
line-height: 1.5;
margin-top: 4px;
padding: 6px 9px;
}
.triage_answer_chips
{
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.triage_answer_chip
{
overflow-wrap: anywhere;
background: #f1f4f5;
border: 1px solid #e2e8ea;
border-radius: var(--radius_pill);
font-size: 0.72rem;
font-weight: 600;
padding: 2px 9px;
}
/* THE THREE STATES OF AN ABSENCE, which must never look the same: an attestation of having none, a
section nobody filled in, and nothing to record are three different clinical statements, and the
middle one is the only one a clinician may have to act on.
Each is told apart by more than colour — a check icon, a warning triangle, no icon — because colour
alone fails WCAG 1.4.1. The colours below are NOT the --green and --gold tokens: those are fill
values and measure 3.5:1 and 4.1:1 as 12px text on white, under the 4.5:1 AA floor. These measure
5.0:1 and 5.2:1. */
.triage_absence
{
align-items: center;
display: inline-flex;
font-weight: 700;
gap: 6px;
}
.triage_absence_attested { color: #15803d; }
.triage_absence_missing { color: #9a5f00; }
.triage_absence_neutral { color: var(--muted); font-weight: 600; }
/* 32px minimum on every tappable control here, matching .today_secondary_button. At 4px/3px padding these
rendered about 22px, under the 24px WCAG 2.5.8 floor, on a surface used one-handed on a phone. */
.triage_more_button
{
background: white;
border: 1px solid #cbd4d7;
border-radius: 4px;
color: var(--brand_dark);
font-size: 0.71rem;
font-weight: 700;
margin-top: 5px;
min-height: 32px;
padding: 4px 11px;
}
.triage_row_action
{
background: white;
border: 1px solid #cbd4d7;
border-radius: 4px;
color: #49575c;
font-size: 0.71rem;
font-weight: 700;
min-height: 32px;
padding: 4px 11px;
}
.triage_row_action:hover
{
background: #f7f9f9;
border-color: #b9c4c7;
}
/* --danger is a fill value and measures 3.8:1 as small bold text on white; this is the same ink the
urgent and removed states already use, at 7.9:1. */
.triage_row_action_danger
{
color: #a11724;
}
/* empty-state copy: "No vital signs recorded", "No provider assigned". #9aa5a9 measured 2.5:1 on white. */
.triage_empty
{
color: var(--muted);
font-size: 0.74rem;
padding: 14px 12px;
text-align: center;
}
.triage_empty .triage_more_button
{
margin-top: 7px;
}
/* --- intake fold control and amendment styling -------------------------------------------------- */
.triage_intake_card .triage_card_header
{
display: grid;
grid-template-columns: minmax(0, 1fr) 36px;
}
.triage_intake_toggle_class
{
align-items: center;
background: var(--brand_soft);
border: 1px solid var(--brand);
border-radius: var(--radius_pill);
color: var(--brand);
display: inline-flex;
grid-column: 2;
height: 36px;
justify-content: center;
padding: 0;
width: 36px;
}
.triage_intake_toggle_class:focus-visible
{
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.triage_intake_toggle_class[hidden]
{
display: none;
}
.triage_intake_expanded[hidden],
.triage_intake_condensed[hidden]
{
display: none;
}
.triage_intake_options
{
display: grid;
gap: 5px;
}
.triage_intake_option
{
align-items: flex-start;
display: flex;
gap: 8px;
justify-content: space-between;
line-height: 1.4;
}
.triage_intake_option_status
{
flex: 0 0 auto;
font-weight: 700;
}
.triage_intake_option_positive .triage_intake_option_status
{
color: var(--brand_dark);
}
.triage_intake_option_negative .triage_intake_option_status
{
color: var(--muted);
}
.triage_intake_option_negative
{
font-weight: 500;
}
.triage_diff_bar
{
align-items: flex-start;
background: var(--blue_soft);
border-bottom: 1px solid #cddcfb;
color: #14387d;
display: flex;
font-size: 0.73rem;
gap: 8px;
line-height: 1.5;
padding: 8px 12px;
}
.triage_answer_row_changed
{
background: var(--blue_soft);
border-left-color: var(--blue);
}
.triage_change_pair
{
display: grid;
gap: 3px;
min-width: 0;
}
/* the superseded value the Changes view exists to show, on the blue_soft row tint. #6b7280 measures
4.4:1 there, and the strike-through costs legibility on top of that. */
.triage_change_was
{
color: #4b5563;
font-size: 0.73rem;
font-weight: 500;
text-decoration: line-through;
}
.triage_change_now
{
color: #14387d;
font-size: 0.78rem;
font-weight: 800;
}
.triage_change_tag
{
background: #dbe7ff;
border-radius: var(--radius_pill);
color: #14387d;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.06em;
margin-left: 6px;
padding: 1px 7px;
text-transform: uppercase;
vertical-align: 1px;
}
.triage_change_tag_added { background: var(--green_soft); color: #0f6b3c; }
.triage_change_tag_removed { background: var(--danger_soft); color: #a11724; }
/* --- the check-in history timeline --------------------------------------------------------------- */
.triage_timeline_row
{
align-items: flex-start;
border-bottom: 1px solid #f0f3f3;
display: flex;
gap: 10px;
padding: 9px 12px;
}
.triage_timeline_row:last-child
{
border-bottom: 0;
}
.triage_timeline_dot
{
background: #cbd4d7;
border-radius: 50%;
flex: 0 0 auto;
height: 8px;
margin-top: 5px;
width: 8px;
}
.triage_timeline_row_current .triage_timeline_dot
{
background: var(--brand);
}
.triage_timeline_what
{
font-size: 0.76rem;
font-weight: 700;
}
.triage_timeline_when
{
color: var(--muted);
font-size: 0.71rem;
margin-top: 1px;
}
.triage_history_changes > summary
{
align-items: center;
color: var(--brand_dark);
cursor: pointer;
display: flex;
font-size: 0.76rem;
font-weight: 700;
gap: 8px;
justify-content: space-between;
min-height: 40px;
padding: 9px 12px;
}
.triage_history_changes
{
border-top: 1px solid var(--line);
}
.triage_history_changes > summary:focus-visible
{
outline: 2px solid var(--brand);
outline-offset: -2px;
}
.triage_history_changes[open] > summary .bi
{
transform: rotate(180deg);
}
/* --- visit media --------------------------------------------------------------------------------- */
.triage_media_grid
{
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
}
.triage_media_item
{
align-items: center;
background: white;
border: 1px solid var(--line);
border-radius: 4px;
display: flex;
gap: 9px;
padding: 7px 9px;
text-align: left;
}
.triage_media_item:hover,
.triage_media_item:focus-visible
{
border-color: var(--brand);
box-shadow: var(--shadow_xs);
}
.triage_media_preview
{
align-items: center;
background: #eef2f3;
border-radius: 4px;
color: #647176;
display: flex;
flex: 0 0 auto;
height: 40px;
justify-content: center;
overflow: hidden;
width: 40px;
}
.triage_media_preview img
{
height: 100%;
object-fit: cover;
width: 100%;
}
.triage_media_file_icon
{
font-size: 1.1rem;
line-height: 1;
}
.triage_media_copy
{
display: grid;
min-width: 0;
}
.triage_media_name
{
font-size: 0.74rem;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.triage_media_type
{
color: var(--muted);
font-size: 0.68rem;
}
/* --- vital signs, as fields rather than a run-on sentence ---------------------------------------- */
.triage_vitals_set
{
border-bottom: 1px solid #f0f3f3;
padding: 9px 12px;
}
.triage_vitals_set:last-child
{
border-bottom: 0;
}
.triage_vitals_when
{
align-items: center;
display: flex;
gap: 8px;
justify-content: space-between;
margin-bottom: 7px;
}
.triage_vitals_when span
{
color: var(--muted);
font-size: 0.71rem;
font-weight: 600;
}
.triage_vitals_grid
{
background: #e4eaeb;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
gap: 1px;
overflow: hidden;
}
.triage_vital
{
background: #fbfcfc;
flex: 1 1 86px;
min-width: 0;
padding: 6px 9px;
}
.triage_vital_label
{
color: var(--muted);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.triage_vital_value
{
font-size: 0.8rem;
font-weight: 700;
margin-top: 2px;
}
/* An out-of-range reading is marked by colour AND by a word, because colour alone fails WCAG 1.4.1 and
a red number is invisible to a reader who cannot see red. The word comes from the markup, so a reader
with styles off still gets it. */
.triage_vital_value_abnormal
{
color: #a11724;
}
.triage_vital_flag
{
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.06em;
margin-left: 3px;
text-transform: uppercase;
}
/* --- providers and the card mark ----------------------------------------------------------------- */
.triage_provider_row
{
align-items: center;
border-bottom: 1px solid #f0f3f3;
display: flex;
gap: 10px;
padding: 9px 12px;
}
.triage_provider_row:last-child
{
border-bottom: 0;
}
.triage_provider_avatar
{
align-items: center;
background: var(--brand_soft);
border-radius: 50%;
color: var(--brand);
display: flex;
flex: 0 0 auto;
font-size: 0.74rem;
font-weight: 800;
height: 32px;
justify-content: center;
width: 32px;
}
.triage_provider_name
{
font-size: 0.78rem;
font-weight: 700;
}
.triage_provider_role
{
color: var(--muted);
font-size: 0.7rem;
}
.triage_card_mark
{
align-items: center;
background: #1b4d5c;
border-radius: 4px;
color: white;
display: inline-flex;
flex: 0 0 auto;
font-size: 0.64rem;
font-weight: 800;
height: 26px;
justify-content: center;
letter-spacing: 0.04em;
min-width: 42px;
padding: 0 6px;
text-transform: uppercase;
}
/* the drawer is 800px at most, and a phone gets the whole viewport — at that width a 190px label
column leaves the answer nowhere to go, so the pair stacks */
/* THE LABEL AND ITS VALUE STAY SIDE BY SIDE ON A PHONE — the column narrows, it does not collapse. Stacking
them doubles the height of every row, and this tab is forty-odd rows long: a clinician ends up scrolling
past the visit fields to reach the intake. Owner decision 2026-10-28. The label wraps within its column,
which is why .triage_answer_q carries overflow-wrap and the row aligns to the top rather than centring. */
@media (max-width: 620px)
{
.triage_answer_row
{
align-items: start;
column-gap: 10px;
grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
padding: 9px 11px;
}
.triage_answer_followup
{
grid-column: 2;
}
/* Intake options need the full phone width. Other visit rows keep their compact two-column layout. */
.triage_intake_card .triage_answer_row
{
grid-template-columns: minmax(0, 1fr);
gap: 7px;
padding: 12px 14px;
}
.triage_history_changes .triage_answer_row
{
grid-template-columns: minmax(0, 1fr);
gap: 7px;
padding: 12px 14px;
}
.triage_intake_card .triage_answer_q
{
color: var(--ink);
font-size: 0.8rem;
font-weight: 700;
}
.triage_intake_card .triage_answer_a
{
font-size: 0.8rem;
font-weight: 500;
line-height: 1.5;
}
.triage_intake_card .triage_intake_options
{
gap: 8px;
}
}
/* at the narrowest phone widths the label gives up a little more, so a long answer is not squeezed into a
two-word column */
@media (max-width: 400px)
{
.triage_answer_row
{
column-gap: 8px;
grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
}
.triage_intake_card .triage_answer_row
{
grid-template-columns: minmax(0, 1fr);
}
.triage_history_changes .triage_answer_row
{
grid-template-columns: minmax(0, 1fr);
}
}
/* TODAY TAB VISIT DETAILS */
.today_tab_content
{
display: grid;
gap: 10px;
font-size: 0.76rem;
}
.today_section_card
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: 4px;
overflow: hidden;
}
.today_section_title_group
{
align-items: center;
display: flex;
gap: 10px;
min-width: 0;
}
.today_section_icon
{
align-items: center;
background: #eaf3f4;
border-radius: 4px;
color: #1b4d5c;
display: flex;
flex: 0 0 auto;
height: 28px;
justify-content: center;
width: 28px;
}
.today_section_title
{
color: #1b4d5c;
font-size: 0.82rem;
font-weight: 800;
}
.today_secondary_button
{
background: white;
border: 1px solid #cbd4d7;
border-radius: 4px;
color: #49575c;
font-size: 0.75rem;
font-weight: 700;
min-height: 30px;
padding: 5px 11px;
}
.today_secondary_button:hover
{
background: #f7f9f9;
border-color: #b9c4c7;
}
.today_price_promo_badge
{
background: var(--brand_soft);
border-radius: var(--radius_pill);
color: var(--brand);
font-size: 0.72rem;
font-weight: 700;
padding: 1px 8px;
}
.visit_type_conversion_intro
{
background: white;
border: 1px solid #e5e0ee;
border-radius: 8px;
color: #536166;
font-size: 0.9rem;
line-height: 1.55;
margin-bottom: 12px;
padding: 13px 14px;
}
.visit_type_conversion_options
{
display: grid;
gap: 10px;
}
.visit_type_conversion_option
{
align-items: center;
background: white;
border: 1px solid #e5e0ee;
border-radius: 8px;
color: #172033;
display: flex;
gap: 12px;
padding: 13px 14px;
text-align: left;
width: 100%;
}
.visit_type_conversion_option.selected
{
background: var(--brand_soft);
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 700;
}
.visit_type_conversion_icon
{
align-items: center;
background: #f3f5f7;
border-radius: 8px;
display: flex;
flex: 0 0 38px;
height: 38px;
justify-content: center;
}
.visit_type_conversion_option.selected .visit_type_conversion_icon
{
background: white;
}
.visit_type_conversion_copy
{
min-width: 0;
}
.visit_type_conversion_copy strong,
.visit_type_conversion_copy span
{
display: block;
}
.visit_type_conversion_copy span
{
color: #697386;
font-size: 0.82rem;
font-weight: 500;
line-height: 1.35;
}
.today_field_value
{
font-size: 0.76rem;
font-weight: 650;
overflow-wrap: anywhere;
}
.today_field_empty,
.today_supporting_text
{
color: #6b777c;
font-size: 0.72rem;
font-weight: 500;
}
.today_edit_form
{
padding: 14px;
}
.today_edit_form_title
{
color: #1b4d5c;
font-size: 0.82rem;
font-weight: 800;
margin-bottom: 12px;
}
.today_form_grid
{
display: grid;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.today_form_field
{
min-width: 0;
}
.today_form_field_wide
{
grid-column: 1 / -1;
}
.today_form_field label
{
color: #536166;
display: block;
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 5px;
}
.today_form_actions
{
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 14px;
}
.today_empty_state
{
align-items: center;
background: #fafcfc;
border: 1px dashed #ccd5d7;
border-radius: 4px;
color: #6b777c;
display: flex;
font-size: 0.76rem;
gap: 10px;
justify-content: space-between;
min-height: 42px;
padding: 8px 10px;
}
.today_tab_bottom_space
{
height: 80px;
}
@media (max-width: 680px)
{
}
@media (max-width: 420px)
{
.today_tab_content
{
gap: 10px;
/*padding: 10px 8px 24px;*/
}
.today_section_card
{
border-radius: 4px;
}
.today_section_body,
.today_section_header,
.today_edit_form
{
padding-left: 11px;
padding-right: 11px;
}
.today_form_grid
{
grid-template-columns: 1fr;
}
.today_form_field_wide
{
grid-column: auto;
}
.today_form_actions .btn
{
flex: 1;
}
}
/* Provider e-prescribing recent medications and grouped drug search. */
.weno_prescribe_header_back
{
width: 48px;
padding-right: 2px !important;
}
.weno_prescribe_header_title
{
padding-left: 2px !important;
text-align: left;
}
.weno_prescribe_header_step
{
width: 92px;
padding-right: 10px !important;
text-align: right;
}
.weno_drug_search_clear:not(.hide_me)
{
display: flex;
align-items: center;
justify-content: center;
}
.weno_drug_choice_match_badge
{
margin-left: 6px;
vertical-align: middle;
}
.weno_recent_medications_container,
.weno_grouped_search_container
{
padding: 18px 16px 28px;
}
.weno_recent_loading
{
padding: 42px 16px;
color: var(--muted);
font-size: 0.8rem;
text-align: center;
}
.weno_recent_heading_row
{
margin-bottom: 12px;
}
.weno_favorite_medications_section
{
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eceef1;
}
.weno_favorite_medications_section .weno_recent_heading_row
{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.weno_favorite_count
{
min-width: 26px;
padding: 3px 8px;
border-radius: 999px;
background: #fff8df;
color: #9a6b00;
font-size: 0.63rem;
font-weight: 800;
text-align: center;
}
.weno_recent_heading,
.weno_search_results_heading,
.weno_matching_sig_heading
{
color: var(--ink);
font-size: 0.82rem;
font-weight: 800;
}
.weno_recent_supporting
{
margin-top: 3px;
color: var(--muted);
font-size: 0.72rem;
}
.weno_recent_medication_list,
.weno_drug_group_list,
.weno_matching_sig_list
{
display: grid;
gap: 8px;
}
.weno_recent_medication_card,
.weno_favorite_medication_card
{
width: 100%;
min-height: 86px;
padding: 0;
display: grid;
grid-template-columns: 43px minmax(0, 1fr) 28px;
align-items: center;
gap: 11px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 12px;
background: white;
color: inherit;
cursor: pointer;
text-align: left;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.weno_recent_medication_card:hover,
.weno_recent_medication_card:focus-visible,
.weno_favorite_medication_card:hover,
.weno_favorite_medication_card:focus-visible
{
border-color: #c8afe9;
outline: none;
box-shadow: 0 4px 14px rgba(74, 45, 113, 0.11);
}
.weno_pending_batch_button_container
{
width: 100%;
margin: 15px 0;
padding: 0;
background: white;
}
.weno_pending_batch_button_container button
{
width: 100%;
min-height: 48px;
border: 1px solid var(--brand);
border-radius: 4px;
background: white;
color: var(--brand);
font-size: 0.9rem;
font-weight: 700;
}
.weno_pending_batch_button_container button:hover,
.weno_pending_batch_button_container button:focus-visible
{
border-color: var(--brand_dark);
background: var(--brand_soft);
color: var(--brand_dark);
}
.weno_pending_batch_messages
{
padding: 16px;
background: #f8f8f8;
}
.weno_review_tabs
{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
background: white;
border-bottom: 1px solid #eee;
}
.weno_review_tab
{
min-height: 44px;
padding: 10px;
border: 0;
border-radius: 0;
background: transparent;
color: #7c828c;
cursor: pointer;
font-size: 0.8rem;
font-weight: 700;
}
.weno_review_tab + .weno_review_tab
{
border-left: 1px solid #eee;
}
.weno_review_tab.selected
{
color: var(--brand_dark);
font-weight: 800;
box-shadow: inset 0 -2px var(--brand);
}
.weno_review_empty_state
{
padding: 34px 16px;
text-align: center;
color: #888;
font-size: 0.85rem;
}
.weno_select_mode_toggle_btn[aria-pressed="true"]
{
border-color: var(--brand);
background: var(--brand_soft);
color: var(--brand_dark);
}
.weno_recent_medication_card.selected
{
background: var(--brand_soft);
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 700;
}
.weno_select_toolbar:not(.hide_me)
{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.weno_bulk_delete_btn
{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 44px;
border: 1.5px solid #cfd3da;
border-radius: 999px;
color: var(--danger);
font-size: 1.15rem;
}
.weno_bulk_delete_btn:disabled
{
color: #b8bcc4;
cursor: not-allowed;
}
.weno_select_toolbar_count
{
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 16px;
border-radius: 999px;
background: var(--brand_soft);
color: var(--brand_dark);
font-size: 0.82rem;
font-weight: 700;
}
.weno_select_confirm
{
width: 100%;
}
.weno_select_confirm span
{
display: block;
margin-bottom: 10px;
font-size: 0.8rem;
color: #565d68;
}
.weno_danger_button
{
border-color: var(--danger) !important;
background: var(--danger) !important;
}
.weno_pending_batch_list
{
display: grid;
gap: 8px;
}
.weno_pending_batch_list .weno_recent_medication_card
{
grid-template-columns: 43px minmax(0, 1fr);
}
/* DISCARDING ONE DRAFT PRESCRIPTION. The swipe gesture, its container and the red action panel are the
shared voicemail_swipe_* components, reused here rather than reimplemented — these rules only give the
wrap the card's own rounding so the revealed action is clipped to it, and add the pointer-device trash
control. The trash is a third grid column, declared only where a pointer can reach it; on touch the
swipe is the affordance and the column is never created. */
.weno_rx_swipe_wrap
{
/* matches .weno_recent_medication_card, so the revealed action is clipped to the card's own corners */
border-radius: 12px;
}
/* the red fill lives on .voicemail_swipe_delete, not on the shared .voicemail_swipe_button — without this
the Discard action is white-on-transparent, which is to say invisible */
.weno_rx_swipe_delete
{
background: var(--danger);
}
.weno_rx_delete_btn
{
display: none;
padding: 0;
border: 0;
background: none;
color: var(--muted);
font-size: 1rem;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine)
{
.weno_pending_batch_list .weno_recent_medication_card
{
grid-template-columns: 43px minmax(0, 1fr) 44px;
}
.weno_rx_delete_btn
{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
min-width: 34px;
margin-right: 5px;
border-radius: var(--radius_pill);
}
.weno_rx_delete_btn:hover
{
background: var(--brand_soft);
color: var(--danger);
}
/* the fill alone is nowhere near a visible focus indicator on white, so keep the brand ring */
.weno_rx_delete_btn:focus-visible
{
background: var(--brand_soft);
color: var(--danger);
outline: 2px solid var(--brand);
outline-offset: 1px;
}
/* in multiple-selection mode every tap toggles selection, so the per-card control would be a second,
conflicting meaning for the same card — take it out and give its track back */
.weno_select_mode .weno_pending_batch_list .weno_recent_medication_card
{
grid-template-columns: 43px minmax(0, 1fr);
}
.weno_select_mode .weno_rx_delete_btn
{
display: none;
}
}
/* the same reasoning for the swipe: with no action panel to measure, the shared gesture handler stops
before it starts, so select mode disables the swipe without needing to know about it */
.weno_select_mode .weno_rx_swipe_wrap .voicemail_swipe_actions
{
display: none;
}
.weno_pending_batch_item.working
{
border-color: #c8afe9;
background: #fbf9fe;
}
.weno_pending_batch_item
{
/* it was a button until the swipe needed a plain surface; a div long-press-selects and raises the iOS
callout menu, neither of which a button did */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.weno_pending_batch_item.sent
{
border-color: #bbf7d0;
opacity: 0.7;
/* a sent card used to be a disabled button; it is a div now, so inertness has to be stated. This also
takes it out of the swipe handler's reach, which reads the surface from the touch target. */
pointer-events: none;
}
.weno_pending_batch_status
{
margin-top: 6px;
padding: 4px 7px;
display: inline-block;
border-radius: 999px;
font-size: 0.58rem;
font-weight: 800;
white-space: nowrap;
}
.weno_pending_batch_status.pending
{
background: #fef3c7;
color: #92400e;
}
.weno_pending_batch_status.error
{
background: #fee2e2;
color: #991b1b;
}
.weno_pending_batch_status.working
{
background: var(--brand_soft);
color: var(--brand_dark);
}
.weno_pending_batch_status.sent
{
background: #d1fae5;
color: #065f46;
}
.weno_pending_batch_input
{
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
border: 0;
background: white;
box-shadow: none;
}
.weno_recent_medication_icon
{
width: 43px;
height: 100%;
min-height: 86px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px 0 0 11px;
background: var(--brand_soft);
color: var(--brand_dark);
font-size: 1.1rem;
}
.weno_favorite_medication_icon
{
width: 43px;
height: 100%;
min-height: 86px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px 0 0 11px;
background: #fff8df;
color: #d49a00;
font-size: 1.05rem;
}
.weno_recent_medication_copy
{
min-width: 0;
padding: 12px 0;
}
.weno_recent_medication_name,
.weno_recent_medication_sig,
.weno_recent_medication_meta
{
display: block;
}
.weno_recent_medication_name
{
overflow: hidden;
color: var(--ink);
font-size: 0.84rem;
font-weight: 750;
line-height: 1.3;
text-overflow: ellipsis;
}
.weno_recent_medication_sig
{
margin-top: 4px;
overflow: hidden;
color: #4b5563;
font-size: 0.72rem;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.weno_recent_medication_meta
{
margin-top: 6px;
color: #9ca3af;
font-size: 0.64rem;
font-weight: 600;
}
.weno_recent_medication_chevron
{
color: #b0b5bf;
font-size: 0.9rem;
}
.weno_recent_safety_note
{
margin: 14px 6px 0;
display: flex;
align-items: flex-start;
gap: 7px;
color: #7b818b;
font-size: 0.66rem;
line-height: 1.45;
}
.weno_recent_safety_note i
{
flex: 0 0 auto;
margin-top: 1px;
color: var(--brand);
}
.weno_recent_empty_state
{
padding: 48px 24px 30px;
text-align: center;
}
.weno_recent_empty_icon
{
width: 58px;
height: 58px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--brand_soft);
color: var(--brand);
font-size: 1.35rem;
}
.weno_recent_empty_title
{
color: var(--ink);
font-size: 0.9rem;
font-weight: 800;
}
.weno_recent_empty_text
{
max-width: 280px;
margin: 6px auto 0;
color: var(--muted);
font-size: 0.74rem;
line-height: 1.5;
}
.weno_search_status
{
margin-bottom: 12px;
color: var(--muted);
font-size: 0.72rem;
}
.weno_search_status strong
{
color: var(--ink);
}
.weno_matching_sig_section
{
margin-bottom: 20px;
}
.weno_matching_sig_heading_row
{
margin-bottom: 9px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.weno_matching_sig_count
{
color: #9ca3af;
font-size: 0.64rem;
font-weight: 650;
}
.weno_matching_sig_card
{
width: 100%;
min-height: 76px;
padding: 11px 10px 11px 13px;
display: grid;
grid-template-columns: minmax(0, 1fr) 24px;
align-items: center;
gap: 8px;
border: 1px solid #dac9ee;
border-left: 3px solid var(--brand);
border-radius: 10px;
background: #fdfbff;
color: inherit;
cursor: pointer;
text-align: left;
}
.weno_matching_sig_card:hover,
.weno_matching_sig_card:focus-visible
{
border-color: var(--brand);
outline: none;
box-shadow: 0 3px 12px rgba(74, 45, 113, 0.1);
}
.weno_matching_sig_drug,
.weno_matching_sig_text,
.weno_matching_sig_meta
{
display: block;
}
.weno_matching_sig_drug
{
color: var(--brand_dark);
font-size: 0.74rem;
font-weight: 750;
}
.weno_matching_sig_text
{
margin-top: 4px;
color: #3f3a47;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.35;
}
.weno_matching_sig_meta
{
margin-top: 5px;
color: #9ca3af;
font-size: 0.62rem;
font-weight: 600;
}
.weno_matching_sig_card > i
{
color: #9b8bab;
}
.weno_search_results_heading
{
margin-bottom: 9px;
}
.weno_drug_group
{
overflow: hidden;
border: 1px solid var(--line);
border-radius: 12px;
background: white;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.weno_drug_group.expanded
{
border-color: #c8afe9;
box-shadow: 0 4px 14px rgba(74, 45, 113, 0.09);
}
.weno_drug_group_button
{
width: 100%;
min-height: 66px;
padding: 12px 12px 12px 15px;
display: grid;
grid-template-columns: minmax(0, 1fr) 28px;
align-items: center;
gap: 9px;
border: 0;
background: white;
color: inherit;
cursor: pointer;
text-align: left;
}
.weno_drug_group_button:hover,
.weno_drug_group_button:focus-visible,
.weno_drug_group.expanded .weno_drug_group_button
{
outline: none;
background: #fdfbff;
}
.weno_drug_group_name,
.weno_drug_group_count,
.weno_drug_choice_name,
.weno_drug_choice_meta
{
display: block;
}
.weno_drug_group_name
{
color: var(--ink);
font-size: 0.87rem;
font-weight: 750;
}
.weno_drug_group_count
{
margin-top: 4px;
color: var(--muted);
font-size: 0.68rem;
}
.weno_drug_group_chevron
{
color: #8b919b;
transition: transform 0.16s ease;
}
.weno_drug_group.expanded .weno_drug_group_chevron
{
transform: rotate(180deg);
}
.weno_drug_choice_list
{
border-top: 1px solid #eadff7;
background: #fbf9fe;
}
.weno_drug_choice_button
{
width: 100%;
min-height: 56px;
padding: 10px 12px 10px 20px;
display: grid;
grid-template-columns: minmax(0, 1fr) 22px;
align-items: center;
gap: 8px;
border: 0;
border-bottom: 1px solid #eee8f5;
background: transparent;
color: inherit;
cursor: pointer;
text-align: left;
}
.weno_drug_choice_button:last-child
{
border-bottom: 0;
}
.weno_drug_choice_button:hover,
.weno_drug_choice_button:focus-visible
{
outline: none;
background: var(--brand_soft);
}
.weno_drug_choice_name
{
color: #383244;
font-size: 0.76rem;
font-weight: 650;
line-height: 1.35;
}
.weno_drug_choice_meta
{
margin-top: 3px;
color: var(--muted);
font-size: 0.64rem;
}
.weno_drug_choice_button > i
{
color: #a2a7b0;
}
.weno_no_search_results
{
padding: 34px 14px;
color: var(--muted);
font-size: 0.78rem;
text-align: center;
}
/* Provider e-prescribing guided SIG, prescription details, and review workflow. */
.weno_selected_medication_strip,
.weno_patient_context_strip,
.weno_review_patient_card
{
padding: 12px 16px;
display: flex;
align-items: center;
gap: 11px;
border-bottom: 1px solid var(--line);
background: white;
}
.weno_selected_medication_icon,
.weno_patient_avatar,
.weno_review_pharmacy_icon,
.weno_review_diagnosis_icon
{
width: 38px;
height: 38px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--brand_soft);
color: var(--brand_dark);
font-size: 0.72rem;
font-weight: 850;
}
.weno_patient_avatar
{
border-radius: 50%;
}
.weno_selected_medication_copy
{
min-width: 0;
flex: 1;
}
.weno_selected_medication_copy strong,
.weno_selected_medication_copy span,
.weno_patient_context_strip strong,
.weno_patient_context_strip small
{
display: block;
}
.weno_selected_medication_copy strong,
.weno_patient_context_strip strong
{
color: var(--ink);
font-size: 0.79rem;
line-height: 1.35;
}
.weno_selected_medication_copy span,
.weno_patient_context_strip small
{
margin-top: 2px;
color: var(--muted);
font-size: 0.66rem;
}
.weno_workflow_text_button
{
padding: 5px 0;
border: 0;
background: transparent;
color: var(--brand_dark);
cursor: pointer;
font-size: 0.7rem;
font-weight: 750;
white-space: nowrap;
}
.weno_rx_details_content,
.weno_review_content
{
padding: 15px 16px 22px;
}
.weno_sig_builder_content
{
padding: 8px 10px 12px;
}
.weno_sig_mode_tabs
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-bottom: 1px solid #dfe1e5;
background: #eef0f3;
}
.weno_sig_mode_tab
{
min-height: 45px;
padding: 11px 10px;
border: 0;
border-radius: 0;
background: transparent;
color: #7c828c;
cursor: pointer;
font-size: 0.76rem;
font-weight: 700;
}
.weno_sig_mode_tab + .weno_sig_mode_tab
{
border-left: 1px solid #dfe1e5;
}
.weno_sig_mode_tab.selected
{
background: white;
color: var(--brand_dark);
font-weight: 800;
box-shadow: inset 0 -2px #d6c5ea;
}
.weno_sig_progress_grid
{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
}
.weno_sig_progress_button
{
min-height: 50px;
padding: 7px 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
overflow: hidden;
border: 1px solid #d8dbe1;
border-radius: 7px;
background: white;
color: #757b85;
cursor: pointer;
font-size: 0.72rem;
font-weight: 750;
line-height: 1.1;
}
.weno_sig_progress_button.selected,
.weno_sig_choice_button.selected,
.weno_rx_choice_button.selected,
.weno_substitution_button.selected
{
border: 2px solid var(--brand);
background: var(--brand_soft);
color: var(--brand_dark);
font-weight: 800;
}
.weno_sig_progress_button.complete:not(.selected)
{
border-color: #cbb8e7;
color: var(--brand_dark);
}
.weno_sig_progress_label,
.weno_sig_progress_value
{
display: block;
width: 100%;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.weno_sig_progress_label
{
font-weight: 800;
}
.weno_sig_progress_value
{
min-height: 1.1em;
color: var(--brand_dark);
font-size: 0.63rem;
font-weight: 650;
line-height: 1.1;
}
.weno_rx_section_eyebrow
{
display: block;
color: var(--brand_dark);
font-size: 0.61rem;
font-weight: 850;
letter-spacing: 0.065em;
text-transform: uppercase;
}
.weno_sig_choice_divider
{
margin: 8px 0 6px;
border-top: 1px solid #e5e7eb;
}
.weno_sig_custom_area
{
margin-bottom: 5px;
}
.weno_sig_choice_frame
{
overflow: hidden;
}
.weno_sig_custom_chip
{
width: 100%;
min-height: 40px;
padding: 9px 11px;
border: 1px dashed #d8cae9;
border-radius: 6px;
background: #fbf9fe;
color: #7655a2;
cursor: pointer;
font-size: 0.72rem;
font-weight: 700;
text-align: left;
}
.weno_rx_summary_heading,
.weno_review_card_header
{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.weno_rx_form_card h2
{
margin: 3px 0 0;
color: var(--ink);
font-size: 0.84rem;
font-weight: 800;
line-height: 1.35;
}
.weno_sig_choice_list
{
max-height: min(42vh, 330px);
overflow-y: auto;
border: 1px solid #e0e2e6;
border-radius: 7px;
background: white;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.weno_sig_choice_button
{
width: 100%;
min-height: 50px;
padding: 13px 12px;
display: flex;
align-items: center;
justify-content: space-between;
border: 0;
border-bottom: 1px solid #eceef1;
border-radius: 0;
background: white;
color: #3e4450;
cursor: pointer;
font-size: 0.76rem;
font-weight: 650;
line-height: 1.25;
text-align: left;
}
.weno_sig_choice_button:last-child
{
border-bottom: 0;
}
.weno_sig_choice_list .weno_sig_choice_button.selected
{
border: 0;
border-left: 3px solid var(--brand);
border-bottom: 1px solid #e7dff2;
background: var(--brand_soft);
}
.weno_sig_choice_list .weno_sig_choice_button.selected::after
{
content: '\2713';
color: var(--brand_dark);
font-weight: 900;
}
.weno_sig_custom_wrap,
.weno_rx_refills_custom_wrap
{
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
}
.weno_sig_custom_wrap.hide_me,
.weno_rx_refills_custom_wrap.hide_me
{
display: none;
}
.weno_sig_custom_wrap
{
margin-top: 5px;
}
.weno_sig_custom_cancel
{
grid-column: 1 / -1;
min-height: 38px;
padding: 8px 10px;
border: 1px solid #d9dce2;
border-radius: 6px;
background: white;
color: #646b76;
cursor: pointer;
font-size: 0.7rem;
font-weight: 700;
}
.weno_sig_manual_wrap
{
padding-top: 9px;
}
.weno_sig_manual_wrap label
{
margin-bottom: 7px;
color: var(--brand_dark);
font-size: 0.7rem;
font-weight: 750;
}
.weno_sig_manual_wrap textarea
{
min-height: 145px;
resize: vertical;
font-size: 0.82rem;
line-height: 1.45;
}
.weno_sig_manual_wrap small
{
display: block;
margin-top: 6px;
color: var(--muted);
font-size: 0.61rem;
line-height: 1.4;
}
.weno_panel_body
{
overflow-x: hidden !important;
}
.weno_step_frame,
.weno_sig_choice_frame
{
will-change: opacity;
}
.weno_step_enter_forward
{
animation: weno_step_enter_forward 220ms cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
.weno_step_enter_backward
{
animation: weno_step_enter_backward 220ms cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
.weno_choice_enter_forward
{
animation: weno_choice_enter_forward 180ms cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
.weno_choice_enter_backward
{
animation: weno_choice_enter_backward 180ms cubic-bezier(0.22, 0.75, 0.3, 1) both;
}
@keyframes weno_step_enter_forward
{
from
{
opacity: 0.72;
}
to
{
opacity: 1;
}
}
@keyframes weno_step_enter_backward
{
from
{
opacity: 0.72;
}
to
{
opacity: 1;
}
}
@keyframes weno_choice_enter_forward
{
from
{
opacity: 0.8;
}
to
{
opacity: 1;
}
}
@keyframes weno_choice_enter_backward
{
from
{
opacity: 0.8;
}
to
{
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce)
{
.weno_step_enter_forward,
.weno_step_enter_backward,
.weno_choice_enter_forward,
.weno_choice_enter_backward
{
animation: none;
}
}
.weno_workflow_footer_grid
{
width: 100%;
display: grid;
grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.7fr);
gap: 9px;
}
.weno_workflow_primary_button,
.weno_workflow_secondary_button
{
min-height: 45px;
padding: 9px 12px;
border-radius: 7px;
cursor: pointer;
font-size: 0.76rem;
font-weight: 800;
}
.weno_workflow_primary_button
{
border: 1px solid var(--brand);
background: var(--brand);
color: white;
}
.weno_workflow_primary_button:disabled
{
border-color: #d2d5da;
background: #d2d5da;
cursor: not-allowed;
}
.weno_workflow_secondary_button
{
border: 1.5px solid #cfd3da;
background: white;
color: #565d68;
}
.weno_rx_summary_card,
.weno_rx_form_card,
.weno_review_card,
.weno_review_patient_card
{
margin-bottom: 11px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 11px;
background: white;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.weno_rx_summary_heading strong
{
color: var(--ink);
font-size: 0.84rem;
}
.weno_rx_summary_card p
{
margin: 8px 0 0;
padding-top: 8px;
border-top: 1px solid #eef0f3;
color: #505761;
font-size: 0.73rem;
line-height: 1.45;
}
.weno_rx_favorite_card
{
margin-bottom: 11px;
padding: 12px 13px;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
border: 1px solid #eadcae;
border-radius: 11px;
background: #fffbeb;
}
.weno_rx_favorite_icon
{
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: white;
color: #d49a00;
box-shadow: 0 1px 4px rgba(122, 84, 0, 0.12);
}
.weno_rx_favorite_copy,
.weno_rx_favorite_copy strong,
.weno_rx_favorite_copy small
{
display: block;
min-width: 0;
}
.weno_rx_favorite_copy strong
{
color: #5d4810;
font-size: 0.73rem;
}
.weno_rx_favorite_copy small
{
margin-top: 2px;
color: #806f42;
font-size: 0.61rem;
line-height: 1.35;
}
.weno_save_rx_favorite_button
{
min-width: 74px;
min-height: 39px;
padding: 7px 10px;
border: 1.5px solid #d6a72a;
border-radius: 8px;
background: white;
color: #946900;
cursor: pointer;
font-size: 0.66rem;
font-weight: 800;
}
.weno_save_rx_favorite_button.saved
{
border-color: #b9d8c7;
background: #f0fdf4;
color: #18734a;
cursor: default;
}
.weno_save_rx_favorite_button.working
{
cursor: wait;
opacity: 0.7;
}
@media (max-width: 380px)
{
.weno_rx_favorite_card
{
grid-template-columns: 36px minmax(0, 1fr);
}
.weno_save_rx_favorite_button
{
grid-column: 1 / -1;
width: 100%;
}
}
/* Provider visit Info tab — compact single-column patient overview */
#demographics .visit_info_overview
{
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.triage_patient_information_card .triage_answer_a
{
font-size: 0.82rem;
font-weight: 600;
line-height: 1.55;
}
.triage_patient_contact_value + .triage_patient_contact_value
{
border-top: 1px solid var(--line);
margin-top: 5px;
padding-top: 5px;
}
#demographics .visit_info_patient_editor
{
border-bottom: 1px solid var(--line);
padding: 14px 16px;
}
#demographics .visit_info_patient_editor summary
{
color: var(--brand);
cursor: pointer;
font-size: 0.8rem;
font-weight: 700;
min-height: 40px;
padding: 10px 0;
}
#demographics .visit_info_patient_editor summary:focus-visible
{
outline: 2px solid var(--brand);
outline-offset: 4px;
}
#demographics .visit_info_patient_editor .section_outer_container
{
margin-top: 12px;
}
#demographics .visit_info_admin_cards
{
background: var(--page);
display: grid;
font-size: 0.76rem;
gap: 10px;
padding: 12px;
}
#demographics .visit_info_snapshot
{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
background: #fcfbfe;
border-bottom: 1px solid var(--line);
}
#demographics .visit_info_snapshot_item
{
min-width: 0;
padding: 11px 12px;
border-right: 1px solid var(--line);
}
#demographics .visit_info_snapshot_item:last-child
{
border-right: 0;
}
#demographics .visit_info_snapshot_item:nth-child(4)
{
border-right: 0;
}
#demographics .visit_info_snapshot_item_full
{
grid-column: 1 / -1;
border-top: 1px solid var(--line);
}
#demographics .visit_info_snapshot_label
{
color: var(--muted);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
#demographics .visit_info_snapshot_value
{
overflow: hidden;
margin-top: 3px;
font-size: 0.76rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
#demographics .visit_info_snapshot_safe
{
color: var(--green);
}
#demographics .visit_info_snapshot_warn
{
color: var(--gold);
}
#demographics .visit_info_section
{
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
#demographics .visit_info_section:last-child
{
border-bottom: 0;
}
#demographics .visit_info_section .section_outer_container
{
margin: 0;
}
#demographics .visit_info_section .color_gainsboro,
#demographics .visit_info_section .color_silver,
#demographics .visit_info_section .section_outer_container > .bold[style*='background'],
#demographics .visit_info_section .section_outer_container > div[style*='background: gainsboro']
{
margin: 0 0 9px !important;
padding: 0 !important;
color: var(--ink);
background: transparent !important;
font-size: 0.82rem;
font-weight: 800;
}
#demographics .visit_info_contact_section > .color_silver:first-child
{
display: none !important;
}
#demographics .visit_info_patient_section > .section_outer_container + .section_outer_container
{
margin-top: 0;
}
#demographics .visit_info_section table
{
margin: 0 !important;
color: var(--ink);
font-size: 0.76rem !important;
}
#demographics .visit_info_section table > tbody > tr > td,
#demographics .visit_info_section table > tr > td
{
padding: 7px 5px !important;
border-top: 1px solid var(--line);
background: transparent !important;
}
#demographics .visit_info_section table > tbody > tr:first-child > td,
#demographics .visit_info_section table > tr:first-child > td
{
border-top: 0;
}
#demographics .visit_info_patient_section .table-striped > tbody > tr:nth-of-type(odd) > *
{
--bs-table-accent-bg: transparent;
}
#demographics .visit_info_section .section_display_container
{
margin: 0;
}
#demographics .visit_info_section .section_display_container > .client_value_tr
{
min-height: 43px;
margin: 0 !important;
padding: 8px 0 !important;
background: transparent !important;
border-top: 1px solid var(--line) !important;
}
#demographics .visit_info_section .section_display_container > .client_value_tr:first-child
{
border-top: 0 !important;
}
#demographics .visit_info_section .btn-xs
{
min-height: 28px;
padding: 4px 9px;
border-radius: 6px;
font-size: 0.68rem;
font-weight: 700;
}
#demographics .client_medication_row
{
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 10px;
align-items: start;
min-height: 54px;
cursor: pointer;
}
#demographics .client_medication_icon
{
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-top: 1px;
margin-right: 0 !important;
background: var(--brand_soft);
border-radius: 50%;
}
#demographics .client_medication_icon img
{
width: 23px;
height: 23px;
object-fit: contain;
}
#demographics .client_medication_copy
{
min-width: 0;
}
#demographics .client_medication_name
{
color: var(--ink);
font-size: 0.78rem;
font-weight: 800;
line-height: 1.35;
}
#demographics .client_medication_prescribed_date
{
margin-top: 2px;
color: var(--muted);
font-size: 0.66rem;
line-height: 1.35;
}
#demographics .client_medication_sig
{
margin-top: 2px;
color: var(--ink);
font-size: 0.7rem;
line-height: 1.4;
}
#demographics .client_medication_actions
{
align-self: center;
}
#demographics .client_medication_chevron
{
color: var(--muted);
font-size: 0.8rem;
}
/* Patient medication add/edit side window */
.medication_editor_panel
{
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
background: #f8f8fa;
color: var(--ink);
overflow: hidden;
}
.medication_editor_header
{
background: var(--brand);
color: white;
}
.medication_editor_messages
{
display: block;
padding: 0;
background: #f8f8fa;
overflow-x: hidden;
overflow-y: auto;
}
.medication_editor_intro
{
display: flex;
gap: 11px;
align-items: center;
padding: 17px 18px;
border-bottom: 1px solid var(--line);
}
.medication_editor_intro_icon,
.medication_editor_pill_icon
{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
color: var(--brand);
background: var(--brand_soft);
border-radius: 50%;
font-size: 1rem;
}
.medication_editor_intro strong,
.medication_editor_intro small
{
display: block;
}
.medication_editor_intro strong
{
font-size: 0.9rem;
}
.medication_editor_intro small
{
margin-top: 2px;
color: var(--muted);
font-size: 0.7rem;
}
.medication_editor_form
{
width: 100%;
min-width: 0;
padding: 17px 18px 28px;
box-sizing: border-box;
background: white;
overflow-x: hidden;
}
.medication_editor_form label
{
display: block;
margin: 0 0 6px;
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.035em;
text-transform: uppercase;
}
.medication_editor_form .form-control
{
min-height: 44px;
border: 1px solid var(--line);
border-radius: 8px;
box-shadow: none;
font-size: 0.82rem;
}
.medication_editor_form textarea.form-control
{
min-height: 86px;
resize: vertical;
}
.medication_editor_search_wrap
{
position: relative;
}
.medication_editor_search_wrap > i
{
position: absolute;
top: 14px;
left: 13px;
z-index: 2;
color: var(--muted);
}
.medication_editor_search_wrap .form-control
{
padding-left: 38px;
}
.medication_editor_readonly_name
{
display: flex;
gap: 10px;
align-items: center;
min-height: 54px;
padding: 7px 0 12px;
font-size: 0.86rem;
font-weight: 800;
}
.medication_compact_selector
{
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
overflow: hidden;
border: 1px solid #d8dbe1;
border-radius: 10px;
background: white;
}
.medication_selector_toggle
{
width: 100%;
min-height: 62px;
padding: 9px 11px;
display: flex;
align-items: center;
gap: 10px;
border: 0;
background: white;
color: var(--ink);
cursor: pointer;
text-align: left;
}
.medication_selector_toggle[aria-expanded='true']
{
background: var(--brand_soft);
}
.medication_selector_copy
{
min-width: 0;
flex: 1;
}
.medication_selector_name,
.medication_selector_meta
{
display: block;
}
.medication_selector_name
{
overflow: hidden;
font-size: 0.8rem;
font-weight: 800;
line-height: 1.3;
text-overflow: ellipsis;
}
.medication_selector_meta
{
margin-top: 3px;
color: var(--muted);
font-size: 0.66rem;
line-height: 1.3;
}
.medication_selector_chevron
{
flex: 0 0 auto;
color: var(--brand_dark);
}
.medication_selector_dropdown
{
padding: 10px;
border-top: 1px solid #ded6e9;
background: #f7f5fa;
}
.medication_selector_search_wrap
{
position: relative;
}
.medication_selector_search_wrap > i
{
position: absolute;
top: 14px;
left: 13px;
z-index: 2;
color: var(--muted);
}
.medication_selector_search_wrap .form-control
{
padding-right: 40px;
padding-left: 38px;
background: white;
}
.medication_weno_search_clear
{
position: absolute;
top: 3px;
right: 3px;
width: 38px;
height: 38px;
border: 0;
background: transparent;
color: var(--muted);
font-size: 1.25rem;
}
.medication_weno_search_help
{
padding: 10px 3px 2px;
color: var(--muted);
font-size: 0.66rem;
}
.medication_weno_search_results
{
max-height: min(45vh, 390px);
margin-top: 8px;
overflow-y: auto;
border-radius: 8px;
background: white;
overscroll-behavior: contain;
}
.medication_weno_search_results:empty
{
display: none;
}
.medication_editor_pill_icon
{
width: 34px;
height: 34px;
}
.medication_editor_help
{
margin-top: 5px;
color: var(--muted);
font-size: 0.67rem;
line-height: 1.4;
}
.medication_editor_field_grid
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 16px 0;
}
.medication_editor_strength_field
{
margin-top: 16px;
}
.medication_sig_builder
{
width: 100%;
max-width: 100%;
min-width: 0;
margin: 18px 0 0;
box-sizing: border-box;
overflow: hidden;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
border-left: 1px solid var(--line);
border-radius: 8px;
background: #f7f8fa;
}
.medication_sig_builder_heading
{
padding: 13px 14px 10px;
background: white;
}
.medication_sig_builder_heading span,
.medication_sig_builder_heading small
{
display: block;
}
.medication_sig_builder_heading span
{
color: var(--ink);
font-size: 0.75rem;
font-weight: 850;
}
.medication_sig_builder_heading small
{
margin-top: 2px;
color: var(--muted);
font-size: 0.64rem;
}
.medication_sig_builder .weno_sig_builder_content
{
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
padding-bottom: 14px;
overflow-x: hidden;
}
.medication_sig_builder .weno_sig_manual_wrap
{
min-width: 0;
padding: 4px 2px 2px;
}
.medication_sig_builder .weno_sig_progress_grid,
.medication_sig_builder .weno_sig_choice_frame,
.medication_sig_builder .weno_sig_choice_list,
.medication_sig_builder .weno_sig_custom_area,
.medication_sig_builder .weno_sig_custom_wrap
{
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.medication_sig_builder .weno_sig_progress_button,
.medication_sig_builder .weno_sig_choice_button,
.medication_sig_builder .weno_sig_custom_chip,
.medication_sig_builder .weno_sig_custom_input
{
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.medication_editor_prescription_context
{
margin-top: 16px;
padding: 12px 13px;
background: var(--brand_soft);
border-left: 3px solid var(--brand);
border-radius: 0 8px 8px 0;
font-size: 0.75rem;
line-height: 1.45;
}
.medication_editor_context_label
{
margin-bottom: 3px;
color: var(--brand);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.medication_editor_prescription_context small
{
display: block;
margin-top: 5px;
color: var(--muted);
font-size: 0.65rem;
}
.medication_editor_remove_trigger
{
margin-top: 23px;
padding: 0;
color: var(--danger);
background: transparent;
border: 0;
font-size: 0.72rem;
font-weight: 700;
}
.medication_editor_remove_confirm
{
margin-top: 18px;
padding: 14px;
background: var(--danger_soft);
border: 1px solid var(--danger);
border-radius: 8px;
font-size: 0.78rem;
}
.medication_editor_remove_actions
{
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 12px;
}
.medication_editor_footer
{
display: block;
padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
background: white;
border-top: 1px solid var(--line);
box-shadow: none;
}
.medication_editor_footer .save_medication_button
{
min-height: 48px;
color: white;
background: var(--brand);
border: 0;
border-radius: 8px;
font-weight: 800;
}
.medication_editor_errors
{
margin: 0 0 9px;
font-size: 0.75rem;
text-align: center;
}
#demographics .visit_info_social_section .social_display_container table tr
{
height: 39px;
}
#demographics .visit_info_social_section .social_display_container table td:first-child
{
display: none;
}
#demographics .visit_info_social_section .social_display_container table td:nth-child(2)
{
width: 90px;
color: var(--muted);
font-weight: 700;
}
#demographics .visit_info_profession_row
{
display: grid;
grid-template-columns: 90px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
min-height: 39px;
border-top: 1px solid var(--line);
font-size: 0.74rem;
}
#demographics .visit_info_profession_label
{
color: var(--muted);
font-size: 0.67rem;
font-weight: 700;
}
#demographics .edit_client_profession_container
{
margin-top: 10px;
}
#demographics .visit_info_inline_actions
{
display: flex;
gap: 7px;
margin-top: 8px;
}
#demographics .visit_info_pharmacy_section > .section_outer_container
{
margin-bottom: 0 !important;
}
#demographics .visit_info_custom_header
{
display: flex;
align-items: center;
min-height: 28px;
margin-bottom: 9px;
font-size: 0.82rem;
font-weight: 800;
}
#demographics .visit_info_custom_header .btn
{
margin-left: auto;
}
#demographics .visit_info_section_count
{
margin-left: 7px;
color: var(--muted);
font-size: 0.67rem;
font-weight: 600;
}
#demographics .visit_info_immunization_row
{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 12px;
min-height: 43px;
padding: 8px 0;
border-top: 1px solid var(--line);
}
#demographics .visit_info_immunization_row:first-child
{
border-top: 0;
}
#demographics .visit_info_immunization_name
{
font-size: 0.76rem;
font-weight: 700;
}
#demographics .visit_info_immunization_meta,
#demographics .visit_info_immunization_notes
{
color: var(--muted);
font-size: 0.64rem;
}
#demographics .visit_info_immunization_notes
{
grid-column: 1 / -1;
}
#demographics .visit_info_empty_value,
#demographics .visit_info_section .no-data
{
min-height: 35px;
padding: 7px 0 !important;
color: var(--muted) !important;
text-align: left !important;
font-size: 0.7rem !important;
font-style: italic;
}
#demographics .visit_info_section .insurance-item,
#demographics .visit_info_section .emergency-contact-item
{
margin: 0 !important;
padding: 7px 0 !important;
background: transparent !important;
border: 0 !important;
border-top: 1px solid var(--line) !important;
border-radius: 0 !important;
}
#demographics .visit_info_section .insurance-item:first-child,
#demographics .visit_info_section .emergency-contact-item:first-child
{
border-top: 0 !important;
}
#demographics .emergency_contact_container > .emergency-section > h3
{
display: none;
}
@media (max-width: 640px)
{
#demographics .visit_info_snapshot
{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#demographics .visit_info_snapshot_item:nth-child(2)
{
border-right: 0;
}
#demographics .visit_info_snapshot_item:nth-child(-n+2)
{
border-bottom: 1px solid var(--line);
}
}
@media (max-width: 430px)
{
#demographics .visit_info_section
{
padding: 13px 12px;
}
#demographics .visit_info_profession_row
{
grid-template-columns: 76px minmax(0, 1fr) auto;
gap: 7px;
}
#demographics .client_medication_row
{
grid-template-columns: 32px minmax(0, 1fr) auto;
gap: 8px;
}
#demographics .client_medication_icon
{
width: 30px;
height: 30px;
}
#demographics .client_medication_icon img
{
width: 21px;
height: 21px;
}
.medication_editor_form,
.medication_editor_intro
{
padding-right: 14px;
padding-left: 14px;
}
.medication_editor_field_grid
{
grid-template-columns: 1fr;
}
#demographics .visit_info_social_section .social_display_container table td:nth-child(2)
{
width: 76px;
}
#demographics .visit_info_immunization_row
{
grid-template-columns: 1fr;
}
#demographics .visit_info_immunization_notes
{
grid-column: auto;
}
}
.weno_rx_choice_grid
{
margin-top: 11px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}
.weno_rx_choice_button,
.weno_substitution_button
{
min-height: 40px;
padding: 7px 5px;
border: 1.5px solid #d8dbe1;
border-radius: 8px;
background: white;
color: #4e5560;
cursor: pointer;
font-size: 0.69rem;
font-weight: 700;
}
.weno_duration_input,
.weno_do_not_fill_before,
.weno_note_input,
.weno_rx_refills_custom_wrap
{
margin-top: 10px;
}
.weno_quantity_input_group
{
margin-top: 11px;
display: grid;
grid-template-columns: 82px auto 1fr;
align-items: center;
gap: 8px;
color: #505761;
font-size: 0.72rem;
font-weight: 700;
}
.weno_qty_calc_note
{
color: var(--muted);
font-size: 0.68rem;
font-weight: 500;
}
.weno_substitution_toggle
{
margin-top: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.weno_substitution_button
{
min-height: 48px;
padding: 8px;
line-height: 1.25;
}
.weno_review_patient_card
{
border-left: 4px solid var(--brand);
}
.weno_review_patient_card span:last-child
{
min-width: 0;
flex: 1;
}
.weno_review_patient_card small,
.weno_review_patient_card strong,
.weno_review_patient_card em,
.weno_review_card_header small,
.weno_review_card_header strong,
.weno_review_card_header em
{
display: block;
}
.weno_review_patient_card small,
.weno_review_card_header small,
.weno_review_definition_grid small
{
color: #9ca3af;
font-size: 0.58rem;
font-style: normal;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.weno_review_patient_card strong,
.weno_review_card_header strong
{
margin-top: 2px;
color: var(--ink);
font-size: 0.78rem;
}
.weno_review_patient_card em,
.weno_review_card_header em
{
margin-top: 3px;
color: var(--muted);
font-size: 0.65rem;
font-style: normal;
line-height: 1.4;
}
.weno_review_card_header > div
{
min-width: 0;
flex: 1;
}
.weno_review_pharmacy_icon
{
background: #eff6ff;
color: #2563eb;
}
.weno_review_diagnosis_icon
{
background: #ecfdf5;
color: #16805f;
}
.weno_rx_diagnosis_help
{
margin: 5px 0 10px;
color: var(--muted);
font-size: 0.65rem;
line-height: 1.4;
}
.weno_rx_form_card h2 small
{
color: var(--muted);
font-size: 0.62rem;
font-weight: 650;
}
.weno_rx_diagnosis_options
{
overflow: hidden;
border: 1px solid #e4e0e8;
border-radius: 8px;
background: white;
}
.weno_rx_diagnosis_option
{
width: 100%;
min-height: 58px;
padding: 10px;
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
border: 0;
border-bottom: 1px solid #ece9ef;
background: white;
color: var(--ink);
cursor: pointer;
text-align: left;
}
.weno_rx_diagnosis_option:last-child
{
border-bottom: 0;
}
.weno_rx_diagnosis_option.selected
{
background: var(--brand_soft);
}
.weno_rx_diagnosis_option .custom_checkbox_container
{
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #c4a8e8;
border-radius: 5px;
background: white;
}
.weno_rx_diagnosis_option .custom_checkbox_checker
{
margin-left: 3px;
color: var(--brand);
}
.weno_rx_diagnosis_option_copy,
.weno_rx_diagnosis_option_copy strong,
.weno_rx_diagnosis_option_copy span
{
display: block;
min-width: 0;
}
.weno_rx_diagnosis_option_copy strong
{
color: var(--brand_dark);
font-size: 0.73rem;
}
.weno_rx_diagnosis_option_copy span
{
margin-top: 2px;
color: #555d68;
font-size: 0.66rem;
line-height: 1.35;
}
.weno_rx_diagnosis_role
{
color: var(--brand);
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.weno_rx_diagnosis_loading,
.weno_rx_diagnosis_empty,
.weno_rx_diagnosis_search_empty
{
padding: 18px 12px;
color: var(--muted);
font-size: 0.67rem;
line-height: 1.4;
text-align: center;
}
.weno_rx_diagnosis_empty i,
.weno_rx_diagnosis_empty span
{
display: block;
}
.weno_rx_diagnosis_empty i
{
margin-bottom: 5px;
color: #b9abc9;
font-size: 1.1rem;
}
.weno_rx_add_diagnosis_button
{
width: 100%;
min-height: 42px;
margin-top: 8px;
padding: 9px 11px;
border: 1px dashed #cdbde0;
border-radius: 7px;
background: #fbf9fe;
color: var(--brand_dark);
cursor: pointer;
font-size: 0.69rem;
font-weight: 750;
text-align: left;
}
.weno_rx_diagnosis_search_header
{
margin-top: 8px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
}
.weno_rx_diagnosis_search_input
{
min-height: 44px;
font-size: 0.72rem;
}
.weno_rx_diagnosis_search_cancel
{
padding: 0 10px;
border: 0;
background: transparent;
color: var(--brand);
font-size: 0.68rem;
font-weight: 750;
}
.weno_rx_diagnosis_search_results
{
max-height: 245px;
margin-top: 7px;
overflow-y: auto;
border-radius: 7px;
overscroll-behavior: contain;
}
.weno_rx_diagnosis_search_result
{
width: 100%;
min-height: 54px;
padding: 9px 11px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: 1px solid #e5e0e9;
border-bottom: 0;
background: white;
color: var(--ink);
cursor: pointer;
text-align: left;
}
.weno_rx_diagnosis_search_result:first-child
{
border-radius: 7px 7px 0 0;
}
.weno_rx_diagnosis_search_result:last-child
{
border-bottom: 1px solid #e5e0e9;
border-radius: 0 0 7px 7px;
}
.weno_rx_diagnosis_search_result strong,
.weno_rx_diagnosis_search_result small
{
display: block;
}
.weno_rx_diagnosis_search_result strong
{
color: var(--brand_dark);
font-size: 0.71rem;
}
.weno_rx_diagnosis_search_result small
{
margin-top: 2px;
color: var(--muted);
font-size: 0.64rem;
line-height: 1.35;
}
.weno_rx_diagnosis_search_result > i
{
color: var(--brand);
}
.weno_review_diagnosis_list
{
margin-top: 12px;
border-top: 1px solid #eef0f3;
}
.weno_review_diagnosis_row
{
padding: 9px 0;
display: grid;
grid-template-columns: 64px 58px minmax(0, 1fr);
gap: 8px;
border-bottom: 1px solid #eef0f3;
align-items: baseline;
}
.weno_review_diagnosis_row:last-child
{
border-bottom: 0;
}
.weno_review_diagnosis_row small
{
color: #9ca3af;
font-size: 0.56rem;
font-weight: 800;
text-transform: uppercase;
}
.weno_review_diagnosis_row strong
{
color: var(--brand_dark);
font-size: 0.68rem;
}
.weno_review_diagnosis_row span,
.weno_review_diagnosis_empty
{
color: #555d68;
font-size: 0.65rem;
line-height: 1.35;
}
.weno_review_diagnosis_empty
{
padding: 12px 0 2px;
}
.weno_review_definition_grid
{
margin-top: 13px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px 14px;
}
.weno_review_definition_grid .wide
{
grid-column: 1 / -1;
padding-bottom: 10px;
border-bottom: 1px solid #eef0f3;
}
.weno_review_definition_grid strong
{
display: block;
margin-top: 3px;
color: #3d434c;
font-size: 0.7rem;
line-height: 1.4;
}
.weno_prescription_view_panel
{
min-height: 0;
overflow: hidden;
}
.weno_prescription_view_messages
{
min-height: 0;
padding: 0;
display: block;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background: var(--page);
}
.weno_prescription_view_messages .weno_review_content
{
padding: 16px;
}
.weno_prescription_header_title
{
padding-left: 0;
text-align: left;
}
.weno_prescription_view_footer
{
padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
display: block;
border: 0;
background: var(--surface);
box-shadow: none;
}
.weno_prescription_view_panel .dropdown-item i
{
width: 20px;
margin-right: 7px;
display: inline-block;
}
.weno_prescription_status_grid
{
margin-bottom: 11px;
display: grid;
gap: 8px;
}
.weno_prescription_status_card
{
padding: 12px 14px;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
}
.weno_prescription_status_icon,
.weno_prescription_message_icon
{
width: 38px;
height: 38px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--blue_soft);
color: var(--blue);
font-size: 1rem;
}
.weno_prescription_status_card > span:last-child
{
min-width: 0;
flex: 1;
}
.weno_prescription_status_card small,
.weno_prescription_status_card strong,
.weno_prescription_status_card em
{
display: block;
}
.weno_prescription_status_card small
{
color: var(--muted);
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.weno_prescription_status_card strong
{
margin-top: 2px;
color: var(--ink);
font-size: 0.76rem;
line-height: 1.35;
}
.weno_prescription_status_card em
{
margin-top: 3px;
color: var(--muted);
font-size: 0.63rem;
font-style: normal;
}
.weno_prescription_status_card.sent
{
border-color: var(--green);
background: var(--green_soft);
}
.weno_prescription_status_card.sent .weno_prescription_status_icon
{
background: var(--surface);
color: var(--green);
}
.weno_prescription_status_card.sent small,
.weno_prescription_status_card.sent strong
{
color: var(--green);
}
.weno_prescription_status_card.error
{
border-color: var(--danger);
background: var(--danger_soft);
}
.weno_prescription_status_card.error .weno_prescription_status_icon
{
background: var(--surface);
color: var(--danger);
}
.weno_prescription_status_card.error small,
.weno_prescription_status_card.error strong
{
color: var(--danger);
}
.weno_prescription_status_card.pending
{
border-color: var(--gold);
background: var(--gold_soft);
}
.weno_prescription_status_card.pending .weno_prescription_status_icon
{
background: var(--surface);
color: var(--gold);
}
.weno_prescription_status_card.pending small,
.weno_prescription_status_card.pending strong
{
color: var(--ink);
}
.weno_prescription_status_card.waiting
{
border-color: var(--blue);
background: var(--blue_soft);
}
.weno_prescription_status_card.waiting .weno_prescription_status_icon
{
background: var(--surface);
color: var(--blue);
}
.weno_prescription_status_card.waiting small,
.weno_prescription_status_card.waiting strong
{
color: var(--blue);
}
.weno_prescription_medication_meta
{
margin-top: 12px;
padding-top: 10px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 10px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.62rem;
}
.weno_prescription_message_card em
{
overflow-wrap: anywhere;
}
.weno_cancel_prescription_header_title
{
padding-left: 0;
text-align: left;
}
.weno_cancel_prescription_messages
{
padding: 16px;
background: var(--page);
}
.weno_cancel_prescription_summary
{
padding: 13px 14px;
display: flex;
align-items: center;
gap: 11px;
pointer-events: none;
}
.weno_cancel_prescription_summary > span:last-child,
.weno_cancel_prescription_summary small,
.weno_cancel_prescription_summary strong,
.weno_cancel_prescription_summary em
{
display: block;
}
.weno_cancel_prescription_summary > span:last-child
{
min-width: 0;
flex: 1;
}
.weno_cancel_prescription_summary small
{
color: var(--muted);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.weno_cancel_prescription_summary strong
{
margin-top: 2px;
color: var(--ink);
font-size: 0.8rem;
}
.weno_cancel_prescription_summary em
{
margin-top: 3px;
color: var(--muted);
font-size: 0.67rem;
font-style: normal;
}
.weno_cancel_prescription_footer
{
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
border: 0;
background: var(--surface);
box-shadow: none;
}
.weno_cancel_prescription_footer_grid
{
width: 100%;
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 8px;
}
.weno_clinical_alert_card
{
margin-bottom: 11px;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #c9b8e8;
border-radius: 10px;
background: #f6f1ff;
color: #6d45a8;
}
.weno_clinical_alert_card span,
.weno_clinical_alert_card strong,
.weno_clinical_alert_card small
{
display: block;
}
.weno_clinical_alert_card strong
{
font-size: 0.74rem;
}
.weno_clinical_alert_card small
{
margin-top: 2px;
color: #665a74;
font-size: 0.61rem;
}
.weno_review_footer
{
--weno-review-footer-top-offset: 12px;
position: relative;
width: 100%;
}
.weno_review_close_footer
{
width: 100%;
}
.weno_review_footer > .weno_review_attestation_toggle,
.weno_review_footer > .weno_workflow_footer_grid
{
position: relative;
z-index: 26;
}
.weno_review_attestation_toggle
{
width: 100%;
margin: 0 0 10px;
padding: 10px;
display: flex;
align-items: center;
gap: 12px;
border: 1px solid transparent;
border-radius: 8px;
background: rgba(134, 94, 191, 0.07);
color: #27222d;
cursor: pointer;
text-align: left;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.4;
}
.weno_review_attestation_toggle.selected
{
border-color: rgba(134, 94, 191, 0.2);
background: rgba(134, 94, 191, 0.11);
}
.weno_review_attestation_toggle .custom_checkbox_container
{
width: 36px;
height: 36px;
min-width: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #c4a8e8;
border-radius: 4px;
background: white;
}
.weno_review_attestation_toggle .custom_checkbox_checker
{
margin-left: 4px;
color: var(--brand);
}
.weno_send_options_backdrop
{
position: absolute;
z-index: 24;
left: -16px;
right: -16px;
bottom: calc(100% + var(--weno-review-footer-top-offset));
height: 100dvh;
padding: 0;
border: 0;
background: rgba(25, 20, 32, 0.3);
opacity: 0;
visibility: hidden;
transition: opacity 160ms ease, visibility 160ms ease;
pointer-events: none;
}
.weno_send_options_backdrop.open
{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.weno_send_options_sheet
{
position: absolute;
z-index: 25;
left: -16px;
right: -16px;
bottom: calc(100% + var(--weno-review-footer-top-offset));
padding: 8px 0 0;
border-top: 1px solid #ded7e8;
border-bottom: 1px solid #ece8f1;
background: white;
box-shadow: 0 -12px 28px rgba(46, 34, 62, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(18px);
transition: transform 180ms ease, opacity 160ms ease, visibility 160ms ease;
pointer-events: none;
}
.weno_send_options_sheet.open
{
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.weno_send_options_heading
{
padding: 5px 16px 9px;
color: #77707f;
font-size: 0.61rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.weno_send_option
{
width: 100%;
min-height: 62px;
padding: 10px 16px;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
border: 0;
border-top: 1px solid #f0edf3;
background: white;
color: #302b35;
cursor: pointer;
text-align: left;
}
.weno_send_option:active,
.weno_send_option.working
{
background: #f8f5fb;
}
.weno_send_option:disabled
{
cursor: wait;
opacity: 0.65;
}
.weno_send_option > span:nth-child(2),
.weno_send_option strong,
.weno_send_option small
{
display: block;
min-width: 0;
}
.weno_send_option strong
{
font-size: 0.75rem;
}
.weno_send_option small
{
margin-top: 2px;
color: #77707f;
font-size: 0.61rem;
line-height: 1.35;
}
.weno_send_option > .bi-chevron-right
{
color: #b1a9b9;
}
.weno_send_option_icon
{
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
font-size: 0.83rem;
}
.weno_send_option_icon.send
{
background: #ecfdf5;
color: #16805f;
}
.weno_send_option_icon.save
{
background: #f3edfb;
color: var(--brand);
}
.weno_send_option_icon.add
{
background: #eff6ff;
color: #2563eb;
}
@media (prefers-reduced-motion: reduce)
{
.weno_send_options_sheet
{
transition: none;
}
.weno_send_options_backdrop
{
transition: none;
}
}
@media (max-width: 380px)
{
.weno_sig_progress_grid
{
gap: 3px;
}
.weno_sig_progress_button
{
min-height: 48px;
padding: 6px 3px;
font-size: 0.68rem;
}
}
/* ─── STAFF BOOKING PHASE 4 — front-desk flow board / rooms panel / walk-in patients ─── */
.practice_room_location_header
{
padding: 14px 4px 6px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.practice_room_row .info_row_action
{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.delete_room_confirm_prompt_class
{
color: var(--ink);
font-size: 0.85rem;
}
.new_patient_card:hover,
.flow_room_chip_class:hover
{
color: var(--brand);
}
/* Appointment request side panel */
.appointment_request_panel
{
color: var(--ink);
background: var(--surface);
}
.appointment_request_panel .appointment_request_header
{
padding-top: env(safe-area-inset-top);
background: var(--brand);
}
.appointment_request_header table
{
width: 100%;
table-layout: fixed;
}
.appointment_request_header_control
{
width: 62px !important;
vertical-align: middle;
}
.appointment_request_header_control_start
{
padding-right: 4px !important;
}
.appointment_request_header_control_end
{
padding-left: 4px !important;
}
.appointment_request_header_text
{
min-width: 0;
overflow: hidden;
padding: 0 10px;
text-align: left;
}
.appointment_request_header_title
{
overflow: hidden;
color: #fff;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.appointment_request_header_subtitle
{
margin-top: 3px;
overflow: hidden;
color: rgba(255, 255, 255, 0.74);
font-size: 0.7rem;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.appointment_request_messages
{
gap: 16px;
padding: 16px;
background: var(--page);
}
.appointment_request_patient_card
{
position: relative;
overflow: hidden;
padding: 16px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.appointment_request_patient_card::before
{
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--brand);
content: '';
}
.appointment_request_eyebrow
{
margin-bottom: 11px;
color: var(--brand);
font-size: 0.63rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.appointment_request_patient_row
{
display: grid;
grid-template-columns: 56px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
}
.appointment_request_patient_image,
.appointment_request_anon_avatar
{
width: 56px;
height: 56px;
border: 3px solid var(--brand_soft);
border-radius: 50%;
}
.appointment_request_patient_image
{
object-fit: cover;
}
.appointment_request_anon_avatar
{
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.35rem;
}
.appointment_request_anon_avatar_blue
{
background: var(--blue);
}
.appointment_request_anon_avatar_brand
{
background: var(--brand);
}
.appointment_request_anon_avatar_muted
{
background: var(--muted);
}
.appointment_request_patient_details
{
min-width: 0;
}
.appointment_request_patient_name
{
overflow: hidden;
color: var(--ink);
font-size: 1rem;
font-weight: 800;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.appointment_request_patient_meta
{
margin-top: 4px;
color: var(--muted);
font-size: 0.75rem;
line-height: 1.4;
}
.appointment_request_visit_button
{
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e0cefc;
border-radius: 50%;
color: var(--brand);
background: var(--brand_soft);
cursor: pointer;
transition: background 0.15s, color 0.15s, transform 0.15s;
}
.appointment_request_visit_button:hover
{
color: #fff;
background: var(--brand);
transform: translateX(1px);
}
.appointment_request_complaint
{
margin-top: 13px;
padding: 11px 12px;
border-radius: var(--radius);
color: var(--ink);
background: var(--brand_soft);
font-size: 0.78rem;
line-height: 1.5;
}
.appointment_request_complaint_label
{
display: block;
margin-bottom: 3px;
color: var(--brand_dark);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.appointment_request_tabs
{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 4px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.appointment_request_time_tab
{
min-height: 42px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 7px 10px;
border: 0;
border-radius: var(--radius);
color: var(--muted);
background: transparent;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.appointment_request_time_tab:hover,
.appointment_request_time_tab.selected
{
color: var(--brand);
background: var(--brand_soft);
}
.appointment_request_time_tab.selected
{
box-shadow: inset 0 0 0 1px #e0cefc;
}
.appointment_request_tab_count
{
min-width: 20px;
padding: 2px 6px;
border-radius: var(--radius_pill);
color: inherit;
background: rgba(107, 114, 128, 0.1);
font-size: 0.58rem;
text-align: center;
}
.appointment_request_time_tab.selected .appointment_request_tab_count
{
background: rgba(134, 94, 191, 0.14);
}
.appointment_request_time_panel
{
min-width: 0;
}
.appointment_request_time_list
{
display: grid;
gap: 9px;
}
.appointment_request_time_card
{
min-height: 66px;
display: grid;
grid-template-columns: 58px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 9px 10px;
border: 1.5px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
transition: border-color 0.15s, box-shadow 0.15s;
}
.appointment_request_time_card:hover
{
border-color: #d8c6ee;
box-shadow: var(--shadow_small);
}
.appointment_request_date_block
{
min-height: 46px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: var(--radius);
color: var(--brand);
background: var(--brand_soft);
line-height: 1.05;
}
.appointment_request_month
{
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.appointment_request_day
{
margin-top: 2px;
font-size: 1.15rem;
font-weight: 800;
}
.appointment_request_time_details
{
min-width: 0;
}
.appointment_request_time_value
{
color: var(--ink);
font-size: 0.88rem;
font-weight: 800;
}
.appointment_request_weekday
{
margin-top: 4px;
overflow: hidden;
color: var(--muted);
font-size: 0.68rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.appointment_request_time_action
{
flex-shrink: 0;
}
.appointment_request_empty_state
{
padding: 28px 20px;
border: 1px dashed #d8c6ee;
border-radius: var(--radius_lg);
color: var(--muted);
background: var(--surface);
font-size: 0.75rem;
line-height: 1.45;
text-align: center;
}
.appointment_request_empty_icon
{
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
border-radius: 50%;
color: var(--brand);
background: var(--brand_soft);
font-size: 1.15rem;
}
.appointment_request_empty_title
{
margin-bottom: 4px;
color: var(--ink);
font-weight: 700;
}
.appointment_request_footer
{
display: block;
padding: 12px 16px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
background: var(--surface);
border-top: 0;
box-shadow: none;
}
@media (max-width: 480px)
{
.appointment_request_messages
{
padding: 13px;
}
.appointment_request_patient_card
{
padding: 14px;
}
.appointment_request_time_card
{
grid-template-columns: 52px minmax(0, 1fr) auto;
gap: 9px;
}
.appointment_request_time_tab
{
padding-right: 6px;
padding-left: 6px;
font-size: 0.7rem;
}
}
/* CLOSE ENCOUNTER FORM — provider-facing visit close, brand tokens only */
.close_encounter_card
{
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
font-family: var(--font);
}
.close_encounter_card_header
{
padding: 12px 14px;
color: white;
background: var(--brand);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.close_encounter_card_body
{
padding: 14px;
}
.close_encounter_field
{
margin-bottom: 14px;
}
.close_encounter_field:last-child
{
margin-bottom: 0;
}
.close_encounter_label
{
margin-bottom: 5px;
color: var(--ink);
font-size: 0.8rem;
font-weight: 600;
}
.close_encounter_hint
{
margin-top: 4px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 500;
line-height: 1.4;
}
.close_encounter_toggle_row
{
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.close_encounter_panel .close_encounter_toggle_row.hide_me
{
display: none !important;
}
.close_encounter_panel .close_encounter_success_only_section.hide_me
{
display: none !important;
}
.close_encounter_toggle_row .close_encounter_label
{
margin-bottom: 0;
}
.close_encounter_status_control
{
width: fit-content;
flex: 0 0 auto;
max-width: 55%;
}
.close_encounter_status_control .select_ndd
{
width: 100%;
margin: 0;
}
.close_encounter_yes_no_group
{
width: fit-content;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
margin-left: auto;
}
.close_encounter_yes_no_button
{
min-width: 56px;
min-height: 38px;
padding: 8px 10px;
border: 2px solid var(--line);
border-radius: 4px;
color: var(--ink);
background: var(--surface);
font-family: var(--font);
font-size: 0.8rem;
font-weight: 600;
}
.close_encounter_yes_no_button.selected
{
border-color: var(--brand);
color: var(--brand);
background: var(--brand_soft);
font-weight: 700;
}
.close_encounter_discount_trigger
{
min-width: 56px;
min-height: 38px;
flex: 0 0 auto;
padding: 8px 10px;
border: 2px solid var(--line);
border-radius: 4px;
color: var(--ink);
background: var(--surface);
font-family: var(--font);
font-size: 0.8rem;
font-weight: 600;
}
.close_encounter_discount_row.discount_set .close_encounter_discount_trigger
{
border-color: var(--brand);
color: var(--brand);
background: var(--brand_soft);
font-weight: 700;
}
.close_encounter_discount_row.discount_set .discount_summary
{
color: var(--brand);
font-weight: 650;
}
.close_encounter_success_only_section .close_encounter_discount_row
{
margin-bottom: 0;
padding-bottom: 12px;
}
.close_discount_messages
{
padding: 12px;
background: var(--page);
}
.close_discount_section
{
margin-top: 12px;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.close_discount_section_label
{
display: block;
margin-bottom: 8px;
color: var(--ink);
font-size: 0.78rem;
font-weight: 700;
}
.close_discount_type_group
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.close_discount_type_button
{
min-height: 40px;
padding: 8px 10px;
border: 2px solid var(--line);
border-radius: 4px;
color: var(--ink);
background: var(--surface);
font-family: var(--font);
font-size: 0.78rem;
font-weight: 650;
}
.close_discount_type_button.selected
{
border-color: var(--brand);
color: var(--brand);
background: var(--brand_soft);
font-weight: 700;
}
.close_discount_value_field
{
margin-top: 12px;
}
.close_discount_value_field label
{
display: block;
margin-bottom: 5px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 650;
}
.close_discount_value_control
{
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--surface);
}
.close_discount_value_symbol
{
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
border-right: 1px solid var(--line);
color: var(--ink);
background: var(--surface);
font-size: 0.82rem;
font-weight: 700;
}
.close_discount_value_step
{
min-height: 42px;
padding: 0;
border: 0;
border-left: 1px solid var(--line);
color: var(--brand);
background: var(--brand_soft);
font-size: 1rem;
font-weight: 700;
}
.close_discount_value_input_wrap
{
display: flex;
align-items: center;
justify-content: flex-start;
color: var(--ink);
background: var(--surface);
}
.close_discount_value_input_wrap input
{
width: 100%;
min-width: 0;
padding: 8px 10px;
border: 0;
outline: 0;
color: var(--ink);
background: transparent;
font-family: var(--font);
font-size: 0.95rem;
font-weight: 700;
text-align: left;
}
.close_discount_maximum
{
margin-top: 7px;
color: var(--muted);
font-size: 0.7rem;
text-align: right;
}
.close_discount_financial_table
{
display: grid;
}
.close_discount_financial_cards
{
display: grid;
gap: 10px;
}
.close_discount_financial_section
{
margin-top: 14px;
}
.close_discount_financial_card
{
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--page);
}
.close_discount_financial_card_title
{
margin-bottom: 5px;
color: var(--ink);
font-size: 0.78rem;
font-weight: 750;
}
.close_discount_staff_card
{
border-top: 3px solid var(--brand);
}
.close_discount_patient_card
{
border-top: 3px solid var(--green);
}
.close_discount_financial_row
{
display: flex;
gap: 12px;
justify-content: space-between;
padding: 7px 0;
color: var(--muted);
font-size: 0.74rem;
}
.close_discount_financial_row strong
{
flex: 0 0 auto;
color: var(--ink);
font-weight: 650;
}
.close_discount_financial_discount strong
{
color: var(--brand);
}
.close_discount_financial_subtotal,
.close_discount_financial_net,
.close_discount_financial_total
{
margin-top: 3px;
padding-top: 9px;
border-top: 1px solid var(--line);
color: var(--ink);
font-weight: 650;
}
.close_discount_financial_total
{
color: var(--brand);
font-size: 0.8rem;
font-weight: 700;
}
.close_discount_financial_total strong
{
color: var(--brand);
font-weight: 750;
}
.close_discount_section .select_ndd
{
width: 100%;
margin: 0;
}
.close_discount_other_reason
{
margin-top: 10px;
}
.close_discount_other_reason textarea
{
min-height: 80px;
resize: vertical;
}
.close_discount_footer
{
display: flex;
gap: 8px;
padding: 10px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
border-top: 0;
background: var(--surface);
box-shadow: none;
}
.close_discount_footer .btn_ndd
{
flex: 1;
border-radius: 4px;
}
.close_encounter_notice
{
margin-bottom: 14px;
padding: 10px 12px;
border-left: 3px solid var(--gold);
border-radius: var(--radius);
background: var(--gold_soft);
color: var(--ink);
font-size: 0.76rem;
line-height: 1.45;
}
.close_encounter_notice div
{
margin-top: 3px;
color: var(--muted);
}
.close_encounter_section_label
{
margin-bottom: 6px;
color: var(--muted);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* practice eligibility question — asked before the visit closes, not after */
.practice_invite_section
{
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.practice_invite_section .close_encounter_field
{
margin-bottom: 0;
padding-bottom: 12px;
}
.practice_invite_question
{
margin-bottom: 10px;
color: var(--ink);
font-size: 0.8rem;
line-height: 1.45;
}
.practice_invite_options
{
display: grid;
gap: 8px;
}
.practice_invite_tile
{
width: 100%;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 20px;
gap: 10px;
align-items: start;
padding: 12px;
border: 2px solid var(--line);
border-radius: var(--radius_lg);
color: var(--ink);
background: var(--surface);
font-family: var(--font);
text-align: left;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.practice_invite_tile:hover
{
border-color: #d8c6ee;
}
.practice_invite_tile.selected
{
border-color: var(--brand);
background: var(--brand_soft);
}
.practice_invite_icon
{
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: var(--brand);
background: var(--brand_soft);
font-size: 1.05rem;
}
.practice_invite_skip .practice_invite_icon
{
color: var(--muted);
background: var(--page);
}
.practice_invite_copy,
.practice_invite_title,
.practice_invite_description
{
display: block;
}
.practice_invite_title
{
color: var(--ink);
font-size: 0.8rem;
font-weight: 700;
line-height: 1.35;
}
.practice_invite_description
{
margin-top: 4px;
color: var(--muted);
font-size: 0.7rem;
line-height: 1.45;
}
.practice_invite_radio
{
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
border: 2px solid #cfd3da;
border-radius: 50%;
background: var(--surface);
}
.practice_invite_tile.selected .practice_invite_radio
{
border-color: var(--brand);
}
.practice_invite_tile.selected .practice_invite_radio::after
{
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--brand);
content: '';
}
.close_encounter_attestation
{
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--page);
}
.close_encounter_panel
{
position: relative;
}
.close_encounter_processing_overlay,
.ndd_processing_overlay
{
position: absolute;
z-index: 20;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: color-mix(in srgb, var(--ink) 35%, transparent);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.close_encounter_processing_overlay.hide_me,
.ndd_processing_overlay.hide_me
{
display: none !important;
}
.close_encounter_processing_card,
.ndd_processing_card
{
width: min(100%, 340px);
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow);
color: var(--ink);
text-align: center;
}
.close_encounter_processing_title,
.ndd_processing_title
{
font-size: 1rem;
font-weight: 700;
}
.close_encounter_processing_hint,
.ndd_processing_hint
{
margin-top: 5px;
color: var(--muted);
font-size: 0.76rem;
line-height: 1.4;
}
.close_encounter_processing_track,
.ndd_processing_track
{
position: relative;
height: 6px;
margin-top: 16px;
overflow: hidden;
border-radius: 999px;
background: var(--brand_soft);
}
.close_encounter_processing_track span,
.ndd_processing_track span
{
position: absolute;
inset: 0 auto 0 0;
width: 42%;
border-radius: inherit;
background: var(--brand);
transform: translateX(-110%);
animation: close_encounter_progress_slide 1.05s ease-in-out infinite;
}
@keyframes close_encounter_progress_slide
{
0%
{
transform: translateX(-110%);
}
100%
{
transform: translateX(260%);
}
}
/* PROVIDER LIST CARDS — the Codes & Rates side panel (2026-08-13). Shared by promo codes and saved rate
schedules: two different tables, but from the provider's side both are "things I set up to bring someone
in below list", and one visual language for both is what makes the panel scan.
Card rather than table on purpose. Both lists previously rendered as wide admin tables inside a
phone-width mchat_container, where the columns either scroll sideways or squeeze the value being read. */
.staff_list_section_head
{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin: 4px 0 10px;
}
.staff_list_section_head + .staff_list_card,
.staff_list_section_head + .staff_list_empty { margin-top: 0; }
/* the second section needs air between it and the last card of the first */
.plan_rate_templates_staff_container { margin-top: 22px; }
.staff_list_section_title
{
font-family: var(--font);
font-size: 1.05rem;
font-weight: 800;
color: var(--ink);
}
.staff_list_section_sub
{
font-size: 0.76rem;
color: var(--muted);
line-height: 1.35;
margin-top: 2px;
}
.staff_list_section_actions
{
display: flex;
gap: 6px;
flex-shrink: 0;
}
.staff_list_card
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 12px;
margin-bottom: 10px;
}
.staff_list_card_head
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
/* the code is the thing a provider reads the card by, and it is a string a patient types back — monospace
so O and 0 are distinguishable */
.staff_list_card_code
{
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--brand);
word-break: break-all;
}
.staff_list_card_title
{
font-size: 0.95rem;
font-weight: 700;
color: var(--ink);
min-width: 0;
word-break: break-word;
}
.staff_list_card_sub
{
font-size: 0.8rem;
color: var(--muted);
line-height: 1.4;
margin-bottom: 6px;
}
.staff_list_card_line
{
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 0.8rem;
color: var(--muted);
padding: 3px 0;
}
.staff_list_card_line span:last-child
{
color: var(--ink);
font-weight: 600;
text-align: right;
}
.staff_list_card_actions
{
display: flex;
gap: 6px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.staff_list_card_actions .btn_ndd { flex: 1 1 0; min-width: 0; }
.staff_list_empty
{
background: var(--surface);
border: 1px dashed var(--line);
border-radius: var(--radius);
padding: 22px 16px;
text-align: center;
font-size: 0.82rem;
color: var(--muted);
line-height: 1.5;
}
.staff_list_empty i
{
display: block;
font-size: 1.6rem;
color: var(--brand);
opacity: 0.55;
margin-bottom: 8px;
}
/* membership_offers.md Phases 2 & 4 — provider offer builder and patient offer review */
/* STANDARD / CUSTOM — a 50/50 segmented control at the top of the panel, because the choice between sending
published prices and building a quote decides what every control beneath it is for */
.membership_offer_mode_tabs
{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 10px;
}
.membership_offer_mode_tab
{
padding: 10px 8px;
text-align: center;
border: 2px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.membership_offer_mode_tab.selected
{
background: var(--brand_soft);
border-color: var(--brand);
}
.membership_offer_mode_tab_title
{
font-size: 0.92rem;
font-weight: 700;
color: var(--ink);
}
.membership_offer_mode_tab.selected .membership_offer_mode_tab_title { color: var(--brand); }
.membership_offer_mode_tab_sub
{
font-size: 0.72rem;
color: var(--muted);
margin-top: 2px;
}
/* the Standard tab's rates — the published figure with nothing to change beside it */
.membership_offer_standard_row
{
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 0.85rem;
color: var(--ink);
padding: 5px 0;
}
.membership_offer_standard_row + .membership_offer_standard_row { border-top: 1px solid var(--line); }
.membership_offer_standard_row span:last-child { font-weight: 700; white-space: nowrap; }
/* the enabled plans sit side by side so the whole choice is one glance — flex rather than a fixed
three-column grid so two enabled plans still fill the row instead of leaving a hole */
.membership_offer_plan_tiles,
.plan_template_plan_tiles,
.provider_profile_plan_tiles
{
display: flex;
gap: 8px;
}
.membership_offer_plan_tiles .membership_offer_plan_tile,
.plan_template_plan_tiles .plan_template_plan_tile,
.provider_profile_plan_tiles .provider_profile_plan_tile
{
flex: 1 1 0;
min-width: 0;
padding: 12px 6px;
}
/* compact tile_ndd variant: three across a phone-width side panel. The tile carries the plan identity only —
the rates live in their own card below the choice — so only the padding and label size tighten */
.membership_offer_plan_tiles .tile_primary,
.plan_template_plan_tiles .tile_primary,
.provider_profile_plan_tiles .tile_primary
{
font-size: 0.85rem;
line-height: 1.25;
}
.membership_offer_plan_tile_icon,
.plan_template_plan_tile_icon,
.provider_profile_plan_tile_icon
{
display: block;
margin-bottom: 6px;
font-size: 1.15rem;
color: var(--muted);
}
.tile_ndd.selected .membership_offer_plan_tile_icon,
.tile_ndd.selected .plan_template_plan_tile_icon,
.tile_ndd.selected .provider_profile_plan_tile_icon
{
color: var(--brand);
}
/* the price-quote explainer, opened from the info button in the panel header */
.membership_offer_panel
{
position: relative;
}
.membership_offer_info_popover
{
position: absolute;
top: calc(env(safe-area-inset-top) + 62px);
right: 12px;
left: 12px;
z-index: 30;
max-width: 340px;
margin-left: auto;
padding: 12px 14px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius_lg);
box-shadow: var(--shadow_small);
cursor: pointer;
}
.membership_offer_info_popover_title
{
font-size: 0.92em;
font-weight: 700;
color: var(--ink);
margin-bottom: 4px;
}
.membership_offer_info_popover_body
{
font-size: 0.84em;
line-height: 1.5;
color: var(--muted);
}
/* worked-example calculator — the provider dials in a household, then sees the figure it would actually pay */
.membership_offer_mix_row
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
}
.membership_offer_mix_row + .membership_offer_mix_row
{
border-top: 1px solid var(--line);
}
.membership_offer_mix_label_title
{
font-size: 0.88rem;
font-weight: 700;
color: var(--ink);
}
.membership_offer_mix_label_sub
{
font-size: 0.76rem;
color: var(--muted);
}
.membership_offer_mix_stepper
{
display: flex;
align-items: center;
gap: 0;
flex-shrink: 0;
}
.membership_offer_mix_btn
{
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--line);
background: var(--surface);
color: var(--brand);
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.membership_offer_mix_minus { border-radius: var(--radius) 0 0 var(--radius); }
.membership_offer_mix_plus { border-radius: 0 var(--radius) var(--radius) 0; }
.membership_offer_mix_btn:active
{
background: var(--brand_soft);
}
/* at its limit the button stays in place and stops responding — removing it would reflow the row mid-tap */
.membership_offer_mix_btn_off
{
color: var(--muted);
opacity: 0.45;
pointer-events: none;
}
.membership_offer_mix_val
{
min-width: 48px;
height: 40px;
text-align: center;
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
}
.membership_offer_preview_head
{
font-size: 0.7rem;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.membership_offer_preview_then { font-size: 0.78rem; color: var(--muted); margin-top: 8px; }
.membership_offer_preview_breakdown { margin-top: 10px; }
.membership_offer_preview_row
{
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 0.82rem;
color: var(--ink);
padding: 4px 0;
}
/* a deduction reads as a deduction — the amount is what distinguishes it, so only the amount is coloured */
.membership_offer_preview_row_adjust span:last-child { color: var(--muted); }
/* the household subtotal closes the per-person lines above it */
.membership_offer_preview_row_sub
{
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--line);
font-weight: 600;
}
/* the answer to whichever question this card is asking */
.membership_offer_preview_row_total
{
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--line);
font-size: 1rem;
font-weight: 700;
color: var(--brand);
}
/* a total that describes an arrangement the platform cannot process is not an answer — struck, not brand */
.membership_offer_preview_row_void { color: var(--muted); }
.membership_offer_preview_row_void span:last-child { text-decoration: line-through; }
.membership_offer_preview_note { font-size: 0.72rem; color: var(--muted); margin-top: 8px; line-height: 1.45; }
/* the published figure shown beside a bespoke one — context, not a line in the running total */
.membership_offer_preview_row_note span { color: var(--muted); }
/* a saved schedule beside the control that acts on it, reading as one row */
.membership_offer_template_row
{
display: flex;
gap: 8px;
margin-top: 5px;
}
.membership_offer_template_row .membership_offer_template_select { flex: 1; min-width: 0; }
.membership_offer_template_row .btn_ndd { flex: 0 0 auto; }
/* SAVE A SCHEDULE — set apart from the price rows above it with a tinted well, because it is a different
kind of action: everything above composes this patient's quote, this one files it for reuse. The label
sits inside the well rather than above it so the whole block reads as one unit. */
.membership_offer_template_save_row
{
margin-top: 14px;
padding: 12px;
background: var(--brand_soft);
border: 1px solid var(--brand_hover);
border-radius: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.membership_offer_template_save_row .input_label
{
flex: 0 0 100%;
margin: 0 0 2px;
color: var(--brand);
font-weight: 600;
}
.membership_offer_template_name_group
{
flex: 1;
min-width: 0;
position: relative;
}
.membership_offer_template_name_group .input_icon
{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--brand);
pointer-events: none;
}
.membership_offer_template_name_group .membership_offer_template_name
{
width: 100%;
padding-left: 32px;
background: #fff;
}
.membership_offer_template_save_row .membership_offer_template_save { flex: 0 0 auto; }
/* the custom-length input only appears once Custom is chosen, so it needs its own top margin rather than
inheriting the select's */
.membership_offer_intro_custom_wrap { margin-top: 4px; }
/* the plan's own allowances, sat between the monthly rates and the per-request fees they qualify. Quieter
than the editable rows either side of it — it is the only block in the builder that cannot be changed, and
it should not invite a tap that does nothing. */
.membership_offer_price_included
{
margin: 6px 0 0;
padding: 10px 12px;
background: var(--page);
border: 1px solid var(--line);
border-radius: 10px;
}
/* QUOTE BUILDER — one row per repriceable line: what it is, what the practice publishes, what they are
quoting instead. The published figure sits between the label and the input on purpose: the provider is
always typing against a number they can see, which is what makes a downward-only rule feel obvious
rather than arbitrary. */
.membership_offer_price_row,
.plan_template_price_row
{
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.membership_offer_price_row:last-child,
.plan_template_price_row:last-child { border-bottom: none; }
.membership_offer_price_label,
.plan_template_price_label
{
flex: 1;
min-width: 0;
font-size: 0.82rem;
color: var(--ink);
}
.membership_offer_price_published,
.plan_template_price_published
{
flex: 0 0 auto;
font-size: 0.78rem;
color: var(--muted);
text-align: right;
}
.membership_offer_price_input_wrap,
.plan_template_price_input_wrap
{
flex: 0 0 96px;
position: relative;
}
.membership_offer_price_currency,
.plan_template_price_currency
{
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
font-size: 0.82rem;
color: var(--muted);
pointer-events: none;
}
.membership_offer_price_input,
.plan_template_price_input
{
width: 100%;
padding-left: 20px;
text-align: right;
font-size: 0.85rem;
}
.membership_offer_note_input
{
resize: vertical;
min-height: 70px;
}
/* PERSONAL MEMBERSHIP INVITATION (CMR-2026-11-02-524) — one rate and one letter, so the rate row is a single
line rather than the plan-menu panel's grid, and the letter editor is tall enough to read as a letter.
The preview sheet reuses .invite_letter_sheet, the patient's own letter styling, because it is the same
sheet rendered by the same method. */
/* THE RATE IS THE DECISION ON THIS SCREEN, so it is the biggest thing on it: a tap-to-adjust figure rather
than a field to fill in. The buttons step in whole dollars scaled to the plan and stop at the practice's
published rate, which teaches the downward-only rule by affordance; the server still refuses anything above
it, because a disabled button is not a control. */
.membership_invite_rate_stepper
{
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.membership_invite_rate_btn
{
flex: 0 0 auto;
width: 54px;
height: 54px;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--surface);
color: var(--brand);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.membership_invite_rate_btn:active
{
background: var(--brand_soft);
}
/* at its limit the button stays in place and stops responding — removing it would reflow the row mid-tap */
.membership_invite_rate_btn_off
{
color: var(--muted);
opacity: 0.4;
pointer-events: none;
}
.membership_invite_rate_field
{
flex: 0 1 auto;
min-width: 0;
display: flex;
align-items: baseline;
justify-content: center;
gap: 2px;
padding-bottom: 4px;
border-bottom: 2px solid var(--line);
transition: border-color 0.12s;
}
.membership_invite_rate_field:focus-within
{
border-bottom-color: var(--brand);
}
.membership_invite_rate_currency
{
flex: 0 0 auto;
font-size: 1.35rem;
font-weight: 700;
color: var(--muted);
}
.membership_invite_rate_input
{
width: 100%;
max-width: 160px;
min-width: 0;
padding: 0;
border: none;
background: transparent;
text-align: center;
font-size: 2.4rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ink);
}
.membership_invite_rate_input:focus
{
outline: none;
}
.membership_invite_rate_per
{
text-align: center;
font-size: 0.78rem;
color: var(--muted);
margin-top: 6px;
}
/* what this rate is against the practice's own list price, rendered by the endpoint that prices it */
.membership_invite_rate_discount:not(:empty)
{
text-align: center;
font-size: 0.8rem;
color: var(--ink);
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.membership_invite_rate_discount b
{
color: var(--brand);
}
/* A BRANDED SWITCH. Used where a card is switched on rather than a value ticked — the control belongs in the
card's own corner, beside what it turns on, not in a row of its own below it. */
.switch_ndd
{
flex: 0 0 auto;
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.switch_ndd input
{
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.switch_ndd_track
{
display: block;
width: 46px;
height: 28px;
border-radius: 999px;
background: var(--line);
transition: background 0.16s;
}
.switch_ndd_thumb
{
display: block;
width: 22px;
height: 22px;
margin: 3px;
border-radius: 50%;
background: white;
box-shadow: var(--shadow_xs);
transition: transform 0.16s;
}
.switch_ndd input:checked + .switch_ndd_track
{
background: var(--brand);
}
.switch_ndd input:checked + .switch_ndd_track .switch_ndd_thumb
{
transform: translateX(18px);
}
/* a card whose heading carries a control on the right */
.membership_invite_card_head
{
display: flex;
align-items: flex-start;
gap: 12px;
}
.membership_invite_card_head_text
{
flex: 1 1 auto;
min-width: 0;
}
/* what this clinician has already sent this patient */
.membership_invite_history_rows
{
margin-top: 8px;
}
.membership_invite_history_row
{
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 0.78rem;
padding: 3px 0;
}
.membership_invite_history_row span:last-child
{
flex: 0 0 auto;
font-weight: 600;
}
/* the confirmation beside Send */
.membership_invite_confirm_row
{
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
margin-bottom: 10px;
background: #f8f8f8;
border: 1px solid var(--line);
border-radius: var(--radius);
cursor: pointer;
}
.membership_invite_confirm_box
{
flex: 0 0 auto;
}
.membership_invite_confirm_text
{
flex: 1 1 auto;
font-size: 0.8rem;
line-height: 1.35;
color: var(--ink);
}
/* the letter is a row that opens its own screen, not a textarea wedged between two pricing cards */
.membership_invite_letter_row
{
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.membership_invite_letter_row_text
{
flex: 1 1 auto;
min-width: 0;
}
.membership_invite_letter_row_caret
{
flex: 0 0 auto;
font-size: 1.1rem;
color: var(--muted);
}
/* THE EDITOR IS THE LETTER'S BODY, so it inherits the body's own typography rather than looking like a form
field inside it. No border, no background, no resize grip, and no scrollbar — the sheet grows instead. */
.membership_invite_letter_editor
{
display: block;
width: 100%;
padding: 0;
border: none;
background: transparent;
resize: none;
overflow: hidden;
color: inherit;
font-family: inherit;
font-size: inherit;
line-height: inherit;
min-height: 200px;
}
.membership_invite_letter_editor:focus
{
outline: none;
}
/* the sheet is the page, so the drawer around it carries the margin rather than a card */
.membership_invite_letter_messages
{
padding: 16px;
}
/* monthly or a year of the same figures; both are rendered by PHP and one is hidden */
.membership_offer_period_tabs
{
display: flex;
gap: 6px;
margin-top: 10px;
}
.membership_offer_period_tab
{
flex: 1 1 0;
text-align: center;
padding: 7px 4px;
font-size: 0.8rem;
font-weight: 600;
color: var(--muted);
border: 1px solid var(--line);
border-radius: var(--radius);
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.membership_offer_period_tab.selected
{
background: var(--brand_soft);
border-color: var(--brand);
color: var(--brand);
font-weight: 700;
}
.membership_invite_letter_preview
{
border-top: 1px solid var(--line);
padding-top: 12px;
}
/* patient-side invitation choices stay inside the scrollable review; every change is re-priced by PHP */
.patient_membership_offer_plan_picker
{
padding: 2px;
}
.patient_membership_offer_plan_tiles
{
display: flex;
gap: 8px;
}
.patient_membership_offer_plan_tile
{
flex: 1 1 0;
min-width: 0;
padding: 12px 6px;
}
/* THE OFFER CARD. It is the enrollment picker's plan card, on the same brand gradient, so the two screens
a patient meets a plan on read as one thing: headline price, inclusion checklist, pricing block. Two
differences, both deliberate. There is no Select button — the plan on an invitation is not a choice — and
the corner the picker gives to a MOST POPULAR badge is given here to the practice's standard price,
struck through, which is the figure an invitation exists to beat. */
.patient_membership_offer_hero
{
border: 2px solid transparent;
background: linear-gradient(150deg, #3a0ca3 0%, #7209b7 60%, #9d4edd 100%);
color: white;
}
/* it is the offer, not a control — cancel the .card_ndd hover lift */
.patient_membership_offer_hero:hover
{
border-color: transparent;
box-shadow: var(--shadow_xs);
transform: none;
}
.patient_membership_offer_hero_head
{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.patient_membership_offer_hero_title
{
font-size: 1.35rem;
font-weight: 800;
line-height: 1.15;
}
/* how far below the practice's advertised price this offer is, in the corner and shaped exactly like the
MOST POPULAR badge it stands in for. The advertised figure itself is a row in the breakdown below — a
badge holds the one thing a patient reads without reading anything else. */
.patient_membership_offer_hero_discount_badge
{
flex-shrink: 0;
padding: 5px 11px;
border-radius: var(--radius_pill);
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
text-transform: uppercase;
}
.patient_membership_offer_hero_price
{
display: flex;
align-items: baseline;
margin-top: 4px;
}
.patient_membership_offer_hero_amount
{
font-size: 2.6rem;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
}
.patient_membership_offer_hero_period
{
margin-left: 3px;
color: rgba(255, 255, 255, 0.85);
font-size: 1.05rem;
font-weight: 600;
}
.patient_membership_offer_hero_terms
{
margin-top: 4px;
color: rgba(255, 255, 255, 0.82);
font-size: 0.8rem;
font-weight: 500;
line-height: 1.4;
}
.patient_membership_offer_hero_included,
.patient_membership_offer_hero_pricing
{
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.patient_membership_offer_hero_pricing_label
{
margin-bottom: 2px;
color: rgba(255, 255, 255, 0.72);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.patient_membership_offer_hero_tier_label
{
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
/* ── the shared coverage list and fee rows are drawn for a white card, so every colour they take from
--surface, --ink, --muted, --line or a green mix has to be restated against the gradient ── */
.patient_membership_offer_hero .plan_cov_list { margin-top: 0; }
.patient_membership_offer_hero .plan_cov_item
{
color: rgba(255, 255, 255, 0.95);
column-gap: 10px;
font-size: 0.9rem;
}
/* A PLAIN TICK, NOT A FILLED DISC. The shared row draws its check as a 17px circle with a tick built out
of two borders, which is right on a white card and heavy repeated six times down a saturated one. The
enrollment plan card this is modelled on uses a bare glyph, so this restates it as one: the disc, its
size and the border construction all go, and the ::before becomes the character itself. */
.patient_membership_offer_hero .plan_cov_check
{
width: auto;
height: auto;
background: none;
border-radius: 0;
color: white;
}
.patient_membership_offer_hero .plan_cov_check::before
{
content: '\2713';
width: auto;
height: auto;
margin-top: 0;
border: 0;
transform: none;
font-size: 0.95rem;
font-weight: 700;
line-height: 1;
}
/* six rows of a checklist, not six cards — the shared row's 10px of padding and 2px of margin are sized
for an item that can be mistaken for a control, and these are a list */
.patient_membership_offer_hero .plan_cov_item_expandable
{
margin: 0 -9px;
padding: 5px 9px;
}
.patient_membership_offer_hero .plan_cov_item_expandable:hover,
.patient_membership_offer_hero .plan_cov_item_expandable.plan_cov_item_open
{
background: rgba(255, 255, 255, 0.12);
}
.patient_membership_offer_hero .plan_cov_chevron,
.patient_membership_offer_hero .plan_cov_detail
{
color: rgba(255, 255, 255, 0.72);
}
.patient_membership_offer_hero .plan_cov_item_expandable:hover .plan_cov_chevron,
.patient_membership_offer_hero .plan_cov_item_expandable.plan_cov_item_open .plan_cov_chevron
{
color: white;
}
.patient_membership_offer_hero .plan_cov_excluded_block
{
border-top-color: rgba(255, 255, 255, 0.22);
}
.patient_membership_offer_hero .plan_cov_item_excluded,
.patient_membership_offer_hero .plan_cov_cross,
.patient_membership_offer_hero .plan_cov_excluded_note
{
color: rgba(255, 255, 255, 0.68);
}
.patient_membership_offer_hero .plan_cov_fee_row
{
border-bottom-color: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.86);
}
.patient_membership_offer_hero .plan_cov_fee_row:last-child { border-bottom: none; }
.patient_membership_offer_hero .plan_cov_fee_amt,
.patient_membership_offer_hero .patient_membership_offer_custom_rate
{
color: white;
}
.patient_membership_offer_hero .patient_membership_offer_original_rate
{
color: rgba(255, 255, 255, 0.62);
}
/* the row the patient actually pays, against the two that only describe it */
.patient_membership_offer_hero_price_row_yours
{
color: white;
font-weight: 700;
}
.patient_membership_offer_hero_price_row_yours .plan_cov_fee_amt { font-size: 1.05rem; }
/* a permanent custom rate replaces the standard one outright, so that row IS struck; a temporary one does
not, and its standard row is left alone because the patient goes on to pay exactly that figure */
.patient_membership_offer_hero_price_row_struck,
.patient_membership_offer_hero_price_row_struck .plan_cov_fee_amt
{
color: rgba(255, 255, 255, 0.62);
text-decoration: line-through;
}
/* WHAT EVERY MEMBERSHIP CARRIES. The positive twin of the limits card: the same expandable rows as the
offer card's checklist, on a white surface, so the three platform-wide lines read as inclusions rather
than as a second plan. The rows keep their shared colours here — only the gradient card restates them. */
.membership_offer_also_included_card .plan_cov_list { margin-top: 6px; }
.membership_offer_also_included_card .plan_cov_item_expandable
{
margin: 0 -9px;
padding: 7px 9px;
}
/* the cancellation terms, stated once and on their own rather than inside a renewal sentence */
.membership_offer_cancellation_card .membership_offer_limits_list { margin-top: 10px; }
/* the intro months and the price after them, one tap apart, inside the estimated cost card */
.membership_offer_cost_period_tabs
{
display: flex;
gap: 6px;
margin-top: 10px;
}
.membership_offer_cost_period_tab
{
flex: 1 1 0;
padding: 7px 4px;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--muted);
font-size: 0.8rem;
font-weight: 600;
text-align: center;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.membership_offer_cost_period_tab.selected
{
background: var(--brand_soft);
border-color: var(--brand);
color: var(--brand);
font-weight: 700;
}
.patient_membership_offer_plan_tile .tile_primary
{
font-size: 0.82rem;
line-height: 1.2;
}
.patient_membership_offer_plan_tile .tile_secondary
{
margin-top: 4px;
font-size: 0.72rem;
color: var(--muted);
}
.patient_membership_offer_plan_icon
{
display: block;
margin-bottom: 6px;
color: var(--muted);
font-size: 1.15rem;
}
.patient_membership_offer_plan_tile.selected .patient_membership_offer_plan_icon,
.patient_membership_offer_plan_tile.selected .tile_secondary
{
color: var(--brand);
}
.patient_offer_plan_unavailable
{
opacity: 0.42;
cursor: not-allowed;
}
/* the last member row carries its own 12px of padding, so .card_ndd's 20px underneath read as 32 against
the 10px above the hairline — same correction the payment card makes below */
.patient_membership_offer_family_picker
{
padding-bottom: 8px;
}
.patient_membership_offer_member_options
{
border-top: 1px solid var(--line);
}
.patient_membership_offer_member_option
{
margin: 0;
padding: 12px 0;
}
.patient_membership_offer_member_option + .patient_membership_offer_member_option
{
border-top: 1px solid var(--line);
}
.patient_membership_offer_member_text
{
min-width: 0;
}
.patient_membership_offer_rate_comparison
{
display: inline-flex;
align-items: baseline;
justify-content: flex-end;
gap: 8px;
white-space: nowrap;
}
.patient_membership_offer_original_rate
{
color: var(--muted);
font-weight: 400;
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.patient_membership_offer_custom_rate
{
color: var(--brand);
font-weight: 700;
}
/* the provider's note is a message, not a term of the offer — it sits behind a header button so it cannot
read as one more card of terms between the pricing and the authorization */
.membership_offer_header_action
{
position: relative;
}
/* the note button and the close button share the header row, so they are given identical square metrics
rather than each being left to size itself off its own glyph — the chat icon is wider than the "<" and
the note button was also carrying its own padding, so the two boxes drifted apart. 38px is Bootstrap's
own .btn height (24px line-box + 12px padding + 2px border), so neither button changes height here. */
.patient_membership_offer_panel .mchat_header .close_side_menu_button,
.membership_offer_note_button
{
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
font-size: 1rem;
line-height: 1;
}
.membership_offer_note_button
{
position: relative;
}
.membership_offer_note_dot
{
position: absolute;
top: -3px;
right: -3px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--danger);
border: 2px solid var(--brand);
}
.membership_offer_note_popover
{
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 200;
width: 250px;
max-width: 76vw;
padding: 12px;
text-align: left;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.membership_offer_note_popover_head
{
font-size: 0.75rem;
font-weight: 700;
color: var(--brand);
margin-bottom: 6px;
}
.membership_offer_note_popover_body
{
font-size: 0.85rem;
line-height: 1.45;
color: var(--ink);
white-space: pre-wrap;
}
/* Estimated cost is one ledger: the covered people, then every adjustment applied to them, then the charge.
The separators travel with the rows rather than wrapping them, so a household of one and a household of
four both get exactly one rule above the money and one above the total. */
/* the two brand rules are the only separation this ledger needs. .plan_cov_fee_row carries its own grey
bottom border, which stacked against each separator's top border and read as a stray double line. */
.membership_offer_estimated_cost_card .plan_cov_fee_row { border-bottom: none; }
.membership_offer_cost_divider
{
margin-top: 6px;
padding-top: 12px;
border-top: 2px solid var(--brand_soft);
}
.membership_offer_cost_due
{
margin-top: 4px;
padding-top: 10px;
border-top: 2px solid var(--brand);
font-weight: 700;
}
.membership_offer_visit_credit_notice
{
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
align-items: start;
gap: 10px;
background: var(--brand_soft);
border-color: var(--brand);
}
.membership_offer_visit_credit_icon
{
display: grid;
width: 36px;
height: 36px;
place-items: center;
border-radius: var(--radius_pill);
background: var(--surface);
color: var(--brand);
font-size: 1rem;
}
.membership_offer_action_footer
{
position: relative;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px 12px;
padding-bottom: calc(10px + env(safe-area-inset-bottom));
background: var(--surface);
border-top: 1px solid var(--line);
}
/* the mandate drawer rises over the footer rather than sitting in the scroll; the shared
.subscription_authorize_drawer carries the box, this only keeps it clear of the button row */
.membership_offer_authorize_drawer
{
margin-bottom: 0;
}
/* the same box as confirm_appointment_checkbox and the weno attestation toggle — a soft lavender edge
while unchecked, then the base .checkbox_checked_state brand border and fill once it is ticked.
:not() is what preserves that: the base .custom_checkbox_container border is set !important, so it has
to be overridden in kind, and an unconditional !important here would outrank the checked state too and
leave the box looking identical whether or not the patient has agreed. */
.membership_offer_authorize_drawer .custom_checkbox_container:not(.checkbox_checked_state)
{
border: 2px solid #c4a8e8 !important;
}
.membership_offer_action_footer .membership_offer_accept_errors
{
margin: 0;
}
.membership_offer_action_buttons
{
display: flex;
gap: 8px;
}
.membership_offer_action_buttons .decline_membership_offer_class
{
flex: 1 1 0;
}
.membership_offer_action_buttons .accept_membership_offer_class
{
flex: 2 1 0;
}
/* the confirmation replaces the footer controls while it is open; keeping them in the layout underneath
avoids a jump when the patient keeps the invitation, while visibility and disabled states remove them
from the active confirmation surface */
.membership_offer_action_footer > .membership_offer_authorize_drawer,
.membership_offer_action_footer > .membership_offer_accept_errors,
.membership_offer_action_footer > .membership_offer_action_buttons
{
transition: opacity 120ms ease, visibility 120ms ease;
}
.membership_offer_action_footer.decline_confirmation_open > .membership_offer_authorize_drawer,
.membership_offer_action_footer.decline_confirmation_open > .membership_offer_accept_errors,
.membership_offer_action_footer.decline_confirmation_open > .membership_offer_action_buttons
{
opacity: 0;
visibility: hidden;
}
/* THE DECLINE CONFIRMATION stays inside the offer panel so a patient can back out without losing their
place in a long membership review. It rises over and replaces the action footer, with no seam between
the confirmation and the bottom of the panel. */
.membership_offer_decline_backdrop
{
position: absolute;
z-index: 24;
left: -12px;
right: -12px;
bottom: 0;
height: 100dvh;
padding: 0;
border: 0;
background: rgba(25, 20, 32, 0.3);
opacity: 0;
visibility: hidden;
transition: opacity 160ms ease, visibility 160ms ease;
pointer-events: none;
}
.membership_offer_decline_backdrop.open
{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.membership_offer_decline_sheet
{
position: absolute;
z-index: 25;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
padding: 10px 12px;
padding-bottom: calc(10px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
border-radius: var(--radius_lg) var(--radius_lg) 0 0;
background: var(--surface);
box-shadow: 0 -12px 28px rgba(46, 34, 62, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(18px);
transition: transform 180ms ease, opacity 160ms ease, visibility 160ms ease;
pointer-events: none;
}
.membership_offer_decline_sheet.open
{
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.membership_offer_decline_sheet_inner
{
padding: 0;
}
.membership_offer_decline_sheet_head
{
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
align-items: start;
gap: 12px;
}
.membership_offer_decline_sheet_icon
{
display: grid;
width: 36px;
height: 36px;
place-items: center;
border-radius: var(--radius_pill);
background: var(--danger_soft);
color: var(--danger);
font-size: 1rem;
}
.membership_offer_decline_sheet_title
{
color: var(--ink);
font-size: 0.92rem;
font-weight: 700;
line-height: 1.3;
}
.membership_offer_decline_sheet_sub
{
margin-top: 4px;
color: var(--muted);
font-size: 0.8rem;
line-height: 1.45;
}
.membership_offer_decline_sheet .membership_offer_decline_errors
{
margin: 12px 0 0;
}
.membership_offer_decline_sheet_actions
{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 12px;
}
.membership_offer_decline_cancel_button
{
margin-top: 8px;
border: 1px solid var(--line);
background: var(--surface);
box-shadow: none;
color: var(--muted);
font-size: 0.875rem;
font-weight: 500;
}
.membership_offer_decline_cancel_button:hover,
.membership_offer_decline_cancel_button:focus
{
border-color: var(--line);
background: var(--page);
box-shadow: none;
color: var(--muted);
transform: none;
}
@media (prefers-reduced-motion: reduce)
{
.membership_offer_action_footer > .membership_confirmation_row,
.membership_offer_action_footer > .membership_offer_accept_errors,
.membership_offer_action_footer > .membership_offer_action_buttons,
.membership_offer_decline_sheet,
.membership_offer_decline_backdrop
{
transition: none;
}
}
/* THE PAYMENT PICKER, FLATTENED INTO ITS CARD.
customer::display_booking_payments() is shared with the booking drawer, where it stands alone on a slide
and so carries its own surface: a white, brand-bordered, rounded selected-card tile and a bordered list
below it. Dropped inside .card_ndd on the offer panel that reads as a card inside a card. The component's
markup is not forked for one caller — these rules neutralise its inline surface within this panel only, so
the rows sit flush on the card like every other row on the screen. !important is required throughout
because the component sets these properties as inline style attributes. */
/* the last row carries its own 10px of padding, so .card_ndd's 20px underneath read as 30 against the 10px
above the hairline. Take the row's share back off the card so the block sits evenly inside it. */
.membership_offer_payment_card
{
padding-bottom: 10px;
}
/* the card holds clickable rows but is not itself clickable, so the .card_ndd hover lift is cancelled */
.membership_offer_payment_card:hover
{
border-color: var(--line);
box-shadow: var(--shadow_xs);
transform: none;
}
/* BOTH STATES OPEN ON THE SAME HAIRLINE. The selected row and the expanded list are toggled in and out of
the same slot, so the divider and the offset above the first line of content have to be identical in each
— otherwise opening the list moves everything below it down by the height of a border and its spacing. */
.membership_offer_payment_container .selected_payment_container,
.membership_offer_payment_container .mypayment_methods_container
{
border-top: 1px solid var(--line) !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* the selected card becomes a plain row of the card it sits in. Its 10px of top padding is what the first
list row gets from its own padding, so the two states line up to the pixel. */
.membership_offer_payment_container .selected_payment_table
{
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 10px 0 !important;
}
.membership_offer_payment_container .selected_payment_table > div > i
{
font-size: 1.35rem !important;
color: var(--brand) !important;
}
.membership_offer_payment_container .selected_payment_table > i
{
color: var(--brand) !important;
}
/* the list loses its own outline and radius — the shared hairline above is the only rule it needs */
.membership_offer_payment_container .mypayment_methods_container
{
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
border-radius: 0 !important;
}
.membership_offer_payment_container .payment_method_li,
.membership_offer_payment_container .add_new_payment_button
{
background: transparent !important;
border: none !important;
padding: 10px 0 !important;
}
.membership_offer_payment_container .payment_method_li + .payment_method_li,
.membership_offer_payment_container .add_new_payment_button
{
border-top: 1px solid var(--line) !important;
}
/* the list row's card icon matches the selected row's, so the same card is the same height in both states */
.membership_offer_payment_container .payment_method_li i
{
font-size: 1.35rem !important;
color: var(--brand) !important;
}
.membership_offer_payment_container .add_new_payment_button i
{
color: var(--brand) !important;
}
.membership_offer_payment_container .add_new_payment_button
{
color: var(--brand) !important;
}
/* the per-row Select is a quiet brand action beside the card it selects, not a filled button competing with
the panel's own Join button */
.membership_offer_payment_container .payment_method_li .btn
{
background: transparent !important;
color: var(--brand) !important;
font-weight: 600;
padding: 4px 0 !important;
}
/* the no-cards-on-file state renders only this button — it keeps its outline, since with nothing above it
there is no card-in-card to flatten. It carries no row padding of its own, so it supplies the 10px the
card gave up above */
.membership_offer_payment_container .add_payment_method_class
{
margin-top: 10px !important;
margin-bottom: 10px;
}
/* THE LEGAL ZONE AT THE FOOT OF A MEMBERSHIP OFFER — the limits card, then the authorization.
The limits keep the .card_ndd rhythm of the panel but lose the hover lift, since the card is not
clickable, and the heading drops to a quiet uppercase label so the eye reads it as terms rather than
as more of the offer. The authorization below it is deliberately NOT quietened to match: it reuses
.ec_terms_authorization_section from the establish-care flow — heavy brand border, brand heading,
white surface — because it is the only legally operative disclosure on the screen and must not be
typographically quieter than the copy selling the plan (legal-reviewer N1e). */
/* the limits card is not clickable, so the .card_ndd hover lift is cancelled */
.membership_offer_exclusions_card:hover
{
border-color: var(--line);
box-shadow: var(--shadow_xs);
transform: none;
}
/* a little extra air where the offer stops and the terms start — .mchat_messages already gaps by 10px */
.membership_offer_exclusions_card { margin-top: 8px; }
.membership_offer_exclusions_card .card_ndd_title
{
color: var(--muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
margin-bottom: 6px;
}
.membership_offer_exclusions_card .card_ndd_sub
{
font-size: 0.78rem;
line-height: 1.5;
}
/* NOT .plan_cov_list — that only strips the markers, so these bullets were rendering at inherited body
size with no gap between items, which is what made the card read as a dense block of text */
.membership_offer_limits_list
{
list-style: none;
padding: 0;
margin: 12px 0 0;
}
.membership_offer_limits_list li
{
position: relative;
padding-left: 15px;
margin-bottom: 11px;
color: var(--muted);
font-size: 0.8rem;
line-height: 1.6;
}
.membership_offer_limits_list li:last-child { margin-bottom: 0; }
.membership_offer_limits_list li b { color: var(--ink); font-weight: 600; }
.membership_offer_limits_list li::before
{
content: '';
position: absolute;
left: 2px;
top: 0.66em;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--muted);
opacity: 0.45;
}
/* add-family-member profile and focused language picker */
.add_family_panel .mchat_header,
.edit_language_panel .mchat_header
{
padding-top: env(safe-area-inset-top);
background: var(--brand);
}
.add_family_header_subtitle,
.edit_language_header_subtitle
{
margin-top: 2px;
color: rgba(255,255,255,0.72);
font-size: 0.7rem;
line-height: 1.3;
}
.add_family_step_badge,
.edit_language_step_badge
{
min-width: 48px;
display: inline-flex;
justify-content: center;
padding: 5px 8px;
border-radius: var(--radius_pill);
background: rgba(255,255,255,0.16);
color: rgba(255,255,255,0.9);
font-size: 0.66rem;
font-weight: 700;
}
.add_family_panel_messages,
.edit_language_panel_messages
{
gap: 0;
padding: 18px;
background: var(--page);
}
.add_family_section_label
{
margin: 18px 2px 8px;
color: var(--brand);
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.add_family_section_label:first-child
{
margin-top: 0;
}
.add_family_birth_gender_label
{
margin: 0 2px 8px;
}
.add_family_sex_grid
{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.add_family_field + .add_family_field
{
margin-top: 14px;
}
.add_family_field
{
width: 100%;
min-width: 0;
max-width: 100%;
}
.add_family_panel .input_ndd
{
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.add_family_dob_picker
{
position: relative;
width: 100%;
min-width: 0;
max-width: 100%;
overflow: hidden;
border-radius: var(--radius);
}
.add_family_dob_display
{
display: block;
pointer-events: none;
}
.add_family_dob
{
position: absolute;
inset: 0;
width: 100%;
min-width: 0;
max-width: 100%;
height: 100%;
padding: 0;
border: 0;
box-sizing: border-box;
opacity: 0;
cursor: pointer;
}
.add_family_dob_picker:focus-within .add_family_dob_display
{
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(134,94,191,0.12);
}
.add_family_clearable_input,
.add_family_language_search_group,
.edit_language_search_group
{
position: relative;
}
.add_family_clearable_input .input_ndd,
.add_family_language_search_group .input_ndd,
.edit_language_search_group .input_ndd
{
padding-right: 42px;
}
.add_family_input_clear,
.edit_language_input_clear
{
position: absolute;
top: 50%;
right: 7px;
width: 30px;
height: 30px;
padding: 0;
place-items: center;
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--muted);
cursor: pointer;
transform: translateY(-50%);
}
.add_family_input_clear:not(.hide_me),
.edit_language_input_clear:not(.hide_me)
{
display: grid;
}
.add_family_input_clear:hover,
.add_family_input_clear:focus,
.edit_language_input_clear:hover,
.edit_language_input_clear:focus
{
background: var(--brand_soft);
color: var(--brand);
outline: 0;
}
.add_family_sex_tile,
.add_family_relationship_tile
{
min-height: 42px;
padding: 8px 10px;
background: var(--surface);
font-size: 0.74rem;
font-weight: 650;
}
.add_family_relationship_grid
{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.add_family_selected_languages,
.edit_language_selected_languages
{
min-height: 30px;
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 10px;
}
.add_family_profile_language_chips
{
min-height: 0;
gap: 0;
margin-bottom: 0;
}
.add_family_profile_language_chips.has_selection
{
min-height: 30px;
gap: 7px;
margin-bottom: 10px;
}
.add_family_language_chip,
.edit_language_chip
{
min-height: 30px;
align-items: center;
gap: 6px;
padding: 0 10px;
border: 1px solid var(--brand);
border-radius: var(--radius_pill);
background: var(--brand_soft);
color: var(--brand);
font-size: 0.72rem;
font-weight: 700;
}
.add_family_language_chip:not(.hide_me),
.edit_language_chip:not(.hide_me)
{
display: inline-flex;
}
.add_family_language_chip i,
.edit_language_chip i
{
font-size: 0.82rem;
}
.add_family_language_picker_button
{
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
gap: 11px;
padding: 8px 11px;
border: 1.5px dashed var(--line);
border-radius: var(--radius);
background: rgba(255,255,255,0.58);
color: var(--brand);
text-align: left;
}
.add_family_language_picker_button:hover,
.add_family_language_picker_button:focus
{
border-color: var(--brand);
outline: 0;
box-shadow: 0 0 0 3px rgba(134,94,191,0.1);
}
.add_family_language_picker_icon
{
width: 30px;
height: 30px;
flex: none;
display: grid;
place-items: center;
border-radius: var(--radius);
background: var(--brand_soft);
color: var(--brand);
font-size: 1rem;
}
.add_family_language_picker_content
{
min-width: 0;
flex: 1;
}
.add_family_language_picker_label
{
display: block;
font-size: 0.74rem;
font-weight: 700;
}
.add_family_language_count
{
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 0.72rem;
}
.add_family_language_chevron
{
color: var(--brand);
font-size: 0.9rem;
}
.add_family_language_intro
{
margin-bottom: 14px;
}
.add_family_language_title
{
color: var(--ink);
font-size: 1.08rem;
font-weight: 800;
}
.add_family_language_copy
{
margin-top: 5px;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.5;
}
.add_family_language_search_group,
.edit_language_search_group
{
margin-bottom: 12px;
}
/* the edit-language panel pins search and the selected chips, and scrolls only the catalog beneath them */
.edit_language_fixed_top
{
flex: none;
}
.edit_language_scroll_area
{
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.add_family_language_options,
.edit_language_options
{
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.add_family_language_option,
.edit_language_option
{
width: 100%;
min-height: 50px;
display: flex;
align-items: center;
gap: 11px;
padding: 8px 13px;
border: 0;
border-bottom: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
text-align: left;
}
.add_family_language_option:last-child,
.edit_language_option:last-child
{
border-bottom: 0;
}
.add_family_language_option:hover,
.edit_language_option:hover
{
background: var(--page);
}
.add_family_language_option.selected,
.edit_language_option.selected
{
background: var(--brand_soft);
}
.add_family_language_check,
.edit_language_check
{
width: 22px;
height: 22px;
flex: none;
display: grid;
place-items: center;
border: 1.5px solid var(--line);
border-radius: 6px;
color: transparent;
font-size: 0.72rem;
}
.add_family_language_option.selected .add_family_language_check,
.edit_language_option.selected .edit_language_check
{
border-color: var(--brand);
background: var(--brand);
color: var(--surface);
}
.add_family_language_name,
.edit_language_name
{
flex: 1;
font-size: 0.8rem;
font-weight: 650;
}
.add_family_language_empty,
.edit_language_empty
{
padding: 24px 14px;
color: var(--muted);
font-size: 0.8rem;
text-align: center;
}
.add_family_panel_footer,
.edit_language_panel_footer
{
flex-direction: column;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
border-top: 0;
background: var(--surface);
box-shadow: none;
}
.add_family_panel_footer .visit_info_errors,
.edit_language_panel_footer .edit_language_errors
{
margin-bottom: 10px;
}
@media (max-width: 480px)
{
.add_family_panel_messages,
.edit_language_panel_messages
{
padding: 15px;
}
}
@media (max-width: 380px)
{
.add_family_relationship_grid
{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ── Booking needs fork — "what do you need?" (metered_async_requests.md §4) ── */
/* two across, three down — "a full visit" leads it and the five specific asks follow. Two columns rather than
three because these tiles carry a label AND a usage figure: at a third of a phone's width the labels wrap to
three lines and the meter has nowhere to sit. Half-width tiles hold both on one line each. */
/* the standard selection state — same values as .tile_ndd.selected and .active_appointment_class */
.async_request_tile.selected
{
background: var(--brand_soft);
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 700;
padding: 15.5px 9.5px;
}
/* "a full visit" is the exclusive branch, not one of the asks. It is marked by a filled icon rather than a
tinted face: the tile surface has to stay white so that going brand_soft still means one thing only —
selected. A tinted unselected tile reads as already chosen. */
.async_request_full_visit .async_request_option_icon
{
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--brand);
color: white;
font-size: 1.35rem;
}
/* the tick sits in the corner of the tile rather than at the end of a row */
/* member's standing on this line, inside a grid tile — one number, pending already netted out */
.request_meter_included
{
color: var(--green);
}
.request_meter_extra
{
color: var(--muted);
}
.async_request_tile.selected .request_meter_included,
.async_request_tile.selected .request_meter_extra
{
color: var(--brand);
opacity: 0.9;
}
/* ── Guided intake questions on the check-in description slide ── */
.check_v2_guided_tabs
{
display: flex;
gap: 6px;
padding: 4px;
margin-bottom: 14px;
border-radius: var(--radius);
background: var(--page);
}
.check_v2_guided_tab
{
flex: 1 1 0;
padding: 9px 10px;
border: 0;
border-radius: calc(var(--radius) - 3px);
background: transparent;
color: var(--muted);
font-size: 0.82rem;
font-weight: 600;
}
.check_v2_guided_tab_active
{
background: var(--surface);
color: var(--brand);
font-weight: 700;
box-shadow: 0 1px 3px rgba(55, 41, 68, 0.1);
}
.check_v2_guided_field
{
margin-bottom: 18px;
}
.check_v2_guided_label
{
font-size: 0.86rem;
font-weight: 700;
line-height: 1.35;
color: var(--ink);
margin-bottom: 3px;
}
.check_v2_guided_required
{
margin-left: 3px;
color: var(--brand);
}
.check_v2_guided_help
{
font-size: 0.76rem;
line-height: 1.4;
color: var(--muted);
margin-bottom: 8px;
}
.check_v2_guided_input
{
width: 100%;
min-height: 46px;
padding: 10px 12px;
border: 1.5px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
color: var(--ink);
font-size: 0.9rem;
outline: none;
}
.check_v2_guided_input:focus
{
border-color: var(--brand);
}
.check_v2_guided_textarea
{
min-height: 84px;
line-height: 1.45;
resize: vertical;
}
/* two dates side by side — a range reads as one question, not two */
.check_v2_guided_range
{
display: flex;
gap: 8px;
}
.check_v2_guided_range_label
{
flex: 1 1 0;
min-width: 0;
font-size: 0.74rem;
font-weight: 600;
color: var(--muted);
}
.check_v2_guided_range_label .check_v2_guided_input
{
margin-top: 3px;
}
.check_v2_guided_options
{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* the standard selection state — same values as .tile_ndd.selected and .active_appointment_class */
.check_v2_guided_option
{
min-height: 40px;
padding: 9px 14px;
border: 1.5px solid var(--line);
border-radius: 20px;
background: var(--surface);
color: var(--ink);
font-size: 0.82rem;
font-weight: 600;
}
.check_v2_guided_option.selected
{
background: var(--brand_soft);
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 700;
padding: 8px 13px;
}
/* why the figures above read the way they do — an explanation card under the invoice, not a line of it */
.membership_coverage_card
{
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 12px;
padding: 11px 13px;
border: 1px solid var(--brand_soft);
/* the booking review slide's cards are all --radius_sm; this sits inside the invoice card */
border-radius: var(--radius_sm);
background: var(--brand_soft);
}
.membership_coverage_card_icon
{
flex: 0 0 auto;
margin-top: 1px;
color: var(--brand);
font-size: 0.95rem;
}
.membership_coverage_card_text
{
flex: 1 1 auto;
min-width: 0;
font-size: 0.82rem;
line-height: 1.45;
color: var(--brand);
}
/* member's live standing on a metered line, inside the Care Team coverage panel */
.plan_cov_meter
{
grid-column: 2;
margin-top: 3px;
font-size: 0.72rem;
font-weight: 600;
}
/* provider close review of declared request items (metered_async_requests.md §5) */
.appt_request_summary_list
{
margin-top: 8px;
}
.appt_request_summary_row
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 4px 0;
}
.appt_request_summary_label
{
font-size: 0.85rem;
color: var(--ink);
}
.appt_request_summary_origin
{
display: block;
font-size: 0.7rem;
font-weight: 600;
color: var(--muted);
}
.appt_request_panel_intro
{
font-size: 0.82rem;
color: var(--muted);
line-height: 1.5;
margin-bottom: 14px;
}
.appt_request_panel_item
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius_lg);
padding: 12px 14px;
margin-bottom: 10px;
}
.appt_request_panel_item_head
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.appt_request_panel_label
{
font-size: 0.92rem;
font-weight: 600;
color: var(--ink);
}
.appt_request_panel_meter
{
margin-top: 5px;
font-size: 0.72rem;
font-weight: 600;
}
.appt_request_panel_actions
{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
/* Adding a request item the patient did not declare at booking. */
.appt_request_panel_add
{
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.appt_request_panel_add_label
{
font-size: 0.82rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 4px;
}
.appt_request_panel_add_hint
{
font-size: 0.75rem;
color: var(--muted);
line-height: 1.45;
margin-bottom: 10px;
}
.appt_request_add_btn
{
display: block;
width: 100%;
text-align: left;
margin-bottom: 6px;
}
.appt_request_add_meter
{
display: block;
margin-top: 2px;
font-size: 0.7rem;
font-weight: 600;
}
/* Authenticated profile-claim confirmation and merge review. */
.profile_claim_confirmation_body
{
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
padding: 18px;
background: #f8f8f8;
}
.profile_claim_confirmation_footer
{
display: block;
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
border-top: 0;
background: #f8f8f8;
box-shadow: none;
}
.profile_claim_step_badge
{
align-self: flex-start;
padding: 5px 9px;
border-radius: var(--radius_pill, 999px);
background: var(--brand_soft, #f3e8ff);
color: var(--brand, #865ebf);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.profile_claim_step_badge.verified
{
background: #e9f8ef;
color: #217a46;
}
.profile_claim_heading
{
color: var(--ink, #282530);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.35;
}
.profile_claim_intro
{
color: var(--muted, #706c78);
font-size: 0.88rem;
line-height: 1.55;
}
.profile_claim_dob
{
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.profile_claim_details
{
overflow: hidden;
border: 1px solid var(--line, #e5e2e9);
border-radius: var(--radius_lg, 14px);
background: var(--surface, #fff);
}
.profile_claim_detail_row
{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 11px 13px;
border-bottom: 1px solid var(--line, #e5e2e9);
color: var(--muted, #706c78);
font-size: 0.84rem;
}
.profile_claim_detail_row:last-child
{
border-bottom: 0;
}
.profile_claim_detail_row strong
{
max-width: 62%;
color: var(--ink, #282530);
font-weight: 650;
text-align: right;
overflow-wrap: anywhere;
}
.profile_claim_access_heading
{
margin-top: 8px;
}
.profile_claim_merge_note
{
display: flex;
align-items: flex-start;
gap: 9px;
padding: 11px 12px;
border-radius: var(--radius, 10px);
background: var(--brand_soft, #f3e8ff);
color: var(--brand, #865ebf);
font-size: 0.8rem;
line-height: 1.45;
}
.profile_claim_merge_note i
{
flex-shrink: 0;
margin-top: 1px;
}
.appt_request_decline_box
{
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
/* ── Join an existing household membership — priced breakdown lines ── */
.hj_line {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 8px 0;
font-size: 0.875rem;
color: var(--ink);
border-bottom: 1px solid #f0f0f0;
}
.hj_line:last-of-type {
border-bottom: none;
}
.hj_line_credit {
color: var(--brand);
font-weight: 600;
}
.hj_line_total {
font-weight: 800;
font-size: 1rem;
border-top: 1px solid #e5e5e5;
border-bottom: none;
padding-top: 10px;
}
.hj_note {
font-size: 0.75rem;
color: var(--muted);
line-height: 1.45;
margin-top: 8px;
}
/* ── Household join panel — tighter card rhythm than the default card_ndd stack ── */
.hj_messages {
padding: 10px;
gap: 10px;
}
.hj_card {
padding: 14px 16px;
}
/* static breakdown cards, not clickable — cancel the default card_ndd hover lift */
.hj_card:hover {
box-shadow: var(--shadow_xs);
border-color: var(--line);
transform: none;
}
/* the plan row IS clickable, so it keeps a lift */
.hj_plan_row {
display: flex;
align-items: center;
gap: 12px;
}
.hj_plan_body {
flex: 1;
min-width: 0;
}
.hj_plan_label {
font-size: 0.7rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hj_plan_name {
font-size: 0.95rem;
font-weight: 700;
color: var(--ink);
}
.hj_plan_meta {
font-size: 0.78rem;
color: var(--muted);
text-align: right;
flex-shrink: 0;
}
.hj_plan_chevron {
color: #ccc;
flex-shrink: 0;
}
.hj_confirm_check {
padding: 10px;
background: rgba(134,94,191,0.07);
border-radius: 8px;
margin-bottom: 10px;
font-size: 0.82rem;
line-height: 1.4;
}
.hj_card_row {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 0;
}
.hj_card_icon {
width: 38px;
height: 38px;
border-radius: 8px;
background: var(--brand_soft);
color: var(--brand);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.05rem;
}
.hj_card_body {
flex: 1;
min-width: 0;
}
.hj_card_name {
font-size: 0.9rem;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.02em;
}
.hj_card_meta {
font-size: 0.75rem;
color: var(--muted);
margin-top: 2px;
}
/* phones give the breakdown the full width — a side-panel that is already the whole screen does not
need a second inset around every card */
@media (max-width: 575.98px) {
.hj_messages {
padding: 8px;
gap: 8px;
}
.hj_card {
padding: 12px 13px;
border-radius: 10px;
}
.hj_line {
font-size: 0.82rem;
padding: 6px 0;
}
.hj_line_total {
font-size: 0.95rem;
}
.hj_plan_meta {
font-size: 0.72rem;
}
}
/* ================= compliance requirement view =================
These rules live in global.css, NOT admin_portal.css. admin_portal::is_enabled() returns false on
production, so admin_portal.css is never served on www.nextdaydoctor.com and anything scoped to
.admin_table / .admin_record_list is unstyled there. This view must stand on its own. */
/* the framework tables carry six columns including two long text columns; on anything narrower than
the table they scroll INSIDE this wrapper so the page itself never moves sideways */
.compliance_table_scroll
{
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ---------- mobile record cards ---------- */
/* the table and the cards are rendered from the same rows; exactly one is ever shown */
.compliance_record_list
{
display: none;
}
.compliance_record_card
{
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 10px;
}
.compliance_record_gap
{
background: #fdf2f2;
border-color: #f2c2c2;
}
.compliance_record_title
{
font-size: 13px;
font-weight: 700;
color: #222;
line-height: 1.45;
margin-bottom: 8px;
}
.compliance_record_row
{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 3px 0px;
}
.compliance_record_label
{
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #888;
flex-shrink: 0;
}
.compliance_record_value
{
font-size: 12.5px;
color: #333;
text-align: right;
min-width: 0;
overflow-wrap: anywhere;
}
/* ---------- search ---------- */
.compliance_requirement_search_bar
{
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 16px;
}
.compliance_requirement_search_input
{
flex: 1;
height: 46px;
padding: 0px 16px;
font-size: 15px;
color: #222;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.compliance_requirement_search_input::placeholder
{
color: #999;
}
.compliance_requirement_search_input:focus
{
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand_soft);
}
.compliance_requirement_search_count
{
font-size: 12px;
color: #666;
white-space: nowrap;
}
/* flex lives here rather than inline so the mobile two-up rule below can actually win */
.compliance_summary_tile
{
flex: 1 1 0%;
}
.compliance_requirement_search_empty
{
background: #f7f7f7;
border-radius: 8px;
padding: 24px;
margin-bottom: 20px;
text-align: center;
font-size: 13px;
color: #666;
}
@media(max-width: 767px)
{
.compliance_table_scroll
{
display: none;
}
.compliance_record_list
{
display: block;
}
.compliance_summary_tile
{
flex: 1 1 calc(50% - 6px);
}
.compliance_requirement_search_bar
{
flex-wrap: wrap;
gap: 6px;
}
.compliance_requirement_search_input
{
flex: 1 1 100%;
}
.compliance_requirement_search_count
{
width: 100%;
text-align: right;
}
}
/* Control keys and verification summaries behave like compact table text while remaining keyboard-
accessible buttons. The same class is reused inside mobile cards and side panels. */
.compliance_inline_link
{
display: inline;
appearance: none;
border: 0;
background: transparent;
color: var(--brand);
padding: 0;
margin: 0;
font: inherit;
line-height: inherit;
text-align: left;
text-decoration: underline dotted;
cursor: pointer;
}
.compliance_inline_link:hover,
.compliance_inline_link:focus-visible
{
color: var(--brand_dark);
text-decoration-style: solid;
}
.compliance_inline_link:focus-visible
{
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 2px;
}
.mchat_header .compliance_inline_link,
.mchat_header .compliance_inline_link:hover,
.mchat_header .compliance_inline_link:focus-visible
{
color: var(--surface);
}
@media(max-width: 767px)
{
.compliance_record_card .compliance_inline_link
{
display: inline-flex;
align-items: center;
min-width: 44px;
min-height: 44px;
padding: 6px 4px;
margin: -6px -4px;
}
}
/* ---------- citation / document side panels ---------- */
/* add_window() sizes the panel to var(--safe-height, 100vh). 100vh is the LARGE viewport, so on a
mobile browser showing its chrome the foot of the panel sits below the fold, and because
bodyScrollLock is pointed at .mchat_messages the panel itself cannot be dragged up to reach it.
Pinning to the DYNAMIC viewport keeps every scrollable pixel inside the locked element.
open_compliance_panel() matches this on the panel's own inline height. */
.compliance_side_panel
{
height: var(--safe-height, 100dvh);
min-height: 0;
max-height: var(--safe-height, 100dvh);
}
.compliance_side_panel .mchat_messages
{
display: block;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* nothing sits in the footer of either panel, so it must not reserve height it never uses */
.compliance_side_panel .mchat_input:empty
{
padding-top: 0px;
padding-bottom: env(safe-area-inset-bottom);
}
/* the verbatim CFR section, stored locally and rendered with the panel — see
claude/scripts/import_ecfr_sections.php */
.compliance_regulation_block
{
background: white;
border-radius: 8px;
padding: 14px 16px;
margin-top: 12px;
}
.compliance_regulation_head
{
font-size: 13px;
font-weight: 700;
color: var(--brand);
padding-bottom: 8px;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
}
.compliance_regulation_block p
{
font-size: 12.5px;
line-height: 1.6;
color: #333;
margin-bottom: 10px;
}
.compliance_regulation_block p:last-child
{
margin-bottom: 0px;
}
.compliance_regulation_cita
{
font-size: 11px;
color: #888;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid #eee;
}
/* which text the programme was assessed against — the answer to an auditor's first question */
.compliance_regulation_asof
{
font-size: 11px;
color: #999;
margin-top: 8px;
}
/* ===== STAFF-BOOKED VISIT — PATIENT REVIEW & CONFIRM PANEL =====
One list row per requirement, each stating status only, so "what is left" is scannable in a single pass
without reading a word. Anything needing an answer opens its own stacked drawer from its row. Rendered by
render_staff_booked_setup_panel_html() / visit_setup_row_html() / render_staff_booked_step_panel_html(). */
.vsetup_header_sub
{
font-size: 0.75rem;
color: rgba(255,255,255,0.75);
margin-top: 2px;
}
/* .mchat_messages is a flex column with a 10px gap, which is wrong for a summary card stacked over a list
card. .vsetup_footer likewise overrides .mchat_input's flex row, which would otherwise lay the attestation
checkbox and the Confirm button out side by side. */
.vsetup_messages
{
display: block;
background: #f8f8f8;
padding: 16px;
}
.vsetup_summary_card
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius_lg);
padding: 4px 14px;
margin-bottom: 14px;
box-shadow: var(--shadow_xs);
}
.vsetup_summary_row
{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 10px 0px;
border-bottom: 1px solid var(--line);
}
.vsetup_summary_row:last-child
{
border-bottom: none;
}
.vsetup_summary_label
{
font-size: 0.72rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
flex-shrink: 0;
}
.vsetup_summary_value
{
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
text-align: right;
}
/* one list card holding every requirement row — the whole review is a single scannable list, and anything
that needs an answer is answered in a drawer opened from its row rather than inline */
.vsetup_list
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius_lg);
overflow: hidden;
box-shadow: var(--shadow_xs);
}
.vsetup_row
{
display: flex;
align-items: center;
gap: 11px;
padding: 13px 14px;
border-bottom: 1px solid var(--line);
background: var(--surface);
width: 100%;
text-align: left;
}
.vsetup_row:last-child
{
border-bottom: none;
}
.vsetup_row_tappable
{
cursor: pointer;
transition: background 0.15s;
}
.vsetup_row_tappable:hover
{
background: var(--brand_soft);
}
/* a row the patient still has to act on is the only thing in the list that draws the eye. An inset shadow
rather than a background, so it cannot cancel out the hover state defined above. */
.vsetup_row_todo
{
box-shadow: inset 3px 0px 0px var(--gold);
}
.vsetup_row_text
{
flex: 1;
min-width: 0;
}
.vsetup_row_title
{
font-size: 0.9rem;
font-weight: 700;
color: var(--ink);
line-height: 1.3;
}
.vsetup_row_sub
{
font-size: 0.78rem;
color: var(--muted);
margin-top: 2px;
line-height: 1.35;
}
.vsetup_chevron
{
color: var(--muted);
font-size: 0.8rem;
flex-shrink: 0;
}
/* the step drawers stacked over the review list — plain prose plus one control, so they only need the
panel padding the review list already sets */
.vsetup_step_body p
{
font-size: 0.85rem;
color: var(--ink);
line-height: 1.45;
margin-bottom: 10px;
}
.vsetup_doc_card
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius_lg);
padding: 2px 14px;
}
/* an overflow menu is a secondary action, but it still has to be tappable — btn-sm alone lands at 32px,
under the 44px touch minimum */
.vsetup_more_button
{
border-radius: var(--radius);
min-width: 40px;
min-height: 40px;
padding: 4px 8px;
}
.vsetup_more_menu .dropdown-item
{
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 8px;
}
.vsetup_more_cancel
{
color: var(--danger);
}
.vsetup_marker
{
width: 26px;
height: 26px;
border-radius: var(--radius_pill);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.85rem;
}
.vsetup_marker_done
{
background: var(--green);
color: var(--surface);
}
.vsetup_marker_todo
{
background: var(--brand_soft);
color: var(--brand);
}
.vsetup_marker_info
{
background: var(--page);
color: var(--muted);
border: 1px solid var(--line);
}
/* the cost components rendered inline under the Visit cost row — ToS 5.2 requires each component AND the
total to be SHOWN before confirmation, which a drawer the patient may never open does not discharge */
.vsetup_row_breakdown
{
padding-top: 0px;
padding-left: 51px;
}
.vsetup_breakdown
{
width: 100%;
border-left: 2px solid var(--line);
padding-left: 12px;
}
.vsetup_breakdown_line
{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-size: 0.78rem;
color: var(--muted);
padding: 2px 0px;
}
/* a figure the row exists to state — a price, never a status word. The marker column is the status, which is
why the rows carry no pills. */
.vsetup_row_value
{
flex-shrink: 0;
font-size: 0.9rem;
font-weight: 700;
color: var(--ink);
}
/* the total line inside a cost breakdown card */
.vsetup_cost_total .vsetup_summary_label,
.vsetup_cost_total .vsetup_summary_value
{
font-size: 0.95rem;
font-weight: 700;
color: var(--ink);
text-transform: none;
letter-spacing: normal;
}
.vsetup_note
{
font-size: 0.78rem;
color: var(--muted);
line-height: 1.45;
}
/* a choice the patient makes, not an action they take — long option text has to wrap, which .btn_ndd
(white-space: nowrap) cannot do */
.vsetup_option
{
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 10px;
text-align: left;
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: var(--radius);
padding: 12px 14px;
margin-top: 8px;
font-family: var(--font);
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.vsetup_option:hover
{
border-color: var(--brand);
background: var(--brand_soft);
color: var(--brand);
}
.vsetup_option_label
{
line-height: 1.35;
}
.vsetup_option .bi
{
color: var(--brand);
flex-shrink: 0;
}
.vsetup_doc_list
{
margin: 0px;
padding: 0px;
}
.vsetup_doc_row
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 0px;
border-bottom: 1px solid var(--line);
list-style: none;
}
.vsetup_doc_row:last-child
{
border-bottom: none;
}
.vsetup_doc_name
{
display: flex;
align-items: center;
gap: 9px;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
}
.vsetup_doc_done_icon
{
color: var(--green);
}
.vsetup_doc_todo_icon
{
color: var(--brand);
}
.vsetup_doc_done_label
{
font-size: 0.75rem;
font-weight: 600;
color: var(--green);
flex-shrink: 0;
}
.vsetup_footer
{
display: block;
background: var(--surface);
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
/* the same branded attestation box the booking clickwrap and the membership authorization use, so an
attestation looks identical everywhere one is taken */
.vsetup_confirm_attest
{
margin-bottom: 12px;
}
/* FIGHT PHYSICAL FORMS (CMR-2026-10-06-217) — guided exam slides + practice form library */
.fp_slide_container { background: var(--surface); border-radius: var(--radius_lg); padding: 16px; box-shadow: var(--shadow_xs); }
.fp_slide_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fp_stage_chip { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: var(--radius_pill); background: var(--brand_soft); color: var(--brand); }
.fp_stage_measure { background: var(--blue_soft); color: var(--blue); }
.fp_stage_examine { background: var(--teal_soft); color: var(--teal); }
.fp_stage_results, .fp_stage_decide, .fp_stage_sign { background: var(--green_soft); color: var(--green); }
.fp_step_count { font-size: 0.75rem; color: var(--muted); }
.fp_slide_title { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.fp_slide_title i { color: var(--brand); margin-right: 4px; }
.fp_saved_note { font-size: 0.75rem; color: var(--muted); text-align: right; margin-bottom: 6px; }
.fp_field_row { margin-bottom: 16px; }
.fp_field_row.fp_abnormal { border-left: 3px solid var(--gold); padding-left: 10px; }
.fp_field_row.fp_missing { border-left: 3px solid var(--danger); padding-left: 10px; }
.fp_field_row.fp_missing .fp_field_label { color: var(--danger); }
.fp_field_row.fp_missing .input_ndd, .fp_field_row.fp_missing .fp_choice_button, .fp_field_row.fp_missing .fp_check_tile { border-color: var(--danger); }
.fp_check_none { grid-column: 1 / -1; text-align: center; }
.fp_mark_normal_button { margin-bottom: 14px; }
.fp_field_label { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.fp_hint { font-size: 0.8rem; color: var(--muted); margin: 4px 0 8px; }
.fp_choice_group { display: flex; gap: 8px; }
.fp_choice_grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.fp_choice_button, .fp_check_tile { flex: 1 1 0; min-height: 52px; padding: 8px 10px; border: 2px solid var(--line); border-radius: var(--radius_lg); background: #fdfcff; color: var(--ink); font-size: 1rem; font-weight: 600; user-select: none; }
.fp_choice_button.selected, .fp_check_tile.selected { background: var(--brand_soft); border: 2px solid var(--brand); color: var(--brand); font-weight: 700; }
.fp_abnormal .fp_choice_button.selected { background: var(--gold_soft); border-color: var(--gold); color: var(--ink); }
.fp_check_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fp_check_tile { font-size: 0.9rem; min-height: 48px; text-align: left; }
.fp_comment_input { margin-top: 8px; }
.fp_quick_container { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fp_quick_chip { border: 1.5px solid #e0cefc; background: var(--brand_soft); color: var(--brand); border-radius: var(--radius_pill); padding: 6px 14px; font-size: 0.85rem; font-weight: 600; }
.fp_stepper_container { display: flex; align-items: center; gap: 10px; }
.fp_stepper_button { width: 52px; height: 52px; border-radius: var(--radius_lg); border: 2px solid var(--line); background: #fdfcff; color: var(--brand); font-size: 1.4rem; }
.fp_stepper_value { width: 80px; text-align: center; font-size: 1.2rem; font-weight: 700; }
.fp_split_container { display: flex; align-items: center; gap: 8px; }
.fp_split_container input { width: 90px; text-align: center; font-size: 1.1rem; }
.fp_split_container span { color: var(--muted); font-weight: 600; }
.fp_table_row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 6px; }
.fp_hop_timer_container { background: var(--blue_soft); border-radius: var(--radius_lg); padding: 14px; margin-bottom: 16px; text-align: center; }
.fp_hop_timer_display { font-size: 2.4rem; font-weight: 800; color: var(--blue); margin: 4px 0 10px; font-variant-numeric: tabular-nums; }
.fp_timer_done .fp_hop_timer_display { color: var(--gold); }
/* .mchat_input is a flex row for chat composers; this panel stacks progress over the Back/Next row */
.mchat_input.fp_nav_input { flex-direction: column; align-items: stretch; }
.fp_progress_container { display: flex; gap: 3px; margin-bottom: 10px; }
.fp_progress_segment { flex: 1 1 0; height: 6px; border-radius: var(--radius_pill); background: var(--line); cursor: pointer; }
.fp_progress_segment.done { background: var(--brand_hover); }
.fp_progress_segment.current { background: var(--brand); }
.fp_nav_container { display: flex; gap: 10px; }
.fp_nav_container .fp_back_button { flex: 1 1 0; }
.fp_nav_container .fp_next_button { flex: 2 1 0; }
.fp_back_button:disabled { opacity: 0.4; }
/* skip is navigation, so it sits under Back/Next rather than in the slide -- quiet, and never beside an answer */
.fp_skip_step_button { margin-top: 8px; }
/* a skipped slide is behind the current one and still unanswered, so it reads as neither done nor untouched */
.fp_progress_segment.skipped { background: var(--gold); }
.fp_pdf_container { width: 100%; }
.practice_form_row_container { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: var(--radius_lg); padding: 10px; margin-bottom: 8px; }
.practice_form_row_text { flex: 1; cursor: pointer; min-width: 0; }
.practice_form_row_meta { font-size: 0.8em; color: var(--muted); }
.practice_form_empty_container { padding: 20px; text-align: center; color: var(--muted); }
/* the card is the upload panel's only child, inside .mchat_messages' own 15px padding -- no margin of its own */
.practice_form_upload_container { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
/* PRACTICE SERVICE LINES list — the toolbar and the delivery-mode groups above the rows. The rows carry their own
.service_line_list_row_container rather than reusing .service_line_row_container below, which belongs to the
editor's repeating text-input rows: that one sets align-items: flex-start and a .form-control rule meant for an
input, and its remove-row handler selects on it. */
.service_line_toolbar_container { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
/* the name filter wraps rather than shrinking: .segmented_ndd_option is flex: 1 1 0, so a practice with several
names would otherwise squeeze every pill until none of them could be read */
.service_line_dba_filter_container { flex-wrap: wrap; }
.service_line_dba_filter_container .segmented_ndd_option { flex: 1 1 auto; min-width: 104px; }
.service_line_group_container { margin-bottom: 18px; }
.service_line_group_container:last-of-type { margin-bottom: 0; }
.service_line_group_header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.service_line_group_count { font-weight: 600; color: var(--muted); }
.service_line_search_empty_container { padding: 20px; text-align: center; color: var(--muted); }
/* PRACTICE SERVICE LINES editor (CMR-2026-10-12-264) */
.service_line_label { display: block; margin: 14px 0 6px; font-size: 0.85em; font-weight: 600; color: var(--ink); }
/* delivery modes and audience are both tap-to-select grids: two across in the side panel, so four
delivery tiles wrap to 2x2 instead of overflowing a phone-width panel, and four across once there is room */
.service_line_mode_container,
.service_line_audience_container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.service_line_mode_container .tile_ndd,
.service_line_audience_container .tile_ndd { padding: 12px 10px; cursor: pointer; }
@media (min-width: 560px)
{
.service_line_mode_container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* where an in-person service is provided (CMR-2026-11-03-538): the group slides open under the delivery
tiles. One place per row rather than a grid, because each carries a full street address under its name. */
.service_line_places_group { margin-top: 4px; }
.service_line_places_group .service_line_label { margin-top: 10px; }
.service_line_place_note { margin-bottom: 6px; }
.service_line_place_container { display: flex; flex-direction: column; gap: 8px; }
.service_line_place_container .tile_ndd { padding: 12px 10px; cursor: pointer; text-align: left; }
/* both documented exceptions for a selection whose label is text that can wrap (design_system.md): a place name
and its street address wrap at panel width, so selection must not change the weight — 600 to 700 re-wraps the
row as it is tapped — and the address is body-size text, where --brand on --brand_soft is about 2.7:1 once the
shared class's 0.75 opacity is applied. --brand_dark at full opacity carries it. The border is 2px in both
states already, so nothing moves. */
.service_line_place_container .tile_ndd.selected .tile_primary { font-weight: 600; color: var(--brand_dark); }
.service_line_place_container .tile_ndd.selected .tile_secondary { color: var(--brand_dark); opacity: 1; }
/* the editor header holds the AI button and, on a saved line, the tools menu */
.service_line_header_actions_container { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
/* repeating Included / Not included / Questions rows: the field takes the width, the x sits beside it */
.service_line_rows_container { display: flex; flex-direction: column; gap: 6px; }
.service_line_row_container { display: flex; align-items: flex-start; gap: 6px; }
.service_line_row_container .form-control { flex: 1; min-width: 0; }
.service_line_faq_fields_container { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.service_line_remove_row_class { flex: 0 0 auto; line-height: 1; padding: 6px 10px; }
.service_line_add_row_class { margin-top: 6px; }
.service_line_performers_container { background: var(--surface); border-radius: var(--radius_lg); padding: 8px 12px; }
.service_line_performer_label { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.9em; }
.service_line_performer_label input { accent-color: var(--brand); }
.service_line_price_table { width: 100%; margin-top: 8px; font-size: 0.85em; color: var(--muted); }
.service_line_price_table td { padding: 2px 0; }
.service_line_price_table td:last-child { text-align: right; }
.service_line_price_table tr.bold td { color: var(--ink); }
/* SERVICE LINE INTAKE FORMS (CMR-2026-10-25-439) — the question builder in the editor's tools menu */
/* each question is a block of four fields, so it reads as a card rather than as loose stacked inputs */
.service_line_intake_rows { display: flex; flex-direction: column; gap: 10px; }
.service_line_intake_row_container { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border-radius: var(--radius_lg); padding: 10px; }
.service_line_intake_field_row { display: flex; align-items: center; gap: 6px; }
/* ONE ROW PER ANSWER IN THE BUILDER, replacing a one-answer-per-line textarea, because each answer now holds
what the practice says it means and a textarea has nowhere to put that. The row is a card so the two
checkboxes read as belonging to the answer above them rather than to the question. */
.service_line_intake_answers_container { margin-top: 10px; }
.service_line_intake_answer_rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.service_line_intake_answer_row { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
/* the flags stack: each label is a whole sentence, so side by side they wrap into each other on a phone */
.service_line_intake_answer_flags { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.service_line_intake_answer_flag_label { font-size: 0.78rem; line-height: 1.4; align-items: flex-start; }
/* the box keeps its size beside a sentence long enough to wrap; a form control in a flex row is one of the
few things a browser will squash, and a half-width checkbox reads as a rendering fault */
.service_line_intake_answer_flag_label input { flex: 0 0 auto; margin-top: 2px; }
.service_line_intake_field_row .form-control,
.service_line_intake_field_row .form-select { flex: 1; min-width: 0; }
.service_line_intake_remove_row_class { flex: 0 0 auto; line-height: 1; padding: 6px 10px; }
/* the checkbox and its word must not be squeezed by the answer-kind select beside it */
.service_line_intake_required_label { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.service_line_intake_add_row_button { margin-top: 6px; }
/* .mchat_input is a flex row for chat composers; this footer stacks Approve over Save */
.service_line_intake_footer_container { width: 100%; display: flex; flex-direction: column; align-items: stretch; }
/* the editor panel's footer bar on a surface that has no action of its own — the intake form as a record puts
its actions in the header menu. Scoped rather than left to .hide_me alone: .hide_me and .mchat_input are both
single-class selectors and .mchat_input's display:flex is declared later in this file, so it wins. */
.mchat_input.service_line_editor_footer.hide_me { display: none; }
/* the card in the editor saying this service asks the patient something */
.service_line_intake_card_container { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.service_line_intake_card_actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.service_line_intake_card_actions .btn_ndd { flex: 1 1 auto; }
/* PREFERRED MEDICATIONS ON A SERVICE LINE — CMR-2026-10-31-498.
The rows themselves reuse .practice_form_row_container and the prescribing surface's own medication card,
both of which already carry their padding and spacing; only what those two do not cover is declared here. */
/* the editor card's per-medicine summary lines. Clamped to one line each: twelve medicines would otherwise
make this the tallest thing in the editor, and the card is a summary with a way in, not the list. */
/* one line item per medicine: the catalogue name over its directions. The name is allowed to wrap rather
than truncate — a strength clipped off the end is the part that matters. */
.slm_card_items_container .slm_card_item_container { padding: 5px 0; border-bottom: 1px solid var(--line); }
.slm_card_items_container .slm_card_item_container:last-child { border-bottom: none; padding-bottom: 0; }
.slm_card_items_container .slm_card_item_container:first-child { padding-top: 0; }
.slm_card_item_name { font-weight: 600; overflow-wrap: anywhere; }
.slm_card_item_sig { margin-top: 1px; overflow-wrap: anywhere; }
/* one row of the prescribing surface's section: the card the panel already understands, with a line under it
saying whose directions these are. Its parent .weno_recent_medication_list is a grid, so each of these is
one grid item and the card inside it keeps its own full width. */
.slm_prescriber_row_container { display: grid; gap: 6px; }
/* wrap is required, not cosmetic: the badge and the button sit on one line on a desktop and need their own
lines on a phone, and without it the button is squeezed to nothing rather than moving down. */
.slm_prescriber_row_footer { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; padding: 0 2px 2px; }
.slm_prescriber_row_footer .btn_ndd { margin-left: auto; }
/* a white row on the panel's own #f8f8f8 background separates by nothing without this. Scoped rather than
added to the shared .practice_form_row_container, which other panels draw on their own backgrounds. */
.slm_row_container { border: 1px solid var(--line); }
/* TARGET DIAGNOSES ON A SERVICE LINE — CMR-2026-10-31-515.
Its own names rather than a reuse of the prescribing panel's .weno_rx_diagnosis_search_* set: that block
belongs to a clinician writing a prescription, and a change made for them should not reach a practice
manager's picker. The cost of that choice is a second result-button declaration, stated here so it is a
decision and not an oversight. The rows reuse .practice_form_row_container, which carries its own padding. */
/* the editor card's summary: one diagnosis per line, its wording over its code */
.psld_card_items_container .psld_card_item_container { padding: 5px 0; border-bottom: 1px solid var(--line); }
.psld_card_items_container .psld_card_item_container:last-child { border-bottom: none; padding-bottom: 0; }
.psld_card_items_container .psld_card_item_container:first-child { padding-top: 0; }
.psld_card_item_name { font-weight: 600; overflow-wrap: anywhere; }
.psld_card_item_code { margin-top: 1px; font-variant-numeric: tabular-nums; }
.psld_primary_badge { margin-left: 4px; vertical-align: 1px; }
/* the picker panel: the search block above, the service's own list below */
.psld_search_container { margin-bottom: 18px; }
.psld_search_results { max-height: 280px; margin-top: 8px; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius); }
.psld_search_empty { padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: 0.8em; }
.psld_search_result { width: 100%; min-height: 54px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-bottom: 0; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.psld_search_result:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.psld_search_result:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.psld_search_result strong, .psld_search_result small { display: block; }
.psld_search_result strong { color: var(--brand_dark); font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* THE DESCRIPTION IS WHAT A MANAGER CHOOSES BY, so it is body text and not a caption: at the weno panel's
0.64rem muted it was smaller and fainter than the code beside it, which nobody picks a diagnosis by. */
.psld_search_result small { margin-top: 2px; color: var(--ink); font-size: 0.8rem; line-height: 1.35; }
.psld_search_result > i { color: var(--brand); }
/* ALREADY ON THE SERVICE: shown rather than hidden, so a manager searching for it is told it is there. A
NEUTRAL fill, not var(--brand_soft): the soft brand wash is the platform's SELECTED state, and a row
wearing it while being unselectable reads as chosen rather than as spent. */
.psld_search_result_added { cursor: default; background: var(--page); }
.psld_search_result_state { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
/* a white row on the panel's own #f8f8f8 background separates by nothing without this, the same reason the
preferred-medications rows above carry it */
.psld_row_container { border: 1px solid var(--line); }
.psld_row_name { font-weight: 600; overflow-wrap: anywhere; }
.psld_row_actions { margin-top: 6px; }
/* THE THIRD COPY OF THE SAME WORKAROUND, and said plainly so all three go together: badge_brand sets
var(--brand) as 0.72rem text on var(--brand_soft), about 4.1:1, which does not clear 4.5:1 at that size.
.intake_view_container and .sl_view_container already carry this exact override. It belongs in the token
layer; StrongCert task #4816 holds that, and these three rules are deleted when it lands. Scoped here
because the record view's copy does not reach the card as the editor form renders it. */
.psld_editor_card_container .badge_brand, .psld_row_container .badge_brand { color: var(--brand_dark); }
/* WALK THROUGH THE FORM — the practice answering its own form. Its own step classes, not the fight physical's:
those carry click handlers that resolve their container with .closest('.fight_physical_container') and save. */
.service_line_intake_preview_notice { background: var(--blue_soft); color: var(--blue); border-radius: var(--radius); padding: 12px; font-size: 0.85em; margin-bottom: 14px; }
.service_line_intake_preview_notice .practice_form_row_meta { color: var(--blue); }
.service_line_intake_progress_container { display: flex; gap: 3px; margin-bottom: 14px; }
.service_line_intake_progress_segment { flex: 1 1 0; height: 6px; border-radius: var(--radius_pill); background: var(--line); cursor: pointer; }
.service_line_intake_progress_segment.done { background: var(--brand_hover); }
.service_line_intake_progress_segment.current { background: var(--brand); }
.service_line_intake_step_intro { font-size: 1.05em; line-height: 1.5; color: var(--ink); }
.service_line_intake_question_label { display: block; margin-bottom: 6px; font-size: 1.05em; font-weight: 600; color: var(--ink); }
.service_line_intake_required_mark { font-size: 0.7em; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.service_line_intake_question_container .form-control { margin-top: 8px; }
.service_line_intake_options_container { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
/* a whole tappable row, so a choice is as easy to hit on a phone as the booking tiles are.
THE BORDER IS 2px WHETHER OR NOT THE ROW IS CHOSEN, and the padding is 11px rather than 12px to keep the
same box height it had at 1px. Selecting a row used to widen its border, which moved that row and every row
under it by a pixel as a patient ticked down the list. The selected state below therefore sets border-COLOR
only; do not restore the `border:` shorthand there.
--radius_sm, not --radius_lg: a 12px corner on a 44px row reads as a pill next to the step's own buttons. */
.service_line_intake_option_label { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius_sm); padding: 11px 12px; margin: 0; cursor: pointer; font-size: 0.95rem; font-weight: 500; line-height: 1.34; }
.service_line_intake_option_label input { accent-color: var(--brand); flex: 0 0 auto; }
.service_line_intake_range_container { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.service_line_intake_nav_container { display: flex; gap: 10px; }
.service_line_intake_nav_container .btn_ndd { flex: 1 1 0; }
.service_line_intake_summary_row { background: var(--surface); border-radius: var(--radius_lg); padding: 10px 12px; margin-bottom: 8px; }
.service_line_intake_summary_blank { color: var(--muted); font-style: italic; }
.service_line_intake_summary_followup { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--line); color: var(--ink); }
/* CONDITIONAL QUESTIONS (CMR-2026-10-25-439) */
/* the per-question rules, folded away so a long form stays readable */
.service_line_intake_conditions_container { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius_lg); padding: 10px; margin-top: 6px; }
.service_line_intake_conditions_container .form-select,
.service_line_intake_conditions_container .form-control { margin-top: 4px; }
.service_line_intake_conditions_toggle { margin-top: 6px; }
/* the detail box that opens inside a question when the answer calls for it */
.service_line_intake_followup_container { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--brand_soft); }
/* a question the answers have ruled out: hidden to the patient, and its progress segment greyed */
.service_line_intake_not_asked { display: none; }
.service_line_intake_progress_segment.skipped { background: var(--page); border: 1px solid var(--line); cursor: default; }
/* THE FORM AS A PATIENT WALKS IT, inside the check-in panel (CMR-2026-10-27-456). The question, option and
follow-up styling above is shared with the manager's walkthrough on purpose — one language, one place to
change it. Only what differs on a patient's surface is scoped here. */
.service_line_intake_patient_progress_row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.service_line_intake_patient_progress_row .service_line_intake_progress_container { flex: 1 1 auto; margin-bottom: 0; }
/* the bars are decoration here and carry no handler: a 6px target is not tappable, and jumping steps on a
patient's form would be a way straight past a required question. The counter beside them is what is read. */
.service_line_intake_patient_container .service_line_intake_progress_segment { cursor: default; }
/* a question this patient's answers have ruled out is not a step they will ever reach, so it leaves the bar
rather than sitting in it hollow. The manager's walkthrough keeps the greyed segment on purpose — a practice
previewing its own form needs to see that a skip happened; a patient does not. */
.service_line_intake_patient_container .service_line_intake_progress_segment.skipped { display: none; }
/* WHAT WAS "Step 9 of 19" (CMR-2026-10-27-458). The count is still written to this element on every move and
is still announced, but it is out of view: a number telling a patient the form is nineteen questions long,
before they have answered one, reads as a bill rather than as progress. It must not become display:none —
that removes it from the accessibility tree too, and the bars beside it are aria-hidden, so this element is
the only thing announcing progress on the screen. */
.service_line_intake_sr_only,
.service_line_intake_patient_container .service_line_intake_required_mark { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* WHY WE ARE ASKING (CMR-2026-10-27-458). The control sits on the question, not on the panel footer, so what
it explains is never in doubt and a question with no explanation simply has none — a fixed control would
have to grey itself out and say so. */
.service_line_intake_question_head { display: flex; align-items: flex-start; gap: 10px; }
.service_line_intake_question_head .service_line_intake_question_label { flex: 1 1 auto; margin-bottom: 0; }
/* The circle is 32px because a help button the size of an answer competes with the answers, and this is an
aside. The TAP TARGET is not 32px: the pseudo-element below extends it to 44px in every direction without
moving the circle, so the control still meets the tap target a patient-facing control needs on a phone.
Do not drop the ::after when restyling this — the visible size and the touchable size are different on
purpose, and nothing about the circle shows that the target is larger. */
.service_line_intake_why_button { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: -4px -4px 0 0; border: 1px solid var(--line); border-radius: 50%; background: var(--page); color: var(--brand); font-size: 0.9rem; line-height: 1; cursor: pointer; }
.service_line_intake_why_button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.service_line_intake_why_button:hover,
.service_line_intake_why_button:focus-visible { background: var(--brand_soft); border-color: var(--brand); }
/* the panel's body travels inside the step and is moved into a side window when the control is tapped; it is
never visible in place */
/* a renders nothing anyway; this only stops a stylesheet or a theme ever giving it a box */
.service_line_intake_why_panel_source { display: none; }
.service_line_intake_why_panel_container .mchat_header { background: var(--brand); padding-top: env(safe-area-inset-top); }
.service_line_intake_why_panel_container .mchat_messages { background: #f8f8f8; padding: 20px; }
.service_line_intake_why_panel_container .mchat_input { background: white; border-top: 0; box-shadow: none; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.service_line_intake_why_panel_question { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.service_line_intake_why_panel_help { font-size: 0.82rem; color: var(--muted); margin-bottom: 14px; }
.service_line_intake_why_panel_body { font-size: 0.9rem; line-height: 1.6; color: var(--ink); }
.service_line_intake_why_panel_meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--muted); }
/* the builder's own field, and the notice when a question has no explanation behind it */
.service_line_intake_why_missing { color: var(--gold); }
.service_line_intake_patient_step_count { flex: 0 0 auto; font-size: 0.72rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.service_line_intake_patient_container .service_line_intake_step_container { outline: none; }
/* NO CARD AROUND THE PATIENT'S QUESTION. The question is the only thing on its step and the step is already
inside the check-in panel, so a bordered card around it was a box drawn inside a box — and it made the
answers, which carry their own fills, read as a third level of nesting. The practice manager's walkthrough
keeps its card, because there the question sits among the builder's other controls and needs the edge.
The explanation control moves to the panel header with the card it used to sit in the corner of. */
.service_line_intake_patient_container .service_line_intake_question_container { background: transparent; border: 0; border-radius: 0; padding: 0; }
.service_line_intake_patient_container .service_line_intake_why_button { display: none; }
/* THE QUESTION GETS ITS OWN SURFACE. The question was set in the same ink, at nearly the same
size, as the answers below it, ten pixels above a stack of boxes — so the eye read one block of text with
lines in it and the patient's first job on every step was working out which line was the question. Nothing
here is larger or further apart than it was: the separation is made out of colour, which costs no height on
a form whose whole point is that a question fits on one screen. The box takes --radius_sm, so the question,
the answers and the step's buttons are all drawn with one corner. */
.service_line_intake_patient_container .service_line_intake_question_prompt { background: var(--brand_soft); border-radius: var(--radius_sm); padding: 11px 13px; margin-bottom: 12px; }
.service_line_intake_patient_container .service_line_intake_question_label { color: var(--brand_deep); font-weight: 700; }
/* --brand_dark, not --muted: grey on the brand_soft wash is about 4.1:1 and fails the small-text minimum */
.service_line_intake_patient_container .service_line_intake_question_prompt .practice_form_row_meta { margin-top: 4px; color: var(--brand_dark); }
.service_line_intake_patient_container .service_line_intake_question_prompt + .service_line_intake_options_container { margin-top: 0; }
/* "REQUIRED" IS NOT DRAWN TO THE PATIENT — owner decision 2026-10-28. It is NOT display:none, and must not
become it: that takes the word out of the accessibility tree as well, and since the required flag travels as
the custom required_field attribute rather than the HTML one, this span is the only thing announcing that an
answer is compulsory. Hidden the same way the step counter beside the progress bar is. The practice
manager's walkthrough is deliberately not scoped here — a practice previewing its own form needs to see
which questions it made required. The declarations live on .service_line_intake_sr_only above, which this
selector joins, so there is one definition of the pattern on this surface rather than two. */
.service_line_intake_patient_container .service_line_intake_option_label { background: var(--page); }
/* A BUILT-IN SECTION IS A DRAWER'S CONTENTS WITHOUT THE DRAWER (CMR-2026-10-28-461). Each of these controls
was written to sit inside its own side panel, which supplies a 16px gutter; on an intake step the step
already supplies one, so the control's own padding is a second gutter and its rows sit visibly inset from
the question block above them. The rows are pulled back out to the step's own edges here rather than in
each control, because the control is shared with the health-history surface where its gutter is correct. */
.service_line_intake_builtin .family_member_row { padding-left: 0; padding-right: 0; }
.service_line_intake_builtin .family_member_divider { margin-left: 0; margin-right: 0; }
/* the only section a patient adds to from the step itself — the drawer keeps this control in a header the
intake does not render */
.service_line_intake_builtin_action { margin-top: 14px; }
/* the row is the tap target, so it is also what should show a keyboard its position — the native control's own
ring is drawn inside a 2px border on a tinted row and is easy to lose. Same treatment as calendar_ndd_day. */
.service_line_intake_option_label:focus-within { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 1px; }
/* the standard selection treatment, so a chosen answer reads the same as a chosen time or date elsewhere.
TWO THINGS THAT ARE NOT HERE ANY MORE, both of which were reflow. The weight went 500 -> 700, which re-wraps
any answer long enough to take two lines; and the border went 1px -> 2px, which shifted the row and the ones
below it. The fill, the border colour and the control filling in are three signals already, and none of them
costs a layout. --brand_dark rather than --brand for the text: --brand on this fill is about 4.3:1 and fails
the minimum at this size, the same reason recorded at the top of the practice form styles. */
.service_line_intake_patient_container .service_line_intake_option_label:has(input:checked) { background: var(--brand_soft); border-color: var(--brand); color: var(--brand_dark); }
/* the drawing on its own under the opening text: no block behind it, and large enough to be a welcome rather
than an icon. Used by the form's opening step and, since the greeting took the brand-soft block, by the
drawer's welcome too — where it now closes the screen instead of opening it. */
/* the drawing sits in the space under the opening text, on two brand shapes at low opacity — a tilted rounded
square and a circle — so it reads as a composed welcome rather than an icon floating on the panel. The shapes
are pseudo-elements rather than markup: they are decoration, and nothing should be able to read them. */
.service_line_intake_step_art { position: relative; display: flex; justify-content: center; color: var(--brand); padding: 92px 0 30px; }
.service_line_intake_step_art:before
{
content: '';
position: absolute;
top: 70px;
left: 50%;
width: 60%;
max-width: 182px;
aspect-ratio: 1;
transform: translateX(-57%) rotate(14deg);
border-radius: 26px;
background: var(--brand);
opacity: 0.07;
}
.service_line_intake_step_art:after
{
content: '';
position: absolute;
bottom: 26px;
left: 50%;
width: 40%;
max-width: 124px;
aspect-ratio: 1;
transform: translateX(8%);
border-radius: 50%;
background: var(--brand);
opacity: 0.09;
}
/* sized against the panel rather than fixed, so it holds its proportions on any phone */
.service_line_intake_step_art .service_line_intake_kickoff_svg { position: relative; z-index: 1; width: 58%; max-width: 214px; height: auto; }
.service_line_intake_patient_freetext_container { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); padding: 14px; }
.service_line_intake_patient_freetext_container .check_v2_input_area { margin-top: 10px; }
/* the notes section carries no card of its own — it IS the step, and a border round it is a box in a box */
.service_line_intake_notes_builtin { background: transparent; border: 0; padding: 0; }
.service_line_intake_notes_builtin .check_v2_input_area { margin-top: 10px; }
/* SLIDE 0 WHEN THE REASON IS SETTLED — the visit was booked as a named service, so this states it rather than
asking. No grid, no search box, nothing to choose. */
.check_v2_settled_reason_card { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); box-shadow: var(--shadow_xs); padding: 14px; }
.check_v2_settled_reason_icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--brand_soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 1.1em; }
.check_v2_settled_reason_main { display: block; }
.check_v2_settled_reason_name { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); }
.check_v2_settled_reason_practice { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.check_v2_settled_reason_mode { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.check_v2_settled_reason_note { font-size: 0.8rem; line-height: 1.5; color: var(--muted); margin-top: 12px; }
/* CONDITIONS NOT TO MISS, and the coverage report over them */
.service_line_intake_condition_rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.service_line_intake_condition_row { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-radius: var(--radius_lg); padding: 8px 10px; }
.service_line_intake_coverage_container { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-top: 10px; }
.service_line_intake_coverage_row { padding: 8px 0; border-top: 1px solid var(--line); }
.service_line_intake_coverage_row:first-of-type { border-top: 0; }
.service_line_intake_screens_container { background: var(--surface); border-radius: var(--radius_lg); padding: 6px 10px; margin-top: 4px; }
/* THE INTAKE FORM AS A RECORD — the read-only default view, with the builder behind Edit.
It sits inside .mchat_messages, which carries 15px of its own padding and a #f8f8f8 background,
so the card is a white surface on that and takes the panel's gutter back on a phone.
EVERY CLASS HERE IS intake_record_*, NOT intake_question_*. The patient questionnaire already owns
.intake_question_row (this file, ~line 28039; rendered by shared_ajax_functions9.php and answered by
handlers in shared_jquery_functions2.js that resolve .closest('.intake_question_row')). This block
loads later, so naming a row the same thing turned that flex row into a grid and striped it.
The two raw hex values are the design system's own on-soft TEXT colours, not fills: #7a5b00 is the
amber one (.alert_ndd_gold, and the note at css/design_system.css:996 — --gold itself is about 2:1
as text), #145c35 the green one (.alert_ndd_success). --green is about 3.3:1 on --page and only
clears AA as large text, which the stat numerals are not at phone sizes. */
.intake_view_container { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); overflow: hidden; flex: 0 0 auto; }
/* THE flex: 0 0 auto IS WHAT MAKES THE PANEL SCROLL. .mchat_messages is a flex column of a definite
height, and a flex item whose own overflow is not visible has an automatic minimum size of zero — so
this card, which needs overflow:hidden for its rounded corners, shrank to the panel's height and
clipped the rest of the form inside itself. Nothing overflowed .mchat_messages, so there was nothing
to scroll and everything past the first screen was simply unreachable. */
/* reused components, with the two deviations this view needs stated rather than reimplemented */
.intake_view_container .alert_ndd { margin-top: 14px; font-size: 0.82rem; font-weight: 600; line-height: 1.45; }
.intake_view_container .badge_brand { color: var(--brand_dark); } /* badge_brand's var(--brand) is about 4.1:1 on brand_soft; the design doc flags the same pairing */
.intake_view_header { padding: 18px 18px 16px; border-bottom: 1px solid var(--line); }
.intake_view_eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.intake_view_title { margin-top: 4px; font-size: 1.4rem; font-weight: 700; line-height: 1.25; }
.intake_view_state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 0.82rem; color: var(--muted); }
.intake_view_provenance { margin-top: 8px; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
/* the counts a clinician checks before approving; the two that can be wrong carry the colour */
.intake_view_stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--page); }
.intake_view_stat { padding: 13px 15px; border-right: 1px solid var(--line); }
.intake_view_stat:last-child { border-right: none; }
.intake_view_stat_value { font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
.intake_view_stat_value.is_warning { color: #7a5b00; }
.intake_view_stat_value.is_good { color: #145c35; }
.intake_view_stat_label { margin-top: 3px; font-size: 0.7rem; font-weight: 600; color: var(--muted); line-height: 1.35; }
.intake_view_section { padding: 18px; border-top: 1px solid var(--line); }
.intake_view_section_label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.intake_view_section_help { margin-top: 6px; font-size: 0.8rem; color: var(--muted); line-height: 1.55; }
.intake_view_intro { margin-top: 12px; padding: 13px 15px; background: var(--page); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius); font-size: 0.9rem; line-height: 1.6; }
.intake_view_intro_blank { border-left-color: var(--gold); background: var(--gold_soft); color: #7a5b00; }
.intake_record_table_container { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.intake_record_table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
table.intake_record_table th { padding: 9px 13px; text-align: left; background: var(--page); border-bottom: 1px solid var(--line); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
table.intake_record_table td { padding: 11px 13px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
table.intake_record_table tr:last-child td { border-bottom: none; }
/* the gap fill is set on the ROW as well as the cells: below 560px the cells lose their padding to the
row, so a cell-only background broke the one warning cue into inset strips */
table.intake_record_table tr.intake_record_gap,
table.intake_record_table tr.intake_record_gap td { background: var(--gold_soft); }
.intake_record_table_name { font-weight: 600; overflow-wrap: anywhere; }
.intake_record_table_note { color: var(--muted); }
.intake_record_col_name { width: 30%; }
/* WHAT THE ANSWERS ADD UP TO, on the clinician's Triage tab directly above the answers (CMR-2026-10-31-514).
The red flags are the only part in danger ink and they sit ABOVE the tally, because one of them stands on
its own whatever the counts say — the layout has to make that order obvious, not just the wording. */
.triage_score_flags { background: var(--danger_soft); border: 1px solid #fca5a5; border-radius: var(--radius); padding: 11px 13px; margin-bottom: 12px; }
.triage_score_flags_head { font-size: 0.82rem; font-weight: 700; color: #b91c1c; margin-bottom: 6px; }
.triage_score_noflags { font-size: 0.85rem; color: #145c35; margin-bottom: 12px; }
.triage_score_noflags i { margin-right: 5px; }
.triage_score_reason { display: flex; align-items: flex-start; gap: 7px; font-size: 0.82rem; line-height: 1.5; padding: 2px 0; }
.triage_score_reason i { flex: 0 0 auto; margin-top: 3px; color: #b91c1c; }
.triage_score_reason b { font-weight: 600; }
/* two cells, not three: the red flags are not a number in this row and must not read as one */
.triage_score_tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.triage_score_cell { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.triage_score_number { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.triage_score_toward { color: #145c35; }
.triage_score_away { color: #b91c1c; }
.triage_score_quiet { color: var(--muted); }
.triage_score_fraction { margin-top: 1px; font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.triage_score_label { margin-top: 2px; font-size: 0.72rem; font-weight: 600; color: var(--muted); line-height: 1.35; }
/* WHAT ONE ANSWER COUNTED AS, beside the answer. The faint state is an option the form asked about and the
patient did not report: part of the card's denominator, so it has to be visible without competing with the
answers that were reported. */
.triage_flag_marker { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; padding: 1px 5px; border-radius: 4px; font-size: 0.68rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.01em; white-space: nowrap; vertical-align: 1px; }
.triage_flag_marker i { font-size: 0.64rem; }
.triage_flag_marker_up.triage_flag_marker_given { background: #dcf3e5; color: #145c35; }
.triage_flag_marker_down.triage_flag_marker_given { background: var(--danger_soft); color: #b91c1c; }
.triage_flag_marker_offered { background: transparent; border: 1px dashed var(--line); color: var(--muted); padding: 0 4px; }
.triage_score_group { margin-top: 12px; }
.triage_score_note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--muted); line-height: 1.5; }
/* THE ANSWERS TABLE — one row per answer with a tick column per flag (CMR-2026-10-31-509). The flag columns
are deliberately narrow and the answer column takes the rest: what this table is FOR is reading down a
column of ticks, so the ticks have to stay aligned at phone width, which is also why the column headings
are one word and the sentence explaining each one sits above the table instead. */
.intake_record_block_help { margin-top: 5px; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
/* three flag columns now, not two, so each gives up width — the answer column still has to carry a sentence */
.intake_record_answers_table .intake_record_col_flag { width: 58px; text-align: center; }
.intake_record_flag_tick { font-size: 0.95rem; font-weight: 700; }
/* the two on-soft text colours the stat numerals already use, for the same reason: --green is about 3.3:1 on
--page and --gold about 2:1, so neither clears the small-text minimum as a glyph this size */
/* THREE MARKS THAT MUST NOT LOOK ALIKE. For and Against are the two directions of one question, and Red flag
is a different question — so the red flag is the only one in danger ink, and it is the only one that should
catch the eye from across the table. --danger_ink (#b91c1c), not --danger, which is about 3.3:1 as text.
The green and the amber are the on-soft inks the stat numerals already use for the same contrast reason. */
.intake_record_flag_tick.is_supports { color: #145c35; }
.intake_record_flag_tick.is_against { color: var(--muted); }
.intake_record_flag_tick.is_warning { color: #b91c1c; }
/* the answer that acts on the others is the one answer that can carry no flag, so its row reads as the aside
it is rather than as a row whose ticks someone forgot */
.intake_record_answers_table tr.intake_record_answer_acting td { color: var(--muted); }
.intake_record_col_note { width: 38%; }
/* which numbered questions screen for a condition; the chip's title is the question's own wording */
.intake_record_ref_list { display: flex; flex-wrap: wrap; gap: 4px; }
.intake_record_ref { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: var(--radius_sm); background: var(--brand_soft); color: var(--brand_dark); font-size: 0.72rem; font-weight: 700; }
.intake_record_list { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.intake_record_row { display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--surface); }
/* THE PER-QUESTION MENU, in a third column of its own (CMR-2026-10-31-513). A question with no key renders an
empty cell rather than no cell, so the body column is the same width on every row and the list does not
step in and out as the eye goes down it. The column is `auto`, so it costs nothing when every cell is empty. */
/* WHO IS ASKED is the one chip on the row that changes who answers, so it is not drawn like the input type
beside it. A grey chip among grey chips is what went unnoticed on a question only half the patients are
asked — reported as the restriction not being shown at all when it had been there from the start. */
.intake_record_audience_chip i { margin-right: 3px; }
.intake_record_audience_chip { color: #7a5b00; } /* the on-gold ink; --gold as text is about 2:1 */
.intake_record_row_tools { align-self: start; min-width: 28px; }
.intake_record_row_tools_button { padding: 0 4px; border: 0; background: transparent; color: var(--muted); line-height: 1.2; }
.intake_record_row_tools_button:hover,
.intake_record_row_tools_button:focus-visible { color: var(--brand); background: var(--brand_soft); }
/* Bootstrap draws a caret on any .dropdown-toggle; the three dots ARE the affordance here */
.intake_record_row_tools_button.dropdown-toggle::after { display: none; }
.intake_record_row:last-child { border-bottom: none; }
.intake_record_row:nth-child(even) { background: var(--page); }
.intake_record_number { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius_pill); background: var(--brand_soft); color: var(--brand_dark); font-size: 0.74rem; font-weight: 700; }
.intake_record_body { min-width: 0; }
.intake_record_label { font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.intake_record_help { margin-top: 3px; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.intake_record_meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.intake_record_block { margin-top: 10px; }
.intake_record_block_label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.intake_record_option_list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.intake_record_option { padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--radius_sm); background: var(--page); font-size: 0.78rem; line-height: 1.5; }
.intake_record_option.is_acting { border-color: var(--brand_hover); background: var(--brand_soft); color: var(--brand_dark); font-weight: 600; }
.intake_record_option_note { font-weight: 400; font-size: 0.68rem; }
/* a rule written as a sentence. The builder states the same thing as a select holding an index. */
.intake_record_rule { display: flex; align-items: flex-start; gap: 8px; margin-top: 9px; padding: 8px 11px; border-left: 3px solid var(--brand_hover); border-radius: 0 var(--radius_sm) var(--radius_sm) 0; background: var(--page); font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.intake_record_rule i { margin-top: 2px; color: var(--brand); }
.intake_record_rule b { color: var(--ink); font-weight: 600; }
.intake_record_rule.is_notice { border-left-color: var(--gold); background: var(--gold_soft); color: #7a5b00; }
.intake_record_rule.is_notice i { color: #7a5b00; }
.intake_record_screens { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
/* THE WAY IN FOR ONE MORE QUESTION, at the foot of the question list. A dashed box and not a button: the
record view renders no form control, and this is a way out of the record rather than a field in it.
It follows .order_result_attach, the house treatment for a CLICKABLE dashed box, and not
.attach_result_dropzone, which is a drop target — a control's boundary has to carry 3:1, and a --line
dash on this card is 1.15:1. Hover and focus move the border and the label, NOT the fill: --brand_soft
behind the note's --muted is 4.1:1, so a tinted hover state would fail the one line that says what
adding a question costs. */
.intake_record_add { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 13px 15px; border: 1px dashed var(--brand); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; }
.intake_record_add:hover, .intake_record_add:focus { border-color: var(--brand_dark); background: var(--surface); color: var(--ink); }
.intake_record_add:hover .intake_record_add_label, .intake_record_add:focus .intake_record_add_label { color: var(--brand_dark); }
.intake_record_add_icon { display: flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: var(--radius_pill); background: var(--brand_soft); color: var(--brand_dark); font-size: 0.78rem; }
.intake_record_add_words { min-width: 0; }
.intake_record_add_label { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.intake_record_add_note { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
/* the Add drawer reuses the builder's question row, whose x removes a row from a list of them; there is one
row here and no list, so the control has nothing to mean */
.intake_add_question_container .service_line_intake_remove_row_class { display: none; }
.intake_view_footer { padding: 15px 18px 17px; border-top: 1px solid var(--line); background: var(--page); font-size: 0.78rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 760px)
{
.intake_view_stats { grid-template-columns: repeat(2, 1fr); }
.intake_view_stat:nth-child(2) { border-right: none; }
.intake_view_stat:nth-child(1), .intake_view_stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px)
{
/* THREE READINGS STAY SIDE BY SIDE at phone width, because they are read against each other — a stacked
column makes the comparison a scroll. The number gives up size instead. */
.triage_score_cell { padding: 9px 8px; }
.triage_score_number { font-size: 1.2rem; }
.triage_score_fraction { font-size: 0.7rem; }
.triage_score_label { font-size: 0.66rem; }
.triage_score_tally { gap: 7px; }
/* the -15px matches .mchat_messages' own inline padding exactly, so the card takes the panel's full
width rather than stacking a second gutter inside the first — 30px that a table needs more.
It is coupled to that inline style: if the panel's padding changes, change this with it. */
.intake_view_container { margin: -15px; border-radius: 0; border-left: none; border-right: none; }
.intake_view_header { padding: 16px 14px 14px; }
.intake_view_title { font-size: 1.2rem; }
.intake_view_section { padding: 16px 14px; }
.intake_view_footer { padding: 14px 14px 16px; }
.intake_view_stat { padding: 11px 14px; }
.intake_view_stat_value { font-size: 1.1rem; }
.intake_record_row { grid-template-columns: 24px 1fr auto; gap: 10px; padding: 13px 14px; }
/* at phone width three tick columns and a wrapping answer is the whole table, so the headings lose a point
of size rather than the answer losing its last readable column */
.intake_record_answers_table .intake_record_col_flag { width: 46px; }
.intake_record_answers_table th.intake_record_col_flag { font-size: 0.6rem; letter-spacing: 0.03em; }
.intake_record_add { padding: 13px 14px; }
.intake_record_number { width: 24px; height: 24px; font-size: 0.7rem; }
.intake_record_label { font-size: 0.875rem; }
/* ONE CARD PER CONDITION rather than a dropped column. The note is the reason the condition is on the
list, so hiding it on the screen most likely to be read in a clinic is the wrong trade. */
table.intake_record_conditions_table thead { display: none; }
table.intake_record_conditions_table,
table.intake_record_conditions_table tbody,
table.intake_record_conditions_table tr,
table.intake_record_conditions_table td { display: block; width: 100%; }
table.intake_record_conditions_table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
table.intake_record_conditions_table tr:last-child { border-bottom: none; }
table.intake_record_conditions_table td { padding: 0; border: none; }
table.intake_record_conditions_table td + td { margin-top: 8px; }
table.intake_record_conditions_table .intake_record_table_name { font-size: 0.89rem; font-weight: 700; }
table.intake_record_conditions_table td[data_label]::before { content: attr(data_label); display: block; margin-bottom: 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
}
@media (max-width: 380px)
{
.intake_view_stats { grid-template-columns: 1fr; }
.intake_view_stat { border-right: none; border-bottom: 1px solid var(--line); }
.intake_view_stat:last-child { border-bottom: none; }
}
/* THE SERVICE LINE AS A RECORD — the read-only default view of a saved service, with the editor form behind
Edit in the drawer's header menu (render_display_body() in class.practice_service_lines.php).
Same shell as the intake form's record above, and deliberately a separate set of names rather than a reuse
of .intake_view_*: that block's own comment calls itself the intake form as a record, and a service line is
not one. The rows inside are the house list group (.ndd_list_group / .ndd_list_row), so a row here and a row
in any other panel are the same component.
The flex: 0 0 auto IS WHAT MAKES THE PANEL SCROLL, for the reason written out over .intake_view_container:
.mchat_messages is a flex column of definite height, and a flex item whose own overflow is not visible has
an automatic minimum size of zero, so a card needing overflow:hidden for its corners otherwise shrinks to
the panel's height and clips everything past the first screen with nothing to scroll.
#7a5b00 is the design system's amber on-soft TEXT colour (.alert_ndd_gold); --gold itself is about 2:1 as
text, which a stat numeral at phone size does not clear. */
.sl_view_container { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); overflow: hidden; flex: 0 0 auto; }
.sl_view_container .alert_ndd { margin-top: 12px; font-size: 0.82rem; font-weight: 600; line-height: 1.45; }
/* THE BADGE VARIANTS CARRY THEIR OWN COLOUR AS TEXT ON THEIR OWN SOFT FILL, and at this size several of them
do not clear the small-text minimum: badge_brand about 4.1:1, badge_green about 3.3:1, badge_blue about
4.1:1. Each is swapped here for the darker on-soft value the design system already defines or that this
file already uses for the same pairing. Scoped to this view rather than fixed in design_system.css because
every badge on the platform is affected and that is a design-system decision, not this panel's — filed as
its own task. The intake record above carries the same workaround for badge_brand alone. */
.sl_view_container .badge_brand { color: var(--brand_dark); }
.sl_view_container .badge_green { color: #145c35; } /* the green on-soft text colour .alert_ndd_success uses */
.sl_view_container .badge_gold { color: #7a5b00; } /* --gold_ink is about 4.45:1 on --gold_soft and still fails */
.sl_view_container .badge_blue { color: var(--blue_ink); }
.sl_view_header { padding: 18px 18px 16px; border-bottom: 1px solid var(--line); }
.sl_view_eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sl_view_title { margin-top: 4px; font-size: 1.4rem; font-weight: 700; line-height: 1.25; }
.sl_view_state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 0.82rem; color: var(--muted); }
/* what a manager checks before publishing: the two prices, and whether anyone can actually deliver it */
.sl_view_stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--page); }
.sl_view_stat { padding: 13px 15px; border-right: 1px solid var(--line); }
.sl_view_stat:last-child { border-right: none; }
.sl_view_stat_value { font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
.sl_view_stat_value.is_warning { color: #7a5b00; }
.sl_view_stat_label { margin-top: 3px; font-size: 0.7rem; font-weight: 600; color: var(--muted); line-height: 1.35; }
.sl_view_section { padding: 18px; border-top: 1px solid var(--line); }
.sl_view_section_label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.sl_view_section_help { margin-top: 6px; font-size: 0.8rem; color: var(--muted); line-height: 1.55; }
/* the intake and medications cards bring their own heading, which already carries 14px above it */
.sl_view_section > .service_line_label:first-child { margin-top: 0; }
/* no border on the ul: .list-group-item draws its own 1px var(--line) on every edge, so one here reads as a
doubled 2px rule down the outside of the group */
.sl_view_list { margin-top: 12px; }
/* a row's text can run to several lines — an answer, a list of states — so the icon sits with the first line
rather than in the middle of the block */
.sl_view_list .ndd_list_row { align-items: flex-start; }
.sl_view_row_icon { flex: 0 0 auto; width: 20px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.sl_view_row_yes .sl_view_row_icon { color: var(--green); }
.sl_view_row_no .sl_view_row_icon { color: var(--muted); }
.sl_view_row_link a { color: var(--brand); font-weight: 600; overflow-wrap: anywhere; }
/* the two public pages, as actions under the listing rows. They wrap rather than shrink: "Preview on
nextdaydoctor.com" does not fit beside "Preview practice page" at phone width, and a truncated preview
button is indistinguishable from the wrong one. */
.sl_view_preview_actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sl_view_row_item { font-size: 0.9rem; line-height: 1.5; }
/* a published answer is what the manager is checking, so it reads as body text and not as a meta line */
.sl_view_row_answer { margin-top: 2px; font-size: 0.875rem; line-height: 1.55; color: var(--ink); }
/* the delete confirmation, which both bodies render hidden at their foot. It sits outside .sl_view_footer so
it does not inherit that strip's small muted type, and carries its own padding rather than a section's,
because a hidden section would still draw its top border. */
.sl_view_container > .service_line_remove_confirm_container { padding: 4px 18px 18px; border-top: 1px solid var(--line); }
/* the delivery modes and the audience, as the house badge rather than a second pill with its own size */
.sl_view_chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sl_view_prose { margin-top: 12px; padding: 13px 15px; background: var(--page); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius); font-size: 0.9rem; line-height: 1.6; }
.sl_view_prose_blank { border-left-color: var(--gold); background: var(--gold_soft); color: #7a5b00; }
.sl_view_footer { padding: 15px 18px 17px; border-top: 1px solid var(--line); background: var(--page); font-size: 0.78rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 560px)
{
/* the -15px matches .mchat_messages' own inline padding exactly, so the card takes the panel's full width
rather than stacking a second gutter inside the first. It is coupled to that inline style: if the panel's
padding changes, change this with it. */
.sl_view_container { margin: -15px; border-radius: 0; border-left: none; border-right: none; }
.sl_view_header { padding: 16px 14px 14px; }
.sl_view_title { font-size: 1.2rem; }
.sl_view_section { padding: 16px 14px; }
.sl_view_footer { padding: 14px 14px 16px; }
.sl_view_stat { padding: 11px 14px; }
.sl_view_stat_value { font-size: 1.1rem; }
}
@media (max-width: 380px)
{
.sl_view_stats { grid-template-columns: 1fr; }
.sl_view_stat { border-right: none; border-bottom: 1px solid var(--line); }
.sl_view_stat:last-child { border-bottom: none; }
}
/* Address suggestions dropdown — server-rendered list for the Amazon Location address search (CMR-2026-10-15-312) */
.address_suggestions_dropdown { position: absolute; z-index: 10050; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: var(--shadow_small); max-height: 260px; overflow-y: auto; }
.address_suggestion_item { padding: 10px 12px; cursor: pointer; font-size: 0.9rem; }
.address_suggestion_item:hover { background: var(--brand_soft); }
.address_suggestion_empty { padding: 10px 12px; color: #6b7280; font-size: 0.85rem; }
/* a patient-correction card the deep link just brought into view: a brief brand-colored pulse to draw the author's eye to Continue */
.amendment_correction_ready { animation: amendment_correction_pulse 1.2s ease-in-out 3; border-radius: 8px; }
@keyframes amendment_correction_pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(134, 94, 191, 0); }
50% { box-shadow: 0 0 0 4px var(--brand_soft); }
}
.ios_home_feeling_interactive .ios_home_feeling_faces
{
max-width: none;
gap: 4px;
}
.save_feeling_checkin_class
{
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
align-items: center;
gap: 7px;
padding: 8px 2px;
border: 0;
background: transparent;
color: var(--brand);
font-size: 0.65rem;
line-height: 1.3;
cursor: pointer;
}
.save_feeling_checkin_class
{
transition: opacity 160ms ease, transform 160ms ease;
}
.feeling_checkin_selected .save_feeling_checkin_class
{
opacity: 0.35;
}
.feeling_checkin_selected .save_feeling_checkin_class[aria-pressed='true']
{
opacity: 1;
transform: scale(1.12);
font-weight: 700;
}
.save_feeling_checkin_class:focus-visible
{
outline: 2px solid var(--brand_dark);
outline-offset: 2px;
}
.save_feeling_checkin_class:disabled
{
opacity: 0.5;
cursor: default;
}
.ios_home_feeling_feedback
{
margin-top: 12px;
color: var(--muted);
font-size: 0.8rem;
}
.ios_home_feeling_interactive
{
overflow: visible;
}
.ios_home_feeling_choices
{
position: relative;
}
.ios_home_feeling_booking
{
position: absolute;
z-index: 4;
top: calc(100% + 10px);
left: 0;
right: 0;
padding: 28px 20px 20px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_small);
}
.ios_home_feeling_booking.feeling_checkin_popover_above
{
top: auto;
bottom: calc(100% + 10px);
}
.ios_home_feeling_booking .open_booking_visit_drawer_btn
{
margin-top: 12px;
}
.feeling_checkin_close
{
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
border: 0;
background: transparent;
color: var(--muted);
font-size: 1.4rem;
}
@media (prefers-reduced-motion: reduce)
{
.save_feeling_checkin_class
{
transition: none;
}
}
.ios_home_feeling .ios_home_feeling_note
{
margin-top: 16px;
font-size: 0.72rem;
}
.feeling_checkin_errors
{
margin-top: 12px;
}
.ios_home_office
{
display: block;
width: 220px;
max-width: 75%;
height: 118px;
margin: 0 auto 12px;
color: var(--brand);
}
.ios_home_office_soft
{
fill: var(--brand_soft);
}
.ios_home_care_actions
{
position: relative;
width: 100%;
margin-top: auto;
}
.ios_home_care_toggle
{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.ios_home_care_fan
{
position: absolute;
bottom: calc(100% + 14px);
left: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px 8px;
width: 100%;
padding: 8px 0;
visibility: hidden;
pointer-events: none;
border-radius: var(--radius_lg);
background: var(--surface);
}
.ios_home_care_option
{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-height: 90px;
padding: 2px;
border: 0;
background: transparent;
color: var(--brand_dark);
font: inherit;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
opacity: 0;
transform: translateY(48px) scale(0.75);
transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1.1), opacity 220ms ease;
}
.ios_home_care_bubble
{
display: grid;
place-items: center;
width: 60px;
height: 60px;
flex-shrink: 0;
border-radius: 50%;
background: var(--brand_soft);
color: var(--brand);
box-shadow: var(--shadow_small);
font-size: 27px;
}
.ios_home_care_option:focus-visible
{
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: var(--radius);
}
.ios_home_care_option:hover .ios_home_care_bubble
{
background: var(--brand);
color: var(--surface);
}
.ios_home_care_open .ios_home_empty_intro
{
visibility: hidden;
transition: none;
opacity: 0;
pointer-events: none;
}
.ios_home_care_open .ios_home_care_fan
{
visibility: visible;
}
.ios_home_care_open .ios_home_care_fan
{
pointer-events: auto;
}
.ios_home_care_open .ios_home_care_option
{
opacity: 1;
transform: translateY(0) scale(1);
}
.ios_home_care_open .ios_home_care_option:nth-child(2) { transition-delay: 30ms; }
.ios_home_care_open .ios_home_care_option:nth-child(3) { transition-delay: 60ms; }
.ios_home_care_open .ios_home_care_option:nth-child(4) { transition-delay: 90ms; }
.ios_home_care_open .ios_home_care_option:nth-child(5) { transition-delay: 120ms; }
.ios_home_care_open .ios_home_care_option:nth-child(6) { transition-delay: 150ms; }
/* THE FIRST CARD'S TAB STRIP. The card has two faces — Get Care and the booked visits — and they are the
carousel's own slides, so the strip is a shortcut to a swipe rather than a second control with a state of
its own; shared_jquery_functions3.js lights a tab from the carousel's slideChange and never the reverse.
It is drawn as part of the card: the active tab is the card's white and sits continuous with it, the
inactive one falls back into a soft grey. The strip is only rendered where a visit is booked, which is
also the only case where the carousel has a second slide to reach. */
.ios_home_card_tabs
{
position: relative;
z-index: 1;
display: flex;
/* matches the card's own .margin10 inset */
margin: 10px 10px 0;
}
/* One rounded shadow follows the outside of the tabs and card. Neither inner piece casts a square shadow. */
.ios_home_first_card_tabbed::before
{
content: '';
position: absolute;
top: 10px;
right: 10px;
bottom: calc(10px + var(--ios_home_pagination_height, 0px));
left: 10px;
border-radius: var(--radius_lg);
box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.16), 0 8px 22px rgba(31, 41, 55, 0.08);
pointer-events: none;
}
.ios_home_card_tab
{
flex: 1;
min-width: 0;
min-height: 38px;
padding: 9px 8px 11px;
border: 1px solid rgba(229, 231, 235, 0.9);
background: #ebe8f1;
color: #7b8191;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
.ios_home_card_tab:first-child
{
border-radius: var(--radius_lg) 0 0 0;
}
.ios_home_card_tab:last-child
{
border-radius: 0 var(--radius_lg) 0 0;
}
/* the card's top edge runs under the inactive tab and stops at the active one, which is the card's own white
from the top of the strip down. The border is transparent rather than absent so the tab keeps its height,
and a background clipped to the border box fills the row it leaves. */
.ios_home_card_tab_active
{
background: var(--surface);
color: var(--brand);
border-bottom-color: transparent;
}
/* the strip is the card's top edge, so the card gives up its own top border and corners, its top margin and
the upward shadow the strip now carries */
.ios_home_first_card_tabbed .ios_home_visit_swiper .swiper-slide > .ios_next_visit_card
{
margin-top: 0 !important;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: none;
}
/* a slide whose heading is the tab above it keeps only its badge, which belongs on the right where it has
always been — space-between puts a lone child on the left */
.ios_next_visit_header_badge_only
{
justify-content: flex-end;
}
@media (max-height: 740px)
{
.ios_home_office
{
height: 80px;
margin-bottom: 6px;
}
.invite_letter_art
{
height: 78px;
}
.ios_next_visit_art svg
{
height: 82px;
}
}
@media (prefers-reduced-motion: reduce)
{
.ios_home_care_option,
.ios_home_empty_intro
{
transition: none;
}
}
@media (max-height: 620px)
{
.ios_home_first_screen .profile_picture
{
width: 40px;
height: 40px;
}
.ios_home_office
{
height: 48px;
}
.ios_next_visit_art svg
{
height: 50px;
}
.ios_home_empty_content
{
gap: 6px;
}
.ios_home_empty_content .ios_next_visit_title
{
font-size: 1rem;
}
.ios_home_care_open
{
min-height: 280px;
}
}
@media (prefers-reduced-motion: reduce)
{
.ios_home_care_open .ios_home_care_option
{
transition-delay: 0ms;
}
}
/* ══════════════════════════════════════════════════════════════════════════════
Full-screen visit workbench — CMR-2026-10-19-357
A rendering of the visit that is entirely separate from the slide-out drawer: its own
overlay, its own markup, its own classes. Nothing here is shared with the drawer, which
remains the phone and tablet interface and is untouched by this change.
Lifted from the approved design. The :root block is namespaced to the overlay so it
cannot restate global tokens, and the design's preview chrome is not carried over.
══════════════════════════════════════════════════════════════════════════════ */
/* the overlay itself — the design's frame, filling the viewport */
.visit_fs_overlay
{
position: fixed;
inset: 0;
/* below .side_window_outer_container (1000), which is a stacking context holding every side
panel. Above it, a note editor or any other panel opened from the workbench rendered behind
it and the click looked like it had done nothing. Panels now stack over the workbench, the
way they stack over the drawer. */
z-index: 900;
background: #fff;
overflow: hidden;
/* the staff page inherits Gotham from body; the design system's own --font is Inter, which
is what the workbench is drawn in, so it is set here rather than inherited */
font-family: var(--font);
}
.visit_fs_overlay button,
.visit_fs_overlay input,
.visit_fs_overlay select,
.visit_fs_overlay textarea
{
font-family: var(--font);
}
.visit_fs_overlay.hide_me
{
display: none;
}
.visit_fs_overlay,
.visit_assist_drawer {
--font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--brand: #865EBF;
--brand_dark: #6a46a3;
--brand_deep: #1a1040;
--brand_soft: #f3e8ff;
/* a brand-tinted hairline — enough to read as ours on a white control without carrying
the weight of a filled brand button. Between --line and --brand. */
--brand_line: #d8c8ef;
--ink: #111827;
--muted: #6b7280;
--surface: #ffffff;
--page: #f5f5f7;
--line: #e5e7eb;
--green: #1c9d57;
--green_soft: #ecfdf3;
--blue: #2f6fed;
--blue_soft: #eef4ff;
--gold: #f5a623;
--gold_soft: #fff7e8;
--danger: #ef4444;
--danger_soft: #fff1f2;
--shadow_xs: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
--radius: 8px;
--radius_pill: 999px;
}
.visit_assist_drawer .visit_assist_drawer_messages {
padding: 6px;
background: var(--page);
color: var(--muted);
font-family: var(--font);
}
.visit_assist_drawer .visit_assist_drawer_messages button {
font-family: var(--font);
}
* { box-sizing: border-box; }
button { font-family: inherit; }
/* ───────── mockup chrome (not part of the design) ───────── */
.mockup_bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 8px 12px;
background: var(--brand_deep);
color: white;
}
/* ───────── shell ───────── */
.visit_fs_shell {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: white;
overflow: hidden;
/* the shell also carries .mchat_container, so the handlers that validate a note's
originating visit before injecting draft PHI can find it and check the ids. That class
is sized for the 800px drawer, so its declarations are neutralised rather than inherited. */
max-width: none;
min-height: 0;
max-height: none;
top: auto;
}
/* ───────── top row — patient left, tools right. No back arrow. ───────── */
.visit_fs_topbar {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 62px;
padding: 10px 16px;
background: white;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
gap: 12px;
z-index: 20;
}
.visit_fs_topbar_left {
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
flex: 1;
min-width: 0;
}
.visit_fs_avatar {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
background: #e5e7eb;
flex-shrink: 0;
}
.visit_fs_patient_text {
min-width: 0;
overflow: hidden;
}
.visit_fs_patient_name {
color: var(--ink);
font-size: 15.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.visit_fs_patient_meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
color: var(--muted);
font-size: 12px;
white-space: nowrap;
}
.visit_fs_meta_dot {
color: var(--line);
}
.visit_fs_status_live {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--green);
font-weight: 700;
}
.visit_fs_status_pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
animation: visit_fs_pulse 1.6s ease-in-out infinite;
}
@keyframes visit_fs_pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.visit_fs_chip_row {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.visit_fs_chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border-radius: var(--radius_pill);
font-size: 11px;
font-weight: 800;
white-space: nowrap;
cursor: pointer;
}
.visit_fs_chip.danger { background: var(--danger_soft); color: #dc2626; }
.visit_fs_chip.gold { background: var(--gold_soft); color: #b86d00; }
.visit_fs_chip.brand { background: var(--brand_soft); color: var(--brand); }
.visit_fs_topbar_right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* the top row's controls are one family: white, a brand-tinted hairline, a brand glyph. Tools
and Close included, so the row reads as a set rather than a filled button with neighbours. */
.visit_fs_icon_button {
width: 36px;
height: 36px;
border: 1px solid var(--brand_line);
border-radius: var(--radius);
display: inline-flex;
align-items: center;
justify-content: center;
background: white;
color: var(--brand);
font-size: 15px;
cursor: pointer;
flex: 0 0 auto;
}
.visit_fs_icon_button:hover,
.visit_fs_tools_button:hover,
.visit_fs_close_button:hover {
border-color: var(--brand);
color: var(--brand_dark);
background: var(--brand_soft);
}
.visit_fs_tools_wrap { position: relative; }
.visit_fs_tools_button {
border: 1px solid var(--brand_line);
border-radius: var(--radius);
background: white;
color: var(--brand);
height: 36px;
padding: 0 14px;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.visit_fs_tools_menu {
position: absolute;
top: 42px;
right: 0;
z-index: 60;
width: 232px;
padding: 6px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: white;
box-shadow: 0 12px 32px rgba(15,23,42,0.16);
}
.visit_fs_tools_menu.hide_me { display: none; }
.visit_fs_tools_item {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 9px;
border-radius: 6px;
color: #374151;
font-size: 13px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.visit_fs_tools_item i { width: 16px; color: var(--muted); text-align: center; }
.visit_fs_tools_item:hover { background: var(--page); }
.visit_fs_tools_item.danger { color: #dc2626; }
.visit_fs_tools_item.danger i { color: #dc2626; }
.visit_fs_tools_divider {
height: 1px;
margin: 5px 4px;
background: var(--line);
}
.visit_fs_close_button {
width: 36px;
height: 36px;
border: 1px solid var(--brand_line);
border-radius: var(--radius);
background: white;
color: var(--brand);
font-size: 17px;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
/* ───────── body: rail | content | video ───────── */
.visit_fs_body {
position: relative;
flex: 1;
display: flex;
min-height: 0;
overflow: hidden;
background: var(--page);
}
/* the rail scrolls its own items and keeps its footer action on the floor */
.visit_fs_rail {
width: 214px;
display: flex;
flex-direction: column;
background: #f9fafb;
border-right: 1px solid var(--line);
overflow: hidden;
flex-shrink: 0;
}
.visit_fs_rail_scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 6px 0 12px;
}
.visit_fs_rail_footer {
flex: 0 0 auto;
padding: 12px;
border-top: 1px solid var(--line);
background: #f9fafb;
}
.visit_fs_rail_group_label {
padding: 14px 16px 5px;
color: #9ca3af;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.visit_fs_rail_item {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 16px;
border-left: 3px solid transparent;
color: #374151;
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.visit_fs_rail_item i {
width: 16px;
color: #6b7280;
font-size: 14px;
text-align: center;
}
.visit_fs_rail_item:hover { background: #f1f2f6; }
.visit_fs_rail_item.active {
background: var(--brand_soft);
border-left-color: var(--brand);
color: var(--brand);
}
.visit_fs_rail_item.active i { color: var(--brand); }
.visit_fs_rail_count {
margin-left: auto;
min-width: 20px;
padding: 2px 6px;
border-radius: var(--radius_pill);
background: #eef2f7;
color: #6b7280;
text-align: center;
font-size: 11px;
font-weight: 800;
}
.visit_fs_rail_item.active .visit_fs_rail_count {
background: white;
color: var(--brand);
}
.visit_fs_rail_dot {
margin-left: auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--gold);
}
/* mobile tab strip, replaces the rail under 900px */
.visit_fs_mobile_tabs {
display: none;
background: white;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.visit_fs_mobile_tabs_scroll {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0 8px;
}
.visit_fs_mobile_tabs_scroll::-webkit-scrollbar { display: none; }
.visit_fs_mobile_tab {
flex: 0 0 auto;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--muted);
padding: 11px 14px;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.visit_fs_mobile_tab.active {
border-bottom-color: var(--brand);
color: var(--brand);
}
.visit_fs_content {
flex: 1;
min-width: 0;
overflow-y: auto;
padding: 10px;
padding-bottom: 18px;
background: var(--page);
}
.visit_fs_section.hide_me { display: none !important; }
.visit_fs_grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
gap: 10px;
width: 100%;
}
.visit_fs_grid.single_col { grid-template-columns: minmax(0, 1fr); }
.visit_fs_col { min-width: 0; }
/* ───────── cards ───────── */
.visit_card {
background: white;
border: 1px solid #edf0f3;
border-radius: var(--radius);
box-shadow: var(--shadow_xs);
margin-bottom: 6px;
overflow: hidden;
}
.visit_card_header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 8px;
border-bottom: 1px solid #f1f3f6;
/* the Live Assist status reads as a sentence rather than a word, so at phone width it wraps
under the card title instead of squeezing it */
flex-wrap: wrap;
}
.visit_card_title {
display: flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-size: 14px;
font-weight: 800;
min-width: 0;
}
.visit_card_title i { color: var(--brand); font-size: 15px; }
.visit_card_action {
border: none;
background: transparent;
color: var(--brand);
font-size: 12px;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
}
.visit_card_body { padding: 5px 6px; }
.visit_card_body.flush { padding: 0; }
/* field grids — the Triage / Info field rows */
.visit_field_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 10px;
}
.visit_field {
min-width: 0;
padding: 9px 10px;
border: 1px solid #eef0f4;
border-radius: var(--radius);
background: #fbfcfe;
}
.visit_field_label {
color: var(--muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.visit_field_value {
margin-top: 4px;
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
line-height: 1.4;
}
.visit_field_empty { color: #9ca3af; font-weight: 500; }
.badge_ndd {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: var(--radius_pill);
font-size: 11px;
font-weight: 800;
}
.badge_green { background: var(--green_soft); color: var(--green); }
.badge_gold { background: var(--gold_soft); color: #b86d00; }
.badge_danger { background: var(--danger_soft); color: #dc2626; }
.badge_blue { background: var(--blue_soft); color: var(--blue); }
.badge_brand { background: var(--brand_soft); color: var(--brand); }
.badge_muted { background: #eef2f7; color: var(--muted); }
.visit_prose {
color: var(--ink);
font-size: 13.5px;
line-height: 1.6;
}
.visit_prose p { margin: 0 0 9px; }
.visit_prose p:last-child { margin-bottom: 0; }
.visit_ai_note {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 9px;
padding: 4px 9px;
border-radius: var(--radius_pill);
background: var(--brand_soft);
color: var(--brand);
font-size: 11px;
font-weight: 800;
}
/* list rows — chart history, notes, orders */
.visit_row {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 13px;
border-bottom: 1px solid #f1f3f6;
cursor: pointer;
}
.visit_row:last-child { border-bottom: none; }
.visit_row:hover { background: #fbfafd; }
.visit_row_icon {
width: 34px;
height: 34px;
border-radius: var(--radius);
background: var(--brand_soft);
color: var(--brand);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.visit_row_text { min-width: 0; flex: 1; }
.visit_row_title {
color: var(--ink);
font-size: 13.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.visit_row_meta {
margin-top: 2px;
color: var(--muted);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.visit_row_right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
color: #c3c7cf;
font-size: 13px;
}
/* collapsible order groups — the Dispo pattern */
.visit_group {
border: 1px solid #eef0f4;
border-radius: var(--radius);
background: #fbfcfe;
margin-bottom: 9px;
overflow: hidden;
}
.visit_group:last-child { margin-bottom: 0; }
.visit_group_header {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 11px;
cursor: pointer;
}
.visit_group_header i.visit_group_lead { color: var(--brand); font-size: 14px; }
.visit_group_name {
color: var(--ink);
font-size: 13px;
font-weight: 800;
}
.visit_group_right {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
color: var(--muted);
font-size: 12px;
font-weight: 600;
}
.visit_group_body {
padding: 0 11px 11px;
border-top: 1px solid #eef0f4;
padding-top: 10px;
}
.visit_group_body.hide_me { display: none; }
.visit_empty {
color: #9ca3af;
font-size: 12.5px;
font-weight: 500;
}
/* ───────── dispo sections ─────────
The live panel's dispo_section_container: tinted header bar with a 3px brand edge, a
filled/empty check indicator, and an Add / Edit / value control on the right. */
/* progress strip — gives the stack a top edge without adding colour weight */
.dispo_progress {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 13px;
margin-bottom: 12px;
background: white;
border: 1px solid #edf0f3;
border-radius: var(--radius);
box-shadow: var(--shadow_xs);
}
.dispo_progress_label {
color: var(--ink);
font-size: 14px;
font-weight: 800;
white-space: nowrap;
}
.dispo_progress_track {
flex: 1;
min-width: 80px;
height: 5px;
border-radius: var(--radius_pill);
background: #eef2f7;
overflow: hidden;
}
.dispo_progress_fill {
height: 100%;
width: 50%;
border-radius: var(--radius_pill);
background: var(--brand);
}
.dispo_progress_count {
color: var(--muted);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
/* a dispo section is an ordinary chart card; state is carried by the check, not by colour */
.dispo_section {
background: white;
border: 1px solid #edf0f3;
border-radius: var(--radius);
box-shadow: var(--shadow_xs);
margin-bottom: 10px;
overflow: hidden;
}
.dispo_section.empty {
background: #fcfcfd;
border-color: #e8ebef;
box-shadow: none;
}
.dispo_section_header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 13px;
border-bottom: 1px solid #f1f3f6;
}
.dispo_section.empty .dispo_section_header { border-bottom-color: #f3f4f7; }
.dispo_section_title {
display: flex;
align-items: center;
gap: 9px;
color: var(--ink);
font-size: 14px;
font-weight: 800;
min-width: 0;
}
.dispo_section.empty .dispo_section_title { color: #6b7280; }
.dispo_check {
font-size: 15px;
color: #d1d5db;
flex-shrink: 0;
}
.dispo_check.done { color: var(--brand); }
.dispo_section_button {
border: none;
background: transparent;
padding: 0;
color: var(--brand);
font-size: 12px;
font-weight: 800;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.dispo_section_button:hover { text-decoration: underline; }
.dispo_section_body { padding: 12px 13px; }
.dispo_section_body.flush { padding: 0; }
.dispo_section.empty .dispo_section_body { padding: 10px 13px; }
.dispo_value_line {
display: flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
}
.dispo_value_line i { color: var(--brand); }
.dispo_dropdown_wrap { position: relative; }
.dispo_dropdown_menu {
position: absolute;
top: 24px;
right: 0;
z-index: 40;
min-width: 168px;
border: 1px solid var(--line);
border-radius: 6px;
background: white;
box-shadow: 0 8px 22px rgba(15,23,42,0.16);
overflow: hidden;
}
.dispo_dropdown_menu.hide_me { display: none; }
.dispo_dropdown_item {
padding: 10px 13px;
font-size: 13px;
font-weight: 600;
color: #374151;
cursor: pointer;
}
.dispo_dropdown_item + .dispo_dropdown_item { border-top: 1px solid #f1f3f6; }
.dispo_dropdown_item:hover { background: var(--page); }
.dispo_dropdown_item.active {
background: var(--brand_soft);
color: var(--brand);
font-weight: 700;
}
/* events timeline */
.visit_event {
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
gap: 10px;
padding: 9px 0;
border-bottom: 1px dashed #eef0f4;
}
.visit_event:last-child { border-bottom: none; }
.visit_event_mark {
margin-top: 4px;
width: 9px;
height: 9px;
border-radius: 50%;
border: 2px solid var(--brand);
background: white;
}
.visit_event_title {
color: var(--ink);
font-size: 13px;
font-weight: 700;
}
.visit_event_meta {
margin-top: 2px;
color: var(--muted);
font-size: 11.5px;
}
/* note editor placeholder */
.note_editor_toolbar {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-bottom: 1px solid #f1f3f6;
background: #fcfcfd;
}
.note_editor_tool {
width: 30px;
height: 30px;
border: 1px solid var(--line);
border-radius: 6px;
background: white;
color: #4b5563;
font-size: 13px;
cursor: pointer;
}
.note_editor_next {
margin-left: auto;
border: none;
border-radius: 6px;
background: var(--brand);
color: white;
height: 30px;
padding: 0 12px;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.note_editor_canvas {
padding: 14px 15px;
min-height: 230px;
}
.note_editor_heading {
color: var(--brand);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 14px 0 5px;
}
.note_editor_heading:first-child { margin-top: 0; }
.note_editor_text {
color: var(--ink);
font-size: 13.5px;
line-height: 1.6;
}
.note_editor_required {
display: inline-block;
padding: 1px 6px;
border-radius: 4px;
background: var(--gold_soft);
color: #b86d00;
font-size: 12px;
font-weight: 700;
}
/* ───────── chat pane — fills the content area, composer pinned ───────── */
/* the content area normally scrolls as one long pane. The chat pane instead owns its height
and scrolls inside itself, so the composer can sit on the floor rather than at the bottom
of an ever-growing document. */
.visit_fs_shell.chat_open .visit_fs_content {
overflow: hidden;
display: flex;
padding-bottom: 12px;
}
.visit_fs_shell.chat_open .visit_fs_chat_section {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
/* the drawer's message panel, re-hosted as the chat pane: it fills the pane and scrolls
inside itself, so its composer sits on the floor rather than at the bottom of a growing page */
.visit_chat_host {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #edf0f3;
border-radius: var(--radius);
background: white;
}
.visit_chat_host .mchat_container {
width: auto;
max-width: none;
height: 100%;
min-height: 0;
max-height: none;
flex: 1;
box-shadow: none;
}
/* The panel's own header is a drawer header — a brand bar announcing whose conversation this
is. In this pane the workbench top bar already names the patient and the rail is the
navigation, so the bar goes clear and only the conversation tools are left on it. The name,
the back arrow and the Close item are removed in workbench_load_chat(). */
/* Out of the flow entirely, not merely transparent: with its name and back arrow gone the bar
was two empty table cells still holding a header's worth of height over a white card. The
tools button floats in the corner instead and the thread gets the whole pane. */
.visit_chat_host > .mchat_container { position: relative; }
.visit_chat_host > .mchat_container > .mchat_header {
position: absolute;
top: 9px;
right: 12px;
z-index: 5;
width: auto;
background: transparent !important;
color: var(--ink) !important;
border: none;
padding: 0 !important;
}
/* the header is a width100 table; only the cell holding the tools is wanted */
.visit_chat_host > .mchat_container > .mchat_header table { width: auto !important; }
.visit_chat_host > .mchat_container > .mchat_header td { display: none; }
.visit_chat_host > .mchat_container > .mchat_header td:has(.chat_header_tools_menu) {
display: table-cell;
padding: 0 !important;
}
/* matches the top row's controls, lifted off the thread it floats over */
.visit_chat_host > .mchat_container > .mchat_header .btn-outline-light {
border: 1px solid var(--brand_line);
color: var(--brand);
background: white;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.visit_chat_host > .mchat_container > .mchat_header .btn-outline-light:hover,
.visit_chat_host > .mchat_container > .mchat_header .show > .btn-outline-light {
border-color: var(--brand);
color: var(--brand_dark);
background: var(--brand_soft);
}
.visit_chat_host > .mchat_container > .mchat_header .dropdown-item { color: var(--ink); }
/* ───────── detail column — a note opens beside its list, not over it ───────── */
/* the gutter between the list and the open note, dragged to trade width between them */
.visit_fs_detail_grip {
display: none;
flex: 0 0 9px;
position: relative;
cursor: col-resize;
background: var(--page);
border-left: 1px solid var(--line);
}
.visit_fs_shell.detail_open .visit_fs_detail_grip { display: block; }
/* the handle itself: two hairlines, centred, that darken under the cursor */
.visit_fs_detail_grip::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 34px;
transform: translate(-50%, -50%);
border-left: 1px solid #c8cdd4;
border-right: 1px solid #c8cdd4;
}
.visit_fs_detail_grip:hover { background: #eef0f4; }
.visit_fs_detail_grip:hover::after { border-color: var(--brand); }
/* while dragging, nothing in the two columns should select or take the pointer */
.visit_fs_shell.detail_resizing { user-select: none; }
.visit_fs_shell.detail_resizing .visit_fs_content,
.visit_fs_shell.detail_resizing .visit_fs_detail_body { pointer-events: none; }
.visit_fs_detail_col {
width: clamp(420px, 33vw, 560px);
flex-shrink: 0;
display: flex;
flex-direction: column;
position: relative;
min-width: 0;
border-left: 1px solid var(--line);
background: white;
overflow: hidden;
}
/* With the video out there is not room for the list and the note side by side, so the note
takes the list's place instead of squeezing a third column between them. The two then
swap: the list control on the note brings the list back over it to pick another. */
.visit_fs_shell.video_open.detail_open .visit_fs_content,
.visit_fs_shell.video_open.detail_open .visit_fs_detail_grip { display: none; }
.visit_fs_shell.video_open.detail_open .visit_fs_detail_col {
flex: 1;
width: auto;
border-left: none;
}
/* the note sits inside the column's own edges, so it does not need a card border too */
.visit_fs_detail_body .chart_editor_container {
border: none;
border-radius: 0;
}
.visit_fs_detail_col.hide_me { display: none !important; }
.visit_fs_detail_body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
/* the panel the server returned is built to fill a slide-out drawer — fixed width, viewport
height, its own scroll container. Re-hosted as a column it has to take the column's box
instead, or it runs past the footer and scrolls the page rather than itself. */
.visit_fs_detail_body .mchat_container {
width: auto;
max-width: none;
height: 100%;
min-height: 0;
max-height: none;
flex: 1;
box-shadow: none;
}
/* The panel's own header is a drawer header — a full-bleed brand bar, built to announce a
sheet that just slid over the screen. Nothing slid here: the note is a document sitting in
a column, so the bar reads as a quiet document toolbar instead. Only the detail column is
restyled; the drawer keeps the header it was designed with. */
/* !important is load-bearing here, not laziness: every panel that can land in this column
writes the brand bar as an inline style on its own header (dozens of them across the
shared_ajax_functions files), so a stylesheet rule cannot otherwise reach it. Overriding
in one place beats editing each panel, which would also change the drawer. */
.visit_fs_detail_body .mchat_header {
background: #fbfbfc !important;
color: var(--ink) !important;
border-bottom: 1px solid var(--line);
}
.visit_fs_detail_body .mchat_header a { color: var(--ink); }
.visit_fs_detail_body .mchat_header td {
padding-top: 7px;
padding-bottom: 7px;
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
}
/* the drawer's buttons are white-on-brand, which is invisible on a pale bar */
.visit_fs_detail_body .mchat_header .btn-outline-light {
border-color: transparent;
color: #6b7280;
background: transparent;
}
.visit_fs_detail_body .mchat_header .btn-outline-light:hover,
.visit_fs_detail_body .mchat_header .btn-outline-light:focus,
.visit_fs_detail_body .mchat_header .show > .btn-outline-light {
border-color: var(--line);
color: var(--ink);
background: #eef0f4;
}
/* with a note open AND the video out, the shell is four columns wide, so the video gives up
width first. Only when it is actually out — collapsed it has no width to give. */
.visit_fs_shell.video_open.detail_open .visit_fs_video_col { width: 272px; }
/* ───────── the integrated video column ───────── */
/* Collapsed by default. The visit is read and written far more often than it is watched, so
the note gets the width until the video is asked for. Width rather than translate, so the
panel stays a real column that the other three divide the remaining space with — sliding it
over the content would cover the note being written against it. */
.visit_fs_video_col {
width: 0;
flex-shrink: 0;
padding: 0;
overflow: hidden;
background: var(--page);
transition: width 0.22s ease, padding 0.22s ease;
}
.visit_fs_shell.video_open .visit_fs_video_col {
width: 348px;
padding: 12px 12px 12px 0;
overflow-y: auto;
}
/* The grip that slides it out, and once out is its left edge and its resize handle — the same
gutter the note column has. Collapsed there is nothing to drag, so only the chevron acts. */
/* plain display:none, not hide_me — the shared handler reveals this with jQuery .show(),
which writes an inline display that a class could otherwise be fighting */
.visit_fs_disconnect_warning {
display: none;
margin-bottom: 12px;
padding: 15px;
border: 1px solid var(--gold);
border-radius: var(--radius);
background: var(--gold_soft);
}
.visit_fs_disconnect_title {
margin-bottom: 5px;
color: var(--ink);
font-size: 14px;
font-weight: 800;
}
.visit_fs_disconnect_body {
margin-bottom: 13px;
color: #7a5a12;
font-size: 13px;
line-height: 1.45;
}
.visit_fs_disconnect_actions {
display: flex;
gap: 9px;
}
.visit_fs_disconnect_actions .btn_ndd { flex: 1; }
/* the column is a stack: the video takes what it needs, the companion takes what is left */
.visit_fs_shell.video_open .visit_fs_video_col {
display: flex;
flex-direction: column;
gap: 12px;
}
.visit_fs_video_col > .video_panel,
.visit_fs_video_col > .video_side_card { flex: 0 0 auto; }
/* Only during a live call. Before one there is nothing for it to report, and while the camera
check is up it was competing with the preview for the column's height and squashing it. */
.visit_fs_video_companion { display: none; }
.visit_fs_shell.video_live .visit_fs_video_companion {
display: block;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 13px;
border: 1px solid #edf0f3;
border-radius: var(--radius);
background: white;
box-shadow: var(--shadow_xs);
}
/* a portrait stream fills the column, and what is left is not worth a panel */
.visit_fs_shell.companion_tight .visit_fs_video_companion { display: none; }
.visit_fs_companion_head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
margin-bottom: 10px;
}
.visit_fs_companion_title {
color: var(--ink);
font-size: 13px;
font-weight: 800;
}
.visit_fs_companion_title .bi { color: var(--brand); }
.visit_fs_companion_transcript {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 12px;
padding: 7px 10px;
border-radius: var(--radius);
background: var(--page);
color: var(--muted);
font-size: 12px;
font-weight: 600;
}
.visit_fs_companion_dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--muted);
flex-shrink: 0;
}
.visit_fs_companion_section + .visit_fs_companion_section {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #f1f3f6;
}
.visit_fs_companion_label {
margin-bottom: 3px;
color: var(--ink);
font-size: 12px;
font-weight: 800;
}
.visit_fs_companion_empty {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
/* ───────── Live Assist (CMR-2026-10-24-424) ─────────
The during-the-encounter copilot's two surfaces. Brand and neutral only, by requirement
rather than by taste: no alert colour, no urgency treatment and nothing that reads as an
alarm. These are options for the clinician to consider. */
.assist_status_pill {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 500;
}
.assist_status_dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--muted);
flex-shrink: 0;
}
/* listening is shown in the brand colour, not a signal green: it is a state, not a result */
.assist_status_dot.listening,
.visit_fs_companion_dot.listening { background: var(--brand); }
.assist_intro {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.5;
}
/* The behavioural-health exclusion, stated on the surface rather than only in the code. Owner
decision 2026-10-24: keep the exclusion for now and say so on screen, so the limit is visible to
the clinician and the question is not quietly forgotten. Neutral, not a warning. */
.assist_scope_note {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: 8px;
color: var(--muted);
font-size: 0.72rem;
line-height: 1.45;
}
.assist_scope_note .bi { flex-shrink: 0; }
.assist_item_list {
display: flex;
flex-direction: column;
gap: 4px;
}
/* A white row with a brand edge, rather than a grey block: these are the provider's working list
and they should read as rows to act on, not as inert panels. The edge is the only colour the
row carries by default — the alarm prohibition means a suggestion must never signal urgency. */
.assist_item {
display: flex;
/* THREE CHILDREN ASK FOR A LINE OF THEIR OWN with `flex: 1 0 100%` — the allergy note, and the
expand panel on both the medication and the differential row. Without wrapping they cannot have
one: the 100% basis with no shrink squeezes the row's main column to nothing, and the diagnosis
or drug name renders one character per line beside a panel that has taken the whole width.
Shipped broken on the medication rows; found when the differential row inherited it. The row
gap is zeroed because each full-width child carries its own top margin. 2026-10-29. */
flex-wrap: wrap;
row-gap: 0;
align-items: flex-start;
column-gap: 10px;
padding: 6px 7px;
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: var(--radius);
background: var(--surface);
transition: background 0.12s ease, box-shadow 0.12s ease;
}
.assist_item:hover {
background: var(--brand_soft);
box-shadow: var(--shadow_sm, 0 1px 3px rgba(26, 16, 64, 0.06));
}
/* BASIS 0, NOT AUTO. The row wraps so its full-width children can have a line of their own, and
flexbox breaks lines on each item's HYPOTHETICAL size — its content width — before it shrinks
anything. With `auto` a long order title therefore pushed the action column onto its own line
instead of shrinking to sit beside it. At 0 the column never forces a break and still grows to
fill the row. 2026-10-29. */
.assist_item_main { flex: 1 1 0%; min-width: 0; }
/* the action column: the one thing to do with this suggestion, and a menu for the rest */
.assist_item_actions {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.assist_item_menu_button {
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--muted);
line-height: 1;
cursor: pointer;
}
.assist_item_menu_button:hover { background: var(--line); color: var(--ink); }
/* the row is inside a scrolling pane, so the menu must escape it rather than be clipped */
.assist_item_menu .dropdown-menu { z-index: 1080; }
.assist_item_text {
color: var(--ink);
font-size: 0.8rem;
font-weight: 600;
line-height: 1.45;
/* a long diagnosis or an ASR artefact with no spaces must not push the row out of the column */
overflow-wrap: anywhere;
}
/* neutral, not --brand_soft: that pair is the design system's SELECTED state, and a category
label wearing it reads as a chosen item rather than as a label */
.assist_item_tag {
display: inline-block;
margin-right: 6px;
padding: 1px 7px;
border-radius: var(--radius_pill);
background: var(--line);
color: var(--muted);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
vertical-align: 1px;
}
.assist_item_detail {
margin-top: 2px;
color: var(--muted);
font-size: 0.82rem;
line-height: 1.45;
}
/* the candidate code is deliberately quiet: it is a suggestion for the physician to accept or
reject, never the visit's diagnosis */
.assist_item_code {
margin-top: 2px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 500;
}
.assist_item_code strong { color: var(--ink); font-weight: 700; }
/* the basis quote. Always present — an item with no quote is never rendered — because it is what
lets the clinician check the suggestion against what was actually said. */
.assist_item_heard {
display: flex;
align-items: flex-start;
gap: 5px;
margin-top: 3px;
color: var(--muted);
font-size: 0.72rem;
font-style: italic;
line-height: 1.4;
}
.assist_item_heard .bi { font-style: normal; flex-shrink: 0; }
/* the menu button keeps the 44px tappable area the dismiss control had: the glyph stays small, the
target does not, and this sits beside text a provider is reading mid-consultation */
.assist_item_menu_button { position: relative; }
.assist_item_menu_button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
.assist_retired_note {
margin-top: 8px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 500;
}
/* A MEDICATION ROW IS TWO LINES: the drug, and how to write it. Everything else — the rationale,
the catalogue confirmation, the words that prompted it — sits behind the caret. The row has to
be scannable mid-consultation, and a four-line block is not. */
.assist_item_med { align-items: center; }
.assist_item_med .assist_item_text {
font-size: 0.85rem;
font-weight: 700;
line-height: 1.3;
}
.assist_med_caret {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 2px;
padding: 2px 6px 2px 0;
border: 0;
background: transparent;
color: var(--brand);
font-size: 0.78rem;
font-weight: 600;
line-height: 1.35;
text-align: left;
cursor: pointer;
}
.assist_med_caret .bi { font-size: 0.7rem; transition: transform 0.15s ease; }
.assist_med_caret[aria-expanded='true'] .bi { transform: rotate(180deg); }
.assist_med_caret:hover .assist_med_sig { text-decoration: underline; }
/* no saved directions is said quietly: it is a fact about this provider's history, not a problem */
.assist_med_sig_none { color: var(--muted); font-weight: 500; font-style: italic; }
/* A MEDICINE THE CHART RECORDS AN ALLERGY TO is subdued and sorted below the unflagged options,
and is never alarmed. Weight and colour carry it, not a warning hue: the row states a fact about
the chart, and a red treatment would make it the alert this surface rules out. It stays fully
readable and fully clickable, because the decision is the prescriber's and they cannot make it
from a row they cannot read. CMR-2026-10-28-469. */
.assist_item_med_flagged { background: var(--page); }
.assist_item_med_flagged .assist_item_text { color: var(--muted); }
.assist_item_med_flagged .assist_med_sig { color: var(--muted); font-weight: 500; }
.assist_med_allergy {
flex: 1 0 100%;
margin-top: 3px;
font-size: 0.72rem;
font-weight: 600;
color: var(--muted);
line-height: 1.35;
}
.assist_med_allergy .bi { margin-right: 3px; }
.assist_med_expand {
flex: 1 0 100%;
margin-top: 9px;
padding-top: 9px;
border-top: 1px solid var(--line);
}
.assist_med_options_label,
.assist_med_options_empty {
color: var(--muted);
font-size: 0.72rem;
margin-bottom: 5px;
}
.assist_med_option {
display: block;
width: 100%;
margin-bottom: 4px;
padding: 7px 9px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
text-align: left;
cursor: pointer;
}
.assist_med_option:hover { background: var(--brand_soft); border-color: var(--brand_hover); }
.assist_med_option.selected { border-color: var(--brand); background: var(--brand_soft); }
.assist_med_option_sig {
display: block;
color: var(--ink);
font-size: 0.78rem;
font-weight: 600;
line-height: 1.4;
}
.assist_med_option_meta {
display: block;
margin-top: 1px;
color: var(--muted);
font-size: 0.7rem;
}
/* why it was suggested at all. Kept because the clinician being able to review the basis is what
the feature's non-device position depends on — moved out of the way, not removed. */
.assist_med_why {
margin-top: 8px;
padding-top: 7px;
border-top: 1px dashed var(--line);
}
.assist_med_why_line {
color: var(--muted);
font-size: 0.72rem;
line-height: 1.45;
}
.assist_med_why_label { font-weight: 600; }
/* the condensed card under the video: text only, no controls */
.assist_companion_list {
display: flex;
flex-direction: column;
gap: 5px;
}
.assist_companion_item {
color: var(--ink);
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
overflow-wrap: anywhere;
}
.assist_companion_code {
color: var(--muted);
font-weight: 500;
}
/* The column's resting state: what the visit is waiting for, and the control for it. Stands
in for the dark video frame that used to sit here showing nothing. */
/* no card of its own — it is the only thing in the column at this point, so it just sits in
the middle of it */
.visit_fs_video_cta {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 13px;
min-height: 240px;
padding: 28px 22px;
text-align: center;
}
/* with no call and no camera check up, the panel takes the column's height so the CTA
centres in the whole of it rather than against the top */
.visit_fs_shell.video_open:not(.video_live):not(.video_preview_open):not(.call_open) .visit_fs_video_col > .video_panel {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
/* the panel is dark because it frames a video; holding only the CTA it should not be */
background: transparent;
box-shadow: none;
}
.visit_fs_video_cta_icon {
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--brand_soft);
color: var(--brand);
font-size: 22px;
}
.visit_fs_video_cta_line {
color: var(--muted);
font-size: 13px;
font-weight: 600;
line-height: 1.5;
max-width: 260px;
}
.visit_fs_video_cta .btn_ndd { width: 100%; max-width: 260px; }
/* the preview and a live call each take the column over, so the resting state steps aside */
.visit_fs_shell.video_live .visit_fs_video_cta,
.visit_fs_shell.video_preview_open .visit_fs_video_cta { display: none; }
/* the start-visit confirmation in the rail footer, the drawer's two-step in this column's width */
.visit_fs_start_confirm {
display: flex;
align-items: center;
gap: 9px;
margin: 10px 0;
color: var(--ink);
font-size: 12px;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
}
.visit_fs_start_confirm .custom_checkbox_container {
flex: 0 0 auto;
width: 28px;
height: 28px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #9ca3af;
border-radius: 6px;
background: white;
color: var(--green);
font-size: 14px;
line-height: 1;
}
.visit_fs_start_confirm_actions {
display: flex;
gap: 8px;
}
.visit_fs_start_confirm_actions .btn_ndd { flex: 1; }
.visit_fs_rail_footer .alert { font-size: 12px; padding: 8px; margin-bottom: 8px; }
/* A live call replaces the designed stage with the real video and its working controls. The
stage, its meta bar and the drag hint are the no-call state and step aside for it. */
.visit_fs_video_live_host { display: none; }
.visit_fs_shell.video_live .visit_fs_video_live_host { display: block; }
.visit_fs_shell.video_live .video_side_card { display: none; }
/* The cloned container is sized for the floating widget, which is a fixed small box: left
alone in a resizable column the video element kept its own width (1287px measured against a
744px column) and simply overflowed. Everything here is pinned to the column instead. */
.visit_fs_video_live_host .video_container_outer {
width: 100%;
padding: 0;
border-radius: 0;
background: #0f1117;
}
/* hugs the picture rather than being a full-width black box behind it, so a portrait stream
leaves no band down either side */
.visit_fs_video_live_host .video-display {
width: fit-content;
max-width: 100%;
margin: 0 auto;
max-height: none;
border-radius: 0;
background: transparent;
}
/* 4:3 to match the designed stage, and contain rather than cover: cropping a clinical video
feed could cut off whatever the patient is holding up to the camera */
/* The element takes the stream's own shape rather than a box the stream is fitted into, which
is what put black around it: no fixed aspect-ratio, and auto on both axes bounded by the
column. A landscape stream is held by max-width and its height follows, so nothing is
letterboxed above and below; a portrait stream is held by max-height and its width follows,
so it is as wide as it can be rather than a sliver in a full-width black box.
`width: 100%` and `max-height: 250px` are written inline for the floating widget, so only
!important reaches them. */
.visit_fs_video_live_host #primary_video_container {
display: block;
margin: 0 auto;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 62vh !important;
aspect-ratio: auto !important;
object-fit: contain;
background: #000;
}
/* the preview owns the column while it is up, so the docked panel and its cards step aside */
.visit_fs_shell.video_preview_open .video_panel,
.visit_fs_shell.video_preview_open .video_side_card { display: none; }
/* The preview owns the column's height rather than growing past it. Left to grow, its footer —
the Join Video Visit button — fell below the fold as soon as the column was widened, and its
header took the control that releases the camera out of view with it. */
.visit_fs_shell.video_preview_open .visit_fs_video_col {
display: flex;
flex-direction: column;
overflow: hidden;
}
/* the dialer takes the column the same way the camera check does */
.visit_fs_shell.call_open .visit_fs_call_host {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* the dialer owns the column while it is up, so the video panel steps aside whole rather
than flexing alongside it and splitting the height */
.visit_fs_shell.call_open .video_panel,
.visit_fs_shell.call_open .visit_fs_video_companion { display: none; }
/* The dialer and the camera check are the same moment of the visit — getting a connection up
— so in this column they are the same panel. The drawer's dialer keeps its brand bar. */
.visit_fs_call_host .staff_call_header {
background: #1c1c1e;
color: white;
border-bottom: 1px solid #333;
padding-top: 0;
}
.visit_fs_call_host .staff_call_header .btn-outline-light {
border: 1px solid #444;
color: #ccc;
background: transparent;
}
.visit_fs_call_host .staff_call_content {
background: #1c1c1e;
color: #e5e7eb;
}
.visit_fs_call_host .staff_call_intro { color: #9aa0a6; }
/* The column's header already says Call Patient and the workbench's top row already names the
patient, so the panel's own portrait, eyebrow and name are all saying it a third time. */
.visit_fs_call_host .staff_call_avatar_container,
.visit_fs_call_host .staff_call_eyebrow,
.visit_fs_call_host .staff_call_patient_name { display: none; }
/* Before a call there is no status to report — "Ready to call" beside a Start phone call
button is the button saying its own name back. It appears once a call is placed, which is
when the line has something to say. */
/* one choice per row, and tinted glass rather than white cards punched out of the dark */
.visit_fs_call_host .staff_call_number_choices {
grid-template-columns: 1fr;
max-width: none;
}
.visit_fs_call_host .staff_call_number_tile {
background: rgba(167, 139, 218, 0.10);
border: 1px solid rgba(167, 139, 218, 0.28);
}
.visit_fs_call_host .staff_call_number_tile .tile_primary { color: #f3f4f6; }
.visit_fs_call_host .staff_call_number_tile .tile_secondary { color: #9aa0a6; }
.visit_fs_call_host .staff_call_number_tile.selected {
background: rgba(167, 139, 218, 0.22);
border-color: var(--brand);
}
.visit_fs_call_host .staff_call_number_tile.selected .tile_primary { color: #d9c8f5; }
/* the workbench column is dark, and the from row is drawn in the panel's light-theme tokens */
.visit_fs_call_host .staff_call_from_single { color: #f3f4f6; }
.visit_fs_call_host .staff_call_from_label { color: #9aa0a6; }
.visit_fs_call_host .staff_call_from_row .staff_call_from_select {
background: rgba(167, 139, 218, 0.10);
border: 1px solid rgba(167, 139, 218, 0.28);
color: #f3f4f6;
}
/* the content column centres its children, so a note only as wide as its text reads as
centred even though its own text-align is already left */
.visit_fs_call_host .staff_call_privacy_note,
.visit_fs_call_host .input_hint {
align-self: stretch;
width: 100%;
text-align: left;
}
.visit_fs_call_host .input_hint { color: #8b9097; }
/* room to breathe inside the tile, and the full width of it */
.visit_fs_call_host .staff_call_other_number_form {
width: 100%;
max-width: none;
margin: 16px 0 2px;
}
/* One field in two halves: the same translucent fill on both, so they read as a single
control on the dark panel instead of two bright white boxes punched out of it. */
.visit_fs_call_host .staff_call_joined_inputs .input_ndd {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(167, 139, 218, 0.32);
color: #f3f4f6;
}
.visit_fs_call_host .staff_call_joined_inputs .input_ndd::placeholder { color: #8b9097; }
.visit_fs_call_host .staff_call_joined_inputs .input_ndd:focus {
background: rgba(255, 255, 255, 0.10);
border-color: var(--brand);
}
/* Keypad mode. The number being built stays in the same field the typed-number choice uses,
so it is the tile's labels and the saved-number choice that step aside, not the input. */
.visit_fs_call_host.dialpad_open .staff_call_dialpad { display: block; }
.visit_fs_call_host.dialpad_open .staff_call_number_tile[data_choice='saved'],
.visit_fs_call_host.dialpad_open .staff_call_number_tile[data_choice='other'] .tile_primary,
.visit_fs_call_host.dialpad_open .staff_call_number_tile[data_choice='other'] .tile_secondary { display: none; }
/* with only the field in it, the tile is the field rather than a card around one */
.visit_fs_call_host.dialpad_open .staff_call_number_tile[data_choice='other'] {
padding: 0;
border: none;
background: none;
}
.visit_fs_call_host.dialpad_open .staff_call_other_number_form { margin: 0 0 6px; }
/* The number sits in open space the way a phone's does — no field chrome, nothing to tab
into, just the digits over the keys. */
.visit_fs_call_host.dialpad_open .staff_call_entered_number {
background: none;
border: none;
font-size: 26px;
font-weight: 600;
text-align: center;
letter-spacing: 0.01em;
padding: 6px 0;
}
.visit_fs_call_host.dialpad_open .staff_call_entered_number:focus {
background: none;
border: none;
box-shadow: none;
outline: none;
}
/* the keypad screen is the number and the keys: nothing else earns the space */
.visit_fs_call_host.dialpad_open .staff_call_relationship,
.visit_fs_call_host.dialpad_open .input_hint,
.visit_fs_call_host.dialpad_open .staff_call_transcribe,
.visit_fs_call_host.dialpad_open .staff_call_privacy_note { display: none; }
/* asked for only when the call cannot be placed without it */
.visit_fs_call_host.dialpad_open.needs_relationship .staff_call_relationship {
display: block;
margin-top: 10px;
border-radius: var(--radius);
border: 1px solid var(--brand);
background: rgba(255, 255, 255, 0.06);
text-align: center;
}
/* both are set for a light panel: the name is near-black and the eyebrow is brand purple,
and neither survives on #1c1c1e */
.visit_fs_call_host .staff_call_patient_name { color: #f3f4f6; }
.visit_fs_call_host .staff_call_eyebrow { color: #a78bda; }
.visit_fs_call_host .mchat_input {
background: #1c1c1e;
border-top: 1px solid #333;
}
.visit_fs_call_host .mchat_container {
width: auto;
max-width: none;
height: 100%;
min-height: 0;
max-height: none;
flex: 1;
box-shadow: none;
}
/* The convert confirmation borrows the disconnect warning's styling, and with it that rule's
`display: none` — so showing it needs its own display, not just dropping hide_me. */
.visit_fs_convert_warning:not(.hide_me) { display: block; }
.visit_fs_convert_warning.hide_me { display: none !important; }
/* Scoped to the preview being up. Unscoped, this `display: flex` outranked the hide_me the
host carries when empty, so an empty box sat in the column holding 268px of height. */
.visit_fs_shell.video_preview_open .visit_fs_video_preview_host {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.visit_fs_video_preview_host .mchat_container {
width: auto;
max-width: none;
height: 100%;
min-height: 0;
max-height: none;
flex: 1;
box-shadow: none;
border-radius: var(--radius);
overflow: hidden;
}
/* the check scrolls; the header and the join button stay put */
.visit_fs_video_preview_host .mchat_messages {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.visit_fs_video_preview_host .mchat_header,
.visit_fs_video_preview_host .mchat_input { flex: 0 0 auto; }
.visit_fs_video_grip {
flex: 0 0 14px;
position: relative;
border-left: 1px solid var(--brand_line);
background: var(--page);
}
.visit_fs_shell.video_open .visit_fs_video_grip { cursor: col-resize; }
/* the drag hairlines, above and below the chevron, and only when there is width to trade */
.visit_fs_video_grip::before,
.visit_fs_video_grip::after {
content: '';
display: none;
position: absolute;
left: 50%;
width: 2px;
height: 26px;
transform: translateX(-50%);
border-left: 1px solid #c8cdd4;
border-right: 1px solid #c8cdd4;
}
.visit_fs_video_grip::before { top: calc(50% - 56px); }
.visit_fs_video_grip::after { top: calc(50% + 30px); }
.visit_fs_shell.video_open .visit_fs_video_grip::before,
.visit_fs_shell.video_open .visit_fs_video_grip::after { display: block; }
.visit_fs_shell.video_open .visit_fs_video_grip:hover::before,
.visit_fs_shell.video_open .visit_fs_video_grip:hover::after { border-color: var(--brand); }
.visit_fs_video_grip_toggle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 38px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--brand_line);
border-radius: var(--radius);
background: white;
color: var(--brand);
font-size: 11px;
cursor: pointer;
z-index: 2;
}
.visit_fs_video_grip_toggle:hover {
border-color: var(--brand);
background: var(--brand_soft);
}
.visit_fs_shell.video_open .visit_fs_video_tab_chevron { transform: rotate(180deg); }
.video_panel {
border-radius: var(--radius);
overflow: hidden;
background: #0f1117;
box-shadow: 0 6px 20px rgba(15,23,42,0.18);
}
.video_stage {
position: relative;
aspect-ratio: 4 / 3;
background: radial-gradient(circle at 50% 38%, #2b2f3d 0%, #14161d 70%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.video_remote_figure {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
color: #6b7280;
}
.video_remote_avatar {
width: 84px;
height: 84px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255,255,255,0.14);
background: #333;
}
.video_remote_label {
color: rgba(255,255,255,0.5);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
}
.video_self_pip {
position: absolute;
top: 9px;
left: 9px;
width: 27%;
max-width: 96px;
aspect-ratio: 4 / 3;
border-radius: 5px;
border: 1px solid rgba(255,255,255,0.75);
background: linear-gradient(150deg, #3f4455 0%, #242836 100%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.45);
font-size: 14px;
z-index: 10;
}
.video_upper_controls {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 8px;
z-index: 12;
}
.video_name_chip {
margin-left: auto;
padding: 3px 9px;
border-radius: var(--radius_pill);
background: rgba(0,0,0,0.6);
color: white;
font-size: 11px;
font-weight: 700;
}
.video_lower_controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 8px;
z-index: 12;
}
.video_control {
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
background: rgba(0,0,0,0.62);
color: white;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.video_control:hover { background: rgba(0,0,0,0.82); }
.video_control.hangup {
margin-left: auto;
background: #dc3545;
border: 1px solid rgba(255,255,255,0.85);
}
.video_meta_bar {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 11px;
background: #171a22;
color: rgba(255,255,255,0.72);
font-size: 12px;
font-weight: 600;
}
.video_timer {
display: inline-flex;
align-items: center;
gap: 6px;
color: white;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.video_conn_chip {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: var(--radius_pill);
background: rgba(28,157,87,0.18);
color: #4ade80;
font-size: 11px;
font-weight: 800;
}
.video_side_card {
margin-top: 12px;
background: white;
border: 1px solid #edf0f3;
border-radius: var(--radius);
box-shadow: var(--shadow_xs);
overflow: hidden;
}
/* floating mode — the draggable corner widget */
/* the column collapses to zero width rather than display:none — a hidden parent
would hide the absolutely positioned panel with it */
.visit_fs_shell[data_video='floating'] .visit_fs_video_col,
.visit_fs_shell[data_video='full'] .visit_fs_video_col {
width: 0;
padding: 0;
overflow: visible;
}
.visit_fs_shell[data_video='floating'] .video_panel {
position: absolute;
top: 74px;
left: 228px;
z-index: 400;
width: 268px;
cursor: move;
}
.visit_fs_shell[data_video='floating'] .video_side_card { display: none; }
.visit_fs_shell[data_video='floating'] .video_drag_hint { display: flex; }
.video_drag_hint {
display: none;
align-items: center;
gap: 6px;
padding: 6px 11px;
background: #171a22;
color: rgba(255,255,255,0.55);
font-size: 11px;
font-weight: 700;
}
/* fullscreen mode — video takes the whole body */
.visit_fs_shell[data_video='full'] .video_panel {
position: absolute;
inset: 0;
z-index: 500;
width: auto;
border-radius: 0;
}
.visit_fs_shell[data_video='full'] .video_stage {
aspect-ratio: auto;
height: 100%;
}
.visit_fs_shell[data_video='full'] .video_remote_avatar {
width: 160px;
height: 160px;
}
.visit_fs_shell[data_video='full'] .video_self_pip { max-width: 190px; }
.visit_fs_shell[data_video='full'] .video_control { width: 42px; height: 42px; font-size: 17px; }
.visit_fs_shell[data_video='full'] .video_meta_bar,
.visit_fs_shell[data_video='full'] .video_side_card,
.visit_fs_shell[data_video='full'] .video_drag_hint { display: none; }
.visit_fs_shell[data_video='full'] .video_show_when_full { display: inline-flex; }
.video_show_when_full { display: none; }
/* off */
/* Nothing sets data_video='off' — the control that would was the removed footer's Preview
Video button, and it was never wired. The rule is kept because the mode is part of the
video system; whatever brings it back needs a home in the Tools menu. */
.visit_fs_shell[data_video='off'] .visit_fs_video_col,
.visit_fs_shell[data_video='off'] .video_panel { display: none; }
/* scoped to the shell on purpose: unscoped, these redefine the design-system button for the whole
app from 25,000 lines further down the file and silently strip borders set earlier */
.visit_fs_shell .btn_ndd {
border: none;
border-radius: var(--radius);
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
white-space: nowrap;
}
.visit_fs_shell .btn_ndd_lg { height: 42px; padding: 0 20px; font-size: 14px; }
.visit_fs_shell .btn_ndd_md { height: 36px; padding: 0 15px; font-size: 13px; }
.visit_fs_shell .btn_ndd_primary { background: var(--brand); color: white; }
.visit_fs_shell .btn_ndd_primary:hover { background: var(--brand_dark); }
.visit_fs_shell .btn_ndd_secondary { background: white; color: #374151; border: 1px solid var(--line); }
.visit_fs_shell .btn_ndd_outline_dark { background: white; color: var(--ink); border: 1px solid #9ca3af; }
/* ───────── responsive ───────── */
.visit_fs_overlay[data_size='medium'] .visit_fs_video_col { width: 300px; }
/* The floor below which even a 380px list and a 400px note cannot sit beside the rail, so a
note goes back to the drawer. The JS measures the real columns and decides; this only
stops a column left open by a resize from squeezing the list it belongs to. Keep the two
in step — when they disagreed at 1280, JS sent notes to a drawer at widths where the
column fitted. */
@media (max-width: 1000px) {
.visit_fs_detail_col { display: none !important; }
}
@media (max-width: 1100px) {
.visit_fs_overlay[data_size='large'] .visit_fs_grid { grid-template-columns: minmax(0, 1fr); }
.visit_fs_overlay[data_size='large'] .visit_fs_video_col { width: 290px; }
}
/* the workbench owns the viewport while it is open */
body.visit_fs_open
{
overflow: hidden;
}
/* a side panel that was open before the workbench was opened. Hidden rather than removed, so the
handlers that open further panels still find the DOM they read (CMR-2026-10-19-357). */
.left_sidewindow_class.behind_workbench
{
display: none !important;
}
/* the connection chip reporting no live call, rather than the design's green "Good" */
.visit_fs_overlay .video_conn_chip.offline
{
background: rgba(255,255,255,0.10);
color: rgba(255,255,255,0.62);
}
/* Fill in orders from the note (CMR-2026-10-22-412) — sits above the Dispo sections it populates */
.generate_orders_from_note_container
{
padding: 10px;
}
.generate_orders_from_note_result
{
display: none;
margin-top: 8px;
padding: 8px 10px;
border-radius: 6px;
background: var(--brand_soft);
color: var(--brand);
font-size: 0.85em;
font-weight: 600;
}
.generate_orders_from_note_result.is_visible
{
display: block;
}
.generate_orders_from_note_errors
{
margin-top: 8px;
font-size: 0.85em;
}
/* the signed note's status pills, right aligned above the note rather than a stack of banners */
.chart_note_flags
{
display: flex;
justify-content: flex-end;
gap: 6px;
margin: 10px 10px 0;
}
/* EMAIL INBOX — CMR-2026-10-24-421.
The list is FULL WIDTH until a thread is opened; opening one splits the view, and closing it returns the list
to full width. Below the breakpoint it never splits -- the thread opens in the drawer the rest of the
application uses. The same markup is sent either way and the stylesheet decides which, so nothing guesses
from a user agent string. */
.email_inbox_split
{
display: block;
}
.email_inbox_search_wrap
{
padding: 0 0 10px 0;
}
.email_inbox_search_input
{
width: 100%;
}
/* THE EMAIL LIST reads as the leads list did -- avatar, sender, date, preview -- because a lead and an email
thread sit in it together and two row shapes in one list read as two lists. A lead keeps its swipe Delete;
a thread has none, because nothing here removes one.
The gutter is on the column rather than on the rows, so the card's rounded corners stay at the card's edge.
Scoped to .staff_nav_page_body, which is where this list renders with no padding of its own. */
.staff_nav_page_body .email_inbox_list_col
{
padding: 0 10px;
}
.email_inbox_rows
{
width: 100%;
overflow: hidden;
border-radius: 10px;
background: var(--surface, #fff);
}
.email_inbox_rows .vm_row
{
cursor: pointer;
}
.email_inbox_rows > *:last-child .vm_row,
.email_inbox_rows > .vm_row:last-child
{
border-bottom: none;
}
/* no detail column until a thread is open, and never below the breakpoint */
.email_inbox_detail_col
{
display: none;
}
/* the white header that replaced the drawer's purple banner: the thread is read in the page here, not in an
overlay, so it carries the page's own surface rather than the panel chrome */
.email_thread_header
{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
background: var(--surface);
border-bottom: 1px solid var(--line);
padding: 14px 16px;
padding-top: calc(14px + env(safe-area-inset-top));
}
.email_thread_header_copy
{
min-width: 0;
}
.email_thread_header_title
{
font-size: 1rem;
font-weight: 700;
color: var(--ink);
overflow-wrap: anywhere;
}
.email_thread_header_meta
{
font-size: 0.82rem;
color: var(--muted);
margin-top: 2px;
}
.email_thread_header_meta i
{
margin-right: 5px;
}
.email_thread_close
{
background: none;
border: none;
color: var(--muted);
font-size: 1rem;
line-height: 1;
padding: 4px 6px;
cursor: pointer;
flex-shrink: 0;
}
.email_thread_close:hover
{
color: var(--ink);
}
@media (min-width: 992px)
{
/* THE SECTION FILLS THE CONTENT AREA, so the thread beside the list runs top to bottom.
An earlier attempt gave the section a viewport calculation of its own. That cannot be right: the section
does not start at the top of the viewport, and it contains its own title block, so any fixed figure is off
by whatever sits above and inside it -- which is exactly how it came out short.
Instead the height is INHERITED. The content cell already has a real height, so each wrapper between it and
the list is made to pass that height down, and the list takes what is left after the title. The wrappers
are untouched except when the email pane is the visible one, so no other section's layout changes. */
.user_content_container:has(> .content_container > .homescreen_class[section='email']:not(.hide_me))
{
height: 100%;
}
.content_container:has(> .homescreen_class[section='email']:not(.hide_me))
{
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
.homescreen_class[section='email']:not(.hide_me)
{
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
/* NO TITLE BLOCK ON THIS SECTION. Every other sidebar section is a page with a heading above it; an inbox is
not read that way -- the list and the thread want the whole height, and the sidebar already says which
section this is and highlights it. The 54px that heading cost at the top went to the messages. */
.staff_nav_page[value='email'] > .staff_nav_page_header
{
display: none;
}
.staff_nav_page[value='email']
{
flex: 1 1 auto;
min-height: 0;
height: auto;
padding-bottom: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.staff_nav_page[value='email'] .staff_nav_page_body
{
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
/* split only once a thread is open */
.email_inbox_split.email_inbox_thread_open
{
display: flex;
align-items: stretch;
gap: 16px;
height: 100%;
}
.email_inbox_split.email_inbox_thread_open .email_inbox_list_col
{
flex: 0 0 360px;
max-width: 360px;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* the rows scroll, the search box does not go with them */
.email_inbox_split.email_inbox_thread_open .email_inbox_rows
{
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
}
.email_inbox_split.email_inbox_thread_open .email_inbox_detail_col
{
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
height: 100%;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius_lg, 12px);
overflow: hidden;
}
/* The panel is sized for a drawer -- 100vw wide and a full viewport tall -- so inside a column it is released
from that by the SAME rule the sidebar sections already use to render a panel as a page. Reusing
.staff_nav_page rather than writing a second set of overrides means a later change to how a panel behaves
outside a drawer reaches both. Here it is additionally made to fill the column top to bottom. */
.email_inbox_detail_col .mchat_container
{
height: 100%;
min-height: 0;
padding-bottom: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.email_inbox_detail_col .mchat_messages
{
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* The composer sits ON the bottom of the panel. The messages area growing should put it there, but a short
thread leaves that to depend on every flex ancestor behaving; margin-top:auto pins it from its own side as
well, so a conversation with one message in it looks the same as a long one. */
.email_inbox_detail_col .mchat_input.email_thread_input
{
margin-top: auto;
flex: 0 0 auto;
}
/* no safe-area inset needed on a header that is not against the top of the screen */
.email_inbox_detail_col .email_thread_header
{
padding-top: 14px;
}
}
/* the row being read in the column layout. Only meaningful beside a detail column; in the drawer the panel
itself is the answer to "which one am I reading". */
.email_inbox_row_selected
{
background: var(--brand_soft);
border-left: 3px solid var(--brand);
}
/* The no-match state owns its own visibility. It carries .staff_dashboard_empty_state for its looks, and that
rule sets display:flex LATER in this file than .hide_me sets display:none -- equal specificity, so the later
one wins and .hide_me could never hide it. Anything that borrows that class and expects .hide_me to work has
the same problem. */
.email_inbox_no_match
{
display: none;
}
.email_inbox_no_match.email_inbox_no_match_shown
{
display: flex;
}
/* the reply box on an email thread — CMR-2026-10-24-421 */
/* the panel footer is a horizontal row by default; this one stacks, the same way the form-progress footer
already does, rather than by an inline display fighting that rule */
.mchat_input.email_thread_input
{
flex-direction: column;
align-items: stretch;
background: var(--surface);
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
}
.email_reply_to_line
{
font-size: 0.78rem;
color: var(--muted);
margin-bottom: 6px;
}
.email_reply_field
{
height: 34px;
overflow-y: hidden;
resize: none;
}
@media (min-width: 992px)
{
.email_inbox_detail_col .mchat_input.email_thread_input
{
padding-bottom: 12px;
}
}
/* the number and who-you-are-calling fields read as one control: square where they meet, and a
single shared edge rather than two boxes with a gap between them */
.staff_call_joined_inputs
{
display: flex;
flex-direction: column;
width: 100%;
}
.staff_call_joined_inputs .input_ndd
{
border-radius: 0;
width: 100%;
}
.staff_call_joined_inputs .input_ndd:first-child
{
border-top-left-radius: var(--radius, 8px);
border-top-right-radius: var(--radius, 8px);
}
.staff_call_joined_inputs .input_ndd:last-child
{
border-top: none;
border-bottom-left-radius: var(--radius, 8px);
border-bottom-right-radius: var(--radius, 8px);
}
/* the focused field has to sit above its neighbour or its ring is clipped by the shared edge */
.staff_call_joined_inputs .input_ndd:focus
{
position: relative;
z-index: 2;
}
/* ───────── the dialer's keypad ─────────
Hidden until asked for. In keypad mode the panel shows one thing: the number being built and
the keys that build it, so the saved-number choice and the tile's own labels step aside. */
.staff_call_dialpad
{
display: none;
width: 100%;
}
.staff_call_dialpad_grid
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
max-width: 248px;
margin: 0 auto;
}
.staff_call_dialpad_key
{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
aspect-ratio: 1 / 1;
padding: 0;
border: 1px solid rgba(167, 139, 218, 0.28);
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: #f3f4f6;
cursor: pointer;
}
.staff_call_dialpad_key:hover:not(:disabled)
{
background: rgba(167, 139, 218, 0.22);
border-color: var(--brand);
}
.staff_call_dialpad_key:active:not(:disabled)
{
background: rgba(167, 139, 218, 0.34);
}
.staff_call_dialpad_key.dialpad_blank
{
border: none;
background: none;
cursor: default;
}
.dialpad_digit
{
font-size: 19px;
font-weight: 600;
line-height: 1;
}
.dialpad_letters
{
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
color: #8b9097;
}
.staff_call_panel.dialpad_open .staff_call_dialpad { display: block; }
.staff_call_drawer.dialpad_open.native_keyboard_open .staff_call_dialpad
{
display: none;
}
.staff_call_drawer.dialpad_open.native_keyboard_open .staff_call_content
{
gap: 0;
justify-content: safe center;
}
.staff_call_panel.dialpad_open .staff_call_number_tile[data_choice='saved'],
.staff_call_panel.dialpad_open .staff_call_number_tile[data_choice='other'] .tile_primary,
.staff_call_panel.dialpad_open .staff_call_number_tile[data_choice='other'] .tile_secondary,
.staff_call_panel.dialpad_open .staff_call_intro,
.staff_call_panel.dialpad_open .staff_call_relationship,
.staff_call_panel.dialpad_open .input_hint,
.staff_call_panel.dialpad_open .staff_call_transcribe,
.staff_call_panel.dialpad_open .staff_call_privacy_note { display: none; }
.staff_call_panel.dialpad_open .staff_call_number_choices { grid-template-columns: 1fr; }
.staff_call_panel.dialpad_open .staff_call_number_tile[data_choice='other'] {
padding: 0;
border: none;
background: none;
}
.staff_call_panel.dialpad_open .staff_call_other_number_form {
max-width: none;
margin: 0 0 6px;
}
.staff_call_panel.dialpad_open .staff_call_entered_number {
background: none;
border: none;
color: var(--ink);
font-size: 26px;
font-weight: 600;
text-align: center;
letter-spacing: 0.01em;
padding: 6px 0;
}
.staff_call_panel.dialpad_open .staff_call_entered_number::placeholder { color: var(--muted); }
.staff_call_panel.dialpad_open .staff_call_entered_number:focus {
background: none;
border: none;
box-shadow: 0 2px 0 var(--brand);
outline: none;
}
.staff_call_panel.dialpad_open.needs_relationship .staff_call_relationship {
display: block;
margin-top: 10px;
border-radius: var(--radius);
border: 1px solid var(--brand);
background: var(--surface);
text-align: center;
}
.staff_call_panel.dialpad_open .staff_call_dialpad_key {
background: var(--surface);
border-color: var(--line);
color: var(--ink);
}
.staff_call_panel.dialpad_open .staff_call_dialpad_key:hover:not(:disabled) {
background: var(--brand_soft);
border-color: var(--brand);
}
.staff_call_panel.dialpad_open .staff_call_dialpad_key:active:not(:disabled) {
background: var(--brand_soft);
}
.staff_call_panel.dialpad_open .staff_call_dialpad_key.dialpad_blank {
border: none;
background: none;
}
.staff_call_panel.dialpad_open .dialpad_letters { color: var(--muted); }
.staff_call_panel.dialpad_open .staff_call_dialpad_grid,
.visit_fs_call_host.dialpad_open .staff_call_dialpad_grid
{
gap: 14px;
max-width: 292px;
}
.staff_call_panel.dialpad_open .dialpad_digit { font-size: 24px; font-weight: 500; }
.staff_call_panel.dialpad_open .dialpad_letters { font-size: 10px; }
/* ───────── which number the call goes out from ─────────
Stays on screen in keypad mode: it is the one thing above the number being dialled, because the person
called sees it and nothing else on the panel says which practice is calling. */
.staff_call_from_row
{
align-items: center;
display: flex;
gap: 8px;
justify-content: center;
width: 100%;
}
.staff_call_from_label
{
color: var(--muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.staff_call_from_single
{
color: var(--ink);
font-size: 14px;
font-weight: 600;
}
.staff_call_from_row .staff_call_from_select
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: 14px;
font-weight: 600;
max-width: 260px;
padding: 7px 10px;
width: auto;
}
.dialpad_plus
{
font-size: 12px;
letter-spacing: 0;
}
/* With no patient there is nothing behind the keypad to go back to, so the header's right cell carries
the number the call goes out from instead of the control that closed a screen with no second state.
Stacked and right-aligned: it has to share a 390px bar with the title. */
.staff_call_from_cell
{
line-height: 1.15;
max-width: 180px;
padding-left: 0;
text-align: right;
white-space: nowrap;
}
/* the title would otherwise centre inside what is left of the bar rather than on the bar, which reads as
squeezed rather than as a layout — so it sits beside the back arrow instead */
.staff_call_header_with_from .mchat_username
{
display: block;
text-align: left;
}
.staff_call_from_cell .staff_call_from_label
{
color: rgba(255, 255, 255, 0.72);
display: block;
font-size: 10px;
/* the practice name can be long; it ellipses rather than widening the cell into the title */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.staff_call_from_cell .staff_call_from_single
{
color: white;
display: block;
font-size: 13px;
font-weight: 700;
}
.staff_call_from_cell .staff_call_from_select
{
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.34);
color: white;
font-size: 13px;
font-weight: 600;
max-width: 170px;
padding: 3px 6px;
width: auto;
}
/* the native select menu is drawn by the platform, so its options need a readable background of their own */
.staff_call_from_cell .staff_call_from_select option
{
background: var(--surface);
color: var(--ink);
}
/* The delete key is not one of a phone's twelve, so it sits beside the call button and appears only once
there is a digit to delete. Hidden everywhere else, including in the panel's ordinary non-keypad form. */
.staff_call_dialpad_back
{
background: none;
border: none;
color: var(--muted);
display: none;
font-size: 22px;
line-height: 1;
padding: 0;
}
.staff_call_panel.dialpad_open.has_digits .staff_call_dialpad_back,
.visit_fs_call_host.dialpad_open.has_digits .staff_call_dialpad_back
{
display: block;
}
/* In keypad mode the call button is the round green one a phone has. It is the same element and the same
class the rest of the dialer drives, so nothing about placing or ending a call changes with it. */
.staff_call_panel.dialpad_open .staff_call_actions,
.visit_fs_call_host.dialpad_open .staff_call_actions
{
align-items: center;
display: grid;
gap: 0;
grid-template-columns: 1fr auto 1fr;
justify-items: center;
}
.staff_call_panel.dialpad_open .staff_call_actions .start_phone_call_button,
.visit_fs_call_host.dialpad_open .staff_call_actions .start_phone_call_button
{
background: #34c759;
border: none;
border-radius: 50%;
box-shadow: none;
color: white;
font-size: 26px;
grid-column: 2;
grid-row: 1;
height: 68px;
min-height: 68px;
padding: 0;
/* the button carries .width100, which is width: 100% !important — a round button cannot be full width,
and this is the one place that utility has to be overruled rather than removed from the markup, which
would change the panel's ordinary non-keypad layout */
width: 68px !important;
}
.staff_call_panel.dialpad_open .staff_call_actions .start_phone_call_button:hover:not(:disabled),
.visit_fs_call_host.dialpad_open .staff_call_actions .start_phone_call_button:hover:not(:disabled)
{
background: #2eb050;
}
.staff_call_panel.dialpad_open .staff_call_actions .start_phone_call_button span,
.visit_fs_call_host.dialpad_open .staff_call_actions .start_phone_call_button span
{
display: none;
}
.staff_call_panel.dialpad_open .staff_call_actions .staff_call_dialpad_back,
.visit_fs_call_host.dialpad_open .staff_call_actions .staff_call_dialpad_back
{
grid-column: 3;
grid-row: 1;
justify-self: start;
padding-left: 18px;
}
/* the end-call button is the one case where the round green button must give the row back */
.staff_call_panel.dialpad_open .staff_call_actions .end_phone_call_button,
.visit_fs_call_host.dialpad_open .staff_call_actions .end_phone_call_button
{
grid-column: 1 / -1;
}
@media (max-height: 640px)
{
.staff_call_panel.dialpad_open .staff_call_content {
gap: 10px;
padding: 16px 12px;
}
.staff_call_panel.dialpad_open .staff_call_dialpad_grid {
max-width: 192px;
gap: 6px;
}
}
/* Referral network coverage board — CMR-2026-10-24-422.
The toolbar is the board's only header: a name search over the consultants the practice already
has, and the switch that reduces the board to what is still missing. */
.network_board_toolbar
{
display: flex;
flex-direction: column;
gap: 8px;
}
.network_board_toolbar .input_group_ndd { width: 100%; }
.network_board_gaps_label
{
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 0.85rem;
color: var(--muted);
cursor: pointer;
}
.network_board_gaps_label input { accent-color: var(--brand); }
.network_board_search_empty
{
text-align: center;
padding: 28px 16px;
color: var(--muted);
}
.network_board_search_empty i { font-size: 1.6rem; color: var(--line); }
.network_board_search_empty_title
{
margin-top: 8px;
font-weight: 600;
color: var(--ink);
}
.network_board_search_empty_copy { font-size: 0.85rem; margin-top: 2px; }
.network_board_consultant_open
{
flex-shrink: 0;
margin-left: 6px;
padding-left: 8px;
padding-right: 8px;
color: var(--muted);
}
.network_board_consultant_open:hover { color: var(--brand); }
/* ===== PHONE CALL TRANSCRIPTION — the dialer's own controls (CMR-2026-10-24-423) =====
The toggle asks for the recording notice and the transcription together, because on the server they are
one switch. The purpose choices appear under it only while it is on, since they exist to decide what the
transcript is turned into. */
.staff_call_transcribe {
width: 100%;
margin: 14px 0 4px;
padding: 12px;
border-radius: var(--radius);
background: rgba(167, 139, 218, 0.10);
border: 1px solid rgba(167, 139, 218, 0.28);
text-align: left;
}
.staff_call_transcribe_switch {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
cursor: pointer;
}
.staff_call_transcribe_toggle {
accent-color: var(--brand);
width: 18px;
height: 18px;
margin-top: 2px;
flex-shrink: 0;
}
.staff_call_transcribe_copy { display: block; }
.staff_call_transcribe_title {
display: block;
font-weight: 600;
font-size: 14px;
color: var(--brand);
}
.staff_call_transcribe_sub {
display: block;
margin-top: 3px;
font-size: 12px;
color: var(--desktop_home_gray);
line-height: 1.4;
}
/* the choices exist to steer the transcript; with transcription off there is nothing to steer */
.staff_call_purpose_choices { display: none; }
.staff_call_transcribe.transcribe_on .staff_call_purpose_choices { display: block; }
.staff_call_purpose_label {
margin: 14px 0 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--desktop_home_gray);
}
.staff_call_purpose_tile {
margin-bottom: 8px;
padding: 10px 12px;
cursor: pointer;
}
.staff_call_purpose_tile:last-of-type { margin-bottom: 0; }
.staff_call_purpose_tile .tile_primary { font-size: 14px; }
.staff_call_purpose_tile .tile_secondary { font-size: 12px; }
/* Reports what the meeting's transcription status says is happening, not what was asked for. */
.staff_call_transcribing_indicator {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin: 10px 0 2px;
font-size: 13px;
font-weight: 600;
color: var(--brand);
}
.staff_call_transcribing_indicator.hide_me { display: none; }
.staff_call_transcribing_dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #e05555;
flex-shrink: 0;
animation: staff_call_transcribing_pulse 1.6s ease-in-out infinite;
}
@keyframes staff_call_transcribing_pulse
{
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.staff_call_note_offer {
width: 100%;
margin: 14px 0 4px;
padding: 12px;
border-radius: var(--radius);
background: rgba(167, 139, 218, 0.10);
border: 1px solid rgba(167, 139, 218, 0.28);
text-align: left;
}
.staff_call_note_offer_copy { display: block; margin-bottom: 10px; }
.staff_call_note_offer_title {
display: block;
font-weight: 600;
font-size: 14px;
color: var(--brand);
}
.staff_call_note_offer_count {
display: block;
margin-top: 3px;
font-size: 12px;
color: var(--desktop_home_gray);
}
/* On the workbench's dark call column these sit on #1c1c1e, where the light-panel greys vanish. */
.visit_fs_call_host .staff_call_transcribe,
.visit_fs_call_host .staff_call_note_offer { max-width: none; }
.visit_fs_call_host .staff_call_transcribe_sub,
.visit_fs_call_host .staff_call_purpose_label,
.visit_fs_call_host .staff_call_note_offer_count { color: #9aa0a6; }
.visit_fs_call_host .staff_call_transcribe_title,
.visit_fs_call_host .staff_call_note_offer_title,
.visit_fs_call_host .staff_call_transcribing_indicator { color: #d9c8f5; }
.visit_fs_call_host .staff_call_purpose_tile {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(167, 139, 218, 0.22);
}
.visit_fs_call_host .staff_call_purpose_tile .tile_primary { color: #f3f4f6; }
.visit_fs_call_host .staff_call_purpose_tile .tile_secondary { color: #9aa0a6; }
.visit_fs_call_host .staff_call_purpose_tile.selected {
background: rgba(167, 139, 218, 0.22);
border-color: var(--brand);
}
.visit_fs_call_host .staff_call_purpose_tile.selected .tile_primary { color: #d9c8f5; }
/* The objection control and the provider-delivered notice (CMR-2026-10-24-423). The notice the platform
speaks invites the person on the line to object; an invitation nothing can honour is worse than none, so
the indicator carries the control that stops it. */
.staff_call_stop_transcribing {
margin-left: auto;
padding: 2px 10px;
border: 1px solid var(--brand);
border-radius: 999px;
background: none;
color: var(--brand);
font-size: 12px;
font-weight: 600;
}
.staff_call_notice_confirm {
width: 100%;
margin: 14px 0 4px;
padding: 12px;
border-radius: var(--radius);
background: rgba(167, 139, 218, 0.10);
border: 1px solid rgba(167, 139, 218, 0.28);
text-align: left;
}
.staff_call_notice_confirm_copy { display: block; margin-bottom: 10px; }
.staff_call_notice_confirm_title {
display: block;
font-weight: 600;
font-size: 14px;
color: var(--brand);
}
.staff_call_notice_confirm_sub {
display: block;
margin-top: 3px;
font-size: 12px;
color: var(--desktop_home_gray);
line-height: 1.4;
}
.visit_fs_call_host .staff_call_notice_confirm { max-width: none; }
.visit_fs_call_host .staff_call_notice_confirm_title { color: #d9c8f5; }
.visit_fs_call_host .staff_call_notice_confirm_sub { color: #9aa0a6; }
.visit_fs_call_host .staff_call_stop_transcribing { color: #d9c8f5; border-color: rgba(167, 139, 218, 0.55); }
/* padded dropdown menu shared by the signed-note and service-line header tools menus. The values match the
signed-note menu, which carries them inline; the shadow is its exact value rather than --shadow_small, whose
geometry is the same but whose tint is cooler, so the two menus cannot look different side by side. */
.ndd_menu {
padding: 6px 0;
min-width: 200px;
border-radius: var(--radius_lg);
border: 1px solid var(--line);
box-shadow: 0 8px 24px rgba(26, 16, 64, 0.12);
}
.ndd_menu_item {
padding: 12px 16px;
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
}
.ndd_menu_item i {
color: var(--brand);
font-size: 1.1em;
width: 18px;
text-align: center;
}
/* same hover as .chart_template_menu, so Bootstrap's grey never shows through */
.ndd_menu_item:hover, .ndd_menu_item:focus {
background: var(--brand_soft);
color: var(--brand);
}
.ndd_menu_item_danger, .ndd_menu_item_danger i { color: var(--danger); }
.ndd_menu_item_danger:hover, .ndd_menu_item_danger:focus {
background: var(--danger_soft);
color: var(--danger);
}
.ndd_menu .dropdown-divider { margin: 4px 0; border-top-color: var(--line); }
/* settings-style rows inside a side panel: a white list group with the brand's radius and hairlines, each row
optionally tappable with a chevron (the service line share panel's service and discount rows) */
.ndd_list_group { border-radius: var(--radius_lg); overflow: hidden; }
.ndd_list_group .list-group-item { border-color: var(--line); padding: 14px; background: var(--surface); color: var(--ink); }
.ndd_list_row { display: flex; align-items: center; gap: 10px; }
.ndd_list_row_text { flex: 1; min-width: 0; }
.ndd_list_row[role='button'] { cursor: pointer; }
.ndd_list_row[role='button']:hover { background: var(--brand_soft); }
.ndd_list_row[role='button']:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ndd_list_row .bi-chevron-right { color: var(--muted); }
/* the chosen promo code in a service line's Discount panel — the design system's selection treatment, since
one code is chosen at a time and the card carries the emphasis rather than its button */
.service_line_promo_choice_card.selected
{
background: var(--brand_soft);
border: 2px solid var(--brand);
}
/* promo code scope: three axes, each either everything or a chosen few (CMR-2026-10-26-449) */
.promo_scope_container { margin-bottom: 12px; }
.promo_scope_axis_container { margin-bottom: 14px; }
.promo_scope_axis_title { font-size: 0.85em; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.promo_scope_axis_choices { display: flex; gap: 8px; }
.promo_scope_axis_choices .tile_ndd { flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.85rem; padding: 10px; }
.promo_scope_axis_picker { margin-top: 8px; }
/* a checkbox per row, the same shape as the service line editor's performer list */
.promo_scope_check_container { background: var(--surface); border-radius: var(--radius_lg); border: 1px solid var(--line); padding: 8px 12px; }
.promo_scope_check_label { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.9em; cursor: pointer; }
.promo_scope_check_label + .promo_scope_check_label { border-top: 1px solid var(--line); }
.promo_scope_check_label input { accent-color: var(--brand); flex: 0 0 auto; }
.promo_scope_check_meta { display: block; font-size: 0.8em; color: var(--muted); }
.promo_scope_axis_hint { font-size: 0.78em; color: var(--muted); margin-top: 5px; }
.promo_scope_check_empty { font-size: 0.82em; color: var(--muted); padding: 6px 0; }
/* ============================================================================
SERVICES ON THE MOBILE HOME SCREEN, AND THE TWO PANELS IT OPENS
CMR-2026-10-27-455. White surfaces with purple accents, tokens only. The
panels inherit the mchat_container frame, so neither sets its own background
on the messages area or the footer — the base pair already matches.
============================================================================ */
/* the air is in the card, not in the rows: the list reads as a quiet index under the label, the way the
empty next-visit card holds one illustration in a lot of space */
.ios_home_services_card {
display: flex;
flex-direction: column;
min-height: 300px;
padding: 20px 18px 18px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background:
radial-gradient(130% 95% at 100% 0%, var(--brand_soft) 0%, transparent 60%),
var(--surface);
}
.ios_home_services_eyebrow {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 14px;
}
.ios_home_services_rows {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
flex: 1;
margin-bottom: 18px;
}
.ios_home_service_row {
width: 100%;
display: grid;
grid-template-columns: 34px 1fr auto 10px;
align-items: center;
gap: 11px;
padding: 10px 12px;
text-align: left;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.ios_home_service_row:active,
.services_panel_row:active {
border-color: var(--brand);
background: var(--brand_soft);
transform: scale(0.995);
}
.ios_home_service_mark {
width: 34px;
height: 34px;
border-radius: var(--radius);
background: var(--brand_soft);
color: var(--brand_dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.74rem;
font-weight: 700;
}
.ios_home_service_body,
.services_panel_row_body { display: block; min-width: 0; }
.ios_home_service_name {
display: block;
font-size: 0.88rem;
font-weight: 600;
line-height: 1.3;
color: var(--ink);
}
/* one line each on the card, so three services are three even rows rather than a block of wrapped text */
.ios_home_service_row .ios_home_service_name,
.ios_home_service_row .ios_home_service_meta {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ios_home_service_meta {
display: block;
margin-top: 2px;
font-size: 0.74rem;
line-height: 1.35;
color: var(--muted);
}
.ios_home_service_price {
font-size: 0.88rem;
font-weight: 700;
color: var(--brand);
white-space: nowrap;
}
.ios_home_service_chevron {
font-size: 0.7rem;
color: var(--brand);
opacity: 0.45;
}
/* --- panel header, shared by both panels --- */
.services_panel_header { padding-top: env(safe-area-inset-top); }
.services_panel_header .mchat_username {
display: block;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.25;
}
.services_panel_subtitle {
margin-top: 2px;
font-size: 0.76rem;
line-height: 1.3;
color: inherit;
}
/* --- all services: the control strip above the scrolling list --- */
.services_panel_controls {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 11px;
padding: 14px 15px 13px;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
/* 16px or the WebView zooms the page when the field takes focus, which leaves the panel
scrolled sideways with no way back */
.services_panel_search_field,
.services_panel_state_select { font-size: 1rem; }
.services_panel_search_container .input_ndd { padding-right: 42px; }
.services_panel_clear_button {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: transparent;
color: var(--muted);
font-size: 0.78rem;
}
.services_panel_chip_row {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.services_panel_chip_row::-webkit-scrollbar { display: none; }
.services_panel_chip {
flex: 0 0 auto;
padding: 6px 13px;
border: 2px solid var(--line);
border-radius: var(--radius_pill);
background: var(--surface);
color: var(--muted);
font-size: 0.8rem;
font-weight: 600;
}
.services_panel_chip.selected {
background: var(--brand_soft);
border-color: var(--brand);
color: var(--brand_dark);
font-weight: 700;
}
/* --- all services: the list --- */
.services_panel_messages { padding: 16px 15px calc(24px + env(safe-area-inset-bottom)); }
.services_panel_count {
flex: 0 0 auto;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.services_panel_count_number { color: var(--ink); }
.services_panel_list {
display: flex;
flex-direction: column;
gap: 10px;
}
.services_panel_row {
display: block;
width: 100%;
padding: 14px;
text-align: left;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.services_panel_row_top {
display: grid;
grid-template-columns: 34px 1fr auto;
align-items: center;
gap: 11px;
}
.services_panel_row_text {
display: block;
margin-top: 11px;
font-size: 0.82rem;
line-height: 1.5;
color: var(--muted);
}
.services_panel_empty {
display: flex;
flex-direction: column;
gap: 7px;
padding: 24px 18px;
text-align: center;
border: 1px dashed var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
}
.services_panel_empty strong { font-size: 0.96rem; color: var(--ink); }
.services_panel_empty span { font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
/* the block above is display:flex, and .hide_me is display:none with no !important, so the
filter could never hide it without this */
.services_panel_empty.hide_me { display: none; }
/* --- one service: the panel body. Section markup is the service page's own, so
these rules restate its typography for the panel frame only. --- */
.service_panel_messages { padding: 16px 15px calc(20px + env(safe-area-inset-bottom)); gap: 14px; }
.service_panel_price_card {
padding: 18px;
border: 1.5px solid var(--brand);
border-radius: var(--radius_lg);
background: var(--surface);
}
.service_panel_price_big {
font-size: 2.1rem;
font-weight: 700;
line-height: 1;
color: var(--brand);
}
.service_panel_price_summary {
margin: 11px 0 14px;
font-size: 0.88rem;
line-height: 1.55;
color: var(--ink);
}
.service_panel .service_price_table {
width: 100%;
border-collapse: collapse;
font-size: 0.84rem;
}
.service_panel .service_price_table td {
padding: 8px 0;
color: var(--muted);
border-bottom: 1px solid var(--line);
}
.service_panel .service_price_table td:last-child {
text-align: right;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.service_panel .service_price_table tr.total td {
padding-top: 11px;
border-bottom: none;
font-weight: 700;
color: var(--ink);
}
.service_panel .service_price_note {
margin: 13px 0 0;
font-size: 0.76rem;
line-height: 1.5;
color: var(--muted);
}
.service_panel_tag_row { display: flex; flex-wrap: wrap; gap: 7px; }
.service_panel .service_tag {
padding: 5px 11px;
border: 1px solid var(--line);
border-radius: var(--radius_pill);
background: var(--surface);
font-size: 0.73rem;
font-weight: 600;
color: var(--muted);
}
/* a tag is not tappable, so it stays softer than a selected chip */
.service_panel .service_tag_mode {
border-color: var(--brand_soft);
background: var(--brand_soft);
color: var(--brand_dark);
}
.service_panel .service_alert_strip { margin: 0; font-size: 0.82rem; line-height: 1.45; }
.service_panel .service_section_block {
padding: 18px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
}
.service_panel .service_section_title {
margin: 0 0 13px;
font-size: 1.02rem;
font-weight: 700;
color: var(--ink);
}
.service_panel .service_paragraph {
margin: 0 0 10px;
font-size: 0.88rem;
line-height: 1.6;
color: var(--ink);
}
.service_panel .service_paragraph:last-child { margin-bottom: 0; }
.service_panel .service_steps_list {
margin: 0;
padding: 0;
list-style: none;
counter-reset: service_panel_step;
display: flex;
flex-direction: column;
gap: 15px;
}
.service_panel .service_steps_item {
counter-increment: service_panel_step;
position: relative;
padding-left: 38px;
}
.service_panel .service_steps_item::before {
content: counter(service_panel_step);
position: absolute;
left: 0;
top: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--brand_soft);
color: var(--brand_dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.77rem;
font-weight: 700;
}
.service_panel .service_steps_name {
display: block;
font-size: 0.9rem;
font-weight: 600;
color: var(--ink);
}
.service_panel .service_steps_text {
margin: 4px 0 0;
font-size: 0.84rem;
line-height: 1.5;
color: var(--muted);
}
.service_panel .service_lists_grid { display: flex; flex-direction: column; gap: 17px; }
.service_panel .service_list_heading {
margin-bottom: 9px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.service_panel .service_list_heading_included { color: var(--green); }
.service_panel .service_list_heading_excluded { color: var(--muted); }
.service_panel .service_list_included,
.service_panel .service_list_excluded,
.service_panel .service_requirement_list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 9px;
}
.service_panel .service_list_item,
.service_panel .service_requirement_item {
position: relative;
padding-left: 22px;
font-size: 0.86rem;
line-height: 1.5;
color: var(--ink);
}
.service_panel .service_list_included .service_list_item::before {
content: '\2713';
position: absolute;
left: 0;
color: var(--green);
font-weight: 700;
}
.service_panel .service_list_excluded .service_list_item::before {
content: '\2013';
position: absolute;
left: 0;
color: var(--muted);
font-weight: 700;
}
.service_panel .service_requirement_item::before {
content: '';
position: absolute;
left: 4px;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand);
}
.service_panel .service_fact_list { margin: 0; }
.service_panel .service_fact_row {
display: grid;
grid-template-columns: 100px 1fr;
gap: 11px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.service_panel .service_fact_row:last-child { padding-bottom: 0; border-bottom: none; }
.service_panel .service_fact_row dt {
font-size: 0.78rem;
font-weight: 700;
color: var(--brand);
}
.service_panel .service_fact_row dd {
margin: 0;
font-size: 0.85rem;
line-height: 1.5;
color: var(--ink);
}
.service_panel .service_clinician_list {
display: flex;
flex-direction: column;
gap: 13px;
margin-bottom: 14px;
}
/* three columns, not two: the avatar, the name and its context, and the control to the clinician's own profile.
An auto third column collapses to nothing where no profile is published, which is most clinicians today. */
.service_panel .service_clinician_row {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.service_panel .service_clinician_identity {
min-width: 0;
}
.service_panel .service_clinician_avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--brand_soft);
color: var(--brand);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
}
/* object-fit is what stops a portrait being squashed into the square the width and height give it */
.service_panel .service_clinician_photo {
display: block;
object-fit: cover;
}
/* THE WAY TO THE CLINICIAN'S OWN PAGE, which on this surface opens as a panel over this one. The chevron alone:
the drawer is a phone-width surface at every viewport, so there is no width at which the word fits the row.
Fill, border, radius and height come from btn_ndd_ghost btn_ndd_sm, as they do on the public page. */
.service_panel .service_clinician_profile_link {
padding: 5px 10px;
font-size: 1.05rem;
line-height: 1;
}
.service_panel .service_clinician_profile_word {
display: none;
}
.service_panel .service_clinician_name {
font-size: 0.9rem;
font-weight: 600;
color: var(--ink);
}
.service_panel .service_clinician_meta {
margin: 2px 0 0;
font-size: 0.78rem;
line-height: 1.4;
color: var(--muted);
}
/* THE OFFERING PRACTICE, as a continuation of the clinician card rather than a card of its own. It carried its
own border, radius and page-grey fill inside the already-bordered section, which reads as a box inside a box;
the owner asked for it removed on 2026-11-03 (CMR-2026-11-03-539). Changed here as well as on the public
page's stylesheet, because one builder renders both surfaces. */
.service_panel .service_practice_card_container {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
/* the same, on the drawer: the attribution under its own heading separates from nothing above it */
.service_panel .service_practice_card_container.service_practice_card_standalone {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.service_panel .service_practice_card_header {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
align-items: center;
margin-bottom: 11px;
}
/* the same soft circle the public page uses. It was a solid brand-filled rounded square, which is the heaviest
element in the attribution block and most of why the block still read as something of its own after the
border came off -- and its white was a hex literal where the system has a token. */
.service_panel .service_practice_card_mark {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--brand_soft);
color: var(--brand);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 700;
}
.service_panel .service_practice_card_name {
font-size: 0.92rem;
font-weight: 700;
color: var(--ink);
}
.service_panel .service_practice_card_entity {
margin: 2px 0 0;
font-size: 0.76rem;
color: var(--muted);
}
.service_panel .service_practice_card_action { margin-top: 12px; width: 100%; }
/* ─── CLINICIAN PROFILE, as a panel over the services drawer (CMR-2026-11-03-539) ───
The sections are the service panel's own vocabulary, so only the identity block at the head of the panel and
the service list are declared here. */
.clinician_panel .clinician_panel_identity {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 14px;
align-items: center;
margin-bottom: 14px;
}
.clinician_panel .clinician_hero_avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--brand_soft);
color: var(--brand);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 700;
}
.clinician_panel .clinician_hero_photo {
display: block;
object-fit: cover;
}
.clinician_panel .clinician_hero_text {
min-width: 0;
}
.clinician_panel .clinician_panel_name {
margin-bottom: 6px;
color: var(--ink);
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
}
.service_panel .clinician_provenance_note {
margin: 11px 0 0;
color: var(--muted);
font-size: 0.72rem;
line-height: 1.45;
}
.clinician_panel .clinician_service_list {
margin: 0;
padding: 0;
list-style: none;
}
.clinician_panel .clinician_service_item + .clinician_service_item {
border-top: 1px solid var(--line);
}
.clinician_panel .clinician_service_link {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 0;
color: inherit;
text-decoration: none;
}
.clinician_panel .clinician_service_body {
flex: 1 1 auto;
min-width: 0;
}
.clinician_panel .clinician_service_title {
display: block;
color: var(--ink);
font-size: 0.88rem;
font-weight: 700;
}
.clinician_panel .clinician_service_meta {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 0.76rem;
}
.clinician_panel .clinician_service_price {
flex: 0 0 auto;
color: var(--brand_deep);
font-size: 0.88rem;
font-weight: 700;
}
.clinician_panel .clinician_service_arrow {
flex: 0 0 auto;
color: var(--brand);
}
.service_panel .service_faq_item {
padding: 11px 0;
border-bottom: 1px solid var(--line);
}
.service_panel .service_faq_item:last-of-type { padding-bottom: 0; border-bottom: none; }
.service_panel .service_faq_item summary {
display: flex;
justify-content: space-between;
gap: 11px;
list-style: none;
cursor: pointer;
font-size: 0.88rem;
font-weight: 600;
color: var(--ink);
}
.service_panel .service_faq_item summary::-webkit-details-marker { display: none; }
.service_panel .service_faq_item summary::after {
content: '+';
color: var(--brand);
font-weight: 700;
}
.service_panel .service_faq_item[open] summary::after { content: '\2013'; }
.service_panel .service_faq_answer {
margin: 9px 0 0;
font-size: 0.85rem;
line-height: 1.55;
color: var(--muted);
}
.service_panel_footer_note {
padding: 2px 2px 0;
font-size: 0.74rem;
line-height: 1.5;
color: var(--muted);
}
.service_panel_footer {
display: block;
padding: 12px 15px calc(12px + env(safe-area-inset-bottom));
}
.service_panel .service_staff_notice_container {
display: block;
font-size: 0.82rem;
line-height: 1.5;
color: var(--ink);
}
.service_panel .service_staff_notice_container strong { display: block; margin-bottom: 4px; }
/* THE EMERGENCY CONTACT STEP. A white card naming the contact in force for the visit, or an empty space to
tap. The step itself never holds a form: what is behind it is an address book, and an address book inside
one step of a form is the longest step in it. */
.emgcontact_confirmed_card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); padding: 14px; }
.emgcontact_card_name { font-weight: 700; color: var(--ink); }
.emgcontact_card_meta { font-size: 0.85rem; color: var(--muted); margin-top: 3px; }
/* the empty state is a dashed box because a dashed box is the one shape on this platform that already means
"tap here and something goes in" — the upload area is drawn the same way */
.emgcontact_empty_card {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
background: transparent;
border: 2px dashed var(--brand);
border-radius: var(--radius_lg);
padding: 16px 14px;
cursor: pointer;
}
.emgcontact_empty_icon { color: var(--brand); font-size: 1.3rem; line-height: 1; }
.emgcontact_empty_words { flex: 1 1 auto; min-width: 0; }
.emgcontact_empty_primary { display: block; font-weight: 600; color: var(--brand_dark); }
.emgcontact_empty_secondary { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.emgcontact_empty_caret { color: var(--brand); }
/* THE PANELS behind the step: the picker, the form and one contact's details. */
.emgcontact_panel .mchat_messages { background: #f8f8f8; padding: 16px; display: block; }
.emgcontact_panel .mchat_input { background: white; border-top: 0; box-shadow: none; display: block; padding: 14px 16px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.emgcontact_panel_lead { font-size: 0.85rem; color: var(--muted); margin-bottom: 12px; }
.emgcontact_rows { display: flex; flex-direction: column; gap: 8px; }
/* a row is two controls side by side — the name chooses, the caret opens. Both are real buttons, so the row
stays usable with a keyboard, and the 2px border never changes width on selection. */
.emgcontact_row {
display: flex;
align-items: stretch;
background: var(--surface);
border: 2px solid var(--line);
border-radius: var(--radius_sm);
overflow: hidden;
}
.emgcontact_row.selected { border-color: var(--brand); background: var(--brand_soft); }
.emgcontact_row_main { flex: 1 1 auto; min-width: 0; text-align: left; background: transparent; border: 0; padding: 11px 14px; cursor: pointer; }
.emgcontact_row_name { display: block; font-weight: 600; color: var(--ink); }
.emgcontact_row.selected .emgcontact_row_name { color: var(--brand_dark); font-weight: 700; }
.emgcontact_row_meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.emgcontact_row.selected .emgcontact_row_meta { color: var(--brand_dark); opacity: 0.8; }
.emgcontact_row_caret { flex: 0 0 auto; background: transparent; border: 0; border-left: 1px solid var(--line); color: var(--muted); padding: 0 14px; cursor: pointer; }
.emgcontact_row.selected .emgcontact_row_caret { border-left-color: var(--brand); color: var(--brand); }
.emgcontact_row_main:focus-visible,
.emgcontact_row_caret:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(134,94,191,0.18); }
/* three stacked fields and no label rows — the panel heading says what is being collected, and a label above
each of three short fields doubles the height of the thing for no information. The labels are clipped
rather than removed, so they still reach a screen reader. */
.emgcontact_form { display: flex; flex-direction: column; gap: 10px; }
.emgcontact_clipped_label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.emgcontact_detail_card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); padding: 4px 14px; }
.emgcontact_detail_row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.emgcontact_detail_row:last-child { border-bottom: 0; }
.emgcontact_detail_label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.emgcontact_detail_value { color: var(--ink); margin-top: 2px; }
.emgcontact_delete_confirm { margin-top: 16px; background: var(--surface); border: 1px solid var(--danger); border-radius: var(--radius_lg); padding: 14px; }
.emgcontact_delete_words { font-size: 0.85rem; color: var(--ink); margin-bottom: 12px; }
/* THE DOCUMENTS STEP carries no card of its own: the upload area is already a bordered box, and a second
border around it is a box in a box. Same reasoning as the notes section above. */
.visit_media_builtin { background: transparent; border: 0; padding: 0; }
.visit_media_builtin .upload-area { margin-top: 10px; }
/* an answer that is more than a line of text, under its own summary row — the attached files, which a
patient checking their own submission should be able to see rather than count */
.service_line_intake_summary_extra { margin-top: 8px; }
.service_line_intake_summary_extra .visit_media_upload_gallery { margin-top: 0; }
/* =====================================================================================================
FORM MAP EDITOR — StrongCert feature ndd_form_completion_engine, phase 6.
A side panel: the whole document scrolls in one column, with the list of blanks beside it on request.
Every colour is a design token; the disposition states are the standard selection pattern.
===================================================================================================== */
.form_map_canvas_container { padding: 10px; }
.form_map_gate { margin-bottom: 10px; font-size: 0.9em; }
.form_map_toolbar
{
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.form_map_pager { font-size: 0.85em; color: var(--muted); }
.form_map_page_button { border: 1px solid var(--line); background: white; margin-left: 4px; min-width: 30px; }
.form_map_page_active
{
background: var(--brand_soft);
border: 2px solid var(--brand);
color: var(--brand_dark);
font-weight: 700;
}
/* a page with anything still undecided is marked, because the gate counts every page and not just this one */
.form_map_page_todo::after { content: ' •'; color: var(--danger_ink); font-weight: 700; }
.form_map_counts { font-size: 0.8em; color: var(--muted); }
.form_map_toolbar_actions { display: flex; gap: 6px; flex-wrap: wrap; }
.form_map_zoom { display: flex; align-items: center; gap: 4px; }
.form_map_zoom .btn { border: 1px solid var(--line); background: white; min-width: 30px; }
.form_map_zoom_readout { font-size: 0.8em; color: var(--muted); min-width: 42px; text-align: center; }
/* the count of blanks dragged and not yet written — it has to be beside the buttons that resolve it */
.form_map_unsaved
{
font-size: 0.8em;
font-weight: 700;
color: var(--danger_ink);
align-self: center;
margin-right: 2px;
}
.form_map_split { display: flex; gap: 14px; align-items: flex-start; }
/* the whole document in one scrolling column. position: relative makes it the offset parent, which is what
lets the page blocks be found by their offset from the top of the column. */
.form_map_doc_pane
{
position: relative;
flex: 1 1 60%;
min-width: 0;
max-height: 72vh;
overflow: auto;
background: var(--page);
padding: 8px;
border: 1px solid var(--line);
border-radius: 6px;
}
/* with the list hidden the document takes the whole width, which is the default: the list is a reference, and
the thing being reviewed is the form */
.form_map_split.form_map_list_hidden .form_map_inspector_pane { display: none; }
.form_map_split.form_map_list_hidden .form_map_doc_pane { flex: 1 1 100%; }
.form_map_page_block { margin-bottom: 18px; }
.form_map_page_block:last-child { margin-bottom: 0; }
.form_map_page_caption { font-size: 0.78em; color: var(--muted); margin-bottom: 4px; }
.form_map_caption_todo { color: var(--danger_ink); font-weight: 700; }
/* a page whose image has not arrived yet still holds its own height, from the aspect ratio on the stage, so
the column does not jump under the reader as each one loads */
.form_map_page_loading
{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85em;
color: var(--muted);
}
.form_map_inspector_pane
{
flex: 0 0 360px;
min-width: 0;
max-height: 72vh;
overflow-y: auto;
padding-right: 4px;
}
/* the stage is the positioning context for every box, so a box's percentage is relative to the page image.
Zoom is one variable on the canvas: every box is already a percentage of its stage, so scaling the stage
scales the overlay with it and no coordinate is recomputed. */
.form_map_page_stage
{
position: relative;
display: block;
width: calc(100% * var(--form_map_zoom, 1));
border: 1px solid var(--line);
background: white;
}
.form_map_page_image { display: block; width: 100%; height: 100%; object-fit: contain; }
.form_map_render_missing { padding: 24px; font-size: 0.9em; color: var(--muted); text-align: center; }
.form_map_overlay { position: absolute; inset: 0; }
.form_map_box
{
position: absolute;
box-sizing: border-box;
cursor: grab;
border: 2px solid var(--muted);
background: rgba(0, 0, 0, 0.04);
min-height: 8px;
}
.form_map_box_tag
{
position: absolute;
top: -15px;
left: 0;
font-size: 9px;
line-height: 13px;
padding: 0 3px;
white-space: nowrap;
background: var(--brand);
color: white;
border-radius: 2px;
pointer-events: none;
opacity: 0;
}
.form_map_box:hover .form_map_box_tag, .form_map_box_selected .form_map_box_tag { opacity: 1; }
/* the disposition states. Undecided is the one that has to draw the eye, because the gate counts it. */
.form_map_box_undecided { border-color: var(--danger); background: rgba(220, 53, 69, 0.12); }
.form_map_box_assigned { border-color: var(--brand); background: var(--brand_soft); }
.form_map_box_not_mine { border-color: var(--muted); background: rgba(0, 0, 0, 0.05); border-style: dashed; }
.form_map_box_rejected { border-color: var(--line); background: transparent; opacity: 0.4; }
.form_map_box_selected { outline: 2px solid var(--brand); outline-offset: 2px; }
.form_map_box_dragging { cursor: grabbing; opacity: 0.8; }
.form_map_row
{
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px;
margin-bottom: 8px;
background: white;
}
.form_map_row_undecided { border-left: 4px solid var(--danger); }
.form_map_row_assigned { border-left: 4px solid var(--brand); }
.form_map_row_not_mine { border-left: 4px solid var(--muted); }
.form_map_row_rejected { border-left: 4px solid var(--line); opacity: 0.6; }
.form_map_row_selected { box-shadow: 0 0 0 2px var(--brand_soft); }
.form_map_row_head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.form_map_row_detected { font-size: 0.85em; font-weight: 700; }
.form_map_row_state { font-size: 0.72em; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; }
.form_map_row_body { display: flex; flex-direction: column; gap: 6px; }
.form_map_row_controls { display: flex; gap: 6px; }
.form_map_row_actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.form_map_empty { font-size: 0.9em; color: var(--muted); padding: 16px; }
/* On a narrow screen the document and the inspector stack. The overlay still works, but placing a blank by
dragging on a phone is not a thing anybody should be asked to do, so the page says so instead. */
@media (max-width: 900px)
{
.form_map_split { flex-direction: column; }
.form_map_doc_pane, .form_map_inspector_pane { flex: 1 1 auto; width: 100%; }
/* the column keeps a height of its own rather than growing to fit, so it still scrolls — which is what
brings each page's image in as it is reached instead of asking for every page at once */
.form_map_doc_pane { max-height: 60vh; }
.form_map_inspector_pane { max-height: none; }
.form_map_box { pointer-events: none; }
/* the list is the only part of this that works on a phone, so it is always shown here and the control that
would hide it is not offered */
.form_map_split.form_map_list_hidden .form_map_inspector_pane { display: block; }
.form_map_list_toggle { display: none; }
.form_map_doc_pane::after
{
content: 'Mapping a form needs a larger screen — the blanks below can be reviewed here, but place them on a laptop.';
display: block;
font-size: 0.8em;
color: var(--muted);
padding: 8px 2px;
}
}
.practice_form_row_actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
@media (max-width: 600px)
{
.practice_form_row_actions { flex-direction: column; align-items: stretch; }
}
/* The model's suggestion, beside the reviewer's controls and never filled into them. Low confidence is marked
because it is the one a reviewer should look at hardest — not hidden, which would be worse. */
.form_map_suggestion
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 5px 7px;
margin-bottom: 6px;
border-radius: 4px;
font-size: 0.8em;
background: var(--brand_soft);
border-left: 3px solid var(--brand);
}
.form_map_suggestion_text { min-width: 0; overflow-wrap: anywhere; }
.form_map_suggestion_confidence { color: var(--muted); font-size: 0.9em; }
.form_map_suggestion_low { background: var(--gold_soft); border-left-color: var(--gold); }
.form_map_suggestion_medium { background: var(--gold_soft); }
/* A DIFFERENTIAL ROW IS A PICK-LIST ENTRY: the diagnosis, its code, and the control that files it.
Everything that explains it sits behind the caret, so four possibilities can be compared at a glance
mid-encounter rather than read as four paragraphs. Owner asked for this shape 2026-10-28. */
.assist_item_dx { align-items: center; }
.assist_item_dx .assist_item_text
{
font-size: 0.85rem;
font-weight: 700;
line-height: 1.3;
}
/* the code is the caret's face, the way this provider's directions are the medication caret's */
.assist_dx_caret
{
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 2px;
padding: 2px 6px 2px 0;
border: 0;
background: transparent;
color: var(--brand);
font-size: 0.78rem;
font-weight: 700;
line-height: 1.35;
text-align: left;
cursor: pointer;
}
.assist_dx_caret .bi { font-size: 0.7rem; transition: transform 0.15s ease; }
.assist_dx_caret[aria-expanded='true'] .bi { transform: rotate(180deg); }
.assist_dx_caret:hover .assist_dx_code { text-decoration: underline; }
/* a suggestion the catalogue could not confirm says so quietly and offers no control: the clinical
impression is a coded record, so there is nothing to file */
.assist_dx_code_none { color: var(--muted); font-weight: 500; font-style: italic; }
.assist_dx_expand
{
flex: 1 0 100%;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--line);
}
.assist_dx_expand .assist_item_code,
.assist_dx_expand .assist_item_detail { margin-top: 0; }
.assist_dx_expand .assist_item_detail { margin-bottom: 3px; }
/* THE ASSIST AND WORKBENCH CARDS CARRY NO PADDING OF THEIR OWN — their header and body supply it.
`.visit_card` is shared with the chat-inbox and documents cards, whose own rule (the earlier one in
this file) sets `padding: 14px 16px; margin-bottom: 10px` and is right to for those. Those values
were reaching these cards too, on top of the header and body padding, and on a phone that doubled
inset was most of the complaint: 16px of card padding and 10px of card margin that no rule in the
workbench block mentions. Scoped by surface rather than zeroed globally, because the other two
components genuinely want the air. Owner reported it three times; measured, not guessed. */
.visit_assist_drawer .visit_card,
.visit_fs_content .visit_card
{
padding: 0;
margin: 0 0 6px;
border-radius: var(--radius);
}
.visit_assist_drawer .visit_card_body,
.visit_fs_content .visit_card_body { padding: 4px 5px; }
/* A SUGGESTION ROW IS FLAT, with a straight purple edge down its left. The radius was rounding that
edge into a sliver at top and bottom; the owner wants the colour reading as one solid bar.
Owner decision 2026-10-29. */
.visit_assist_drawer .assist_item,
.visit_fs_content .assist_item,
.triage_uti_suggestion_card .assist_item
{
border-radius: 0;
border-left: 3px solid var(--brand);
padding: 5px 6px;
}
/* The Visit suggestions now live in individual review cards. Keep their rows aligned with the
Live Assist drawer, including education resources, after moving them out of the AI card. */
.triage_uti_suggestion_card .triage_uti_education_row
{
background: var(--surface);
border-radius: 0;
border-left: 3px solid var(--brand);
margin-top: 4px;
padding: 5px 6px;
}
/* THE PRE-VISIT RISK GATE (CMR-2026-10-29-482)
IT ALL HAS TO FIT ON ONE SCREEN. A gate that scrolls is a gate whose second option is below the fold, and a
patient who has to scroll to find "seek care" is a patient being nudged toward the one they can already see.
So the type is tight, the padding is 15px, and the icon sits beside the title rather than above it. Every
value here is a height budget, not a taste: changing one means re-checking that the whole thing still fits a
small phone without scrolling. */
/* THE GATE FILLS THE PANEL. Its parent already applies 15px, so the gate adds none of its own -- doubling it
was what put 30px above the title. The options then take whatever height is left, which removes the dead
band that sat between the cards and the footer. */
.checkin_gate_host { padding: 0; }
.checkin_hidden_for_gate { display: none !important; }
.checkin_risk_gate { padding: 0; text-align: left; }
.checkin_risk_gate_head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.checkin_risk_gate_icon { font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }
.checkin_risk_gate_title { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.checkin_risk_gate_high .checkin_risk_gate_icon, .checkin_risk_gate_high .checkin_risk_gate_title { color: var(--danger, #b42318); }
.checkin_risk_gate_medium .checkin_risk_gate_icon, .checkin_risk_gate_medium .checkin_risk_gate_title { color: var(--warning, #b54708); }
.checkin_risk_gate_body { font-size: 0.9rem; line-height: 1.4; color: #1f2937; }
.checkin_risk_gate_body p { margin: 0 0 7px 0; }
.checkin_risk_gate_body p:last-child { margin-bottom: 0; }
.checkin_risk_gate_automated { font-size: 0.74rem; line-height: 1.35; color: #6b7280; margin: 9px 0 11px 0; }
/* NEITHER OPTION IS TINTED UNTIL IT IS CHOSEN. The seek-care card used to carry a pink wash to mark it as the
safer one, and it read as already selected -- so the screen appeared to have answered itself, and the real
selection state became invisible. Both cards are now plain until chosen, and the tone appears only on the
one the patient picked. */
/* EQUAL ROWS, SIZED TO THEIR TEXT. Two cards of different heights read as two options of different weight, and
a choice this screen exists to put evenly cannot afford that -- so grid-auto-rows: 1fr makes them identical
whatever their text. They deliberately do NOT grow: letting them absorb the leftover panel turned two
ordinary options into two enormous boxes of white space, which is a different kind of wrong. */
.checkin_risk_gate_options { display: grid; grid-auto-rows: 1fr; gap: 8px; }
.checkin_risk_gate_option {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 9px;
background: white; cursor: pointer;
}
.checkin_risk_gate_option_selected { border-color: var(--brand); background: var(--brand_soft); }
.checkin_risk_gate_option_seek.checkin_risk_gate_option_selected { border-color: var(--danger, #b42318); background: #fdecec; }
.checkin_risk_gate_option_tick {
flex: 0 0 20px; width: 20px; height: 20px;
border: 2px solid #9ca3af; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.72rem; color: transparent;
}
.checkin_risk_gate_option_selected .checkin_risk_gate_option_tick { border-color: var(--brand); background: var(--brand); color: white; }
.checkin_risk_gate_option_seek.checkin_risk_gate_option_selected .checkin_risk_gate_option_tick { border-color: var(--danger, #b42318); background: var(--danger, #b42318); }
.checkin_risk_gate_option_text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.checkin_risk_gate_option_label { font-weight: 700; font-size: 0.92rem; line-height: 1.25; color: #111827; }
.checkin_risk_gate_option_detail { font-size: 0.78rem; line-height: 1.3; color: #4b5563; }
.checkin_risk_gate_footer { padding: 0; text-align: left; }
.checkin_risk_gate_ack { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.checkin_risk_gate_ack_label { font-size: 0.82rem; color: #4b5563; line-height: 1.3; }
.checkin_risk_gate_confirm_class[disabled] { opacity: 0.45; }
/* the wait while the assessment runs -- it says what is happening, because an unexplained pause after
submitting symptoms is filled in by the patient's imagination */
.checkin_assessing { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0; }
.checkin_assessing_spinner {
width: 28px; height: 28px; border-radius: 50%;
border: 3px solid var(--brand_soft); border-top-color: var(--brand);
animation: checkin_assessing_spin 0.8s linear infinite;
}
@keyframes checkin_assessing_spin { to { transform: rotate(360deg); } }
.checkin_assessing_text { font-size: 0.95rem; color: #4b5563; }
.checkin_assessing_sub { font-size: 0.8rem; color: #9ca3af; }
/* the screen after the visit has been cancelled: what happened, then where to go */
.checkin_seek_care { padding: 0; text-align: left; }
.checkin_seek_care_status { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 0.85rem; line-height: 1.4; border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.checkin_seek_care_status_done { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; }
.checkin_seek_care_status_open { background: #fffaeb; border: 1px solid #fedf89; color: #b54708; }
.checkin_seek_care_title { font-size: 1.02rem; font-weight: 700; margin-bottom: 3px; }
.checkin_seek_care_lead { font-size: 0.85rem; line-height: 1.4; color: #b42318; font-weight: 600; margin-bottom: 12px; }
.checkin_seek_care_hospitals_label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin-bottom: 6px; }
.checkin_seek_care_hospitals_loading, .checkin_seek_care_hospitals_none { font-size: 0.85rem; color: #6b7280; padding: 8px 0; }
.hospital_options { display: flex; flex-direction: column; gap: 8px; }
.hospital_option { border: 1px solid #e5e7eb; border-radius: 9px; padding: 10px; background: white; text-align: left; }
.hospital_option_head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; text-align: left; }
.hospital_option_name { font-weight: 700; font-size: 0.88rem; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.hospital_option_miles { font-size: 0.8rem; color: #6b7280; white-space: nowrap; flex: 0 0 auto; }
.hospital_option_where { font-size: 0.8rem; color: #4b5563; margin-top: 2px; line-height: 1.3; }
.hospital_option_trauma { display: inline-block; align-self: flex-start; font-size: 0.68rem; font-weight: 700; color: #b42318; background: #fdecec; border-radius: 4px; padding: 2px 6px; margin-top: 5px; }
.hospital_option_actions { display: flex; gap: 14px; margin-top: 8px; }
.hospital_option_call, .hospital_option_map { font-size: 0.85rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.checkin_seek_care_footer { padding: 0; }
.checkin_assessing_sub { font-size: 0.82rem; color: #9ca3af; }
.checkin_seek_care_status { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.checkin_seek_care_status_done { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; }
.checkin_seek_care_status_open { background: #fffaeb; border: 1px solid #fedf89; color: #b54708; }
/* ==================================================================== *
* LAB ORDER BUILDER — CMR-2026-10-30-490
* One row component serves all three tabs of the laboratory panel.
* A block wrapper holding a flex head plus an expansion — deliberately
* NOT a flex row with a `flex: 1 0 100%` child, which is the shape that
* rendered one glyph per line on the Live Assist medication rows.
* ==================================================================== */
/* the panel's only scrolling area. The base .mchat_messages rule supplies flex: 1, min-height: 0 and
overflow-y: auto; this pins the behaviour against a future inline style on the element. */
.lab_order_panel .mchat_messages
{
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.lab_order_row
{
border: 1.5px solid #ece6f6;
border-radius: var(--radius);
background: var(--surface);
margin-bottom: 7px;
overflow: hidden;
}
.lab_order_row:hover
{
border-color: #d9c9f3;
}
/* on the order, carrying no diagnosis code — not orderable yet */
.lab_order_row[data_state='pending']
{
border-color: #fbd96e;
background: var(--gold_soft);
}
/* on the order and complete */
.lab_order_row[data_state='done']
{
border-color: var(--brand);
background: var(--brand_soft);
}
.lab_row_head
{
display: flex;
align-items: center;
gap: 10px;
padding: 11px 12px;
cursor: pointer;
}
.lab_row_mark
{
flex: none;
width: 24px;
height: 24px;
border-radius: var(--radius_pill);
border: 1.5px solid var(--muted);
background: var(--surface);
color: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
}
.lab_order_row[data_state='pending'] .lab_row_mark
{
border-color: #b25e00;
border-width: 2px;
}
.lab_order_row[data_state='done'] .lab_row_mark
{
border-color: var(--brand);
background: var(--brand);
color: var(--surface);
}
.lab_row_copy
{
flex: 1 1 auto;
min-width: 0;
}
.lab_row_name
{
font-size: 0.84rem;
font-weight: 600;
color: var(--ink);
}
.lab_row_meta
{
font-size: 0.7rem;
color: var(--muted);
margin-top: 3px;
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.lab_row_meta:empty
{
display: none;
}
.lab_row_need
{
color: #7a5b00;
font-weight: 700;
}
.lab_row_codes
{
color: var(--brand_dark);
font-weight: 700;
}
.lab_row_fav_mark
{
color: var(--brand);
}
.lab_row_chevron
{
flex: none;
width: 30px;
height: 30px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
color: var(--muted);
font-size: 0.82rem;
display: flex;
align-items: center;
justify-content: center;
}
.lab_row_chevron i
{
transition: transform 0.18s;
}
.lab_order_row.open .lab_row_chevron
{
border-color: var(--brand);
color: var(--brand);
}
.lab_order_row.open .lab_row_chevron i
{
transform: rotate(180deg);
}
/* the expansion ships with the row, so opening it costs no request */
.lab_row_expand
{
border-top: 1px dashed #ded3f0;
padding: 11px 12px 12px;
background: rgba(255, 255, 255, 0.72);
}
.lab_order_row:not(.open) .lab_row_expand
{
display: none;
}
.lab_row_expand_label
{
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.lab_row_apply
{
margin-top: 8px;
}
.lab_row_expand_foot
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
padding-top: 11px;
border-top: 1px solid var(--line);
}
.lab_row_text_button
{
border: 0;
background: transparent;
padding: 0;
font-size: 0.74rem;
font-weight: 700;
color: var(--brand);
text-align: left;
}
.lab_row_text_button.lab_row_remove
{
color: var(--danger);
}
.lab_row_hint
{
font-size: 0.7rem;
color: var(--muted);
line-height: 1.5;
}
.lab_row_fav_button
{
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
border: 1px solid var(--line);
border-radius: var(--radius_pill);
background: var(--surface);
color: var(--muted);
font-size: 0.72rem;
font-weight: 700;
padding: 5px 11px;
}
.lab_row_fav_button.selected
{
border-color: var(--brand);
background: var(--brand_soft);
color: var(--brand_dark);
}
/* ---- diagnosis selector ---------------------------------------------- *
* ICD-10 short descriptions average 49 characters and reach 60, so this
* is a dense stack of tappable rows at the small radius the design system
* names for exactly that case, never a row of pills.
* --------------------------------------------------------------------- */
.lab_dx_list
{
display: grid;
gap: 4px;
}
.lab_dx_option
{
display: flex;
align-items: flex-start;
gap: 9px;
width: 100%;
padding: 9px 10px;
border: 1px solid var(--line);
border-radius: var(--radius_sm);
background: var(--surface);
text-align: left;
font-family: var(--font);
}
.lab_dx_option:hover
{
border-color: #d9c9f3;
}
.lab_dx_option.selected
{
border-color: var(--brand);
background: var(--brand_soft);
}
.lab_dx_tick
{
flex: none;
width: 18px;
height: 18px;
margin-top: 1px;
border: 1.5px solid #c4a8e8;
border-radius: 3px;
background: var(--surface);
color: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.64rem;
}
.lab_dx_option.selected .lab_dx_tick
{
border-color: var(--brand);
background: var(--brand);
color: var(--surface);
}
.lab_dx_code
{
flex: 0 0 54px;
font-size: 0.72rem;
font-weight: 800;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.lab_dx_option.selected .lab_dx_code
{
color: var(--brand_dark);
}
.lab_dx_text
{
flex: 1 1 auto;
min-width: 0;
font-size: 0.73rem;
line-height: 1.4;
color: var(--ink);
}
.lab_dx_find
{
align-items: center;
justify-content: center;
gap: 7px;
border-style: dashed;
color: var(--brand);
font-size: 0.74rem;
font-weight: 700;
padding: 11px 10px;
}
/* ---- the panel's own furniture --------------------------------------- */
.lab_panel_tabs
{
flex: 0 0 auto;
display: flex;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.lab_panel_tab
{
flex: 1;
padding: 11px 4px 9px;
border: 0;
border-bottom: 3px solid transparent;
background: var(--surface);
color: var(--muted);
font-size: 0.78rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.lab_panel_tab.active
{
border-bottom-color: var(--brand);
color: var(--ink);
font-weight: 800;
}
.lab_panel_tab_count
{
font-size: 0.64rem;
font-weight: 700;
color: var(--muted);
background: var(--page);
border-radius: var(--radius_pill);
padding: 1px 6px;
}
.lab_search_head
{
flex: 0 0 auto;
padding: 10px 12px;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.lab_search_wrap
{
position: relative;
}
.lab_search_wrap > i.lab_search_icon
{
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--brand);
z-index: 1;
pointer-events: none;
}
.lab_search_wrap .form-control
{
min-height: 44px;
padding: 8px 38px !important;
border: 1.5px solid #e0cefc !important;
border-radius: var(--radius);
font-size: 0.88rem;
}
.lab_panel_empty
{
text-align: center;
padding: 44px 18px;
color: var(--muted);
}
.lab_panel_empty > i
{
font-size: 2.2rem;
color: #d8d8e2;
}
.lab_panel_empty_title
{
font-size: 0.86rem;
font-weight: 700;
color: var(--ink);
margin-top: 10px;
}
.lab_panel_empty_sub
{
font-size: 0.74rem;
margin-top: 4px;
line-height: 1.5;
}
.lab_centre_line
{
display: flex;
align-items: center;
gap: 9px;
padding: 9px 10px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--page);
margin-bottom: 9px;
width: 100%;
text-align: left;
}
.lab_centre_line > i:first-child
{
color: var(--brand);
flex: none;
}
.lab_centre_copy
{
flex: 1 1 auto;
min-width: 0;
}
.lab_centre_name
{
display: block;
font-size: 0.78rem;
font-weight: 700;
color: var(--ink);
}
/* a block, or the ellipsis below is inert and the empty-state sentence overruns the button */
.lab_centre_addr
{
display: block;
font-size: 0.69rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lab_centre_line[data_state='empty']
{
border-style: dashed;
}
.lab_centre_line[data_state='empty'] .lab_centre_name
{
color: var(--muted);
font-weight: 600;
}
/* the empty state is a sentence, so it wraps instead of being clipped to one line */
.lab_centre_line[data_state='empty'] .lab_centre_addr
{
white-space: normal;
}
/* the tabs must not wrap their labels at phone width */
.lab_panel_tab
{
white-space: nowrap;
}
/* a focus ring for every new control, rather than the browser default */
.lab_dx_option:focus-visible,
.lab_row_chevron:focus-visible,
.lab_panel_tab:focus-visible,
.lab_row_fav_button:focus-visible,
.lab_centre_line:focus-visible
{
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* the inline search's clear control, which replaced the autocomplete widget's own */
.lab_search_clear
{
position: absolute;
right: 0;
top: 0;
width: 38px;
height: 100%;
border: 0;
background: transparent;
color: var(--muted);
font-size: 1.2rem;
z-index: 2;
}
/* the results list replaces the order list in place rather than opening a dropdown over it */
.lab_search_results
{
display: block;
}
/* while the search results are showing there is nothing to sign and no centre to set, so the footer's
order controls are withdrawn and come back when a test is chosen or the search is cleared */
.lab_order_panel.lab_panel_searching .lab_centre_container,
.lab_order_panel.lab_panel_searching .create_lab_request_button
{
display: none;
}
/* the footer collapses to nothing while searching, so it must not leave its padding behind */
.lab_order_panel.lab_panel_searching .mchat_input
{
padding-top: 0 !important;
padding-bottom: env(safe-area-inset-bottom) !important;
}
/* a category heading in the order list, the search results and the favourites list */
.lab_group_heading
{
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
padding: 14px 2px 7px;
}
.lab_group_heading:first-child
{
padding-top: 4px;
}
/* ==================================================================== *
* QUICK ORDERS SHEET — CMR-2026-10-30-490
* A standing page of labs, every row always present, in the same place
* on every visit. A dense tappable line at --radius_sm, never a card:
* an 8px corner on a 40px row reads as a pill.
* ==================================================================== */
/* A sticky top: 0 pins to the scrollport's CONTENT box, while overflow clips at its PADDING box. Any
padding-top on .mchat_messages is therefore a strip above this heading where rows scroll past in
full view, under the tab bar — 4px of it shipped. The panel's scroll container must keep
padding-top: 0 and let this heading's own padding supply the air. */
.qs_section_head
{
display: flex;
align-items: baseline;
gap: 7px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
padding: 16px 2px 6px;
position: sticky;
top: 0;
background: var(--surface);
z-index: 2;
}
/* the scroll container carries no top padding, so the first heading supplies the gap under the tabs */
.qs_section_head:first-child
{
padding-top: 10px;
}
.qs_section_n
{
color: var(--muted);
letter-spacing: 0;
font-weight: 600;
text-transform: none;
}
.qs_sheet_row
{
border: 1px solid var(--line);
border-radius: var(--radius_sm);
background: var(--surface);
margin-bottom: 3px;
overflow: hidden;
}
.qs_sheet_row:hover
{
border-color: #d9c9f3;
}
/* on the order and complete */
.qs_sheet_row[data_state='done']
{
border-color: var(--brand);
background: var(--brand_soft);
}
/* on the order, carrying no diagnosis code */
.qs_sheet_row[data_state='pending']
{
border-color: #fbd96e;
background: var(--gold_soft);
}
/* added by hand or carried in by an order set, rather than part of the sheet */
.qs_sheet_row.qs_addon_row
{
border-left: 3px solid var(--brand);
}
.qs_row_head
{
display: flex;
align-items: center;
gap: 8px;
padding: 0 8px 0 0;
}
/* the tick target is the whole line, which is what makes the sheet quick */
.qs_row_tick
{
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
padding: 9px 10px;
text-align: left;
font-family: var(--font);
}
.qs_box
{
flex: none;
width: 20px;
height: 20px;
border: 1.5px solid var(--muted);
border-radius: 3px;
background: var(--surface);
color: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
}
.qs_sheet_row[data_state='done'] .qs_box
{
border-color: var(--brand);
background: var(--brand);
color: var(--surface);
}
.qs_sheet_row[data_state='pending'] .qs_box
{
border-color: #b25e00;
border-width: 2px;
}
.qs_name
{
flex: 1 1 auto;
min-width: 0;
font-size: 0.8rem;
color: var(--ink);
line-height: 1.35;
}
.qs_sheet_row[data_state='done'] .qs_name,
.qs_sheet_row[data_state='pending'] .qs_name
{
font-weight: 600;
}
/* the code pill is also the way into the picker for this row */
.qs_code_button
{
flex: none;
border: 0;
background: transparent;
padding: 4px 0;
}
.qs_code
{
display: inline-block;
font-size: 0.66rem;
font-weight: 700;
color: var(--muted);
font-variant-numeric: tabular-nums;
border: 1px solid var(--line);
border-radius: var(--radius_pill);
padding: 2px 7px;
background: var(--surface);
white-space: nowrap;
}
.qs_sheet_row[data_state='done'] .qs_code
{
color: var(--brand_dark);
border-color: #d9c9f3;
}
.qs_code.missing
{
color: #7a5b00;
border-color: #fbd96e;
}
/* the picker, shipped with the row so opening it costs no request */
.qs_row_codes
{
border-top: 1px dashed #ded3f0;
padding: 10px;
background: rgba(255, 255, 255, 0.72);
}
.qs_sheet_row:not(.open) .qs_row_codes
{
display: none;
}
.qs_row_codes_label
{
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
/* ---- off-sheet additions, and the way to make one ---- */
.qs_addon_head
{
display: flex;
align-items: baseline;
gap: 7px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand_dark);
padding: 18px 2px 6px;
}
.qs_add
{
display: flex;
align-items: center;
gap: 9px;
width: 100%;
margin-top: 14px;
padding: 12px;
border: 1.5px dashed #d9c9f3;
border-radius: var(--radius);
background: var(--surface);
color: var(--brand);
font-size: 0.8rem;
font-weight: 600;
text-align: left;
font-family: var(--font);
}
.qs_add_hint
{
color: var(--muted);
font-weight: 400;
font-size: 0.72rem;
}
/* the Edit Quick Orders panel's closing note. The order sheet itself carries no such note. */
.qs_sheet_foot_note
{
font-size: 0.7rem;
color: var(--muted);
line-height: 1.5;
margin: 14px 2px 0;
padding-top: 12px;
border-top: 1px solid var(--line);
}
/* ---- an order set that has just been applied says so, on the sheet it ticked ---- */
.qs_applied
{
display: flex;
align-items: center;
gap: 9px;
background: var(--brand_soft);
border: 1px solid #d9c9f3;
border-radius: var(--radius);
padding: 9px 11px;
margin: 8px 0 2px;
font-size: 0.75rem;
color: var(--brand_dark);
}
.qs_applied > i:first-child
{
flex: none;
}
.qs_applied > span
{
flex: 1 1 auto;
}
.qs_applied button
{
flex: none;
border: 0;
background: transparent;
color: var(--brand_dark);
font-size: 1rem;
padding: 0 2px;
}
/* a set taken back off reads as a reversal, not as a second confirmation of the same thing */
.qs_applied_off
{
background: var(--surface);
border-color: var(--line);
color: var(--muted);
}
.qs_applied_off button
{
color: var(--muted);
}
/* ---- an order set row ---- */
.qs_set
{
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px;
border: 1.5px solid #ece6f6;
border-radius: var(--radius);
background: var(--surface);
text-align: left;
margin-bottom: 7px;
font-family: var(--font);
}
.qs_set:hover
{
border-color: #d9c9f3;
}
.qs_set.applied
{
border-color: var(--brand);
background: var(--brand_soft);
}
.qs_set.applied .qs_box
{
border-color: var(--brand);
background: var(--brand);
color: var(--surface);
}
.qs_set_copy
{
flex: 1 1 auto;
min-width: 0;
}
.qs_set_name
{
display: block;
font-size: 0.84rem;
font-weight: 700;
color: var(--ink);
}
.qs_set_meta
{
display: block;
font-size: 0.7rem;
color: var(--muted);
margin-top: 3px;
line-height: 1.4;
}
.qs_set_meta b
{
color: #7a5b00;
}
/* the same control applies a set and takes one off, so the row has to say which it will do */
.qs_set_on
{
color: var(--brand_dark);
font-weight: 700;
}
.qs_set_part
{
color: #7a5b00;
font-weight: 700;
}
.qs_result_note
{
font-size: 0.7rem;
color: var(--muted);
margin: 6px 0 10px;
line-height: 1.55;
}
/* ---- the footer's two actions ---- */
.qs_cta_row
{
display: flex;
gap: 8px;
}
.qs_cta_row .btn_ndd
{
flex: 1 1 auto;
}
.qs_cta_row .btn_ndd.qs_review
{
flex: 0 0 96px;
}
/* the review's read-only lines */
.qs_review_line
{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 2px;
border-bottom: 1px solid var(--line);
}
.qs_review_name
{
flex: 1 1 auto;
min-width: 0;
font-size: 0.82rem;
font-weight: 600;
color: var(--ink);
}
/* the search drawer reuses the panel's search header, which must not be squeezed */
.lab_search_drawer .lab_search_head
{
flex: 0 0 auto;
}
/* ---- Edit Quick Orders ---- */
.qs_edit_note
{
font-size: 0.72rem;
color: var(--muted);
line-height: 1.55;
margin: 6px 0 10px;
}
.qs_edit_section
{
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: 10px;
overflow: hidden;
}
.qs_edit_section_head
{
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
background: var(--page);
border-bottom: 1px solid var(--line);
}
.qs_edit_section_name
{
flex: 1 1 auto;
min-width: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
}
.qs_edit_row
{
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-bottom: 1px solid var(--line);
}
.qs_edit_row:last-of-type
{
border-bottom: 0;
}
.qs_edit_name
{
flex: 1 1 auto;
min-width: 0;
font-size: 0.78rem;
color: var(--ink);
}
.qs_drag
{
flex: none;
color: var(--muted);
}
.qs_pin
{
flex: none;
width: 28px;
height: 28px;
border: 1px solid var(--line);
border-radius: var(--radius_sm);
background: var(--surface);
color: var(--muted);
font-size: 0.72rem;
display: flex;
align-items: center;
justify-content: center;
}
.qs_pin:hover
{
border-color: var(--brand);
color: var(--brand);
background: var(--brand_soft);
}
.qs_edit_add
{
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
padding: 10px;
border: 0;
border-top: 1px dashed var(--line);
background: var(--surface);
color: var(--brand);
font-size: 0.74rem;
font-weight: 700;
font-family: var(--font);
}
.qs_add_section
{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 4px;
padding: 13px;
border: 1.5px dashed #d9c9f3;
border-radius: var(--radius);
background: var(--surface);
color: var(--brand);
font-size: 0.8rem;
font-weight: 700;
font-family: var(--font);
}
/* ---- LOINC catalogue search results (task #4703) ---- */
.lab_catalog_row
{
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius_sm);
background: var(--surface);
text-align: left;
margin-bottom: 4px;
font-family: var(--font);
}
.lab_catalog_row:hover
{
border-color: #d9c9f3;
}
.lab_catalog_row.adopted
{
border-color: var(--brand);
background: var(--brand_soft);
}
.lab_catalog_mark
{
flex: none;
width: 22px;
height: 22px;
border-radius: var(--radius_pill);
border: 1.5px solid #dcd2ee;
background: var(--surface);
color: var(--brand);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
margin-top: 1px;
}
.lab_catalog_row.adopted .lab_catalog_mark
{
border-color: var(--brand);
background: var(--brand);
color: var(--surface);
}
.lab_catalog_copy
{
flex: 1 1 auto;
min-width: 0;
}
.lab_catalog_name
{
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--ink);
}
.lab_catalog_meta
{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 3px;
}
/* the long tail is mostly method-specific variants, so the ones people actually order are marked */
.lab_catalog_common
{
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brand_dark);
background: var(--brand_soft);
border-radius: var(--radius_pill);
padding: 1px 7px;
}
.lab_catalog_panel
{
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #7a5b00;
background: var(--gold_soft);
border-radius: var(--radius_pill);
padding: 1px 7px;
}
.lab_catalog_code
{
font-size: 0.66rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* the formal name, kept visible. It is the last separator for two codes the release gives one
plain-language name and one method -- 11039-5 and 14634-0 are both "C Reactive Protein (CRP),
Blood" and differ only in the property this line names. */
.lab_catalog_qualifier
{
display: block;
font-size: 0.68rem;
color: var(--muted);
line-height: 1.4;
margin-top: 3px;
}
/* ============================================================== *
* SPECIALTY REFERRAL BUILDER — CMR-2026-10-30-494
* one visit produces two communications, an instruction the patient
* acts on and a request faxed to the consultant, so each half of the
* form is banded and labelled with the reader it is written for
* ============================================================== */
.referral_label
{
display: flex;
align-items: center;
gap: 7px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
padding: 16px 2px 7px;
}
.referral_label
{
border-top: 1px solid var(--line);
margin-top: 4px;
}
.referral_label:first-child
{
padding-top: 2px;
border-top: 0;
margin-top: 0;
}
.referral_label i
{
color: var(--brand);
font-size: 0.82rem;
}
.referral_card
{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius_lg);
box-shadow: var(--shadow_xs);
}
/* the audience band. a left edge in the reader's colour, so the two halves read apart at a glance.
--teal is documented as the live-encounter colour; it is reused here as a 4px edge rather than a
status chip, and nothing else in this panel carries encounter state, so the two cannot be confused */
.referral_group
{
padding-left: 4px;
margin-bottom: 4px;
}
.referral_group_patient
{
background: var(--blue);
}
.referral_group_spec
{
background: var(--teal);
}
.referral_group > .referral_card
{
border-radius: 0 var(--radius_lg) var(--radius_lg) 0;
}
.referral_card_head
{
display: flex;
align-items: center;
gap: 9px;
padding: 11px 12px 0;
}
.referral_card_head_copy
{
flex: 1 1 auto;
min-width: 0;
font-size: 0.78rem;
font-weight: 700;
color: var(--ink);
}
/* ---- the specialist ---- */
.referral_target_card
{
padding: 13px;
}
.referral_target_top
{
display: flex;
align-items: flex-start;
gap: 11px;
}
.referral_target_mark
{
flex: none;
width: 40px;
height: 40px;
border-radius: var(--radius);
background: var(--brand_soft);
color: var(--brand);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
}
.referral_target_copy
{
flex: 1 1 auto;
min-width: 0;
}
.referral_target_org
{
font-size: 0.88rem;
font-weight: 700;
line-height: 1.3;
}
.referral_target_name
{
font-size: 0.8rem;
color: var(--ink);
margin-top: 2px;
}
.referral_target_requested
{
font-size: 0.74rem;
color: var(--muted);
margin-top: 2px;
}
.referral_target_chips
{
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 7px;
}
.referral_target_lines
{
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
display: grid;
gap: 7px;
}
.referral_target_line
{
display: flex;
align-items: center;
gap: 9px;
font-size: 0.78rem;
color: var(--ink);
}
.referral_target_line > i
{
flex: none;
width: 15px;
text-align: center;
color: var(--muted);
font-size: 0.8rem;
}
.referral_target_line_text
{
flex: 1 1 auto;
min-width: 0;
line-height: 1.4;
}
.referral_target_line_tag
{
flex: none;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.referral_target_line_missing
{
color: var(--gold_ink);
}
.referral_target_line_missing > i
{
color: var(--gold);
}
/* ---- the two tile rows. tile_ndd carries its own selected state ---- */
.referral_tiles
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 8px 12px 0;
}
.referral_tiles_2
{
grid-template-columns: repeat(2, 1fr);
}
.referral_tiles .tile_ndd
{
padding: 8px 7px;
border-radius: var(--radius);
}
.referral_tiles .tile_ndd .tile_primary
{
font-size: 0.8rem;
line-height: 1.2;
}
.referral_tiles .tile_ndd .tile_secondary
{
font-size: 0.66rem;
line-height: 1.35;
margin-top: 2px;
}
/* both documented exceptions to the standard selection state apply here, because these tile labels are
text that wraps ("Call to schedule", "Today or tomorrow"). tile_ndd.selected sets the label to 700,
which re-wraps the label as it is chosen and moves every row below it; and --brand on --brand_soft is
about 4.1:1, which fails AA at this size. the fill and the border already carry the selection */
.referral_tiles .tile_ndd.selected .tile_primary
{
font-weight: 600;
color: var(--brand_dark);
}
.referral_tiles .tile_ndd.selected .tile_secondary
{
color: var(--brand_dark);
opacity: 1;
}
/* ---- fields ---- */
.referral_field
{
padding: 8px 12px 12px;
}
/* the diagnosis list and the clinical question sit in one card, so the first of the two closes up
against the head that follows it rather than carrying a card's worth of bottom padding */
.referral_field_tight
{
padding-bottom: 2px;
}
.referral_field textarea.input_ndd
{
min-height: 92px;
resize: vertical;
line-height: 1.5;
}
/* ---- the sentence each reader ends up with ---- */
.referral_voice
{
margin: 0 12px 12px;
padding: 10px 12px;
border-radius: var(--radius);
font-size: 0.78rem;
line-height: 1.5;
}
.referral_voice_patient
{
background: var(--blue_soft);
color: var(--blue_deep);
}
.referral_voice_label
{
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
opacity: 0.8;
margin-bottom: 4px;
}
/* ---- diagnosis rows. a dense stack of tappable rows, so radius_sm. each row is a toggle: the tick
box is the state, and the code leads in a fixed column so the labels line up down the list ---- */
.referral_dx_list
{
display: grid;
gap: 4px;
margin-top: 9px;
}
.referral_dx_count
{
font-weight: 600;
color: var(--muted);
}
.referral_dx_row
{
display: flex;
align-items: flex-start;
gap: 9px;
width: 100%;
padding: 9px 10px;
border: 1px solid var(--line);
border-radius: var(--radius_sm);
background: var(--surface);
text-align: left;
cursor: pointer;
}
.referral_dx_row:hover
{
border-color: var(--brand_hover);
}
.referral_dx_row.selected
{
border-color: var(--brand);
background: var(--brand_soft);
}
.referral_dx_tick
{
flex: none;
width: 18px;
height: 18px;
margin-top: 1px;
border: 1.5px solid var(--brand);
border-radius: var(--radius_sm);
background: var(--surface);
color: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.64rem;
}
.referral_dx_row.selected .referral_dx_tick
{
border-color: var(--brand);
background: var(--brand);
color: var(--surface);
}
.referral_dx_code
{
flex: 0 0 auto;
min-width: 52px;
white-space: nowrap;
font-size: 0.72rem;
font-weight: 700;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.referral_dx_row.selected .referral_dx_code
{
color: var(--brand_dark);
}
.referral_dx_text
{
flex: 1 1 auto;
min-width: 0;
font-size: 0.74rem;
line-height: 1.4;
color: var(--ink);
}
/* ---- a document preview: the page at its real size, scaled to fit, pinch to zoom ----
The document is written for a letter page and sizes itself in page units. Reflowed into a phone
panel it is not a preview of anything -- the header table collapses, the patient block wraps and
the columns stack, so what the provider confirms is not what the office receives. The page is
therefore laid out at its true width and the whole thing is scaled, which is what makes it a
picture of the document rather than a narrow re-rendering of its contents.
Pan is the viewport's own scrolling rather than a transform, as the PDF viewer does it: a scroller
handles momentum, bounds and bars without any of that having to be written. */
/* .mchat_messages is itself a scrolling flex column with 15px of padding. The viewport inside is the
real scroller here, so the panel body gives up both: two nested scrollers fight each other, and the
scroll lock can only be pointed at one of them. */
.doc_preview_messages
{
padding: 0;
overflow: hidden;
}
.doc_preview_viewport
{
flex: 1 1 auto;
min-height: 0;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: var(--page);
padding: 10px;
}
/* sized in script to the scaled page, so the scroll area matches what is on screen */
.doc_preview_sizer
{
position: relative;
}
.doc_preview_page
{
/* 8.5in at 96dpi, the width the document's own styles assume */
width: 816px;
min-height: 1056px;
padding: 44px 48px;
background: var(--surface);
box-shadow: var(--shadow_small);
transform-origin: 0 0;
position: absolute;
top: 0;
left: 0;
}
.doc_preview_page img
{
max-width: 100%;
}
.referral_preview_confirm
{
display: flex;
align-items: center;
gap: 11px;
padding: 2px 2px 11px;
}
.referral_preview_confirm_copy
{
flex: 1 1 auto;
min-width: 0;
font-size: 0.78rem;
line-height: 1.45;
color: var(--ink);
}
/* the one way to add another diagnosis. a dashed outline rather than a filled control, so it reads as
the empty slot at the end of the list and not as a third button competing with the footer */
.referral_dx_add
{
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
margin-top: 6px;
padding: 11px 10px;
border: 1px dashed var(--brand);
border-radius: var(--radius_sm);
background: transparent;
color: var(--brand_dark);
font-size: 0.74rem;
font-weight: 700;
cursor: pointer;
}
.referral_dx_add:hover
{
background: var(--brand_soft);
}
.referral_dx_add i
{
font-size: 0.8rem;
}
/* ---- drafting the clinical question ---- */
/* a compact pill in the card head, not a full-width control: the question is the clinician's to write and
this only offers them a first draft of it, so it must not read as the primary way to fill the field */
.referral_question_ai
{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
flex: 0 0 auto;
/* min-height, not padding alone: padding plus a 1 line-height came to about 21px, and the design
system's smallest button is 32px. A control this size on a phone is one a thumb misses */
min-height: 32px;
padding: 5px 12px;
border: 1px solid var(--brand);
border-radius: var(--radius_pill);
background: transparent;
color: var(--brand_dark);
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
.referral_question_ai:hover
{
background: var(--brand_soft);
}
.referral_question_ai:disabled
{
opacity: 0.55;
cursor: default;
}
.referral_question_ai i
{
font-size: 0.75rem;
}
/* what the draft was read from, and the one press that puts back whatever was in the field before it */
/* THE CLASS MUST WIN. .hide_me is a bare class at display: none with no !important, and this rule is
both equally specific and later in the file, so a plain `display: flex` here would beat it: the row
would render with an empty copy span and a live Undo before any draft existed, and the add and remove
of the class in script would be silent no-ops. Same shape as the trap recorded against the dialer's
End button. The scoped override below is how this stylesheet already handles it elsewhere */
.referral_question_ai_status.hide_me
{
display: none;
}
.referral_question_ai_status
{
display: flex;
align-items: center;
gap: 8px;
margin-top: 7px;
padding: 8px 10px;
border-radius: var(--radius_sm);
background: var(--brand_soft);
/* --brand_dark, not --muted: grey on the brand_soft wash is about 4.1:1 and fails the small-text minimum */
color: var(--brand_dark);
font-size: 0.72rem;
line-height: 1.45;
}
.referral_question_ai_status_copy
{
flex: 1 1 auto;
min-width: 0;
}
/* the recovery control, so it is the one that must not be hard to hit. The negative margin keeps it
sitting on the sentence's baseline while the padding gives it a real target */
.referral_question_ai_undo
{
flex: 0 0 auto;
min-height: 32px;
margin: -8px -4px;
padding: 8px 6px;
border: 0;
background: transparent;
color: var(--brand_dark);
font-size: 0.72rem;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}
/* the search drawer the row opens */
.referral_dx_search
{
padding: 4px 2px;
}
.referral_dx_search_hint
{
font-size: 0.72rem;
color: var(--muted);
line-height: 1.5;
margin-top: 9px;
}
.referral_dx_source
{
flex: none;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
margin-top: 3px;
}
.referral_dx_row.selected .referral_dx_source
{
color: var(--brand_dark);
}
/* CLINICAL ALERTS — the visit header's alert button and the drawer it opens. Tokens come from :root in
design_system.css, which is loaded globally; this is NOT inside the workbench scope block, deliberately,
because that block redefines --ink and --page to the workbench's own values and the drawer should read as
the rest of the site. Every red label here takes --danger_ink: --danger itself is 3.4:1 on --danger_soft
and 3.8:1 on white, and an allergy severity is the last thing on this screen that should be hard to read. */
.visit_clinical_alert_button.has_alerts {
background: #dc2626;
color: var(--surface);
}
.visit_clinical_alert_button.has_alerts:hover,
.visit_clinical_alert_button.has_alerts:focus,
.visit_clinical_alert_button.has_alerts:active {
background: var(--danger_ink);
color: var(--surface);
}
/* the white border its neighbours have is kept on purpose. A red fill is only 1.3:1 against the purple
header, so without the outline the button's own shape disappears into the bar it sits in. */
.clinical_alerts_drawer .mchat_messages {
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
font-family: var(--font);
}
.clinical_alert_section {
background: var(--surface);
border-radius: var(--radius_lg);
border: 1px solid var(--line);
padding: 12px;
margin-bottom: 10px;
}
.clinical_alert_section_title {
font-size: 0.8rem;
font-weight: 600;
color: var(--ink);
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
}
.clinical_alert_section_title.danger {
color: var(--danger_ink);
}
.clinical_alert_count {
margin-left: auto;
font-weight: 400;
font-size: 0.75rem;
color: var(--muted);
}
.clinical_alert_empty {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.5;
}
.clinical_alert_row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px;
border-radius: var(--radius_sm);
background: var(--page);
border-left: 3px solid var(--line);
margin-bottom: 8px;
}
.clinical_alert_row:last-child {
margin-bottom: 0;
}
.clinical_alert_row.severe,
.clinical_alert_row.critical {
background: var(--danger_soft);
border-left-color: var(--danger);
}
.clinical_alert_row.moderate,
.clinical_alert_row.high {
background: var(--gold_soft);
border-left-color: var(--gold);
}
.clinical_alert_row.mild {
background: var(--blue_soft);
border-left-color: var(--blue);
}
.clinical_alert_row_icon {
font-size: 0.95rem;
line-height: 1.3;
color: var(--muted);
}
.clinical_alert_row.severe .clinical_alert_row_icon,
.clinical_alert_row.critical .clinical_alert_row_icon { color: var(--danger_ink); }
.clinical_alert_row.moderate .clinical_alert_row_icon,
.clinical_alert_row.high .clinical_alert_row_icon { color: var(--gold_ink); }
.clinical_alert_row.mild .clinical_alert_row_icon { color: var(--blue_ink); }
.clinical_alert_row_text {
flex: 1;
min-width: 0;
}
.clinical_alert_name {
font-size: 0.9rem;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
}
.clinical_alert_reaction {
font-size: 0.8rem;
color: var(--muted);
margin-top: 3px;
line-height: 1.4;
}
.clinical_alert_severity {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 3px 8px;
border-radius: var(--radius_pill);
white-space: nowrap;
background: var(--surface);
border: 1px solid var(--line);
color: var(--ink);
}
.clinical_alert_severity.severe,
.clinical_alert_severity.critical { background: var(--danger_soft); border-color: var(--danger_soft); color: var(--danger_ink); }
.clinical_alert_severity.moderate,
.clinical_alert_severity.high { background: var(--gold_soft); border-color: var(--gold_soft); color: var(--gold_ink); }
.clinical_alert_severity.mild { background: var(--blue_soft); border-color: var(--blue_soft); color: var(--blue_ink); }
/* "Severity not recorded" is a sentence, not a grade — it must not be mistaken for one of the three answers */
.clinical_alert_severity.unrecorded {
text-transform: none;
letter-spacing: 0;
font-weight: 400;
color: var(--muted);
}
/* THE REVIEW STEP'S GOALS LIST (CMR-2026-10-31-500). It had no rules at all and rendered on browser
defaults; overflow-wrap is here for the same reason as on the clinician's card. */
.cv2_review_goals { margin: 0; padding-left: 20px; }
.cv2_review_goals .cv2_review_goal { overflow-wrap: anywhere; margin-bottom: 4px; }
.cv2_review_goals .cv2_review_goal:last-child { margin-bottom: 0; }
/* THE PATIENT'S OWN GOALS FOR THE VISIT — the check-in step (CMR-2026-10-31-500) */
.check_v2_goals_intro { margin-bottom: 14px; }
.check_v2_goals_title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.check_v2_goals_help { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
/* said in its own line rather than as a parenthesis on the title: a patient who does not want to do this
should be able to see that they do not have to without reading the explanation first */
.check_v2_goals_optional { font-size: 0.82rem; color: var(--muted); font-style: italic; margin-top: 8px; }
.check_v2_goal_rows { display: grid; gap: 8px; margin-bottom: 12px; }
/* the number and the remove control are fixed, the input takes the rest. align-items centre rather than
stretch so the number sits on the input's own line at any font size. */
.check_v2_goal_row { display: flex; align-items: center; gap: 8px; }
/* 22px, not 18: "10." is the widest value MAX_GOALS can produce and it overflowed into the gap */
.check_v2_goal_number { flex: 0 0 22px; text-align: right; font-size: 0.9rem; color: var(--muted); }
.check_v2_goal_input { flex: 1 1 auto; min-width: 0; }
.check_v2_goal_remove { flex: 0 0 auto; }
/* PHYSICIAN-APPROVED REGIMEN LIBRARY — admin?a=regimens (CMR-2026-10-31-514).
Tokens only. The three chip states are the load-bearing part: a reader scanning the list has to be able
to see which rows are live without reading a word, because "approved" and "no badge" are otherwise
indistinguishable. */
.regimen_library_container { max-width: 900px; }
.regimen_library_header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.regimen_library_title { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.regimen_library_sub { font-size: 0.875rem; color: var(--muted); max-width: 560px; margin-top: 2px; }
.regimen_library_empty { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); padding: 24px; color: var(--muted); font-size: 0.875rem; }
.regimen_indication_card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); box-shadow: var(--shadow_xs); padding: 18px; margin-bottom: 16px; }
.regimen_indication_top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.regimen_indication_name { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.regimen_indication_actions { display: flex; gap: 6px; flex-wrap: wrap; }
.regimen_scope_block { background: var(--page); border-radius: var(--radius); padding: 10px 12px; margin: 12px 0; }
.regimen_scope_label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand_dark); }
.regimen_scope_label_not { color: var(--danger_ink); margin-top: 8px; }
.regimen_scope_text { font-size: 0.875rem; color: var(--ink); }
.regimen_rows { margin-top: 12px; }
.regimen_row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.regimen_row_approved { border-left: 3px solid var(--green); }
.regimen_row_draft { border-left: 3px solid var(--line); background: var(--page); }
.regimen_row_main { flex: 1 1 auto; min-width: 0; }
.regimen_row_actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.regimen_row_empty { font-size: 0.875rem; color: var(--muted); padding-bottom: 8px; }
.regimen_drug_name { font-weight: 700; color: var(--ink); font-size: 0.9375rem; }
.regimen_sig { font-size: 0.9375rem; color: var(--ink); margin-top: 4px; }
.regimen_meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--muted); margin-top: 4px; }
.regimen_note { font-size: 0.8125rem; color: var(--brand_dark); margin-top: 6px; }
.regimen_evidence { font-size: 0.78rem; color: var(--muted); margin-top: 8px; }
.regimen_evidence_source { font-weight: 700; color: var(--ink); }
.regimen_chip { display: inline-block; border-radius: var(--radius_pill); padding: 2px 10px; font-size: 0.7rem; font-weight: 700; vertical-align: middle; margin-left: 6px; }
.regimen_chip_live { background: var(--green_soft); color: var(--green_ink); }
.regimen_chip_stale { background: var(--surface); color: var(--gold_ink); border: 1px solid var(--gold); }
.regimen_chip_draft { background: var(--page); color: var(--muted); border: 1px solid var(--line); }
.regimen_approval_line { font-size: 0.78rem; color: var(--muted); margin-top: 8px; }
.regimen_approval_line_none { color: var(--gold_ink); }
.regimen_attestation { font-size: 0.78rem; color: var(--muted); font-style: italic; }
.regimen_editor { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius_lg); padding: 16px; margin: 12px 0; }
.regimen_editor_heading { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.regimen_editor_subheading { font-size: 0.875rem; margin-top: 6px; }
.regimen_editor_footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.regimen_editor .input_label { margin-top: 12px; }
.regimen_field_row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.regimen_evidence_block { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 10px; }
/* what the prescribe panel composed, shown read-only above the fields this form does own */
.regimen_composed_summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 4px; }
.regimen_field_row_two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.regimen_label_dose { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-top: 8px; font-size: 0.8125rem; color: var(--ink); max-height: 220px; overflow-y: auto; white-space: pre-wrap; }
.regimen_approval_form { background: var(--brand_soft); border: 1px solid var(--brand); border-radius: var(--radius_lg); padding: 16px; margin: 10px 0; }
.regimen_approval_content { background: var(--surface); border-radius: var(--radius); padding: 12px; }
.regimen_approval_field { font-size: 0.875rem; color: var(--ink); padding: 5px 0; border-bottom: 1px solid var(--line); }
.regimen_approval_field:last-child { border-bottom: none; }
.regimen_approval_field span { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px)
{
.regimen_field_row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.regimen_row { flex-direction: column; }
.regimen_row_actions { width: 100%; }
.regimen_indication_actions .btn_ndd, .regimen_row_actions .btn_ndd { min-height: 40px; }
}
/* ADMINISTRATOR PRICE ADJUSTMENT PANEL — CMR-2026-11-01-517.
Mirrors the close-encounter discount panel's language, with the funder choice as a first-class control
because who pays is the decision this surface exists to make. */
.admin_adjust_body
{
padding: 12px;
background: var(--page);
}
.admin_adjust_section
{
margin-top: 12px;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: var(--surface);
box-shadow: var(--shadow_xs);
}
.admin_adjust_section:first-child
{
margin-top: 0;
}
.admin_adjust_section_label
{
display: block;
margin-bottom: 8px;
color: var(--ink);
font-size: 0.78rem;
font-weight: 700;
}
.admin_adjust_button_group
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.admin_adjust_option_button
{
min-height: 40px;
padding: 8px 10px;
border: 2px solid var(--line);
border-radius: 4px;
color: var(--ink);
background: var(--surface);
font-family: var(--font);
font-size: 0.78rem;
font-weight: 650;
}
.admin_adjust_option_button small
{
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 0.64rem;
font-weight: 500;
}
.admin_adjust_option_button.selected
{
border-color: var(--brand);
color: var(--brand);
background: var(--brand_soft);
font-weight: 700;
}
.admin_adjust_option_button.selected small
{
color: var(--brand);
}
.admin_adjust_option_button:disabled
{
opacity: 0.45;
}
.admin_adjust_hint
{
margin-top: 7px;
color: var(--muted);
font-size: 0.7rem;
}
.admin_adjust_blocked_note
{
color: var(--danger);
}
/* an advisory is not a refusal: the choice it describes is still available, so it reads as a caution rather
than an error. Kept distinct from .admin_adjust_blocked_note for exactly that reason. */
.admin_adjust_advisory_note
{
color: var(--ink);
background: var(--brand_soft);
border-left: 3px solid var(--brand);
border-radius: var(--radius);
padding: 8px 10px;
margin-top: 8px;
}
/* what the figures panel shows INSTEAD of the table when there is nothing to show. It replaced a rendering
that printed the baseline table with a zero reduction, which read as broken arithmetic. */
.admin_adjust_preview_refusal
{
color: var(--ink);
background: var(--page);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 12px;
font-size: 0.9rem;
line-height: 1.45;
}
.admin_adjust_value_field
{
margin-top: 12px;
}
.admin_adjust_value_label
{
display: block;
margin-bottom: 5px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 600;
}
.admin_adjust_value_control
{
display: flex;
align-items: center;
gap: 7px;
}
.admin_adjust_value_symbol
{
color: var(--muted);
font-size: 0.9rem;
font-weight: 700;
}
.admin_adjust_value_input_wrap
{
flex: 1 1 auto;
}
.admin_adjust_value_input
{
width: 100%;
min-height: 42px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink);
background: var(--surface);
font-family: var(--font);
font-size: 0.95rem;
font-weight: 700;
}
.admin_adjust_value_step
{
flex: 0 0 auto;
width: 40px;
min-height: 42px;
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink);
background: var(--surface);
}
.admin_adjust_financial_cards
{
display: grid;
gap: 10px;
}
.admin_adjust_financial_card
{
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--page);
}
.admin_adjust_financial_card_title
{
margin-bottom: 5px;
color: var(--ink);
font-size: 0.78rem;
font-weight: 750;
}
.admin_adjust_patient_card
{
border-top: 3px solid var(--green);
}
.admin_adjust_funding_card
{
border-top: 3px solid var(--brand);
}
.admin_adjust_financial_table
{
display: grid;
}
.admin_adjust_financial_row
{
display: flex;
gap: 12px;
justify-content: space-between;
padding: 7px 0;
color: var(--muted);
font-size: 0.74rem;
}
.admin_adjust_financial_row strong
{
flex: 0 0 auto;
color: var(--ink);
font-weight: 650;
}
.admin_adjust_financial_discount strong
{
color: var(--brand);
}
.admin_adjust_financial_subtotal,
.admin_adjust_financial_total
{
margin-top: 3px;
border-top: 1px solid var(--line);
color: var(--ink);
font-weight: 700;
}
.admin_adjust_financial_total strong
{
color: var(--brand);
font-size: 0.86rem;
font-weight: 800;
}
.admin_adjust_financial_warn
{
color: var(--danger);
font-weight: 700;
}
.admin_adjust_financial_warn strong
{
color: var(--danger);
}
.admin_adjust_funder_tag
{
display: inline-block;
margin-left: 5px;
padding: 1px 6px;
border-radius: 10px;
color: var(--muted);
background: var(--line);
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
}
.admin_adjust_funder_paying
{
color: var(--surface);
background: var(--brand);
}
.admin_adjust_other_reason
{
margin-top: 8px;
}
.admin_adjust_footer
{
display: grid;
gap: 7px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
background: white;
}
/* THE INVITATION LETTER DRAWER. A letter, not a form: the sheet is paper on the panel's grey, the clinician
signs the bottom of it, and the only control is the one in the footer. The footer is .mchat_input, which is
where every side panel in this codebase puts its action, and it keeps that component's safe-area padding. */
.invite_letter_panel .mchat_header
{
background: var(--brand);
padding-top: env(safe-area-inset-top);
}
.invite_letter_subhead
{
margin-top: 1px;
color: rgba(255, 255, 255, 0.82);
font-size: 0.76rem;
font-weight: 600;
}
.invite_letter_messages
{
padding: 16px;
background: #f8f8f8;
}
.invite_letter_sheet
{
padding: 20px 18px 22px;
border: 1px solid var(--line);
border-radius: var(--radius_lg);
background: white;
box-shadow: var(--shadow_xs);
}
.invite_letter_from
{
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.invite_letter_avatar
{
width: 52px;
height: 52px;
flex: 0 0 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius_pill);
background: var(--brand_soft);
color: var(--brand);
font-size: 0.95rem;
font-weight: 700;
object-fit: cover;
}
.invite_letter_from_identity
{
min-width: 0;
}
.invite_letter_from_name
{
color: var(--ink);
font-size: 1rem;
font-weight: 800;
line-height: 1.25;
}
.invite_letter_from_specialty
{
margin-top: 2px;
color: var(--muted);
font-size: 0.8rem;
}
.invite_letter_date
{
margin-top: 16px;
color: var(--muted);
font-size: 0.78rem;
}
.invite_letter_salutation
{
margin-top: 14px;
color: var(--ink);
font-size: 0.95rem;
font-weight: 700;
}
.invite_letter_body
{
margin-top: 10px;
color: var(--ink);
font-size: 0.95rem;
line-height: 1.55;
}
.invite_letter_body p
{
margin: 0 0 12px;
}
.invite_letter_body p:last-child
{
margin-bottom: 0;
}
.invite_letter_signoff
{
margin-top: 20px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
/* the clinician's name set apart from the body, so the letter closes rather than simply stopping */
.invite_letter_signoff_hand
{
color: var(--brand_dark);
font-size: 1.05rem;
font-weight: 800;
}
.invite_letter_signoff_role
{
margin-top: 2px;
color: var(--muted);
font-size: 0.78rem;
}
.invite_letter_expiry
{
margin-top: 16px;
padding: 10px 12px;
border-radius: var(--radius);
background: var(--brand_soft);
color: var(--brand_dark);
font-size: 0.78rem;
}
.invite_letter_footer
{
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
background: white;
}
/* DISCRETE LABORATORY VALUES PANEL (CMR-2026-11-02-528). Physician-facing.
A three-column row — label, value, reference — because that is the shape of every printed report and a
clinician reads down the value column. The grid is explicit rather than a table so a long analyte name wraps
inside its own column instead of widening the value column off the screen on a phone. */
.lab_values_banner { margin: 0 0 12px 0; }
.lab_values_facts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; }
.lab_values_fact { display: flex; justify-content: space-between; gap: 12px; font-size: 0.82em; padding: 3px 0; }
.lab_values_fact_label { color: var(--muted); }
.lab_values_fact_value { color: var(--ink); text-align: right; font-weight: 600; }
/* THE PANEL BODY MUST BE BLOCK FLOW, NOT A FLEX COLUMN.
.mchat_messages is display:flex/column, and a flex item's automatic minimum size resolves to its CONTENT
size only while its overflow is visible. .lab_values_group sets overflow:hidden to clip its corners to the
radius, so its min-height resolves to ZERO instead: the groups are squeezed into whatever height is left and
CLIP their own rows. Forty-eight values rendered as three, with nothing overflowing and therefore nothing to
scroll -- which reads as a scroll fault and is not one. Reported from a phone, 2026-11-02.
.compliance_side_panel carries the same rule set for the same reason; they should be one named thing. */
.lab_values_panel .mchat_messages
{
display: block;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.lab_values_group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.lab_values_group_head { font-size: 0.68rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 12px 8px; }
/* two columns -- the name with its reference range under it, the value with its unit under it. minmax(0, 1fr)
on the name, not 1fr: a long unbroken analyte name in a plain 1fr column refuses to shrink below its content
and pushes the value column out of the panel. align-items:start, not baseline: each cell is two stacked
lines, so a baseline alignment would line the name up with the value only when both wrap identically. */
.lab_values_row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 12px; border-top: 1px solid var(--line); }
.lab_values_label { min-width: 0; font-size: 0.88em; color: var(--ink); word-break: break-word; }
.lab_values_value { font-size: 0.92em; font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; }
.lab_values_reference { display: block; font-size: 0.74em; font-weight: 400; color: var(--muted); word-break: break-word; margin-top: 2px; }
.lab_values_unit { display: block; font-size: 0.78em; font-weight: 400; color: var(--muted); margin-top: 2px; }
.lab_values_flag { display: inline-block; margin-left: 6px; font-size: 0.72em; font-weight: 700; color: var(--danger); }
.lab_values_meta { display: block; font-size: 0.72em; color: var(--muted); margin-top: 2px; }
.lab_values_unnamed { margin-left: 6px; font-size: 0.68em; vertical-align: middle; }
/* the group heading is uppercased, so the badge resets it: the heading is a test name and the badge is a word. */
.lab_values_suggested { margin-left: 8px; font-size: 0.68rem; font-weight: 600; text-transform: none; letter-spacing: 0; vertical-align: middle; }
.lab_values_label .lab_values_suggested { margin-left: 6px; font-size: 0.68em; }
/* THE FILTER. Outside .mchat_messages, so it stays put while the list scrolls under it. */
/* THE ORDER VIEWER'S FOOTER. .mchat_input declares display:flex at a point in this file well below .hide_me,
so at equal specificity the class loses and the footer would never hide -- the same trap the calendar control
and the laboratory value rows already carry an override for. */
.document_viewer_footer.hide_me { display: none; }
.order_results_footer_button { justify-content: center; }
.order_results_footer_note { font-weight: 400; opacity: 0.85; }
.lab_values_search_bar { flex: 0 0 auto; position: relative; display: flex; align-items: center; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.lab_values_search_icon { position: absolute; left: 24px; color: var(--muted); font-size: 0.85em; pointer-events: none; }
.lab_values_search_input { padding-left: 32px; padding-right: 34px; font-size: 0.9em; border-radius: var(--radius); }
.lab_values_search_clear { position: absolute; right: 20px; border: 0; background: none; padding: 0; color: var(--muted); font-size: 0.95em; line-height: 1; }
.lab_values_no_match { font-size: 0.85em; color: var(--muted); padding: 18px 2px; text-align: center; }
/* the rest of a report, under the panel a chart row opened on (CMR-2026-11-03-534) */
.lab_values_also_divider { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 18px 2px 4px; padding-top: 12px; border-top: 1px solid var(--line); }
/* .hide_me sits at the top of this file, so every rule below that declares a display of its own would
otherwise override it and the filter would hide nothing. */
/* .lab_values_banner is an .alert_ndd, which is display:flex in the design system — a second class is needed
to outrank it on specificity, whichever stylesheet happens to load last. */
.lab_values_row.hide_me, .lab_values_search_bar.hide_me, .lab_values_search_clear.hide_me,
.lab_values_banner.hide_me, .lab_values_group.hide_me, .lab_values_facts.hide_me,
.lab_values_unmapped_note.hide_me, .lab_values_no_match.hide_me,
.lab_values_also_divider.hide_me { display: none; }
/* the laboratory's own flag, never derived here by comparing the value with its range */
.lab_values_row.lab_values_abnormal .lab_values_value { color: var(--danger); }
.lab_values_row.lab_values_critical { background: var(--danger_soft); }
.lab_values_row.lab_values_critical .lab_values_value { color: var(--danger); }
/* A VALUE THAT REPEATS AN EARLIER REPORT OF THE SAME COLLECTION. Quiet rather than hidden: the document states
it, so the screen that describes the document shows it, and the chart's own list is where it is left out. Only
the value is quietened, never the name — a reader scanning for the name of a test must still find it.
--muted, NOT opacity. Opacity is this system's DISABLED device (an unavailable tile sits at 0.38), so a
repeated result rendered that way reads as unavailable when it is a perfectly valid result; and it dims the
whole element, including the laboratory's own flag span nested inside the value.
AND NEVER ON A FLAGGED ROW. A critical value that repeats an earlier report is still a critical value. The
abnormal and critical rules sit ABOVE this one at equal specificity, so without the :not() this rule would
win and quieten the one number on the screen that must not be quietened. */
.lab_values_row.lab_values_restated:not(.lab_values_critical):not(.lab_values_abnormal) .lab_values_value { color: var(--muted); font-weight: 400; }
.lab_values_row.lab_values_restated:not(.lab_values_critical):not(.lab_values_abnormal) .lab_values_unit { color: var(--muted); }
.lab_values_restated_badge { margin-left: 8px; font-size: 0.68rem; font-weight: 600; text-transform: none; letter-spacing: 0; vertical-align: middle; }
/* AND ONE THAT DISAGREES WITH IT, which is a corrected result and the opposite of quiet. It takes the danger
treatment the laboratory's own critical flag takes, because the two are read the same way: stop here.
--danger_ink on --danger_soft, which is the pair the design system names for text on that background;
--danger over it is about 3.4:1 and does not carry body text. rem rather than em on the badge, because it
renders inside a 0.68rem group heading and an em there compounds to around 7px. */
.lab_values_row.lab_values_differs { background: var(--danger_soft); }
.lab_values_row.lab_values_differs .lab_values_value { color: var(--danger_ink); font-weight: 700; }
.lab_values_differs_badge { margin-left: 8px; font-size: 0.68rem; font-weight: 700; color: var(--danger_ink); text-transform: none; letter-spacing: 0; vertical-align: middle; }
.lab_values_empty, .lab_values_unmapped_note, .lab_values_exhausted { font-size: 0.8em; color: var(--muted); padding: 10px 2px; }
/* A message that arrived long after the visit it is attached to — see messages::display_chat_messages().
Deliberately quieter than .checkin_system_divider, which marks events inside the encounter itself. */
.visit_episode_divider
{
display: flex;
align-items: center;
gap: 10px;
margin: 18px 0 10px;
}
.visit_episode_divider::before,
.visit_episode_divider::after
{
content: '';
flex: 1;
height: 1px;
background: #d8d8d8;
}
.visit_episode_divider span
{
color: #8a8a8a;
font-size: 0.72em;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* A patient message inside the shared swipe row, with two departures from how the voicemail and prescription
lists use it. Both are required and neither is cosmetic.
(1) The component paints an opaque surface because it was written for full-width list rows. The message
thread's background is set in several places (#f5f5f5, --page, #f8f8f8 depending on the panel), so a fixed
colour is wrong somewhere; transparent is right everywhere.
(2) The component hides its actions with overflow: hidden on the wrapper. Here that would ALSO clip
.mchat_action_menu, the reaction row, which is absolutely positioned at bottom: 100% against
.mchat_message_wrapper — a positioned ancestor inside the clip, so the menu would be clipped away entirely
and reactions would silently stop appearing on patient messages. The actions are hidden by opacity instead,
and the clip is applied only while the row is open, where it is still wanted to stop the translated bubble
overhanging the thread's left edge. The reaction menu cannot be open at the same time: the component
suppresses the click that opens it while a row is open. */
.message_swipe_wrap
{
background: transparent;
overflow: visible;
}
.message_swipe_wrap .voicemail_swipe_surface
{
background: transparent;
}
.message_swipe_wrap .voicemail_swipe_actions
{
padding: 2px 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
.message_swipe_wrap.voicemail_swipe_open
{
overflow: hidden;
}
.message_swipe_wrap.voicemail_swipe_open .voicemail_swipe_actions
{
opacity: 1;
pointer-events: auto;
}
.message_swipe_new_visit
{
background: var(--brand);
border-radius: 6px;
gap: 5px;
}
/* SAVED LOCATION CARDS — the practice's own locations, shown both on the staff Locations page and inside a
trade name's Add-location panel (practice_locations::display_cards). The card's look is set inline, as it
always has been; what lives here is the part that depends on whether the card has an action at all. */
.dba_location_picker_container
{
display: grid;
gap: 10px;
margin-top: 10px;
}
.practice_location_card
{
cursor: pointer;
}
.practice_location_card_added
{
cursor: default;
}
/* ---------------------------------------------------------------------------
VIDEO BACKGROUND — blur or a replacement backdrop on a video visit.
CMR-2026-11-03-544.
--------------------------------------------------------------------------- */
/* Both entry buttons ship with hide_me and are revealed only once the SDK's own capability check has passed,
so the control is never present and inert on a device that cannot run segmentation. A body class does the
revealing rather than JS stripping hide_me, because the prejoin panel's button arrives by AJAX after the
check has already resolved. Specificity beats .hide_me here, so no !important is needed. */
body.video_background_available .video_background_entry
{
display: inline-block;
}
body.video_background_available .connection_preview_control_group.video_background_entry,
body.video_background_available .video_background_entry_stack
{
display: flex;
}
.video_background_subtitle
{
font-size: 0.72rem;
opacity: 0.85;
font-weight: 400;
}
/* 16:9 so the preview is the shape the patient actually sees, not the shape the panel happens to be */
.video_background_preview_wrap
{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #111;
border-radius: var(--radius);
overflow: hidden;
margin-bottom: 14px;
}
.video_background_preview_el
{
width: 100%;
height: 100%;
object-fit: cover;
/* mirrored, matching the self-view everywhere else in the product — a clinician checking their own
backdrop expects the same handedness they see in the call */
transform: scaleX(-1);
display: block;
}
.video_background_preview_placeholder
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: #888;
font-size: 0.78rem;
}
.video_background_preview_wrap.video_background_preview_empty .video_background_preview_placeholder
{
display: flex;
}
.video_background_section_label
{
font-size: 0.78rem;
font-weight: 600;
color: var(--brand);
margin: 12px 0 7px;
}
/* scoped to this panel, not applied to .tile_ndd globally: the booking tiles want their own air, and a
global padding change here would reach every selection surface in the product */
.video_background_tiles .tile_ndd
{
padding: 9px 11px;
border-radius: var(--radius);
text-align: left;
cursor: pointer;
height: 100%;
}
.video_background_tiles .tile_primary { font-size: 0.84rem; }
.video_background_tiles .tile_secondary { font-size: 0.7rem; }
.video_background_footnote
{
margin-top: 16px;
font-size: 0.72rem;
color: var(--text_muted, #6b7280);
line-height: 1.45;
}
/* ===========================================================================
THE CALLING SCREEN (staff dialer, while a call is up)
A provider on a call is holding a phone, so the panel becomes a phone's
calling screen: setup gone, callee large, round controls on the bottom bar.
This block sits at the end of the stylesheet deliberately -- it has to win
over BOTH the light drawer rules and the dark workbench ones above, and
ordering does that without a specificity war.
=========================================================================== */
.staff_call_stage { display: none; }
.staff_call_panel.call_in_progress .staff_call_stage,
.visit_fs_call_host.call_in_progress .staff_call_stage
{
display: flex;
flex-direction: column;
gap: 6px;
padding: 34px 20px 10px;
text-align: left;
}
/* Everything the call can no longer be configured by. The JS hides some of these too, on the success
path -- but the state is call_in_progress, so the stylesheet is what should decide, and a refused
call never reaches that JS line. */
.staff_call_panel.call_in_progress .staff_call_number_choices,
.staff_call_panel.call_in_progress .staff_call_other_number_form,
.staff_call_panel.call_in_progress .staff_call_transcribe,
.visit_fs_call_host.call_in_progress .staff_call_number_choices,
.visit_fs_call_host.call_in_progress .staff_call_other_number_form,
.visit_fs_call_host.call_in_progress .staff_call_transcribe,
.staff_call_panel.call_in_progress .staff_call_intro,
.staff_call_panel.call_in_progress .staff_call_from_row,
.staff_call_panel.call_in_progress .staff_call_privacy_note,
.staff_call_panel.call_in_progress .staff_call_dialpad,
.visit_fs_call_host.call_in_progress .staff_call_intro,
.visit_fs_call_host.call_in_progress .staff_call_from_row,
.visit_fs_call_host.call_in_progress .staff_call_privacy_note,
.visit_fs_call_host.call_in_progress .staff_call_dialpad { display: none; }
.staff_call_panel.call_in_progress .staff_call_content,
.visit_fs_call_host.call_in_progress .staff_call_content
{
background: linear-gradient(180deg, #3b2c56 0%, #26203a 42%, #14202b 100%);
display: flex;
flex-direction: column;
padding-top: 0;
}
/* the header blends into the top of the gradient rather than sitting on it as a purple bar */
.staff_call_panel.call_in_progress .staff_call_header,
.visit_fs_call_host.call_in_progress .staff_call_header
{
background: #3b2c56;
border-bottom: 0;
box-shadow: none;
}
.staff_call_stage_status
{
color: rgba(255, 255, 255, 0.62);
font-size: 1rem;
font-weight: 500;
}
.staff_call_stage_callee
{
color: #ffffff;
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.staff_call_stage_sub
{
color: rgba(255, 255, 255, 0.58);
font-size: 1rem;
font-weight: 500;
}
.staff_call_stage_sub:empty,
.staff_call_stage_timer:empty { display: none; }
.staff_call_stage_timer
{
color: rgba(255, 255, 255, 0.78);
font-size: 1.05rem;
font-variant-numeric: tabular-nums;
font-weight: 600;
margin-top: 4px;
}
/* --- the bottom bar while the call is up --- */
.staff_call_stage_controls { display: none; }
.staff_call_panel.call_in_progress .staff_call_stage_controls,
.visit_fs_call_host.call_in_progress .staff_call_stage_controls
{
display: flex;
gap: 46px;
justify-content: center;
width: 100%;
}
.staff_call_panel.call_in_progress .staff_call_actions,
.visit_fs_call_host.call_in_progress .staff_call_actions
{
background: #14202b;
display: flex;
justify-content: center;
padding-bottom: calc(26px + env(safe-area-inset-bottom));
padding-top: 18px;
}
.staff_call_panel.call_in_progress .start_phone_call_button,
.staff_call_panel.call_in_progress .staff_call_dialpad_back,
.visit_fs_call_host.call_in_progress .start_phone_call_button,
.visit_fs_call_host.call_in_progress .staff_call_dialpad_back { display: none; }
.staff_call_round_button
{
align-items: center;
background: none;
border: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
}
.staff_call_round_icon
{
align-items: center;
background: rgba(255, 255, 255, 0.17);
border-radius: 50%;
color: #ffffff;
display: flex;
font-size: 1.5rem;
height: 70px;
justify-content: center;
transition: background 0.15s ease;
width: 70px;
}
.staff_call_round_label
{
color: rgba(255, 255, 255, 0.85);
font-size: 0.82rem;
font-weight: 500;
}
.staff_call_round_button:disabled { opacity: 0.35; }
.staff_call_round_button:not(:disabled):active .staff_call_round_icon { background: rgba(255, 255, 255, 0.3); }
/* muted reads as the state it is IN, not the action, which is why the label flips to Unmute beside it */
.staff_call_mute_button.muted .staff_call_round_icon
{
background: #ffffff;
color: #14202b;
}
/* speaker reads as the state it is IN, the same way muted does -- filled while the audio is on the
speaker, hollow while it is on the earpiece */
.staff_call_speaker_button.speaker_on .staff_call_round_icon
{
background: #ffffff;
color: #14202b;
}
.staff_call_round_end .staff_call_round_icon { background: #ff3b30; }
.staff_call_round_end:active .staff_call_round_icon { background: #d9342b; }
/* --- the prompts that appear DURING a call, on the dark ground --- */
.staff_call_panel.call_in_progress .staff_call_transcribing_indicator,
.staff_call_panel.call_in_progress .staff_call_notice_confirm,
.visit_fs_call_host.call_in_progress .staff_call_transcribing_indicator,
.visit_fs_call_host.call_in_progress .staff_call_notice_confirm
{
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
color: rgba(255, 255, 255, 0.88);
margin: 0 20px 12px;
padding: 11px 14px;
/* the light rules set width: 100%, which with a side margin overflows the panel and clips the border */
width: auto;
}
.staff_call_panel.call_in_progress .staff_call_notice_confirm_title,
.visit_fs_call_host.call_in_progress .staff_call_notice_confirm_title { color: #ffffff; }
.staff_call_panel.call_in_progress .staff_call_notice_confirm_sub,
.visit_fs_call_host.call_in_progress .staff_call_notice_confirm_sub { color: rgba(255, 255, 255, 0.7); }
.staff_call_panel.call_in_progress .staff_call_stop_transcribing,
.visit_fs_call_host.call_in_progress .staff_call_stop_transcribing { color: #ffffff; }
/* CENTRE CONTACT CORRECTIONS AND CERTIFICATION — the panel opened from a lab or imaging centre.
Scoped to .facility_correction_panel throughout: .triage_facility_contact and the badge classes
are shared with the finder's result rows and the visit card, and a bare rule would reach them. */
.facility_correction_panel .mchat_header { background: var(--brand); padding-top: env(safe-area-inset-top); }
.facility_correction_panel .mchat_messages { background: #f8f8f8; }
/* the house footer padding is 10px 15px; only the safe-area bottom is added here, so the footer's
horizontal edge stays on the same gutter as the body above it */
.facility_correction_panel .mchat_input { background: var(--surface); border-top: none; box-shadow: none; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.facility_correction_current { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.facility_correction_address_note { color: var(--muted); font-size: 0.78rem; }
.facility_correction_fields { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); padding: 12px; }
.facility_correction_fields .input_label { margin-top: 8px; }
.facility_correction_fields .input_label:first-child { margin-top: 0; }
.facility_correction_directory_values { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); padding: 12px; }
.facility_correction_directory_line { color: var(--muted); font-size: 0.82rem; margin-top: 4px; }
.facility_correction_subhead { font-weight: 700; color: var(--ink); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.facility_correction_provenance { color: var(--muted); }
.facility_cert_reason { color: var(--gold_ink); }
.facility_certification_block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); padding: 12px; }
.facility_certification_text { color: var(--ink); font-size: 0.88rem; line-height: 1.45; }
/* the tick and its label sit on one line; the label takes the remaining width rather than a basis
of 100%, which inside a flex row with no wrap would leave the text one character wide */
.facility_certification_affirm { display: flex; align-items: center; column-gap: 10px; margin: 10px 0; }
.facility_certification_affirm_label { flex: 1 1 auto; color: var(--ink); font-size: 0.88rem; }
.facility_certification_history { margin-top: 10px; }
.facility_certification_history_row { color: var(--muted); font-size: 0.8rem; padding: 4px 0; border-bottom: 1px solid var(--line); }
.facility_certification_history_row:last-child { border-bottom: none; }
/* the chip on a result row and on the visit card. Unconfirmed is muted rather than red: it is the
ordinary state of a centre nobody has looked at yet, not an error the clinician has made. */
.facility_cert_badge { display: inline-flex; align-items: center; gap: 4px; }
.facility_cert_badge_confirmed { background: var(--green_soft); color: var(--green_ink); }
.facility_cert_badge_unconfirmed { background: var(--gold_soft); color: var(--gold_ink); }
/* ===== SPECIALIST ENTRY PANEL =====================================================================
The two-step add form that replaced the single-address stub. Every colour is a token: the panel sits
inside a side drawer that already carries the brand header, so the body stays quiet and the only
brand-weighted things are the step numbers and the primary action. */
.specialist_entry_panel .mchat_messages
{
background: #f8f8f8;
}
.specialist_entry_step
{
padding: 14px;
margin-bottom: 12px;
}
.specialist_entry_step_heading
{
display: flex;
align-items: flex-start;
gap: 10px;
}
.specialist_entry_step_heading span:last-child
{
display: flex;
flex-direction: column;
}
.specialist_entry_step_heading small
{
color: var(--muted);
margin-top: 2px;
}
.specialist_entry_step_number
{
flex: 0 0 24px;
width: 24px;
height: 24px;
border-radius: var(--radius_pill);
background: var(--brand);
color: #ffffff;
font-weight: 700;
font-size: 13px;
line-height: 24px;
text-align: center;
}
.specialist_entry_field_label
{
font-weight: 700;
font-size: 13px;
color: var(--ink);
margin-bottom: 6px;
}
.specialist_entry_field_hint,
.specialist_entry_lookup_hint
{
font-size: 12px;
color: var(--muted);
margin-top: 6px;
line-height: 1.45;
}
/* a repeatable row. The remove control sits inside the row rather than beside it, so a row never
reflows the ones under it when it gains a second line on a narrow screen. */
.specialist_entry_row
{
position: relative;
padding: 12px;
padding-right: 40px;
margin-top: 8px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.specialist_entry_remove_row
{
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: var(--radius_pill);
background: transparent;
color: var(--muted);
font-size: 12px;
line-height: 28px;
}
.specialist_entry_remove_row:hover
{
background: var(--danger_soft);
color: var(--danger);
}
/* three fields on one line at tablet width and up; stacked on a phone, because a two-character state
box beside a city box is unusable at 390px */
.specialist_entry_row_split
{
display: flex;
flex-wrap: wrap;
column-gap: 8px;
row-gap: 8px;
}
.specialist_entry_row_split input
{
flex: 1 1 100%;
}
@media (min-width: 560px)
{
.specialist_entry_row_split input
{
flex: 1 1 0;
}
.specialist_entry_row_split input.specialist_entry_location_state
{
flex: 0 0 72px;
}
.specialist_entry_row_split input.specialist_entry_location_postal
{
flex: 0 0 104px;
}
}
/* lookup results */
.specialist_entry_lookup_found
{
display: flex;
flex-direction: column;
padding: 10px 12px;
background: var(--brand_soft);
border: 1px solid var(--brand_line);
border-radius: var(--radius);
margin-bottom: 8px;
}
.specialist_entry_lookup_found small
{
color: var(--brand_deep);
margin-top: 2px;
}
.specialist_entry_lookup_row
{
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 10px;
padding: 12px;
margin-top: 8px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.specialist_entry_lookup_row:hover
{
border-color: var(--brand_line);
background: var(--brand_soft);
}
.specialist_entry_lookup_row_main
{
display: flex;
flex-direction: column;
min-width: 0;
}
.specialist_entry_lookup_row_main strong,
.specialist_entry_lookup_row_main small
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.specialist_entry_lookup_row_main small
{
color: var(--muted);
font-size: 12px;
}
/* the empty state. It states what was searched rather than only that nothing was found: "no matches"
reads as "search harder" when the useful answer is "we do not hold them, add them". */
.specialist_entry_lookup_empty
{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 18px 14px;
background: var(--surface);
border: 1px dashed var(--line);
border-radius: var(--radius);
}
.specialist_entry_lookup_empty i
{
font-size: 22px;
color: var(--muted);
margin-bottom: 8px;
}
.specialist_entry_lookup_empty small
{
color: var(--muted);
margin-top: 4px;
line-height: 1.45;
}
.specialist_entry_shared_notice
{
display: flex;
align-items: flex-start;
column-gap: 8px;
padding: 10px 12px;
background: var(--blue_soft);
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: 12px;
line-height: 1.45;
color: var(--ink);
}
.specialist_entry_shared_notice i
{
color: var(--blue);
margin-top: 1px;
}
/* the footer carries the refusal, beside the button that was pressed -- this form is several screens
long, so an error at the top of the body is invisible from the bottom and reads as a dead button */
.specialist_entry_panel .mchat_input
{
background: #ffffff;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
/* ADD ONE ADDRESS TO A PATIENT — the drawer opened from the contact panel's address list, and the list
itself, which data_address::client_address_list_html() renders for both that panel and this drawer's
save response */
.add_client_address_subtitle { font-size: 0.82rem; font-weight: 400; color: var(--surface); margin-top: 2px; }
.add_client_address_body { background: #f8f8f8; padding: 15px; }
.add_client_address_card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); box-shadow: var(--shadow_xs); padding: 14px; }
.add_client_address_label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.add_client_address_label.hide_me { display: none; }
.add_client_address_field { position: relative; }
.add_client_address_field_icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.95rem; pointer-events: none; }
.add_client_address_input { width: 100%; padding-left: 36px; }
.add_client_address_hint { font-size: 0.72rem; font-weight: 500; color: var(--muted); margin-top: 8px; }
.add_client_address_chosen { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; background: var(--brand_soft); border: 1px solid var(--brand); border-radius: var(--radius); color: var(--brand_deep); font-size: 0.9rem; }
/* .hide_me carries no !important, so this rule's own display would beat it on source order alone and the
confirmation would sit there empty from the moment the drawer opened, with the JS toggles doing nothing */
.add_client_address_chosen.hide_me { display: none; }
.add_client_address_chosen i { color: var(--brand); flex-shrink: 0; }
.add_client_address_chosen_text { min-width: 0; font-weight: 600; }
.add_client_address_errors { margin-top: 12px; }
.add_client_address_footer { background: #f8f8f8; padding: 12px 15px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 0px; box-shadow: none; display: block; }
.add_client_address_footer.hide_me { display: none; }
.client_address_row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius_lg); box-shadow: var(--shadow_xs); padding: 12px 14px; margin-bottom: 8px; }
.client_address_row.hide_me { display: none; }
.client_address_row_icon { color: var(--brand); font-size: 1rem; flex-shrink: 0; }
.client_address_row_text { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--ink); }
/* 44px so the trash icon is a real touch target on a phone, where this list is mostly read */
.client_address_row_delete { flex-shrink: 0; border: none; width: 44px; height: 44px; margin: -6px -8px -6px 0; color: var(--muted); background: transparent; }
.client_address_row_delete:hover { color: var(--danger_ink); }
.client_address_empty { border: 1px dashed var(--line); border-radius: var(--radius_lg); padding: 16px; text-align: center; color: var(--muted); font-size: 0.82rem; }