/* =========================================================
   Patient Ticketing — a patient asks, and somebody owns it.

   Prefix pt-, layered on pages/products/products.css (pr-), which
   carries the type scale, the sections, the product surface (.pr-ui),
   the patient-facing screen (.pr-fone), tags, fields, the FAQ, the
   final CTA and the reveal contract. Nothing here repeats any of that.

   What this page owns: the ticket. It is drawn six times and it is the
   same object every time — an id, a subject, who it belongs to, and
   what state it is in. The four other Patient OS pages draw screens
   the PATIENT sees; this one mostly draws the screen the HOSPITAL
   sees, which is the honest division of the product.

   COLOUR CARRIES NOTHING ALONE (§8.4). Every state on this page is a
   word first: "High priority", "SLA at risk", "Escalated", "Resolved".
   The amber and the lime are a second signal, never the only one — a
   ticketing page is exactly where that matters, because the states
   are the content.
   ========================================================= */

/* =========================================================
   THE TICKET
   ========================================================= */
.pt-ticket { width: 100%; max-width: calc(440 * var(--u)); }
.pt-ticket__t { font-family: var(--font-head); font-size: calc(22 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pt-ticket .pr-fields { margin-top: calc(16 * var(--u)); padding-top: calc(15 * var(--u)); border-top: 1px solid var(--rule); }
.pt-ticket .pt-flow { margin-top: calc(20 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--rule); }
.pr-ui__top .pt-id { font-family: var(--font-head); font-size: calc(13 * var(--u)); font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; text-transform: none; }

/* a patient's own words. display: block and width: fit-content, never an
   inline span: an inline background paints one box per line, so wrapped
   text comes out as offset rectangles spilling their container (§14.1) */
.pt-msg { display: block; width: fit-content; max-width: calc(400 * var(--u)); padding: calc(14 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); border-bottom-left-radius: calc(4 * var(--u)); background: var(--grey); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); font-weight: 500; }
.pt-msg .pr-k { display: flex; margin-bottom: calc(8 * var(--u)); }
.pt-msg.sm { max-width: none; padding: calc(11 * var(--u)) calc(15 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); }
.pt-says { display: grid; gap: calc(12 * var(--u)); }

/* the vertical connector between two links of the story */
.pt-wire { display: grid; justify-items: center; height: calc(36 * var(--u)); }
.pt-wire > i { display: block; width: 2px; height: 100%; background: var(--divider); }
.pt-wire > i::after { content: ""; display: block; width: 2px; height: 0; background: var(--lime-ico); transition: height .9s var(--ease) var(--wd, 0ms); }
.is-in .pt-wire > i::after { height: 100%; }

/* Open -> Assigned -> In Progress -> Resolved */
.pt-flow { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.pt-flow::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); }
.pt-flow::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); }
.pt-flow.is-in::after, .is-in .pt-flow::after { width: calc(100% - 100% / 4); }
.pt-flow > li { display: grid; justify-items: start; gap: calc(11 * var(--u)); padding-right: calc(16 * var(--u)); opacity: .42; transition: opacity .5s var(--ease); }
.pt-flow.is-in > li, .is-in .pt-flow > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.pt-flow > 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); }
.pt-flow.is-in > li > i, .is-in .pt-flow > li > i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.pt-flow b { font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: -.01em; }

/* =========================================================
   01 HERO
   ========================================================= */
.pt-hero__stage { position: relative; display: grid; justify-items: end; gap: 0; min-height: calc(560 * var(--u)); }
.pt-person { position: absolute; left: calc(-44 * var(--u)); bottom: calc(-58 * var(--u)); width: calc(340 * var(--u)); z-index: 0; }
.pt-person img {
  width: 100%; height: auto; border-radius: var(--r-card);
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, rgba(0, 0, 0, .78) 80%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom, #000 56%, rgba(0, 0, 0, .78) 80%, rgba(0, 0, 0, 0) 100%);
}
.pt-hero__said, .pt-hero__card, .pt-hero__rail, .pt-hero__stage .pt-wire { position: relative; z-index: 1; width: 100%; max-width: calc(440 * var(--u)); }
.pt-hero__rail { padding: calc(20 * var(--u)) calc(22 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow); }
.pt-hero__rail > .pr-k { margin-bottom: calc(18 * var(--u)); }
.pt-hero__said { justify-self: end; }

/* =========================================================
   02 CAPTURE — one story: words, then a ticket, then an owner
   ========================================================= */
.pt-route { display: grid; justify-items: center; }
.pt-route .pt-msg { max-width: calc(520 * var(--u)); }
.pt-route .pt-ticket { max-width: calc(480 * var(--u)); }
.pt-route > .pr-k { margin: calc(8 * var(--u)) 0 calc(18 * var(--u)); }
.pt-depts { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); max-width: calc(880 * var(--u)); }
.pt-depts > li { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(15 * var(--u)); font-weight: 600; }
.pt-depts .i { color: var(--faint); }
/* the department this ticket went to is filled AND ticked */
.pt-depts .on { border-color: var(--lime-ico); background: var(--lime); }
.pt-depts .on .i { color: var(--lime-ink); }

/* =========================================================
   03 IN-PATIENT — two small rooms' worth of requests
   ========================================================= */
.pt-ward { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); column-gap: calc(64 * var(--u)); align-items: start; }
.pt-fones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(24 * var(--u)); align-items: start; }

/* a message inside a phone. block + fit-content, same reason as .pt-msg */
.pt-bub { display: block; width: fit-content; max-width: 88%; padding: calc(11 * var(--u)) calc(14 * var(--u)); border-radius: var(--r); font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); }
.pt-bub.out { margin-left: auto; border-bottom-right-radius: calc(4 * var(--u)); background: var(--lime-soft); }
.pt-bub.in { margin-right: auto; border: 1px solid var(--rule); border-bottom-left-radius: calc(4 * var(--u)); background: #fff; }

.pt-card { display: grid; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: var(--grey); }
.pt-card__top { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); }
.pt-card__top > b { font-size: calc(13 * var(--u)); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.pt-card__t { font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pt-card .pr-fields dt, .pt-card .pr-fields dd { font-size: calc(13 * var(--u)); }
.pt-note { display: flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }
.pt-note .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--lime-ink); }

/* =========================================================
   04 TRACK & RESOLVE — the two views, side by side
   ========================================================= */
.pt-views { display: grid; grid-template-columns: minmax(0, 1.25fr) auto; column-gap: calc(56 * var(--u)); align-items: start; }
.pt-view__k { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-bottom: calc(16 * var(--u)); }

.pt-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.pt-stage > li { display: grid; gap: calc(7 * var(--u)); padding: calc(14 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.pt-stage b { font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: -.01em; }
.pt-stage .done { border-color: var(--lime-ico); background: var(--lime-soft); }
.pt-stage .done b, .pt-stage .done .pr-k { color: var(--lime-ink); }
.pt-stage .now { border-color: var(--lime-ico); background: var(--lime); }
.pt-stage .next { border-style: dashed; }
.pt-stage .next b, .pt-stage .next .pr-k { color: var(--faint); }

.pt-log { margin-top: calc(22 * var(--u)); border-top: 1px solid var(--rule); }
.pt-log > li { display: grid; grid-template-columns: calc(66 * var(--u)) minmax(0, 1fr); align-items: baseline; column-gap: calc(18 * var(--u)); padding: calc(12 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.pt-log > li:last-child { border-bottom: 0; }
.pt-log time { font-size: calc(13.5 * var(--u)); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.pt-log span { font-size: calc(15.5 * var(--u)); font-weight: 500; }

/* the patient's own view of the same ticket — shape first, colour second */
.pt-pstat { display: grid; gap: calc(3 * var(--u)); }
.pt-pstat > li { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(11 * var(--u)) 0; border-bottom: 1px solid var(--rule); font-size: calc(15 * var(--u)); font-weight: 600; }
.pt-pstat > li:last-child { border-bottom: 0; }
.pt-pstat i { display: grid; place-items: center; flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; }
.pt-pstat .done i { border-color: var(--lime-ico); background: var(--lime); }
.pt-pstat .done .i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); stroke-width: 2.6; color: var(--lime-ink); }
.pt-pstat .now i { border-color: var(--lime-ico); background: var(--lime); box-shadow: inset 0 0 0 calc(4 * var(--u)) #fff; }
.pt-pstat .todo { color: var(--faint); }
.pt-pstat em { margin-left: auto; font-style: normal; font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--muted); }

/* =========================================================
   05 SLA & ESCALATION
   ========================================================= */
.pt-sla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: calc(56 * var(--u)); align-items: start; }

.pt-ladder { position: relative; display: grid; padding-left: calc(34 * var(--u)); }
.pt-ladder::before { content: ""; position: absolute; left: calc(7 * var(--u)); top: calc(12 * var(--u)); bottom: calc(40 * var(--u)); width: 2px; background: var(--divider); }
.pt-ladder::after { content: ""; position: absolute; left: calc(7 * var(--u)); top: calc(12 * var(--u)); height: 0; width: 2px; background: var(--lime-ico); transition: height 1.7s var(--ease); }
.pt-ladder.is-in::after { height: calc(100% - 52 * var(--u)); }
.pt-ladder > li { position: relative; padding-bottom: calc(20 * var(--u)); }
.pt-ladder > li:last-child { padding-bottom: 0; }
.pt-ladder > li::before { content: ""; position: absolute; left: calc(-34 * var(--u)); top: calc(6 * var(--u)); 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); }
.pt-ladder.is-in > li::before { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.pt-rung { display: grid; gap: calc(7 * var(--u)); padding: calc(17 * var(--u)) calc(19 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.pt-rung b { font-size: calc(18 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pt-rung span { font-size: calc(14.5 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }
.pt-rung.risk { border-color: var(--amber-ink); background: var(--amber); }
.pt-rung.risk b, .pt-rung.risk .pr-k, .pt-rung.risk span { color: var(--amber-ink); }
.pt-rung__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); }

.pt-kpis { display: grid; gap: calc(14 * var(--u)); }
.pt-kpi { display: grid; gap: calc(4 * var(--u)); padding: calc(22 * var(--u)) calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.pt-kpi b { font-family: var(--font-head); font-size: calc(40 * var(--u)); line-height: calc(46 * var(--u)); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pt-kpi > span { font-size: calc(15 * var(--u)); font-weight: 600; }
.pt-kpi small { font-size: calc(13.5 * var(--u)); font-weight: 500; color: var(--muted); }
.pt-kpi.risk { border-color: var(--amber-ink); background: var(--amber); }
.pt-kpi.risk b, .pt-kpi.risk > span { color: var(--amber-ink); }
.pt-kpi.good { border-color: var(--lime-ico); background: var(--lime-soft); }
.pt-kpi.good b, .pt-kpi.good > span { color: var(--lime-ink); }

/* =========================================================
   06 LEADERSHIP
   ========================================================= */
.pt-lead { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); column-gap: calc(40 * var(--u)); align-items: start; }

.pt-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.pt-stats > li { display: grid; gap: calc(5 * var(--u)); padding: calc(16 * var(--u)) calc(14 * var(--u)); }
.pt-stats > li + li { border-left: 1px solid var(--rule); }
.pt-stats b { font-family: var(--font-head); font-size: calc(28 * var(--u)); line-height: calc(33 * var(--u)); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pt-stats span { font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pt-stats .risk { background: var(--amber); }
.pt-stats .risk b, .pt-stats .risk span { color: var(--amber-ink); }

.pt-bars { margin-top: calc(22 * var(--u)); display: grid; gap: calc(14 * var(--u)); }
.pt-bars > li { display: grid; grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr) calc(52 * var(--u)); align-items: center; column-gap: calc(16 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; }
.pt-bars i { display: block; height: calc(8 * var(--u)); border-radius: 999px; background: var(--grey); overflow: hidden; }
.pt-bars i::after { content: ""; display: block; width: var(--w); height: 100%; border-radius: 999px; background: var(--lime); transform: scaleX(.04); transform-origin: left; transition: transform 1.1s var(--ease); }
.is-in .pt-bars i::after { transform: none; transition-delay: calc(var(--i) * 150ms); }
.pt-bars em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }

.pt-report { display: grid; align-content: start; gap: calc(16 * var(--u)); padding: calc(26 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow); }
.pt-report__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(10 * var(--u)); padding-bottom: calc(15 * var(--u)); border-bottom: 1px solid var(--rule); }
.pt-report__head b { font-family: var(--font-head); font-size: calc(21 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pt-report__head time { font-size: calc(13.5 * var(--u)); color: var(--muted); }
.pt-tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)) calc(20 * var(--u)); }
.pt-tally > li { display: flex; align-items: baseline; gap: calc(9 * var(--u)); font-size: calc(14.5 * var(--u)); color: var(--muted); }
.pt-tally b { font-size: calc(19 * var(--u)); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pt-attn { display: grid; gap: calc(9 * var(--u)); }
.pt-attn > li { display: grid; gap: calc(3 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: var(--r); background: var(--amber); }
.pt-attn b { font-size: calc(14.5 * var(--u)); font-weight: 700; color: var(--amber-ink); }
.pt-attn span { font-size: calc(13.5 * var(--u)); color: var(--amber-ink); }

.pt-drivers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 * var(--u)); margin-top: calc(40 * var(--u)); }
.pt-drivers > li { display: grid; gap: calc(5 * var(--u)); padding: calc(20 * var(--u)) calc(20 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.pt-drivers b { font-family: var(--font-head); font-size: calc(26 * var(--u)); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pt-drivers span { font-size: calc(14.5 * var(--u)); font-weight: 600; }

/* =========================================================
   07 IMPROVEMENT — a chain, not a second dashboard
   ========================================================= */
.pt-chain { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.pt-chain::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); }
.pt-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); }
.pt-chain.is-in::after { width: calc(100% - 100% / 4); }
.pt-chain > li { display: grid; justify-items: start; gap: calc(13 * var(--u)); padding-right: calc(24 * var(--u)); opacity: .42; transition: opacity .5s var(--ease); }
.pt-chain.is-in > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.pt-chain > 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); }
.pt-chain.is-in > li > i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.pt-chain b { display: block; font-family: var(--font-head); font-size: calc(30 * var(--u)); line-height: calc(36 * var(--u)); font-weight: 500; letter-spacing: -.032em; font-variant-numeric: tabular-nums; }
.pt-chain span { display: block; margin-top: calc(5 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }

/* =========================================================
   08 THE PATIENT STORY
   ========================================================= */
.pt-story { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(64 * var(--u)); align-items: start; }
.pt-face { width: calc(400 * var(--u)); }
.pt-face img { width: 100%; height: auto; border-radius: var(--r-card); }
.pt-face figcaption { display: grid; gap: calc(9 * var(--u)); margin-top: calc(20 * var(--u)); }
.pt-face b { font-family: var(--font-head); font-size: calc(26 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pt-face blockquote { font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); color: var(--prose); }

.pt-when { position: relative; display: grid; padding-left: calc(34 * var(--u)); }
.pt-when::before { content: ""; position: absolute; left: calc(7 * var(--u)); top: calc(9 * var(--u)); bottom: calc(30 * var(--u)); width: 2px; background: var(--divider); }
.pt-when::after { content: ""; position: absolute; left: calc(7 * var(--u)); top: calc(9 * var(--u)); height: 0; width: 2px; background: var(--lime-ico); transition: height 1.9s var(--ease); }
.pt-when.is-in::after { height: calc(100% - 39 * var(--u)); }
.pt-when > li { position: relative; padding-bottom: calc(24 * var(--u)); opacity: .45; transition: opacity .5s var(--ease); }
.pt-when.is-in > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.pt-when > li:last-child { padding-bottom: 0; }
.pt-when > li::before { content: ""; position: absolute; left: calc(-34 * var(--u)); top: calc(3 * var(--u)); 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); }
.pt-when.is-in > li::before { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.pt-when time { display: block; font-size: calc(13.5 * var(--u)); font-weight: 700; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.pt-when b { display: block; margin-top: calc(4 * var(--u)); font-family: var(--font-head); font-size: calc(21 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.pt-when p { margin-top: calc(4 * var(--u)); max-width: calc(470 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }
.pt-when .end { display: inline-flex; align-items: center; gap: calc(9 * var(--u)); margin-top: calc(6 * var(--u)); padding: calc(9 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: var(--lime); font-size: calc(14.5 * var(--u)); font-weight: 700; }

/* =========================================================
   09 THE LIFECYCLE — nine stops, one line
   ========================================================= */
.pt-life { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.pt-life::before { content: ""; position: absolute; top: calc(6 * var(--u)); left: calc(6 * var(--u)); right: calc(100% / 9 - 6 * var(--u)); height: 2px; background: var(--divider); }
.pt-life::after { content: ""; position: absolute; top: calc(6 * var(--u)); left: calc(6 * var(--u)); width: 0; height: 2px; background: var(--lime-ico); transition: width 1.9s var(--ease); }
.pt-life.is-in::after { width: calc(100% - 100% / 9); }
.pt-life > li { display: grid; justify-items: start; gap: calc(12 * var(--u)); padding-right: calc(12 * var(--u)); }
.pt-life > li > i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .5s var(--ease), background .5s var(--ease); }
.pt-life.is-in > li > i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 150ms); }
.pt-life b { font-size: calc(14.5 * var(--u)); font-weight: 600; letter-spacing: -.01em; }

/* =========================================================
   10 PATIENT OS
   ========================================================= */
.pt-os { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.pt-os > li > * { display: grid; align-content: start; gap: calc(7 * 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); }
.pt-os a:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.pt-os b { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
/* > li > * > span:last-child, not a bare span: the active card's panel is
   itself a last-child span and would take the description styling (§14.1) */
.pt-os > li > * > span:last-child { font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: var(--muted); }
.pt-os > li.is-on > span { border-color: var(--lime-ico); background: var(--lime); }
.pt-os > li.is-on > span > span:last-child { color: var(--text); }
.pt-os .pr-k { color: var(--lime-ink); }

/* =========================================================
   PREV / NEXT
   ========================================================= */
.pt-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); max-width: calc(880 * var(--u)); margin: calc(60 * var(--u)) auto 0; text-align: left; }
.pt-nav a { display: grid; align-content: start; gap: calc(6 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); }
.pt-nav a:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.pt-nav b { font-family: var(--font-head); font-size: calc(23 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.pt-nav > a > span:last-child { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }
.pt-nav .pt-nav__next { text-align: right; justify-items: end; }
.pt-back { margin-top: calc(26 * var(--u)); }

/* =========================================================
   MOTION (§9) — the resting states the script animates from
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* the hero: the patient's words, then the ticket they became, then
     the states that ticket will move through (§9.6) */
  .pr-js .pt-hero__stage [data-s] { opacity: 0; transform: translateY(calc(8 * var(--u))); }
  .pr-js .pt-hero__stage.is-in [data-s] { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .pr-js .pt-hero__stage.is-in [data-s="1"] { transition-delay: .7s; }
  .pr-js .pt-hero__stage.is-in [data-s="2"] { transition-delay: 1.5s; }

  /* the two ward requests arrive in order */
  .pr-js .pt-fones [data-s] { opacity: 0; transform: translateY(calc(6 * var(--u))); }
  .pr-js .pt-fones.is-in [data-s] { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .pr-js .pt-fones.is-in [data-s="1"] { transition-delay: .45s; }
  .pr-js .pt-fones.is-in [data-s="2"] { transition-delay: .95s; }
  .pr-js .pt-fones.is-in [data-s="3"] { transition-delay: 1.4s; }
}

/* =========================================================
   Below 1180 --u is 1px. Stack, don't shrink (§10).
   ========================================================= */
@media (max-width: 1179px) {
  .pt-ticket, .pt-route .pt-ticket { max-width: none; }
  .pt-msg, .pt-route .pt-msg { max-width: none; font-size: 16px; line-height: 24px; }
  .pt-msg.sm { font-size: 15px; line-height: 23px; }
  .pt-wire { height: 26px; }

  .pt-hero__stage { min-height: 0; justify-items: stretch; margin-top: 32px; }
  .pt-person { position: static; width: min(62%, 240px); margin-bottom: 18px; }
  .pt-hero__said, .pt-hero__card, .pt-hero__rail, .pt-hero__stage .pt-wire { max-width: none; }
  .pt-hero__rail { padding: 18px; }

  .pt-flow, .pt-chain, .pt-life { grid-auto-flow: row; grid-auto-columns: auto; padding-left: 26px; }
  .pt-flow::before, .pt-flow::after, .pt-chain::before, .pt-chain::after, .pt-life::before, .pt-life::after { display: none; }
  .pt-flow > li, .pt-chain > li, .pt-life > li { position: relative; padding: 0 0 16px; }
  .pt-flow > li:last-child, .pt-chain > li:last-child, .pt-life > li:last-child { padding-bottom: 0; }
  .pt-flow > li > i, .pt-chain > li > i, .pt-life > li > i { position: absolute; left: -26px; top: 3px; }
  .pt-chain b { font-size: 24px; line-height: 30px; }

  .pt-ward, .pt-views, .pt-sla, .pt-lead, .pt-story { grid-template-columns: minmax(0, 1fr); }
  .pt-ward, .pt-views, .pt-sla, .pt-lead { row-gap: 32px; }
  .pt-story { row-gap: 32px; }
  .pt-fones { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .pt-stage { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pt-log > li { grid-template-columns: 58px minmax(0, 1fr); column-gap: 14px; }
  .pt-depts { justify-content: flex-start; }

  .pt-kpi b { font-size: 32px; line-height: 38px; }
  .pt-stats { grid-template-columns: minmax(0, 1fr); }
  .pt-stats > li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .pt-stats > li { grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; justify-content: start; column-gap: 12px; }
  .pt-bars > li { grid-template-columns: minmax(0, 1fr) 46px; row-gap: 8px; }
  .pt-bars i { grid-column: 1 / -1; grid-row: 2; }
  .pt-tally { grid-template-columns: minmax(0, 1fr); }
  .pt-drivers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .pt-drivers > li { padding: 16px; }
  .pt-drivers b { font-size: 22px; }

  .pt-face { width: 100%; max-width: 420px; }
  .pt-os { grid-template-columns: minmax(0, 1fr); }
  .pt-nav { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .pt-nav a { padding: 20px; }
  .pt-nav .pt-nav__next { text-align: left; justify-items: start; }
  .pt-nav b { font-size: 20px; }
}