/* ========================================================================== Patient-facing Flavor Wizard — mobile-first, no admin chrome. Shares the RxFlavor logo palette with the marketing site (see landing.css): navy for structure and type, raspberry for action and selection, white surfaces, green for success, and flavor colour reserved for illustration. Also used by the follow-up page (/flavor-followup/). ========================================================================== */ :root { /* Brand navy — the Rx and mortar ink */ --wz-navy: #042e58; --wz-navy-deep: #041d38; --wz-navy-mid: #0a3d70; --wz-navy-soft: #e9eff7; /* Primary action — the raspberry splash */ --wz-berry: #de1c60; --wz-berry-deep: #c9155a; --wz-berry-soft: #fdeaf1; --wz-berry-tint: #fef5f8; /* Neutrals */ --wz-ink: #10243f; --wz-ink-soft: #46586f; --wz-muted: #647386; --wz-line: #dde4ee; --wz-line-soft: #ebeff6; --wz-bg: #f1f5fa; --wz-surface: #ffffff; /* Semantic states */ --wz-green: #15803d; --wz-green-mid: #16a34a; --wz-green-soft: #e9f7ee; --wz-red: #c62348; --wz-red-mid: #dd2f4a; --wz-red-soft: #fdedef; --wz-amber-soft: #fdf4e2; --wz-amber-ink: #96650e; --wz-radius: 14px; --wz-radius-lg: 18px; --wz-shadow: 0 2px 6px rgb(4 46 88 / 0.05), 0 24px 56px -32px rgb(4 46 88 / 0.3); --wz-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --wz-max: 448px; --wz-ease: cubic-bezier(0.22, 1, 0.36, 1); --wz-touch: 44px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; font-family: var(--wz-font); color: var(--wz-ink); background: var(--wz-bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* Column, not row: the shared legal footer is appended to and must land underneath the wizard rather than beside it. */ body.wz-body { display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100dvh; } .wz-shell { width: 100%; max-width: var(--wz-max); flex: 1 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--wz-surface); display: flex; flex-direction: column; position: relative; } /* The shared legal footer sits on the tinted page background, where the default admin grey drops just under 4.5:1. */ body.wz-body > .rx-footer { width: 100%; max-width: var(--wz-max); border-top-color: var(--wz-line); } body.wz-body > .rx-footer .rx-footer__inner, body.wz-body > .rx-footer .rx-footer__nav a { color: var(--wz-ink-soft); } body.wz-body > .rx-footer .rx-footer__nav a:hover, body.wz-body > .rx-footer .rx-footer__nav a:focus-visible { color: var(--wz-berry-deep); } @media (min-width: 560px) { body.wz-body { padding: 2rem 1rem 1rem; background: radial-gradient(70rem 40rem at 50% -18rem, #e6eef8 0%, transparent 70%), var(--wz-bg); } .wz-shell { min-height: min(46rem, calc(100dvh - 6rem)); border-radius: 26px; overflow: hidden; box-shadow: var(--wz-shadow); } } /* -------------------------------------------------------------------------- Progress header -------------------------------------------------------------------------- */ .wz-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; position: sticky; top: 0; background: rgb(255 255 255 / 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--wz-line-soft); z-index: 10; } .wz-back { appearance: none; border: 0; background: transparent; width: var(--wz-touch); height: var(--wz-touch); margin-left: -0.5rem; border-radius: 12px; display: grid; place-items: center; cursor: pointer; color: var(--wz-navy); flex-shrink: 0; } .wz-back:hover:not(:disabled) { background: var(--wz-navy-soft); } .wz-back:focus-visible { outline: 2px solid var(--wz-berry); outline-offset: 2px; } .wz-back:disabled { opacity: 0.3; cursor: default; } .wz-progress-wrap { min-width: 0; } .wz-progress { height: 6px; background: #e3e9f2; border-radius: 999px; overflow: hidden; } .wz-progress > i { display: block; height: 100%; width: 0; background: var(--wz-berry); border-radius: inherit; transition: width 0.35s var(--wz-ease); } .wz-step-meta { font-size: 0.78rem; font-weight: 700; color: var(--wz-muted); text-align: right; white-space: nowrap; } /* -------------------------------------------------------------------------- Page frame -------------------------------------------------------------------------- */ .wz-main { flex: 1; padding: 1.15rem 1.25rem 7.5rem; } .wz-head, .wz-intro-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem 0; } .wz-logo { font-weight: 800; color: var(--wz-navy); font-size: 1.2rem; letter-spacing: -0.03em; } .wz-brand img { display: block; height: 1.9rem; width: auto; } /* Names the thing the patient was sent to. Reads as a product label, not a button — nothing here is tappable. */ .wz-product { flex: none; padding: 0.24rem 0.7rem; border-radius: 999px; background: var(--wz-berry-soft); color: var(--wz-berry-deep); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; } /* Question screens: same identity, less chrome, sitting above the progress bar so a mid-flow resume still says what this is. */ .wz-head--compact { padding: 0.7rem 1rem 0.15rem; } .wz-head--compact .wz-brand img { height: 1.25rem; } .wz-head--compact .wz-product { padding: 0.18rem 0.55rem; font-size: 0.7rem; } .wz-pharmacy-chip { margin: 0 0 1rem; text-align: center; font-size: 0.85rem; color: var(--wz-muted); } .wz-pharmacy-chip strong { color: var(--wz-ink); font-weight: 700; } .wz-pharmacy-brand { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; margin: 0 0 1rem; text-align: center; } .wz-pharmacy-logo { display: block; max-width: 8rem; max-height: 3.5rem; width: auto; height: auto; object-fit: contain; } .wz-pharmacy-name { margin: 0; font-size: 1rem; font-weight: 800; color: var(--wz-navy); letter-spacing: -0.02em; } /* -------------------------------------------------------------------------- Welcome screen -------------------------------------------------------------------------- */ .wz-hero-art { display: grid; place-items: center; margin: 0.5rem auto 1.5rem; width: 11.5rem; height: 11.5rem; border-radius: 50%; background: radial-gradient(circle at 50% 46%, #eef4fb 0%, #f7fafd 62%, transparent 72%); } .wz-art-svg { width: 100%; height: 100%; } .wz-title { margin: 0 0 0.6rem; font-size: clamp(1.45rem, 5.5vw, 1.7rem); letter-spacing: -0.025em; line-height: 1.22; font-weight: 800; color: var(--wz-navy); text-align: center; } .wz-lede { margin: 0 auto 1.6rem; color: var(--wz-ink-soft); font-size: 0.98rem; line-height: 1.5; text-align: center; max-width: 23rem; } .wz-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .wz-benefits li { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 0.94rem; color: var(--wz-ink); } .wz-benefit-ico { width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--wz-navy-soft); color: var(--wz-navy); display: grid; place-items: center; flex-shrink: 0; } /* -------------------------------------------------------------------------- Question heading -------------------------------------------------------------------------- */ .wz-q { margin: 0 0 0.35rem; font-size: clamp(1.25rem, 4.6vw, 1.4rem); letter-spacing: -0.02em; font-weight: 800; line-height: 1.28; color: var(--wz-navy); } .wz-hint { margin: 0 0 1.1rem; color: var(--wz-muted); font-size: 0.9rem; line-height: 1.45; } /* -------------------------------------------------------------------------- Option rows (age, species, medication form, yes/no) -------------------------------------------------------------------------- */ .wz-cards { display: grid; gap: 0.6rem; } .wz-card { position: relative; appearance: none; width: 100%; text-align: left; border: 1.5px solid var(--wz-line); background: var(--wz-surface); border-radius: var(--wz-radius); padding: 0.8rem 0.9rem; min-height: 3.5rem; display: grid; grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: center; cursor: pointer; font: inherit; color: var(--wz-ink); transition: border-color 0.15s var(--wz-ease), background 0.15s var(--wz-ease), box-shadow 0.15s var(--wz-ease); } .wz-card:hover { border-color: #b9c6d8; } /* Native input drives semantics and keyboard behaviour; the label is the paint. */ .wz-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } /* The real input is visually hidden, so the label carries the focus ring. */ .wz-card:focus-visible, .wz-card:has(.wz-input:focus-visible) { outline: 2px solid var(--wz-berry); outline-offset: 2px; } @supports not selector(:has(*)) { .wz-card:focus-within, .wz-flavor:focus-within { outline: 2px solid var(--wz-berry); outline-offset: 2px; } } .wz-card.is-selected, .wz-card[aria-pressed='true'] { border-color: var(--wz-berry); background: var(--wz-berry-tint); box-shadow: 0 0 0 3px rgb(222 28 96 / 0.1); } .wz-card .wz-ico { width: 2.4rem; height: 2.4rem; border-radius: 11px; background: var(--wz-navy-soft); color: var(--wz-navy); display: grid; place-items: center; flex-shrink: 0; } .wz-card.is-selected .wz-ico { background: var(--wz-berry-soft); color: var(--wz-berry-deep); } .wz-card-text { min-width: 0; } .wz-card strong { display: block; font-size: 0.98rem; font-weight: 700; line-height: 1.3; } .wz-card .sub { display: block; color: var(--wz-muted); font-size: 0.82rem; font-weight: 500; margin-top: 0.1rem; } .wz-card.is-selected .sub { color: var(--wz-ink-soft); } /* Round radio indicator */ .wz-check { width: 1.35rem; height: 1.35rem; border-radius: 999px; border: 1.5px solid #c3cede; background: var(--wz-surface); display: grid; place-items: center; font-size: 0.68rem; line-height: 1; color: transparent; flex-shrink: 0; } .wz-check .wz-svg { opacity: 0; } .wz-card.is-selected .wz-check, .wz-card[aria-pressed='true'] .wz-check { background: var(--wz-berry); border-color: var(--wz-berry); color: #fff; } .wz-card.is-selected .wz-check .wz-svg, .wz-card[aria-pressed='true'] .wz-check .wz-svg { opacity: 1; } /* Square checkbox indicator */ .wz-check--box { border-radius: 6px; } /* -------------------------------------------------------------------------- Yes / No experience cards -------------------------------------------------------------------------- */ .wz-yesno { display: grid; gap: 0.65rem; } .wz-yesno .wz-card { align-items: flex-start; padding: 1rem 0.95rem; } .wz-yesno .wz-card .wz-ico { width: 2.6rem; height: 2.6rem; } .wz-yesno .wz-card.is-selected[data-val='yes'] { border-color: var(--wz-green-mid); background: var(--wz-green-soft); box-shadow: 0 0 0 3px rgb(22 163 74 / 0.12); } .wz-yesno .wz-card.is-selected[data-val='yes'] .wz-ico { background: #cdefd9; color: var(--wz-green); } .wz-yesno .wz-card.is-selected[data-val='yes'] .wz-check { background: var(--wz-green-mid); border-color: var(--wz-green-mid); } /* -------------------------------------------------------------------------- Text fields -------------------------------------------------------------------------- */ .wz-field { margin-top: 1rem; display: none; } .wz-field.show { display: block; } .wz-field label { display: block; font-size: 0.9rem; font-weight: 700; color: var(--wz-navy); margin-bottom: 0.15rem; } .wz-field .wz-optional { display: block; font-size: 0.8rem; font-weight: 500; color: var(--wz-muted); margin-bottom: 0.45rem; } .wz-field input, .wz-field select, .wz-field textarea { width: 100%; border: 1.5px solid var(--wz-line); border-radius: 12px; padding: 0.8rem 0.9rem; font: inherit; font-size: 0.95rem; color: var(--wz-ink); background: var(--wz-surface); min-height: var(--wz-touch); } .wz-field input::placeholder, .wz-field textarea::placeholder { color: #93a0b2; } .wz-field input:focus, .wz-field select:focus, .wz-field textarea:focus { outline: 2px solid rgb(222 28 96 / 0.28); outline-offset: 1px; border-color: var(--wz-berry); } .wz-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d6c80' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; padding-right: 2.4rem; } /* -------------------------------------------------------------------------- Flavor tiles -------------------------------------------------------------------------- */ .wz-flavor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; } @media (max-width: 340px) { .wz-flavor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wz-flavor { position: relative; appearance: none; border: 1.5px solid var(--wz-line); background: var(--wz-surface); border-radius: var(--wz-radius); padding: 0.85rem 0.35rem 0.7rem; cursor: pointer; font: inherit; color: var(--wz-ink); min-height: 5.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; transition: border-color 0.15s var(--wz-ease), background 0.15s var(--wz-ease); } .wz-flavor:hover { border-color: #b9c6d8; } .wz-flavor:focus-visible, .wz-flavor:has(.wz-input:focus-visible) { outline: 2px solid var(--wz-berry); outline-offset: 2px; } .wz-flavor .flavor-ico { display: grid; place-items: center; line-height: 0; } .wz-flavor strong { font-size: 0.76rem; text-align: center; line-height: 1.25; font-weight: 700; word-break: break-word; hyphens: auto; } .wz-flavor .badge { position: absolute; top: 0.3rem; right: 0.3rem; width: 1.15rem; height: 1.15rem; border-radius: 999px; display: none; place-items: center; color: #fff; } .wz-flavor.is-selected .badge { display: grid; } .wz-flavor.like.is-selected { border-color: var(--wz-berry); background: var(--wz-berry-tint); } .wz-flavor.like.is-selected .badge { background: var(--wz-berry); } .wz-flavor.dislike.is-selected { border-color: var(--wz-red-mid); background: var(--wz-red-soft); } .wz-flavor.dislike.is-selected .badge { background: var(--wz-red); } /* -------------------------------------------------------------------------- Allergies & restrictions -------------------------------------------------------------------------- */ .wz-restrict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } .wz-restrict .wz-card { grid-template-columns: auto 1fr; min-height: 3.1rem; padding: 0.7rem 0.8rem; gap: 0.6rem; } .wz-restrict .wz-card.span-2 { grid-column: 1 / -1; } .wz-restrict .wz-card strong { font-size: 0.92rem; } .wz-restrict .wz-card.emphasis:not(.is-selected) { border-color: #eec574; background: var(--wz-amber-soft); } .wz-restrict .wz-card .wz-note { display: block; font-size: 0.75rem; font-weight: 600; color: var(--wz-amber-ink); margin-top: 0.1rem; } /* -------------------------------------------------------------------------- Review -------------------------------------------------------------------------- */ .wz-review { display: grid; gap: 0.5rem; margin: 0.25rem 0 0; } .wz-review-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.7rem 0.8rem; border: 1px solid var(--wz-line); border-radius: var(--wz-radius); background: var(--wz-surface); } .wz-review-row .wz-review-ico { width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--wz-navy-soft); color: var(--wz-navy); display: grid; place-items: center; flex-shrink: 0; } .wz-review-row .label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wz-muted); } .wz-review-row .value { font-weight: 700; font-size: 0.9rem; line-height: 1.35; margin-top: 0.1rem; overflow-wrap: anywhere; } .wz-review-tag { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--wz-navy-soft); color: var(--wz-ink-soft); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em; vertical-align: 1px; white-space: nowrap; } .wz-edit { appearance: none; border: 0; background: transparent; color: var(--wz-berry-deep); font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; border-radius: 8px; min-height: var(--wz-touch); min-width: var(--wz-touch); padding: 0 0.35rem; align-self: center; } .wz-edit:hover { background: var(--wz-berry-soft); } .wz-edit:focus-visible { outline: 2px solid var(--wz-berry); outline-offset: 1px; } /* -------------------------------------------------------------------------- Sticky action footer -------------------------------------------------------------------------- */ .wz-footer { position: sticky; bottom: 0; margin-top: auto; padding: 0.8rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgb(255 255 255 / 0), #fff 30%); z-index: 10; } .wz-btn { appearance: none; width: 100%; border: 0; border-radius: 999px; min-height: 3.15rem; padding: 0.85rem 1.1rem; font: inherit; font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; cursor: pointer; background: var(--wz-berry); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background 0.15s var(--wz-ease); } .wz-btn:hover:not(:disabled) { background: var(--wz-berry-deep); } .wz-btn:disabled { background: #dde3ec; color: #4d5b6d; cursor: not-allowed; } .wz-btn:focus-visible { outline: 2px solid var(--wz-berry); outline-offset: 3px; } .wz-spinner { width: 1.05rem; height: 1.05rem; border-radius: 999px; border: 2px solid rgb(255 255 255 / 0.45); border-top-color: #fff; animation: wz-spin 0.7s linear infinite; } .wz-btn:disabled .wz-spinner { border-color: rgb(77 91 109 / 0.3); border-top-color: #4d5b6d; } @keyframes wz-spin { to { transform: rotate(360deg); } } .wz-powered { text-align: center; font-size: 0.76rem; font-weight: 600; color: var(--wz-muted); margin: 0.85rem 0 0; } .wz-test-banner { margin: 0; padding: 0.65rem 1rem; background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; font-size: 0.82rem; text-align: center; } /* -------------------------------------------------------------------------- Completion + gate states -------------------------------------------------------------------------- */ .wz-main--center { text-align: center; } .wz-state { padding: 3rem 1.5rem; text-align: center; } .wz-state h1 { margin: 1rem 0 0.5rem; font-size: 1.35rem; font-weight: 800; color: var(--wz-navy); line-height: 1.3; } .wz-state p { color: var(--wz-ink-soft); line-height: 1.5; font-size: 0.95rem; } .wz-success-svg { width: 4.5rem; height: 4.5rem; margin: 1.25rem auto 1rem; display: block; } .wz-done-art { width: 8rem; height: 8rem; margin: 1.75rem auto 0; } .wz-submission-code { margin: 1.5rem auto 1rem; padding: 1.15rem 1.35rem; max-width: 18rem; text-align: center; border: 2px dashed var(--wz-berry); border-radius: var(--wz-radius-lg); background: var(--wz-berry-tint); } .wz-submission-code__label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wz-muted); margin-bottom: 0.35rem; } .wz-submission-code__value { display: block; font-size: 1.65rem; font-weight: 800; letter-spacing: 0.04em; color: var(--wz-navy); font-variant-numeric: tabular-nums; } .wz-flavor-result { margin: 0 0 0.5rem; text-align: center; } .wz-flavor-result__label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--wz-muted); margin-bottom: 0.25rem; } .wz-flavor-result__name { display: block; font-size: 1.75rem; font-weight: 800; color: var(--wz-navy); letter-spacing: -0.02em; } .wz-powered--done { text-align: center; padding: 0 1.25rem 1.25rem; margin: 0; } .wz-footer:has(.wz-btn--ghost) { display: flex; flex-direction: column; gap: 0.55rem; } /* -------------------------------------------------------------------------- Medication Success (shown after submission) -------------------------------------------------------------------------- */ .wz-ms { margin-top: 2rem; text-align: left; } .wz-ms h2 { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 800; color: var(--wz-navy); } .wz-ms-lede { margin: 0 0 1rem; font-size: 0.88rem; color: var(--wz-muted); line-height: 1.4; } .wz-ms-primary { border: 1px solid var(--wz-line); border-radius: var(--wz-radius); background: var(--wz-surface); padding: 1rem 1.05rem 1.1rem; } .wz-ms-primary .ms-guide-head { grid-template-columns: 1fr 96px; } .wz-ms-primary .ms-thumb { border-radius: 10px; overflow: hidden; } .wz-ms-primary .ms-block h4, .wz-ms-primary .ms-guide-head h3 { color: var(--wz-navy); } .wz-ms-primary .ms-steps, .wz-ms-primary .ms-bullets { color: var(--wz-ink-soft, #46586f); font-size: 0.88rem; } .wz-ms-more { margin-top: 0.85rem; border: 1px solid var(--wz-line); border-radius: var(--wz-radius); background: var(--wz-surface); padding: 0.65rem 0.9rem; } .wz-ms-more summary { cursor: pointer; font-weight: 750; color: var(--wz-navy); font-size: 0.92rem; } .wz-ms-related { margin-top: 0.75rem; display: grid; gap: 0.65rem; } .wz-ms-related .ms-card--compact { border: 1px solid var(--wz-line); border-radius: var(--wz-radius); overflow: hidden; } .wz-disclaimer { font-size: 0.76rem; color: var(--wz-muted); line-height: 1.45; margin-top: 0.75rem; } /* -------------------------------------------------------------------------- Follow-up consent (end of the wizard) -------------------------------------------------------------------------- */ /* A fieldset, so the timing choice is announced as one labelled group. */ .wz-timing { border: 0; padding: 0; margin: 1rem 0 0; } .wz-timing legend { padding: 0; font-size: 0.9rem; font-weight: 700; color: var(--wz-navy); margin-bottom: 0.45rem; } /* Two columns rather than the card default of three. These rows carry no icon, so the empty icon track would strand the tick in the middle of the row instead of at the right edge every other answer card aligns it to. `display` is restated because these are labels inside a .wz-field, and `.wz-field label` would otherwise flatten them to a block. */ .wz-timing .wz-card, .fu-question .wz-card { display: grid; grid-template-columns: 1fr auto; align-items: center; } .wz-timing .wz-card { padding: 0.8rem 0.95rem; } /* The agreement carries the disclosure, so it runs wider and quieter than an answer card — it is a term, not a choice between options. */ .wz-consent { margin-top: 1rem; /* Tick then disclosure, with no trailing indicator track to pad the right. */ grid-template-columns: auto 1fr; align-items: flex-start; background: var(--wz-navy-soft); border-color: transparent; } .wz-consent .wz-card-text strong { font-weight: 600; font-size: 0.86rem; line-height: 1.45; color: var(--wz-ink-soft); } .wz-consent.is-selected .wz-card-text strong { color: var(--wz-ink); } .wz-followup-note { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; padding: 0.55rem 0.85rem; border-radius: 999px; background: var(--wz-green-soft); color: var(--wz-green); font-weight: 600; } /* -------------------------------------------------------------------------- Follow-up response page -------------------------------------------------------------------------- */ .fu-context { display: grid; gap: 0.5rem; margin: 1rem 0 1.25rem; padding: 0.9rem 1rem; border: 1px solid var(--wz-line); border-radius: var(--wz-radius); background: var(--wz-navy-soft); } .fu-context > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.88rem; } .fu-context span { color: var(--wz-muted); font-weight: 600; } .fu-context strong { color: var(--wz-navy); font-weight: 700; text-align: right; } .fu-question { border: 0; padding: 0; margin: 0 0 1.5rem; } .fu-question legend { padding: 0; margin-bottom: 0.55rem; font-size: 1rem; font-weight: 800; color: var(--wz-navy); line-height: 1.35; } /* The response page is short enough to end naturally; a sticky bar would float over content that already fits. */ .wz-footer--static { position: static; padding: 0; margin-top: 1.5rem; background: none; display: grid; gap: 0.5rem; } .wz-btn--ghost { background: transparent; color: var(--wz-muted); font-weight: 700; font-size: 0.92rem; min-height: 2.75rem; } .wz-btn--ghost:hover:not(:disabled) { background: var(--wz-navy-soft); color: var(--wz-navy); } /* -------------------------------------------------------------------------- Messages -------------------------------------------------------------------------- */ .wz-proxy { margin: 0.9rem 1.25rem 0; padding: 0.65rem 0.85rem; border-radius: 12px; background: #e8f2fb; color: #12456f; font-size: 0.83rem; font-weight: 600; line-height: 1.4; } .wz-warn { margin-top: 0.75rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: var(--wz-amber-soft); border: 1px solid #f0d79a; color: #7c5309; font-size: 0.85rem; font-weight: 600; line-height: 1.4; } .wz-warn--error { background: var(--wz-red-soft); border-color: #f3c4cd; color: var(--wz-red); } .wz-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Medication Success Journey preview (wizard done + follow-up pages) */ .wz-journey-preview { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--wz-line); background: var(--wz-navy-soft); text-align: left; } .wz-journey-preview__title { margin: 0 0 0.65rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wz-muted); } .wz-journey-preview__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .wz-journey-step { display: grid; gap: 0.15rem; padding-left: 0.85rem; border-left: 2px solid var(--wz-line); font-size: 0.86rem; color: var(--wz-muted); } .wz-journey-step strong, .wz-journey-step.is-done { color: var(--wz-navy); } .wz-journey-step.is-done { border-left-color: #6bc49a; } .wz-journey-step.is-active, .wz-journey-step.is-next { border-left-color: var(--wz-pink); } .wz-journey-step.is-active { font-weight: 700; } .wz-journey-preview__next { margin: 0.75rem 0 0; font-size: 0.84rem; color: var(--wz-navy); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }