/* App shell (T-017). Loaded last. Replaces the old hero/finder layout rules in style.css and polish.css.
   Sections:  2 compact hero  |  3 tool shell: sticky region, tabs, control row, chips, workspace  |  4 search panel + filters sheet  |  5 cards + detail  |  6 handout rail, bottom bar, plan dialog  |  7 income check, badges, medication list */

/* --- 2. Compact static hero: just the headline, no decoration. */
main { --pad: 40px; padding-left: var(--pad); padding-right: var(--pad); }
.intro { display: block; padding: 20px 0 10px; }
.intro h1 { margin: 0; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
@media (max-width: 999px) { main { --pad: 24px; } }
@media (max-width: 760px) {
  .intro { padding: 14px 0 8px; }
  .intro h1 { font-size: 1.75rem; }
}
@media (max-width: 620px) { main { --pad: 18px; } }
@media (max-width: 360px) { main { --pad: 14px; } }

/* --- 3. Tool shell. One sticky region holds the tool bar (tabs + search/filters) and the chips row. --- */
.tool-shell { margin: 0 0 20px; }
.tool-sticky {
  position: sticky; top: var(--header-sticky); z-index: var(--z-toolbar);
  margin: 0 calc(var(--pad) * -1); padding: 8px var(--pad);
  background: var(--paper); border-bottom: 1px solid var(--surface-border);
  /* Paint the bar and its hairline edge to edge however wide the window is. A border-image outset is ink overflow, so it never adds sideways scroll. */
  border-image: linear-gradient(to top, var(--surface-border) 1px, var(--paper) 1px) fill 0 / 0 / 0 100vmax;
}
/* While content scrolls under it: the same edge-to-edge bar plus a 10px shadow below the hairline. */
body.compact-header .tool-sticky { border-image: linear-gradient(to top, var(--c-14263b00, #14263b00), var(--c-14263b1f, #14263b1f) 10px, var(--surface-border) 10px 11px, var(--paper) 11px) fill 0 / 0 / 0 100vmax 10px; }
/* Forced colors (Windows High Contrast) keeps border-image but not background colors: fall back to the plain system-colored border. */
@media (forced-colors: active) { .tool-sticky, body.compact-header .tool-sticky { border-image: none; } }
@media (min-width: 761px) { .tool-sticky { padding-top: 10px; padding-bottom: 12px; } }
.tool-bar-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
.tool-tabs { grid-column: 1 / -1; grid-row: 1; display: flex; min-width: 0; overflow: hidden; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); }
.tool-tabs [role="tab"] {
  flex: 1 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 2px 8px; border: 0; border-radius: 0;
  background: transparent; color: var(--ink); font-size: clamp(.8125rem, 3.6vw, .9375rem); font-weight: 700; line-height: 1.15; text-align: center; text-wrap: balance;
}
.tool-tabs [role="tab"] + [role="tab"] { border-left: 1px solid var(--surface-border); }
.tool-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tool-tabs [role="tab"]:focus-visible { outline-offset: -4px; }
.tool-tabs [role="tab"][aria-selected="true"]:focus-visible { outline-color: var(--yellow); }
@media (hover: hover) and (pointer: fine) { .tool-tabs [role="tab"][aria-selected="false"]:hover { background: var(--c-fff1cb, #fff1cb); } }
.tool-controls { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: stretch; gap: 8px; min-width: 0; }
body:not([data-tool="search"]) [data-controls="search"] { display: none; }

.search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.search-field input {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 44px 0 38px;
  border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); color: var(--ink); font-size: 1rem; line-height: 1.2;
}
.search-field input::placeholder { color: var(--c-566679, #566679); opacity: 1; text-overflow: ellipsis; }
.search-field input::-webkit-search-decoration, .search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-field .search-icon { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--c-42546a, #42546a); pointer-events: none; }
.search-field #clear-search {
  position: absolute; top: 0; right: 0; bottom: auto; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0 var(--control-radius) var(--control-radius) 0;
  background: transparent; color: var(--ink); font-size: 1.5rem; line-height: 1;
}
@media (hover: hover) and (pointer: fine) { .search-field #clear-search:hover { background: var(--c-fff1cb, #fff1cb); } }
.filters-button {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-height: 44px; margin: 0; padding: 0 14px;
  border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); color: var(--ink); font-size: .9375rem; font-weight: 700;
}
.filters-count { min-width: 1.5em; padding: 0 6px; border-radius: 12px; background: var(--yellow); font-size: .8125rem; line-height: 1.5; text-align: center; }
@media (hover: hover) and (pointer: fine) { .filters-button:hover { background: var(--c-fff1cb, #fff1cb); } }

.chips-row {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
}
.chips-row::-webkit-scrollbar { display: none; }
.chips-row.fade-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.chips-row.fade-start { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 32px), transparent); }
.chips-row.fade-start.fade-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
/* The extra 8px sets the place chip (and any active-filter chips) apart from the category chips. */
.chip-group { display: flex; flex: none; gap: 8px; margin: 0 0 0 8px; width: auto; font-size: inherit; }
.context-chips { display: contents; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 14px;
  border: 1px solid var(--control-border); border-radius: 22px; background: var(--c-ffffff, #fff); color: var(--ink);
  font-size: .9375rem; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; scroll-snap-align: start;
}
.chip:focus-visible { outline-offset: -4px; }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[aria-current="true"]:focus-visible { outline-color: var(--yellow); }
.chip-county { border-color: var(--ink); }
.chip-county::before {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%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 24 24'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chip-context { border-color: var(--ink); background: var(--yellow); }
.chip-context .chip-x { font-size: 1.125rem; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .chip:not([aria-current="true"]):hover { background: var(--c-fff1cb, #fff1cb); } }
@media (prefers-reduced-motion: no-preference) {
  .chip, .tool-tabs [role="tab"], .filters-button { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
}

@media (min-width: 761px) {
  .tool-bar-inner { gap: 0 16px; }
  .chips-row { margin-top: 12px; }
  .tool-tabs { grid-column: 1; grid-row: 1; }
  .tool-tabs [role="tab"] { padding: 2px 16px; white-space: nowrap; font-size: .9375rem; }
  .tool-controls { grid-column: 2; grid-row: 1; }
}

/* Workspace: tool panels, and from 1100px the handout rail beside all of them. */
.workspace { display: block; margin-top: 16px; }
@media (min-width: 761px) { .workspace { margin-top: 20px; } }
.tool-panels { min-width: 0; }
.tool-panel > h2 { margin: 12px 0 6px; font-size: 1.5rem; }
.panel-desc { max-width: 42rem; margin: 0 0 12px; color: var(--c-42546a, #42546a); }
.handout-rail { display: none; }
@media (min-width: 1100px) {
  .workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
  .handout-rail {
    display: flex; flex-direction: column; position: sticky; top: calc(var(--sticky-top) + 16px);
    max-height: calc(100dvh - var(--sticky-top) - 32px); overflow: auto;
    border: 1px solid var(--control-border); border-radius: 12px; background: var(--c-ffffff, #fff);
  }
}

@media print { .tool-sticky, .handout-rail, .handout-bar, .safety-strip { display: none !important; } }

/* --- 4. Search panel: safety strip, guided finder, results head, settings; filters sheet. --- */
[data-slot]:empty, .card-badges:empty { display: none; }
.sr-status { font-size: .8125rem; color: var(--c-42546a, #42546a); }
.sr-status:empty { display: none; }
.clinic-banner { margin: 0 0 12px; }

/* Safety strip: one calm line with 911 and 988 plus a disclosure. The medicine sentence moves into the disclosure (it also stays in the footer). */
.safety-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 16px 0 0; padding: 0 14px;
  border: 1px solid var(--c-d9b3a5, #d9b3a5); border-left: 5px solid var(--red); border-radius: 10px; background: var(--c-fff0e9, #fff0e9); font-size: .875rem; line-height: 1.35;
}
.safety-strip .safety-notice, .safety-strip .safety-notice-content { display: contents; }
.safety-strip .safety-notice h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.safety-strip p { margin: 0; font-size: inherit; }
.safety-strip a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin: 0 -10px; color: var(--c-9b3025, #9b3025); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.safety-strip .safety-emergency { flex: 1 1 100%; }
.safety-strip .safety-988 { flex: none; }
.urgent-more { flex: 1 1 auto; min-width: 0; }
.urgent-more > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; list-style: none; cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
}
.urgent-more > summary::-webkit-details-marker { display: none; }
.urgent-more > summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.urgent-more[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.urgent-more[open] { flex: 1 1 100%; }
.urgent-more-body { padding: 0 0 8px; }
.urgent-more-body p + p { margin-top: 6px; }
@supports selector(:has(*)) {
  .safety-strip .safety-notice-content > p:not(.safety-emergency) { display: none; }
  .safety-strip:has(.urgent-more[open]) .safety-notice-content > p:not(.safety-emergency) { display: block; flex: 1 1 100%; order: 9; padding: 0 0 8px; }
}
@media (min-width: 761px) {
  .safety-strip { margin-top: 20px; padding: 0 18px; }
  .safety-strip .safety-emergency { flex: none; }
  .urgent-more { flex: none; }
  .urgent-more[open] { flex: 1 1 100%; }
}
@media (min-width: 1000px) {
  .safety-strip .safety-notice h2 { position: static; width: auto; height: auto; margin: 0; clip-path: none; font: 700 .9375rem/1.2 Arial, Helvetica, sans-serif; white-space: nowrap; }
}
@media (max-width: 400px) { .safety-strip { padding: 0 10px; gap: 0 12px; } }
/* Phones: the two sentences stack on the left and the disclosure sits beside them, so the strip is two 44px rows instead of three.
   Each link keeps a 44px band of its own, so the 911 and 988 tap areas never overlap. If the sentences ever need more room they wrap. */
@media (max-width: 760px) {
  .safety-strip { display: grid; grid-template-columns: minmax(0, max-content) minmax(3rem, 1fr); }
  .safety-strip .safety-emergency { grid-column: 1; grid-row: 1; }
  .safety-strip .safety-988 { grid-column: 1; grid-row: 2; }
  .safety-strip .safety-notice-content > p:not(.safety-emergency) { grid-column: 1 / -1; }
  .urgent-more { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .urgent-more:not([open]) > summary { display: block; width: fit-content; max-width: 100%; padding: 13px 0; }
  .urgent-more:not([open]) > summary::after { display: inline-block; margin-left: 8px; }
  .urgent-more[open] { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 620px) {
  .guided-toggle { font-size: .875rem; }
  .results-head h2 { font-size: 1.25rem; }
  .results-head { margin-top: 12px; }
  .ai-note { font-size: .75rem; }
}

/* Guided finder: a text button under the sticky region opens the form inline. */
.guided { margin: 0 0 8px; }
.guided-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-weight: 700; text-align: left; }
.guided-body { margin: 4px 0 16px; padding: 4px 16px 16px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--c-ffffff, #fff); }
.guided-body .care-form { margin-top: 12px; }
.guided-body .care-form .action { grid-column: 1 / -1; justify-self: start; }
.guided-card { margin: 12px 0 0; }
.guided-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.guided-actions :is(.action, button) { min-height: 44px; }
.care-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.care-form label, .field-grid label { min-width: 0; font-size: .875rem; font-weight: 700; }
.care-form .full-width { grid-column: 1 / -1; margin: 0; }
@media (max-width: 620px) { .care-form { grid-template-columns: minmax(0, 1fr); } .guided-body { padding: 2px 12px 14px; } }
.care-note { margin: 6px 0; font-size: .875rem; color: var(--c-4b5c59, #4b5c59); line-height: 1.5; overflow-wrap: anywhere; }
.check-label { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; min-height: 44px; font-weight: 400; }
.check-label input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; }

/* Results head, disclosure line, summary box. */
.results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 20px 0 4px; }
.results-head h2 { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; }
.results-head #count { margin: 0; font-size: .9375rem; color: var(--c-42546a, #42546a); }
.results-head #copy-search-link { margin-left: auto; min-height: 44px; font-size: .9375rem; }
.results-head .sr-status { flex: 1 1 100%; }
.ai-note { margin: 0 0 6px; font-size: .8125rem; color: var(--c-42546a, #42546a); }
.match-note { max-width: 55rem; margin: 0 0 10px; font-size: .875rem; color: var(--c-42546a, #42546a); }
.match-note:empty { display: none; }
.match-heading { margin: 16px 0 4px; font-size: 1.25rem; }
.search-context { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: 8px 0 12px; padding: 6px 14px; border: 1px solid var(--c-bcc9bf, #bcc9bf); border-radius: 10px; background: var(--c-edf3ec, #edf3ec); }
.search-context p { flex: 1 1 22rem; margin: 6px 0; font-size: .875rem; }
.search-context .link-button { min-height: 44px; font-size: .875rem; }
#search-copy-status:empty { display: none; }
#empty { margin: 16px 0; padding: 20px; border: 1px dashed var(--control-border); border-radius: 12px; background: var(--c-ffffff, #fff); }
#empty h3 { margin: 0 0 6px; }
#empty button { min-height: 48px; padding: 0 16px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); font-weight: 700; }
.link-button { min-height: 44px; }

/* Settings dialog (navigation.js opens it): one scrolling body of groups, thin dividers between them, every control at least 44px tall. */
.settings-sheet .sheet-body { padding-top: 2px; padding-bottom: 24px; }
.settings-group { padding: 18px 0; border-top: 1px solid var(--surface-border); }
.settings-group:first-child { padding-top: 14px; border-top: 0; }
.settings-group:last-child { padding-bottom: 0; }
.settings-sheet .settings-group h3 { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.25; }
.settings-group p { margin: 8px 0; font-size: .9375rem; line-height: 1.55; }
.settings-group > :last-child { margin-bottom: 0; }
.settings-sheet .clinic-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; margin: 12px 0 8px; padding: 8px 16px;
  border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); color: var(--ink); font: inherit; line-height: 1.2; text-align: left; text-decoration: none; cursor: pointer;
}
.settings-sheet .clinic-toggle-label { font-size: 1rem; }
.settings-sheet .clinic-toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.settings-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 8px 0; }
.settings-row a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.settings-actions button, .settings-row button, #recent-searches button { min-height: 44px; padding: 0 14px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); font-size: .9375rem; font-weight: 700; }
#recent-searches { display: flex; flex-wrap: wrap; gap: 8px; }
#recent-searches:empty, #usage-status:empty, #library-status:empty { display: none; }
@media (hover: hover) and (pointer: fine) { :is(.settings-actions, .settings-row, #recent-searches) button:hover, #empty button:hover { background: var(--c-fff1cb, #fff1cb); } }
@media (hover: hover) and (pointer: fine) { .settings-sheet .clinic-toggle:hover { border-color: var(--ink); background: var(--c-edf2f5, #edf2f5); } .settings-sheet .clinic-toggle[aria-pressed="true"]:hover { background: var(--c-2f4662, #2f4662); } }

/* Selects (filters sheet, guided form, handout editor) share one look. */
:is(.care-form, .field-grid, .care-actions, #feedback-form, .plan-manage) select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: auto; min-height: 48px; margin: 6px 0 0; padding: 10px 44px 10px 14px;
  border: 1px solid var(--control-border); border-radius: var(--control-radius); background-color: var(--c-ffffff, #fff); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23192d49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
}
/* The feedback note sits under the answer and matches the selects. */
#feedback-form label { display: block; }
#feedback-form label + label { margin-top: 14px; }
#feedback-form textarea {
  display: block; width: 100%; min-height: 6.5rem; margin: 6px 0 0; padding: 10px 14px; resize: vertical;
  border: 1px solid var(--control-border); border-radius: var(--control-radius); background-color: var(--c-ffffff, #fff); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.45;
}
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 16px; }
@media (min-width: 761px) { .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area-hint { margin: 14px 0 0; font-size: .875rem; color: var(--c-42546a, #42546a); }

/* --- 5. Sheets (detail, filters, plan, feedback): full-screen at <= 760px, centered at >= 761px; sticky head and foot. --- */
dialog.sheet {
  padding: 0; color: var(--ink); background: var(--paper); border: 0; overflow: hidden; overscroll-behavior: contain;
  width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; box-shadow: none;
}
dialog.sheet[open] { display: flex; flex-direction: column; }
@media (min-width: 761px) {
  dialog.sheet { width: min(720px, calc(100vw - 48px)); height: fit-content; max-height: 90dvh; margin: auto; border: var(--line); border-radius: 14px; box-shadow: 0 20px 64px var(--s-14263b4d, #14263b4d); }
  dialog.filters-sheet { width: min(560px, calc(100vw - 48px)); }
  dialog.settings-sheet { width: min(600px, calc(100vw - 48px)); }
}
.sheet-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--surface-border); background: var(--paper); }
.sheet-head h2 { flex: 1 1 auto; min-width: 0; margin: 7px 0 0; font-size: 1.375rem; line-height: 1.2; overflow-wrap: anywhere; }
.sheet .close {
  position: static; float: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-height: 48px; padding: 0;
  border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); color: var(--ink); font-size: 1.75rem; line-height: 1;
}
.sheet-body { flex: 1 1 auto; min-height: 0; padding: 14px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.sheet-foot {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--surface-border); background: var(--paper); box-shadow: 0 -8px 14px -12px var(--s-14263b66, #14263b66);
}
.sheet-foot .action { flex: 1 1 auto; }
.sheet-foot :is(.foot-link, button:not(.action)) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--control-border); border-radius: var(--control-radius);
  background: var(--c-ffffff, #fff); color: var(--ink); font-size: .9375rem; font-weight: 700; text-decoration: none;
}
/* Phone: "Add to handout" fills the first row, and "Official site" and "Call" share the second in equal halves. */
@media (max-width: 760px) { #detail-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #detail-foot > :is(.action, :last-child:nth-child(2)) { grid-column: 1 / -1; } }
.filters-sheet .sheet-foot { justify-content: space-between; }
.filters-sheet .sheet-foot .action { flex: 0 1 auto; min-width: 10rem; }
.sheet h3 { margin: 22px 0 6px; font-size: 1.125rem; }
.sheet :is(p, li, a, dd) { overflow-wrap: anywhere; }
@media (max-width: 760px) { .sheet-head h2 { font-size: 1.25rem; } .sheet-body, .sheet-foot { padding-left: 16px; padding-right: 16px; } .sheet-head { padding-left: 16px; } }
@media (hover: hover) and (pointer: fine) { .sheet .close:hover, .sheet-foot :is(.foot-link, button:not(.action)):hover { background: var(--c-fff1cb, #fff1cb); } }

/* Result cards: two columns from 621px; the rail takes the third column's space from 1100px. */
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 8px 0 0; }
@media (max-width: 620px) { .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--control-border); border-top: 5px solid var(--blue); border-radius: 12px; background: var(--c-fffdf5, #fffdf5); overflow: hidden; }
.card:nth-child(3n + 2) { border-top-color: var(--yellow); }
.card:nth-child(3n) { border-top-color: var(--c-f6beb0, #f6beb0); }
.card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 14px 16px 12px; }
.card-type { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 4px; font-size: .8125rem; font-weight: 700; color: var(--c-42546a, #42546a); line-height: 1.3; }
.place-tag { padding: 0 8px; border-radius: 10px; background: var(--c-e9f3fa, #e9f3fa); color: var(--ink); font-size: .75rem; line-height: 1.6; }
.card h3 { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; text-wrap: pretty; overflow-wrap: anywhere; }
.card .match-reason { margin: 0 0 8px; padding: 6px 10px; font-size: .8125rem; line-height: 1.4; }
.card .desc, .card .meta { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 8px; }
.card .desc { -webkit-line-clamp: 3; line-clamp: 3; font-size: .9375rem; line-height: 1.45; }
.card .meta { -webkit-line-clamp: 2; line-clamp: 2; font-size: .875rem; line-height: 1.4; margin-top: 0; }
.card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.card-actions .action { flex: 1 1 auto; min-width: 8.5rem; min-height: 48px; padding: 0 14px; }
.card-add[aria-pressed="true"], .sheet-foot .action[aria-pressed="true"] { background: var(--c-ffffff, #fff); color: var(--ink); border-color: var(--ink); }
.card-details {
  flex: none; min-height: 48px; padding: 0 14px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); color: var(--ink); font-size: .9375rem; font-weight: 700;
}
.save-star {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; min-width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); color: var(--ink);
}
.save-star .icon { display: block; }
.save-star[aria-pressed="true"] { border-color: var(--ink); background: var(--c-fff1cb, #fff1cb); }
.save-star[aria-pressed="true"] .icon { fill: currentColor; }
.card .card-review, .card-review { margin: 8px 0 0; font-size: .75rem; color: var(--c-42546a, #42546a); line-height: 1.3; }
@media (hover: hover) and (pointer: fine) { .card-details:hover, .save-star:hover { background: var(--c-fff1cb, #fff1cb); } }

/* Detail sheet content. */
.detail-lead { margin: 4px 0 12px; font-size: 1.0625rem; line-height: 1.5; }
.detail-section { margin: 0 0 4px; }
.detail-section h3 { margin: 20px 0 6px; font-size: 1.125rem; }
.detail-section :is(ol, ul) { margin: 6px 0 10px; padding-left: 24px; }
.detail-section li { margin: 8px 0; }
.detail-section .review { margin: 8px 0 0; font-size: .875rem; color: var(--c-42546a, #42546a); }
.detail-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.detail-links button { min-height: 48px; padding: 0 14px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); color: var(--ink); font-weight: 700; }
.detail-links .link-button { border: 0; background: none; text-decoration: underline; text-underline-offset: 4px; }
.notice { margin: 10px 0; padding: 12px 14px; background: var(--c-f6dfb5, #f6dfb5); border-left: 4px solid var(--red); border-radius: 0 8px 8px 0; font-size: .9375rem; }
.source-link { font-size: .875rem; }
.source-list { padding-left: 20px; font-size: .9375rem; }
.instruction-tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.instruction-tabs button { flex: 1 1 0; min-height: 48px; padding: 8px 10px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); font-size: .9375rem; font-weight: 700; line-height: 1.25; }
.instruction-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.epic-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.epic-actions .action { flex: 1 1 11rem; }
#patient-sheet { margin-top: 14px; padding: 16px; border: 1px solid var(--ink); background: var(--c-ffffff, #fff); overflow-wrap: anywhere; }
#patient-sheet h2 { margin: 0 0 12px; font-size: 1.375rem; }
#patient-sheet img { display: block; width: 200px; max-width: 100%; height: auto; }
.manual-copy { display: block; margin-top: 12px; font-weight: 700; }
.manual-copy textarea { display: block; width: 100%; min-height: 200px; margin-top: 6px; padding: 10px; font: 16px Arial, Helvetica, sans-serif; }
#copy-status { min-height: 1.5em; margin: 6px 0; font-size: .9375rem; }
#copy-status:empty { display: none; }
@media print {
  dialog.sheet[open] { position: static; display: block; width: 100%; max-width: none; height: auto; max-height: none; margin: 0; border: 0; overflow: visible; }
  .sheet-head .close, .sheet-foot, .detail-feedback, .card-actions { display: none !important; }
  .sheet-body { overflow: visible; padding: 0; }
  #emr-panel > h3 { display: none; }
  body:has(dialog.sheet[open]) .tool-shell, body:has(dialog.sheet[open]) .workspace, body:has(dialog.sheet[open]) .safety-strip { display: none !important; }
}

/* --- 6. Handout: rail internals, bottom bar, plan dialog, saved lists, feedback sheet. --- */
.rail-head { position: sticky; top: 0; z-index: 1; flex: none; padding: 12px 16px 10px; border-bottom: 1px solid var(--surface-border); border-radius: 12px 12px 0 0; background: var(--c-ffffff, #fff); }
.rail-head h2 { margin: 0; font-size: 1.125rem; line-height: 1.3; }
/* Georgia's old-style 0 reads as a letter o; show the count as the same yellow pill the header's Handout button uses. */
.rail-head [data-plan-count] { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 12px; background: var(--yellow); font: 700 .875rem/1.5 Arial, Helvetica, sans-serif; text-align: center; vertical-align: 2px; }
.rail-body { flex: 1 1 auto; padding: 12px 16px 14px; }
.rail-empty { margin: 0 0 12px; font-size: .9375rem; line-height: 1.5; color: var(--c-42546a, #42546a); }
.rail-context { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--c-bcc9bf, #bcc9bf); border-radius: 8px; background: var(--c-edf3ec, #edf3ec); font-size: .875rem; }
.rail-context-title { margin: 0 0 6px; font-weight: 700; }
.rail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rail-chips li { padding: 0 10px; border: 1px solid var(--c-bcc9bf, #bcc9bf); border-radius: 14px; background: var(--c-ffffff, #fff); font-size: .8125rem; line-height: 1.7; }
.rail-items { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.rail-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; row-gap: 2px; padding: 8px 6px 10px 12px; border: 1px solid var(--control-border); border-radius: 10px; background: var(--c-fffdf5, #fffdf5); }
.rail-item-name { grid-column: 1; align-self: center; font-size: .9375rem; line-height: 1.3; overflow-wrap: anywhere; }
.rail-item-need { grid-column: 1; font-size: .8125rem; color: var(--c-42546a, #42546a); }
.rail-remove { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--control-radius); background: none; color: var(--ink); font-size: 1.5rem; line-height: 1; }
.rail-role { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-right: 6px; font-size: .8125rem; font-weight: 700; }
.rail-role > span { flex: none; }
#handout-rail .rail-role select { flex: 1 1 auto; margin: 0; min-height: 44px; padding: 6px 36px 6px 10px; font-size: .9375rem; background-position: right 12px center; }
.rail-saved { margin: 0; }
.rail-foot { position: sticky; bottom: 0; flex: none; display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--surface-border); border-radius: 0 0 12px 12px; background: var(--c-ffffff, #fff); box-shadow: 0 -8px 14px -12px var(--s-14263b66, #14263b66); }
.rail-foot .action { min-height: 48px; }
.rail-foot-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rail-foot-row button, .rail-editor { min-height: 44px; padding: 0 12px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); color: var(--ink); font-size: .9375rem; font-weight: 700; }
.rail-editor { border-color: transparent; background: none; text-decoration: underline; text-underline-offset: 4px; }
.rail-status { margin: 10px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--c-42546a, #42546a); }
.rail-status:empty { display: none; }
@media (hover: hover) and (pointer: fine) { .rail-foot-row button:hover, .rail-editor:hover, .rail-remove:hover { background: var(--c-fff1cb, #fff1cb); } }

/* Saved lists: the same markup renders in the rail and in the plan dialog. */
[data-saved-library] { padding: 2px 14px 14px; }
[data-saved-library] h3 { margin: 14px 0 6px; font-size: 1rem; }
[data-saved-library] p { margin: 4px 0; font-size: .9375rem; color: var(--c-42546a, #42546a); }
.saved-actions { display: grid; gap: 8px; }
.saved-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.saved-list li { display: grid; gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--c-fffdf5, #fffdf5); }
.saved-name { font-size: .9375rem; font-weight: 700; overflow-wrap: anywhere; }
.saved-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.saved-actions button, .saved-buttons button, .plan-manage button, .care-actions button, .plan-resource > button {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.3;
}
.saved-buttons [aria-pressed="true"] { border-color: var(--ink); background: var(--c-fff1cb, #fff1cb); }
@media (hover: hover) and (pointer: fine) { :is(.saved-actions, .saved-buttons, .plan-manage, .care-actions) button:not(:disabled):hover, .plan-resource > button:hover { background: var(--c-fff1cb, #fff1cb); } }

/* Bottom bar: below 1100px, once the handout has something in it. The body pads itself by the bar's measured height. */
body.app-page { padding-bottom: var(--handout-bar-height, 0px); }
.handout-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-handout-bar); display: flex; align-items: center; gap: 8px;
  min-height: 64px; padding: 7px 16px calc(7px + env(safe-area-inset-bottom)); border-top: 2px solid var(--ink); background: var(--paper); box-shadow: 0 -6px 16px var(--s-14263b2e, #14263b2e);
}
.handout-bar-label { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1rem; font-weight: 700; white-space: nowrap; }
.handout-bar button { flex: none; min-height: 48px; padding: 0 18px; font-size: .9375rem; }
.handout-bar .bar-print { border: 1px solid var(--ink); border-radius: 30px; background: var(--c-ffffff, #fff); color: var(--ink); font-weight: 700; }
.handout-bar button:disabled { opacity: .5; }
@media (min-width: 1100px) { .handout-bar { display: none !important; } }
@media (max-width: 360px) { .handout-bar { gap: 6px; padding-left: 10px; padding-right: 10px; } .handout-bar button { padding: 0 12px; } }
@supports selector(:has(*)) { body:has(dialog[open]) .handout-bar { visibility: hidden; } }
@media print { .handout-bar { display: none !important; } body.app-page { padding-bottom: 0; } }

/* Plan dialog. */
.plan-intro { margin: 0 0 12px; }
.plan-empty { margin: 4px 0 14px; padding: 14px 16px; border: 1px dashed var(--control-border); border-radius: 10px; background: var(--c-ffffff, #fff); color: var(--c-42546a, #42546a); }
.plan-disclosure, #plan-edit { margin: 0 0 12px; }
#plan-editor { padding: 6px 16px 14px; }
.plan-selections { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plan-selections li { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--surface-border); }
.plan-selections li:first-child { padding-top: 4px; border-top: 0; }
.plan-selections strong { display: block; margin-bottom: 2px; overflow-wrap: anywhere; }
.care-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 8px 0; }
.care-actions > label { flex: 1 1 10rem; min-width: 0; font-size: .875rem; font-weight: 700; }
.plan-sheet .care-actions button { min-height: 48px; }
.plan-status, #feedback-status { margin: 6px 0; font-size: .9375rem; line-height: 1.4; }
.plan-status:empty, #feedback-status:empty { display: none; }
#plan-qr { margin: 8px 0; padding: 12px; border: 1px solid var(--control-border); border-radius: 10px; background: var(--c-ffffff, #fff); text-align: center; }
#plan-qr img { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 auto 8px; image-rendering: pixelated; }
.plan-manage { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 14px 0; }
.plan-manage label { flex: 1 1 12rem; min-width: 0; font-size: .875rem; font-weight: 700; }
.plan-sheet .plan-manage button { min-height: 48px; }
.plan-sheet .sheet-foot .action { flex: 1 1 12rem; }

/* Feedback is a small sheet at every width (a form with one choice does not need the whole screen). */
dialog.sheet.feedback-sheet { width: min(520px, calc(100vw - 24px)); height: fit-content; max-height: 90dvh; margin: auto; border: var(--line); border-radius: 14px; box-shadow: 0 20px 64px var(--s-14263b4d, #14263b4d); }
.feedback-resource { margin: 0 0 12px; font-weight: 700; }

/* --- 7. Income check, eligibility badges, Medication list (T-020). --- */
.income-form, .med-form { max-width: 46rem; }
.income-form .field { min-width: 0; }
.income-form .field > label { display: block; }
.optional { font-weight: 400; color: var(--c-42546a, #42546a); }
.field-hint { margin: 6px 0 0; font-size: .875rem; line-height: 1.45; color: var(--c-42546a, #42546a); }
.income-form .field input:not([type="checkbox"]), .med-form textarea {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; min-height: 48px; margin: 6px 0 0; padding: 10px 14px;
  border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.3;
}
.income-form .field input[aria-invalid="true"] { border-color: var(--red); border-width: 2px; }
.stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; align-items: center; max-width: 16rem; }
.stepper input { margin: 0; text-align: center; -moz-appearance: textfield; appearance: textfield; font-weight: 700; }
.income-form .stepper input::-webkit-inner-spin-button, .income-form .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-button {
  width: 48px; height: 48px; min-height: 48px; padding: 0; border: 1px solid var(--control-border); border-radius: var(--control-radius);
  background: var(--c-ffffff, #fff); color: var(--ink); font-size: 1.5rem; font-weight: 700; line-height: 1;
}
.money { position: relative; }
.money-sign { position: absolute; left: 14px; top: 50%; translate: 0 -50%; margin-top: 3px; color: var(--c-42546a, #42546a); pointer-events: none; }
.income-form .field .money input:not([type="checkbox"]) { padding-left: 30px; }
.care-form .check-label.field-pregnant { grid-column: 1 / -1; margin: 0; font-size: 1rem; font-weight: 400; }
.form-error { margin: 12px 0 0; padding: 10px 12px; border-left: 4px solid var(--red); border-radius: 0 8px 8px 0; background: var(--c-fdeee9, #fdeee9); font-size: .9375rem; line-height: 1.45; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 6px; }
.form-actions .action { min-width: 8rem; min-height: 48px; padding: 0 20px; }
.action.secondary { background: var(--c-ffffff, #fff); color: var(--ink); border: 1px solid var(--ink); }
@media (max-width: 480px) { .form-actions .action { flex: 1 1 auto; } }
@media (hover: hover) and (pointer: fine) { .action.secondary:not(:disabled):hover, .stepper-button:hover, .med-add-top:hover, .program-more summary:hover { background: var(--c-fff1cb, #fff1cb); color: var(--ink); } }

/* Income check result. */
.income-result { max-width: 52rem; margin: 20px 0 8px; padding-top: 6px; border-top: 1px solid var(--surface-border); }
.income-fpl { margin: 12px 0 4px; font-size: 1.0625rem; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }
.income-fpl strong { margin-right: 4px; font-size: 2.25rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.income-detail { margin: 4px 0; font-size: .9375rem; line-height: 1.5; color: var(--c-42546a, #42546a); }
.stale-note { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--c-fff1cb, #fff1cb); font-size: .9375rem; }
.program-group > h4 { margin: 22px 0 8px; font-size: 1.125rem; }
.program-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.program { min-width: 0; padding: 12px 14px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--c-fffdf5, #fffdf5); }
.program-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 10px; }
.program-name { flex: 1 1 12rem; min-width: 0; margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.program-why { margin: 6px 0 0; font-size: .9375rem; line-height: 1.45; }
.program-caveat { margin: 4px 0 0; font-size: .875rem; line-height: 1.45; color: var(--c-42546a, #42546a); }
.program-more { margin-top: 4px; font-size: .9375rem; }
.program-more summary, .program-other summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: .875rem; font-weight: 700; }
.program-more > :not(summary) { margin: 4px 0; }
.program-other { margin-top: 22px; padding: 0 14px 12px; border: 1px solid var(--surface-border); border-radius: 12px; background: var(--c-ffffff, #fff); }
.program-other summary { font-size: 1rem; }
.program-other .program-list { margin-top: 4px; }
.count { min-width: 1.5em; padding: 0 6px; border-radius: 12px; background: var(--yellow); font-size: .8125rem; line-height: 1.5; text-align: center; }
.program-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.program-actions :is(.action, .card-details) { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 0; min-height: 48px; padding: 0 14px; font-size: .9375rem; text-decoration: none; }
.program-actions .card-add[aria-pressed="true"] { background: var(--c-ffffff, #fff); color: var(--ink); border: 1px solid var(--ink); }

/* Badges: text carries the meaning, colour only repeats it. Never red. */
.badge {
  display: inline-flex; align-items: center; max-width: 100%; padding: 2px 10px; border: 1px solid var(--c-b7c2cf, #b7c2cf); border-radius: 12px; background: var(--c-eef2f6, #eef2f6); color: var(--ink);
  font-size: .8125rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere;
}
.badge[data-tone="green"] { border-color: var(--c-86b394, #86b394); background: var(--c-e4f2e7, #e4f2e7); }
.badge[data-tone="amber"] { border-color: var(--c-d3a93f, #d3a93f); background: var(--c-fff1cb, #fff1cb); }
.badge-why { margin: 12px 0 4px; padding: 10px 14px 12px; border: 1px solid var(--surface-border); border-radius: 10px; background: var(--c-ffffff, #fff); }
.badge-why > h4 { margin: 0 0 8px; font-size: 1rem; }
.badge-why .badge-for { margin: 0 0 8px; font-size: .9375rem; line-height: 1.45; }
.badge-why ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.badge-why li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: .9375rem; line-height: 1.45; }
.badge-why .why { flex: 1 1 12rem; min-width: 0; }
.badge-why .badge-note { margin: 8px 0 0; font-size: .8125rem; font-weight: 400; color: var(--c-42546a, #42546a); }

/* Medication list. */
.med-form > label { display: block; font-size: 1rem; font-weight: 700; }
.med-form textarea { min-height: 9rem; margin-top: 6px; line-height: 1.45; resize: vertical; }
.med-form .form-actions .link-button { padding: 0 8px; font-size: .9375rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 480px) { .med-form .form-actions .link-button { margin-left: -8px; } } /* on a phone it wraps to its own line: keep the text on the form's left edge */
.med-result { max-width: 56rem; margin: 20px 0 8px; padding-top: 6px; border-top: 1px solid var(--surface-border); }
.med-summary { margin: 10px 0 4px; font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.med-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 4px; }
.med-bulk .action { min-height: 48px; padding: 0 20px; }
.med-bulk .care-note { flex: 1 1 14rem; margin: 0; }
.med-unmatched { margin: 14px 0 0; padding: 4px 14px 8px; border: 1px dashed var(--control-border); border-radius: 12px; background: var(--c-ffffff, #fff); }
.med-unmatched h3 { margin: 10px 0 2px; font-size: 1.0625rem; }
.med-unmatched ul { margin: 0; padding: 0; list-style: none; }
.med-unmatched li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; border-top: 1px solid var(--surface-border); }
.med-unmatched li:first-child { border-top: 0; }
.med-unmatched .med-line { flex: 1 1 10rem; min-width: 0; margin: 8px 0; overflow-wrap: anywhere; }
.med-unmatched .link-button { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.med-group { margin: 16px 0 0; }
.med-group-head {
  --med-head-height: 52px;
  position: sticky; top: var(--sticky-top); z-index: 5; box-sizing: border-box; height: var(--med-head-height);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 0 8px 0 14px;
  border: 1px solid var(--c-9fc4dc, #9fc4dc); border-radius: 10px; background: var(--c-e1eff8, #e1eff8);
}
.med-group-title { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.med-group-title h3 { margin: 0; overflow: hidden; font-size: 1.0625rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.med-group-count { font-size: .8125rem; line-height: 1.3; color: var(--c-35465c, #35465c); }
.med-add-top, .med-add {
  flex: none; min-height: 44px; padding: 0 12px; border: 1px solid var(--ink); border-radius: var(--control-radius); background: var(--c-ffffff, #fff); color: var(--ink);
  font-size: .875rem; font-weight: 700; line-height: 1.15;
}
.med-add-top[aria-disabled="true"], .med-add[aria-disabled="true"] { border-color: var(--control-border); background: var(--c-f1f4f2, #f1f4f2); color: var(--c-35465c, #35465c); }
.med-rows { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.med-row { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--c-fffdf5, #fffdf5); }
.med-row-main { min-width: 0; }
.med-row-type { margin: 0 0 2px; font-size: .8125rem; font-weight: 700; line-height: 1.3; color: var(--c-42546a, #42546a); }
.med-row-name { margin: 0 0 4px; font-size: 1.0625rem; line-height: 1.25; overflow-wrap: anywhere; }
.med-row-reason { margin: 0 0 6px; font-size: .875rem; line-height: 1.4; color: var(--c-35465c, #35465c); }
.med-row-type strong { color: var(--ink); }
.med-row .card-badges { margin: 0; }
.med-group-more { margin: 2px 0 0; }
.med-group-more .link-button { font-size: .9375rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.med-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.med-row-actions :is(.card-details, .med-add) { flex: 1 1 auto; min-width: 7rem; min-height: 48px; padding: 0 14px; font-size: .9375rem; }
.med-add { border-radius: var(--control-radius); background: var(--ink); color: var(--paper); border-color: var(--ink); }
.med-add[aria-disabled="true"] { background: var(--c-ffffff, #fff); color: var(--ink); border-color: var(--ink); }
@media (min-width: 621px) {
  .med-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .med-row-actions { flex: none; flex-wrap: nowrap; }
  .med-row-actions :is(.card-details, .med-add) { flex: none; }
}
/* The group header is the only sticky thing below the tool bar. On a short screen (a phone turned sideways) it would eat the page, so it stays in the flow. */
@media (max-height: 560px) { .med-group-head { position: static; } }
@media (min-height: 561px) {
  html:has(:where(body[data-tool="med-list"] .med-group-head)) { scroll-padding-top: calc(var(--sticky-top) + 52px + 12px); }
}