:root {
  color-scheme: light;
  --blue: #0566c8;
  --blue-dark: #044f9f;
  --green: #0f8a5f;
  --mint: #e8f8f2;
  --red: #b42335;
  --red-soft: #fff1f2;
  --ink: #142033;
  --muted: #5e6d82;
  --line: #d8e2ee;
  --panel: #ffffff;
  --soft: #f5f8fb;
  --shadow: 0 18px 60px rgba(16, 33, 55, 0.14);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --blue: #63b3ff;
  --blue-dark: #9ed0ff;
  --green: #6ee7b7;
  --mint: #12332d;
  --red: #fda4af;
  --red-soft: #3b1820;
  --ink: #f2f7fb;
  --muted: #bdd0df;
  --line: #385268;
  --panel: #172433;
  --soft: #101b28;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #edf5f7;
  color: var(--ink);
  font-family: "Nunito Sans", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root[data-theme="dark"] body {
  background: #0f1b28;
}

:focus-visible {
  outline: 4px solid #f59e0b;
  outline-offset: 4px;
}

button,
a,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.hub-shell {
  min-height: 100vh;
  padding: 18px;
}

.exit-demo-link {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 450;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid rgba(4, 79, 159, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: var(--blue-dark);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(16, 33, 55, 0.18);
}

.exit-demo-link:hover {
  color: #ffffff;
  background: var(--blue);
}

.hub-shell[data-role="patient"] {
  display: grid;
  align-items: center;
  padding: 14px;
}

.hub-shell[data-role="patient"] .hub-topbar,
.hub-shell[data-role="patient"] .prototype-note,
.hub-shell[data-role="patient"] .pairing-panel {
  display: none;
}

.hub-shell[data-role="caregiver"] {
  display: grid;
  align-items: center;
  padding: 14px;
}

.hub-shell[data-role="caregiver"] .hub-topbar,
.hub-shell[data-role="caregiver"] .prototype-note,
.hub-shell[data-role="caregiver"] .pairing-panel {
  display: none;
}

.hub-topbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  max-width: 1360px;
  margin: 0 auto 12px;
}

.brand-lockup,
.home-link {
  color: var(--ink);
  text-decoration: none;
}

.saved-circle-access {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--blue-dark);
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.saved-circle-access:hover {
  border-color: var(--blue);
  background: #eaf7fc;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-lockup img {
  width: 54px;
  height: 54px;
}

.brand-lockup strong {
  display: block;
  font-size: 1.15rem;
}

.brand-lockup small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 700;
}

.mode-switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.mode-btn,
.home-link {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.mode-btn.active {
  background: var(--blue);
  color: #fff;
}

.home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
}

.prototype-note {
  max-width: 1360px;
  margin: 0 auto 18px;
  border-left: 5px solid var(--green);
  background: var(--mint);
  padding: 12px 16px;
  color: #244254;
  font-weight: 700;
}

.patient-notice {
  position: sticky;
  top: 10px;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  max-width: 1360px;
  margin: 0 auto 14px;
  border: 2px solid #b45309;
  border-radius: 14px;
  background: #ffedd5;
  padding: 14px 16px;
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(22, 45, 73, 0.16);
}

.patient-notice[hidden] {
  display: none;
}

.patient-notice strong {
  color: #7c2d12;
}

.patient-notice span {
  color: #7c2d12;
  font-weight: 800;
}

.patient-alert-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: rgba(9, 22, 40, 0.72);
  padding: 18px;
}

.patient-alert-modal[hidden] {
  display: none;
}

.circle-share-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  background: rgba(12, 28, 48, .54);
  padding: 18px;
}

.circle-share-modal[hidden] {
  display: none;
}

.role-alert-tray {
  position: sticky;
  top: 10px;
  z-index: 850;
  display: grid;
  gap: 12px;
  width: min(960px, calc(100% - 24px));
  margin: 12px auto 18px;
  border: 2px solid #f59e0b;
  border-radius: 18px;
  background: #fff7ed;
  color: #123451;
  padding: 14px;
  box-shadow: 0 18px 48px rgba(180, 83, 9, .22);
}

.role-alert-tray[hidden] {
  display: none;
}

.role-alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.role-alert-head h2,
.role-alert-head p {
  margin: 0;
}

.role-alert-head h2 {
  font-size: clamp(1.1rem, 3vw, 1.45rem);
}

.role-alert-head > span {
  display: grid;
  min-width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: #b42336;
  color: #fff;
  font-weight: 900;
}

.role-alert-list {
  display: grid;
  gap: 10px;
}

.role-alert-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #fed7aa;
  border-left: 6px solid #f59e0b;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.role-alert-item.urgent {
  border-left-color: #b42336;
}

.role-alert-item.message {
  border-left-color: #0782bd;
}

.role-alert-item span,
.role-alert-item p {
  color: #526879;
  font-weight: 800;
}

.role-alert-item span {
  display: block;
  margin-bottom: 3px;
  font-size: .78rem;
}

.role-alert-item strong {
  display: block;
  color: #10233f;
  font-size: 1.02rem;
}

.role-alert-item p {
  margin: 4px 0 0;
  line-height: 1.4;
}

.role-alert-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.role-alert-actions button {
  min-height: 42px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.role-alert-actions button:first-child {
  background: #0782bd;
}

.role-alert-actions button:last-child {
  background: #0f8a5f;
}

@media (max-width: 620px) {
  .role-alert-tray {
    top: 8px;
    width: calc(100% - 16px);
    margin: 8px auto 12px;
    padding: 12px;
  }

  .role-alert-item {
    grid-template-columns: 1fr;
  }

  .role-alert-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.hub-shell.role-alert-flashing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
  border: 10px solid rgba(244, 114, 35, .86);
  background: rgba(255, 122, 26, .09);
  animation: comcareReceiverFlash 1.1s ease-in-out infinite;
}

.hub-shell.role-alert-flashing .role-alert-tray {
  position: sticky;
  z-index: 960;
  box-shadow: 0 0 0 5px rgba(255, 122, 26, .25), var(--shadow);
}

@keyframes comcareReceiverFlash {
  0%, 100% {
    opacity: .18;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-shell.role-alert-flashing::before {
    animation: none;
    opacity: .7;
  }
}

.circle-share-card {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(560px, 100%);
  border: 1px solid #b9d6e5;
  border-radius: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 24px;
}

.circle-share-card h2,
.circle-share-card p {
  margin: 0;
}

.circle-share-card h2 {
  color: var(--ink);
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  line-height: 1.05;
}

.circle-share-card p:not(.eyebrow),
.circle-share-card small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.4;
}

.circle-share-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 900;
}

.circle-share-access {
  display: grid;
  gap: 3px;
  border: 1px solid #cfe0ea;
  border-radius: 14px;
  background: #f3fbff;
  padding: 12px;
}

.circle-share-access span {
  color: var(--blue-dark);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.circle-share-access strong {
  color: var(--ink);
}

.circle-share-access select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #b9d6e5;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  font-weight: 900;
}

.circle-share-access select[hidden] {
  display: none;
}

.circle-share-card label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 900;
}

.circle-share-card textarea {
  min-height: 92px;
  resize: vertical;
  border: 1px solid #cfe0ea;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 12px;
  font-weight: 800;
}

.circle-share-token-panel {
  display: grid;
  gap: 8px;
  border: 1px solid #b7e2d7;
  border-radius: 16px;
  background: linear-gradient(145deg, #f0fff8, #f3fbff);
  padding: 14px;
}

.circle-share-token-panel span {
  color: var(--blue-dark);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.circle-share-token-panel a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 14px;
  background: #0f8a5f;
  color: #fff;
  padding: 10px 14px;
  text-align: center;
  text-decoration: none;
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 950;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  box-shadow: 0 14px 28px rgba(15, 138, 95, .18);
}

.circle-share-token-panel small {
  color: #47677a;
}

.circle-share-hidden-link {
  display: none !important;
}

.circle-share-native {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: #ff7a1a;
  color: #fff;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(255, 122, 26, .22);
}

.circle-share-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.circle-share-actions button,
.circle-share-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  padding: 0 12px;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
  cursor: pointer;
}

.circle-share-actions a:nth-child(2) {
  background: #0f8a5f;
}

.circle-share-actions a:nth-child(3) {
  background: #25d366;
  color: #06351c;
}

.circle-share-actions a:nth-child(4) {
  background: #123451;
}

@media (max-width: 520px) {
  .circle-share-card {
    padding: 20px;
  }

  .circle-share-actions {
    grid-template-columns: 1fr;
  }
}

.patient-alert-box {
  width: min(760px, 100%);
  border: 4px solid #b45309;
  border-radius: 24px;
  background: #fff7ed;
  padding: clamp(20px, 3vw, 34px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.patient-alert-box h2 {
  margin: 0;
  color: #7c2d12;
  font-size: clamp(2.1rem, 3.6vw, 3.7rem);
  line-height: 1.04;
}

.patient-alert-box p:not(.eyebrow) {
  margin: 18px 0 0;
  color: #7c2d12;
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  line-height: 1.28;
  font-weight: 800;
}

.patient-alert-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.patient-quick-replies,
.patient-card-replies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.patient-card-replies {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.patient-reply-status {
  display: block;
  margin-top: 12px;
  color: var(--green);
  font-size: 1rem;
  font-weight: 900;
}

.patient-alert-actions button {
  min-height: 86px;
  border: 0;
  border-radius: 16px;
  background: #c2410c;
  color: #fff;
  padding: 14px 18px;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 900;
  cursor: pointer;
}

.patient-quick-replies button,
.patient-card-replies button {
  min-height: 64px;
  border: 2px solid #fdba74;
  border-radius: 14px;
  background: #ffedd5;
  color: #7c2d12;
  padding: 10px;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 900;
  cursor: pointer;
}

.patient-alert-actions button:nth-child(2) {
  background: #9a3412;
}

.patient-alert-actions button:nth-child(3),
.patient-alert-actions button:nth-child(4) {
  border: 2px solid #fdba74;
  background: #fff7ed;
  color: #7c2d12;
}

.patient-alert-box small {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 800;
}

.pairing-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 1360px;
  margin: 0 auto 18px;
}

.pairing-side {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(22, 45, 73, 0.08);
}

.pairing-side span,
.pairing-side label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pairing-side strong {
  display: block;
  margin: 4px 0;
  color: var(--blue-dark);
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: 0.12em;
}

.pairing-side p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.pairing-warning {
  border-left: 4px solid #c48200;
  background: #fff8e6;
  padding: 10px;
  color: #6b4b00 !important;
}

.pairing-warning[hidden] {
  display: none;
}

.pairing-actions,
.join-code-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.pairing-actions button,
.join-code-row button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
}

.join-code-row input,
#sharedLinkInput {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--ink);
  font-weight: 800;
}

.join-code-row input {
  width: 160px;
  font-size: 1.35rem;
  letter-spacing: 0.12em;
}

#sharedLinkInput {
  width: 100%;
  margin-bottom: 10px;
}

.interface-panel {
  display: none;
  max-width: 1360px;
  margin: 0 auto;
}

.interface-panel.active {
  display: block;
}

.station-frame {
  min-height: min(720px, calc(100vh - 220px));
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  padding: 18px;
  border: 2px solid #c7d6e7;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff 0%, #eef9f4 100%);
  box-shadow: var(--shadow);
}

.patient-rail {
  display: grid;
  align-content: start;
  gap: 12px;
}

.rail-btn {
  min-height: 86px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--blue-dark);
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
}

.rail-btn.active {
  border-color: var(--blue);
  background: #e6f1ff;
}

.rail-btn.help {
  border-color: #f0b5be;
  background: var(--red-soft);
  color: var(--red);
}

.rail-code {
  display: grid;
  min-height: 86px;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border: 2px dashed #b9d8ff;
  border-radius: 16px;
  background: #f7fbff;
  color: var(--blue-dark);
  text-align: center;
}

.rail-code span {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rail-code strong {
  font-size: 1.8rem;
  letter-spacing: 0.08em;
}

.patient-screen {
  display: none;
  min-height: min(680px, calc(100vh - 260px));
  padding: clamp(24px, 4vw, 56px);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
}

.patient-screen.active {
  display: block;
}

.patient-hero {
  max-width: 930px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--blue-dark);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.patient-hero h1,
.patient-screen h2,
.phone-header h1 {
  margin: 0;
  color: var(--ink);
  line-height: 1.04;
}

.patient-hero h1 {
  font-size: clamp(4rem, 8vw, 7.8rem);
}

.patient-screen h2 {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  max-width: 980px;
}

.patient-summary {
  margin: 18px 0 20px;
  max-width: 920px;
  color: #2d4057;
  font-size: clamp(1.5rem, 2.7vw, 2.35rem);
  line-height: 1.28;
  font-weight: 700;
}

.care-day-label {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  border-radius: 999px;
  background: #e9fbf1;
  color: var(--green);
  padding: 0 20px;
  font-size: 1.1rem;
  font-weight: 900;
}

.patient-primary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
  margin-top: 30px;
}

.patient-card,
.large-choice-row button,
.large-choice-row a,
.relax-grid button,
.help-grid button,
.start-day-btn {
  border: 2px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 8px 24px rgba(22, 45, 73, 0.08);
}

.patient-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 18px;
  align-items: center;
  height: 100%;
  min-height: 150px;
  padding: 22px;
}

.patient-card strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.patient-card small {
  display: block;
  grid-column: 2;
  margin-top: 8px;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.patient-card.urgent {
  border-color: #efb5bd;
  background: linear-gradient(135deg, #fff 0%, var(--red-soft) 100%);
}

.card-mark {
  display: inline-flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #e5f2ff;
  color: var(--blue-dark);
  font-size: 2.1rem;
  font-weight: 900;
}

.urgent .card-mark {
  background: #ffe4e8;
  color: var(--red);
}

.start-day-btn {
  display: block;
  width: min(460px, 100%);
  min-height: 78px;
  margin-top: 24px;
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  font-size: 1.65rem;
  font-weight: 900;
  text-align: center;
}

@media (min-width: 901px) and (max-height: 1250px) {
  .patient-screen {
    padding: 32px;
  }

  .patient-hero h1 {
    font-size: clamp(3.4rem, 5.2vw, 5.6rem);
  }

  .patient-summary {
    margin: 12px 0 12px;
    font-size: clamp(1.28rem, 2vw, 1.8rem);
    line-height: 1.2;
  }

  .care-day-label {
    min-height: 38px;
    font-size: 1rem;
  }

  .patient-primary-grid {
    gap: 14px;
    margin-top: 18px;
  }

  .patient-card {
    min-height: 122px;
    padding: 18px;
  }

  .patient-card strong {
    font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  }

  .patient-card small {
    font-size: 0.98rem;
  }

  .card-mark {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
  }

  .start-day-btn {
    min-height: 62px;
    margin-top: 16px;
    font-size: 1.35rem;
  }
}

.soft-message,
.incoming-card,
.request-status,
.caregiver-card-large,
.caregiver-status-card,
.caregiver-quick,
.caregiver-plan,
.caregiver-message-panel,
.activity-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 20px;
}

.soft-message {
  margin: 24px 0;
  color: #2d4057;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.35;
  font-weight: 800;
}

.plan-preview,
.care-plan-list {
  display: grid;
  gap: 14px;
  margin: 24px 0;
}

.plan-preview div,
.plan-item {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fbff;
  padding: 16px;
}

.plan-preview span,
.plan-item span {
  color: var(--blue-dark);
  font-size: 1.2rem;
  font-weight: 900;
}

.plan-preview strong,
.plan-item strong {
  font-size: 1.35rem;
}

.plan-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
}

.plan-item button {
  min-height: 54px;
  border: 0;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  padding: 0 18px;
  font-weight: 900;
  cursor: pointer;
}

.large-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.large-choice-row.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.large-choice-row button,
.large-choice-row a,
.relax-grid button,
.help-grid button {
  min-height: 74px;
  padding: 16px;
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.caregiver-card-large {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
}

.caregiver-photo {
  display: inline-flex;
  width: 128px;
  height: 128px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #dff3ff;
  color: var(--blue-dark);
  font-size: 2.2rem;
  font-weight: 900;
}

.caregiver-card-large strong {
  display: block;
  font-size: 1.65rem;
}

.caregiver-card-large p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 700;
}

.relax-grid,
.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.hub-media-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #eaf4ff;
  padding: 10px 14px;
}

#closeSpotify{background:#b42336;box-shadow:0 5px 14px rgba(180,35,54,.24)}
.permanent-stop-music,.permanent-stop-music[hidden]{display:none!important}
.hub-shell[data-interface="patient"]~.floating-page-nav .permanent-stop-music:not([hidden]),.hub-shell[data-role="patient"]~.floating-page-nav .permanent-stop-music:not([hidden]){display:inline-flex!important;background:#b42336;color:#fff}
.hub-shell[data-interface="patient"]~.floating-page-nav .permanent-stop-music:hover,.hub-shell[data-role="patient"]~.floating-page-nav .permanent-stop-music:hover{background:#8f1d2c;transform:translateY(-1px)}

.hub-media-header strong {
  color: var(--blue-dark);
  font-size: 1.08rem;
}

.hub-media-header button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: #0b66c3;
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
}

.hub-spotify-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: min(430px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid #b9d8ff;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(15, 73, 124, 0.16);
}

.hub-spotify-panel.large-player {
  width: min(760px, calc(100vw - 32px));
}

.hub-spotify-panel iframe {
  display: block;
  width: 100%;
  height: 352px;
  border: 0;
  background: #111;
}

.spotify-note {
  margin: 0;
  padding: 12px 14px 14px;
  color: var(--muted);
  font-weight: 800;
}

.player-playing .patient-screen.active {
  padding-bottom: 320px;
}

.help-grid button:first-child {
  border-color: #f0b5be;
  background: var(--red-soft);
  color: var(--red);
}

.incoming-card {
  margin-top: 22px;
  border-color: #fdba74;
  background: #fff7ed;
}

.incoming-card strong {
  color: #7c2d12;
  font-size: 1.45rem;
}

.incoming-card p {
  color: #7c2d12;
  font-weight: 700;
}

.incoming-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.incoming-card button {
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: #c2410c;
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
}

.danger-text {
  color: var(--red);
}

.request-status {
  margin-top: 20px;
  border-color: #f0b5be;
  background: #fff8f9;
}

.request-status strong {
  font-size: 1.35rem;
}

.emergency-link {
  border-color: var(--red) !important;
  background: var(--red) !important;
  color: #fff !important;
}

.phone-frame {
  max-width: 520px;
  min-height: 760px;
  margin: 0 auto;
  padding: 18px;
  border: 12px solid #172033;
  border-radius: 36px;
  background: #f4f7fb;
  box-shadow: var(--shadow);
}

.setup-form {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 20px;
  box-shadow: var(--shadow);
}

.care-connection-banner,.shared-conversation{margin:16px 0;border:1px solid #b8ddcd;border-radius:18px;background:linear-gradient(135deg,#effcf5,#f7fbff);padding:16px}.care-connection-banner{display:flex;align-items:center;gap:12px}.care-connection-banner>div{display:flex;flex:1;flex-direction:column;gap:3px}.care-connection-banner small{color:var(--muted)}.care-connection-banner>b,.shared-conversation .section-head>span{border-radius:999px;background:#e8eef5;color:#4b5c70;padding:7px 10px;font-size:.76rem}.care-connection-banner.connected> b,.care-connection-banner.connected .connection-pulse,.shared-conversation .section-head>span.connected{background:#cbf5dc;color:#087642}.connection-pulse{width:13px;height:13px;border-radius:50%;background:#a8b3c0;box-shadow:0 0 0 5px rgba(168,179,192,.18)}.connected .connection-pulse{animation:connectionPulse 1.8s infinite}@keyframes connectionPulse{50%{box-shadow:0 0 0 9px rgba(20,177,101,.08)}}
.caregiver-profile-card{align-items:center}.caregiver-profile-card>div:nth-child(2){flex:1}.caregiver-profile-card>button{border:0;border-radius:12px;background:var(--blue);color:#fff;font-weight:800;padding:12px 16px;cursor:pointer}.monitor-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.monitor-card:hover{transform:translateY(-2px)}.monitor-card.active{box-shadow:0 0 0 3px rgba(19,110,209,.15)}
.shared-conversation h2{margin:2px 0}.conversation-list{display:grid;gap:10px;margin-top:14px}.conversation-empty{color:var(--muted);padding:14px;border:1px dashed var(--line);border-radius:12px}.conversation-item{max-width:86%;border-radius:14px;padding:11px 13px;background:#fff;border:1px solid var(--line)}.conversation-item.caregiver{justify-self:end;background:#eaf4ff;border-color:#b8d8f5}.conversation-item.patient{justify-self:start;background:#fff}.conversation-item strong,.conversation-item small{display:block}.conversation-item small{margin-top:4px;color:var(--muted)}
.demo-tour-launch{position:fixed;right:22px;bottom:88px;z-index:80;border:0;border-radius:999px;background:#0d6fd3;color:#fff;padding:11px 16px;font-weight:900;box-shadow:0 12px 32px rgba(13,76,145,.28);cursor:pointer}.demo-tour{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(10,25,44,.32);padding:18px}.demo-tour[hidden]{display:none}.demo-tour-card{width:min(440px,92vw);border:1px solid rgba(255,255,255,.72);border-radius:20px;background:rgba(255,255,255,.50);box-shadow:0 20px 60px rgba(0,0,0,.24);overflow:hidden;-webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%)}.demo-tour-progress{display:flex;gap:6px;padding:14px 18px 0}.demo-tour-progress i{height:5px;flex:1;border-radius:9px;background:rgba(197,211,224,.72)}.demo-tour-progress i.active{background:#1680df}.demo-tour-body{padding:20px 22px 17px}.demo-tour-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgba(232,245,255,.82);color:#0564bd;font-size:1.15rem;font-weight:900}.demo-tour-body h2{font-size:clamp(1.45rem,4vw,2rem);margin:13px 0 8px;color:#122039}.demo-tour-body p{font-size:.96rem;line-height:1.52;color:#34495d}.demo-tour-label{font-size:.76rem;font-weight:900;color:#087a4a;letter-spacing:.08em}.demo-tour-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid rgba(203,216,227,.78);padding:12px 18px;background:rgba(255,255,255,.22)}.demo-tour-actions button{min-height:40px;border:0;border-radius:10px;padding:0 15px;font-weight:900;cursor:pointer}.demo-tour-skip{background:rgba(255,255,255,.4);color:#3f5265}.demo-tour-next{background:#0d6fd3;color:#fff}.demo-highlight{animation:demoHighlight 1.2s ease 2}@keyframes demoHighlight{50%{box-shadow:0 0 0 7px rgba(32,135,224,.2)}}

.setup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 18px;
}

.setup-header h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.08;
}

.setup-header button,
.setup-card button {
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  padding: 0 18px;
  font-weight: 900;
  cursor: pointer;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.setup-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fbff;
  padding: 16px;
}

.setup-wide {
  grid-column: 1 / -1;
}

.setup-card h2 {
  margin: 0;
  font-size: 1.2rem;
}

.setup-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 900;
}

.setup-card input,
.setup-card textarea {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  font-weight: 700;
}

.schedule-input-grid {
  display: grid;
  grid-template-columns: 130px minmax(180px, 1fr) 150px 76px;
  gap: 10px;
  align-items: center;
}

.check-label {
  display: flex !important;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink) !important;
}

.check-label input {
  min-height: auto;
}

.setup-save-status {
  margin: 16px 0 0;
  border-left: 4px solid var(--blue);
  background: #eef7ff;
  padding: 12px;
  color: var(--ink);
  font-weight: 800;
}

.phone-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.phone-header h1 {
  font-size: 1.8rem;
}

.online-pill {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border-radius: 999px;
  background: #ddf7ec;
  color: var(--green);
  padding: 0 12px;
  font-size: 0.9rem;
  font-weight: 900;
}

.caregiver-status-card,
.caregiver-quick,
.caregiver-plan,
.caregiver-message-panel,
.activity-panel,
.urgent-alert-card {
  margin-top: 12px;
}

.caregiver-status-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.caregiver-status-card strong {
  display: block;
  margin-top: 4px;
  font-size: 1.3rem;
}

.caregiver-status-card small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.35;
  font-weight: 700;
}

.urgent-alert-card {
  border: 4px solid #b42335;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e8 100%);
  padding: 24px;
  box-shadow: 0 18px 48px rgba(180, 35, 53, 0.24);
}

.urgent-alert-card.needs-ack {
  animation: caregiverAlertPulse 1.35s ease-in-out infinite;
}

.urgent-alert-card p {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.urgent-alert-card h2 {
  margin: 0 0 14px;
  color: #7f1d1d;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.05;
}

.caregiver-quick h2,
.caregiver-plan h2,
.caregiver-message-panel h2,
.activity-panel h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
}

.urgent-alert-card span {
  display: block;
  color: #65323a;
  font-size: 1.2rem;
  font-weight: 800;
}

.urgent-alert-card.needs-ack span::after {
  content: "  Alert sound continues until acknowledged.";
  color: #b42335;
}

.caregiver-actions,
.caregiver-action-grid {
  display: grid;
  gap: 10px;
}

.caregiver-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.caregiver-message-panel .caregiver-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.caregiver-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.caregiver-actions button,
.caregiver-action-grid button,
#clearDemo {
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  padding: 0 12px;
  font-weight: 900;
  cursor: pointer;
}

.caregiver-actions button:nth-child(1),
.caregiver-action-grid button:nth-child(1),
.caregiver-action-grid button:nth-child(3),
.caregiver-action-grid button:nth-child(5) {
  background: var(--green);
}

@keyframes caregiverAlertPulse {
  0%,
  100% {
    box-shadow: 0 18px 48px rgba(180, 35, 53, 0.24);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 20px 58px rgba(180, 35, 53, 0.42);
    transform: translateY(-1px);
  }
}

.mini-plan {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 5px 10px;
  align-items: start;
}

.mini-plan span {
  color: var(--blue-dark);
  font-weight: 900;
}

.mini-plan strong {
  font-size: 0.95rem;
}

.mini-plan small {
  grid-column: 2;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 700;
}

textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  color: var(--ink);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#clearDemo {
  min-height: 34px;
  background: #e7eef6;
  color: var(--ink);
  font-size: 0.8rem;
}

.timeline {
  display: grid;
  gap: 10px;
  max-height: 270px;
  overflow-y: auto;
  padding-right: 4px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.timeline-item.urgent {
  border-left-color: var(--red);
  background: var(--red-soft);
}

.timeline-item.important {
  border-left-color: #c48200;
  background: #fff9e8;
}

.timeline-time {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.timeline-text {
  font-weight: 800;
  line-height: 1.28;
}

@media (max-width: 900px) {
  .exit-demo-link {
    top: 10px;
    right: 10px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.92rem;
  }

  .hub-shell {
    padding: 10px;
  }

  .hub-topbar {
    grid-template-columns: 1fr;
  }

  .mode-switch {
    width: 100%;
  }

  .mode-btn {
    flex: 1;
    padding: 0 8px;
  }

  .station-frame {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 10px;
  }

  .pairing-panel {
    grid-template-columns: 1fr;
  }

  .patient-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .rail-btn,
  .rail-code {
    min-height: 56px;
    border-radius: 10px;
    font-size: 0.82rem;
  }

  .rail-code strong {
    font-size: 1.1rem;
  }

  .patient-screen {
    min-height: 0;
    padding: 18px;
  }

  .patient-hero h1 {
    font-size: 3.25rem;
  }

  .patient-screen h2 {
    font-size: 2.1rem;
  }

  .patient-summary {
    font-size: 1.25rem;
  }

  .patient-primary-grid,
  .large-choice-row,
  .large-choice-row.compact,
  .relax-grid,
  .help-grid,
  .plan-preview div,
  .plan-item {
    grid-template-columns: 1fr;
  }

  .patient-card {
    grid-template-columns: 58px 1fr;
    min-height: 120px;
    padding: 16px;
  }

  .card-mark {
    width: 58px;
    height: 58px;
    font-size: 1.7rem;
  }

  .caregiver-card-large {
    align-items: flex-start;
  }

  .caregiver-photo {
    width: 84px;
    height: 84px;
    font-size: 1.5rem;
  }

  .phone-frame {
    max-width: 100%;
    border-width: 6px;
    border-radius: 24px;
    padding: 12px;
  }

  .patient-alert-actions {
    grid-template-columns: 1fr;
  }

  .hub-spotify-panel,
  .hub-spotify-panel.large-player {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    max-height: 46vh;
  }

  .hub-spotify-panel iframe {
    height: 260px;
  }

  .player-playing .patient-screen.active {
    padding-bottom: 300px;
  }

  .patient-quick-replies,
  .patient-card-replies {
    grid-template-columns: 1fr;
  }

  .patient-alert-actions button {
    min-height: 72px;
  }

  .caregiver-message-panel .caregiver-actions {
    grid-template-columns: 1fr;
  }

  .setup-header,
  .setup-grid,
  .schedule-input-grid {
    grid-template-columns: 1fr;
  }

  .setup-header {
    display: grid;
  }

  .setup-wide {
    grid-column: auto;
  }
}
/* Reference-style ComCare Recovery Hub screens */
.hub-shell[data-interface="patient"] .station-frame,
.hub-shell[data-role="patient"] .station-frame {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 1180px;
  min-height: min(760px, calc(100vh - 48px));
  margin: 0 auto;
  overflow: hidden;
  border: 14px solid #111827;
  border-radius: 34px;
  background: #f7fafc;
  box-shadow: 0 28px 80px rgba(1, 24, 43, 0.28);
}

.hub-shell[data-interface="patient"] .patient-rail,
.hub-shell[data-role="patient"] .patient-rail {
  order: 2;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: center;
  gap: 0;
  border-top: 1px solid #dde5ee;
  background: #ffffff;
}

.hub-shell[data-interface="patient"] .rail-btn,
.hub-shell[data-role="patient"] .rail-btn {
  min-height: 72px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #637083;
  font-size: 0.9rem;
  box-shadow: none;
}

.hub-shell[data-interface="patient"] .rail-btn.active,
.hub-shell[data-role="patient"] .rail-btn.active {
  background: #ffffff;
  color: var(--blue);
}

.hub-shell[data-interface="patient"] .rail-btn.help,
.hub-shell[data-role="patient"] .rail-btn.help {
  background: #ffffff;
  color: var(--red);
}

.hub-shell[data-interface="patient"] .rail-code,
.hub-shell[data-role="patient"] .rail-code {
  display: none;
}

.patient-home-screen {
  padding: 0;
  background: #f7fafc;
}

.patient-home-screen > .patient-hero,
.patient-home-screen > .patient-primary-grid,
.patient-home-screen > .start-day-btn {
  display: none;
}

.patient-reference-home {
  min-height: 100%;
  padding: clamp(20px, 3vw, 34px);
}

.patient-tablet-header {
  display: grid;
  grid-template-columns: 190px 1fr 150px;
  gap: 22px;
  align-items: start;
  margin-bottom: 28px;
}

.patient-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0b6f5b;
  font-weight: 900;
}

.patient-brand img {
  width: 54px;
  height: 54px;
}

.patient-brand b,
.patient-brand small {
  display: block;
}

.patient-brand b {
  font-size: 1.45rem;
  line-height: 1;
}

.patient-brand small {
  color: #3e7181;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.patient-greeting {
  text-align: center;
}

.patient-greeting h1 {
  margin: 0;
  color: #172033;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
}

.patient-greeting .patient-summary {
  margin: 8px 0 0;
  color: #2f3d52;
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  font-weight: 800;
}

.patient-clock {
  display: grid;
  justify-items: end;
  gap: 5px;
  color: #172033;
  font-weight: 900;
}

.patient-clock small {
  color: #42536a;
  font-size: 0.82rem;
}

.patient-clock button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  padding: 0 18px;
  font-weight: 900;
}

.patient-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.patient-reference-grid .patient-card {
  min-height: 138px;
  border: 1px solid #dce5ee;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(22, 45, 73, 0.08);
}

.patient-reference-grid .patient-card strong {
  font-size: clamp(1rem, 1.6vw, 1.35rem);
}

.patient-reference-grid .patient-card small {
  font-size: 0.95rem;
}

.patient-reference-grid .card-mark {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0;
}

.mark-plan { background: #64748b; }
.mark-med,
.mark-team { background: #22b3a9; }
.mark-edu,
.mark-msg,
.mark-progress { background: #2276bd; }
.mark-relax { background: #356fd0; }
.mark-equipment { background: #7464c7; }
.mark-help { background: #db4c53; }

.daily-tip {
  width: min(680px, 90%);
  margin: 34px auto 0;
  border: 1px solid #e1e8f0;
  border-radius: 999px;
  background: #ffffff;
  padding: 13px 18px;
  color: #172033;
  text-align: center;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(22, 45, 73, 0.06);
}

.phone-frame {
  border-color: #111827;
  border-radius: 42px;
  background: #f8fafc;
}

.caregiver-app-header > div:not(.caregiver-brand) {
  display: none;
}

.caregiver-app-header {
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #dde5ee;
}

.caregiver-brand img {
  width: 44px;
  height: 44px;
}

.caregiver-brand b {
  font-size: 1.25rem;
}

.caregiver-profile-card,
.caregiver-next-task {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
}

.caregiver-profile-card {
  grid-template-columns: 78px 1fr;
  align-items: center;
  margin-top: 14px;
  border-color: transparent;
  box-shadow: none;
}

.caregiver-avatar {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border-radius: 50%;
  background: #dce5eb;
  color: #304256;
  font-size: 1.3rem;
  font-weight: 900;
}

.caregiver-profile-card h1 {
  margin: 0;
  color: #172033;
  font-size: 1.55rem;
}

.caregiver-profile-card strong {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font-size: 1rem;
}

.caregiver-profile-card p {
  margin: 5px 0 0;
  color: #4d5f75;
  line-height: 1.35;
  font-weight: 800;
}

.caregiver-next-task {
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  box-shadow: 0 8px 24px rgba(22, 45, 73, 0.06);
}

.caregiver-next-task span,
.caregiver-next-task b,
.caregiver-next-task small,
.caregiver-next-task strong {
  display: block;
}

.caregiver-next-task span {
  color: var(--blue-dark);
  font-size: 0.82rem;
  font-weight: 900;
}

.caregiver-next-task strong {
  margin-top: 8px;
  font-size: 1.18rem;
}

.caregiver-next-task small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.caregiver-next-task button,
.section-head button {
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: #eef6f2;
  color: var(--green);
  padding: 0 12px;
  font-weight: 900;
}

.caregiver-status-card {
  display: none;
}

.caregiver-reference-actions h2 {
  display: none;
}

.caregiver-reference-actions {
  padding: 0;
  border: 0;
  background: transparent;
}

.caregiver-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.caregiver-action-grid button {
  display: grid;
  min-height: 92px;
  align-content: center;
  justify-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff !important;
  color: #172033;
  padding: 10px 6px;
  font-size: 0.86rem;
  box-shadow: 0 6px 18px rgba(22, 45, 73, 0.06);
}

.caregiver-action-grid button span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: #e8f2ff;
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 900;
}

.caregiver-action-grid button:nth-child(2) span,
.caregiver-action-grid button:nth-child(5) span {
  background: #e7f8ef;
  color: var(--green);
}

.caregiver-action-grid button:nth-child(3) span {
  background: #f2eafd;
  color: #6d43b7;
}

.caregiver-action-grid button:nth-child(6) span {
  background: #ffecef;
  color: var(--red);
}

.caregiver-message-panel:has(#sharedLinkInput) {
  display: none;
}

.activity-panel .timeline {
  max-height: 190px;
}

.timeline-item {
  grid-template-columns: 72px 1fr 14px;
  border-left: 0;
  border-bottom: 1px solid #eef2f6;
  border-radius: 0;
  background: transparent;
}

.timeline-item::after {
  content: "";
  width: 10px;
  height: 10px;
  align-self: center;
  border-radius: 50%;
  background: var(--green);
}

@media (max-width: 760px) {
  .hub-shell[data-interface="patient"] .station-frame,
  .hub-shell[data-role="patient"] .station-frame {
    border-width: 8px;
    border-radius: 24px;
  }

  .patient-reference-home {
    padding: 18px;
  }

  .patient-tablet-header {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .patient-brand,
  .patient-clock {
    justify-content: center;
    justify-items: center;
  }

  .patient-reference-grid {
    grid-template-columns: 1fr;
  }

  .patient-reference-grid .patient-card {
    min-height: 112px;
  }

  .caregiver-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Guided demo accessibility, profile, pairing, appearance, and monitor additions */
html,
body {
  overflow-x: hidden;
}

.hub-shell[data-role="patient"],
.hub-shell[data-interface="patient"] {
  align-content: center;
}

.hub-shell[data-interface="patient"] .interface-panel,
.hub-shell[data-role="patient"] .interface-panel {
  width: min(100%, 1480px);
}

.hub-shell[data-interface="patient"] .station-frame,
.hub-shell[data-role="patient"] .station-frame {
  max-width: min(1480px, calc(100vw - 28px));
  min-height: min(900px, calc(100vh - 28px));
}

.hub-shell[data-interface="patient"] .patient-rail,
.hub-shell[data-role="patient"] .patient-rail {
  grid-template-columns: repeat(8, minmax(90px, 1fr));
}

.hub-shell[data-interface="patient"] .rail-btn,
.hub-shell[data-role="patient"] .rail-btn {
  min-height: 84px;
  font-size: clamp(0.92rem, 1vw, 1.08rem);
}

.patient-reference-home {
  display: grid;
  align-content: start;
}

.patient-reference-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  max-width: 1180px;
  margin: 0 auto;
}

.patient-reference-grid .patient-card,
.sync-screen button,
.profile-actions button,
.settings-actions button {
  min-height: 96px;
}

.patient-reference-grid .patient-card {
  max-width: 360px;
  justify-self: stretch;
}

.patient-reference-grid .patient-card strong {
  font-size: clamp(1.25rem, 1.45vw, 1.6rem);
}

.patient-reference-grid .patient-card small {
  color: var(--muted);
  font-size: clamp(1rem, 1.05vw, 1.12rem);
}

.primary-action {
  border-color: var(--blue) !important;
}

.connect-card {
  border-color: #7dd3fc !important;
}

.dashboard-status-pill {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e9fbf1;
  color: #0f6f4d;
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 900;
}

.permanent-help {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 520;
  display: inline-flex;
  min-width: 112px;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  padding: 0 22px;
  font-size: 1.15rem;
  font-weight: 900;
  box-shadow: 0 18px 38px rgba(180, 35, 53, 0.28);
}

.screen-note {
  max-width: 820px;
  margin: 12px 0 24px;
  color: var(--muted);
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
  line-height: 1.45;
  font-weight: 800;
}

.sync-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 1fr);
  gap: 20px;
  max-width: 980px;
}

.sync-code-card,
.settings-panel,
.profile-form {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: 0 12px 34px rgba(22, 45, 73, 0.08);
}

.sync-code-card span,
.sync-code-card small {
  display: block;
  color: var(--muted);
  font-weight: 900;
}

.sync-code-card strong {
  display: block;
  margin: 18px 0;
  color: var(--blue-dark);
  font-size: clamp(3.2rem, 6vw, 5.6rem);
  letter-spacing: 0.08em;
}

.sync-status {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  margin: 20px 0 0;
  border-radius: 999px;
  background: #e8f7ef;
  color: #0f6f4d;
  padding: 0 18px;
  font-size: 1.15rem;
  font-weight: 900;
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .hub-topbar,
.hub-shell.clean-pair[data-role="caregiver"] .hub-topbar,
.hub-shell.clean-pair[data-role="setup"] .hub-topbar {
  display: grid;
}

.hub-shell.clean-pair .prototype-note,
.hub-shell.clean-pair .pairing-panel {
  display: none;
}

.hub-shell.clean-pair .mode-switch {
  position: sticky;
  top: 8px;
  z-index: 540;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.profile-photo {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  border-radius: 50%;
  background: #dceafe;
  color: #064e7a;
  font-size: 1.8rem;
  font-weight: 900;
}

.profile-identity strong,
.profile-identity span {
  display: block;
}

.profile-identity strong {
  font-size: 1.65rem;
}

.profile-identity span {
  margin-top: 4px;
  color: var(--green);
  font-weight: 900;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
}

.profile-grid label,
.appearance-options label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 900;
}

.profile-grid input,
.profile-grid textarea {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  color: var(--ink);
  padding: 12px 14px;
  font-size: 1.05rem;
  font-weight: 800;
}

.profile-grid textarea {
  min-height: 98px;
}

.profile-grid input:disabled,
.profile-grid textarea:disabled {
  opacity: 1;
}

.profile-actions,
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.profile-actions button,
.settings-actions button,
.sync-screen .large-choice-row button {
  border: 0;
  border-radius: 16px;
  background: var(--blue);
  color: #fff;
  padding: 0 22px;
  font-weight: 900;
}

.profile-actions button:disabled {
  background: #94a3b8;
}

.appearance-options {
  display: grid;
  gap: 12px;
  margin: 0;
  border: 0;
  padding: 0;
}

.appearance-options legend {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 900;
}

.appearance-options label {
  grid-template-columns: auto 1fr;
  min-height: 72px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
  padding: 0 18px;
  color: var(--ink);
  font-size: 1.18rem;
}

.appearance-options input {
  width: 26px;
  height: 26px;
}

.caregiver-patient-monitor {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
}

.caregiver-patient-monitor .section-head span {
  color: var(--green);
  font-weight: 900;
}

.monitor-grid {
  display: grid;
  gap: 8px;
}

.monitor-card {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 8px 10px;
  align-items: center;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fbff;
  color: var(--ink);
  padding: 10px;
  text-align: left;
}

.monitor-card.active {
  border-color: var(--blue);
  background: #eaf4ff;
}

.monitor-card.attention {
  border-color: #f59e0b;
  background: #fff7ed;
}

.monitor-avatar {
  grid-row: span 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: #dce5eb;
  font-weight: 900;
}

.monitor-card strong,
.monitor-card small,
.monitor-card b {
  display: block;
}

.monitor-card small {
  color: var(--muted);
  font-weight: 800;
}

.monitor-card b {
  grid-row: span 2;
  color: var(--green);
  font-size: 0.82rem;
}

:root[data-theme="dark"] .station-frame,
:root[data-theme="dark"] .patient-screen,
:root[data-theme="dark"] .patient-home-screen,
:root[data-theme="dark"] .phone-frame,
:root[data-theme="dark"] .patient-reference-grid .patient-card,
:root[data-theme="dark"] .caregiver-profile-card,
:root[data-theme="dark"] .caregiver-next-task,
:root[data-theme="dark"] .caregiver-patient-monitor,
:root[data-theme="dark"] .caregiver-plan,
:root[data-theme="dark"] .caregiver-message-panel,
:root[data-theme="dark"] .activity-panel,
:root[data-theme="dark"] .monitor-card,
:root[data-theme="dark"] .daily-tip {
  background: var(--panel);
  color: var(--ink);
}

:root[data-theme="dark"] .patient-greeting h1,
:root[data-theme="dark"] .patient-greeting .patient-summary,
:root[data-theme="dark"] .patient-clock,
:root[data-theme="dark"] .patient-card strong,
:root[data-theme="dark"] .profile-grid input,
:root[data-theme="dark"] .profile-grid textarea {
  color: var(--ink);
}

:root[data-theme="dark"] .dashboard-status-pill,
:root[data-theme="dark"] .sync-status,
:root[data-theme="dark"] .online-pill {
  background: #12332d;
  color: #a7f3d0;
}

:root[data-theme="dark"] .monitor-card.active,
:root[data-theme="dark"] .monitor-card.attention,
:root[data-theme="dark"] .appearance-options label {
  background: #102235;
}

@media (min-width: 1500px) and (orientation: landscape) {
  .patient-tablet-header {
    grid-template-columns: 240px minmax(520px, 1fr) 220px;
  }

  .patient-greeting h1 {
    font-size: clamp(3rem, 3vw, 4.2rem);
  }

  .patient-reference-grid {
    gap: 20px;
  }

  .patient-reference-grid .patient-card {
    min-height: 122px;
  }
}

@media (max-width: 1020px) {
  .hub-shell[data-interface="patient"] .patient-rail,
  .hub-shell[data-role="patient"] .patient-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .patient-reference-grid,
  .sync-layout,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .patient-reference-grid .patient-card {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .hub-shell[data-interface="patient"] .patient-rail,
  .hub-shell[data-role="patient"] .patient-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permanent-help {
    right: 10px;
    bottom: 10px;
    min-width: 92px;
  }

  .sync-code-card strong {
    font-size: 3rem;
  }

  .profile-actions,
  .settings-actions {
    display: grid;
  }

  .monitor-card {
    grid-template-columns: 44px 1fr;
  }

  .monitor-card b {
    grid-column: 2;
  }
}

/* Modern ComCare Hub visual pattern */
body {
  background:
    radial-gradient(circle at 92% 18%, rgba(16, 185, 129, 0.16), transparent 22rem),
    linear-gradient(180deg, #ffffff 0%, #f4fbff 54%, #ffffff 100%);
}

.hub-shell {
  background: transparent;
}

.exit-demo-link {
  border-color: #bfead9;
  background: rgba(255, 255, 255, 0.94);
  color: #047857;
  box-shadow: 0 18px 44px rgba(13, 36, 69, 0.12);
}

.exit-demo-link:hover {
  background: #10b981;
}

.hub-topbar {
  max-width: 1480px;
  border: 1px solid #e0edf6;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  padding: 14px 16px;
  box-shadow: 0 18px 44px rgba(13, 36, 69, 0.08);
  backdrop-filter: blur(14px);
}

.brand-lockup strong,
.phone-header h1,
.patient-greeting h1,
.caregiver-profile-card h1,
.setup-header h1 {
  color: #071b49;
  letter-spacing: 0;
}

.brand-lockup small,
.patient-brand small {
  color: #10b981;
}

.mode-switch {
  border-color: #dbe8f2;
  border-radius: 999px;
  background: #f6fbff;
  padding: 5px;
}

.mode-btn,
.home-link {
  border-radius: 999px;
}

.mode-btn.active {
  background: linear-gradient(135deg, #2563eb, #174ff0);
}

.home-link {
  border-color: #bfead9;
  background: #ffffff;
  color: #047857;
}

.prototype-note {
  max-width: 1480px;
  border: 1px solid #bfead9;
  border-left-width: 6px;
  border-radius: 18px;
  background: #f0fdf7;
  color: #174a43;
}

.patient-home-screen,
.patient-station,
.phone-frame,
.setup-form {
  border-color: #dbe8f2;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 80px rgba(13, 36, 69, 0.14);
}

.patient-station {
  border-radius: 34px;
}

.patient-reference-home {
  background:
    radial-gradient(circle at 88% 12%, rgba(16, 185, 129, 0.1), transparent 14rem),
    #ffffff;
}

.patient-tablet-header {
  align-items: center;
}

.dashboard-status-pill,
.sync-status,
.status-pill,
.connection-pill {
  border-color: transparent;
  background: #dcfce7;
  color: #047857;
}

.patient-reference-grid .patient-card,
.caregiver-action-grid button,
.caregiver-profile-card,
.caregiver-next-task,
.caregiver-patient-monitor,
.caregiver-plan,
.caregiver-message-panel,
.setup-card,
.request-status,
.caregiver-card-large,
.activity-panel,
.profile-form,
.sync-card {
  border-color: #dbe8f2;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 16px 42px rgba(13, 36, 69, 0.08);
}

.patient-reference-grid .patient-card {
  min-height: 132px;
  border-radius: 18px;
}

.patient-reference-grid .patient-card:hover,
.caregiver-action-grid button:hover,
.setup-card button:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 50px rgba(13, 36, 69, 0.12);
}

.patient-reference-grid .card-mark,
.caregiver-action-grid button span {
  border-radius: 18px;
}

.mark-plan,
.mark-edu,
.mark-msg,
.mark-progress {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.mark-med,
.mark-team {
  background: linear-gradient(135deg, #10b981, #059669);
}

.mark-relax,
.mark-equipment {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.mark-help {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.daily-tip {
  border-color: #dbe8f2;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(13, 36, 69, 0.08);
}

.phone-frame {
  border-width: 10px;
  border-color: #111827;
  background: #f8fbff;
}

.caregiver-app-header {
  background: #ffffff;
}

.caregiver-avatar {
  background: linear-gradient(135deg, #dbeafe, #dcfce7);
  color: #075985;
}

.urgent-alert-card {
  border-radius: 20px;
}

.setup-header button,
.setup-card button,
.caregiver-actions button,
.caregiver-action-grid button:nth-child(1),
.caregiver-action-grid button:nth-child(3),
.caregiver-action-grid button:nth-child(5) {
  background: linear-gradient(135deg, #2563eb, #174ff0);
  color: #ffffff;
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 92% 18%, rgba(16, 185, 129, 0.1), transparent 22rem),
    linear-gradient(180deg, #101b28 0%, #0f1b28 100%);
}

:root[data-theme="dark"] .hub-topbar,
:root[data-theme="dark"] .patient-home-screen,
:root[data-theme="dark"] .patient-station,
:root[data-theme="dark"] .phone-frame,
:root[data-theme="dark"] .setup-form {
  background: rgba(23, 36, 51, 0.96);
}
button,input,textarea,select{font-family:inherit}h1,h2,h3,.brand-lockup strong,.patient-card strong,.caregiver-next-task strong{font-family:"Manrope","Segoe UI",sans-serif;letter-spacing:-.018em}

/* Softer visual separation for cards and content pages */
.patient-reference-home{
  background:
    radial-gradient(circle at 92% 8%,rgba(16,185,129,.13),transparent 17rem),
    radial-gradient(circle at 4% 92%,rgba(59,130,246,.12),transparent 18rem),
    linear-gradient(145deg,#f5f9ff 0%,#f8fcfb 52%,#fffaf3 100%);
}
.patient-reference-grid .patient-card{
  border:1px solid rgba(134,163,190,.38);
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 28px rgba(21,51,82,.09),inset 0 1px 0 rgba(255,255,255,.9);
}
.patient-reference-grid .patient-card:nth-child(3n+1){background:linear-gradient(145deg,#fff 25%,#eef6ff)}
.patient-reference-grid .patient-card:nth-child(3n+2){background:linear-gradient(145deg,#fff 25%,#eefbf6)}
.patient-reference-grid .patient-card:nth-child(3n){background:linear-gradient(145deg,#fff 25%,#f7f1ff)}
.patient-reference-grid .patient-card.urgent{background:linear-gradient(145deg,#fff 25%,#fff1f2);border-color:#fecdd3}
.patient-reference-grid .patient-card:hover{border-color:#76a9dc;transform:translateY(-3px);box-shadow:0 20px 40px rgba(21,51,82,.14)}
.daily-tip{background:linear-gradient(90deg,#eef8ff,#f1fbf5);border-color:#c7e2ea;box-shadow:0 8px 22px rgba(21,51,82,.07)}
.caregiver-interface{background:linear-gradient(145deg,#eef6ff,#f3fbf7 52%,#fff8ef)}
.caregiver-profile-card,.caregiver-next-task,.caregiver-patient-monitor,.caregiver-plan,.caregiver-message-panel{
  border-color:rgba(134,163,190,.4);
  background:rgba(255,255,255,.9);
  box-shadow:0 14px 32px rgba(21,51,82,.09);
}
.caregiver-next-task{background:linear-gradient(135deg,#fff,#edf7ff)}
.caregiver-plan{background:linear-gradient(145deg,#fff,#f1fbf6)}
.caregiver-message-panel{background:linear-gradient(145deg,#fff,#fff7ee)}
.setup-interface{background:linear-gradient(145deg,#f3f8ff,#f5fbf8)}
.setup-card,.profile-form,.sync-code-card,.settings-panel{border-color:#cbddea;background:rgba(255,255,255,.92);box-shadow:0 16px 38px rgba(21,51,82,.1)}
.caregiver-setup-guide{margin:22px 0 28px;border:1px solid #b8d9e8;border-radius:24px;background:linear-gradient(145deg,#f0f8ff,#f3fbf7);padding:clamp(20px,3vw,34px);box-shadow:0 18px 42px rgba(21,51,82,.09)}
.guide-intro span{color:#047857;font-size:.76rem;font-weight:900;letter-spacing:.13em}.guide-intro h2{margin:8px 0 8px;font-size:clamp(1.7rem,3vw,2.45rem)}.guide-intro p{max-width:900px;margin:0;color:#4b6274;font-size:1.05rem;line-height:1.55;font-weight:700}
.guide-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.guide-title-row button{min-height:40px;border:0;border-radius:999px;background:#123451;color:#fff;padding:0 16px;font-weight:900;white-space:nowrap;cursor:pointer}
.arrow-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.caregiver-setup-guide.is-collapsed .setup-guide-body{display:none}
.setup-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0;padding:0;counter-reset:setup-step;list-style:none}.setup-steps li{position:relative;min-height:118px;border:1px solid #d4e4ed;border-radius:17px;background:rgba(255,255,255,.92);padding:20px 18px 18px 62px;box-shadow:0 8px 20px rgba(21,51,82,.06);counter-increment:setup-step}.setup-steps li::before{content:counter(setup-step);position:absolute;left:17px;top:18px;display:grid;width:32px;height:32px;place-items:center;border-radius:50%;background:linear-gradient(135deg,#1684cf,#0d6fb5);color:#fff;font-weight:900}.setup-steps b,.setup-steps span{display:block}.setup-steps b{margin-bottom:7px;color:#153956;font-size:1.05rem}.setup-steps span{color:#516779;line-height:1.45;font-weight:650}
.shared-room-note{display:flex;gap:14px;align-items:center;border-radius:15px;background:#e1f7eb;color:#075e48;padding:15px 18px}.shared-room-note b{white-space:nowrap}.shared-room-note span{font-weight:750}.privacy-note{margin:14px 0 0;border-left:5px solid #e9962e;background:#fff8e9;color:#604a2e;padding:13px 16px;line-height:1.5}
@media(max-width:760px){.guide-title-row{align-items:flex-start;flex-direction:column}.guide-title-row button{width:100%}.setup-steps{grid-template-columns:1fr}.shared-room-note{align-items:flex-start;flex-direction:column;gap:4px}.setup-header{align-items:stretch}.setup-header>button{width:100%}}
.care-routine-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}.care-routine-summary article{border:1px solid #cfe0ea;border-radius:18px;background:linear-gradient(145deg,#fff,#f2f8fc);padding:20px;box-shadow:0 10px 25px rgba(21,51,82,.07)}.care-routine-summary article:nth-child(2){background:linear-gradient(145deg,#fff,#f1faf5)}.care-routine-summary span,.daily-question-card>span{color:#047857;font-size:.72rem;font-weight:900;letter-spacing:.12em}.care-routine-summary strong{display:block;margin-top:7px;font-size:1.15rem}.care-routine-summary p{margin:8px 0 0;color:#53697a;line-height:1.5;font-weight:700}.daily-question-card{margin-top:16px;border:2px solid #84c7e1;border-radius:20px;background:linear-gradient(135deg,#eef8ff,#f4fbf7);padding:22px;box-shadow:0 14px 32px rgba(21,51,82,.09)}.daily-question-card h3{margin:9px 0 18px;font-size:1.5rem}.daily-question-card>div{display:flex;gap:10px}.daily-question-card button{min-width:130px;min-height:52px;border:0;border-radius:13px;background:#087fba;color:#fff;padding:0 22px;font-size:1rem;font-weight:900}.daily-question-card button:nth-child(2){background:#0a9a70}.daily-question-card p{margin:14px 0 0;color:#53697a;font-weight:700}.caregiver-question-setup>p{color:#53697a;line-height:1.5;font-weight:700}.question-option-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:700px){.care-routine-summary,.question-option-grid{grid-template-columns:1fr}.daily-question-card>div{display:grid}.daily-question-card button{width:100%}}
[data-role="family"] .caregiver-patient-monitor,[data-role="family"] .mode-switch{display:none}[data-role="family"] .caregiver-interface{background:linear-gradient(145deg,#f4f8ff,#fff8ef)}[data-role="family"] .caregiver-code-card{border-color:#f3c99e;background:linear-gradient(145deg,#fff,#fff8ed)}[data-role="family"] #activePatientWorkspace{border:2px solid #b8d9e8}
.demo-tour{background:rgba(10,25,44,.14)}.demo-tour-card{background:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%)}.demo-tour-actions{background:rgba(255,255,255,.12)}
.demo-pair-code-float{position:fixed;right:22px;top:50%;z-index:76;display:grid;gap:2px;min-width:150px;transform:translateY(-50%);border:2px solid #fff;border-radius:18px;background:linear-gradient(145deg,#0579c4,#075ca3);color:#fff;padding:11px 15px;text-align:left;box-shadow:0 16px 38px rgba(7,78,142,.32);cursor:pointer;animation:demoCodePulse 1.8s ease-in-out infinite}.demo-pair-code-float[hidden]{display:none}.demo-pair-code-float span,.demo-pair-code-float small{font-size:.68rem;font-weight:800;letter-spacing:.05em}.demo-pair-code-float strong{font-size:1.35rem;letter-spacing:.13em}.demo-pair-code-float small{color:#d9efff}@keyframes demoCodePulse{50%{transform:translateY(-50%) scale(1.04);box-shadow:0 18px 46px rgba(7,104,180,.46)}}@media(max-width:700px){.demo-pair-code-float{right:12px;top:auto;bottom:76px;transform:none;min-width:132px;animation:none}.demo-pair-code-float strong{font-size:1.15rem}}
.video-call-overlay{position:fixed;inset:0;z-index:900;display:grid;place-items:center;background:rgba(6,24,39,.72);padding:18px}.video-call-overlay[hidden]{display:none}.video-call-panel{display:grid;grid-template-rows:auto minmax(420px,72vh) auto auto;width:min(1100px,96vw);max-height:96vh;overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.32)}.video-call-panel header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border-bottom:1px solid #dbe8ef}.video-call-panel header h2{margin:2px 0 0;font-size:1.55rem;color:#123451}.video-call-panel header button{min-height:42px;border:0;border-radius:999px;background:#123451;color:#fff;padding:0 18px;font-weight:900;cursor:pointer}.video-call-panel iframe{width:100%;height:100%;border:0;background:#0b1d2a}.video-call-actions{display:flex;gap:10px;align-items:center;padding:12px 18px;border-top:1px solid #dbe8ef;background:#f5fbff}.video-call-actions a,.video-call-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border:0;border-radius:10px;background:#0782bd;color:#fff;padding:0 16px;text-decoration:none;font-weight:900;cursor:pointer}.video-call-actions button{background:#82bd18;color:#183500}.video-call-panel>p{margin:0;padding:0 18px 14px;color:#526879;font-weight:800}.patient-alert-actions #patientAlertVideo:not([hidden]),.incoming-card #patientJoinIncomingVideo:not([hidden]){background:#0782bd;color:#fff}@media(max-width:700px){.video-call-overlay{padding:8px}.video-call-panel{grid-template-rows:auto minmax(420px,76vh) auto auto;width:100%;max-height:100vh;border-radius:14px}.video-call-panel header{align-items:flex-start}.video-call-actions{display:grid}.video-call-actions a,.video-call-actions button{width:100%}}
.floating-page-nav{position:fixed;left:18px;bottom:18px;z-index:850;display:flex;gap:10px}.floating-page-nav a,.floating-page-nav button{display:inline-flex;align-items:center;justify-content:center;min-width:82px;min-height:48px;border:0;border-radius:999px;background:#fff;color:#123451;padding:0 17px;text-decoration:none;font-weight:900;box-shadow:0 14px 34px rgba(18,52,81,.22);cursor:pointer}.floating-page-nav a{background:#0782bd;color:#fff}.floating-page-nav button{background:#f58220;color:#fff}@media(max-width:700px){.floating-page-nav{left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:1fr 1fr 1fr}.floating-page-nav a,.floating-page-nav button{min-width:0;min-height:44px;padding:0 10px;font-size:.86rem}}
.hub-return-menu{position:relative;z-index:910}.hub-return-menu summary{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:1px solid #f4c430;border-radius:999px;background:#fff7bf;color:#123451;padding:0 18px;font-weight:900;box-shadow:0 12px 28px rgba(18,52,81,.14);cursor:pointer;list-style:none}.hub-return-menu summary::-webkit-details-marker{display:none}.hub-return-menu[open] summary{background:#ffe66d}.hub-return-menu div{position:absolute;right:0;top:calc(100% + 8px);display:grid;gap:8px;width:190px;border:1px solid #f4c430;border-radius:14px;background:#fffef0;padding:10px;box-shadow:0 18px 42px rgba(18,52,81,.2)}.hub-return-menu a,.hub-return-menu button{display:flex;align-items:center;justify-content:center;min-height:42px;border:0;border-radius:10px;background:#fff;color:#123451;padding:0 12px;text-align:center;text-decoration:none;font-weight:900;cursor:pointer}.hub-return-menu button{background:#123451;color:#fff}.hub-return-menu a{background:#0782bd;color:#fff}@media(max-width:700px){.hub-return-menu{width:100%}.hub-return-menu summary{width:100%;min-height:44px}.hub-return-menu div{left:0;right:auto;width:min(88vw,230px)}}
.hub-return-menu{position:fixed;top:92px;right:16px;z-index:2500;width:auto}.hub-return-menu summary{width:auto}.hub-return-menu div{right:0;left:auto;width:min(260px,calc(100vw - 32px))}@media(max-width:700px){.hub-return-menu{top:86px;right:12px;width:auto}.hub-return-menu summary{width:auto}.hub-return-menu div{right:0;left:auto;width:min(280px,calc(100vw - 24px))}}
.start-day-status{margin:20px 0 0;padding:16px 18px;border-radius:16px;background:#eaf8ff;color:#075585;font-size:1.08rem;font-weight:900;box-shadow:0 12px 28px rgba(7,130,189,.12)}
.care-roles-panel,.escalation-panel,.care-circle-builder{margin:18px 0}.role-permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.role-permission-grid article{display:grid;gap:8px;min-height:168px;border:1px solid #cfe1ea;border-radius:16px;background:#fff;padding:18px;box-shadow:0 10px 24px rgba(21,51,82,.07)}.role-permission-grid strong{color:#123451;font-size:1.02rem}.role-permission-grid p{margin:0;color:#516779;line-height:1.45}.role-permission-grid small{align-self:end;display:block;border-radius:12px;background:#edf8fd;color:#075585;padding:10px;font-weight:900}.care-roles-panel textarea,.escalation-panel textarea{margin-top:8px}.member-builder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.member-builder-grid select{min-height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:10px 12px;font-weight:800}.member-builder-actions{display:flex;flex-wrap:wrap;gap:10px}.member-builder-actions button:first-child{background:#087fba}.member-builder-actions button:nth-child(2){background:#123451}.member-builder-status{margin:0;border-left:4px solid #087fba;background:#eef8ff;padding:12px;color:#123451;font-weight:800}.approved-member-list,.care-circle-roster{display:grid;gap:10px}.approved-member-card,.care-circle-roster-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto;gap:10px;align-items:center;border:1px solid #cfe0ea;border-radius:16px;background:#fff;padding:12px;box-shadow:0 10px 24px rgba(21,51,82,.06)}.approved-member-card>span,.care-circle-roster-card>span{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#e7f5ff;color:#075585;font-weight:900}.approved-member-card strong,.care-circle-roster-card strong{display:block;color:#123451}.approved-member-card small,.approved-member-card em,.care-circle-roster-card small,.care-circle-roster-card em{display:block;color:#53697a;font-style:normal;font-weight:700}.approved-member-card button{min-height:40px;border-radius:10px;padding:0 12px}.approved-member-card button:nth-of-type(1){background:#0a9a70}.approved-member-card button:nth-of-type(2){background:#a33b1f}.approved-member-card input{grid-column:2 / -1;min-height:38px;border:1px dashed #c4d6e2;border-radius:10px;background:#f7fbff;color:#425b70;font-size:.78rem}.care-circle-members-panel{margin:16px 0;border:1px solid #cfe0ea;border-radius:18px;background:#fff;padding:16px}.care-circle-roster-card{grid-template-columns:46px minmax(0,1fr) auto}.care-circle-roster-card b{border-radius:999px;background:#e8eef5;color:#425b70;padding:7px 10px;font-size:.76rem}.care-circle-roster-card.joined b{background:#cbf5dc;color:#087642}.member-empty{border:1px dashed #c4d6e2;border-radius:14px;background:#f7fbff;color:#53697a;padding:14px;font-weight:800}.escalation-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.escalation-flow span,.escalation-flow b{display:grid;align-content:center;min-height:86px;border-radius:16px;padding:14px;color:#fff;box-shadow:0 12px 26px rgba(21,51,82,.12)}.escalation-flow span{background:#123451;font-weight:900}.escalation-flow b:nth-child(2){background:#0782bd}.escalation-flow b:nth-child(3){background:#f58220}.escalation-flow b:nth-child(4){background:#b42336}@media(max-width:900px){.role-permission-grid,.escalation-flow{grid-template-columns:1fr 1fr}.member-builder-grid{grid-template-columns:1fr}}@media(max-width:620px){.role-permission-grid,.escalation-flow{grid-template-columns:1fr}.role-permission-grid article{min-height:auto}.escalation-flow span,.escalation-flow b{min-height:70px}.approved-member-card,.care-circle-roster-card{grid-template-columns:42px minmax(0,1fr)}.approved-member-card button,.care-circle-roster-card b{grid-column:2}.approved-member-card input{grid-column:1 / -1}}
.phase-one-panel{margin:16px 0;border:1px solid #cfe0ea;border-radius:18px;background:#fff;padding:16px;box-shadow:0 12px 28px rgba(21,51,82,.07)}.quick-add-grid,.setup-repeat-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0}.quick-add-grid input,.quick-add-grid select,.setup-repeat-list input,.setup-repeat-list select,.phase-one-panel textarea{min-height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:10px 12px;font-weight:800}.phase-one-panel>button{min-height:44px;border:0;border-radius:10px;background:#087fba;color:#fff;padding:0 16px;font-weight:900}.care-action-list{display:grid;gap:10px;margin-top:12px}.care-action-card{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid #d5e4ec;border-radius:16px;background:linear-gradient(145deg,#fff,#f7fbff);padding:12px}.care-action-card>span{display:grid;min-height:46px;place-items:center;border-radius:12px;background:#e8f4ff;color:#075585;text-align:center;font-weight:900}.care-action-card strong,.care-action-card small,.care-action-card em{display:block}.care-action-card small,.care-action-card em{color:#53697a;font-style:normal;font-weight:700}.care-action-card.complete{border-color:#b9e8ca;background:#f2fbf6}.care-action-card.skipped{border-color:#f1d4a8;background:#fff8ed}.care-action-card.needs-attention{border-color:#f2b8bd;background:#fff4f5}.status-button-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.status-button-row button,.care-action-card>button,.care-circle-roster-card button{min-height:38px;border:0;border-radius:9px;background:#123451;color:#fff;padding:0 10px;font-weight:900}.status-button-row button:nth-child(1){background:#0a9a70}.status-button-row button:nth-child(2){background:#a86412}.status-button-row button:nth-child(3){background:#b42336}.status-button-row button:disabled,.care-action-card>button:disabled{opacity:.5}.permission-matrix{display:grid;gap:7px;overflow-x:auto}.permission-row{display:grid;grid-template-columns:210px repeat(7,110px);gap:7px;align-items:center}.permission-row>*{min-height:38px}.permission-row strong,.permission-row b{display:grid;align-items:center;color:#123451}.permission-row select{border:1px solid #cfe0ea;border-radius:9px;background:#fff;padding:7px;font-weight:800}.permission-head{border-bottom:1px solid #dbe8ef;padding-bottom:6px;text-transform:capitalize}.care-circle-roster-card button{background:#087fba}.care-circle-roster-card button:last-child{background:#a33b1f}@media(max-width:920px){.quick-add-grid,.setup-repeat-list{grid-template-columns:1fr 1fr}.care-action-card{grid-template-columns:1fr}.status-button-row{justify-content:flex-start}}@media(max-width:620px){.quick-add-grid,.setup-repeat-list{grid-template-columns:1fr}.permission-row{grid-template-columns:170px repeat(7,105px)}}
.calendar-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.calendar-toolbar button{min-height:40px;border:1px solid #b9d6e5;border-radius:999px;background:#fff;color:#123451;padding:0 16px;font-weight:900}.calendar-toolbar button.active{border-color:#087fba;background:#087fba;color:#fff}.calendar-add-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:10px 0}.calendar-add-grid input,.calendar-add-grid select{min-height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:10px 12px;font-weight:800}.calendar-day-group{border:1px solid #d8e6ee;border-radius:18px;background:#f7fbff;padding:12px}.calendar-day-group>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.calendar-day-group>header strong{font-size:1.05rem;color:#123451}.calendar-day-group>header span{border-radius:999px;background:#e8f4ff;color:#075585;padding:7px 10px;font-weight:900}.calendar-week-stack,.calendar-day-stack{display:grid;gap:9px;max-height:520px;overflow:auto;padding-right:4px}.calendar-event-card{grid-template-columns:110px minmax(0,1fr) auto}.calendar-event-card p{margin:6px 0 0;color:#425b70;font-weight:750}.calendar-event-card.high{border-color:#f1d4a8;background:#fffaf0}.calendar-event-card.urgent{border-color:#f2b8bd;background:#fff4f5}.calendar-event-card.low{border-color:#cce6d8;background:#f4fbf7}@media(max-width:1100px){.calendar-add-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.calendar-add-grid{grid-template-columns:1fr}.calendar-event-card{grid-template-columns:1fr}.calendar-day-group>header{align-items:flex-start;flex-direction:column}}
.phase-two-panel{margin:16px 0;border:1px solid #cfe0ea;border-radius:18px;background:#fff;padding:16px;box-shadow:0 12px 28px rgba(21,51,82,.07)}.medication-add-grid,.journal-add-grid,.document-add-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0}.medication-add-grid input,.journal-add-grid input,.document-add-grid input,.document-add-grid select,.phase-two-panel textarea{min-height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:10px 12px;font-weight:800}.phase-two-panel>button{min-height:44px;border:0;border-radius:10px;background:#087fba;color:#fff;padding:0 16px;font-weight:900}.clinical-safety-note{margin:8px 0 12px;border-left:4px solid #b42336;background:#fff4f5;color:#65323a;padding:10px 12px;font-weight:850}.medication-card>span{overflow:hidden}.medication-card>span img{width:100%;height:100%;object-fit:cover;border-radius:10px}.medication-card p,.journal-card p,.document-card p{margin:6px 0 0;color:#425b70;font-weight:750}.journal-trends{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.journal-trends article{border:1px solid #d8e6ee;border-radius:14px;background:#f7fbff;padding:14px}.journal-trends strong,.journal-trends span{display:block}.journal-trends strong{font-size:1.35rem;color:#123451}.journal-trends span{color:#53697a;font-weight:850}.document-category-list{display:grid;gap:12px;margin-top:12px}.document-category-group{border:1px solid #d8e6ee;border-radius:18px;background:#f7fbff;padding:12px}.document-category-group>header{display:flex;justify-content:space-between;margin-bottom:10px}.document-category-group>header strong{color:#123451}.document-category-group>header span{border-radius:999px;background:#e8f4ff;color:#075585;padding:6px 10px;font-weight:900}.document-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #d5e4ec;border-radius:14px;background:#fff;padding:12px}.document-card strong,.document-card small,.document-card em{display:block}.document-card small,.document-card em{color:#53697a;font-style:normal;font-weight:750}.document-card button{min-height:38px;border:0;border-radius:9px;background:#a33b1f;color:#fff;padding:0 10px;font-weight:900}.document-card button:disabled{opacity:.5}@media(max-width:1000px){.medication-add-grid,.journal-add-grid,.document-add-grid,.journal-trends{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.medication-add-grid,.journal-add-grid,.document-add-grid,.journal-trends{grid-template-columns:1fr}.document-card{grid-template-columns:1fr}}
.support-request-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:10px 0}.support-request-grid input,.support-request-grid select,.comcare-support-panel textarea{min-height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:10px 12px;font-weight:800}.comcare-support-panel>button{min-height:44px;border:0;border-radius:10px;background:#087fba;color:#fff;padding:0 16px;font-weight:900}.support-request-card>span{background:#edf8fd;color:#075585}.support-request-card p{margin:6px 0 0;color:#425b70;font-weight:750}.support-request-card.scheduled{border-color:#b9e8ca;background:#f2fbf6}.support-request-card.completed{opacity:.86}@media(max-width:1100px){.support-request-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.support-request-grid{grid-template-columns:1fr}}
.store-support-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin:12px 0 14px;border:1px solid #b9d9e7;border-radius:16px;background:linear-gradient(135deg,#eef8ff,#f4fbf7);padding:14px}.store-support-cta strong,.store-support-cta span{display:block}.store-support-cta strong{color:#123451;font-size:1.02rem}.store-support-cta span{margin-top:4px;color:#53697a;font-weight:750;line-height:1.4}.store-support-cta a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;background:#f58220;color:#fff;padding:0 16px;text-decoration:none;font-weight:900;white-space:nowrap;box-shadow:0 10px 24px rgba(245,130,32,.2)}@media(max-width:700px){.store-support-cta{grid-template-columns:1fr}.store-support-cta a{width:100%}}

/* Care Circle starter flow - 2026-08-23 */
.care-circle-start-card{border-color:#9ed4ec;background:linear-gradient(135deg,#f2fbff,#f7fff1)}
.circle-starter-head-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.circle-starter-head-actions span{border-radius:999px;background:#e8f7ff;color:#075585;padding:8px 12px;font-weight:900}
.circle-starter-head-actions button{min-height:38px;border:0;border-radius:999px;background:#123451;color:#fff;padding:0 14px;font-weight:900;cursor:pointer}
.care-circle-start-card.is-collapsed .circle-starter-body{display:none}
.starter-copy{margin:0 0 14px;color:#425b70;font-weight:800;line-height:1.45}
.circle-starter-body{display:grid;gap:12px}
.circle-starter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.circle-starter-grid label{display:grid;gap:7px;color:#123451;font-weight:900}
.circle-starter-grid input,.circle-starter-grid select{min-height:44px;border:1px solid #cfe0ea;border-radius:11px;background:#fff;color:#123451;padding:10px 12px;font-weight:800}
.circle-starter-actions{display:flex;flex-wrap:wrap;gap:10px}
.circle-starter-actions button{min-height:48px;border:0;border-radius:12px;background:#087fba;color:#fff;padding:0 18px;font-weight:900;box-shadow:0 12px 26px rgba(8,127,186,.18)}
.circle-starter-actions button:nth-child(2){border:1px solid #b9d6e5;background:#fff;color:#075585;box-shadow:none}
.return-circle-panel{display:grid;gap:8px;margin-top:14px;border:1px dashed #9ed4ec;border-radius:16px;background:#ffffffcc;padding:14px}
.return-circle-panel strong{color:#123451;font-size:1.02rem}
.return-circle-panel p,.return-circle-panel small{margin:0;color:#425b70;font-weight:800;line-height:1.35}
.return-circle-panel>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.return-circle-panel input{min-height:44px;border:1px solid #cfe0ea;border-radius:11px;background:#fff;color:#123451;padding:10px 12px;font-weight:800}
.return-circle-panel button{min-height:44px;border:0;border-radius:11px;background:#123451;color:#fff;padding:0 16px;font-weight:900;white-space:nowrap}
@media(max-width:900px){.circle-starter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.circle-starter-grid{grid-template-columns:1fr}.care-circle-start-card .section-head{align-items:flex-start;flex-direction:column}.circle-starter-actions{display:grid}.circle-starter-actions button{width:100%}.return-circle-panel>div{grid-template-columns:1fr}.return-circle-panel button{width:100%}}

.saved-circle-corner-badge{position:fixed;right:14px;top:14px;z-index:980;display:grid;gap:2px;max-width:min(310px,calc(100vw - 28px));border:1px solid #9ee7bf;border-radius:16px;background:#dcfce7;color:#075e35;padding:10px 14px;box-shadow:0 14px 32px rgba(7,94,53,.18);cursor:pointer}
.saved-circle-corner-badge[hidden]{display:none}
.saved-circle-corner-badge:focus-visible{outline:4px solid rgba(16,185,129,.28);outline-offset:3px}
.saved-circle-corner-badge span{font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.saved-circle-corner-badge strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
.saved-circle-menu{position:fixed;right:14px;top:72px;z-index:981;display:grid;gap:8px;width:min(310px,calc(100vw - 28px));border:1px solid #9ee7bf;border-radius:16px;background:#fff;color:#123451;padding:14px;box-shadow:0 18px 42px rgba(18,52,81,.18)}
.saved-circle-menu[hidden]{display:none}
.saved-circle-menu strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#075e35;font-size:1.02rem}
.saved-circle-menu small{color:#53697a;font-weight:800;line-height:1.35}
.saved-circle-menu-input{display:grid;gap:6px;color:#123451;font-size:.78rem;font-weight:900}
.saved-circle-menu-input input{width:100%;min-height:42px;border:1px solid #cfe0ea;border-radius:11px;background:#f7fbff;color:#123451;padding:10px 11px;font-weight:800}
.saved-circle-menu button{min-height:42px;border:0;border-radius:11px;color:#fff;padding:0 14px;font-weight:900;cursor:pointer}
.saved-circle-menu button:nth-of-type(1){background:#0a9a70}
.saved-circle-menu button:nth-of-type(2){background:#087fba}
.saved-circle-menu button:nth-of-type(3){background:#b42336}
.saved-circle-menu button:nth-of-type(4){background:#123451}
@media(max-width:620px){.saved-circle-corner-badge{top:10px;right:10px;left:auto;bottom:auto;max-width:min(260px,calc(100vw - 20px));padding:9px 12px}.saved-circle-menu{top:66px;right:10px;width:min(280px,calc(100vw - 20px))}}
.limited-equipment-link{display:none}
.hub-shell.limited-invite-access .mode-switch,
.hub-shell.limited-invite-access .saved-circle-access,
.hub-shell.limited-invite-access [data-return-saved-circle],
.hub-shell.limited-invite-access .saved-circle-menu,
.hub-shell.limited-invite-access .saved-circle-corner-badge,
.hub-shell.limited-invite-access .setup-interface,
.hub-shell.limited-invite-access .prototype-note,
.hub-shell.limited-invite-access .home-link{display:none!important}
.hub-shell.limited-invite-access .brand-lockup{pointer-events:none}
.hub-shell.limited-invite-access .hub-topbar{grid-template-columns:1fr}
.hub-shell.limited-invite-access .limited-equipment-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;max-width:720px;margin:22px auto 28px;border:1px solid #bde7f2;border-radius:18px;background:linear-gradient(145deg,#f2fcff,#fff7ed);padding:18px;box-shadow:0 18px 42px rgba(18,52,81,.08)}
.hub-shell.limited-invite-access .limited-equipment-link strong{display:block;color:#123451;font-size:1.08rem;font-weight:900}
.hub-shell.limited-invite-access .limited-equipment-link p{margin:6px 0 0;color:#4c6172;font-weight:800;line-height:1.45}
.hub-shell.limited-invite-access .limited-equipment-link a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:12px;background:#ff7a1a;color:#fff;padding:0 18px;font-weight:900;text-decoration:none;white-space:nowrap;box-shadow:0 14px 26px rgba(255,122,26,.22)}
@media(max-width:620px){.hub-shell.limited-invite-access .limited-equipment-link{grid-template-columns:1fr;margin:16px 12px 24px}.hub-shell.limited-invite-access .limited-equipment-link a{width:100%}}
.caregiver-layout-toggle{min-height:42px;border:0;border-radius:999px;background:#123451;color:#fff;padding:0 16px;font-weight:900;cursor:pointer;white-space:nowrap}.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-interface{padding:18px clamp(18px,3vw,42px)}.caregiver-desktop-layout[data-interface="caregiver"] .phone-frame{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;max-width:1520px;width:100%;min-height:0;border:0;border-radius:24px;background:rgba(248,251,255,.96);padding:18px;box-shadow:0 20px 60px rgba(13,36,69,.12)}.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header,.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-code-card,.caregiver-desktop-layout[data-interface="caregiver"] .care-connection-banner,.caregiver-desktop-layout[data-interface="caregiver"] .urgent-alert-card,.caregiver-desktop-layout[data-interface="caregiver"] .shared-conversation,.caregiver-desktop-layout[data-interface="caregiver"] .activity-panel{grid-column:1 / -1}.caregiver-desktop-layout[data-interface="caregiver"] .single-circle-monitor,.caregiver-desktop-layout[data-interface="caregiver"] #activePatientWorkspace,.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-next-task,.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-status-card,.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-quick,.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-message-panel{grid-column:span 6}.caregiver-desktop-layout[data-interface="caregiver"] .care-circle-members-panel,.caregiver-desktop-layout[data-interface="caregiver"] .today-action-panel,.caregiver-desktop-layout[data-interface="caregiver"] .task-assignment-panel,.caregiver-desktop-layout[data-interface="caregiver"] .shared-calendar-panel,.caregiver-desktop-layout[data-interface="caregiver"] .comcare-support-panel,.caregiver-desktop-layout[data-interface="caregiver"] .medication-center-panel,.caregiver-desktop-layout[data-interface="caregiver"] .care-journal-panel,.caregiver-desktop-layout[data-interface="caregiver"] .care-documents-panel{grid-column:span 6}.caregiver-desktop-layout[data-interface="caregiver"] .monitor-grid{grid-template-columns:1fr}.caregiver-desktop-layout[data-interface="caregiver"] .monitor-card{min-height:96px}.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center}.caregiver-phone-layout[data-interface="caregiver"] .phone-frame{max-width:520px}.single-circle-monitor .monitor-card{cursor:default}@media(max-width:980px){.caregiver-desktop-layout[data-interface="caregiver"] .phone-frame{display:block;max-width:720px;border:10px solid #111827}.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-interface{padding:0}.caregiver-desktop-layout[data-interface="caregiver"] .phone-frame>section,.caregiver-desktop-layout[data-interface="caregiver"] .phone-frame>header{margin-bottom:16px}.caregiver-layout-toggle{grid-column:auto}}
/* Patient full-screen home experience - 2026-08-22 */
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]){max-width:none;width:100%;min-height:100vh;padding:0;background:#f5fbff}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .hub-topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 18px;background:#ffffffee;border-bottom:1px solid rgba(17,81,116,.12);backdrop-filter:blur(16px)}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .mode-switch,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .home-link,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .exit-demo-link,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .prototype-note,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .pairing-panel,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-rail,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .permanent-help{display:none!important}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .brand-lockup{min-width:0}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .brand-lockup img{width:46px;height:46px}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .brand-lockup strong{font-size:1rem}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .brand-lockup small{font-size:.72rem}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-interface{display:block;width:100%;padding:0}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .station-frame{display:block;width:100%;min-height:calc(100vh - 72px);padding:0;background:#f5fbff;border:0;border-radius:0;box-shadow:none}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-screen{min-height:calc(100vh - 72px);padding:28px}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-home-screen.active{display:block;padding:0;background:#f5fbff}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-home{display:grid;grid-template-rows:auto 1fr auto;min-height:calc(100vh - 72px);padding:22px;background:#f5fbff;border:0;border-radius:0;box-shadow:none}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-tablet-header{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin:0 0 18px;padding:18px;border-radius:18px;background:#fff;box-shadow:0 16px 36px rgba(10,77,117,.1)}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-brand{display:flex;align-items:center;gap:10px}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-brand img{width:48px;height:48px}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-greeting h1{margin:0;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1;color:#123451;letter-spacing:0}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-summary{margin:6px 0 0;font-size:clamp(1rem,1.7vw,1.35rem);line-height:1.35;color:#425d70}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-clock{display:grid;justify-items:end;gap:5px;color:#123451}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .dashboard-status-pill{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:#e8f7d4;color:#386d00;font-weight:900}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-settings-button{min-height:52px;padding:0 22px;border:0;border-radius:999px;background:#123451;color:white;font-size:1.05rem;font-weight:900;cursor:pointer}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-pair-code-button{background:linear-gradient(135deg,#00a0b8,#0782bd);box-shadow:0 12px 26px rgba(0,128,166,.28);animation:pairCodeButtonPulse 1.9s ease-in-out infinite}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-pair-code-button:focus-visible{outline:4px solid rgba(0,160,184,.28);outline-offset:3px}
@keyframes pairCodeButtonPulse{50%{box-shadow:0 16px 34px rgba(0,128,166,.42);filter:saturate(1.12)}}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-header-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-header-actions .patient-settings-button{min-width:150px}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;min-height:0;align-self:stretch}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card{position:relative;display:grid;align-content:center;justify-items:start;min-height:clamp(185px,24vh,300px);padding:30px;border:0;border-radius:22px;color:white;text-align:left;box-shadow:0 22px 46px rgba(12,49,79,.18);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card:after{content:"";position:absolute;right:-40px;bottom:-55px;width:175px;height:175px;border-radius:50%;background:rgba(255,255,255,.18)}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card:hover{transform:translateY(-4px);box-shadow:0 28px 54px rgba(12,49,79,.24)}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card:nth-child(1){background:linear-gradient(135deg,#087dbc,#005b93)}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card:nth-child(2){background:linear-gradient(135deg,#2f9b69,#13784f)}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card:nth-child(3){background:linear-gradient(135deg,#7b56d9,#5133a5)}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card:nth-child(4){background:linear-gradient(135deg,#78b91f,#4f8d00)}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card:nth-child(5){background:linear-gradient(135deg,#e34444,#b61836)}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card:nth-child(6){background:linear-gradient(135deg,#f28c22,#c85e08)}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card .card-mark{position:relative;z-index:1;display:grid;place-items:center;width:70px;height:70px;margin:0 0 22px;border-radius:20px;background:rgba(255,255,255,.22);color:white;font-size:1.05rem;font-weight:900}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card strong{position:relative;z-index:1;margin:0;font-size:clamp(2rem,3.4vw,3.8rem);line-height:1;letter-spacing:0;color:white}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card small{position:relative;z-index:1;max-width:360px;margin-top:12px;color:rgba(255,255,255,.9);font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.35}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .daily-tip{margin-top:18px;padding:18px 20px;border-radius:16px;background:#fff;color:#32576e;font-size:1.05rem;font-weight:800;box-shadow:0 12px 28px rgba(10,77,117,.08)}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-home-screen .patient-hero,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-home-screen .patient-primary-grid,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-home-screen .start-day-btn{display:none!important}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .settings-screen,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .profile-screen,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .sync-screen{max-width:980px;margin:0 auto}
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .settings-panel,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .profile-form,.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .sync-code-card{border-radius:22px;box-shadow:0 22px 48px rgba(10,77,117,.12)}
@media(max-width:900px){.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-tablet-header{grid-template-columns:1fr;justify-items:start}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-clock{justify-items:start}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid{grid-template-columns:1fr 1fr}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card{min-height:220px}}
@media(max-width:620px){.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .hub-topbar{grid-template-columns:1fr}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-screen{padding:18px}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-home{padding:14px}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-header-actions{grid-template-columns:1fr;width:100%}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-header-actions .patient-settings-button{width:100%;min-width:0}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid{grid-template-columns:1fr;gap:12px}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card{min-height:190px;padding:24px;border-radius:18px}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card .card-mark{width:56px;height:56px;margin-bottom:16px}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-tablet-header{padding:14px}.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-greeting h1{font-size:2.25rem}}

/* Layout cleanup - 2026-08-23 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

button,
input,
select,
textarea,
a {
  max-width: 100%;
}

button,
.button,
[role="button"] {
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: center;
}

input,
select,
textarea {
  min-width: 0;
}

.phone-frame > *,
.patient-screen > *,
.care-action-card > *,
.document-card > *,
.calendar-event-card > *,
.approved-member-card > *,
.care-circle-roster-card > * {
  min-width: 0;
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-home {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  overflow: visible;
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-tablet-header {
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr) minmax(300px, auto);
  width: 100%;
  min-width: 0;
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-brand,
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-greeting,
.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-clock {
  min-width: 0;
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-header-actions {
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  width: min(100%, 360px);
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-header-actions .patient-settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  font-size: 1rem;
  white-space: normal;
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  grid-auto-rows: minmax(165px, 1fr);
  gap: clamp(12px, 1.5vw, 18px);
  width: 100%;
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card {
  align-content: start;
  min-height: 0;
  height: 100%;
  padding: clamp(20px, 2.2vw, 30px);
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card .card-mark {
  flex: 0 0 auto;
  width: clamp(54px, 5vw, 70px);
  height: clamp(54px, 5vw, 70px);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card strong {
  font-size: clamp(1.55rem, 2.7vw, 3.2rem);
  line-height: 1.04;
  overflow-wrap: normal;
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card small {
  width: 100%;
  font-size: clamp(.92rem, 1.1vw, 1.13rem);
  line-height: 1.35;
}

.hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .daily-tip {
  margin-bottom: 72px;
}

.caregiver-desktop-layout[data-interface="caregiver"] .phone-frame {
  grid-auto-flow: row dense;
  align-items: start;
}

.caregiver-desktop-layout[data-interface="caregiver"] .phone-frame > header,
.caregiver-desktop-layout[data-interface="caregiver"] .phone-frame > section,
.caregiver-desktop-layout[data-interface="caregiver"] .phone-frame > article {
  width: 100%;
  margin: 0;
}

.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header {
  grid-template-columns: minmax(210px, auto) minmax(0, 1fr) auto auto;
  gap: 12px;
}

.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header > div:not(.caregiver-brand) {
  min-width: 0;
}

.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-layout-toggle,
.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header button,
.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-actions button,
.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-action-grid button,
.caregiver-desktop-layout[data-interface="caregiver"] .phase-one-panel > button,
.caregiver-desktop-layout[data-interface="caregiver"] .phase-two-panel > button,
.caregiver-desktop-layout[data-interface="caregiver"] .comcare-support-panel > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  white-space: normal;
}

.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-actions,
.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-action-grid button {
  min-height: 92px;
  padding: 14px 10px;
}

.caregiver-desktop-layout[data-interface="caregiver"] .quick-add-grid,
.caregiver-desktop-layout[data-interface="caregiver"] .setup-repeat-list,
.caregiver-desktop-layout[data-interface="caregiver"] .calendar-add-grid,
.caregiver-desktop-layout[data-interface="caregiver"] .support-request-grid,
.caregiver-desktop-layout[data-interface="caregiver"] .medication-add-grid,
.caregiver-desktop-layout[data-interface="caregiver"] .journal-add-grid,
.caregiver-desktop-layout[data-interface="caregiver"] .document-add-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.caregiver-desktop-layout[data-interface="caregiver"] .care-action-card,
.caregiver-desktop-layout[data-interface="caregiver"] .calendar-event-card,
.caregiver-desktop-layout[data-interface="caregiver"] .support-request-card,
.caregiver-desktop-layout[data-interface="caregiver"] .medication-card,
.caregiver-desktop-layout[data-interface="caregiver"] .journal-card {
  grid-template-columns: minmax(86px, 118px) minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
}

.caregiver-desktop-layout[data-interface="caregiver"] .document-card {
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto);
}

.caregiver-desktop-layout[data-interface="caregiver"] .status-button-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  justify-content: stretch;
  min-width: min(100%, 310px);
}

.caregiver-desktop-layout[data-interface="caregiver"] .status-button-row button,
.caregiver-desktop-layout[data-interface="caregiver"] .care-action-card > button,
.caregiver-desktop-layout[data-interface="caregiver"] .document-card button,
.caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card button {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
}

.caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card,
.caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card {
  grid-template-columns: 46px minmax(0, 1fr) minmax(105px, auto) minmax(105px, auto);
}

@media (max-width: 1120px) {
  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-tablet-header {
    grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
  }

  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-clock {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header {
    grid-template-columns: minmax(200px, 1fr) auto auto;
  }
}

@media (max-width: 900px) {
  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-tablet-header,
  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-header-actions {
    grid-template-columns: 1fr;
  }

  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-header-actions {
    width: 100%;
  }

  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(170px, auto);
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .calendar-event-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .support-request-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .medication-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .journal-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .document-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card {
    grid-template-columns: 1fr;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .status-button-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid {
    grid-template-columns: 1fr;
  }

  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card {
    min-height: 158px;
  }

  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .daily-tip {
    margin-bottom: 120px;
  }
}

/* Caregiver usability cleanup - 2026-08-23 */
.caregiver-desktop-layout[data-interface="caregiver"] {
  background: #f3f8fb;
}

.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-interface {
  width: 100%;
  padding: clamp(12px, 2vw, 28px);
}

.caregiver-desktop-layout[data-interface="caregiver"] .phone-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 1320px;
  width: min(100%, 1320px);
  margin: 0 auto 84px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.caregiver-desktop-layout[data-interface="caregiver"] .phone-frame > header,
.caregiver-desktop-layout[data-interface="caregiver"] .phone-frame > section {
  grid-column: 1 / -1;
  width: 100%;
}

.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header,
.caregiver-desktop-layout[data-interface="caregiver"] .sync-code-card,
.caregiver-desktop-layout[data-interface="caregiver"] .care-connection-banner,
.caregiver-desktop-layout[data-interface="caregiver"] .care-circle-members-panel,
.caregiver-desktop-layout[data-interface="caregiver"] .phase-one-panel,
.caregiver-desktop-layout[data-interface="caregiver"] .phase-two-panel,
.caregiver-desktop-layout[data-interface="caregiver"] .urgent-alert-card,
.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-patient-monitor,
.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-next-task,
.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-status-card,
.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-quick,
.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-message-panel,
.caregiver-desktop-layout[data-interface="caregiver"] .shared-conversation,
.caregiver-desktop-layout[data-interface="caregiver"] .activity-panel {
  margin: 0;
  border: 1px solid #d4e3eb;
  border-radius: 14px;
  background: #fff;
  padding: clamp(14px, 1.7vw, 22px);
  box-shadow: 0 10px 26px rgba(18, 52, 81, .07);
}

.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  grid-template-columns: minmax(210px, auto) minmax(0, 1fr) minmax(132px, auto) minmax(92px, auto);
  align-items: center;
  gap: 14px;
  border-radius: 0 0 16px 16px;
}

.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header h1 {
  margin: 2px 0 0;
  font-size: clamp(1.35rem, 2.2vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.caregiver-desktop-layout[data-interface="caregiver"] .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.caregiver-desktop-layout[data-interface="caregiver"] .section-head h2 {
  margin: 2px 0 0;
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: 0;
}

.caregiver-desktop-layout[data-interface="caregiver"] .section-head span,
.caregiver-desktop-layout[data-interface="caregiver"] .online-pill,
.caregiver-desktop-layout[data-interface="caregiver"] .sync-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 6px 12px;
  white-space: normal;
  text-align: center;
}

.caregiver-desktop-layout[data-interface="caregiver"] .quick-add-grid,
.caregiver-desktop-layout[data-interface="caregiver"] .calendar-add-grid,
.caregiver-desktop-layout[data-interface="caregiver"] .support-request-grid,
.caregiver-desktop-layout[data-interface="caregiver"] .medication-add-grid,
.caregiver-desktop-layout[data-interface="caregiver"] .journal-add-grid,
.caregiver-desktop-layout[data-interface="caregiver"] .document-add-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.caregiver-desktop-layout[data-interface="caregiver"] input,
.caregiver-desktop-layout[data-interface="caregiver"] select,
.caregiver-desktop-layout[data-interface="caregiver"] textarea {
  width: 100%;
  min-height: 46px;
  border-radius: 10px;
  font-size: .98rem;
}

.caregiver-desktop-layout[data-interface="caregiver"] textarea {
  min-height: 78px;
  resize: vertical;
}

.caregiver-desktop-layout[data-interface="caregiver"] .calendar-toolbar,
.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-actions,
.caregiver-desktop-layout[data-interface="caregiver"] .large-choice-row,
.caregiver-desktop-layout[data-interface="caregiver"] .large-choice-row.compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.caregiver-desktop-layout[data-interface="caregiver"] .calendar-toolbar button,
.caregiver-desktop-layout[data-interface="caregiver"] .caregiver-actions button,
.caregiver-desktop-layout[data-interface="caregiver"] .large-choice-row button,
.caregiver-desktop-layout[data-interface="caregiver"] .phase-one-panel > button,
.caregiver-desktop-layout[data-interface="caregiver"] .phase-two-panel > button,
.caregiver-desktop-layout[data-interface="caregiver"] .comcare-support-panel > button,
.caregiver-desktop-layout[data-interface="caregiver"] .store-support-cta a {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .96rem;
  line-height: 1.18;
}

.caregiver-desktop-layout[data-interface="caregiver"] .care-action-list,
.caregiver-desktop-layout[data-interface="caregiver"] .document-category-list,
.caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster {
  gap: 12px;
}

.caregiver-desktop-layout[data-interface="caregiver"] .care-action-card,
.caregiver-desktop-layout[data-interface="caregiver"] .calendar-event-card,
.caregiver-desktop-layout[data-interface="caregiver"] .support-request-card,
.caregiver-desktop-layout[data-interface="caregiver"] .medication-card,
.caregiver-desktop-layout[data-interface="caregiver"] .journal-card {
  grid-template-columns: minmax(96px, 130px) minmax(0, 1fr) minmax(290px, 330px);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
}

.caregiver-desktop-layout[data-interface="caregiver"] .care-action-card > span {
  min-height: 100%;
  align-content: center;
  padding: 10px;
}

.caregiver-desktop-layout[data-interface="caregiver"] .care-action-card strong,
.caregiver-desktop-layout[data-interface="caregiver"] .document-card strong,
.caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card strong {
  font-size: 1.05rem;
  line-height: 1.2;
}

.caregiver-desktop-layout[data-interface="caregiver"] .care-action-card small,
.caregiver-desktop-layout[data-interface="caregiver"] .care-action-card em,
.caregiver-desktop-layout[data-interface="caregiver"] .care-action-card p,
.caregiver-desktop-layout[data-interface="caregiver"] .document-card small,
.caregiver-desktop-layout[data-interface="caregiver"] .document-card em,
.caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card small,
.caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card em {
  line-height: 1.35;
}

.caregiver-desktop-layout[data-interface="caregiver"] .status-button-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.caregiver-desktop-layout[data-interface="caregiver"] .status-button-row button,
.caregiver-desktop-layout[data-interface="caregiver"] .care-action-card > button,
.caregiver-desktop-layout[data-interface="caregiver"] .document-card button,
.caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: .9rem;
  line-height: 1.15;
}

.caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card,
.caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card,
.caregiver-desktop-layout[data-interface="caregiver"] .document-card {
  grid-template-columns: 48px minmax(0, 1fr) minmax(110px, auto) minmax(110px, auto);
  align-items: center;
  gap: 12px;
}

.caregiver-desktop-layout[data-interface="caregiver"] .document-card {
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
}

.caregiver-desktop-layout[data-interface="caregiver"] .store-support-cta {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
}

.caregiver-desktop-layout[data-interface="caregiver"] .sync-code-card strong {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}

@media (max-width: 980px) {
  .caregiver-desktop-layout[data-interface="caregiver"] .phone-frame {
    display: grid;
    max-width: 100%;
    border: 0;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-interface {
    padding: 12px;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header,
  .caregiver-desktop-layout[data-interface="caregiver"] .section-head,
  .caregiver-desktop-layout[data-interface="caregiver"] .store-support-cta,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .calendar-event-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .support-request-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .medication-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .journal-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .document-card {
    grid-template-columns: 1fr;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .status-button-row {
    grid-template-columns: 1fr;
  }
}

/* Caregiver narrow-screen proportion fix - 2026-08-23 */
@media (max-width: 980px) {
  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card > span,
  .caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card > span {
    grid-column: 1;
    grid-row: 1;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card > div,
  .caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card > div {
    grid-column: 2;
    grid-row: 1;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card > b,
  .caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card > b {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card button,
  .caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card button {
    grid-row: 2;
    width: 100%;
    min-height: 46px;
    white-space: normal;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card button:nth-of-type(1),
  .caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card button:nth-of-type(1) {
    grid-column: 1 / 3;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card button:nth-of-type(2),
  .caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card button:nth-of-type(2) {
    grid-column: 3;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card button:only-of-type,
  .caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card button:only-of-type {
    grid-column: 1 / -1;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .calendar-event-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .support-request-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .medication-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .journal-card {
    grid-template-columns: 94px minmax(0, 1fr);
    align-items: center;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card > span {
    grid-column: 1;
    grid-row: 1;
    min-height: 64px;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card > div:not(.status-button-row) {
    grid-column: 2;
    grid-row: 1;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card .status-button-row {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-interface {
    padding: 8px;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header,
  .caregiver-desktop-layout[data-interface="caregiver"] .sync-code-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-connection-banner,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-members-panel,
  .caregiver-desktop-layout[data-interface="caregiver"] .phase-one-panel,
  .caregiver-desktop-layout[data-interface="caregiver"] .phase-two-panel,
  .caregiver-desktop-layout[data-interface="caregiver"] .urgent-alert-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-patient-monitor,
  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-next-task,
  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-status-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-quick,
  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-message-panel,
  .caregiver-desktop-layout[data-interface="caregiver"] .shared-conversation,
  .caregiver-desktop-layout[data-interface="caregiver"] .activity-panel {
    padding: 12px;
    border-radius: 12px;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
    align-items: start;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .section-head h2 {
    font-size: 1.35rem;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .section-head span {
    justify-self: end;
    max-width: 140px;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card strong {
    font-size: 1rem;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card small,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card em,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card p {
    font-size: .88rem;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card .status-button-row {
    grid-template-columns: 1fr;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-circle-roster-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .approved-member-card {
    grid-template-columns: 42px minmax(0, 1fr) minmax(68px, auto);
    padding: 10px;
  }
}

/* Caregiver phone card reset - 2026-08-23 */
@media (max-width: 700px) {
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card.task,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card.calendar,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card.medication-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card.journal-card,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card.support-request-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card > span {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    width: auto;
    min-width: 92px;
    max-width: 100%;
    min-height: 42px;
    padding: 8px 14px;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card > div:not(.status-button-row) {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card .status-button-row {
    grid-column: 1;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card .status-button-row button,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card > button {
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    font-size: .88rem;
    white-space: normal;
  }

  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card strong,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card small,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card em,
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card p {
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 390px) {
  .caregiver-desktop-layout[data-interface="caregiver"] .care-action-card .status-button-row {
    grid-template-columns: 1fr;
  }
}

/* Caregiver task cards: top info, bottom actions - 2026-08-23 */
@media (max-width: 760px) {
  .hub-shell[data-interface="caregiver"] .care-action-card {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .hub-shell[data-interface="caregiver"] .care-action-card > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    min-height: 46px !important;
    width: 100% !important;
    padding: 8px 10px !important;
  }

  .hub-shell[data-interface="caregiver"] .care-action-card > div:not(.status-button-row) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  .hub-shell[data-interface="caregiver"] .care-action-card .status-button-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .hub-shell[data-interface="caregiver"] .care-action-card .status-button-row button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
    border-radius: 9px !important;
    font-size: clamp(.78rem, 3.2vw, .95rem) !important;
    line-height: 1.1 !important;
  }

  .hub-shell[data-interface="caregiver"] .care-action-card strong,
  .hub-shell[data-interface="caregiver"] .care-action-card small,
  .hub-shell[data-interface="caregiver"] .care-action-card em,
  .hub-shell[data-interface="caregiver"] .care-action-card p {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

@media (max-width: 420px) {
  .hub-shell[data-interface="caregiver"] .care-action-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

/* Rebuilt caregiver/family task cards - 2026-08-23 */
.hub-shell[data-interface="caregiver"] .caregiver-phone-task-card {
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  width: 100%;
  border: 1px solid #cfe0ea;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(21, 51, 82, .06);
}

.hub-shell[data-interface="caregiver"] .phone-task-info {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.hub-shell[data-interface="caregiver"] .phone-task-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  background: #e8f4ff;
  color: #075585;
  padding: 8px 10px;
  text-align: center;
  font-weight: 900;
}

.hub-shell[data-interface="caregiver"] .phone-task-copy {
  min-width: 0;
}

.hub-shell[data-interface="caregiver"] .phone-task-copy strong,
.hub-shell[data-interface="caregiver"] .phone-task-copy small,
.hub-shell[data-interface="caregiver"] .phone-task-copy em {
  display: block;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

.hub-shell[data-interface="caregiver"] .phone-task-copy strong {
  color: #123451;
  font-size: clamp(1rem, 2.7vw, 1.18rem);
  line-height: 1.2;
}

.hub-shell[data-interface="caregiver"] .phone-task-copy small,
.hub-shell[data-interface="caregiver"] .phone-task-copy em {
  margin-top: 4px;
  color: #53697a;
  font-style: normal;
  font-weight: 750;
  line-height: 1.32;
}

.hub-shell[data-interface="caregiver"] .phone-task-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.hub-shell[data-interface="caregiver"] .phone-task-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  padding: 8px;
  font-size: clamp(.78rem, 2.8vw, .95rem);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.hub-shell[data-interface="caregiver"] .phone-task-actions button:nth-child(1) {
  background: #0a9a70;
}

.hub-shell[data-interface="caregiver"] .phone-task-actions button:nth-child(2) {
  background: #a86412;
}

.hub-shell[data-interface="caregiver"] .phone-task-actions button:nth-child(3) {
  background: #b42336;
}

.hub-shell[data-interface="caregiver"] .phone-task-actions button:disabled {
  opacity: .55;
}

@media (max-width: 430px) {
  .hub-shell[data-interface="caregiver"] .caregiver-phone-task-card {
    padding: 12px;
  }

  .hub-shell[data-interface="caregiver"] .phone-task-info {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
  }

  .hub-shell[data-interface="caregiver"] .phone-task-badge {
    min-height: 48px;
    padding: 7px 8px;
  }

  .hub-shell[data-interface="caregiver"] .phone-task-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .hub-shell[data-interface="caregiver"] .phone-task-actions button {
    min-height: 42px;
    padding: 7px 5px;
  }
}

/* Today plan cards use the same readable phone layout - 2026-08-23 */
@media (max-width: 820px) {
  .hub-shell[data-interface="caregiver"] .today-action-panel .care-action-card {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px !important;
  }

  .hub-shell[data-interface="caregiver"] .today-action-panel .care-action-card > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
  }

  .hub-shell[data-interface="caregiver"] .today-action-panel .care-action-card > div:not(.status-button-row) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .hub-shell[data-interface="caregiver"] .today-action-panel .care-action-card .status-button-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .hub-shell[data-interface="caregiver"] .today-action-panel .care-action-card .status-button-row button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
    border-radius: 10px !important;
    font-size: clamp(.76rem, 2.8vw, .94rem) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  .hub-shell[data-interface="caregiver"] .today-action-panel .care-action-card strong,
  .hub-shell[data-interface="caregiver"] .today-action-panel .care-action-card small,
  .hub-shell[data-interface="caregiver"] .today-action-panel .care-action-card em {
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.28 !important;
  }
}

@media (max-width: 420px) {
  .hub-shell[data-interface="caregiver"] .today-action-panel .care-action-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }
}

/* Shared ComCare Support cards use readable phone layout - 2026-08-23 */
@media (max-width: 820px) {
  .hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card {
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px !important;
  }

  .hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
  }

  .hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card > div:not(.status-button-row) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card .status-button-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card .status-button-row button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
    border-radius: 10px !important;
    font-size: clamp(.76rem, 2.8vw, .94rem) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  .hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card strong,
  .hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card small,
  .hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card em,
  .hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card p {
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.28 !important;
  }
}

@media (max-width: 420px) {
  .hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }
}

/* Care Circle member cards readable phone layout - 2026-08-23 */
@media (max-width: 820px) {
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px !important;
  }

  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card > span,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
  }

  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card > div,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card > b,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card > b {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    white-space: nowrap !important;
  }

  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card button,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card button {
    grid-row: 2 !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: .92rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card button:only-of-type,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card button:only-of-type {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card button:nth-of-type(1):not(:only-of-type),
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card button:nth-of-type(1):not(:only-of-type) {
    grid-column: 1 / 3 !important;
    width: 100% !important;
  }

  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card button:nth-of-type(2),
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card button:nth-of-type(2) {
    grid-column: 3 !important;
    width: 100% !important;
  }

  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card strong,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card small,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card em,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card strong,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card small,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card em {
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.28 !important;
  }
}

@media (max-width: 420px) {
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .care-circle-roster-card,
  .hub-shell[data-interface="caregiver"] .care-circle-members-panel .approved-member-card {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px !important;
  }
}

/* Force Shared ComCare Support cards into two clean rows - 2026-08-23 */
.hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
}

.hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 52px !important;
}

.hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card > div:not(.status-button-row) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card .status-button-row {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card .status-button-row button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 8px 6px !important;
  white-space: normal !important;
}

@media (max-width: 460px) {
  .hub-shell[data-interface="caregiver"] .comcare-support-panel .support-request-card {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }
}

/* Caregiver/family phone cards: text first, buttons at bottom - 2026-08-23 */
.hub-shell[data-interface="caregiver"] .caregiver-phone-task-card,
.hub-shell[data-interface="caregiver"] .care-action-card,
.hub-shell[data-interface="caregiver"] .support-request-card,
.hub-shell[data-interface="caregiver"] .calendar-event-card,
.hub-shell[data-interface="caregiver"] .medication-card,
.hub-shell[data-interface="caregiver"] .journal-card,
.hub-shell[data-interface="caregiver"] .document-card,
.hub-shell[data-interface="caregiver"] .care-circle-roster-card,
.hub-shell[data-interface="caregiver"] .approved-member-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.hub-shell[data-interface="caregiver"] .phone-task-info,
.hub-shell[data-interface="caregiver"] .care-action-card > div:not(.status-button-row),
.hub-shell[data-interface="caregiver"] .support-request-card > div:not(.status-button-row),
.hub-shell[data-interface="caregiver"] .calendar-event-card > div,
.hub-shell[data-interface="caregiver"] .medication-card > div:not(.status-button-row),
.hub-shell[data-interface="caregiver"] .journal-card > div,
.hub-shell[data-interface="caregiver"] .document-card > div,
.hub-shell[data-interface="caregiver"] .care-circle-roster-card > div,
.hub-shell[data-interface="caregiver"] .approved-member-card > div {
  display: block !important;
  grid-column: 1 !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

.hub-shell[data-interface="caregiver"] .care-action-card > span,
.hub-shell[data-interface="caregiver"] .support-request-card > span,
.hub-shell[data-interface="caregiver"] .calendar-event-card > span,
.hub-shell[data-interface="caregiver"] .medication-card > span,
.hub-shell[data-interface="caregiver"] .journal-card > span,
.hub-shell[data-interface="caregiver"] .phone-task-badge {
  display: inline-flex !important;
  grid-column: 1 !important;
  grid-row: auto !important;
  justify-self: start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 34px !important;
  margin: 0 0 4px !important;
  padding: 7px 11px !important;
  border-radius: 10px !important;
}

.hub-shell[data-interface="caregiver"] .phone-task-copy,
.hub-shell[data-interface="caregiver"] .care-action-card strong,
.hub-shell[data-interface="caregiver"] .care-action-card small,
.hub-shell[data-interface="caregiver"] .care-action-card em,
.hub-shell[data-interface="caregiver"] .care-action-card p,
.hub-shell[data-interface="caregiver"] .document-card strong,
.hub-shell[data-interface="caregiver"] .document-card small,
.hub-shell[data-interface="caregiver"] .document-card em,
.hub-shell[data-interface="caregiver"] .care-circle-roster-card strong,
.hub-shell[data-interface="caregiver"] .care-circle-roster-card small,
.hub-shell[data-interface="caregiver"] .care-circle-roster-card em,
.hub-shell[data-interface="caregiver"] .approved-member-card strong,
.hub-shell[data-interface="caregiver"] .approved-member-card small,
.hub-shell[data-interface="caregiver"] .approved-member-card em {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.32 !important;
}

.hub-shell[data-interface="caregiver"] .phone-task-actions,
.hub-shell[data-interface="caregiver"] .status-button-row {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 2px !important;
}

.hub-shell[data-interface="caregiver"] .phone-task-actions button,
.hub-shell[data-interface="caregiver"] .status-button-row button,
.hub-shell[data-interface="caregiver"] .care-action-card > button,
.hub-shell[data-interface="caregiver"] .document-card button,
.hub-shell[data-interface="caregiver"] .care-circle-roster-card button,
.hub-shell[data-interface="caregiver"] .approved-member-card button {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 8px 6px !important;
  border-radius: 10px !important;
  white-space: normal !important;
}

.hub-shell[data-interface="caregiver"] .care-circle-roster-card > span,
.hub-shell[data-interface="caregiver"] .approved-member-card > span {
  grid-column: 1 !important;
  grid-row: auto !important;
  justify-self: start !important;
}

.hub-shell[data-interface="caregiver"] .care-circle-roster-card > b,
.hub-shell[data-interface="caregiver"] .approved-member-card > b {
  grid-column: 1 !important;
  grid-row: auto !important;
  justify-self: start !important;
}

.hub-shell[data-interface="caregiver"] .care-circle-roster-card button:only-of-type,
.hub-shell[data-interface="caregiver"] .approved-member-card button:only-of-type,
.hub-shell[data-interface="caregiver"] .document-card button:only-of-type,
.hub-shell[data-interface="caregiver"] .care-action-card > button:only-of-type {
  grid-column: 1 / -1 !important;
}

@media (max-width: 390px) {
  .hub-shell[data-interface="caregiver"] .phone-task-actions,
  .hub-shell[data-interface="caregiver"] .status-button-row {
    grid-template-columns: 1fr !important;
  }
}

/* Shared ComCare Store CTA: text top, button bottom - 2026-08-23 */
.hub-shell[data-interface="caregiver"] .comcare-support-panel .store-support-cta {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.hub-shell[data-interface="caregiver"] .comcare-support-panel .store-support-cta > div {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.hub-shell[data-interface="caregiver"] .comcare-support-panel .store-support-cta a {
  grid-column: 1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
}

/* Admin/settings gear - 2026-08-23 */
.settings-mode-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.danger-clear-button,
#clearDemo {
  background: #b42336 !important;
  color: #fff !important;
}

.danger-clear-button:hover,
#clearDemo:hover {
  background: #8f1d2d !important;
}

/* Keep Back to Hub in normal page flow so it never overlays text. */
.exit-demo-link {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
}

.hub-shell.limited-invite-access .saved-circle-corner-badge,
.hub-shell.limited-invite-access .saved-circle-corner-badge:not([hidden]),
.hub-shell.limited-invite-access [data-return-saved-circle],
.hub-shell.limited-invite-access .saved-circle-menu,
.hub-shell.limited-invite-access .mode-switch,
.hub-shell.limited-invite-access .settings-mode-btn {
  display: none !important;
}

/* iPhone fit pass - 2026-08-23 */
@media (max-width: 480px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .hub-shell,
  .interface-panel,
  .patient-interface,
  .caregiver-interface,
  .setup-interface {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .hub-shell {
    padding: 8px !important;
    padding-bottom: 86px !important;
  }

  .exit-demo-link {
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 0 8px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: .9rem !important;
  }

  .hub-topbar,
  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .hub-topbar {
    position: relative !important;
    top: auto !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 10px !important;
  }

  .brand-lockup {
    width: 100%;
    min-width: 0;
  }

  .brand-lockup img {
    flex: 0 0 auto;
    width: 42px !important;
    height: 42px !important;
  }

  .brand-lockup span,
  .brand-lockup strong,
  .brand-lockup small {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .saved-circle-corner-badge {
    position: static !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(7,94,53,.12) !important;
  }

  .saved-circle-corner-badge[hidden] {
    display: none !important;
  }

  .saved-circle-corner-badge strong {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .role-alert-tray {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    margin: 8px 0 12px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .role-alert-head,
  .section-head,
  .caregiver-desktop-layout[data-interface="caregiver"] .section-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: start !important;
  }

  .role-alert-head > span,
  .section-head > span,
  .caregiver-desktop-layout[data-interface="caregiver"] .section-head span {
    justify-self: start !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .role-alert-item,
  .care-action-card,
  .support-request-card,
  .calendar-event-card,
  .medication-card,
  .journal-card,
  .document-card,
  .care-circle-roster-card,
  .approved-member-card,
  .caregiver-phone-task-card {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  .phone-frame,
  .caregiver-desktop-layout[data-interface="caregiver"] .phone-frame,
  .caregiver-phone-layout[data-interface="caregiver"] .phone-frame {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-width: 0 !important;
    border-radius: 18px !important;
    padding: 10px !important;
    overflow-x: hidden !important;
  }

  .phone-frame > header,
  .phone-frame > section,
  .phone-frame > article,
  .caregiver-desktop-layout[data-interface="caregiver"] .phone-frame > header,
  .caregiver-desktop-layout[data-interface="caregiver"] .phone-frame > section,
  .caregiver-desktop-layout[data-interface="caregiver"] .phone-frame > article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    padding: 12px !important;
  }

  .caregiver-app-header,
  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header,
  .patient-tablet-header,
  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-tablet-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px !important;
  }

  .caregiver-app-header h1,
  .caregiver-desktop-layout[data-interface="caregiver"] .caregiver-app-header h1,
  .patient-greeting h1,
  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-greeting h1 {
    font-size: clamp(1.55rem, 9vw, 2.25rem) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  .caregiver-layout-toggle,
  .online-pill,
  .large-choice-row button,
  .mode-btn,
  .home-link,
  .saved-circle-access,
  .phase-one-panel > button,
  .setup-card button,
  .setup-header button,
  .circle-starter-actions button,
  .member-builder-actions button,
  .patient-settings-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .quick-add-grid,
  .calendar-add-grid,
  .support-request-grid,
  .member-builder-grid,
  .circle-starter-grid,
  .setup-grid,
  .setup-repeat-list,
  .care-routine-summary,
  .question-option-grid,
  .permission-row {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  input,
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .phone-task-actions,
  .status-button-row,
  .role-alert-actions,
  .patient-alert-actions,
  .circle-share-actions,
  .caregiver-desktop-layout[data-interface="caregiver"] .status-button-row,
  .hub-shell[data-interface="caregiver"] .phone-task-actions,
  .hub-shell[data-interface="caregiver"] .status-button-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .phone-task-actions button,
  .status-button-row button,
  .role-alert-actions button,
  .patient-alert-actions button,
  .circle-share-actions button,
  .circle-share-actions a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    white-space: normal !important;
  }

  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-screen,
  .patient-screen {
    width: 100% !important;
    min-height: auto !important;
    padding: 10px !important;
    overflow-x: hidden !important;
  }

  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-home,
  .patient-reference-home {
    width: 100% !important;
    min-height: auto !important;
    padding: 10px !important;
  }

  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid,
  .patient-reference-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card,
  .patient-reference-grid .patient-card {
    min-height: 150px !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card strong,
  .patient-reference-grid .patient-card strong {
    font-size: clamp(1.55rem, 8vw, 2.25rem) !important;
    line-height: 1.05 !important;
  }

  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-reference-grid .patient-card .card-mark,
  .patient-reference-grid .card-mark {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 12px !important;
  }

  .patient-clock,
  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-clock {
    justify-items: start !important;
    width: 100% !important;
  }

  .patient-header-actions,
  .hub-shell.clean-pair:is([data-role="patient"],[data-interface="patient"]) .patient-header-actions {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .circle-share-card,
  .patient-alert-box,
  .video-call-panel {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .floating-page-nav {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    gap: 6px !important;
  }

  .floating-page-nav a,
  .floating-page-nav button {
    min-height: 42px !important;
    padding: 0 6px !important;
    font-size: .78rem !important;
  }
}

/* Family/caregiver daily-function navigation - 2026-08-23 */
.family-function-nav {
  position: sticky;
  top: 8px;
  z-index: 120;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 16px;
  border: 1px solid #b8d9e8;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  padding: 10px;
  box-shadow: 0 14px 32px rgba(13,36,69,.1);
  backdrop-filter: blur(14px);
}

.family-function-nav button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: #eef8ff;
  color: #075585;
  padding: 0 10px;
  font-weight: 900;
  cursor: pointer;
}

.family-function-nav button:nth-child(2n) {
  background: #eefbf6;
  color: #087642;
}

.family-function-nav button:nth-child(4n) {
  background: #fff4e8;
  color: #9a4f06;
}

.family-function-nav button:focus-visible {
  outline: 4px solid rgba(7,130,189,.22);
  outline-offset: 2px;
}

.family-function-nav .i-need-shortcut {
  background: #f58220;
  color: #fff;
  box-shadow: 0 10px 22px rgba(245, 130, 32, .24);
}

.hub-shell:not([data-current-role="caregiver"]):not([data-current-role="family"]) .top-function-nav {
  display: none;
}

.top-function-nav {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  margin: 0;
  width: min(980px, calc(100% - 24px));
}

.hub-shell:is([data-current-role="caregiver"], [data-current-role="family"]) {
  padding-top: 78px;
}

.hub-shell:is([data-current-role="caregiver"], [data-current-role="family"]) .role-alert-tray {
  margin-top: 6px;
}

@media (max-width: 760px) {
  .family-function-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding: 8px;
  }

  .family-function-nav button {
    min-height: 42px;
    padding: 0 6px;
    font-size: .88rem;
  }

  .top-function-nav {
    position: fixed;
    top: max(6px, env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
  }

  .hub-shell:is([data-current-role="caregiver"], [data-current-role="family"]) {
    padding-top: 120px;
  }
}

@media (max-width: 390px) {
  .family-function-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Home health / EVV operating module - 2026-08-24 */
.agency-interface {
  background: #f4f9fb;
  padding: clamp(16px, 3vw, 34px);
}

.agency-workspace {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.agency-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 18px;
  align-items: stretch;
  border: 1px solid #c9dfea;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff, #eef9ff);
  padding: clamp(18px, 3vw, 32px);
  box-shadow: 0 20px 48px rgba(13, 36, 69, .1);
}

.agency-hero h1 {
  max-width: 780px;
  margin: 8px 0 12px;
  color: #102b45;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.02;
}

.agency-hero p {
  max-width: 880px;
  margin: 0;
  color: #435b70;
  font-weight: 800;
  line-height: 1.55;
}

.agency-status-card,
.agency-kpi-grid article,
.agency-panel {
  border: 1px solid #c9dfea;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(13, 36, 69, .08);
}

.agency-status-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
}

.agency-status-card span,
.agency-kpi-grid span,
.agency-panel .section-head span {
  color: #577084;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.agency-status-card strong {
  color: #075585;
  font-size: 1.55rem;
  line-height: 1.1;
}

.agency-status-card small,
.agency-kpi-grid small,
.agency-note {
  color: #526879;
  font-weight: 800;
  line-height: 1.45;
}

.agency-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.agency-kpi-grid article {
  display: grid;
  gap: 6px;
  min-height: 126px;
  padding: 16px;
}

.agency-kpi-grid strong {
  color: #0a7fb5;
  font-size: 2.2rem;
  line-height: 1;
}

.agency-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.agency-panel {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 2vw, 22px);
}

.agency-wide {
  grid-column: 1 / -1;
}

.agency-panel h2 {
  margin: 0;
  color: #102b45;
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.agency-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.agency-form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agency-form-grid input,
.agency-form-grid select,
.agency-panel textarea {
  min-height: 48px;
  border: 1px solid #cbddea;
  border-radius: 12px;
  background: #fbfdff;
  color: #102b45;
  padding: 0 12px;
  font-weight: 800;
}

.agency-panel textarea {
  min-height: 78px;
  padding: 12px;
}

.agency-panel button {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: #0782bd;
  color: #fff;
  padding: 0 18px;
  font-weight: 900;
  cursor: pointer;
}

.agency-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agency-check-list li {
  border-radius: 12px;
  background: #eef8ff;
  color: #075585;
  padding: 12px;
  font-weight: 900;
}

.agency-validation-list {
  display: grid;
  gap: 10px;
}

.agency-validation-card {
  border-left: 5px solid #c28912;
  border-radius: 14px;
  background: #fff8e8;
  padding: 14px;
}

.agency-validation-card.green {
  border-left-color: #0a9a70;
  background: #effbf6;
}

.agency-validation-card.red {
  border-left-color: #b42336;
  background: #fff1f3;
}

.agency-validation-card strong,
.agency-validation-card span {
  display: block;
  color: #102b45;
  font-weight: 900;
}

.agency-validation-card p {
  margin: 8px 0 0;
  color: #4a6174;
  font-weight: 800;
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .agency-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agency-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .agency-interface {
    padding: 12px;
  }

  .agency-hero,
  .agency-grid {
    grid-template-columns: 1fr;
  }

  .agency-kpi-grid,
  .agency-form-grid,
  .agency-form-grid.compact,
  .agency-check-list {
    grid-template-columns: 1fr;
  }

  .agency-kpi-grid article {
    min-height: 96px;
  }
}