/* Participants list + participant file (v1132, Blake 1 Nov 2026: "the participant files ... seem a bit unpolished",
   "the list of participants as well looks untidy", "the pills at the top need to be fixed - they look untidy at
   different screen sizes"). portal/js/clients.js. Colours are portal tokens so the themes carry through. */

/* Red and gold text pulled a little toward the theme's ink: darker on light themes, lighter on dark ones, so small
   text on a tinted pill stays readable (4.5:1) in every theme. */
#clients, #clientDetailModal {
  --pt-bad: color-mix(in srgb, var(--danger) 78%, var(--ink));
  --pt-warn: color-mix(in srgb, var(--gold-deep) 82%, var(--ink));
}

/* =================================================================================================================
   LIST
   ================================================================================================================= */
.cl-lock {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font: 600 11.5px var(--font-body); letter-spacing: 0;
  text-transform: none; cursor: help;
}

/* Search grows; Sort and Group keep a fixed width so the row never jumps about. */
.cl-tools { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.cl-tools input[type=search] {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--border);
  border-radius: var(--portal-control-radius, var(--radius-md)); background: var(--card); color: var(--ink); font: 14px var(--font-body);
}
.cl-sel { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin: 0; font: 600 12.5px var(--font-body); color: var(--muted); }
.cl-sel select {
  min-height: 44px; width: 200px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: var(--portal-control-radius, var(--radius-md)); background: var(--card); color: var(--ink); font: 500 13.5px var(--font-body);
}
.cl-sel-group select { width: 160px; }

/* Filter pills: ONE line at every width. When they do not fit, the row scrolls sideways with a fade on the edge
   that has more - it never wraps into ragged rows. */
.cl-rail-wrap { position: relative; margin: 0 0 12px; }
.cl-rail { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 1px; scroll-behavior: smooth; }
.cl-rail::-webkit-scrollbar { display: none; }
.cl-rail-wrap::before, .cl-rail-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 36px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1;
}
.cl-rail-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.cl-rail-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.cl-rail-wrap.more-left::before, .cl-rail-wrap.more-right::after { opacity: 1; }
.cl-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 6px 0 12px; margin: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px; color: var(--theme-heading, var(--navy));
  font: 600 12.5px var(--font-body); white-space: nowrap; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.cl-chip:hover { border-color: var(--teal); }
.cl-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.cl-count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 2px 8px; min-width: 24px; text-align: center; }
.cl-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.cl-chip-bad .cl-dot { background: var(--danger); }
.cl-chip-warn .cl-dot { background: var(--gold-deep); }
.cl-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cl-chip.on .cl-count { background: rgba(255, 255, 255, .18); color: #fff; }
.cl-rail-sep { flex: 0 0 1px; align-self: stretch; background: var(--border); margin: 7px 4px; }

.cl-renew {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px;
  border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--card); font-size: 13px; color: var(--muted);
}
.cl-renew span { flex: 1 1 260px; }
.cl-renew[hidden] { display: none; }

/* Rows */
.cl-list { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cl-list > :first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.cl-list > .state-empty { padding: 28px 16px; }
.cl-row {
  display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.7fr) minmax(0, 1.2fr) minmax(155px, 1.3fr) minmax(0, .8fr) 40px;
  gap: 14px; align-items: center; padding: 10px 14px 10px 16px; border-top: 1px solid var(--border); cursor: pointer;
}
.cl-list > .cl-row:first-child { border-top: 0; }
.cl-row:hover { background: var(--bg); }
.cl-row.cl-head { cursor: default; background: var(--bg); padding: 9px 14px 9px 16px; font: 600 12px var(--font-body); color: var(--muted); }
.cl-row.cl-head:hover { background: var(--bg); }
.cl-row.is-archived { opacity: .7; }
.cl-who { display: flex; align-items: center; gap: 11px; min-width: 0; border-radius: 6px; }
.cl-who:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.cl-av {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink); font: 600 13px var(--font-display);
}
/* v1136: the participant's photo, where there is one (the House Hub's). */
.cl-av.has-photo { background: none; overflow: hidden; }
.cl-av img, .pf-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cl-id { min-width: 0; display: flex; flex-direction: column; }
.cl-nm { font: 600 14.5px var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-nm small { font-weight: 400; color: var(--muted); font-size: 13px; }
.cl-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-flags-m { display: none; }
.cl-flags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cl-flag { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 11.5px var(--font-body); white-space: nowrap; }
.cl-flag-bad { background: rgba(196, 69, 54, .10); color: var(--pt-bad); }
.cl-flag-warn { background: rgba(139, 105, 20, .12); color: var(--pt-warn); }
.cl-flag-info { background: var(--surface-2); color: var(--muted); }
.cl-ok { font-size: 12.5px; color: var(--teal-dark); }
.cl-ag { font-size: 13px; color: var(--ink); }
.cl-muted { color: var(--muted); }
.cl-bad { color: var(--pt-bad); }
.cl-warn { color: var(--pt-warn); }
.cl-evidence { font-size: 12px; color: var(--ink); min-width: 0; }   /* v1144: pills - see client-evidence.css */
.cl-note { font-size: 12.5px; color: var(--ink); }
.cl-bar { height: 5px; max-width: 120px; margin-top: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cl-bar i { display: block; height: 100%; background: var(--teal); }
.cl-docs.low .cl-bar i { background: var(--gold-deep); }
.cl-menu { justify-self: end; }
.cl-dots {
  width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.cl-dots:hover, .cl-menu.open .cl-dots { background: var(--surface-2); color: var(--ink); }
.cl-group {
  padding: 8px 16px; border-top: 1px solid var(--border); background: var(--bg);
  font: 700 11.5px var(--font-body); color: var(--teal-dark); letter-spacing: .04em; text-transform: uppercase;
}
.cl-group span { color: var(--muted); font-weight: 600; margin-left: 4px; }
.cl-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; font-size: 12.5px; color: var(--muted); }
.cl-link { background: none; border: 0; padding: 4px 0; font: 600 12.5px var(--font-body); color: var(--teal-dark); cursor: pointer; }
.cl-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .cl-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .cl-row > .cl-flags, .cl-row > .cl-ag, .cl-row > .cl-doc, .cl-row > .cl-note { display: none; }
  .cl-row > .cl-doc { display:block;grid-column:1 / -1; }
  .cl-row > .cl-menu { grid-column:2;grid-row:1; }
  .cl-row.cl-head { display: none; }
  .cl-list > .cl-row.cl-head + .cl-row { border-top: 0; }
  .cl-flags-m { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .cl-flags-m .cl-ok { display: none; }
}
@media (max-width: 640px) {
  .cl-tools { flex-wrap: wrap; }
  .cl-tools input[type=search] { flex: 1 1 100%; }
  .cl-sel { flex: 1.5 1 0; }
  .cl-sel-group { flex: 1 1 0; }
  .cl-sel > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cl-sel select, .cl-sel-group select { width: 100%; }
  .cl-lock { display: none; }
}

/* =================================================================================================================
   PARTICIPANT FILE (#clientDetailModal)
   ================================================================================================================= */
#clientDetailModal .cf-hero.pf-hero-host { display: block; flex: 1 1 auto; min-width: 0; }
.pf-head { display: flex; align-items: flex-start; gap: 16px; }
.pf-avatar.cf-avatar { width: 60px; height: 60px; font-size: 21px; flex: 0 0 auto; }
.pf-avatar.has-photo { background: var(--surface-2); }
/* v1136: tap the photo (or the initials) to add or change it; the small camera says so. */
.pf-photo { position: relative; padding: 0; border: 0; font-family: var(--font-display); cursor: pointer; }
.pf-photo:hover { box-shadow: 0 0 0 3px var(--teal-soft); }
.pf-photo:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pf-photo-badge {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal); color: #fff; border: 2px solid var(--card);
}
.pf-photo-badge svg { width: 12px; height: 12px; }
.pf-nav-m { display: none; }
.pf-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-links [hidden] { display: none; }
.pf-id { flex: 1 1 auto; min-width: 0; }
.pf-name { margin: 0; font: 700 23px/1.2 var(--font-display); color: var(--theme-heading, var(--ink)); }
.pf-name small { margin-left: 6px; font: 500 15px var(--font-body); color: var(--muted); }
.pf-pills { display: flex; gap: 6px; margin-top: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pf-pills::-webkit-scrollbar { display: none; }
.pf-pill { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 600 11.5px var(--font-body); white-space: nowrap; }
.pf-pill-ok { background: rgba(42, 125, 140, .12); color: var(--teal-dark); }
.pf-pill-new { background: var(--teal-soft); color: var(--teal-dark); }
.pf-pill-warn { background: rgba(139, 105, 20, .13); color: var(--pt-warn); }
.pf-pill-bad { background: rgba(196, 69, 54, .12); color: var(--pt-bad); }
.pf-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 9px; font-size: 13.5px; color: var(--muted); }
.pf-facts b { color: var(--ink); font-weight: 600; }
.pf-facts a, .pf-dl a { color: var(--teal-dark); text-decoration: none; font-weight: 600; }
.pf-facts a:hover, .pf-dl a:hover { text-decoration: underline; }
.pf-tiles { display: none; }
.pf-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pf-actions .btn { white-space: nowrap; }
.pf-actions a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.pf-nav { display: inline-flex; gap: 2px; margin-right: 4px; }
.pf-navbtn {
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--card);
  color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer;
}
.pf-navbtn:hover:not(:disabled) { border-color: var(--teal); }
.pf-navbtn:disabled { opacity: .35; cursor: default; }

.pf-banner {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 12px 9px 14px;
  border-radius: var(--radius-md); font-size: 13.5px; color: var(--ink);
}
.pf-banner span { flex: 1 1 auto; }
.pf-banner-bad { background: rgba(196, 69, 54, .07); border: 1px solid rgba(196, 69, 54, .25); }
.pf-banner-bad b { color: var(--pt-bad); }
.pf-banner-warn { background: rgba(139, 105, 20, .07); border: 1px solid rgba(139, 105, 20, .25); }
.pf-banner-warn b { color: var(--pt-warn); }
.pf-banner-info { background: var(--bg); border: 1px solid var(--border); }
.pf-tab-n { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600; }
.userdetail-tab.active .pf-tab-n { background: rgba(255, 255, 255, .2); color: inherit; }

/* Profile: who they are on the left, reference details on the right. */
.pf-body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 16px; align-items: start; padding: 16px 0 6px; }
.pf-col { display: grid; gap: 14px; min-width: 0; }
.pf-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); padding: 14px 16px; min-width: 0; }
.pf-rail .pf-card { padding: 12px 14px; }
.pf-card-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pf-card-h h3 { margin: 0; font: 600 15px var(--font-display); color: var(--ink); letter-spacing: 0; text-transform: none; }
.pf-sub { font-size: 12px; color: var(--muted); }
.pf-edit { margin-left: auto; padding: 0; background: none; border: 0; font: 600 12.5px var(--font-body); color: var(--teal); cursor: pointer; white-space: nowrap; }
.pf-edit:hover { text-decoration: underline; }
.pf-text { font-size: 14px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-know { border-left: 4px solid var(--gold-deep); background: color-mix(in srgb, var(--gold) 10%, var(--card)); }
.pf-know h3 { color: var(--pt-warn); }
.pf-know .pf-text { font-weight: 500; }
.pf-dl { display: grid; grid-template-columns: minmax(96px, 120px) minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 13.5px; }
.pf-dl dt { color: var(--muted); }
.pf-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.pf-muted { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.pf-bar { height: 6px; margin: 6px 0 3px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: var(--teal); }
.pf-bar.warn i { background: var(--gold-deep); }
.pf-missing { background: var(--bg); border-style: dashed; }
.pf-hint { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--ink); font: 500 12.5px var(--font-body); cursor: pointer; }
.pf-chip::before { content: '+ '; color: var(--teal); font-weight: 700; }
.pf-chip:hover { border-color: var(--teal); }
.pf-notes > summary { list-style: none; cursor: pointer; margin: 0; }
.pf-notes > summary::-webkit-details-marker { display: none; }
.pf-notes[open] > summary { margin-bottom: 8px; }
.pf-notes[open] .pf-show { visibility: hidden; }
.pf-notes-edit { margin-top: 8px; text-align: right; }
.pf-setup { border-left: 3px solid var(--teal); background: var(--bg); margin-top: 16px; }
.pf-setup-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* The care team sits in a narrower column now: groups stack two across. */
.pf-col .ct-groups { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

@media (max-width: 900px) {
  .pf-body { grid-template-columns: minmax(0, 1fr); }
  .pf-head { flex-wrap: wrap; }
  .pf-actions { width: 100%; }
  .pf-actions .pf-editbtn { flex: 1 1 auto; }
}
/* Phones: avatar beside the name, then the pills, four fact tiles and the buttons at full width. */
@media (max-width: 640px) {
  #clientDetailModal .modal-header:has(.pf-hero-host) { position: relative; }
  #clientDetailModal .modal-header:has(.pf-hero-host) > .modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
  .pf-name { padding-right: 48px; }
  /* v1136: a third column for previous / next, on the line of status pills (they had a line of their own under
     Call / Edit profile / ⋯). */
  .pf-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
  .pf-id { display: contents; }
  .pf-avatar.cf-avatar { width: 48px; height: 48px; font-size: 17px; }
  .pf-photo-badge { width: 20px; height: 20px; }
  .pf-name { font-size: 21px; grid-column: 2 / -1; }
  .pf-name small { display: block; margin: 2px 0 0; }
  .pf-tiles, .pf-actions { grid-column: 1 / -1; }
  .pf-pills { grid-column: 1 / 3; margin-top: 10px; }
  .pf-nav-m { display: inline-flex; gap: 6px; grid-column: 3; justify-self: end; margin-top: 10px; }
  .pf-nav-m .pf-navbtn { width: 36px; height: 30px; }
  .pf-actions .pf-nav { display: none; }
  .pf-facts { display: none; }
  .pf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .pf-tiles div { min-width: 0; padding: 8px 10px; border-radius: var(--radius-md); background: var(--bg); }
  .pf-tiles b { display: block; margin-bottom: 1px; font: 600 11px var(--font-body); color: var(--muted); }
  .pf-tiles span { display: block; font: 600 14px var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pf-tiles small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
  .pf-tiles em { font-style: normal; font-weight: 500; color: var(--muted); }
  .pf-actions { margin-top: 12px; }
  .pf-actions { flex-wrap: wrap; }
  .pf-actions .pf-editbtn { flex: 1 1 auto; }
  .pf-banner { flex-wrap: wrap; }
  .pf-banner span { flex: 1 1 160px; }
  .pf-card-h { flex-wrap: wrap; row-gap: 2px; }
  .pf-card-h .pf-sub { order: 3; flex-basis: 100%; }
  .pf-dl { grid-template-columns: minmax(88px, 104px) minmax(0, 1fr); }
}

/* v1134: an open menu placed on the screen by menu-fit.js (Tools, a row's ⋯, the file's ⋯). Fixed to the viewport so
   neither the page edge, the participant file's scroll box nor the phone's bottom bar can cut it off. */
.menu-fit {
  position: fixed !important;
  left: var(--mf-left) !important; top: var(--mf-top) !important; right: auto !important; bottom: auto !important;
  max-height: var(--mf-max) !important; max-width: calc(100vw - 16px) !important; width: max-content !important;
  overflow-y: auto !important; z-index: 1150 !important; margin: 0 !important;
}

/* v1136: previous / next moved up to the line of status pills on a phone (.pf-nav-m above), so the v1134 rule that
   gave them their own line under Call / Edit profile / ⋯ on the narrowest phones is gone. */

/* =================================================================================================================
   v1137 PARTICIPANT ALERTS (client-alerts.js) - tags on the list rows, the file header and the House Hub; the Alerts
   card on Profile; the add / change window. Serious = red, the rest gold.
   ================================================================================================================= */
.al-tag {
  display: inline-block; max-width: 100%; padding: 2px 9px; border-radius: 999px; font: 600 12px/1.5 var(--font-body);
  background: rgba(139, 105, 20, .12); color: var(--pt-warn, #7a5c10); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.al-tag-serious { background: rgba(196, 69, 54, .12); color: var(--pt-bad, #b03a2e); }
.al-tag-serious::before { content: '! '; font-weight: 800; }
.al-tag-sm { padding: 1px 7px; font-size: 11px; }
.cl-alerts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; min-width: 0; }
.pf-alerts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pf-alerts:empty { display: none; }
.pf-alerts .al-tag { font-size: 12.5px; padding: 3px 10px; white-space: normal; border-radius: 12px; }   /* the whole alert, never cut short */

.al-loading, .al-empty { font-size: 13px; color: var(--muted); }
.al-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.al-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: var(--radius-sm, 6px);
  background: var(--bg); border-left: 3px solid var(--gold-deep, #8b6914); min-width: 0;
}
.al-item-serious { border-left-color: var(--danger, #c44536); background: rgba(196, 69, 54, .05); }
.al-item-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.al-item-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pt-warn, #7a5c10); }
.al-item-serious .al-item-h { color: var(--pt-bad, #b03a2e); }
.al-serious { padding: 0 6px; border-radius: 999px; background: rgba(196, 69, 54, .12); font-size: 10px; letter-spacing: .02em; }
.al-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 1px; }
.al-detail { font-size: 13px; color: var(--ink); margin-top: 3px; white-space: pre-wrap; line-height: 1.45; }
.al-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.al-remove { color: var(--muted); }
.al-actions { margin-top: 10px; }

.al-modal { max-width: 560px; }
.al-modal-body { display: grid; gap: 14px; }
.al-kinds { border: 0; margin: 0; padding: 0; min-width: 0; }
.al-kinds legend { font: 600 13px var(--font-body); color: var(--ink); margin-bottom: 6px; padding: 0; }
.al-kind-list { display: flex; flex-wrap: wrap; gap: 6px; }
.al-kind-opt { position: relative; cursor: pointer; }
.al-kind-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.al-kind-opt span {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card);
  font: 500 13px var(--font-body); color: var(--ink);
}
.al-kind-opt input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.al-kind-opt input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.al-field { display: grid; gap: 5px; font: 600 13px var(--font-body); color: var(--ink); }
.al-field em { font-style: normal; font-weight: 400; color: var(--muted); }
.al-field input, .al-field textarea { width: 100%; font: 400 14px var(--font-body); }
.al-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.al-note { margin: 0; font-size: 12.5px; color: var(--muted); }

@media (max-width: 640px) {
  .pf-alerts { grid-column: 1 / -1; }
  .al-item { flex-wrap: wrap; }
  .al-item-actions { flex-direction: row; width: 100%; justify-content: flex-end; gap: 14px; }
}

/* v1138 - the participant file's At a glance card (Option A): Alerts, To do and Recent side by side under the tabs,
   on every tab; stacked on a phone. Rows are buttons when they open something. */
.pf-glance-host:empty { display: none; }
.pf-glance {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 2px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); overflow: hidden;
}
.pf-gl-col { min-width: 0; padding: 10px 12px 10px 14px; }
.pf-gl-col + .pf-gl-col { border-left: 1px solid var(--border); }
.pf-gl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px;
  font: 600 11px var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pf-gl-add { padding: 0; border: 0; background: none; font: 600 12px var(--font-body); color: color-mix(in srgb, var(--teal) 84%, var(--ink)); cursor: pointer; text-transform: none; letter-spacing: 0; }
.pf-gl-add:hover { text-decoration: underline; }
.pf-gl-row {
  display: flex; align-items: baseline; gap: 7px; width: 100%; padding: 3px 4px 3px 0; margin: 0; border: 0; border-radius: 4px;
  background: none; font: 400 13px/1.45 var(--font-body); color: var(--ink); text-align: left;
}
button.pf-gl-row { cursor: pointer; }
button.pf-gl-row:hover .pf-gl-txt { text-decoration: underline; text-decoration-color: var(--teal); }
button.pf-gl-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.pf-gl-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pf-gl-txt b { font-weight: 600; }
.pf-gl-txt small { display: block; font-size: 12px; color: var(--muted); }
.pf-gl-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transform: translateY(-1px); }
.pf-gl-dot-bad { background: var(--danger, #c44536); }
.pf-gl-dot-warn { background: var(--gold-deep, #8b6914); }
.pf-gl-go { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--teal) 84%, var(--ink)); }
/* v1141: + Add and the row arrows were 4.48:1 on the card's tint (theme-detail-states); mixing toward --ink darkens them
   on light themes and lightens them on dark ones. */
.pf-gl-more { font-size: 12px; color: var(--muted); }
.pf-gl-warn, .pf-gl-warn b { color: var(--pt-warn); }
.pf-gl-empty { padding: 3px 0; font-size: 13px; color: var(--muted); }
.cl-flag-more { background: none; color: var(--muted); padding-left: 2px; padding-right: 2px; cursor: default; }
@media (max-width: 760px) {
  .pf-glance { grid-template-columns: minmax(0, 1fr); }
  .pf-gl-col + .pf-gl-col { border-left: 0; border-top: 1px solid var(--border); }
  .pf-gl-row { padding-top: 5px; padding-bottom: 5px; }
}

/* v1138 - tidier on phones (Blake, 1 Nov: "tidier on phones."). The header's four detail tiles lose their grey boxes,
   the buttons are a size smaller, the "Participant file section" picker loses its framed card, and At a glance rows
   drop the right-hand "Open / Agreements / Update dates" words (the whole row is the button, with a ›) so the text
   gets the full width; an alert's what-to-do stays to one line (all of it is in the alert's window). */
@media (max-width: 640px) {
  .pf-tiles { gap: 8px 14px; margin-top: 10px; }
  .pf-tiles div { padding: 0; background: none; border-radius: 0; }
  .pf-tiles b { font-size: 11px; }
  .pf-tiles span { font-size: 13.5px; }
  .pf-actions { margin-top: 10px; gap: 6px; }
  .pf-actions .btn { min-height: 38px; padding: 6px 12px; }
  html[data-experience=enabled] #clientDetailModal .workspace-section-picker { margin: 10px 0 0; padding: 0; gap: 0; border: 0; background: none; }
  #clientDetailModal .workspace-section-picker > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #clientDetailModal .workspace-section-picker select { min-height: 42px; }
  .pf-glance { margin-top: 10px; }
  .pf-gl-col { padding: 8px 12px; }
  .pf-gl-go { display: none; }
  button.pf-gl-row::after { content: '›'; flex: 0 0 auto; align-self: center; margin-left: 4px; font-size: 18px; line-height: 1; color: var(--muted); }
  [data-pf-alerts] .pf-gl-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* v1140 - NDIS goals card (client-goals.js). A row per goal: the goal, short / long term and where it is up to, then
   how we support it. Achieved and stopped goals are quieter. */
.gl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gl-row { display: grid; gap: 1px; width: 100%; padding: 6px 8px; margin: 0; border: 0; border-left: 3px solid var(--teal); border-radius: 0;
  background: var(--bg); font: 400 13.5px/1.45 var(--font-body); color: var(--ink); text-align: left; }
button.gl-row { cursor: pointer; }
button.gl-row:hover .gl-goal { text-decoration: underline; text-decoration-color: var(--teal); }
button.gl-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.gl-row-done { border-left-color: var(--border); }
.gl-row-done .gl-goal { color: var(--muted); }
.gl-goal { font-weight: 600; overflow-wrap: anywhere; }
.gl-meta { font-size: 12px; color: var(--muted); }
.gl-status-working { color: var(--teal-dark); font-weight: 600; }
.gl-status-achieved { color: var(--pt-ok, #2e7d4f); font-weight: 600; }
.gl-how { font-size: 12.5px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.gl-empty { font-size: 13px; color: var(--muted); }
.gl-actions { margin-top: 10px; }

/* v1140 - the participant file's Health tab (clients.js renderHealthTab): Medication, Mood & sleep, Health contacts. */
.hl { display: grid; gap: 14px; padding: 16px 0 6px; }
.hl-sec { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); padding: 12px 16px; min-width: 0; }
.hl-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.hl-h h3 { margin: 0; font: 600 15px var(--font-display); color: var(--ink); }
.hl-h .btn { margin-left: auto; }
.hl-note { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.hl-empty { font-size: 13px; color: var(--muted); }
.hl-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
.hl-people li { display: grid; gap: 1px; padding: 6px 10px; border-left: 3px solid var(--teal-soft, var(--border)); background: var(--bg); font-size: 13px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.hl-people b { font-weight: 600; }
.hl-people a { color: var(--teal-dark); text-decoration: none; font-weight: 600; }
/* The Health tab is the office view of the chart: the House Hub's instructions to the worker giving medicines (check
   the pack, text the PRN manager first, then record it in the Hub) are left to the House Hub. Errors and other gold
   notes still show - only the PRN line and the note straight after it are hidden. */
[data-hl-meds] .hh-prn-call,
[data-hl-meds] .hh-prn-call + .hh-callout,
[data-hl-meds] .hh-med > p.hh-sub:first-of-type { display: none; }