/* =========================================================
   Patient Communication — only what this page does not share
   with the other product pages. Everything general (tokens,
   type, sections, the hero grid, the product surface, tags,
   fields, lists, the strip, the FAQ, the final CTA, motion)
   lives in ../products.css under pr-.

   THE PRODUCT BOUNDARY. Patient Communication manages the
   conversation; Patient 360 holds the context, Journeys moves
   the patient, Ticketing resolves, Orchestration does the work.
   So the unified inbox is the biggest surface on the page and
   every other product appears as a named step in a chain or a
   secondary card in the Patient OS row — never at inbox scale.
   ========================================================= */

/* ---------- channel marks, one shape for all seven ---------- */
.pc-ch { display: grid; place-items: center; flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(9 * var(--u)); border: 1px solid var(--rule); background: #fff; color: var(--muted); }
.pc-ch .i { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.pc-ch.wa { border-color: var(--lime-ico); background: var(--lime-tint); color: var(--lime-ink); }
.pc-ch.ig { border-color: #e6cfe0; background: #fbf0f7; color: #9b2f72; }
.pc-ch.fb { border-color: #cfdcf0; background: #eff4fb; color: #1b4f9c; }

/* ---------- hero: the desk, and the inbox it works out of ---------- */
.pc-hero__stage { position: relative; display: grid; }
.pc-scene { width: calc(500 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.pc-scene img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 42%; }
.pc-hero__ui { position: relative; width: calc(470 * var(--u)); margin: calc(-86 * var(--u)) 0 0 auto; }
.pc-hero__foot { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(13 * var(--u)) calc(18 * var(--u)); border-top: 1px solid var(--rule); background: #fcfcfb; font-size: calc(14 * var(--u)); color: var(--muted); }
.pc-hero__foot b { font-weight: 600; color: var(--ink); }
.pc-hero__foot .i { color: var(--lime-ink); }

.pc-inbox > li { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(13 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); }
.pc-inbox > li:last-of-type { border-bottom: 0; }
.pc-inbox div { min-width: 0; flex: 1; }
.pc-inbox b { display: block; font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pc-inbox div > span { display: block; margin-top: calc(2 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-inbox em { font-style: normal; font-size: calc(12 * var(--u)); font-weight: 600; color: var(--faint); white-space: nowrap; }

/* ---------- the channel grid ---------- */
.pc-channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(20 * var(--u)); }
.pc-channels > li { display: grid; align-content: start; gap: calc(11 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; transition: border-color .2s var(--ease); }
.pc-channels > li:hover { border-color: var(--lime-ico); }
.pc-channels b { font-size: calc(18 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.pc-channels > li > span:last-child { font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }

/* ---------- one patient hopping channels ---------- */
.pc-hops { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.pc-hops::before { content: ""; position: absolute; top: calc(7 * var(--u)); left: calc(8 * var(--u)); right: calc(100% / 4 - 8 * var(--u)); height: 2px; background: var(--divider); }
.pc-hops::after { content: ""; position: absolute; top: calc(7 * var(--u)); left: calc(8 * var(--u)); width: 0; height: 2px; background: var(--lime-ico); transition: width 1.7s var(--ease); }
.pc-hops.is-in::after { width: calc(100% - 100% / 4); }
.pc-hops > li { display: grid; justify-items: start; gap: calc(12 * var(--u)); padding-right: calc(22 * var(--u)); opacity: .4; transition: opacity .5s var(--ease); }
.pc-hops.is-in > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.pc-hops > li > i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .5s var(--ease), background .5s var(--ease); }
.pc-hops.is-in > li > i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.pc-hops b { font-size: calc(16.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pc-hops > li > span:last-child { font-size: calc(14 * var(--u)); color: var(--muted); }
.pc-ctx { margin-top: calc(28 * var(--u)); max-width: calc(560 * var(--u)); }

/* =========================================================
   THE UNIFIED INBOX — the page's largest surface, and the one
   that demonstrates itself (guidelines §9.6)
   ========================================================= */
.pc-app__grid { display: grid; grid-template-columns: calc(200 * var(--u)) calc(300 * var(--u)) minmax(0, 1fr); }
.pc-side { display: grid; align-content: start; gap: calc(2 * var(--u)); padding: calc(16 * var(--u)); border-right: 1px solid var(--rule); background: #fcfcfb; }
.pc-side__item { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(11 * var(--u)); border-radius: var(--r-sm); font-size: calc(14 * var(--u)); font-weight: 500; color: var(--muted); }
.pc-side__item .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--faint); }
.pc-side__item em { margin-left: auto; font-style: normal; font-size: calc(12 * var(--u)); font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.pc-side__item.is-on { background: var(--lime); color: var(--ink); font-weight: 600; }
.pc-side__item.is-on em { color: var(--lime-ink); }
.pc-side__sep { margin: calc(14 * var(--u)) 0 calc(4 * var(--u)) calc(11 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

.pc-list { display: grid; align-content: start; border-right: 1px solid var(--rule); }
.pc-conv { position: relative; overflow: hidden; display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; padding: calc(15 * var(--u)) calc(16 * var(--u)); border: 0; border-bottom: 1px solid var(--rule); background: none; font: inherit; text-align: left; cursor: pointer; transition: background .2s var(--ease); }
.pc-conv:hover { background: var(--grey); }
.pc-conv .t { min-width: 0; flex: 1; }
.pc-conv b { display: block; font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pc-conv .t > span { display: block; margin-top: calc(2 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-conv.is-on, .pc-conv[aria-selected="true"] { background: var(--lime-soft); }
.pc-conv[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(3 * var(--u)); background: var(--lime-ico); }
/* the progress the auto-play owes the reader (§9.6.4) */
.pc-conv .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--lime-ink); opacity: .45; }

.pc-thread { padding: calc(20 * var(--u)); min-width: 0; }
.pc-panel[hidden] { display: none; }
.pc-who { display: flex; align-items: center; gap: calc(12 * var(--u)); padding-bottom: calc(16 * var(--u)); border-bottom: 1px solid var(--rule); }
.pc-who > div { flex: 1; min-width: 0; }
.pc-who > div > b { display: block; font-size: calc(19 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.pc-who > div > span { display: block; margin-top: calc(2 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }
.pc-ctxrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); }
.pc-ctxrow > div { display: grid; gap: calc(4 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-sm); }
.pc-ctxrow dt { font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.pc-ctxrow dd { font-size: calc(15 * var(--u)); font-weight: 600; }
.pc-ctxrow dd.warn { color: var(--amber-ink); }

.pc-msg { position: relative; padding: calc(15 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: var(--grey); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); font-weight: 500; }
.pc-panel .pc-msg { margin-top: calc(18 * var(--u)); }
.pc-msg time { display: block; margin-top: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }

.pc-actions { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); margin-top: calc(20 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--rule); }
.pc-act { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--muted); }
.pc-act .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.pc-act.on { border-color: var(--lime-ico); background: var(--lime); color: var(--ink); }
.pc-360 { margin-top: calc(16 * var(--u)); }

/* ---------- AI reply, played in four beats ---------- */
.pc-ai { max-width: calc(820 * var(--u)); }
.pc-ai .pr-ui__body > * + * { margin-top: calc(14 * var(--u)); }
.pc-think { display: inline-flex; gap: calc(5 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.pc-think i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--divider); }
.pc-sugg { padding: calc(16 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--lime-ico); border-radius: var(--r); background: var(--lime-soft); font-size: calc(16.5 * var(--u)); line-height: calc(26 * var(--u)); }
.pc-sugg .pr-k { display: flex; margin-bottom: calc(9 * var(--u)); color: var(--lime-ink); }
.pc-sugg__acts { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); }

/* ---------- routing / journey / workflow chains ---------- */
.pc-chain { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.pc-chain::before { content: ""; position: absolute; top: calc(7 * var(--u)); left: calc(8 * var(--u)); right: calc(100% / 5 - 8 * var(--u)); height: 2px; background: var(--divider); }
.pc-chain::after { content: ""; position: absolute; top: calc(7 * var(--u)); left: calc(8 * var(--u)); width: 0; height: 2px; background: var(--lime-ico); transition: width 1.6s var(--ease); }
.pc-chain.is-in::after { width: calc(100% - 100% / 5); }
.pc-chain.six::before { right: calc(100% / 6 - 8 * var(--u)); }
.pc-chain.six.is-in::after { width: calc(100% - 100% / 6); }
.pc-chain:has(> li:nth-child(4):last-child)::before { right: calc(100% / 4 - 8 * var(--u)); }
.pc-chain:has(> li:nth-child(4):last-child).is-in::after { width: calc(100% - 100% / 4); }
.pc-chain > li { display: grid; justify-items: start; gap: calc(14 * var(--u)); padding-right: calc(22 * var(--u)); opacity: .4; transition: opacity .5s var(--ease); }
.pc-chain.is-in > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.pc-chain i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .5s var(--ease), background .5s var(--ease); }
.pc-chain.is-in .on i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.pc-chain b { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pc-chain > li > span { font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: var(--muted); }

.pc-caps { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); margin-top: calc(34 * var(--u)); }
.pc-caps.tight { margin-top: calc(18 * var(--u)); }
.pc-caps > li { padding: calc(8 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--muted); }

/* ---------- internal collaboration ---------- */
.pc-collab { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); column-gap: calc(56 * var(--u)); align-items: center; }
.pc-person img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, .8) 84%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, .8) 84%, rgba(0, 0, 0, 0) 100%);
}
.pc-hand { margin-top: calc(16 * var(--u)); border-top: 1px solid var(--rule); }
.pc-hand > li { display: grid; grid-template-columns: calc(120 * var(--u)) minmax(0, 1fr); align-items: baseline; column-gap: calc(18 * var(--u)); padding: calc(13 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.pc-hand .who { font-size: calc(13 * var(--u)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pc-hand .what { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(8 * var(--u)); font-size: calc(15.5 * var(--u)); }
.pc-hand .what .i { align-self: center; color: var(--faint); }
.pc-hand em { font-style: normal; font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-ink); }
.pc-hand .note { background: var(--amber); }
.pc-hand .note .who, .pc-hand .note .what .i { color: var(--amber-ink); }
.pc-hand .on .what { color: var(--lime-ink); font-weight: 600; }
.pc-hand .on .what .i { color: var(--lime-ink); }

/* ---------- Patient OS row ---------- */
.pc-os { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(12 * var(--u)); }
.pc-os > li > * { display: grid; align-content: start; gap: calc(8 * var(--u)); height: 100%; padding: calc(22 * var(--u)) calc(20 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); }
.pc-os a:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.pc-os .i { color: var(--faint); }
.pc-os b { font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pc-os span span, .pc-os a span { font-size: calc(14.5 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }
.pc-os .is-on > span { border-color: var(--lime-ico); background: var(--lime); }
.pc-os .is-on .i, .pc-os .is-on span span { color: var(--lime-ink); }

/* =========================================================
   SCREEN MOTION (§9.6)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* the inbox rows arrive in the hero rather than appearing whole */
  .pr-js .pc-hero__ui .pc-inbox > li { opacity: 0; transform: translateY(calc(6 * var(--u))); }
  .pr-js .pc-hero__stage.is-in .pc-hero__ui .pc-inbox > li { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .pr-js .pc-hero__stage.is-in .pc-inbox > li:nth-child(1) { transition-delay: .32s; }
  .pr-js .pc-hero__stage.is-in .pc-inbox > li:nth-child(2) { transition-delay: .42s; }
  .pr-js .pc-hero__stage.is-in .pc-inbox > li:nth-child(3) { transition-delay: .52s; }
  .pr-js .pc-hero__stage.is-in .pc-inbox > li:nth-child(4) { transition-delay: .62s; }

  /* the inbox walks its own conversations */
  .pc-panel:not([hidden]) { animation: prSettle .45s var(--ease); }
  .pc-app.is-cycling .pc-conv[aria-selected="true"] .bar { animation: prFill 4600ms linear forwards; }

  /* the AI reply plays in four beats, once, when it is reached */
  .pr-js .pc-ai [data-s] { opacity: 0; transform: translateY(calc(6 * var(--u))); }
  .pr-js .pc-ai.is-played [data-s] { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .pr-js .pc-ai.is-played [data-s="1"] { transition-delay: .55s; }
  .pr-js .pc-ai.is-played [data-s="2"] { transition-delay: 1.5s; }
  .pr-js .pc-ai.is-played [data-s="3"] { transition-delay: 1.85s; }
  /* the thinking dots stand down once the suggestion has landed */
  .pr-js .pc-ai.is-played .pc-think { animation: pcThink 1.1s steps(1) .55s 1 both, pcGone .3s linear 1.5s both; }
  @keyframes pcThink { 0%, 100% { opacity: 1; } }
  @keyframes pcGone { to { opacity: 0; height: 0; margin: 0; padding: 0; border-width: 0; overflow: hidden; } }
}

/* =========================================================
   Below 1180 --u is 1px. Stack, don't shrink (§10).
   ========================================================= */
@media (max-width: 1179px) {
  .pc-hero__stage { margin-top: 32px; }
  .pc-scene { width: 100%; }
  .pc-hero__ui { width: 100%; margin: -40px 0 0; }
  .pc-inbox div > span { white-space: normal; }

  .pc-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pc-channels > li { padding: 18px; }
  .pc-channels b { font-size: 16px; }
  .pc-channels > li > span:last-child { font-size: 14px; line-height: 21px; }

  /* every rail turns vertical */
  .pc-hops, .pc-chain { grid-auto-flow: row; grid-auto-columns: auto; padding-left: 8px; }
  .pc-hops::before, .pc-chain::before { top: 9px; bottom: 9px; left: 8px; right: auto; width: 2px; height: auto; }
  .pc-hops::after, .pc-chain::after { top: 9px; left: 8px; width: 2px; height: 0; transition: height 1.7s var(--ease); }
  .pc-hops.is-in::after { width: 2px; height: calc(100% - 100% / 4); }
  .pc-chain.is-in::after { width: 2px; height: calc(100% - 100% / 5); }
  .pc-chain.six.is-in::after { height: calc(100% - 100% / 6); }
  .pc-chain:has(> li:nth-child(4):last-child).is-in::after { height: calc(100% - 100% / 4); }
  .pc-hops > li, .pc-chain > li { grid-template-columns: 16px minmax(0, 1fr); grid-auto-flow: column; align-items: center; gap: 16px; padding: 12px 0; }
  .pc-hops > li > .pc-ch { grid-column: 2; }
  .pc-hops > li > b, .pc-hops > li > span, .pc-chain > li > b, .pc-chain > li > span { grid-column: 2; }
  .pc-ctx { max-width: none; }

  /* the inbox: filters on top, list, then the thread */
  .pc-app__grid { grid-template-columns: minmax(0, 1fr); }
  .pc-side { grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: 12px; scrollbar-width: none; }
  .pc-side::-webkit-scrollbar { display: none; }
  .pc-side__sep { display: none; }
  .pc-list { border-right: 0; border-bottom: 1px solid var(--rule); }
  .pc-thread { padding: 18px; }
  .pc-ctxrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pc-who { flex-wrap: wrap; }

  .pc-ai { max-width: none; }
  .pc-collab { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .pc-person { width: min(70%, 260px); justify-self: center; }
  .pc-hand > li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }

  .pc-os { grid-auto-columns: 74%; overflow-x: auto; margin: 32px -22px 0; padding: 0 22px 6px; scrollbar-width: none; }
  .pc-os::-webkit-scrollbar { display: none; }
}