.care-dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.care-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.care-dashboard-heading > div { min-width: 0; overflow-wrap: anywhere; }
.care-dashboard-heading h1 { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.15; }
.care-dashboard-heading p { margin-top: .5rem; color: var(--muted); }
.care-dashboard-summary { display: flex; flex-wrap: wrap; column-gap: 1.75rem; border-block: 1px solid var(--line-strong); padding-block: .5rem; }
.care-dashboard-summary a { display: inline-flex; align-items: center; min-height: 44px; gap: .5rem; padding-block: .5rem; color: var(--periwinkle); text-decoration: none; text-underline-offset: .2em; }
.care-dashboard-summary strong { font-variant-numeric: tabular-nums; font-size: 1.2rem; }
.care-dashboard-summary a:focus-visible, .care-patient-link:focus-visible { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
  .care-dashboard-summary a:hover, .care-patient-link:hover { text-decoration: underline; }
}
.care-dashboard-workspace { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; gap: 2rem; }
.care-agenda { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; }
.care-section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding-block: 0 1rem; }
.care-section-heading > div { min-width: 0; }
.care-section-heading h2 { font: 700 1.2rem/1.35 var(--font-sans); }
.care-section-title { display: flex; align-items: center; gap: .5rem; }
.care-section-title img { flex: 0 0 40px; width: 40px; height: 40px; }
.care-section-title span { min-width: 0; overflow-wrap: anywhere; }
.care-section-heading p { color: var(--muted); font-size: .875rem; margin-top: .35rem; }
.care-agenda > .care-section-heading { align-items: center; padding: 1.5rem 1.5rem 1rem; }
.care-agenda-list, .care-queue-list { list-style: none; padding: 0; margin: 0; }
.care-appointment { --visit-ink: var(--periwinkle); --visit-soft: var(--lilac-soft); position: relative; isolation: isolate; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, .9fr) auto; gap: .75rem; align-items: center; padding: .75rem 1.25rem; border-top: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) {
  .care-appointment:has(.care-row-action:hover) { background: var(--lilac-soft); }
}
.care-appointment .care-patient-link { position: relative; z-index: 2; }
.care-row-action::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.care-dashboard .care-row-action:focus-visible { outline: none; }
.care-row-action:focus-visible::after { outline: 3px solid var(--periwinkle); outline-offset: -3px; }
.care-appointment-time { display: grid; align-self: start; font-variant-numeric: tabular-nums; font-weight: 700; }
.care-appointment-time > time, .care-appointment-time > span { display: flex; align-items: center; min-height: 44px; }
.care-appointment-time small { color: var(--muted); font-weight: 400; font-size: .875rem; }
.care-appointment-time time { font-family: var(--font-mono); font-size: .8125rem; font-weight: 400; }
.care-appointment-time small time { font-size: .75rem; }
.care-patient-link { font-weight: 700; color: var(--ink); display: inline-block; padding-bottom: 0; }
.care-appointment-detail { position: relative; min-width: 0; align-self: start; overflow-wrap: anywhere; padding-left: 1rem; }
.care-appointment-detail::before { content: ""; position: absolute; left: 0; top: .65rem; bottom: .2rem; width: 3px; border-radius: 2px; background: var(--visit-ink); opacity: .65; }
.care-appointment-detail > strong { display: flex; align-items: center; min-height: 44px; }
.care-appointment-detail p { color: var(--muted); font-size: .875rem; }
.care-appointment-reason { justify-self: end; max-width: 100%; padding: .35rem .75rem; border-radius: 999px; background: var(--visit-soft); color: var(--visit-ink); font-size: .8125rem; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.care-appointment[data-visit-type="first_visit"] { --visit-soft: var(--success-soft); --visit-ink: var(--success); }
.care-appointment[data-visit-type="procedure"] { --visit-soft: var(--coral-soft); --visit-ink: var(--coral-ink); }
.care-state { display: inline-block; font-size: .8125rem; color: var(--muted); margin-top: .4rem; }
.care-row-action { min-width: 44px; justify-content: center; align-self: center; padding-block: .4rem; font-weight: 700; font-size: .875rem; }
.care-list-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.care-linking-note { margin: 0 1.5rem 1.5rem; padding: 1rem; background: var(--warning-soft); border-radius: 8px; font-size: .875rem; color: var(--warning-ink); }
.care-linking-note a { color: var(--warning-ink); display: inline-block; margin-top: .4rem; text-decoration: underline; font-weight: 700; }
.care-work-queues { display: grid; gap: 2rem; min-width: 0; }
.care-queue-list li { border-top: 1px solid var(--line-strong); }
.care-queue-link { display: grid; gap: .2rem; padding: 1rem .25rem; color: var(--ink); overflow-wrap: anywhere; }
.care-queue-link span { font-size: .9375rem; }
.care-queue-link small { font-size: .8125rem; }
@media (hover: hover) and (pointer: fine) {
  .care-queue-link:hover { background: var(--surface); }
}
.care-queue-link .care-reply-action { margin-top: .5rem; color: var(--periwinkle); font-size: .875rem; font-weight: 700; text-decoration: none; }
.care-section-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: .75rem; font-weight: 700; font-size: .875rem; }
.care-empty { padding: 1rem 0; }
.care-empty p { margin-top: .4rem; color: var(--muted); font-size: .875rem; }
.care-agenda .care-empty { padding: 1rem 1.5rem 1.5rem; }
.care-dashboard-footer { border-top: 1px solid var(--line-strong); padding-top: 1rem; display: flex; justify-content: flex-end; gap: 1.5rem; font-size: .875rem; }
.care-dashboard-footer a { flex-shrink: 0; }
@media (max-width: 1000px) {
  .care-dashboard-workspace { grid-template-columns: minmax(0, 1fr); }
  .care-work-queues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .care-dashboard section { scroll-margin-top: 9rem; }
}
@media (max-width: 600px) {
  .care-dashboard-heading, .care-dashboard-footer { align-items: start; flex-direction: column; gap: 1rem; }
  .care-dashboard-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; font-size: .875rem; }
  .care-dashboard-summary a { align-items: baseline; }
  .care-dashboard-summary strong { flex-shrink: 0; }
  .care-work-queues { grid-template-columns: minmax(0, 1fr); }
  .care-appointment { padding: 1rem; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .5rem; }
  .care-appointment-time { grid-column: 1; grid-row: 1; }
  .care-appointment-detail { grid-column: 2; grid-row: 1; }
  .care-appointment-reason { grid-column: 2 / 4; grid-row: 2; }
  .care-appointment .care-row-action { grid-column: 3; grid-row: 1; }
  .care-agenda > .care-section-heading { flex-wrap: wrap; padding: 1rem; }
  .care-patient-link { min-height: 44px; display: flex; align-items: center; }
  .care-section-link { min-height: 44px; }
}

.care-dashboard .button.small,
.care-row-action,
.care-list-footer a,
.care-linking-note a,
.care-dashboard-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.care-dashboard section:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 4px; }

.care-patient-link { display: inline-flex; align-items: center; min-height: 44px; }
.care-shortcuts { margin-right: auto; max-width: 100%; }
.care-shortcuts summary { min-height: 44px; align-content: center; cursor: pointer; color: var(--periwinkle); }
.care-shortcuts label { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.care-shortcuts input { width: 18px; height: 18px; }
.care-shortcuts p { color: var(--muted); line-height: 1.7; }
.care-shortcuts kbd { font-family: inherit; font-weight: 700; color: var(--ink); }

.care-patient-link,
.care-row-action,
.care-section-link,
.care-dashboard-footer a { text-decoration: none; text-underline-offset: .2em; }
.care-dashboard a:focus-visible,
.care-shortcuts summary:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 2px; border-radius: 2px; }
.care-queue-link:focus-visible { background: var(--surface); }

.care-row-action,
.care-section-link,
.care-reply-action,
.care-dashboard-footer > a { display: inline-flex; align-items: center; gap: .375rem; }
.care-dashboard .ui-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .care-row-action:hover { color: var(--navy); background: transparent; }
}
@media (hover: hover) and (pointer: fine) {
  .care-section-link:hover, .care-dashboard-footer > a:hover { color: var(--navy); background: var(--surface); }
}
.care-list-footer a:not(.button) { text-decoration: underline; text-underline-offset: .2em; }
.care-list-footer .button { text-decoration: none; }

.care-conversation-link { grid-template-columns: minmax(0, 1fr) 1rem; column-gap: 1rem; padding-inline: .25rem .5rem; }
.care-conversation-link > strong,
.care-conversation-link > span,
.care-conversation-link > small { grid-column: 1; }
.care-conversation-chevron { grid-column: 2; grid-row: 1 / 4; align-self: center; color: var(--periwinkle); }

/* Identity, subject, and waiting time have separate reading roles. */
.care-conversation-link { grid-template-columns: minmax(0, 1fr) auto 1rem; gap: .75rem 1rem; padding: 1.25rem 0; }
.care-conversation-link > .care-conversation-patient { grid-column: 1; grid-row: 1; font-size: 1rem; line-height: 1.4; }
.care-conversation-link > .care-conversation-subject { grid-column: 1 / 3; grid-row: 2; font-size: 1rem; line-height: 1.5; max-width: 65ch; }
.care-conversation-link > .care-conversation-time { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: .375rem; color: var(--muted); font-size: .8125rem; }
.care-conversation-time .ui-icon { width: .875rem; height: .875rem; }
.care-conversation-chevron { grid-column: 3; grid-row: 1 / 3; }
.care-conversation-link--overdue { background: var(--coral-soft); padding-inline: .875rem; }
.care-conversation-link--overdue > .care-conversation-time { color: var(--coral-ink); font-weight: 600; }
.care-conversation-link > .care-conversation-overdue { grid-column: 1 / 3; grid-row: 4; justify-self: start; display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem; border: 1px solid currentColor; border-radius: 5px; color: var(--coral-ink); font-size: .75rem; font-weight: 600; }
.care-conversation-link--overdue .care-conversation-chevron { grid-row: 1 / 5; color: var(--coral-ink); }
.care-phase-explorer { min-width: 0; margin-top: .5rem; }
.care-phase-explorer-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-bottom: 1.25rem; }
.care-phase-explorer-heading h2 { font: 700 1.2rem/1.35 var(--font-sans); }
.care-phase-explorer-heading p { margin: .25rem 0 0 3rem; color: var(--muted); font-size: .875rem; }
.care-phase-lane { min-width: 0; border-top: 1px solid var(--line-strong); padding: .75rem 0; }
.care-phase-lane > header { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.care-phase-lane > header img { width: 40px; height: 40px; flex: 0 0 40px; }
.care-phase-lane h3 { font: 600 1rem/1.4 var(--font-sans); overflow-wrap: anywhere; }
.care-phase-total { margin-left: auto; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.care-phase-people { list-style: none; margin: 0; padding: 0; min-width: 0; }
.care-phase-people a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 1rem .75rem; border-radius: 6px; font-size: .9375rem; color: var(--ink); }
.care-phase-people a > span { overflow-wrap: anywhere; min-width: 0; }
.care-phase-people .ui-icon { color: var(--periwinkle); width: .875rem; height: .875rem; }
.care-phase-explorer--index .care-phase-explorer-body { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.5fr); border-block: 1px solid var(--line-strong); }
.care-phase-index { padding: .75rem 1.25rem .75rem 0; border-right: 1px solid var(--line-strong); }
.care-phase-index button { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 44px; padding: .625rem .75rem; border: 0; border-radius: 6px; text-align: left; background: transparent; color: var(--ink); cursor: pointer; font-size: .9375rem; }
.care-phase-index button[aria-pressed="true"] { background: var(--lilac-soft); font-weight: 700; }
.care-phase-index button:disabled { color: var(--muted); background: transparent; cursor: default; opacity: 1; }
.care-phase-index button:disabled > img { opacity: .4; filter: grayscale(1); }
.care-phase-explorer--index .care-phase-roster { padding: 1rem 2rem; }
.care-phase-explorer--index .care-phase-lane { border: 0; padding: 0; }
.care-phase-explorer--index .care-phase-lane > header { margin-bottom: 1rem; }
.care-phase-explorer--index .care-phase-people li { border-top: 1px solid var(--line); }
.care-phase-explorer [hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .care-phase-people a:hover, .care-phase-index button:hover:enabled { background: var(--lilac-soft); }
}
@media (max-width: 1100px) {
  .care-work-queues { grid-template-columns: minmax(0, 1fr); }
  .care-conversation-link > .care-conversation-time { grid-column: 1 / 3; grid-row: 3; }
  .care-conversation-chevron { grid-row: 1 / 4; }
}
@media (max-width: 700px) {
  .care-phase-explorer--index .care-phase-explorer-body { grid-template-columns: minmax(0, 1fr); }
  .care-phase-index { display: flex; overflow-x: auto; gap: .5rem; padding: .75rem 0; border-right: 0; border-bottom: 1px solid var(--line-strong); scrollbar-color: var(--periwinkle) var(--paper); }
  .care-phase-index button { width: auto; flex: 0 0 auto; max-width: 16rem; }
  .care-phase-explorer--index .care-phase-roster { padding: 1rem 0; }
}

.care-phase-explorer--index .care-phase-explorer-body:has(.care-phase-index[hidden]) { grid-template-columns: minmax(0, 1fr); }

.care-phase-index button > img { width: 32px; height: 32px; flex: 0 0 32px; }
.care-phase-index button > span:not(.care-phase-total) { min-width: 0; overflow-wrap: anywhere; }
.care-phase-index button { transition: background-color 120ms ease-out, color 120ms ease-out; }
.care-phase-person { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; flex: 1; }
.care-phase-identity { display: grid; justify-items: start; gap: .5rem; flex: 1 1 12rem; min-width: 0; }
.care-phase-person strong { font-size: .9375rem; font-weight: 600; }
.care-phase-person small { font-size: .8125rem; color: var(--muted); }
.care-phase-context-badge { padding: .1875rem .5rem; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: .75rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.care-phase-next-event { display: grid; gap: .375rem; flex: 1 1 16rem; min-width: 0; color: var(--muted); }
.care-phase-event-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; font-size: .75rem; }
.care-phase-event-kind { display: inline-flex; align-items: center; gap: .375rem; }
.care-phase-event-kind .ui-icon { color: currentColor; flex: 0 0 .875rem; }
.care-phase-proximity { padding: .125rem .5rem; border: 1px solid var(--line-strong); border-radius: 100px; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.care-phase-event-date { font-size: .875rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.care-phase-next-event--near .care-phase-proximity { background: var(--lilac-soft); border-color: transparent; color: var(--periwinkle); font-weight: 600; }
.care-phase-next-event--near .care-phase-event-date { color: var(--ink); font-weight: 600; }
.care-phase-event-empty { flex: 1 1 16rem; }
@media (hover: hover) and (pointer: fine) {
  .care-phase-index.fluid-hover-group button:hover:not([aria-pressed="true"]),
  .care-phase-people.fluid-hover-group a:hover { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .care-phase-index button { transition-duration: 80ms; }
}