/* The patient portal and the secure-message pages (a patient's side): quiet, roomy and phone first. A slim top bar, one calm column, large cards on Home, rows with one status pill, and the
   existing message pages restyled by scope. Colors come from the theme's tokens, so light and dark follow the person's setting. */
.pt-page { max-width: 46rem; margin: 0 auto; padding: 0 1rem 4rem; display: block; }
.pt-page > * { min-width: 0; }

/* top bar */
.pt-bar { position: sticky; top: 0; z-index: 5; margin: 0 -1rem; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--color-border); }
.pt-bar-in { max-width: 46rem; margin: 0 auto; padding: .65rem 1rem .5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .35rem 1rem; }
.pt-brand { display: inline-flex; justify-self: start; text-decoration: none; color: inherit; }
.pt-brand .brand { font-size: 1.25rem; }
.pt-brand .brand-mark { width: 1.6rem; height: 1.6rem; }
.pt-nav { grid-column: 1 / -1; grid-row: 2; min-width: 0; display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.5rem; padding: 0 .5rem .15rem; }
.pt-nav::-webkit-scrollbar { display: none; }
.pt-nav a { flex: none; padding: .4rem .8rem; border-radius: 999px; color: var(--color-text-muted); text-decoration: none; font-weight: 550; font-size: .92rem; transition: background var(--motion) var(--ease), color var(--motion) var(--ease); }
.pt-nav a:hover { background: var(--color-surface-2); color: var(--color-text); }
.pt-nav a[aria-current="page"] { background: var(--color-text); color: var(--color-bg); }
.pt-out { margin: 0; justify-self: end; }
.pt-out button { background: none; border: 0; padding: .4rem .6rem; color: var(--color-text-muted); font: inherit; font-size: .9rem; font-weight: 550; border-radius: 999px; cursor: pointer; }
.pt-out button:hover { background: var(--color-surface-2); color: var(--color-text); }

/* title and the standing note */
.pt-title { padding: 2.2rem 0 1.2rem; }
.pt-title h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.3rem); letter-spacing: -.02em; line-height: 1.15; }
.pt-title p { margin: .45rem 0 0; color: var(--color-text-muted); font-size: 1.05rem; }
.pt-page .pm-emergency { margin: 0 0 1.4rem; padding: .65rem .9rem; border: 0; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text-muted); font-size: .85rem; }
.pt-page .pm-emergency b { color: var(--color-danger-text); }

/* sections */
.pt-page .panel { padding: 0; border: 0; background: transparent; box-shadow: none; margin: 0 0 1.6rem; }
.pt-page .panel > h2, .pt-h { margin: 0 0 .7rem; font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.pt-note { margin: 1rem 0 0; color: var(--color-text-muted); font-size: .85rem; }

/* home: large cards */
.pt-cards { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: .8rem; }
.pt-card { display: grid; gap: .25rem; padding: 1.15rem 1.2rem; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: transform var(--motion) var(--ease), border-color var(--motion) var(--ease); }
.pt-card:hover, .pt-card:focus-visible { transform: translateY(-2px); border-color: var(--color-accent); }
.pt-card b { font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; }
.pt-card span { color: var(--color-text-muted); font-size: .92rem; }
.pt-card .pt-ico { width: 1.6rem; height: 1.6rem; margin-bottom: .5rem; color: var(--color-accent-text); }
.pt-card.pt-attn { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); }
.pt-card.pt-attn b { color: var(--color-accent-text); }

/* lists */
.pt-list { list-style: none; margin: 0; padding: 0; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); overflow: hidden; }
.pt-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-top: 1px solid var(--color-border); }
.pt-row:first-child { border-top: 0; }
.pt-row-main { flex: 1 1 auto; min-width: 0; display: grid; gap: .15rem; }
.pt-row-main b { font-size: 1.02rem; font-weight: 620; overflow-wrap: anywhere; }
.pt-meta { color: var(--color-text-muted); font-size: .86rem; }
.pt-row-end { flex: none; display: grid; gap: .25rem; justify-items: end; text-align: right; }
.pt-amount { font-variant-numeric: tabular-nums; font-weight: 620; }
.pt-empty { padding: 2.4rem 1rem; text-align: center; color: var(--color-text-muted); }
@media (max-width: 30rem) { .pt-row { flex-wrap: wrap; } .pt-row-end { justify-items: start; text-align: left; } }

/* status pill */
.pt-pill { display: inline-block; padding: .18rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 620; white-space: nowrap; background: var(--color-surface-2); color: var(--color-text-muted); }
.pt-pill.pt-live { background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent-text); }
.pt-pill.pt-ok { background: color-mix(in srgb, #16a34a 16%, transparent); color: #14532d; }
.pt-pill.pt-warn { background: var(--color-danger-soft); color: var(--color-danger-text); }
:root[data-mode="dark"] .pt-pill.pt-ok { color: #4ade80; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .pt-pill.pt-ok { color: #4ade80; } }

/* an exam and what came of it */
.pt-exam { padding: 1.1rem 1.15rem; border-top: 1px solid var(--color-border); display: grid; gap: .6rem; }
.pt-exam:first-child { border-top: 0; }
.pt-exam header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.pt-exam h2 { margin: 0; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--color-text); }
.pt-rx { padding: .75rem .9rem; border-radius: var(--radius-md); background: var(--color-surface-2); display: grid; gap: .2rem; font-size: .92rem; }
.pt-rx b { font-weight: 620; }
.pt-visit-note { padding: .8rem .95rem; border-left: 3px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface)); border-radius: 0 var(--radius-md) var(--radius-md) 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; }
.pt-visit-note small { display: block; margin-bottom: .25rem; color: var(--color-text-muted); font-size: .78rem; font-weight: 620; letter-spacing: .05em; text-transform: uppercase; }

/* your details */
.pt-facts { margin: 0; padding: 0; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.pt-facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .95rem 1.15rem; border-top: 1px solid var(--color-border); }
.pt-facts > div:first-child { border-top: 0; }
.pt-facts dt { color: var(--color-text-muted); font-size: .9rem; }
.pt-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .pt-facts > div { grid-template-columns: 1fr; gap: .15rem; } }
.pt-actions { margin: 1.2rem 0 0; }

/* the code step: one focused card */
.pt-focus { max-width: 26rem; margin: 3rem auto 0; padding: 2rem 1.6rem; border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.pt-focus h2 { margin: 0 0 .6rem; font-size: 1.35rem; letter-spacing: -.01em; text-transform: none; color: var(--color-text); }
.pt-focus #pm-code { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

/* the message pages, restyled in place */
.pt-page .pair-list { list-style: none; margin: 0; padding: 0; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); overflow: hidden; display: block; }
.pt-page .pair-card { border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; box-shadow: none; padding: 0; margin: 0; }
.pt-page .pair-card:first-child { border-top: 0; }
.pt-page .pair-link { display: grid; gap: .3rem; padding: 1rem 1.15rem; border-left: 0; color: inherit; text-decoration: none; }
.pt-page .pair-link:hover, .pt-page .pair-link:focus-visible { background: var(--color-surface-2); }
.pt-page .pair-card .empty-note, .pt-page .empty-note { padding: 2rem 1rem; text-align: center; }
.pt-page .cm-list { display: grid; gap: .6rem; margin: .4rem 0 1.2rem; }
.pt-page .btn { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .pt-card, .pt-nav a { transition: none; } .pt-card:hover { transform: none; } }

/* a link standing alone in a small line (Back to ...): tall enough to tap and never too close to what is above it */
.pt-page p > a:only-child { display: inline-block; padding: .55rem 0; min-height: var(--tap-min); }

/* appointments: the list, one visit, booking and moving with a held time, the notices' landings */
.pa-said { margin: 0 0 1.2rem; padding: .7rem .95rem; border-radius: var(--radius-md); background: color-mix(in srgb, #16a34a 12%, var(--color-surface)); }
.pa-row { padding: 0; }
.pa-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; color: inherit; text-decoration: none; min-height: 44px; }
.pa-link:hover, .pa-link:focus-visible { background: var(--color-surface-2); }
.pa-link .pt-row-main { flex: 1 1 auto; min-width: 0; display: grid; gap: .15rem; }
.pa-link .pt-row-end { flex: none; }
.pa-card { margin: 0 0 1.4rem; padding: 1.3rem 1.2rem; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.pa-card h2 { margin: 0 0 .6rem; font-size: 1.25rem; letter-spacing: -.01em; text-transform: none; color: var(--color-text); }
.pa-card p { margin: .35rem 0; }
.pa-form .panel { margin-bottom: 1.2rem; }
.pa-form .select-field { margin-bottom: .9rem; }
.pa-form .select-field select { width: 100%; max-width: 100%; min-width: 0; min-height: 2.75rem; }
.pa-who { margin: .4rem 0 0; padding: 0; border: 0; display: grid; gap: .5rem; }
.pa-who legend { padding: 0; font-weight: 620; margin-bottom: .3rem; }
.pa-who label { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.pa-attest { display: flex; align-items: flex-start; gap: .7rem; margin: 1rem 0 .4rem; padding: .85rem 1rem; border-radius: var(--radius-md); background: var(--color-surface-2); min-height: 44px; }
.pa-attest input { margin-top: .2rem; width: 1.25rem; height: 1.25rem; flex: none; }
.pa-hold { margin: 0 0 1.2rem; }
.pa-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.pa-nav .btn { min-height: 2.75rem; }
.pa-day { margin: 0 0 1.2rem; }
.pa-day h3 { margin: 0 0 .5rem; font-size: 1rem; }
.pa-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: .5rem; }
.pa-slot { width: 100%; min-height: 2.75rem; display: grid; gap: .1rem; text-align: left; }
.pa-slot small { display: block; font-weight: 450; color: var(--color-text-muted); overflow-wrap: anywhere; }
.pa-old { margin: 0 0 1.2rem; }
.pa-actions .btn { margin: 0 .5rem .5rem 0; }
.pa-now { margin: 0 0 1.2rem; }
.pa-buttons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pa-buttons .btn, .pa-buttons .pa-inline { margin: 0; }
.pa-inline { display: inline-block; margin: 0; max-width: 100%; }
.pt-page .pa-buttons .btn { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; }
.pa-call .room-frame { height: 72vh; min-height: 24rem; max-width: 100%; border: 0; border-radius: var(--radius-lg); }
.pt-page .pt-actions .btn, .pt-page .pa-form .btn { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 30rem) { .pa-link { flex-wrap: wrap; } .pa-link .pt-row-main { flex: 1 1 100%; } .pa-link .pt-row-end { flex: 0 1 auto; min-width: 0; max-width: 100%; text-align: left; justify-items: start; } .pa-link .pt-pill { white-space: normal; max-width: 100%; overflow-wrap: anywhere; } }

/* ---- a prescription's stages (lane PORTAL2, 2026-11-01): the order's own history, the stages before it was sent included */
.pt-row-rx { align-items: start; }
.pt-stages { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.pt-stage { position: relative; display: flex; flex-wrap: wrap; gap: .25rem .6rem; padding-left: 1.1rem; font-size: .88rem; color: var(--color-text-muted); }
.pt-stage::before { content: ""; position: absolute; left: .15rem; top: .45rem; width: .5rem; height: .5rem; border-radius: 999px; background: var(--color-border); }
.pt-stage.now { color: var(--color-text); font-weight: 600; }
.pt-stage.now::before { background: var(--color-accent); }
.pt-stage-when { font-variant-numeric: tabular-nums; }

/* ---- the patient's own notice switches (lane PORTAL2) */
.pn-help { margin: 0 0 1rem; }
.pn-kind { margin: 0 0 1.2rem; padding: 1rem 1.15rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.pn-kind legend { padding: 0 .35rem; font-weight: 620; }
.pn-kind > .pt-meta { margin: 0 0 .6rem; }
.pn-choices { display: grid; gap: .6rem; }
.pn-choice { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; }
.pn-choice input { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--color-accent); }
.pn-choice input:disabled + label { color: var(--color-text-muted); }
.pn-choice label { font-weight: 550; }
.pn-choice .pn-off { grid-column: 2; margin: 0; }
.pn-required dt { color: var(--color-text); font-weight: 600; }
.pn-required dd { color: var(--color-text-muted); font-size: .92rem; }

/* ---- the phone bar (lane PORTALBAR, 2026-11-03): on a phone the top tabs, cut off at the edge, give way to a bar of Home, Visits, Exams, Messages and More at the foot of the screen; wider screens keep the top tabs. The bar is opaque
   (nothing scrolls into view through it), keeps the phone's safe area (the home indicator below, a notch beside), every link is at least 44 pixels, and the page ends above it. A test environment's banner (--env-banner-h) keeps its place at the very foot and the bar stands on it. */
.pt-tabbar { display: none; position: fixed; left: 0; right: 0; bottom: var(--env-banner-h, 0px); z-index: 6; background: var(--color-bg); border-top: 1px solid var(--color-border); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.pt-tabbar ul { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pt-tabbar a { position: relative; display: flex; box-sizing: border-box; width: 100%; align-items: center; justify-content: center; min-height: 3.25rem; min-width: 44px; padding: .3rem .15rem; border-top: 3px solid transparent; color: var(--color-text-muted); font-size: .8rem; font-weight: 600; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.pt-tabbar a:hover { background: var(--color-surface-2); color: var(--color-text); }
.pt-tabbar a[aria-current] { border-top-color: var(--color-accent); color: var(--color-text); font-weight: 700; }
.pt-tabbar a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
/* the unread count on Messages (lane PORTALBADGE, 2026-11-04): a pill of the theme's accent holding a number, 99+ above ninety-nine; drawn only when something is waiting. Colors are the theme's tokens, so dark mode follows it. In the top tabs it follows the word; in the phone bar
   it sits above the word, centered, so it can never be wider than the link or run into a neighbor, and (only while a number is shown) the bar's words stand on the bottom row of each link so the five stay level and the pill has the row above. */
.pt-badge { display: inline-block; box-sizing: border-box; min-width: 1.2rem; height: 1.2rem; margin-left: .4rem; padding: 0 .4rem; border-radius: 999px; background: var(--color-accent); color: var(--color-on-accent); font-size: .75rem; font-weight: 700; line-height: 1.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.pt-tabbar .pt-badge { position: absolute; top: .3rem; left: 50%; transform: translateX(-50%); margin: 0; }
.pt-tabbar:has(.pt-badge) a { align-items: flex-end; padding-bottom: .3rem; }
/* a 320 pixel screen: five columns of 64 pixels, and the word Messages at the normal size is wider than one (it broke in the middle of the word), so the words are a little smaller there */
@media (max-width: 21rem) { .pt-tabbar a { font-size: .72rem; padding-left: .1rem; padding-right: .1rem; } }
@media (max-width: 40rem) {
  .pt-nav { display: none; }
  .pt-tabbar { display: block; }
  .pt-page { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px) + 1.5rem); }
  :root:has(.pt-tabbar) { scroll-padding-bottom: calc(3.5rem + var(--env-banner-h, 0px) + env(safe-area-inset-bottom, 0px) + .5rem); }
}
@media print { .pt-tabbar { display: none; } }

/* the More page: a plain list of links and Sign out, one row each */
.pt-more { list-style: none; margin: 0 0 1.6rem; padding: 0; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); overflow: hidden; }
.pt-more li + li { border-top: 1px solid var(--color-border); }
.pt-more a, .pt-more button { display: flex; align-items: center; width: 100%; min-height: 3rem; padding: .8rem 1.15rem; color: inherit; font: inherit; font-weight: 600; text-align: left; text-decoration: none; background: none; border: 0; cursor: pointer; }
.pt-more a:hover, .pt-more button:hover { background: var(--color-surface-2); }
.pt-more a:focus-visible, .pt-more button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.pt-more form { margin: 0; }