/* Winterfield Health — portal stylesheet
   The clinical workspace and MyWinterfield, behind portal/.

   Shares the brand tokens with site.css but deliberately does not share its
   layout. The public site is a marketing page: generous whitespace, rounded
   pills, serif headings at display sizes. This is a workstation. It is denser,
   squarer, and information-first, because a clinician scanning a chart and a
   visitor reading a hero are not doing the same job. Keeping the palette makes
   it recognizably Winterfield; keeping the marketing layout would have made it
   unusable.

   Deliberately a separate file rather than an addition to site.css or
   pages.css: nothing on the public site needs any of this, and the public pages
   should not carry the weight. See PLAT-13 for the wider two-stylesheet
   question, which this does not change. */

:root {
  --wf-terracotta: #B4552D;
  --wf-terracotta-hover: #8F3F1F;
  --wf-olive: #4A5D43;
  --wf-gold: #E9A13B;
  --wf-ink: #3B2E25;
  --wf-cream: #FAF5EF;
  --wf-body: #5C4F44;
  --wf-muted: #8A7A6C;
  --wf-on-terracotta: #FFF7F0;
  --wf-hairline: rgba(59, 46, 37, .12);
  --wf-hairline-strong: rgba(59, 46, 37, .2);
  --wf-tint: #F5EDE2;

  --wf-serif: 'Lora', Georgia, serif;
  --wf-sans: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --wf-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Clinical status colors. Chosen to sit beside terracotta without competing,
     and to stay legible for the roughly 8 percent of men with red-green color
     deficiency: the high/low flags carry an arrow glyph as well as a color, so
     color is never the only signal. */
  --wf-abnormal: #A8341F;
  --wf-abnormal-bg: #FBEDE9;
  --wf-normal: #4A5D43;
  --wf-caution: #8A5A12;
  --wf-caution-bg: #FCF3E2;

  --wf-panel: #FFFFFF;
  --wf-shell: #F3EBE1;

  --wf-portal-max: 1480px;
}

*, *::before, *::after { box-sizing: border-box; }

body.portal {
  margin: 0;
  background: var(--wf-shell);
  color: var(--wf-ink);
  font: 400 15px/1.55 var(--wf-sans);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--wf-terracotta); }
a:hover { color: var(--wf-terracotta-hover); }

h1, h2, h3, h4 { font-family: var(--wf-serif); font-weight: 600; margin: 0; }

.portal-wrap {
  max-width: var(--wf-portal-max);
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
}
.portal-narrow { max-width: 720px; }

.kicker {
  font: 700 11px var(--wf-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wf-muted);
  margin: 0 0 6px;
}

/* ---------- the synthetic-data banner ----------
   Present on every portal page and not dismissible. A demo EMR that looks
   convincing is the goal, so the one thing that must never be ambiguous is
   whether the data is real. */

.demo-banner {
  background: var(--wf-olive);
  color: #F2F5EF;
  font: 700 12px var(--wf-sans);
  letter-spacing: .04em;
  text-align: center;
  padding: 7px 16px;
}

/* ---------- header ---------- */

.portal-header {
  background: var(--wf-panel);
  border-bottom: 1px solid var(--wf-hairline);
  position: sticky;
  top: 0;
  z-index: 40;
}
.portal-header .portal-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 58px;
}
.portal-lockup {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--wf-ink);
}
.portal-lockup .word {
  font: 600 17px var(--wf-serif);
  letter-spacing: -.01em;
}
.portal-lockup .word em { font-style: normal; color: var(--wf-terracotta); }

.portal-context {
  font: 700 11px var(--wf-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wf-muted);
  padding-left: 20px;
  border-left: 1px solid var(--wf-hairline);
}

/* The workspace destinations, between the context label and the user block.
   Dave's ask, 2026-08-02.6, and his constraint with it: do not upstage the
   "Clinical workspace" label to their left.

   So they are quieter than that label rather than louder. The label is the
   only uppercase, letter-spaced thing in the bar and keeps that to itself;
   these are sentence case at 13px, which is under the 14.5px the console's
   equivalents use, because this header already carries a lockup and a named
   user and the console's does not.

   They still have to read as buttons at rest, which the console's do not: a
   filled shell-colored chip with a hairline, squared to 4px to rhyme with the
   Sign out button at the other end of the same bar. Sign out stays outlined
   and unfilled, so the two groups do not read as the same kind of thing. */
.portal-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.portal-nav a {
  font: 600 13px var(--wf-sans);
  text-decoration: none;
  color: var(--wf-body);
  background: var(--wf-shell);
  border: 1px solid var(--wf-hairline);
  border-radius: 4px;
  padding: 6px 11px;
  white-space: nowrap;
  transition: background .13s, border-color .13s, color .13s;
}
.portal-nav a:hover {
  background: var(--wf-tint);
  border-color: var(--wf-terracotta);
  color: var(--wf-ink);
}
.portal-nav a:focus-visible {
  outline: 2px solid var(--wf-terracotta);
  outline-offset: 1px;
}
.portal-nav a.is-current {
  background: var(--wf-terracotta);
  border-color: var(--wf-terracotta);
  color: var(--wf-on-terracotta);
}

.portal-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.portal-who { text-align: right; line-height: 1.25; }
.portal-who strong { display: block; font-size: 14px; }
.portal-role { font-size: 12px; color: var(--wf-muted); }
.portal-signout {
  font: 700 13px var(--wf-sans);
  text-decoration: none;
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 4px;
  padding: 7px 13px;
  color: var(--wf-body);
}
.portal-signout:hover {
  background: var(--wf-tint);
  color: var(--wf-ink);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font: 700 13.5px var(--wf-sans);
  border-radius: 4px;
  padding: 10px 18px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.btn-primary { background: var(--wf-terracotta); color: var(--wf-on-terracotta); }
.btn-primary:hover { background: var(--wf-terracotta-hover); color: var(--wf-on-terracotta); }
.btn-quiet {
  background: transparent;
  border-color: var(--wf-hairline-strong);
  color: var(--wf-body);
}
.btn-quiet:hover { background: var(--wf-tint); color: var(--wf-ink); }
.btn-sm { font-size: 12.5px; padding: 7px 13px; }

/* ---------- panels ---------- */

.panel {
  background: var(--wf-panel);
  border: 1px solid var(--wf-hairline);
  border-radius: 6px;
  padding: 22px 24px;
}
.panel > h2, .panel > h3 {
  font-size: 16px;
  margin-bottom: 14px;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.panel-head h2, .panel-head h3 { font-size: 16px; margin: 0; }
.panel-count { font-size: 12.5px; color: var(--wf-muted); }

/* A panel that folds. The <summary> is the panel head, so an open fold is
   indistinguishable from every other panel except for the caret. Native
   <details> rather than a JS toggle: it folds with JavaScript off, it is a
   real disclosure widget to a screen reader without any ARIA, and Find in
   Page opens it on its own in browsers that support that. */
.panel-fold > summary.panel-head {
  cursor: pointer;
  align-items: center;
  list-style: none;
}
.panel-fold > summary.panel-head::-webkit-details-marker { display: none; }
.panel-fold > summary.panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* Caret drawn from two borders rather than a glyph: it rotates cleanly and
   needs no font that may not have loaded yet. Points right when closed and
   down when open. */
.panel-fold > summary.panel-head h2::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--wf-muted);
  border-bottom: 2px solid var(--wf-muted);
  transform: rotate(-45deg);
  transition: transform .13s;
}
.panel-fold[open] > summary.panel-head h2::before { transform: rotate(45deg); }
.panel-fold > summary.panel-head:hover h2,
.panel-fold > summary.panel-head:hover h2::before { color: var(--wf-terracotta); }
.panel-fold > summary.panel-head:hover h2::before { border-color: var(--wf-terracotta); }
.panel-fold > summary.panel-head:focus-visible {
  outline: 2px solid var(--wf-terracotta);
  outline-offset: 3px;
  border-radius: 3px;
}
/* A closed fold has nothing under the head, so the head's own bottom margin
   leaves a band of empty panel. */
.panel-fold:not([open]) > summary.panel-head { margin-bottom: 0; }

/* ---------- login ---------- */

.login-page { padding: 34px 28px 60px; }
.login-intro { margin-bottom: 20px; }
.login-intro h1 { font-size: 30px; }
.login-sub { color: var(--wf-body); margin: 6px 0 0; }

.login-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--wf-hairline);
  margin-bottom: 24px;
}
.login-tab {
  font: 700 13.5px var(--wf-sans);
  text-decoration: none;
  color: var(--wf-muted);
  padding: 11px 18px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  margin-bottom: -1px;
}
.login-tab:hover { color: var(--wf-ink); background: rgba(255, 255, 255, .6); }
.login-tab.is-on {
  background: var(--wf-panel);
  border-color: var(--wf-hairline);
  color: var(--wf-terracotta);
}

.login-grid {
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  gap: 24px;
  align-items: start;
}

/* The sign-in form with no demo-account column beside it, which is what an
   ordinary visitor now gets (PLAT-21, Dave's call 2026-08-06: the cards render
   only for a signed-in SC). One column, held at the form's own width, because
   a 360px panel stranded against an empty 1fr reads as a page that half
   loaded. */
.login-grid.is-solo {
  grid-template-columns: minmax(280px, 420px);
  /* justify-content, not justify-items: the track is a fixed 420px rather than
     auto-sized, so stretch cannot fill the row and the leftover space falls to
     the start unless it is placed. Without this the form sits pinned to the
     left of 1000px of nothing, under a tab strip that still spans the full
     width, which is the "half loaded" look this rule exists to prevent rather
     than cause. Caught in review 2026-08-06; the first version set the columns
     and claimed to centre. */
  justify-content: center;
}

.login-form { display: flex; flex-direction: column; }
.login-form label {
  font: 700 12px var(--wf-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wf-muted);
  margin-bottom: 5px;
}
.login-form input {
  font: 400 15px var(--wf-sans);
  padding: 10px 12px;
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 4px;
  background: #FFF;
  color: var(--wf-ink);
  margin-bottom: 16px;
}
.login-form input:focus {
  outline: 2px solid var(--wf-terracotta);
  outline-offset: 1px;
  border-color: var(--wf-terracotta);
}
.login-form button { margin-top: 4px; }

.form-error {
  background: var(--wf-abnormal-bg);
  border-left: 3px solid var(--wf-abnormal);
  color: var(--wf-abnormal);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 12px;
  margin: 0 0 16px;
}
.login-note {
  font-size: 12.5px;
  color: var(--wf-muted);
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--wf-hairline);
}

.login-accounts h2 { font-size: 16px; }
.login-accounts-sub { font-size: 13px; color: var(--wf-muted); margin: 5px 0 14px; }

/* ---------- account groups on the provider sign-in (2026-08-06) ----------
   Dave's ask: sections with "some sort of graphical separation and title",
   once the revenue cycle accounts joined the clinical ones on this page.

   A rule above the heading rather than a box around the group: these are
   several sets of the same kind of thing, and boxing them would say they are
   several different kinds. The first group's rule is suppressed because a line
   above the first heading separates it from nothing.

   **They collapse as of 2026-08-08.13**, Dave's ask, when a fifth section
   arrived and the list stopped fitting on a screen. `<details>`, so it works
   with scripting off; everything below is making the native element look like
   the rest of this page and making the mechanic unmissable. */
.account-group {
  margin: 22px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--wf-hairline);
}
.account-group:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}

/* **Three rules to hide one triangle, and all three are needed.** Firefox and
   Chrome take `list-style`, Safari has only ever honored its own
   `::-webkit-details-marker`, and newer WebKit answers to `::marker`. Missing
   the WebKit one leaves a stray disclosure triangle sitting next to the chevron
   below, on the browser this project demos from and the one a Chromium test
   pane cannot show you. */
.account-group-summary { list-style: none; cursor: pointer; }
.account-group-summary::-webkit-details-marker { display: none; }
.account-group-summary::marker { content: ""; }

/* The flex row lives in a span inside the summary rather than on the summary
   itself. Laying out a <summary> directly has a history of breaking the toggle
   in WebKit, and an inner element costs nothing and cannot. */
.account-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.account-group-summary:hover .account-group-title { color: var(--wf-terracotta); }
/* Keyboard focus has to be visible on the thing that opens, because with the
   marker gone there is otherwise nothing to say a heading is interactive. */
.account-group-summary:focus-visible {
  outline: 2px solid var(--wf-terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}
.account-group-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--wf-ink);
}
/* How many accounts are behind a closed heading. On a collapsed section this is
   the only thing saying whether it is worth opening, which is why it is
   counted in the page rather than typed. */
.account-group-count {
  font: 700 11px/1.7 var(--wf-sans);
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--wf-shell);
  color: var(--wf-muted);
  text-align: center;
}
/* The chevron, drawn rather than a character, so it rotates cleanly and needs
   no font. Pushed to the right so the whole row reads as one control. */
.account-group-chev {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--wf-muted);
  border-bottom: 2px solid var(--wf-muted);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.account-group[open] > .account-group-summary .account-group-chev {
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .account-group-chev { transition: none; }
}
.account-group-lede {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wf-muted);
  max-width: 62ch;
}
.login-accounts-foot {
  font-size: 12.5px;
  color: var(--wf-muted);
  margin: 14px 0 0;
}

.account-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
/* Inside an open group the cards need air under the lede that the flat layout
   got from the group's own bottom margin. The patient side has no group, so it
   keeps the old spacing and this rule never applies to it. */
.account-group > .account-list { margin-top: 12px; }

/* The account card is a button so it is keyboard reachable and the hint can be
   shown on focus as well as hover. */
.account-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--wf-panel);
  border: 1px solid var(--wf-hairline);
  border-radius: 6px;
  padding: 13px 15px;
  cursor: pointer;
  transition: border-color .13s, box-shadow .13s;
}
.account-card:hover,
.account-card:focus-visible {
  border-color: var(--wf-terracotta);
  box-shadow: 0 1px 0 var(--wf-terracotta);
  outline: none;
}
.account-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.account-name { font: 700 14.5px var(--wf-sans); }
.account-tag {
  font: 700 10px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-muted);
  white-space: nowrap;
}
.account-sub {
  display: block;
  font-size: 12.5px;
  color: var(--wf-body);
  margin-top: 3px;
}

/* The hover-help. Carries the credentials and the showcase note. */
.account-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  display: none;
  background: var(--wf-ink);
  color: #FAF5EF;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(59, 46, 37, .28);
}
.account-card:hover .account-hint,
.account-card:focus-visible .account-hint { display: block; }

/* Wraps because the passwords are 16 to 19 random characters as of 2026-07-30
   and a username and a password no longer sit side by side in a 320px card. */
.hint-creds { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 7px; }
.hint-creds code {
  word-break: break-all;
  font: 700 12.5px var(--wf-mono);
  background: rgba(250, 245, 239, .14);
  border: 1px solid rgba(250, 245, 239, .22);
  border-radius: 3px;
  padding: 3px 7px;
  color: #FFF;
}
.hint-showcase { display: block; color: #E4D8CB; }
.hint-fill,
.hint-signin {
  display: block;
  margin-top: 8px;
  font: 700 10.5px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-gold);
}
/* The second of the two is the one the filled card shows. */
.hint-signin { display: none; }
.account-card.just-filled .hint-fill { display: none; }
.account-card.just-filled .hint-signin { display: block; }

/* Confirmation that a click landed, since the form is off to the side. Olive
   rather than terracotta, and since 2026-08-02.6 it carries a second meaning
   as well as the first: this is the card whose next click signs in. */
.account-card.just-filled {
  border-color: var(--wf-olive);
  box-shadow: 0 1px 0 var(--wf-olive);
}

/* ---------- the sign-out notice ---------- */

/* Replaced the wrong-side interstitial on 2026-07-30. Crossing between the two
   sides signs the current identity out and says so here, rather than stopping
   on a page to ask. Bottom right, because the top of every portal page already
   carries the demo banner and the header.

   **The toast itself moved out to css/toast.css on 2026-08-06 (`PLAT-95`) and
   was renamed `.demo-toast`.** Nothing about it was portal-specific except the
   name and these four colors, and the console and Veranta wanted the same
   component for their reset confirmations. What is left here is the palette;
   the mechanics, and the warning about keeping the per-site copies identical,
   are in that file. A second `:root` block rather than four more lines in the
   one at the top of this file, so the palette sits with the note explaining
   what it is for. */
:root {
  --toast-bg: var(--wf-ink);
  --toast-edge: var(--wf-gold);
  --toast-edge-bad: var(--wf-abnormal);
  --toast-text: #FAF5EF;
  --toast-note: #E4D8CB;
}

/* ---------- provider landing ---------- */

.landing { padding: 30px 28px 60px; }
.landing-head { margin-bottom: 26px; }
.landing-head h1 { font-size: 27px; }
.landing-head p { color: var(--wf-body); margin: 7px 0 0; max-width: 70ch; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}
.stat {
  background: var(--wf-panel);
  border: 1px solid var(--wf-hairline);
  border-radius: 6px;
  padding: 15px 17px;
}
/* A stat that jumps to the section it summarizes. Dave's ask, 2026-08-02.6:
   the four above Your visits on MyWinterfield each have a panel further down
   the page, and the section nav in the banner is not the only place a person
   should be able to click.

   Deliberately not styled as a link. It keeps the ink color and loses the
   underline, because a tile that turned terracotta would read as four links in
   a row rather than as the four numbers it is; the pointer, the lift on hover
   and the terracotta edge are what say it is clickable. The provider landing
   page uses plain div.stat and is untouched by any of this. */
a.stat {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color .13s, box-shadow .13s, transform .13s;
}
a.stat:hover {
  border-color: var(--wf-terracotta);
  box-shadow: 0 2px 10px rgba(59, 46, 37, .09);
  transform: translateY(-1px);
  color: inherit;
}
a.stat:focus-visible {
  outline: 2px solid var(--wf-terracotta);
  outline-offset: 2px;
}
/* The cue that this number goes somewhere, kept small enough that four of them
   in a row do not shout. */
a.stat .stat-label::after {
  content: " \203A";
  color: var(--wf-terracotta);
  font-size: 12px;
}

.stat-value {
  font: 600 25px var(--wf-serif);
  display: block;
  line-height: 1.15;
}
.stat-label {
  font: 700 10.5px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-muted);
  display: block;
  margin-top: 4px;
}

.op-section { margin-bottom: 30px; }
.op-section > h2 {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--wf-sans);
  font-weight: 700;
  color: var(--wf-muted);
  margin-bottom: 12px;
}
.op-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 12px;
}
.op-card {
  display: block;
  background: var(--wf-panel);
  border: 1px solid var(--wf-hairline);
  border-radius: 6px;
  padding: 17px 19px;
  text-decoration: none;
  color: inherit;
  transition: border-color .13s, transform .13s;
}
.op-card:hover {
  border-color: var(--wf-terracotta);
  transform: translateY(-1px);
  color: inherit;
}
.op-card h3 { font-size: 15.5px; }
.op-card p {
  font-size: 12.5px;
  color: var(--wf-body);
  margin: 5px 0 0;
}
.op-card.is-stub { opacity: .62; }
.op-card.is-stub:hover { border-color: var(--wf-hairline-strong); transform: none; }
.op-badge {
  display: inline-block;
  font: 700 9.5px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--wf-caution-bg);
  color: var(--wf-caution);
  border-radius: 3px;
  padding: 2px 6px;
  margin-left: 7px;
  vertical-align: 2px;
}

/* ---------- patient search workspace ---------- */

.work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px 16px;
  max-width: var(--wf-portal-max);
  margin: 0 auto;
  width: 100%;
}
.work-head h1 { font-size: 23px; }
.work-head .crumb {
  font-size: 12.5px;
  color: var(--wf-muted);
}
.work-head .crumb a { text-decoration: none; }
.work-head .crumb a:hover { text-decoration: underline; }

.work-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
  padding: 0 28px 60px;
  max-width: var(--wf-portal-max);
  margin: 0 auto;
  width: 100%;
}

.search-panel { position: sticky; top: 76px; }
.search-form { display: grid; gap: 11px; }
.search-form .field { display: flex; flex-direction: column; }
.search-form label {
  font: 700 11px var(--wf-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wf-muted);
  margin-bottom: 4px;
}
.search-form input {
  font: 400 14.5px var(--wf-sans);
  padding: 9px 11px;
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 4px;
  background: #FFF;
  color: var(--wf-ink);
}
.search-form input:focus {
  outline: 2px solid var(--wf-terracotta);
  outline-offset: 1px;
  border-color: var(--wf-terracotta);
}
.search-form .field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.search-hint { font-size: 12px; color: var(--wf-muted); margin: 0; }
.search-actions { display: flex; gap: 8px; align-items: center; }

.search-status {
  font: 700 11px var(--wf-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wf-muted);
  margin: 16px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--wf-hairline);
}

.result-list { list-style: none; margin: 0; padding: 0; }
.result-list li + li { border-top: 1px solid var(--wf-hairline); }
.result {
  display: block;
  padding: 10px 2px;
  text-decoration: none;
  color: inherit;
}
.result:hover { background: var(--wf-tint); color: inherit; }
.result-name { font: 700 14px var(--wf-sans); display: block; }
.result-meta { font-size: 12px; color: var(--wf-muted); display: block; margin-top: 2px; }
.result mark {
  background: rgba(233, 161, 59, .34);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.result-empty { font-size: 13px; color: var(--wf-muted); padding: 8px 0; }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; }

/* A long table cut to five rows, with a button for the rest.
   Deliberately not a scroll box, which is what this was until 2026-07-30.4.
   A scrollable region in the middle of a long page swallows the wheel: the
   pointer crosses it on the way down the chart, the page stops moving and the
   box starts, and the reader has to go around it. Cutting the rows costs one
   click and steals nothing. */
.table-short tbody tr:nth-child(n+6) { display: none; }
.table-short.is-expanded tbody tr { display: table-row; }
/* The row hover already reads as "this is clickable". portal.js makes it so;
   this says so. The Open link inside it stays the real control. */
.table-short tbody tr { cursor: pointer; }

/* Name on its line, MRN under it. Side by side, the pair wrapped mid-name on
   almost every row of every patient list, and those rows are two lines tall
   anyway. */
.mrn-line { display: block; margin-top: 1px; }
/* A second line under a cell's main value, in prose rather than in the mono an
   MRN gets. The upcoming list puts its countdown here: "In 6 days" is a
   sentence, and setting it in a code face made it read like an identifier. */
.sub-line {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--wf-muted);
  font-weight: 400;
}
/* Enough width for a three-part name on one line before the column gives up
   and wraps it. Auto table layout will still take the column narrower than
   this on a small screen, which is the right outcome there. */
.patient-cell { min-width: 190px; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data th {
  text-align: left;
  font: 700 10.5px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-muted);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--wf-hairline-strong);
  white-space: nowrap;
}
table.data td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--wf-hairline);
  vertical-align: top;
}
table.data tbody tr:hover { background: var(--wf-tint); }
table.data tr.is-target { background: rgba(233, 161, 59, .18); }
table.data td.num { text-align: right; padding-right: 16px; font-variant-numeric: tabular-nums; }
table.data td.nowrap, table.data th.nowrap { white-space: nowrap; }
table.data a { text-decoration: none; font-weight: 600; }
table.data a:hover { text-decoration: underline; }
.t-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-quiet { color: var(--wf-muted); }
.t-code {
  font: 400 11.5px var(--wf-mono);
  color: var(--wf-muted);
}

/* ---------- clinical flags and pills ---------- */

.pill {
  display: inline-block;
  font: 700 10px var(--wf-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}
.pill-amb { background: var(--wf-tint); color: var(--wf-body); }
.pill-imp { background: var(--wf-abnormal-bg); color: var(--wf-abnormal); }
.pill-emer { background: #F6E2DC; color: #8C2A16; }
.pill-active { background: #E8EDE4; color: var(--wf-normal); }
.pill-resolved { background: var(--wf-tint); color: var(--wf-muted); }
/* Booked, not happened. Gold rather than terracotta: the brand's forward-looking
   accent, and it does not read as an alert the way the abnormal reds do. */
.pill-scheduled {
  background: #FBEEDA;
  color: #8A5A11;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 10.5px;
}

/* Prior authorization state on a scheduled booking, WIN-56. Same geometry as
   pill-scheduled so a row with two pills reads as one line rather than two
   competing badges.

   **These describe an overlay, not the record**, and the panel's own note says
   so. They only ever appear for the SC whose console session obtained the
   determination; an anonymous browser and every other SC see the booking with
   no pill at all, which is the correct answer rather than a missing one. */
.pill-auth-ok, .pill-auth-no, .pill-auth-wait, .pill-auth-none {
  text-transform: none;
  letter-spacing: .02em;
  font-size: 10.5px;
}
.pill-auth-ok { background: #E4EDE0; color: #35502C; }
.pill-auth-no { background: var(--wf-abnormal-bg); color: var(--wf-abnormal); }
.pill-auth-wait { background: #E8EEF5; color: #2C4A6B; }
.pill-auth-none { background: var(--wf-tint); color: var(--wf-muted); }

.flag { font-weight: 700; white-space: nowrap; }
.flag-high { color: var(--wf-abnormal); }
.flag-low { color: var(--wf-abnormal); }
.flag::after {
  font-size: 11px;
  margin-left: 3px;
}
.flag-high::after { content: "\2191 H"; }
.flag-low::after { content: "\2193 L"; }

/* ---------- patient chart ---------- */

/* The patient banner and the section nav pin together, under the portal header.
   One sticky wrapper, not two sticky children: they were previously both
   sticky at top: 58px, so the nav came to rest in the same place as the banner
   and, having the lower z-index, slid underneath it and disappeared. Sticking
   the nav below the banner instead would mean hardcoding the banner's height,
   which is not a constant, because .chart-facts wraps to a second row on a
   narrow window. The wrapper does the arithmetic for free. */
.chart-sticky {
  position: sticky;
  top: 58px;
  z-index: 30;
}

.chart-banner {
  background: var(--wf-panel);
  border-bottom: 1px solid var(--wf-hairline);
}
.chart-banner .portal-wrap {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding-top: 15px;
  padding-bottom: 15px;
}
.chart-id h1 { font-size: 22px; line-height: 1.2; }

/* Rendered only while a visit is focused, in place of the plain h1. Two lines
   inside one outlined box: a small terracotta label saying where the link
   goes, and the patient name at heading size. The name keeps the ink color
   rather than taking the link terracotta, so the banner still reads as a
   patient banner first and a control second. */
.chart-name-return { font-size: 22px; line-height: 1.2; }
.chart-name-return a {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 5px;
  padding: 5px 13px 7px;
  transition: background .13s, border-color .13s;
}
.chart-name-return a:hover {
  background: var(--wf-tint);
  border-color: var(--wf-terracotta);
}
.chart-name-return a:focus-visible {
  outline: 2px solid var(--wf-terracotta);
  outline-offset: 1px;
}
.chart-return-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 700 9.5px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-terracotta);
}
.chart-name-return a:hover .chart-return-label { color: var(--wf-terracotta-hover); }
.chart-return-label svg { flex: none; }
.chart-return-name { color: var(--wf-ink); }

.chart-id .chart-sub {
  font-size: 12.5px;
  color: var(--wf-muted);
  margin-top: 3px;
}
.chart-facts {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-left: auto;
}
.chart-fact { line-height: 1.3; }
.chart-fact .k {
  display: block;
  font: 700 9.5px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-muted);
}
.chart-fact .v { font-size: 13.5px; font-weight: 600; }

.chart-nav {
  background: var(--wf-shell);
  border-bottom: 1px solid var(--wf-hairline);
}
.chart-nav .portal-wrap {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding-top: 7px;
  padding-bottom: 7px;
}
.chart-nav a {
  font: 700 12px var(--wf-sans);
  text-decoration: none;
  color: var(--wf-body);
  padding: 6px 11px;
  border-radius: 4px;
  white-space: nowrap;
}
.chart-nav a:hover { background: var(--wf-panel); color: var(--wf-ink); }

.chart-body {
  padding: 22px 28px 70px;
  max-width: var(--wf-portal-max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  align-items: start;
}
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

/* Anchor targets sit under three pinned bars, the portal header, the patient
   banner and the section nav, so a jump to #labs has to stop short of #labs or
   the bars cover the heading it just jumped to. --wf-chart-chrome is the height
   of all three, measured and set by portal.js because it depends on whether the
   banner facts have wrapped. The fallback is the measured height with nothing
   wrapped: 59 header, 92 banner, 42 nav, on 2026-07-29. */
.chart-body > section {
  scroll-margin-top: calc(var(--wf-chart-chrome, 193px) + 14px);
}

.kv { margin: 0; font-size: 13.5px; }
.kv div {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 10px;
  padding: 5px 0;
}
.kv div + div { border-top: 1px solid var(--wf-hairline); }
.kv dt { color: var(--wf-muted); font-size: 12.5px; }
.kv dd { margin: 0; }

.stack { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.stack li { padding: 8px 0; }
.stack li + li { border-top: 1px solid var(--wf-hairline); }
.stack .line1 { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.stack .title { font-weight: 600; }
.stack .line2 { font-size: 12.5px; color: var(--wf-muted); margin-top: 2px; }

.empty-note {
  font-size: 13px;
  color: var(--wf-muted);
  font-style: italic;
  margin: 0;
}

/* ---------- code explanations ---------- */

/* A code that can explain itself. Dotted underline rather than a link color:
   it is not navigation, and the chart already has enough terracotta in it. */
/* Never broken across lines. A code is one token to read even though it has a
   hyphen in the middle, and a browser will happily break "13457-7" after the
   hyphen when the column is tight. */
.code-chip {
  cursor: help;
  white-space: nowrap;
  border-bottom: 1px dotted var(--wf-hairline-strong);
}
.code-chip:hover { color: var(--wf-body); border-bottom-color: var(--wf-terracotta); }
.code-chip:focus-visible {
  outline: 2px solid var(--wf-terracotta);
  outline-offset: 2px;
  border-radius: 2px;
}

.code-pop {
  position: fixed;
  z-index: 60;               /* above the pinned banner and nav, below dialogs */
  width: min(330px, calc(100vw - 24px));
  background: var(--wf-panel);
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(59, 46, 37, .22);
  padding: 12px 14px;
  font: 400 13px/1.5 var(--wf-sans);
  color: var(--wf-ink);
}
.code-pop[hidden] { display: none; }
.code-pop-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 5px;
}
.code-pop-system {
  font: 700 9.5px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-muted);
}
.code-pop-code { font: 400 12px var(--wf-mono); color: var(--wf-body); }
.code-pop-title { margin: 0; font-weight: 600; }
.code-pop-detail { margin: 5px 0 0; font-size: 12.5px; color: var(--wf-body); }
.code-pop-ours {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--wf-body);
  border-left: 2px solid var(--wf-gold);
  padding-left: 8px;
}
.code-pop-source {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--wf-hairline);
  font-size: 11px;
  line-height: 1.45;
  color: var(--wf-muted);
}

/* ---------- provider notes ---------- */

/* The note as filed: fixed sections, and its own line breaks. Wrapped rather
   than scrolled sideways, because a clinical note read in a 70-character
   window with a horizontal scrollbar is not read. */
.note-text {
  font: 400 12.5px/1.65 var(--wf-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--wf-ink);
  background: var(--wf-tint);
  border-radius: 5px;
  padding: 16px 18px;
}
.visit-note-head { font-size: 14px; margin: 20px 0 4px; }
.visit-note-meta {
  font-size: 12.5px;
  color: var(--wf-muted);
  margin: 0 0 10px;
}
.note-loading { color: var(--wf-muted); font-size: 13.5px; margin: 0; }

/* Two controls in one table cell, and the cell is the narrowest column. */
.row-actions {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.btn-note { padding: 3px 9px; font-size: 11.5px; }

/* The note pop-over takes the summary panel's construction wholesale, class
   `previsit` and all, and only narrows it: a note is a column of text about
   70 characters wide and does not need 860px. */
/* Both classes in the selector on purpose: `dialog.previsit` sets the width
   further down this file, and at equal specificity the later rule would win. */
dialog.previsit.notedoc { width: min(760px, 94vw); }
dialog.notedoc .previsit-body { padding: 18px 22px; }

/* ---------- scheduled visits ---------- */

.upcoming-item { padding: 12px 0; }
.upcoming-item:first-child { padding-top: 2px; }
.upcoming-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}
/* Nothing else in the chart puts a button inside a list row, and the row's own
   13.5px would otherwise win over the button's font shorthand. */
.upcoming-actions .btn { line-height: 1.2; }

/* The focused-visit panel when the visit is still ahead. Gold left edge, the
   same signal the Scheduled pill carries, so a planned visit does not read as
   a record of something that happened. */
.panel-planned { border-left: 3px solid var(--wf-gold); }
.planned-note {
  font-size: 13px;
  color: var(--wf-body);
  margin: 0 0 14px;
}

.vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
}
/* A column, so the graph can be pushed to the bottom of the tile. Grid items
   stretch to the tallest tile in their row, so bottom-aligning the graphs
   lines them all up across the row however many lines each label takes:
   "Respiratory rate" wraps to two and "Weight" does not, and before this the
   graph under the two-line label sat 15px lower than its neighbors. */
.vital {
  display: flex;
  flex-direction: column;
  background: var(--wf-tint);
  border-radius: 5px;
  padding: 10px 12px;
}
/* Value and unit are one line inside the column, not two flex items. */
.vital-value {
  display: block;
  margin-top: 1px;
}
.vital .k {
  display: block;
  font: 700 9.5px var(--wf-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wf-muted);
}
.vital .v { font: 600 18px var(--wf-serif); }
.vital .u { font-size: 11px; color: var(--wf-muted); }

/* margin-top:auto, not a fixed gap: it takes up whatever slack the tile has
   and puts the graph on the floor. */
.trend {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  /* 34 of bars plus the 8 of breathing room above them: box-sizing is
     border-box here, so the padding has to be inside the number or the bars
     lose 8px of height and stop matching the line graphs beside them. */
  height: 42px;
  margin-top: auto;
  padding-top: 8px;
}
.trend i {
  flex: 1;
  background: var(--wf-terracotta);
  opacity: .5;
  border-radius: 1px 1px 0 0;
  min-height: 2px;
}
.trend i:last-child { opacity: 1; }

/* Weight and BMI. Same box and same 34px height as the bars so a grid of
   mixed tiles still lines up; only the mark inside changes. */
.trend-line { display: block; height: auto; }
.trend-line svg {
  display: block;
  width: 100%;
  height: 34px;
  overflow: visible;
}
.trend-line polyline {
  fill: none;
  stroke: var(--wf-terracotta);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.trend-line circle { fill: var(--wf-terracotta); }

.section-more { margin-top: 12px; font-size: 12.5px; }

/* ---------- pre-visit summary ----------
   The button lives in the pinned patient banner, so it stays reachable from
   anywhere in a long chart, and the panel it opens is a native <dialog>. Native
   rather than a hand-rolled overlay for three things that are tedious and easy
   to get wrong by hand: the focus trap, Esc to close, and rendering above every
   other stacking context on the page, including the two pinned bars. */

/* Last child of the banner's flex row. .chart-facts carries the margin-left:auto
   that pushes both of them right, so this needs no margin of its own. */
.chart-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-previsit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.btn-previsit svg { flex: none; }

/* The height is definite rather than left to the content, and that is a fix
   rather than a preference. It is the same fix `.diag-dialog` carries in
   diagnostics.css and it is here for the same reason.

   With `height: auto` the body below is a flex item of `flex: 1 1 0%`. A zero
   basis contributes nothing to the container's intrinsic height, so the dialog
   has only the head and the foot to size itself from. Some browsers ignore that
   and size the container from the item's max-content contribution anyway, and
   some follow it and collapse the panel to its header. That split is the whole
   bug: Dave saw the diagnostics version collapse on Mac Safari on 2026-07-30
   while the same page was correct on Windows, and reported this panel behaving
   the same way on 2026-07-30.3. A definite height gives the flex layout a real
   number to distribute and takes the guess away.

   This was predicted before it was reported. Session 2026-07-30.1 recorded that
   this dialog shared the construction and had not been seen to misbehave. It
   had; nobody had opened it in Safari. */
dialog.previsit {
  width: min(860px, 94vw);
  max-width: none;
  height: min(88vh, 900px);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--wf-panel);
  color: var(--wf-ink);
  font: 400 15px/1.55 var(--wf-sans);
  box-shadow: 0 24px 70px rgba(59, 46, 37, .34);
  overflow: hidden;
}

/* The display belongs on [open] and nowhere else.
   Browsers hide a closed dialog with `dialog:not([open]) { display: none }` in
   their own stylesheet. That has the same specificity as `dialog.previsit`, and
   an author stylesheet beats the browser's at equal specificity, so putting
   `display: flex` on the element itself overrode it and the closed panel stayed
   displayed. It then took the browser's `position: absolute; margin: auto` for
   dialogs and settled at the top of the page, half behind the header, where Dave
   found it on 2026-07-29.

   Column, so the head and foot hold still and only the summary scrolls: a long
   summary in a panel that scrolls as one block loses its own close button off
   the top. */
dialog.previsit[open] {
  display: flex;
  flex-direction: column;
}
dialog.previsit::backdrop {
  background: rgba(43, 33, 26, .52);
  backdrop-filter: blur(2px);
}

dialog.previsit[open] { animation: previsit-in .16s ease-out; }
@keyframes previsit-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.previsit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px 15px;
  border-bottom: 1px solid var(--wf-hairline);
}
.previsit-head .kicker { margin-bottom: 3px; }
.previsit-head h2 { font-size: 20px; line-height: 1.2; }
.previsit-sub {
  font-size: 12.5px;
  color: var(--wf-muted);
  margin: 4px 0 0;
}

/* Deliberately labeled as well as an X. The panel can be holding a minute of
   work and the way out of it should not be a guess. */
.previsit-close {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font: 700 12.5px var(--wf-sans);
  color: var(--wf-body);
  background: transparent;
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 4px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.previsit-close:hover {
  background: var(--wf-abnormal-bg);
  border-color: var(--wf-abnormal);
  color: var(--wf-abnormal);
}
.previsit-close .x { font-size: 17px; line-height: 1; margin-top: -1px; }

/* `flex: 1 1 auto` rather than `flex: 1`, which is `flex: 1 1 0%`. The basis is
   the half of the fix that lives on the item: with a zero basis this box tells
   its parent it needs no room at all, which is what let the panel collapse.

   min-height: 0 is what lets a flex item scroll instead of growing past its
   parent. Without it the item's automatic minimum is its content size and the
   overflow never engages, so a long summary would push the foot off the bottom
   instead of scrolling under it. */
.previsit-body {
  overflow-y: auto;
  padding: 20px 24px 24px;
  flex: 1 1 auto;
  min-height: 0;
}
.previsit-body:focus { outline: none; }

.previsit-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-top: 1px solid var(--wf-hairline);
  background: var(--wf-tint);
}
.previsit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* `display: flex` above is an author rule and beats the browser's own
   `[hidden] { display: none }`, so every dialog that ships its action bar hidden
   and unhides it on load was showing the bar the whole time. Found 2026-07-30.10
   while building the patient note panel; it was already true of the pre-visit
   and note panels beside it. */
.previsit-actions[hidden] { display: none; }
.previsit-note {
  font-size: 11.5px;
  color: var(--wf-muted);
  margin: 0;
  max-width: 44ch;
}

/* ---- waiting ----
   An elapsed count rather than a progress bar. Nothing here knows how far along
   the workflow is, and a bar that pretends to would be inventing the number. */

/* Centered in the body, which is a consequence of the definite height above
   rather than a preference on its own. The wait normally runs 15 to 60 seconds,
   so it is the state the panel is in for most of a use, and four lines pinned to
   the top of a panel eight times their height reads as something that failed to
   load. The summary state fills the panel and needs none of this.

   The error state is deliberately left alone. It is short-lived and it is read
   from the top down, where the first line is the actionable one. */
.previsit-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 34px 0 30px;
  text-align: center;
}
.previsit-wait-line {
  font: 600 16px var(--wf-serif);
  margin: 0 0 6px;
}
.previsit-elapsed {
  font: 600 26px var(--wf-serif);
  color: var(--wf-terracotta);
  font-variant-numeric: tabular-nums;
  margin: 0 0 10px;
}
.previsit-wait-note {
  font-size: 12.5px;
  color: var(--wf-muted);
  margin: 0 auto 18px;
  max-width: 46ch;
}
.previsit-dots { display: inline-flex; gap: 3px; margin-left: 5px; }
.previsit-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wf-terracotta);
  animation: previsit-pulse 1.1s infinite ease-in-out;
}
.previsit-dots i:nth-child(2) { animation-delay: .16s; }
.previsit-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes previsit-pulse {
  0%, 70%, 100% { opacity: .25; }
  35% { opacity: 1; }
}

/* ---- failure ---- */

.previsit-error { padding: 24px 0; }
.previsit-error-line {
  background: var(--wf-abnormal-bg);
  border-left: 3px solid var(--wf-abnormal);
  color: var(--wf-abnormal);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 13px;
  margin: 0 0 14px;
}
/* The one line an operator can act on, so it stays in the open and wraps rather
   than truncating: it carries file paths that have to be readable in full. */
.previsit-setup {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--wf-body);
  background: var(--wf-caution-bg);
  border-left: 3px solid var(--wf-caution);
  padding: 10px 12px;
  margin: 0 0 14px;
  word-break: break-word;
}

.previsit-detail { margin: 0 0 16px; font-size: 12.5px; }
.previsit-detail summary {
  cursor: pointer;
  color: var(--wf-muted);
  font-weight: 600;
}
.previsit-detail pre {
  font: 400 11.5px/1.5 var(--wf-mono);
  background: var(--wf-tint);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 9px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--wf-body);
}

.previsit-raw {
  font: 400 12.5px/1.6 var(--wf-mono);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  color: var(--wf-body);
}

/* ---- the rendered summary ----
   Reads as a clinical document rather than as a web page: a measure narrow
   enough to scan, serif headings, and tables that match the chart's own. */

.md { max-width: 68ch; }
.md > :first-child { margin-top: 0; }
.md h3 {
  font-size: 18px;
  margin: 24px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--wf-hairline);
}
.md h4 { font-size: 15.5px; margin: 20px 0 6px; }
.md h5, .md h6 {
  font: 700 11.5px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-muted);
  margin: 18px 0 6px;
}
.md p { margin: 0 0 11px; color: var(--wf-body); }
.md strong { color: var(--wf-ink); }
.md ul, .md ol { margin: 0 0 12px; padding-left: 21px; color: var(--wf-body); }
.md li { margin-bottom: 4px; }
.md li > ul, .md li > ol { margin: 4px 0 0; }
.md hr { border: 0; border-top: 1px solid var(--wf-hairline); margin: 20px 0; }

/* Task list items, which is how a gaps-in-care section arrives. The box is
   decoration around a real state, so it is labeled rather than left as a glyph
   a screen reader has to guess at. */
.md li.md-task { list-style: none; margin-left: -19px; }
.md .md-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  border: 1.5px solid var(--wf-hairline-strong);
  border-radius: 3px;
  font-size: 10px;
  line-height: 1;
  color: transparent;
  vertical-align: -1px;
}
.md .md-box.is-done {
  background: var(--wf-olive);
  border-color: var(--wf-olive);
  color: #FFF;
}
.md blockquote {
  margin: 0 0 12px;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--wf-gold);
  color: var(--wf-body);
}
.md blockquote p:last-child { margin-bottom: 0; }
.md code {
  font: 400 12.5px var(--wf-mono);
  background: var(--wf-tint);
  border-radius: 3px;
  padding: 1px 5px;
}
.md pre {
  background: var(--wf-tint);
  border-radius: 5px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.md pre code { background: none; padding: 0; font-size: 12px; line-height: 1.55; }
.md a { font-weight: 600; }

.md-table-scroll { overflow-x: auto; margin: 0 0 14px; }
.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.md-table th {
  text-align: left;
  font: 700 10.5px var(--wf-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-muted);
  padding: 0 12px 7px 0;
  border-bottom: 1px solid var(--wf-hairline-strong);
  white-space: nowrap;
}
.md-table td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--wf-hairline);
  vertical-align: top;
  color: var(--wf-body);
}

/* ---------- admin dashboard ---------- */

.bars { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.bars li { padding: 6px 0; }
.bars .bar-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.bars .track {
  background: var(--wf-tint);
  border-radius: 2px;
  height: 7px;
  overflow: hidden;
}
.bars .fill { background: var(--wf-terracotta); height: 100%; }
.bars .fill.alt { background: var(--wf-olive); }

/* ---------- MyWinterfield ----------

   The patient side reuses the chart's frame wholesale: .chart-sticky,
   .chart-nav, .chart-body, .panel, .stack, table.data. What is here is only what
   the patient pages have that the clinical ones do not, which is money, a lab
   chart, a compose panel, and a row of things to do. Rebuilding the frame in
   patient clothes would mean two copies of the sticky-stacking fix in
   .chart-sticky and the anchor arithmetic that goes with it. */

/* The stat row is a grid inside a grid on these pages, so it needs its own
   column span; the .col-12 in the markup only reaches elements the chart body
   already knows about. */
.stat-row.col-12 { grid-column: span 12; margin-bottom: 0; }

/* The chart marks an abnormal value with color plus an arrow and an H or an L,
   so color is never the only signal. On the patient side the words are already
   in the row, "Above the usual range", and an H beside them is a second copy of
   the same fact written in a language the reader did not ask for. Drop the
   glyph only where the sentence is present; anywhere else the flag keeps it. */
.plain-flags .flag::after, .chart-fact .flag::after { content: none; }

.reach-lede {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--wf-body);
  max-width: 78ch;
}

/* A phone number never breaks across lines. The care team number in the
   MyWinterfield lede was splitting after the hyphen as "(619) 555-" and
   "0142", which is a number a reader has to reassemble. Written against every
   tel: link in the portal rather than that one paragraph, because it is true
   of all of them and there is no length at which breaking one would be right.
   Dave's ask, 2026-08-02.6. */
a[href^="tel:"] { white-space: nowrap; }
.reach-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* One of these is a <button> and the rest are <a>. Buttons do not inherit type
   or alignment, so say it once here rather than leaving the note card sitting a
   pixel off from its neighbors in a way nobody can quite name. */
.reach-card {
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.reach-card h3 { margin: 0; font-family: var(--wf-serif); }

/* ---------- what a visit cost ---------- */

.charges {
  border: 1px solid var(--wf-hairline);
  border-radius: 6px;
  overflow: hidden;
  max-width: 520px;
}
.charge-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 14px;
  font-size: 13.5px;
}
.charge-row + .charge-row { border-top: 1px solid var(--wf-hairline); }
.charge-k { color: var(--wf-body); }
.charge-v { font-variant-numeric: tabular-nums; font-weight: 600; }
.charge-row.is-credit .charge-v { color: var(--wf-normal); }
.charge-row.is-total {
  background: var(--wf-tint);
  border-top: 1px solid var(--wf-hairline-strong);
}
.charge-row.is-total .charge-k { font-weight: 700; color: var(--wf-ink); }
.charge-row.is-total .charge-v { font: 600 17px var(--wf-serif); }
.charge-status {
  margin: 11px 0 0;
  font-size: 12.5px;
  color: var(--wf-muted);
  max-width: 62ch;
}
.charge-status .pill { margin-right: 6px; }
.charge-sub { font-size: 14px; margin: 20px 0 8px; }

.pill-paid { background: #E8EDE4; color: var(--wf-normal); }
.pill-due { background: var(--wf-caution-bg); color: var(--wf-caution); }
.pill-overdue { background: var(--wf-abnormal-bg); color: var(--wf-abnormal); }

/* ---------- one result ---------- */

/* The laboratory's own name for a test, printed under the plain-language one in
   a results table. Quiet, because it is the second thing to read, and on its own
   line, because two names on one line reads as one long name. */
.test-formal {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--wf-muted);
}
.lab-formal {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 13px;
  color: var(--wf-muted);
}
.lab-formal strong { color: var(--wf-body); }

.lab-headline {
  display: flex;
  gap: 28px;
  align-items: baseline;
  flex-wrap: wrap;
}
.lab-headline-value { display: flex; align-items: baseline; gap: 7px; }
.lab-big { font: 600 44px/1 var(--wf-serif); }
.lab-big.is-out { color: var(--wf-abnormal); }
.lab-unit { font-size: 15px; color: var(--wf-muted); }
.lab-headline-note { flex: 1 1 340px; }
.lab-headline-note p { margin: 0 0 6px; font-size: 13px; }
.lab-state { font-weight: 700; }
.lab-state.is-high, .lab-state.is-low { color: var(--wf-abnormal); }
.lab-state.is-ok { color: var(--wf-normal); }

/* The chart is one inline SVG scaled to the panel. No library: PLAT-09 keeps
   the external dependency list at one entry and a dozen points does not buy a
   second. Points are placed by real date, so a six-year gap looks like one. */
.lab-chart {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  margin: 4px 0 2px;
  overflow: visible;
}
.lab-band { fill: rgba(74, 93, 67, .13); }
.lab-band-edge { stroke: rgba(74, 93, 67, .5); stroke-width: 1; stroke-dasharray: 3 3; }
.lab-axis-line { stroke: var(--wf-hairline-strong); stroke-width: 1; }
.lab-line {
  fill: none;
  stroke: var(--wf-muted);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.lab-dot { fill: var(--wf-panel); stroke: var(--wf-muted); stroke-width: 1.6; }
.lab-drop { stroke: var(--wf-terracotta); stroke-width: 1; stroke-dasharray: 2 3; }
.lab-dot-current { fill: var(--wf-terracotta); stroke: var(--wf-panel); stroke-width: 2.4; }
.lab-current-label {
  font: 700 12px var(--wf-sans);
  fill: var(--wf-terracotta);
}
.lab-axis { font: 400 11px var(--wf-sans); fill: var(--wf-muted); }
.lab-axis.is-current { font-weight: 700; fill: var(--wf-terracotta); }

.lab-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
  font-size: 12px;
  color: var(--wf-muted);
}
.lab-legend .key {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-left: 12px;
}
.lab-legend .key:first-child { margin-left: 0; }
.key-current { background: var(--wf-terracotta); }
.key-dot { background: var(--wf-panel); border: 1.6px solid var(--wf-muted); }
.key-band { background: rgba(74, 93, 67, .3); border-radius: 2px; }

/* ---------- send a note ahead ---------- */

dialog.previsit.ahead { width: min(620px, 94vw); height: auto; max-height: 88vh; }
dialog.previsit.shotdoc { width: min(520px, 94vw); height: auto; max-height: 88vh; }
dialog.previsit.ahead form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.ahead-lede { margin: 0 0 16px; font-size: 13.5px; color: var(--wf-body); }
.ahead-label {
  display: block;
  font: 700 11px var(--wf-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wf-muted);
  margin: 0 0 5px;
}
.ahead-select, .ahead-text {
  width: 100%;
  font: 400 14px/1.5 var(--wf-sans);
  color: var(--wf-ink);
  background: var(--wf-panel);
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 5px;
  padding: 9px 11px;
  margin-bottom: 16px;
}
.ahead-text { resize: vertical; min-height: 120px; }
.ahead-select:focus, .ahead-text:focus {
  outline: 2px solid var(--wf-terracotta);
  outline-offset: 1px;
  border-color: var(--wf-terracotta);
}
.ahead-count { margin: -12px 0 14px; font-size: 11.5px; color: var(--wf-muted); }
.ahead-warn {
  margin: -6px 0 12px;
  font: 700 12.5px var(--wf-sans);
  color: var(--wf-abnormal);
}
.ahead-urgent {
  margin: 0;
  padding: 11px 13px;
  border-left: 3px solid var(--wf-gold);
  background: var(--wf-caution-bg);
  font-size: 12.5px;
  color: var(--wf-body);
}
.ahead-done { text-align: center; padding: 26px 8px 14px; }
.ahead-done svg { color: var(--wf-normal); }
.ahead-done h3 { font-size: 21px; margin: 12px 0 8px; }
.ahead-done p { margin: 0 auto 8px; max-width: 44ch; font-size: 13.5px; color: var(--wf-body); }

/* ---------- footer ---------- */

/* Pinned to the bottom of the viewport, the other half of the pinned header.
   Dave's ask, 2026-08-02.6: chrome on both edges is what makes a screen read
   as an application rather than as a page you scroll to the end of, and the SC
   console had already proved the shape.

   Sticky rather than fixed, for the reason console.css sets out at length:
   body.portal is already a flex column with min-height 100vh, so the footer is
   its last item and the browser does the pinning. Fixed would take it out of
   the flow and every page would then need bottom padding equal to a height
   that is not a constant.

   `margin-top: auto` stays and still does its old job. It is what holds the
   footer at the bottom of a page too short to scroll; sticky only takes over
   once there is scrolling to do.

   Opaque, so content passing underneath disappears cleanly rather than showing
   through the bar. z-index 20 beats page content and stays under .chart-sticky
   at 30 and .portal-header at 40, which is the order these meet in on a
   scrolled chart. */
.portal-footer {
  margin-top: auto;
  background: var(--wf-panel);
  border-top: 1px solid var(--wf-hairline);
  font-size: 12.5px;
  color: var(--wf-muted);
  position: sticky;
  bottom: 0;
  z-index: 20;
}
.portal-footer .portal-wrap {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 15px;
  padding-bottom: 15px;
}
.portal-footer-links { display: flex; gap: 16px; }
.portal-footer a { text-decoration: none; }
.portal-footer a:hover { text-decoration: underline; }

/* ---------- responsive ----------
   The workspace is a desktop tool and is not pretending otherwise. These
   breakpoints keep it usable on a tablet or a phone rather than optimal: the
   two-column workspace stacks, and the chart's paired columns become one. */

@media (max-width: 1080px) {
  .login-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .search-panel { position: static; }
  .col-6 { grid-column: span 12; }
  .chart-facts { margin-left: 0; gap: 18px; }
}

@media (max-width: 620px) {
  .portal-wrap { padding: 0 16px; }
  /* Nearly full screen on a phone, and squared off at the bottom because there
     is no backdrop left to see under it. */
  dialog.previsit {
    width: 100vw;
    max-height: 92vh;
    border-radius: 8px 8px 0 0;
    margin: auto 0 0;
  }
  .previsit-body { padding: 16px 16px 20px; }
  .previsit-head, .previsit-foot { padding-left: 16px; padding-right: 16px; }
  .previsit-note { display: none; }
  .work-head, .work-grid, .chart-body, .landing, .login-page { padding-left: 16px; padding-right: 16px; }
  .portal-context { display: none; }
  .chart-sticky { position: static; }
  .chart-body > section { scroll-margin-top: 16px; }
  .account-hint { position: static; display: block; margin-top: 10px; }
  /* The hint is open all the time here, so the click prompts are noise rather
     than help. The second selector has to carry .just-filled to outweigh the
     rule that turns it on; a media query adds no specificity of its own. */
  .hint-fill { display: none; }
  .account-card.just-filled .hint-signin { display: none; }
  .search-form .field-pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .op-card:hover { transform: none; }
  /* The global rule above only covers transitions. These two are animations, and
     one of them pulses continuously for the length of the wait. */
  dialog.previsit[open] { animation: none; }
  .previsit-dots i { animation: none; opacity: .6; }
}

/* ---------------- encounter note and medication screening ----------------
   `patient.php` in notes mode, `js/rxwarn.js`. Deliberately plain: the panel
   sits above a chart the room is meant to be reading, so it has to look like
   somewhere to type rather than somewhere to look. */

.rxw-body { padding: 4px 0 2px; }
.rxw-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.rxw-notes {
  width: 100%;
  font: inherit;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--line, #d7dbe3);
  border-radius: 8px;
  resize: vertical;
  background: #fff;
}
.rxw-notes:focus-visible { outline: 2px solid var(--brand, #0077cb); outline-offset: 1px; }
.rxw-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.rxw-hint { margin: 0; font-size: 13px; opacity: .72; }
.rxw-out { margin-top: 16px; }
.rxw-status { margin: 0 0 6px; }
.rxw-detail { margin: 0; font-size: 13px; opacity: .8; }
.rxw-out.is-error .rxw-status { color: #a3231f; }
.rxw-md > :first-child { margin-top: 0; }
.rxw-md > :last-child { margin-bottom: 0; }
.rxw-md table { border-collapse: collapse; }
.rxw-md th, .rxw-md td { border: 1px solid var(--line, #d7dbe3); padding: 5px 9px; }
.rxw-meta { margin: 12px 0 0; font-size: 13px; opacity: .72; }

@media (prefers-reduced-motion: reduce) {
  .rxw-out { transition: none; }
}

/* ---------------------------------------------- pre-visit questionnaire
   Plan Q steps C and D, 2026-08-14. The panel on the provider chart and the
   form page on the patient side.

   **The patient's own words are set as a quote and everything else is trim**,
   which is the whole layout argument. Somebody ticking "cough" tells a
   clinician less than the same person writing that they get short of breath on
   the stairs, so the free text is the body copy and the checkbox answers are
   pills beside it. Inverting that would be easier to build and would put the
   least informative thing on the page in the largest type. */

.intake-list { gap: 18px; }

/* **`.stack .intake-item`, not `.intake-item`, and the extra class is the whole
   point.** `.stack li` above sets `padding: 8px 0`, which is 0,0,1,1 against a
   bare class's 0,0,1,0, so it wins on specificity no matter how far down this
   file the rule sits. The padding-left simply never applied and the text sat
   hard against the gold rule; Dave caught it on screen, 2026-08-14. */
.stack .intake-item {
  border-left: 3px solid var(--wf-gold);
  padding: 2px 0 2px 18px;
}
.stack .intake-item + .intake-item {
  border-top: 1px solid var(--wf-hairline);
  padding-top: 16px;
}

.intake-when {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* A repeat delivery of the same Airtable record. Deliberately quiet: it is a
   fact about our plumbing, not about the patient, and it must not read as a
   clinical flag sitting inches from real ones. */
.intake-flag {
  font: 600 10px var(--wf-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wf-muted);
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 3px;
  padding: 1px 6px;
  cursor: help;
}

/* Not `.md blockquote`: that one lives inside rendered markdown and carries its
   own left rule, which would double the one on .intake-item. */
.intake-said {
  margin: 0 0 12px;
  padding: 0;
}
.intake-said p {
  font: 400 16px/1.55 var(--wf-serif);
  color: var(--wf-ink);
  margin: 0;
}
/* The question above the answer, not below it. Rendering it after read as an
   attribution and meant scanning the panel backwards: you finished a paragraph
   and only then found out which question it answered. */
.intake-said cite {
  display: block;
  font: 600 11px var(--wf-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wf-muted);
  font-style: normal;
  margin: 0 0 3px;
}

.intake-answers {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 12px 0 0;
  align-items: baseline;
}
.intake-answers dt {
  font: 600 11px var(--wf-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wf-muted);
}
.intake-answers dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Lower contrast than every clinical pill on this page, on purpose. These are
   the patient's self-report; the reds and ambers around them mean a machine or
   a clinician judged something. */
.pill-intake {
  background: var(--wf-tint);
  color: var(--wf-body);
  text-transform: none;
  letter-spacing: .01em;
  font-size: 11px;
  font-weight: 600;
}
.pill-intake-flag {
  background: var(--wf-caution-bg);
  color: var(--wf-caution);
  text-transform: none;
  letter-spacing: .01em;
  font-size: 11px;
  font-weight: 600;
}

/* The workflow's read, last and quiet. The quote above it is the evidence and
   this is a suggestion; giving it panel-like weight would invert that. */
.intake-triage {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--wf-tint);
  border-radius: 4px;
}
.intake-triage p { margin: 0 0 6px; font-size: 13.5px; }
.intake-triage p:last-child { margin-bottom: 0; }

/* ---- the patient's own questionnaire page ---- */

/* Airtable's iframe. A fixed height rather than an aspect ratio: the form is a
   scrolling column whose length depends on how many questions are showing, and
   an aspect-ratio box gets it wrong at both ends of the viewport range. 780px
   holds the whole form on a desktop without an inner scrollbar, measured
   against the real form rather than guessed. */
.intake-frame {
  width: 100%;
  height: 780px;
  border: 1px solid var(--wf-hairline);
  border-radius: 4px;
  background: #fff;
}
@media (max-width: 700px) {
  .intake-frame { height: 900px; }
}

/* What they already sent, listed under the form so it cannot be mistaken for
   part of it. */
.intake-past { margin-top: 28px; }
.intake-past .stack .intake-item { border-left-color: var(--wf-hairline-strong); }

/* The two questionnaire controls at the right-hand end of a scheduled booking.
   Dave's placement, 2026-08-14: the labelled buttons keep the left, these keep
   the right, and the row does not become about its controls. */
.intake-row-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  align-items: center;
}

/* Icon-only, so the padding is symmetric and the SVG is the whole content. The
   accessible name lives on aria-label at the call site; this is presentation
   only and must never be the thing carrying the meaning. */
.btn-icon {
  padding: 5px 8px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon svg { display: block; }

/* Terracotta on hover rather than the quiet button's default, so a control with
   no words still says it is live. */
.btn-icon:hover,
.btn-icon:focus-visible { color: var(--brand); border-color: var(--brand); }

@media (max-width: 700px) {
  /* On a narrow screen `.upcoming-actions` has already wrapped, so pushing
     these right leaves them stranded on a line of their own. */
  .intake-row-actions { margin-left: 0; }
}

/* The questionnaire reset, at the foot of its panel. Same geometry as
   `.apl-reset` on the appeals desk, which is the shape `PLAT-95` settled on:
   quiet button, explanatory sentence beside it, well clear of the content. */
.intake-reset {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--wf-hairline);
}
.intake-reset span {
  font-size: 12.5px;
  color: var(--wf-muted);
  max-width: 62ch;
}