@import url("/css/tokens.css?v=f4a021808348");
@import url("/css/page-parts.css?v=269461bcd3bd");
@import url("/css/app-feel.css?v=f2d282173216");
/* Screens wear the website's look (see tokens.css): stone ground, heavy
   Gabarito statements in sentence case, cards on warm paper with the
   website's soft lift, capsule buttons, and the app feel of app-feel.css.
   Status is a mark (tick, stamp, struck line) as well as a colour wash.
   Teal is kept for the one main action in each place. */

* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scrollbar-color: var(--field-line) transparent; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.5 var(--font-body); font-variant-numeric: tabular-nums;
  caret-color: var(--accent);
}
::selection { background: #bfdedc; color: var(--ink); }
main { max-width: 58rem; margin: 0 auto; padding: 0 16px 4rem; }
section { margin-top: calc(var(--rule) * 1.25); }

h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); line-height: 1.02; margin: calc(var(--rule) * 1.1) 0 .5rem; font-weight: 800; letter-spacing: -.03em; view-transition-name: page-title; }
h2 { font-size: 1.4rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: calc(var(--rule) * 1.3) 0 .6rem; }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; margin: var(--rule) 0 .35rem; }
p { margin: .5rem 0; }
a { color: var(--pen); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* The website's mark and name, at the top of every screen, leading back
   to drprabhatarya.com — the same pair the website's own top bar shows. */
.brand {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin-top: .9rem;
  color: var(--ink); text-decoration: none; line-height: 1.05;
}
.brand svg { width: 46px; height: 29px; flex: none; }
.brand b { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.brand b i { font-style: normal; font-weight: 500; }
/* His degrees stay off the everyday screens (owner, 1 October 2026). */
.brand small { display: none; }
.brand:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* The title band of each screen */
header.bar {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap;
  margin: .6rem 0 0; padding: 0 0 .4rem;
}
header.bar h1 { margin: .4rem 0 0; overflow-wrap: anywhere; }
header.bar p { margin: 0; color: var(--soft-ink); }

/* The staff screens, as capsules like the website's top bar */
nav.staff-nav { display: flex; gap: .4rem; margin: .9rem 0 var(--rule); overflow-x: auto; padding: 2px; }
nav.staff-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; flex: none;
  border-radius: 999px;
  background: var(--paper-deep); color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: .95rem;
}
nav.staff-nav a:hover { background: #cec7bc; }
nav.staff-nav a[aria-current="page"] { background: var(--ink); color: var(--card); }

/* The dock (js/dock.js turns the row above into it). After the Sakshi
   dashboard's, in this practice's own dress: warm paper glass, ink pictures,
   teal under the pointer, the open screen's tile in ink with a coral dot
   beside it, like the dot beside an open program on a Mac. On a phone it is
   a bar along the bottom, where the thumb already is. */
nav.staff-nav.dock {
  --tile: 50px;
  position: fixed; z-index: 20; margin: 0; overflow: visible;
  display: flex; gap: 8px; padding: 10px;
  background: rgba(251, 250, 247, .62);
  border: 1px solid rgba(255, 255, 255, .8);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 16px 44px rgba(11, 30, 35, .18), inset 0 1px 0 rgba(255, 255, 255, .7);
}
nav.staff-nav.dock a {
  position: relative; flex: none; justify-content: center; padding: 0;
  width: calc(var(--tile) * var(--swell, 1)); height: calc(var(--tile) * var(--swell, 1)); min-height: 0;
  border-radius: 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .25)), var(--paper);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 3px 8px rgba(11, 30, 35, .12), inset 0 -4px 8px rgba(11, 30, 35, .04);
  color: var(--ink);
  transition: width .12s ease-out, height .12s ease-out, color .15s;
}
nav.staff-nav.dock svg {
  width: 52%; height: 52%;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
nav.staff-nav.dock svg .fill { fill: currentColor; stroke: none; }
nav.staff-nav.dock svg .knob { fill: var(--card); }
nav.staff-nav.dock a:hover { color: var(--accent); }
nav.staff-nav.dock a[aria-current="page"] {
  color: var(--card);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)), var(--ink);
  border-color: var(--ink); view-transition-name: dock-bead;
}
nav.staff-nav.dock a[aria-current="page"] svg .knob { fill: var(--ink); }
nav.staff-nav.dock a[aria-current="page"]::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--coral);
}

/* Computer: a floating column down the left, the name popping out beside
   the tile under the pointer or the keyboard. */
@media (min-width: 900px) {
  body.has-dock main { padding-left: 104px; max-width: calc(58rem + 104px); }
  nav.staff-nav.dock {
    left: 16px; top: 50%; transform: translateY(-50%);
    flex-direction: column; align-items: flex-start; border-radius: 26px;
  }
  nav.staff-nav.dock a[aria-current="page"]::after { left: -9px; top: calc(50% - 3px); }
  nav.staff-nav.dock .dock-name {
    position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
    padding: .3rem .8rem; border-radius: 999px;
    background: var(--ink); color: var(--card);
    font-size: .85rem; font-weight: 700; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(11, 30, 35, .22);
    opacity: 0; pointer-events: none; transition: opacity .12s;
  }
  nav.staff-nav.dock a:hover .dock-name,
  nav.staff-nav.dock a:focus-visible .dock-name { opacity: 1; }
}

/* Phone: a floating ink capsule along the bottom, where the thumb already
   is. The open screen sits in a teal bead that glides across when another
   is chosen (the bead is carried between pages by the view transition). */
@media (max-width: 899.98px) {
  body.has-dock main { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
  nav.staff-nav.dock {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    justify-content: space-between; gap: 2px; padding: 6px; border-radius: 999px;
    background: rgb(11 30 35 / .94); border: 0;
    box-shadow: 0 18px 40px -12px rgb(11 30 35 / .55), inset 0 1px 0 rgb(255 255 255 / .08);
  }
  nav.staff-nav.dock a {
    flex: 1 1 0; flex-direction: column; gap: 1px; width: auto; min-width: 0; height: 58px; padding: 4px 2px;
    background: none; border: 0; box-shadow: none; border-radius: 999px; color: #b9c6c6;
    transition: color .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
  }
  nav.staff-nav.dock a:hover { color: var(--card); }
  nav.staff-nav.dock a:active { transform: scale(.92); }
  nav.staff-nav.dock a svg { width: 25px; height: 25px; }
  nav.staff-nav.dock svg .knob { fill: var(--ink); }
  nav.staff-nav.dock a[aria-current="page"] { background: var(--accent); color: var(--card); view-transition-name: dock-bead; }
  nav.staff-nav.dock a[aria-current="page"] svg .knob { fill: var(--accent); }
  nav.staff-nav.dock a[aria-current="page"]::after { display: none; }
  nav.staff-nav.dock .dock-name { font-size: .7rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }

  /* Three tabs and More; the rest are in the panel More opens. */
  nav.staff-nav.dock a.dock-extra { display: none; }
  nav.staff-nav.dock .dock-more,
  nav.staff-nav.dock .dock-more:hover,
  nav.staff-nav.dock .dock-more:active {
    display: inline-flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-width: 0; height: 58px; min-height: 0; margin: 0; padding: 4px 2px; border: 0; border-radius: 999px;
    background: none; box-shadow: none; transform: none; color: #b9c6c6; font: inherit; cursor: pointer;
  }
  nav.staff-nav.dock .dock-more[hidden] { display: none; }
  nav.staff-nav.dock .dock-more.is-current { background: var(--accent); color: var(--card); view-transition-name: dock-bead; }
  nav.staff-nav.dock .dock-more svg { width: 26px; height: 26px; }
  nav.staff-nav.dock .dock-more svg { fill: currentColor; }

  /* The panel: rises from the bar with a spring, its tiles popping in one
     after another. Tapping outside it, or Escape, puts it away. */
  .dock-sheet {
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    inset: auto 8px calc(88px + env(safe-area-inset-bottom)) 8px; width: auto; margin: 0;
    padding: .8rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: 24px;
    display: none; grid-template-columns: repeat(3, 1fr); gap: .5rem;
    background: rgba(251, 250, 247, .82); color: var(--ink);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 -10px 40px rgba(11, 30, 35, .2);
    transform-origin: 100% 100%;
    opacity: 0; transform: translateY(16px) scale(.92);
    transition: opacity .2s, transform .45s var(--spring), display .45s allow-discrete, overlay .45s allow-discrete;
  }
  .dock-sheet:popover-open { display: grid; opacity: 1; transform: none; }
  @starting-style {
    .dock-sheet:popover-open { opacity: 0; transform: translateY(16px) scale(.92); }
  }
  .dock-sheet a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    min-height: 5.2rem; padding: .7rem .3rem; border-radius: 18px;
    background: var(--card); color: var(--ink); text-decoration: none; text-align: center;
    box-shadow: 0 4px 12px rgba(11, 30, 35, .1);
    animation: sheet-in .5s var(--spring) backwards;
  }
  .dock-sheet a:nth-child(2) { animation-delay: .05s; }
  .dock-sheet a:nth-child(3) { animation-delay: .1s; }
  .dock-sheet a:nth-child(n+4) { animation-delay: .15s; }
  .dock-sheet a[aria-current="page"] { background: var(--ink); color: var(--card); }
  .dock-sheet svg {
    width: 28px; height: 28px;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .dock-sheet svg .fill { fill: currentColor; stroke: none; }
  .dock-sheet svg .knob { fill: var(--card); }
  .dock-sheet a[aria-current="page"] svg .knob { fill: var(--ink); }
  .dock-sheet .dock-name { font-size: .78rem; font-weight: 700; line-height: 1.1; }
}
/* Before js/dock.js has drawn the tiles (a slow line, the first visit), the
   bar already stands where it will be, empty, and the page already leaves
   room for it, so nothing jumps when the tiles arrive. */
@media (max-width: 899.98px) {
  body:has(main > nav.staff-nav) main { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
  main > nav.staff-nav:not(.dock) {
    position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    height: 70px; margin: 0; padding: 6px; overflow: hidden; border-radius: 999px;
    background: rgb(11 30 35 / .94); box-shadow: 0 18px 40px -12px rgb(11 30 35 / .55);
  }
  main > nav.staff-nav:not(.dock) a { visibility: hidden; }
}
/* On a computer every tab is in the dock, so More has nothing to hold. */
@media (min-width: 900px) {
  nav.staff-nav.dock .dock-more, .dock-sheet { display: none !important; }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(14px) scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  nav.staff-nav.dock a, nav.staff-nav.dock .dock-name, .dock-sheet { transition: none; }
  .dock-sheet a { animation: none; }
}
/* The patient's record: one part at a time, chosen from the dock
   (js/patient-nav.js). Until that script has run, only Home shows. */
.off-view { display: none !important; }
body:not([data-showing]) [data-part]:not([data-part="home"]) { display: none; }

/* Writing things down */
label, legend { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%; min-height: 54px; padding: .6rem 1rem;
  border: 1.5px solid #cfc8bd; border-radius: 16px;
  background: var(--card); color: var(--ink);
  transition: border-color .2s, box-shadow .25s;
}
input::placeholder, textarea::placeholder { color: #6b727b; }
input:hover, select:hover, textarea:hover { border-color: var(--field-line); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgb(0 79 70 / .22); }
input[aria-invalid="true"] { border-color: var(--warn-ink); background: var(--warn-bg); }
textarea { display: block; resize: vertical; min-height: 7.5rem; line-height: 1.5; padding: .75rem 1rem; }
select { appearance: none; padding-right: 2.2rem;
  background: var(--card) no-repeat right .8rem center / 12px 8px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315171c' stroke-width='1.6'/%3E%3C/svg%3E"); }
label > input, label > select { font-weight: 400; font-stretch: 100%; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset label {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 50px; margin: 0 .4rem .45rem 0; padding: .5rem 1.15rem;
  line-height: 1.35;
  border: 1.5px solid #cfc8bd; border-radius: 999px; background: var(--card);
  font-weight: 600; font-stretch: 100%; cursor: pointer;
  transition: background .2s, border-color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
fieldset label:active { transform: scale(.96); }
fieldset label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--card); font-weight: 700; }
fieldset label:has(input:checked) input { accent-color: var(--card); }
fieldset input { width: auto; min-height: 0; margin: 0; accent-color: var(--pen); }
details { margin: 1rem 0; }
summary { min-height: 44px; display: flex; align-items: center; color: var(--pen); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Buttons: the website's teal capsule for the main action, paper capsules for the rest */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 52px; margin-top: 1rem; padding: 0 1.6rem;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 22px -14px rgb(15 90 96 / .9);
  transition: background-color .15s ease-out, transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}
button:hover, .button:hover { background: var(--accent-deep); }
button:active, .button:active { transform: scale(.96); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
button[aria-busy="true"] { cursor: progress; opacity: .8; }
.list .actions button:not(.plain, .danger),
.actions > button:not(.plain, .danger):has(~ button:not(.plain, .danger)),
details button:not(.plain, .danger), .picker button, button.secondary, .button.secondary {
  background: var(--card); color: var(--ink); border-color: var(--field-line);
}
.list .actions button:not(.plain, .danger):hover,
.actions > button:not(.plain, .danger):has(~ button:not(.plain, .danger)):hover,
details button:not(.plain, .danger):hover, .picker button:hover, button.secondary:hover, .button.secondary:hover { background: var(--wait-bg); border-color: var(--pen); }
.list .actions .button { background: var(--card); color: var(--ink); border-color: var(--field-line); box-shadow: none; }
/* Sign in with Google: the second door under the WhatsApp code. */
.google-door { margin-top: 1.25rem; }
.google-door .or-line { margin: 0; }
.google-door .button { margin-top: .5rem; }
button.plain {
  background: none; border: 0; box-shadow: none; color: var(--pen); padding: 0 .1rem; min-height: 44px;
  font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
button.plain:hover { background: none; text-decoration-thickness: 2px; }
button.danger { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; box-shadow: none; }
button.danger:hover { background: #f2cfc7; }

.muted { color: var(--soft-ink); }
.who { color: var(--soft-ink); margin-top: 0; }
.small { font-size: .9rem; margin-top: 2rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.actions button, .actions .button { margin-top: .5rem; }

#message { padding: .8rem 1rem; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); font-weight: 550; }
#message:empty { display: none; }
#message[data-kind="info"] { background: var(--ok-bg); color: var(--ok-ink); }

/* Short pages (sign-in, the chemist's check): one narrow column, each
   step on its own card, like the website's front-page card. */
main.narrow { max-width: 34rem; }
main.narrow > form, main.narrow > section {
  margin: 1.25rem 0; padding: 1.1rem 1.25rem 1.3rem; border-radius: var(--r-card);
  background: var(--card); box-shadow: var(--shadow);
}
main.narrow > form > :first-child, main.narrow > section > :first-child { margin-top: 0; }

/* The patient front page: the practice's mark on the left, and on the right
   two small round doors for Dr Arya and the assistant, each named beneath. */
.top-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
nav.staff-doors { display: flex; gap: .5rem; margin-top: .9rem; }
nav.staff-doors a {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 52px;
  color: var(--soft-ink); text-decoration: none; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
nav.staff-doors svg {
  width: 40px; height: 40px; padding: 9px; border-radius: 50%;
  background: var(--card); box-shadow: var(--shadow); color: var(--ink);
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: color .15s;
}
nav.staff-doors a:hover { color: var(--ink); }
nav.staff-doors a:hover svg { color: var(--accent); }
@media (max-width: 380px) { nav.staff-doors span { display: none; } }

/* The mark is a button that asks where to go: the consultation's own home or
   the website. Dressed as the mark, not as a button; the choice drops down
   beneath it as a small card. */
button.brand, button.brand:hover, button.brand:active {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  anchor-name: --brand;
}
/* The choice: the capsule in the mark swings, and two cards spring out of it
   one after the other, a teal one for the consultation's home and a paper
   one for the website. Each lifts under the pointer and its
   picture gives a little hop. */
button.brand svg g { transform: rotate(-32deg); transform-origin: 20px 20px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
button.brand:has(+ .brand-menu:popover-open) svg g { transform: rotate(-60deg); }

.brand-menu {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  margin: 0; padding: .8rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: 26px;
  width: max-content; max-width: calc(100vw - 32px);
  display: none; grid-template-columns: repeat(2, minmax(0, 9.5rem)); gap: .6rem;
  background: rgba(251, 250, 247, .78); color: var(--ink);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 22px 50px rgba(11, 30, 35, .24);
  position-anchor: --brand; inset: auto; top: anchor(bottom); left: anchor(left); margin-top: .5rem;
  transform-origin: 1.5rem 0;
  opacity: 0; transform: translateY(-10px) scale(.85);
  transition: opacity .2s, transform .45s var(--spring), display .45s allow-discrete, overlay .45s allow-discrete;
}
.brand-menu:popover-open { display: grid; opacity: 1; transform: none; }
@starting-style {
  .brand-menu:popover-open { opacity: 0; transform: translateY(-10px) scale(.85); }
}
@supports not (anchor-name: --brand) {
  .brand-menu { position: fixed; top: 4.5rem; left: 16px; }
}
.brand-ask {
  grid-column: 1 / -1; margin: 0 .2rem .1rem;
  font-family: var(--font-display); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soft-ink);
}
.door {
  display: flex; flex-direction: column; gap: .15rem; min-height: 8.5rem; padding: 1rem;
  border-radius: 20px; text-decoration: none; line-height: 1.15;
  box-shadow: 0 6px 16px rgba(11, 30, 35, .14);
  animation: door-in .55s var(--spring) backwards;
  transition: transform .3s var(--spring), box-shadow .3s;
}
.door-home { background: linear-gradient(160deg, #1f6b5c, var(--accent) 55%, var(--accent-deep)); color: var(--accent-ink); }
.door-web { background: var(--card); color: var(--ink); border: 1px solid var(--line); animation-delay: .08s; }
.door svg {
  width: 2.2rem; height: 2.2rem; margin-bottom: auto;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.door b { font-family: var(--font-display); font-size: 1rem; font-weight: 800; margin-top: .9rem; }
.door small { font-size: .74rem; font-weight: 600; opacity: .8; }
.door-web svg { color: var(--accent); }
.door:hover, .door:focus-visible { box-shadow: 0 14px 28px rgba(11, 30, 35, .22); }
.door:hover, .door:focus-visible { transform: translateY(-4px); }
.door:hover svg, .door:focus-visible svg { animation: door-hop .5s var(--spring); }
@keyframes door-in {
  from { opacity: 0; transform: translate(-1.2rem, -1rem) scale(.6); }
}
@keyframes door-hop {
  40% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  button.brand svg g, .brand-menu, .door { transition: none; animation: none; }
  .door:hover svg, .door:focus-visible svg { animation: none; }
  button.brand:has(+ .brand-menu:popover-open) svg g { transform: rotate(-32deg); }
}

/* A card, as on the website */
.card {
  margin: 1rem 0; padding: 1.1rem 1.25rem; border-radius: var(--r-card); background: var(--card);
  box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 .35rem; overflow-wrap: anywhere; }

/* Lists: each entry its own paper card with the soft lift, a little gap
   between, entries in arrival order numbered in a mustard dot. */
.list {
  list-style: none; padding: 0; margin: .75rem 0 1rem; counter-reset: entry;
  display: grid; gap: .65rem;
}
.list:empty { display: none; }
.list > .card {
  position: relative; counter-increment: entry; margin: 0; border-radius: var(--r-card);
  padding: 1rem 1.15rem 1.05rem; background: var(--card); box-shadow: var(--shadow);
}
/* The patient's record lists settle in once; lists that refresh themselves stay still. */
[data-part] .list > .card { animation: card-in .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes card-in { from { transform: translateY(10px); } }
.list > .card::before {
  content: none; position: absolute; left: -.35rem; top: -.35rem; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--sage, #719470); color: var(--ink); font-weight: 800; font-size: .85rem;
}
.list > .card:has(.v-time) { padding-left: 1.6rem; }
.list > .card:has(.v-time)::before { content: counter(entry); }
.list > .card:focus-within { box-shadow: var(--shadow), 0 0 0 3px rgb(0 79 70 / .25); }
@media (prefers-reduced-motion: reduce) { .list > .card { animation: none; } }
.list > .card > p { margin: .2rem 0; }

/* The patient's Prescriptions screen: each paper on its own line, its name to
   read it and a Download button beside it (under it on a narrow phone). */
.paper {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem;
  padding: .55rem 0; border-top: 1px solid rgb(125 135 132 / .25);
}
.paper .paper-name { margin: 0; flex: 1 1 12rem; overflow-wrap: anywhere; }
.paper .paper-get { margin: 0; flex: 0 0 auto; }
.diet-chart > .muted { margin: 0 0 .4rem; }
.papers-ready { margin: .75rem 0 1rem; }
.papers-ready p { margin: .2rem 0; }
.list > .card:has(.badge-done) h3 { font-weight: 500; color: var(--soft-ink); }
.list > .card:has(.badge-cancelled) h3 {
  color: var(--soft-ink); text-decoration: line-through; text-decoration-color: var(--margin); text-decoration-thickness: 2px;
}
.list > .card form { margin-top: .5rem; padding-top: .25rem; border-top: 1px dashed var(--line); }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0 .6rem; }
.inline-form label { flex: 1 0 100%; margin-top: .5rem; }
.inline-form input { flex: 1 1 16rem; width: auto; }
.inline-form button { margin-top: .4rem; }
/* A value row (13 October 2026): tick, name, result and unit on one line, so a
   long report is checked at a glance; only ticked rows are saved. */
.inline-form .value-row { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: end; gap: .2rem .6rem; margin: .4rem 0 0; }
.inline-form .value-row label { flex: 1 1 7rem; margin-top: 0; display: flex; flex-direction: column; font-size: .85rem; }
.inline-form .value-row label.value-name { flex-basis: 12rem; }
.inline-form .value-row input { flex: none; width: 100%; max-width: none; }
.inline-form .value-row label.value-use { flex: 0 0 auto; flex-direction: row; align-items: center; gap: .3rem; padding-bottom: .7rem; }
.inline-form .value-row .value-use input { width: auto; margin: 0; }
@media (min-width: 60rem) {
  .list > .card {
    display: grid; grid-template-columns: minmax(15rem, 1.3fr) minmax(12rem, 1fr) auto; column-gap: 1.5rem; align-items: center;
  }
  .list > .card > h3 { grid-column: 1; }
  .list > .card > p.muted { grid-column: 1; }
  .list > .card > p:not(.muted) { grid-column: 2; grid-row: 1 / span 2; }
  .list > .card > .actions { grid-column: 3; grid-row: 1 / span 2; justify-content: flex-end; }
  .list > .card > form, .list > .card > :not(h3, p, .actions) { grid-column: 1 / -1; }
  /* The second column holds one line. A card with more (a booking, an SOS, a tray
     item, a request with its time picker) reads top to bottom, so no two lines share a place. */
  .list > .card:has(.b-badges), .list > .card.sos-card,
  .list > .card:has(> p:not(.muted, .actions) ~ p:not(.muted, .actions)),
  .list > .card:has(> .actions ~ .actions) { display: block; }
}

/* Marks */
.badge {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 1.85rem; margin: .2rem .35rem .2rem 0; padding: .1rem .6rem;
  border-radius: 999px; font-size: .88rem; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
  background: #ece8e1; color: var(--soft-ink); vertical-align: middle;
}
p.badge { display: flex; width: fit-content; }
.badge-first { background: var(--first-bg); color: var(--first-ink); }
.badge-follow-up { background: #e9ecef; color: #3d4550; }
.badge-waiting { background: var(--wait-bg); color: var(--wait-ink); }
.badge-done { background: var(--ok-bg); color: var(--ok-ink); }
.badge-done::before {
  content: ""; width: .85em; height: .85em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4L14 3.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4L14 3.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.badge-cancelled { background: #eeece8; color: var(--soft-ink); text-decoration: line-through; text-decoration-color: var(--margin); }
.badge-online { background: var(--card); color: var(--pen); border: 1px solid currentColor; }
/* On the call now: a live dot as well as the colour. */
.badge-oncall { background: var(--ok-bg); color: var(--ok-ink); }
.badge-oncall::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(31 91 53 / .2); }
.badge-unpaid { background: var(--warn-bg); color: var(--warn-ink); }
.badge-paid {
  background: var(--stamp-bg); color: var(--stamp); text-transform: uppercase; letter-spacing: .08em; font-weight: 800;
  box-shadow: inset 0 0 0 1.5px rgb(75 63 143 / .45);
  animation: stamp-lands .2s cubic-bezier(.25, 1, .5, 1); white-space: nowrap;
}
.badge-paper { background: var(--buff); color: var(--buff-ink); }
/* Moves only: a stamp is never invisible, even if the animation is paused. */
@keyframes stamp-lands { from { transform: scale(1.15); } }

/* Vitals, like the boxes of a bedside chart */
.vitals {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); margin: .5rem 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--card);
}
.vitals > label {
  margin: 0; padding: .5rem .7rem .6rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .9rem; font-weight: 700; font-stretch: 88%; text-transform: uppercase; letter-spacing: .05em; color: var(--soft-ink);
}
.vitals .unit, .vitals sub { text-transform: none; letter-spacing: 0; font-weight: 600; }
.vitals input {
  display: block; margin-top: .2rem; min-height: 44px; padding: 0 .1rem; border: 0; border-bottom: 1px solid var(--field-line); border-radius: 0;
  font-size: 1.45rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--ink); background: none;
}

/* Medicines being written */
.rx-items { list-style: none; padding: 0; margin: 1rem 0; counter-reset: rx; }
.rx-items:empty { display: none; }
.rx-item {
  position: relative; counter-increment: rx; padding: .7rem .9rem .8rem 2.6rem; margin-bottom: .6rem;
  background: var(--card); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(21 23 28 / .1);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 .75rem;
}
.rx-item::before {
  content: counter(rx) "."; position: absolute; left: .8rem; top: .75rem; color: var(--margin); font-weight: 700; font-size: 1.05rem;
}
.rx-item > p { grid-column: 1 / -1; margin: 0 0 .1rem; font-size: 1.1rem; }
.rx-item > p .muted { font-size: .92rem; }
.rx-item label { margin: .45rem 0 0; font-size: .9rem; }
.rx-item label input, .rx-item label textarea { margin-top: .2rem; }
.rx-item .i-instructions { min-height: 0; resize: vertical; }
.rx-item > button { grid-column: 1 / -1; justify-self: start; margin-top: .25rem; }
.rx-item label:has(.i-frequency), .rx-item label:has(.i-instructions), .rx-item .i-slots { grid-column: 1 / -1; }
.rx-item label select { margin-top: .2rem; }
@media (min-width: 48rem) {
  .rx-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
/* Time of dose: the same four marks the patient sees on the printed page */
.rx-item .i-slots { border: 0; padding: 0; margin: .55rem 0 0; min-width: 0; }
.rx-item .i-slots legend { margin: 0; font-size: .9rem; }
.slots { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.slots button {
  margin: 0; min-height: 44px; min-width: 6.5rem; padding: 0 .8rem; font-weight: 650; font-stretch: 100%;
  background: var(--card); color: var(--soft-ink); border: 1px dashed var(--field-line); box-shadow: none;
}
.slots button:hover { border-color: var(--pen); color: var(--pen); }
.slots button[aria-pressed="true"] { background: var(--pen); color: #fff; border: 1px solid var(--pen); }
.slots button[aria-pressed="true"]::before { content: "✓ "; }

/* The same four marks on the patient's medicine list (stage 7) */
.time-marks { display: inline-flex; gap: .2rem; vertical-align: middle; }
.time-marks svg { width: 1.35rem; height: 1.35rem; padding: .12rem; border: 1px solid var(--line); border-radius: 3px;
  fill: none; stroke: var(--soft-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: var(--card); }
.time-marks svg.on { background: var(--pen); border-color: var(--pen); stroke: #fff; }

/* Search-as-you-type */
.picker { list-style: none; padding: .3rem 0; margin: .3rem 0 0; background: var(--card); border: 1px solid var(--field-line); border-radius: var(--radius); box-shadow: 0 2px 4px rgb(21 23 28 / .1); max-height: 20rem; overflow: auto; }
.picker:empty { display: none; }
.picker li + li { border-top: 1px solid var(--line); }
.picker button { width: 100%; margin: 0; justify-content: flex-start; text-align: left; border: 0; border-radius: 0; box-shadow: none; font-weight: 500; }

/* Label and value pairs; codes */
dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .5rem 0; }
dt { font-weight: 700; font-stretch: 80%; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--soft-ink); padding-top: .15rem; }
dd { margin: 0; overflow-wrap: anywhere; }
.codes { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.1rem; letter-spacing: .06em; }

/* Stage 1 lists of choices */
.choices, #results { list-style: none; padding: 0; }
.choices button { width: 100%; justify-content: flex-start; text-align: left; }

@media (max-width: 30rem) {
  h1 { font-size: 1.5rem; }
  .list { --gutter: 2.1rem; }
  .list > .card { padding-right: .7rem; }
  .actions > button, .actions > .button { flex: 1 1 auto; }
  .list .actions > button, .list .actions > .button { flex: 0 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}
.rx-item .i-flag:not(:empty) {
  display: inline-flex; margin-left: .3rem; padding: .05rem .5rem; border-radius: 2px;
  background: var(--buff); color: var(--buff-ink); font-size: .92rem; font-weight: 650; font-stretch: 94%;
}

/* One-tap picks under Frequency and Instructions, in the same words that print */
.picks { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.picks button {
  margin: 0; min-height: 44px; padding: 0 .8rem; font-weight: 650; font-stretch: 100%;
  background: var(--card); color: var(--pen); border: 1px solid var(--field-line); box-shadow: none;
}
.picks button:hover { background: var(--wait-bg); border-color: var(--pen); }
.picks button[aria-pressed="true"] { background: var(--wait-bg); border-color: var(--pen); }

/* Stage 3: warnings patients must read (not an emergency; under 18), the
   band shown while a parent looks at a child's record, and links that are
   the quiet (secondary) action of their area. */
.warn { padding: .8rem 1rem; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); font-weight: 550; }
.band { padding: .8rem 1rem; border-radius: var(--radius); background: var(--wait-bg); border-left: 4px solid var(--pen); }
a.button.secondary { background: var(--card); color: var(--ink); border-color: var(--field-line); box-shadow: none; }
a.button.secondary:hover { background: var(--wait-bg); border-color: var(--pen); }
fieldset label { display: flex; align-items: center; gap: .5rem; min-height: 48px; }

/* A join link on the patient's booking (stage 4): the link, Copy, and what to do with it. */
.join-link { display: grid; gap: .5rem; margin-top: .5rem; }
.join-link input { width: 100%; }
.join-link button { justify-self: start; margin-top: 0; }

/* Stage 5: tests, uploads, visit plans and the medicine list, on his screens and the patient's. */
.habit-list { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .6rem; }
.habit-list > .habit:not(.card) { padding: .45rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
/* A medicine: its own paper card, a capsule in its home-screen colour, the
   four times of day as small named pills (filled when a dose falls then). */
.habit-list > .habit.med {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: .15rem .8rem; align-items: center;
  padding: 1rem 1.1rem; border: 0; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow);
}
.med-cap {
  grid-row: span 2; justify-self: center; width: 2.2rem; height: 1rem; border-radius: 999px; transform: rotate(-32deg);
  background: linear-gradient(90deg, var(--c) 50%, #fbfaf7 50%);
  box-shadow: 0 2px 4px rgb(11 30 35 / .25), inset 0 0 0 1px rgb(11 30 35 / .1);
}
.med-name { font-size: 1.12rem; line-height: 1.2; }
.med-how { grid-column: 2; color: var(--soft-ink); font-size: .95rem; }
.habit.med .time-marks, .med-note { grid-column: 1 / -1; }
.habit.med .time-marks { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.habit.med .time-marks > span {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: 0 .7rem 0 .5rem; border-radius: 999px;
  background: #ece8e1; color: #8a8f8f; font-size: .8rem; font-weight: 700;
}
.habit.med .time-marks > span.on { background: var(--accent); color: var(--card); }
.habit.med .time-marks svg { width: 1.05rem; height: 1.05rem; padding: 0; border: 0; background: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.med-note { font-size: .92rem; margin-top: .35rem; }
.habit-list > .card h3 { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.habit-list .inline-form input { max-width: 12rem; }
.rx-item.stopped strong { text-decoration: line-through; }
/* Stage 6: his review tray, Today's one line, questions and the care line. */
.badge-late { background: var(--warn-bg); color: var(--warn-ink); }
.badge-late::before {
  content: ""; width: .85em; height: .85em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 4.6V8.4l2.4 1.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 4.6V8.4l2.4 1.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.review-day { font-weight: 650; color: var(--soft-ink); }
.review-day.is-today { color: var(--ink); }
.tray-group { margin: 1.4rem 0; }
.tray-group > h2 { margin-bottom: .4rem; }
.tray-item { overflow-wrap: anywhere; }
.tray-who { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; margin: 0 0 .2rem; font-weight: 650; }
.tray-who .badge { margin: 0; }
.q-text { margin: .5rem 0; padding: .5rem .9rem; border-left: 3px solid var(--margin); background: var(--paper); white-space: pre-wrap; }
.q-answer { white-space: pre-wrap; }
.answer-box { display: grid; gap: .45rem; margin-top: .6rem; }
.answer-box textarea { width: 100%; }
.answer-box .counter { justify-self: end; font-size: .88rem; }
.answer-box .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.answer-box .actions button { margin-top: .4rem; }
.answer-box .actions button[type="submit"]:not(.secondary) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.answer-box .actions button[type="submit"]:not(.secondary):hover { background: var(--accent-deep); }
.endings { margin: 0; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); }
.endings label { display: flex; gap: .5rem; align-items: flex-start; margin: .3rem 0; font-weight: 450; }
.endings input { margin-top: .25rem; flex: none; }
.tray-line { margin: 1rem 0; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-weight: 650; }
.tray-line.is-review-day { border-color: var(--ink); }
.care-line { font-weight: 650; }
.care-soon { padding: .6rem .9rem; border-radius: var(--radius); background: var(--wait-bg); color: var(--wait-ink); font-weight: 650; }
.care h3 { margin: .9rem 0 .2rem; }
label.tick { display: flex; gap: .6rem; align-items: flex-start; margin: .8rem 0; font-weight: 450; }
label.tick input { margin-top: .3rem; flex: none; width: 1.2rem; height: 1.2rem; min-height: 0; }
.choice { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.choice legend { width: 100%; }
.choice label { display: flex; gap: .4rem; align-items: center; min-height: 44px; }
.voice { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .5rem; }
audio { display: block; width: 100%; max-width: 28rem; margin: .5rem 0; }
/* Stage 6: the one not-an-emergency line on every patient page (the design's words), with the warn look. */
.not-emergency, .not-emergency-near { padding: .8rem 1rem; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); font-weight: 550; }

/* A visit plan's sentences are long: on a phone each heading sits above its words */
@media (max-width: 40rem) {
  dl.plan-words { grid-template-columns: 1fr; gap: 0; }
  dl.plan-words dd { margin-bottom: .6rem; }
}

/* The patient's tests: a file picker never runs past the card's edge */
input[type="file"] { max-width: 100%; }
.test-update summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: .3rem 0; }
.test-update .inline-form { margin-top: .6rem; }

/* Medicine reminders on the patient's page (stage 7): each time of day is a
   ruled line — the time to change, then the medicines taken then. */
.rem-slots { list-style: none; padding: 0; margin: 0 0 var(--rule); border-top: 1px solid var(--line); }
.rem-slot { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.rem-slot label { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.rem-slot input[type="time"] { width: auto; min-width: 8.5rem; }
.rem-meds { margin: .3rem 0 0; color: var(--soft-ink); }
.rem-ask { margin: 0 0 var(--rule); }
.rem-app { margin-top: var(--rule); }
.rem-app h3 { margin-bottom: .4rem; }
.rem-wa { margin-top: var(--rule); }

/* Stage 8: readings. The kinds are large buttons for a thumb; the chart is
   plain SVG (public/js/trend-chart.js); the dangerous advice covers the
   whole screen in the warning colours, with a mark and words as well. */
.kind-pick { border: 0; padding: 0; margin: 0; }
.kind-pick legend { font-weight: 650; margin-bottom: .5rem; }
.kind-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; }
.kind-button {
  min-height: 52px; border-radius: var(--radius); border: 1.5px solid var(--field-line);
  background: var(--card); color: var(--ink); font: inherit; font-weight: 600; text-align: center; padding: .5rem .7rem; line-height: 1.2;
}
.kind-button[aria-pressed="true"] { background: var(--wait-bg); border-color: var(--pen); box-shadow: inset 0 0 0 1.5px var(--pen); }
.reading-field { display: grid; gap: .25rem; margin: .8rem 0 0; max-width: 20rem; }
.reading-field input { font-size: 1.25rem; min-height: 48px; width: 100%; min-width: 0; }
.reading-note { color: var(--warn-ink); font-weight: 600; }
#reading-days { margin-top: var(--rule); }
#reading-days button[aria-pressed="true"] { background: var(--wait-bg); border-color: var(--pen); }
a.call-112 {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem;
  border-radius: 999px; background: var(--warn-ink); color: #fff; font-weight: 750; text-decoration: none;
}
a.call-112.big { min-height: 64px; font-size: 1.4rem; width: 100%; max-width: 24rem; }

.trend { margin: var(--rule) 0 0; padding: 1rem; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); }
.trend-title { font-size: 1.05rem; margin-bottom: .4rem; }
.trend svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.trend-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; margin: 0 0 .4rem; padding: 0; font-size: .85rem; color: var(--soft-ink); }
.trend-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.mark-outside { width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--warn-ink); display: inline-block; }
.mark-clinic { width: 9px; height: 9px; background: var(--soft-ink); display: inline-block; }
.mark-band { width: 14px; height: 10px; background: rgb(0 140 153 / .15); display: inline-block; }
.trend-readout { font-size: .9rem; color: var(--ink); min-height: 1.5em; margin: .3rem 0 0; }
.tc-grid { stroke: var(--line); stroke-width: 1; }
.tc-tick { fill: var(--soft-ink); font-size: 12px; font-family: var(--font-body); }
.tc-label { font-size: 12px; font-weight: 700; font-family: var(--font-body); }
.tc-danger { stroke: var(--warn-ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.tc-danger-label { fill: var(--warn-ink); font-size: 11px; font-weight: 650; font-family: var(--font-body); }
.tc-point { stroke: var(--card); stroke-width: 2; }
.tc-outside { fill: var(--card); stroke: var(--warn-ink); stroke-width: 2.5; }
.tc-clinic { fill: var(--soft-ink); stroke: var(--card); stroke-width: 2; }
.tc-focus { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.tc-cross { stroke: var(--field-line); stroke-width: 1; stroke-dasharray: 2 3; }
.trend-numbers summary { cursor: pointer; color: var(--pen); min-height: 44px; display: flex; align-items: center; }
.trend-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.trend-table th, .trend-table td { text-align: left; padding: .35rem .5rem .35rem 0; border-bottom: 1px solid var(--line); }
.trend-table td:last-child { color: var(--warn-ink); font-weight: 600; }
.doctor-message summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .3rem; }

.danger-screen {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  background: var(--warn-bg); color: var(--warn-ink);
  display: flex; align-items: flex-start; justify-content: center; padding: 16px;
}
.danger-inner { max-width: 32rem; width: 100%; margin-top: 8vh; display: grid; gap: 1rem; justify-items: start; }
.danger-mark {
  width: 64px; height: 64px; margin: 0; border-radius: 50%; border: 5px solid var(--warn-ink);
  display: grid; place-items: center; font-size: 2.4rem; font-weight: 900; line-height: 1;
}
.danger-when { margin: 0; font-weight: 600; }
.danger-words { margin: 0; font-size: 1.7rem; line-height: 1.2; font-weight: 800; outline: none; }
.danger-more p { font-size: 1.15rem; font-weight: 600; margin: .4rem 0; }
#danger .danger-read { min-height: 48px; color: var(--warn-ink); text-decoration: underline; }
body.danger-open { overflow: hidden; }

/* Stage 8 in his tray: red flags on top, with a mark and words as well as colour. */
/* These cards carry several parts, so they stack even on a wide screen. */
.list > .card.tray-stack { display: block; }
.list > .card.tray-stack > .actions { justify-content: flex-start; margin-top: .5rem; }
.tray-item.flag { border-left: 6px solid var(--warn-ink); }
.flag-what { font-weight: 700; color: var(--warn-ink); display: flex; align-items: center; gap: .5rem; }
.flag-mark {
  width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; border: 2.5px solid var(--warn-ink);
  display: inline-grid; place-items: center; font-weight: 900; line-height: 1;
}
.flag-readings { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.tray-item textarea { width: 100%; }

/* Stage 8: his readings part of the patient page. */
.pr-kind { margin: .75rem 0; }
.pr-kind > summary { cursor: pointer; font-size: 1.05rem; padding: .2rem 0; }
.pr-grid { display: grid; gap: 1rem; margin-top: .75rem; }
@media (min-width: 60rem) { .pr-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.pr-box { border-top: 1px solid var(--line); padding-top: .6rem; }
.pr-box h4 { margin: 0 0 .3rem; }
.pr-lines { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.pr-part { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.pr-part legend { font-weight: 650; margin-bottom: .2rem; }
/* Number boxes, not choice buttons: undo the grouped-choice look fieldset labels get. */
.pr-field, fieldset label.pr-field {
  display: flex; flex-direction: column; align-items: stretch; gap: .15rem; min-height: 0;
  font-size: .9rem; border: 0; padding: 0; border-radius: 0; background: none;
}
.pr-field input { width: 6.5rem; }
.pr-apply { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0; }
.pr-apply select { width: auto; }
.pr-pattern { border-top: 1px dashed var(--line); padding-top: .5rem; margin-top: .5rem; }
.pr-pattern-name { display: flex; align-items: center; gap: .4rem; margin: 0; }
.pr-pattern-name input { width: 1.2rem; height: 1.2rem; }
.pr-readings { padding-left: 1.1rem; margin: .3rem 0; }
.pr-history ul { padding-left: 1.1rem; }
.side-flags li { color: var(--warn-ink); font-weight: 600; }

/* Stage 9: parts update on their own (public/js/live-part.js). A figure that
   changed is lit briefly — a colour fade only, no movement, so it is kept
   under "reduce motion" too; the class is removed when the fade ends. */
@keyframes part-changed { from { background: var(--first-bg); } to { background: transparent; } }
.part-changed { animation: part-changed 1.6s ease-out; border-radius: 4px; }
.part-note { color: var(--warn-ink); font-size: .9rem; margin: .3rem 0; }

/* Stage 9: the four sharing levels as large choices, name above its one line. */
.level-choices label.level-choice { align-items: flex-start; padding-block: .7rem; }
.level-choices label.level-choice input { margin-top: .3rem; }
.level-choice span { display: flex; flex-direction: column; gap: .15rem; }
.level-choice small { font-weight: 450; line-height: 1.4; }
.level-choices label.level-choice { display: flex; margin-right: 0; }
.viewing-band { position: sticky; top: 0; z-index: 2; }
.plain-list { list-style: none; padding: 0; margin: .4rem 0; }
.plain-list > li + li { margin-top: .5rem; }

/* Visit screen: the diet chart tick list. */
#diet-part .diet-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .1rem 1rem; }
#diet-part .diet-row > label { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: .6rem; min-height: 44px; margin: 0; font-weight: 500; text-align: left; }
#diet-part .diet-row > label input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; }
#diet-part .diet-row:has(.diet-more) { grid-column: 1 / -1; }
#diet-part .diet-more { display: grid; grid-template-columns: auto 1fr; gap: .4rem .6rem; align-items: center; margin: 0 0 .6rem 1.9rem; }
#diet-part .diet-more label { margin: 0; }
#diet-part .diet-more select, #diet-part .diet-more input { width: 100%; max-width: 32rem; }
@media (max-width: 560px) { #diet-part .diet-more { grid-template-columns: 1fr; margin-left: 0; } }

/* Discount code box on the booking page: the code and its Apply button side by side. */
.code-row { display: flex; gap: .5rem; align-items: center; }
.code-row input { flex: 1; min-width: 0; max-width: 16rem; text-transform: uppercase; }
#codes-said:empty { display: none; }

/* The red notifications bar at the top of every signed-in page (app-nudge.js),
   until notifications are on for this device (owner, 1 Oct 2026). */
.alerts-bar { margin: 0 0 1rem; display: grid; gap: .5rem; }
.alerts-bar-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .85rem 1.1rem;
  background: #c62828; color: #fff; border-radius: var(--r-card); box-shadow: var(--shadow);
  font-size: .95rem; line-height: 1.4;
}
.alerts-bar-row p { margin: 0; flex: 1 1 16rem; }
.alerts-bar-row button {
  min-height: 44px; margin: 0; background: #fff; color: #b71c1c; border-color: #fff; font-weight: 650;
}
/* Just turned on: a calm row asking whether the test notification showed. */
.alerts-bar-row.alerts-calm { background: var(--card); color: var(--ink); }
.alerts-bar-row.alerts-calm button { background: var(--ink); color: var(--card); border-color: var(--ink); }

/* The app reminder (app-nudge.js): under the home screen's buttons or at the foot. */
.nudge { margin: 1.4rem 0 1rem; display: grid; gap: .6rem; }
.nudge-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .9rem 1.1rem .9rem 1.1rem;
  background: var(--card); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow);
  border: 1.5px dashed #cfc8bd; font-size: .92rem; line-height: 1.4;
}
.nudge-row p { margin: 0; flex: 1 1 18rem; }
.nudge-actions { display: flex; gap: .5rem; align-items: center; }
.nudge-actions button, .nudge-actions .button { min-height: 44px; margin-top: .2rem; }
.nudge-said { margin: 0; color: var(--soft-ink); }

/* Button feedback (his decision, 2 October 2026; js/api.js api.run): a
   turning mark while the work runs, the reason beside the button when nothing
   was saved, and the box it is about marked in the error colour. */
button[aria-busy="true"], button[aria-busy="true"]:disabled { cursor: progress; opacity: .85; }
.button-spin {
  display: inline-block; width: .95em; height: .95em; margin-right: .5em; vertical-align: -.12em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: button-spin .8s linear infinite;
}
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .button-spin { animation-duration: 2.4s; } }
.button-note { margin: .45rem 0 0; font-weight: 550; color: var(--warn-ink); }
.button-note[data-kind="info"] { color: var(--ok-ink); }
.button-note:empty { display: none; }
[aria-invalid="true"] { border-color: var(--warn-ink) !important; box-shadow: 0 0 0 2px var(--warn-bg); }

/* His hours (Settings → Hours, 2 October 2026). */
.hours-session { margin-bottom: 1rem; }
.hours-session legend, #closed-days legend { font-weight: 650; margin-bottom: .3rem; }
.hours-session .pr-field input { width: 8.5rem; }

/* The patient's optional form before the call, as Dr Arya reads it (Today, visit; 2 October 2026). */
.before-call-card { margin: .4rem 0 .8rem; padding: .6rem .9rem; border-radius: var(--radius); background: var(--card); border-left: 6px solid var(--margin); }
.before-call-card h2 { font-size: 1rem; margin: 0 0 .3rem; }
/* The brief before the consultation (13 October 2026): the record's lines (code) above, Claude's summary below, marked as AI in words. */
.brief-card { border-left-color: var(--accent, var(--margin)); }
.brief-head { margin: .5rem 0 .1rem; font-size: .9rem; font-weight: 700; }
.brief-mark { margin: 0 0 .2rem; font-size: .85rem; color: var(--soft-ink); }
.brief-ai { margin-top: .6rem; padding-top: .4rem; border-top: 1px solid var(--line, currentColor); }
.brief-lines { margin: .2rem 0 .3rem; padding-left: 1.2rem; }
.brief-lines li { margin: .15rem 0; overflow-wrap: anywhere; }
.brief-when { margin: .2rem 0 0; font-size: .85rem; }
.brief-stale { margin: .4rem 0 .2rem; font-weight: 700; }
.brief-writing { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; color: var(--soft-ink); }
.brief-writing .button-spin { position: static; }
.before-call-list { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .3rem 0 0; }
.before-call-list dt { font-weight: 700; }
.before-call-list dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 479.98px) { .before-call-list { grid-template-columns: 1fr; } .before-call-list dd { margin-bottom: .3rem; } }
/* The check-in before the call (8 October 2026), as Dr Arya reads it on Today and the visit.
   An emergency tick is a red line at the very top: a warn wash with a mark, never colour alone. */
.ci-alarm {
  display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 .6rem; padding: .6rem .8rem; border-radius: var(--radius);
  background: var(--warn-bg); color: var(--warn-ink); font-weight: 700; line-height: 1.35;
}
.ci-alarm::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; margin-top: .02rem;
  border-radius: 50%; background: var(--coral); color: var(--ink); font-weight: 900; font-size: .9rem;
}
.card > .ci-alarm:first-child { margin-top: -.2rem; }
.ci-after-alarm { margin: -.3rem 0 .6rem; padding-left: 2.8rem; color: var(--soft-ink); font-weight: 600; }
.ci-title { margin: 0 0 .4rem; font-weight: 600; }
.ci-earlier { margin-top: .9rem; }
.before-call-list dt.ci-urgent, .before-call-list dd.ci-urgent { color: var(--warn-ink); }
.before-call-list dd.ci-urgent { font-weight: 700; }
.ci-voice-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: .6rem 0 0; font-weight: 600; }
.ci-voice-line audio { max-width: 100%; height: 44px; }
.ci-print-row { margin: .2rem 0 0; }
@media print {
  body.print-check-in > :not(main), body.print-check-in main > :not(#before-call-part),
  body.print-check-in #ci-voice, body.print-check-in .ci-print-row { display: none !important; }
  body.print-check-in, body.print-check-in main { background: #fff; padding: 0; margin: 0; max-width: none; }
  body.print-check-in #before-call-part { box-shadow: none; border: 0; padding: 0; background: #fff; font-size: 12pt; }
  body.print-check-in .ci-alarm { border: 2px solid currentColor; }
  body.print-check-in .before-call-list { grid-template-columns: max-content 1fr; }
}

/* The call recording on the visit screen (design 2 October 2026). */
.recording-player { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.recording-player h2 { margin-top: 0; }
.recording-player .player-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.recording-player .player-buttons button { flex: 1 1 0; min-width: 0; max-width: 160px; min-height: 44px; padding-inline: 8px; }

/* The fingertip pulse and rhythm check (design 2 October 2026). */
.pulse-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 8px 0; background: var(--card); }
.pulse-card.pulse-irregular { border-color: var(--warn-ink); }
.pulse-card > p:first-child { font-weight: 700; margin-top: 0; }
.pulse-trace { width: 100%; height: 64px; display: block; color: var(--accent); }
.pulse-trace-line { stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pulse-beats { width: 160px; height: 160px; max-width: 100%; display: block; color: var(--ink); }
.pulse-beats circle { fill: currentColor; }
.pulse-beats-diag { stroke: var(--field-line); stroke-dasharray: 4 4; }
.pulse-beats-frame { fill: none; stroke: var(--line); stroke-width: 2; }
.pulse-own img { display: block; margin: 0 auto 8px; }
/* What the camera sees while the check looks for the fingertip: it glows red
   once the right lens is covered (Dr Arya, 7 October 2026). */
.pulse-view { width: 140px; height: 140px; margin: 12px auto; border-radius: 50%; overflow: hidden; background: #000; border: 4px solid var(--line); }
.pulse-view[hidden] { display: none; }
.pulse-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pulse-view.found { border-color: var(--accent); }
.table-wrap { max-width: 100%; overflow-x: auto; }