/* Patient funnel: layout, focus and target sizes only. Colours and components come from admin.css
   (its tokens); no colour literal is added here. */
.patient-page main { margin-top: 4px; }
.patient-page main:focus { outline: none; }
.patient-page h1, .patient-page h2, .patient-page p, .patient-page dd, .patient-page li,
.patient-page label, .patient-page legend { overflow-wrap: anywhere; }
.patient-page .form-card.card-wide { width: min(960px, 100%); }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10; min-height: 44px; box-sizing: border-box; padding: 12px 16px; border-radius: 10px; background: var(--white); color: var(--forest); font-weight: 750; }
.skip-link:focus { left: 12px; }

.patient-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.patient-brand .brand-mark { flex: none; }
.patient-brand .eyebrow { margin-bottom: 2px; }
.patient-credential { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
/* The signed-in account under the credential (OUT-20261029-patient-name-header): one line, "…" for a long
   value, never wider than the card. The short name is the only text the page shows of the name. */
.patient-brand > div { min-width: 0; max-width: 100%; }
.patient-account { margin: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.4; }
.patient-account-name { color: var(--ink); font-weight: 700; }
@media (min-width: 768px) { .patient-account { max-width: min(100%, 32ch); } }
.patient-page .status-pill { margin-bottom: 18px; }
.patient-page .status-pill.tag { margin: 0 0 0 8px; font-size: 14px; vertical-align: middle; }

.step-label { margin-bottom: 6px; }
.step-bar { height: 6px; margin-bottom: 18px; border-radius: 3px; background: var(--line); }
.step-bar span { display: block; height: 100%; border-radius: 3px; background: var(--forest); }
.step-1 span { width: 20%; }
.step-2 span { width: 40%; }
.step-3 span { width: 60%; }
.step-4 span { width: 80%; }
.step-5 span { width: 100%; }

.patient-page .back-link { display: flex; width: fit-content; min-height: 44px; align-items: center; margin-bottom: 12px; }
.patient-page .form-card h1 { margin-bottom: 18px; }
.patient-page .lead { margin: -6px 0 22px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.patient-page .button { min-height: 46px; text-align: center; }
.patient-page .button-secondary { min-height: 46px; }
.patient-page form > .button, .patient-page form > .button-primary { margin-top: 8px; }
.patient-page form > .button + .button { margin-top: 12px; }
.patient-page main > .button + .button { margin-top: 12px; }
.patient-page .body-text { line-height: 1.5; }
.patient-page .messages { margin: 0 0 20px; padding: 12px 16px; }

.field-group { margin: 0 0 22px; padding: 0; border: 0; }
.field-group legend { margin-bottom: 12px; padding: 0; font-size: 14px; font-weight: 750; }
.field { margin-bottom: 18px; }
.field .field-hint { margin: 0 0 7px; }
.field .errorlist, .field-group > .errorlist { margin-bottom: 8px; }
.field .errorlist a { display: inline-flex; min-height: 44px; align-items: center; color: var(--danger); font-weight: 700; text-decoration: underline; }
.patient-page .field-invalid input:not([type="radio"], [type="checkbox"]), .patient-page .field-invalid select { border-color: var(--danger); }
.patient-page .field-invalid .sex-options label:not(:has(input:checked)), .patient-page .field-invalid input[type="checkbox"] { border-color: var(--danger); outline: 1px solid var(--danger); }
.error-summary { margin: 0 0 22px; padding: 14px 16px; border: 2px solid var(--danger); border-radius: 12px; font-size: 15px; }
.error-summary:focus { outline: 3px solid var(--forest); outline-offset: 2px; }
.error-summary h2 { margin: 0 0 6px; font-size: 18px; }
.error-summary p { margin: 0 0 6px; }
.error-summary ul { margin: 0; padding-left: 20px; list-style: disc; }
.error-summary a { display: inline-flex; min-height: 44px; align-items: center; color: var(--danger); font-weight: 700; }

.password-field { display: grid; gap: 10px; }
.password-field .button { justify-self: start; }
.check-row { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; }
.patient-page .form-card .check-row input[type="checkbox"] { flex: none; width: 24px; min-height: 24px; margin: 10px 0 0; padding: 0; accent-color: var(--forest); }
.check-row label { min-height: 44px; margin: 0; padding: 10px 0; font-weight: 500; line-height: 1.4; }
.check-row a { color: var(--forest); font-weight: 700; }
.patient-page .form-card .sex-options { margin-bottom: 4px; }

/* Payment method cards (#238): equal cards, moderate radius, radio at the top, whole card is the target. */
.patient-page .pay-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 4px; }
.patient-page .pay-options > div { display: flex; min-width: 0; margin: 0; }
.patient-page .pay-options label { display: flex; flex: 1; align-items: flex-start; gap: 12px; box-sizing: border-box; min-height: 64px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); font-weight: 400; cursor: pointer; }
.patient-page .pay-options input { flex: none; width: 22px; min-height: 22px; margin: 1px 0 0; padding: 0; accent-color: var(--forest); }
.patient-page .pay-options label:has(input:checked) { border-color: var(--forest); background: var(--sage); color: var(--forest-dark); box-shadow: inset 0 0 0 1px var(--forest); }
.patient-page .pay-options label:has(input:focus-visible) { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page .pay-options input:focus { box-shadow: none; outline: 0; }
.patient-page .field-invalid .pay-options label:not(:has(input:checked)) { border-color: var(--danger); outline: 1px solid var(--danger); }
.patient-page .pay-options .pay-text { min-width: 0; line-height: 1.4; }
.patient-page .pay-options .pay-title { display: block; font-weight: 750; }
.patient-page .pay-options .pay-detail { display: block; margin-top: 2px; font-weight: 400; }
@media (min-width: 700px) { .patient-page .pay-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Focus: 2px border plus a 3px outline (the admin's 12% ring fails WCAG 1.4.11). */
.patient-page a:focus-visible, .patient-page button:focus-visible, .patient-page input:focus-visible, .patient-page textarea:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page .form-card input:focus { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page .form-card .sex-options label:has(input:focus-visible) { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page .form-card .sex-options input:focus { box-shadow: none; outline: 0; }

.card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--ivory); }
.card h2 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0 0 8px; }
.current-slot { margin: 0 0 22px; }
.current-slot p { margin: 0; }
.nobr { white-space: nowrap; }
.card + form { margin-top: 24px; }
.card + .safety-message { margin-top: 16px; }
.card .price, .patient-page .price { font-size: 22px; font-weight: 800; }
.summary-line { margin: 0 0 22px; }
.summary-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; }
.summary-row + .summary-row { margin-top: 12px; }
.summary-line dt { flex: 0 0 8rem; color: var(--muted); font-size: 14px; }
.summary-line dd { flex: 1 1 10rem; min-width: 0; margin: 0; font-weight: 750; }
.summary-line .marked-list + a { display: flex; margin-left: 0; }
.summary-line .pain-detail + a { display: flex; margin-left: 0; }
.summary-line .pain-detail { font-weight: 400; }
.summary-line a { display: inline-flex; min-height: 44px; align-items: center; margin-left: 10px; color: var(--forest); font-weight: 700; }
.summary-grid { display: grid; gap: 22px; margin-bottom: 26px; }
.include-list { margin: 0; padding-left: 20px; line-height: 1.8; }
.order-details { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 8px 16px; margin: 0 0 24px; }
@media (max-width: 22rem) { .order-details { grid-template-columns: minmax(0, 1fr); } }
.order-details dt { color: var(--muted); font-size: 14px; }
.order-details dd { margin: 0; font-weight: 750; }
.order-details .pain-detail { font-weight: 400; }
.next-steps { margin: 0; padding-left: 20px; line-height: 1.8; }
.sample-message { margin: 0 0 12px; padding: 12px 16px; border-left: 4px solid var(--forest); background: var(--sage); color: var(--forest-dark); }
.actions { display: flex; flex-direction: column; gap: 12px; }

/* Teleconsulta (PR2): hour pills in 2 columns on phones, 44 px targets for links. */
.patient-page .form-card .sex-options.slot-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.patient-page .order-details .status-pill { margin: 0; white-space: nowrap; }
.patient-page .order-details .status-pill .pill-wrap { white-space: normal; }
.order-details dd { overflow-wrap: anywhere; }
.patient-page p > .status-pill { margin-bottom: 0; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 22px; }
.pager a, .entry-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--forest); font-weight: 700; }
/* Ficha (PR3): two fixed columns for Sim/Não, the alarm block, the counter and textarea states. */
.patient-page .form-card .sex-options.yes-no-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.safety-message { margin: 0 0 22px; padding: 12px 16px; border-left: 4px solid var(--danger); background: var(--ivory); color: var(--ink); }
.safety-message h2 { margin: 0 0 6px; font-size: 18px; }
.safety-message p { margin: 0 0 10px; }
.patient-page .safety-message .button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; }
.patient-page .form-card textarea { width: 100%; min-height: 120px; field-sizing: content; resize: vertical; overflow-wrap: anywhere; }
.patient-page .form-card textarea:focus { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page .field-invalid textarea { border-color: var(--danger); }
.form-card h1 label { display: inline; margin: 0; font: inherit; }
.form-card h1:has(> label) { text-wrap: balance; } /* detail step only; the line-height is inherited like every patient h1 */
.detail-region { margin: 0 0 14px; font-weight: 750; overflow-wrap: anywhere; }
.char-counter { margin: 4px 0 0; color: var(--muted); font-size: 14px; text-align: right; }
.char-counter.char-counter-over { color: var(--danger); font-weight: 750; }
.range-label { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.patient-page .form-card .actions > .button { margin-top: 0; }

/* Treatment (Wave 4 P1b): point list, 0-10 scale, 5 s timer. Tokens only; state is always text. */
.point-list { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.point-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.point-list .point-title { flex: 1 1 12rem; font-weight: 750; }
.point-list .status-pill.tag { margin: 0; }
.point-done { padding: 4px 10px; border-radius: 999px; background: var(--sage); color: var(--forest-dark); font-size: 14px; font-weight: 750; }
.point-place { margin: 0 0 4px; font-size: 20px; font-weight: 750; }
.pain-scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pain-scale > div { min-width: 0; }
.pain-scale label { display: flex; min-height: 56px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 6px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); font-weight: 750; cursor: pointer; }
.pain-scale input { width: 22px; min-height: 22px; margin: 0; padding: 0; accent-color: var(--forest); }
.pain-scale label:has(input:checked) { border-color: var(--forest); background: var(--sage); color: var(--forest-dark); }
.pain-scale label:has(input:focus-visible) { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page .field-invalid .pain-scale label:not(:has(input:checked)) { border-color: var(--danger); }
.check-list { display: grid; gap: 4px; }
.session-timer { margin: 0 0 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--ivory); }
.session-timer p { margin: 0 0 8px; }
.timer-clock { font-size: 48px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.timer-done { color: var(--forest-dark); font-weight: 800; }
.session-timer .actions { margin-top: 8px; }
.session-timer .button { min-width: 44px; }
[data-timer-toggle][hidden] { display: none; }
[data-timer-reset][hidden] { display: none; }
/* Image plans: the number and "segundos" on the left, the buttons in a column on the right. */
[data-timer-format] .timer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
[data-timer-format] .timer-controls[hidden] { display: none; }
[data-timer-format] .timer-clock { display: flex; min-width: 96px; flex: none; flex-direction: column; align-items: center; margin: 0; font-size: 34px; line-height: 1; }
[data-timer-format] .timer-clock small { margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
[data-timer-format] .timer-controls .actions { display: flex; min-width: 9rem; flex: 1 1 9rem; flex-direction: column; margin: 0; }
[data-timer-format] .timer-done { order: 3; flex-basis: 100%; margin: 0; }
.timer-help { margin: 0 0 18px; }
.timer-help summary { display: flex; min-height: 44px; align-items: center; color: var(--forest); font-weight: 700; cursor: pointer; }
.timer-help summary:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page .check-list .check-row input[type="checkbox"]:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page progress { width: 100%; height: 14px; accent-color: var(--forest); }

/* Image protocol (OUT-20261020-protocol-flow S3): the point is a CSS dot over the plan's own image at
   percentages of the image, so it lands in the same place at any size or zoom. The colour is
   --protocol-point (admin.css, S2); the fallback is the same value. */
.point-frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.point-frame img { display: block; width: 100%; height: auto; }
.point-dot { position: absolute; box-sizing: border-box; width: 20px; height: 20px; border: 3px solid var(--white); border-radius: 50%; background: var(--protocol-point, #d3261a); box-shadow: 0 0 0 1.5px var(--ink), 0 2px 6px rgb(0 0 0 / 30%); transform: translate(-50%, -50%) scale(calc(1 / var(--zoom, 1))); pointer-events: none; }
.point-dot-small { width: 12px; height: 12px; border-width: 2px; box-shadow: 0 0 0 1px var(--ink); }
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.thumb-frame { min-height: 3rem; }
.thumb-number { font-weight: 800; }
.thumb-caption { margin: 4px 0 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.update-note { margin: -4px 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--champagne); border-radius: 12px; background: var(--ivory); font-size: 15px; line-height: 1.45; }
.update-note span { color: var(--muted); }
.segments { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin: 4px 0 14px; padding: 0; list-style: none; }
.segments li { height: 8px; border-radius: 4px; background: var(--line); }
.segments li.d { background: var(--forest); }
.segments li.c { background: var(--white); box-shadow: inset 0 0 0 2px var(--forest); }
.point-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--sage); color: var(--forest-dark); font-size: 14px; font-weight: 750; vertical-align: middle; }
.point-figure { margin: 0 0 8px; }
.point-stage { width: min(100%, 262px, calc(44svh * var(--ratio, 0.75))); margin: 0 auto; }
.point-stage .point-frame { aspect-ratio: var(--ratio, 0.75); touch-action: pan-y; }
.point-stage .point-frame.is-zoomed { touch-action: none; }
.point-stage figcaption { margin: 6px 0 0; text-align: center; font-weight: 750; }
.zoom-layer { position: absolute; inset: 0; transform-origin: 0 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--zoom, 1)); }
.zoom-layer img { width: 100%; height: 100%; }
.zoom-buttons { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.zoom-button { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--forest); border-radius: 12px; background: var(--white); color: var(--forest); font-family: inherit; font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer; }
.zoom-button[aria-disabled="true"] { border-color: var(--line); color: var(--muted); }
.zoom-button:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.image-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; background: var(--ivory); text-align: center; }
.image-state p { margin: 0; }
.image-state-error { border: 2px solid var(--danger); background: var(--white); }
.image-state[hidden], .zoom-buttons[hidden], .offline-note[hidden], .error-summary[hidden], [data-zoom-hint][hidden] { display: none; }
.offline-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--sand); color: var(--sand-ink); font-size: 15px; font-weight: 600; }
.point-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin: 14px 0 0; padding: 10px 0 14px; border-top: 1px solid var(--line); background: var(--white); }
.patient-page form.point-nav > .button { margin: 0; }
.point-nav:not(:has(> a.button-secondary)) { grid-template-columns: minmax(0, 1fr); }
.point-nav .button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 46px; margin: 0; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
[data-focus-heading]:focus, .point-nav .button:focus-visible, .session-timer .button:focus-visible, .image-state .button:focus-visible, .point-frame:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page section.card, .patient-page ol.next-steps { margin-bottom: 16px; }
@media (max-width: 47.99rem) { .point-nav { position: sticky; bottom: 0; } html:has(.point-nav) { scroll-padding-bottom: 6rem; } }
@media (min-width: 48rem) {
  .thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .point-stage { width: min(100%, 380px, calc(44svh * var(--ratio, 0.75))); }
  .point-nav { padding: 0; border: 0; }
}
@media (prefers-reduced-motion: reduce) { .zoom-layer { transition: none; } }
@media (forced-colors: active) { .point-dot { background: Highlight; border-color: Canvas; } }

/* Ficha enviada: long labels and dates, so on phones each label sits above its value. */
@media (max-width: 480px) {
  .order-details.order-stack { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .order-details.order-stack dd { margin-bottom: 10px; }
}

@media (min-width: 768px) {
  .patient-page .form-card .sex-options, .patient-page .form-card .sex-options.slot-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .patient-page .form-card .sex-options.yes-no-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pain-scale { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .actions { flex-direction: row; flex-wrap: wrap; }
  .actions .button-wide { flex: 1 1 auto; white-space: nowrap; }
  .summary-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* Sair link in the patient header (OUT-20261012-demo-fixes). */
.patient-signout { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin-left: auto; color: var(--forest); font-weight: 700; text-decoration: underline; }
.patient-signout:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-entrar { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin-left: auto; color: var(--forest); font-weight: 700; text-decoration: underline; }
.patient-entrar:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }

/* Stage outbox (stage only): one column, messages as cards, the body keeps its line breaks. */
.outbox-list { display: grid; gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.outbox-demo { margin: 0 0 12px; }
.outbox-message .order-details { margin-bottom: 12px; }
.outbox-message .outbox-body { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.outbox-message .button { width: 100%; }
.outbox-empty { margin: 0 0 24px; padding: 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
@media (min-width: 720px) { .outbox-message .button { width: auto; } }

/* Body map of step 1 (OUT-20261013-body-map; OUT-20261018-body-map-v2). The points of the figure are
   the controls (role="button"): State is never colour alone: hollow ring x filled dot with a halo x
   dashed outline on focus. A tap chooses the nearest point (patient.js). Tokens --bm-* live in
   admin.css; the points use only the clinic tokens (--forest, --forest-dark, --sage, --champagne).
   The list of boxes stays only as the no-JavaScript path (the script hides it). */
.body-map-wrap { container: bm / inline-size; margin: 0; }
.body-map[hidden] { display: none; }
#marcas-area:focus { outline: none; }
.body-map-views { display: flex; gap: 8px; margin: 0 0 12px; }
.patient-page .body-map-views button { flex: 1 1 0; min-height: 44px; border: 1px solid var(--bm-line); border-radius: 8px; background: var(--white); color: var(--bm-ink); font: 600 14px var(--bm-font); cursor: pointer; }
.patient-page .body-map-views button[aria-pressed="true"] { border-color: var(--forest-dark); background: var(--forest-dark); color: var(--white); }
.body-map-figures { display: grid; gap: 18px; }
.body-map-figure { margin: 0 auto; text-align: center; }
/* The whole figure is above the bar when the page opens (OUT-20261018-compact-patient): the height is the
   screen less what is above it (--bm-above) and the bar (--bm-bar), 420 px at least, 560 at most. --bm-pill
   is the height of the stage strip, --bm-extra the back link and note of "Onde dói agora?". These are
   measured px (393x852): measure them again if the top of the page or the bar changes (the e2e
   compact-patient specs fail when the figure is not whole above the bar). --bm-bar reserves the bar with
   the longest of the 72 labels (3 lines at 15 px) so no choice makes it grow over the figure. --bm-name is
   the account line under the logo (19.6 px above 480 px, 18.2 px at 480 px or less); at 480 px or less the
   stage strip is smaller and --bm-pill is 23.6 px there (OUT-20261029-patient-name-header). From 481 to 767 px
   the bar is fixed and the card padding (5vw, 26 to 48 px) and the h1 (5vw, 32 to 46 px, line-height 1.6) grow
   with the width: --bm-above is 238.8 px plus those two terms (figure top 316.0 px at 481, 338.5 at 767, no
   strip) and the strip with its margin is 50.8 px (OUT-20261029-body-map-tablet). */
.body-map-wrap { --bm-above: 255px; --bm-pill: 0px; --bm-extra: 0px; --bm-bar: 136px; --bm-name: 0px; }
.form-card:has(.patient-account) .body-map-wrap { --bm-name: 19.6px; }
.form-card:has(> .status-pill) .body-map-wrap { --bm-pill: 45px; }
@media (min-width: 481px) and (max-width: 767px) {
  .body-map-wrap { --bm-above: calc(238.8px + clamp(26px, 5vw, 48px) + 1.6 * clamp(32px, 5vw, 46px)); }
  .form-card:has(> .status-pill) .body-map-wrap { --bm-pill: 50.8px; }
}
/* "Onde dói agora?" has the same top as /regiao/ (OUT-20261018-map-fit-fix): "Voltar" shares the line of the
   title (it keeps its 44 px target by growing over the line, not under it) and the note follows the bar,
   so --bm-extra stays 0 and the formula is the one of /regiao/. The title row is one line down to 375 px:
   28 px title with an 8 px gap below 393 px (32 px and 12 px from 393 px). */
.regiao-titulo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; column-gap: 12px; }
.regiao-titulo h1 { margin-right: auto; }
.patient-page .regiao-titulo .back-link { margin: -3px 0 -6px; }
/* Below 393 px the title row stays on one line (OUT-20261106-mobile-375-figure): 28 px title and 8 px gap, so
   "Voltar" does not drop to a second line and push the figure under the bar. Line-height stays the one of the h1. */
@media (max-width: 392px) {
  .regiao-titulo { flex-wrap: nowrap; column-gap: 8px; align-items: flex-start; }
  .regiao-titulo h1 { min-width: 0; font-size: 28px; }
  .patient-page .regiao-titulo .back-link { white-space: nowrap; flex: none; }
}
.regiao-nota { margin-top: 12px; }
.body-figure { display: block; width: auto; max-width: 100%; height: 460px; margin: 0 auto; height: clamp(420px, calc(100svh - var(--bm-above) - var(--bm-pill) - var(--bm-extra) - var(--bm-name) - var(--bm-bar)), 560px); }
.bm-body, .bm-ear, .bm-head { fill: var(--bm-fill); stroke: var(--bm-line); stroke-width: 3; stroke-linejoin: round; }
.bm-mid { stroke: var(--bm-mid); stroke-width: 1.5; stroke-dasharray: 6 6; pointer-events: none; }
.bm-face { fill: none; stroke: var(--bm-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.bm-eye { stroke-width: 2.4; }
.bm-detail { fill: none; stroke: var(--bm-detail); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.bm-view { fill: var(--bm-ink); font: 400 20px var(--bm-font); letter-spacing: 3px; text-anchor: middle; pointer-events: none; }
.bm-side { fill: var(--bm-ink); font: 600 28px var(--bm-font); text-anchor: middle; pointer-events: none; }
.bm-mark { cursor: pointer; outline: none; }
.bm-hit { fill: transparent; stroke: none; pointer-events: all; }
.bm-ring { fill: var(--white); stroke: var(--forest); stroke-width: 2.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
.bm-dot { display: none; pointer-events: none; }
.bm-dot circle { fill: var(--forest-dark); stroke: var(--white); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.bm-dot text { fill: var(--white); font: 600 34px var(--bm-font); text-anchor: middle; }
.body-map-single .bm-dot text { display: none; } /* one region: nothing to number */
.bm-mark.is-on .bm-ring { fill: none; stroke: var(--champagne); stroke-width: 2px; }
.bm-mark.is-on .bm-dot { display: inline; }
.bm-mark:focus-visible .bm-hit, .bm-mark.is-focus .bm-hit { stroke: var(--forest-dark); stroke-width: 3px; stroke-dasharray: 6 3; vector-effect: non-scaling-stroke; }
.bm-mark:focus-visible .bm-ring, .bm-mark.is-focus .bm-ring { stroke: var(--forest-dark); stroke-dasharray: 6 3; }
.bm-mark.is-disabled .bm-ring { opacity: .45; stroke-dasharray: 3 3; }
.bm-mark.is-disabled { cursor: not-allowed; }
@media (hover: hover) { .bm-mark:not(.is-on):not(.is-disabled):hover .bm-ring { fill: var(--sage); } }
.bm-mark:not(.is-on):not(.is-disabled):active .bm-ring { fill: var(--sage); }
/* The bar: the chosen region and "Continuar" stay on screen (not when the screen is very short:
   200% zoom, landscape). */
.body-map-bar { position: sticky; bottom: 0; z-index: 2; margin: 6px 0 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--white); }
/* Focus and scrolling to a field never leave it under the bar (WCAG 2.4.11). */
html:has(.body-map-bar) { scroll-padding-bottom: 150px; }
/* After an error the summary pushes the figure down: the bar then stays in the flow, below the figure. */
.form-card:has(.error-summary) .body-map-bar { position: static; }
/* From 768 px the card is wide and the two figures are tall: the bar follows them instead of covering their
   feet (OUT-20261018-map-fit-fix). */
@media (max-height: 499px), (min-width: 768px) { .body-map-bar { position: static; } html:has(.body-map-bar) { scroll-padding-bottom: 0; } }
.body-map-chosen { margin: 0 0 6px; padding: 0 2px; }
.body-map-chosen-invalid { padding: 6px 10px; border: 2px solid var(--danger); border-radius: 12px; }
.body-map-chosen h2 { margin: 0 0 6px; font-size: 17px; }
.body-map-chosen p { display: flex; align-items: center; min-height: 59px; margin: 0; color: var(--muted); } /* as tall as a chosen row of 3 lines, so the bar does not grow on a choice */
.body-map-chosen p[hidden] { display: none; }
.body-map-chosen ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.body-map-chosen li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 59px; color: var(--ink); font-weight: 600; }
.body-map-chosen li span { align-self: center; min-width: 0; overflow-wrap: anywhere; font-size: 15px; line-height: 1.3; }
.patient-page .body-map-chosen li button { flex: none; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--bm-line); border-radius: 8px; background: var(--white); color: var(--bm-ink); font: 600 14px var(--bm-font); cursor: pointer; }
.body-map-bar .button { min-height: 48px; }
.body-list fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.body-list-view { margin: 18px 0 0; }
.body-list-view > legend { padding: 0; font-size: 18px; font-weight: 700; }
.body-list-region { margin: 12px 0 0; }
.body-list-region > legend { padding: 0; margin: 0 0 6px; font-weight: 600; }
.marked-list { margin: 0 0 4px; padding-left: 22px; }
.summary-line .marked-list, .order-details .marked-list { padding-left: 0; list-style-position: inside; }
/* A mark that wraps hangs under its text, not under the number; the first line stays on the region edge. */
.summary-line .marked-list li, .order-details .marked-list li { padding-left: 1.6em; text-indent: -1.6em; }
.body-list-invalid { padding: 10px 12px; border: 2px solid var(--danger); border-radius: 12px; }
.body-list-limit { margin: 0 0 12px; font-weight: 600; }
.patient-page .sex-options label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
/* One figure at a time in a narrow card (phone); two side by side in a wide card. */
@container bm (max-width: 699px) {
  .body-map[data-view="frente"] .body-map-figure-costas, .body-map[data-view="costas"] .body-map-figure-frente { display: none; }
}
@container bm (min-width: 700px) {
  .body-map-views { display: none; }
  .body-map-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (prefers-reduced-motion: reduce) { .body-map *, .body-map-wrap * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .bm-body, .bm-ear, .bm-head, .bm-detail, .bm-face, .bm-mid { stroke: CanvasText; }
  .bm-body, .bm-ear, .bm-head, .bm-ring { fill: Canvas; }
  .bm-ring { stroke: CanvasText; }
  .bm-mark.is-on .bm-ring { stroke: Highlight; }
  .bm-view, .bm-side { fill: CanvasText; }
  .bm-dot circle { fill: Highlight; stroke: Canvas; }
  .bm-dot text { fill: HighlightText; }
  .patient-page .body-map-views button[aria-pressed="true"] { background: Highlight; color: HighlightText; }
}

/* Presencial, existing patient (PR1B-4): note, demo box, day chips, summary list. Targets >= 44px. */
.patient-page .note { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--ivory); font-size: 15px; line-height: 1.5; }
.patient-page .demo-box { margin: 0 0 18px; padding: 12px 14px; border: 2px dashed var(--champagne); border-radius: 12px; background: var(--sand); color: var(--sand-ink); font-size: 15px; }
.patient-page .demo-box p { margin: 0 0 6px; }
.patient-page .demo-box p:last-child { margin-bottom: 0; }
.patient-page .demo-code { font-size: 20px; letter-spacing: 0.2em; }
.patient-page .steplab { margin: 14px 0 8px; font-size: 14px; font-weight: 750; }
.patient-page .day-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.patient-page .day-chip { display: inline-flex; min-width: 44px; min-height: 44px; box-sizing: border-box; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--forest); font-weight: 750; text-decoration: none; }
.patient-page .day-chip[aria-current="true"] { border-color: var(--forest); background: var(--forest); color: var(--white); }
.patient-page .day-chip:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page .inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 8px; }
.patient-page .inline-actions .button { margin-top: 0; }
.patient-page .dl { margin: 0 0 18px; }
.patient-page .dl dt { margin-top: 12px; color: var(--muted); font-size: 14px; font-weight: 750; }
.patient-page .dl dd { margin: 2px 0 0; font-size: 17px; }

/* Entry screens (OUT-20261017-journey-pr0d): fixed notice of the login and the consultorio screen. */
.entry-notice { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--sage); color: var(--forest-dark); font-size: 14px; line-height: 1.5; }
.entry-links { margin: 14px 0 0; }
.entry-links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--forest); font-weight: 700; }
.entry-links a:focus-visible, .patient-page .button:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.button-disabled-text { margin: 0; padding: 12px 14px; border: 1px dashed var(--forest); border-radius: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* PR1B-5: new patient's registration and pending screens */
.patient-page .legend { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.patient-page .rq { color: var(--danger); font-weight: 750; }
.patient-page .tag-pending { background: var(--sand); color: var(--sand-ink); }

.steps3 { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.steps3 li { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; box-sizing: border-box; min-width: min-content; min-height: 64px; padding: 8px 2px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--muted); font-size: 13px; font-weight: 700; text-align: center; }
.steps3 li.done { background: var(--sage); color: var(--forest-dark); }
.steps3 li.cur { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); color: var(--forest-dark); }
@media (max-width: 420px) { .steps3 { gap: 4px; } .steps3 li { padding-inline: 0; font-size: 12px; } }
.steps3 li.pend { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); background: var(--white); color: var(--forest-dark); }
.steps3-mark { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid currentColor; font-size: 13px; }

/* Identity (OUT-20261018-visual-batch-2 B1): Manrope from apps/public (OFL), logo, heading ink. */
@font-face { font-family: Manrope; src: url("../fonts/Manrope-latin-variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
.patient-page { font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.6; }
.patient-page h1 { color: var(--patient-heading); }
.patient-logo { display: block; width: 160px; height: auto; margin-bottom: 4px; }
.nowrap { white-space: nowrap; }

/* Presencial steps: one selected style (--forest) for the day and the hour, day grid, 44 px targets. */
.patient-page .day-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px) { .patient-page .day-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.patient-page .slot-options label { min-width: 44px; min-height: 44px; }
/* mixed lengths: each "14:00 às 14:45" stays on one line and the options stack as the width needs */
.patient-page .form-card .sex-options.slot-options.slot-ranges { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.patient-page .slot-ranges time { white-space: nowrap; }
.patient-page .form-card .slot-options label:has(input:checked) { border-color: var(--forest); background: var(--forest); color: var(--white); }
.patient-page button.entry-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }

/* Forms: "Mostrar senha" as a text control with a 44 px target; the terms row is one target. */
.password-toggle { min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--forest); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; justify-self: start; }
.password-toggle:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page .form-card label.check-row { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 10px 0; font-weight: 500; line-height: 1.4; cursor: pointer; }
.patient-page .form-card label.check-row input[type="checkbox"] { margin: 0; }
.patient-page .button.nobr { white-space: nowrap; }

/* Terms and privacy text in a modal dialog (OUT-20261029-signup-doc-dialog): head and foot stay in
   view, only the body scrolls. Tokens only. */
.document-dialog { flex-direction: column; width: calc(100% - 16px); max-width: none; max-height: calc(100dvh - 16px); margin: auto; padding: var(--space-4); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink); overflow-wrap: anywhere; }
.document-dialog[open] { display: flex; }
.document-dialog::backdrop { background: color-mix(in srgb, var(--forest-dark) 50%, transparent); }
.document-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.document-dialog-head h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.document-dialog-head h2:focus { outline: none; }
.document-dialog-head .password-toggle { flex: none; }
.document-dialog-body { flex: 1 1 auto; min-height: 0; padding: var(--space-4) 0; overflow-y: auto; overscroll-behavior: contain; }
.document-dialog-foot { padding-top: var(--space-3); border-top: 1px solid var(--line); }
@media (min-width: 481px) {
  .document-dialog { width: min(640px, 100% - 48px); max-height: calc(100dvh - 64px); padding: var(--space-5); }
}

/* Legal documents (OUT-20261103-legal-docs, #833): the page text, the table in a scrolling region, the
   footer links, the two-box fieldset and the TCLE dialog buttons. Tokens only; tables scroll in their
   wrapper, never the page. */
.legal-doc { overflow-wrap: anywhere; }
.legal-doc h2 { margin: 28px 0 10px; font-size: 20px; line-height: 1.3; }
.legal-doc p, .legal-doc li { max-width: 72ch; line-height: 1.6; }
.legal-doc ol, .legal-doc ul { margin: 0 0 14px; padding-left: 24px; }
.legal-doc .legal-meta { margin: 0 0 4px; color: var(--muted); font-size: 16px; }
.legal-table { max-width: 100%; margin: 0 0 16px; overflow-x: auto; }
.legal-table:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.legal-table th, .legal-table td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: normal; }
.legal-table th { background: var(--ivory); }
@media (max-width: 767px) { .legal-table table { min-width: 34rem; } }
.patient-footer { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.patient-footer ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.patient-footer a { display: flex; min-height: 44px; align-items: center; color: var(--forest); font-weight: 700; text-decoration: underline; }
.patient-footer a[aria-current="page"] { text-decoration-thickness: 3px; }
.patient-footer a:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
@media (min-width: 768px) {
  .patient-footer ol { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
}
.legal-fieldset { min-width: 0; margin: 0 0 var(--space-4); padding: 0; border: 0; }
.legal-fieldset legend { margin-bottom: var(--space-2); padding: 0; font-weight: 700; }
.consent-block { margin-bottom: var(--space-3); }
[data-tcle-open][hidden] { display: none; }
.consent-actions { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .consent-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The pop-up "Antes de começar" before point 1 (OUT-20261102-session-point-notes): the same dialog,
   480 px from 768, a 44 px close button and the list of reminders. Without JS the list is in the flow. */
.reminder-close { display: grid; flex: none; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--forest); border-radius: 12px; background: var(--white); color: var(--forest); font-family: inherit; font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer; }
.reminder-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.reminder-list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.reminder-icon { display: grid; flex: none; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--sage); color: var(--forest-dark); font-weight: 800; line-height: 1; }
.reminder-dialog [data-reminder-body]:focus-visible { outline: 3px solid var(--forest); outline-offset: -3px; }
.reminder-note { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--sand); color: var(--sand-ink); }
.reminder-note h3 { margin: 0 0 var(--space-2); font-size: 16px; }
.reminder-note p { margin: 0; }
.reminder-inline { margin: 0 0 var(--space-4); padding: var(--space-4); border-radius: 12px; background: var(--sage); }
.reminder-inline h2 { margin: 0 0 var(--space-3); font-size: 20px; }
@media (min-width: 768px) {
  .reminder-dialog { width: min(480px, 100% - 48px); }
}

/* The two paragraphs of /regiao/ come after the figure and its bar (OUT-20261018-compact-patient). */
.regiao-ajuda { margin-top: var(--space-4); }
.patient-page .regiao-ajuda .lead { margin: 0 0 var(--space-3); }

/* Compact patient screens on a phone (OUT-20261018-compact-patient, owner-approved 18/10/2026): smaller
   margins and heading line-height, the card is kept. Space tokens only; 768 and 1280 are unchanged
   (the detail step's h1 inherits the page line-height at 768 and 1280, see `h1:has(> label)`). */
@media (max-width: 480px) {
  .patient-page.form-page { padding: var(--space-3); }
  .patient-page .form-card { padding: var(--space-5); }
  .patient-page .patient-brand { margin-bottom: var(--space-2); }
  .patient-page .patient-account { line-height: 1.3; }
  .patient-page .status-pill { margin-bottom: var(--space-3); }
  .patient-page .form-card > .status-pill { margin-bottom: var(--space-1); padding: 2px 8px; font-size: 12px; line-height: 1.3; }
  .form-card:has(> .status-pill) .body-map-wrap { --bm-pill: 23.6px; }
  .form-card:has(.patient-account) .body-map-wrap { --bm-name: 18.2px; }
  .patient-page .step-bar { margin-bottom: var(--space-3); }
  .patient-page .form-card h1 { margin-bottom: var(--space-3); line-height: 1.2; }
}

/* FAQ OUT-20261021-patient-faq: list with a browser-side filter, and the article text. Existing
   tokens only; the filter is shown by faq-filter.js (hidden without JS), rows are stretched links
   whose accessible name is the title alone. */
.patient-page .faq-filter { margin: 0 0 var(--space-3); }
.patient-page .faq-filter[hidden], .patient-page .faq-list li[hidden], .patient-page .faq-nenhum[hidden], .patient-page .faq-filter-row button[hidden] { display: none; }
.patient-page .faq-filter label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 750; }
.patient-page .faq-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.patient-page .faq-filter-row input { flex: 1 1 12rem; width: auto; min-width: 0; }
.patient-page .faq-filter-row .button { min-height: 46px; }
.patient-page .faq-filter .field-hint { margin: 0; }
.patient-page .faq-contagem { margin: 0 0 var(--space-3); color: var(--muted); font-size: 15px; }
.patient-page .faq-list { margin: 0 0 24px; padding: 0; list-style: none; }
.patient-page .faq-list li { position: relative; min-height: 52px; margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.patient-page .faq-link { color: var(--forest); font-weight: 750; text-decoration: none; overflow-wrap: anywhere; }
.patient-page .faq-link::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.patient-page .faq-link:focus-visible { outline: none; }
.patient-page .faq-link:focus-visible::after { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page .faq-desc { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.patient-page .faq-exemplo { margin: 8px 0 0; }
.patient-page .faq-exemplo .status-pill.tag { margin: 0; border-radius: 10px; }
.patient-page .faq-titulo + .faq-exemplo { margin: 0 0 12px; }
.patient-page .faq-filter-row input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.patient-page .faq-nenhum button { margin-top: var(--space-3); }
.patient-page .faq-titulo { overflow-wrap: anywhere; line-height: 1.2; }
.patient-page .faq-body { max-width: 68ch; margin: 0 0 24px; line-height: 1.6; overflow-wrap: anywhere; }
.patient-page .faq-body h2 { margin: 24px 0 8px; font-size: 18px; }
.patient-page .faq-body p, .patient-page .faq-body ul { margin: 0 0 14px; }
.patient-page .faq-body ul { padding-left: 22px; }
@media (forced-colors: active) { .patient-page .faq-list li { border-color: CanvasText; } }

/* Consultas marcadas OUT-20261021-patient-appointments */
.outbox-list .card > .button { margin-bottom: 12px; }
.outbox-list .card .actions { margin-bottom: 8px; }

/* patient menu (#411) */
/* The panel opens in flow under the header row; the toggle is out of flow at the top right, so it never moves. */
.patient-page .patient-brand { position: relative; flex-wrap: wrap; row-gap: 0; }
.patient-menu { flex: 0 0 100%; margin: 0; }
.patient-menu summary { position: absolute; top: 0; right: 0; display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--forest); font-weight: 700; cursor: pointer; list-style: none; }
.patient-menu summary::-webkit-details-marker { display: none; }
.patient-menu summary:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-menu-icon { position: relative; width: 18px; height: 2px; background: currentcolor; box-shadow: 0 -6px 0 currentcolor, 0 6px 0 currentcolor; }
.patient-menu[open] .patient-menu-icon { box-shadow: none; transform: rotate(45deg); }
.patient-menu[open] .patient-menu-icon::after { position: absolute; inset: 0; background: currentcolor; transform: rotate(90deg); content: ""; }
.patient-menu nav { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.patient-menu ul { margin: 0; padding: 0; list-style: none; }
.patient-menu li + li { border-top: 1px solid var(--line); }
.patient-menu a { display: flex; min-width: 44px; min-height: 44px; align-items: center; padding: 8px 16px; border-left: 4px solid transparent; color: var(--forest); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.patient-menu a:hover { background: var(--sage); }
.patient-menu a:focus-visible { outline: 3px solid var(--forest); outline-offset: -3px; }
.patient-menu a[aria-current="page"] { border-left-color: var(--forest); background: var(--sage); color: var(--forest-dark); font-weight: 700; }
.patient-menu li ul { border-top: 1px solid var(--line); }
.patient-menu li li a { padding-left: 36px; font-weight: 400; }
.patient-menu .patient-signout { margin-left: 0; justify-content: flex-start; text-decoration: none; }
.patient-menu .patient-menu-divider { border-top: 3px solid var(--line); }
/* Tutoriais OUT-20261021-patient-tutorials: the list cue (rows reuse the FAQ classes) and the player. Existing tokens only. */
.patient-page .tut-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.patient-page .tut-tipo { color: var(--muted); font-size: 14px; }
.patient-page .tut-midia { margin: 0 0 var(--space-3); }
.patient-page .tut-midia video { display: block; width: auto; max-width: 100%; max-height: 70vh; margin-inline: auto; aspect-ratio: 9 / 16; border-radius: 14px; background: var(--ink); }
.patient-page .tut-midia video:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.patient-page .tut-midia video::cue { font-size: 15px; }
.patient-page .tut-midia figcaption { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
@media (forced-colors: active) { .patient-page .tut-midia video { border: 1px solid CanvasText; } }