Spaces:
Runtime error
Runtime error
| /* Bilingual visit screen. Uses the site's existing tokens (--teal, --critical, | |
| --surface, --line...) so it reads as one product, not a bolted-on tool. */ | |
| .visit { | |
| max-width: var(--container); | |
| margin: 0 auto; | |
| padding: 1.5rem 1rem 4rem; | |
| } | |
| .visit__back { | |
| display: inline-block; | |
| margin-bottom: 1rem; | |
| color: var(--muted); | |
| } | |
| .visit__bar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 0.75rem 1rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .visit__bar h1 { | |
| margin: 0; | |
| font-size: clamp(1.25rem, 3vw, 1.75rem); | |
| } | |
| .visit__bar-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-left: auto; | |
| flex-wrap: wrap; | |
| } | |
| .visit__bar > .button { | |
| margin-left: auto; | |
| } | |
| .visit__status { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 0.9rem; | |
| } | |
| .visit__dot { | |
| display: inline-block; | |
| width: 0.55rem; | |
| height: 0.55rem; | |
| border-radius: 50%; | |
| margin-right: 0.4rem; | |
| background: var(--faint); | |
| } | |
| .visit__dot--open { background: var(--teal); } | |
| .visit__dot--connecting { background: var(--amber); } | |
| .visit__dot--closed { background: var(--critical); } | |
| .visit__notice, | |
| .visit__escalated { | |
| margin: 1rem 0 0; | |
| padding: 0.75rem 1rem; | |
| border-radius: var(--r-panel); | |
| background: color-mix(in srgb, var(--amber) 12%, var(--surface)); | |
| border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); | |
| color: var(--amber-text); | |
| } | |
| .visit__dismiss { | |
| background: none; | |
| border: 0; | |
| text-decoration: underline; | |
| cursor: pointer; | |
| color: inherit; | |
| font: inherit; | |
| } | |
| /* --- start form --------------------------------------------------------- */ | |
| .visit--start { max-width: 40rem; } | |
| .visit__lead { color: var(--muted); } | |
| .visit-start { | |
| display: grid; | |
| gap: 1rem; | |
| margin-top: 1.5rem; | |
| padding: 1.25rem; | |
| background: var(--surface); | |
| border: 1px solid var(--line); | |
| border-radius: var(--r-panel); | |
| } | |
| .visit-start label { | |
| display: grid; | |
| gap: 0.35rem; | |
| font-weight: 600; | |
| } | |
| .visit-start input[type="text"], | |
| .visit-start input:not([type]) { | |
| padding: 0.6rem 0.7rem; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 0.4rem; | |
| background: var(--input-bg); | |
| font: inherit; | |
| } | |
| .visit-start__consent { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| gap: 0.6rem; | |
| align-items: start; | |
| font-weight: 400; | |
| font-size: 0.92rem; | |
| line-height: 1.5; | |
| } | |
| .visit-start__privacy { | |
| margin: 0; | |
| font-size: 0.85rem; | |
| color: var(--muted); | |
| } | |
| /* --- two columns -------------------------------------------------------- */ | |
| .visit-columns { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| margin-top: 1.25rem; | |
| } | |
| @media (max-width: 48rem) { | |
| .visit-columns { grid-template-columns: 1fr; } | |
| .visit__bar > .button { margin-left: 0; width: 100%; } | |
| } | |
| .visit-column { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| background: var(--surface); | |
| border: 1px solid var(--line); | |
| border-radius: var(--r-panel); | |
| padding: 1rem; | |
| } | |
| .visit-column__title { | |
| margin: 0 0 0.75rem; | |
| font-size: 0.95rem; | |
| letter-spacing: 0.02em; | |
| color: var(--accent-ink); | |
| } | |
| .visit-column__stream { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.6rem; | |
| min-height: 12rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .visit-turn { | |
| padding: 0.7rem 0.85rem; | |
| border-radius: 0.6rem; | |
| background: var(--tint); | |
| border: 1px solid transparent; | |
| } | |
| .visit-turn--masked { | |
| background: repeating-linear-gradient( | |
| 45deg, | |
| var(--surface-2), | |
| var(--surface-2) 8px, | |
| var(--surface) 8px, | |
| var(--surface) 16px | |
| ); | |
| border: 1px dashed var(--line-strong); | |
| } | |
| .visit-turn__masked, | |
| .visit-turn__pending { | |
| margin: 0; | |
| color: var(--muted); | |
| font-style: italic; | |
| font-size: 0.9rem; | |
| } | |
| .visit-turn__text { margin: 0; overflow-wrap: anywhere; } | |
| .visit-turn__meta { | |
| margin: 0.4rem 0 0; | |
| font-size: 0.78rem; | |
| color: var(--faint); | |
| } | |
| /* Used by the typed-input labels and defined nowhere until now, so a label | |
| meant only for screen readers was rendering on screen. */ | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip-path: inset(50%); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| /* --- icons -------------------------------------------------------------- */ | |
| .visit-glyph { | |
| flex: none; | |
| width: 1.05em; | |
| height: 1.05em; | |
| color: var(--accent-ink); | |
| vertical-align: -0.16em; | |
| } | |
| .visit-gate .visit-glyph { color: currentColor; } | |
| .visit-spin { animation: visit-spin 900ms linear infinite; } | |
| @keyframes visit-spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* --- document capture --------------------------------------------------- */ | |
| .visit-capture { display: grid; gap: 0.5rem; } | |
| .visit-capture__zone { | |
| display: grid; | |
| justify-items: center; | |
| gap: 0.15rem; | |
| padding: 0.9rem 1rem; | |
| border: 2px dashed var(--line-strong); | |
| border-radius: 0.5rem; | |
| background: var(--surface); | |
| cursor: pointer; | |
| text-align: center; | |
| /* Exponential ease-out from an already-visible default. */ | |
| transition: | |
| border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), | |
| background 220ms cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .visit-capture__zone:hover, | |
| .visit-capture__zone:focus-within, | |
| .visit-capture__zone.is-drag { | |
| border-color: var(--teal); | |
| background: color-mix(in srgb, var(--teal) 7%, var(--surface)); | |
| } | |
| .visit-capture__zone:focus-within { | |
| outline: 2px solid var(--teal); | |
| outline-offset: 2px; | |
| } | |
| .visit-capture__zone.is-busy { | |
| cursor: progress; | |
| border-style: solid; | |
| border-color: var(--teal); | |
| } | |
| .visit-capture__zone input { display: none; } | |
| .visit-capture__mark { | |
| display: inline-flex; | |
| font-size: 1.35rem; | |
| color: var(--accent-ink); | |
| margin-bottom: 0.1rem; | |
| } | |
| .visit-capture__mark .visit-spin { color: var(--teal); } | |
| .visit-capture__zone strong { font-size: 0.95rem; } | |
| .visit-capture__hint { | |
| font-size: 0.78rem; | |
| color: var(--muted); | |
| text-wrap: balance; | |
| } | |
| .visit-capture__note { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| margin: 0; | |
| font-size: 0.82rem; | |
| color: var(--muted); | |
| } | |
| .visit-capture__note svg { | |
| flex: none; | |
| width: 1em; | |
| height: 1em; | |
| } | |
| .visit-capture__note--bad { | |
| color: var(--critical-text); | |
| font-weight: 600; | |
| } | |
| /* --- entity chips ------------------------------------------------------- */ | |
| .visit-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.35rem; | |
| margin: 0.5rem 0 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .visit-chip { | |
| display: inline-flex; | |
| align-items: baseline; | |
| gap: 0.3rem; | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 999px; | |
| background: var(--surface); | |
| border: 1px solid var(--line-strong); | |
| font-size: 0.78rem; | |
| } | |
| .visit-chip__term { font-weight: 700; } | |
| .visit-chip__kind { color: var(--muted); } | |
| /* --- confirmation gate -------------------------------------------------- */ | |
| .visit-gate { | |
| margin-top: 1.25rem; | |
| padding: 1rem 1.15rem; | |
| border-radius: var(--r-panel); | |
| background: color-mix(in srgb, var(--critical) 7%, var(--surface)); | |
| border: 2px solid var(--critical); | |
| } | |
| .visit-gate--high { | |
| background: color-mix(in srgb, var(--amber) 10%, var(--surface)); | |
| border-color: var(--amber); | |
| } | |
| .visit-gate__title { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin: 0 0 0.25rem; | |
| font-size: 1.05rem; | |
| color: var(--critical-text); | |
| } | |
| .visit-gate--high .visit-gate__title { color: var(--amber-text); } | |
| .visit-gate__tier { | |
| margin-left: auto; | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| border: 1px solid currentColor; | |
| border-radius: 999px; | |
| padding: 0.1rem 0.5rem; | |
| } | |
| .visit-gate__note { | |
| margin: 0 0 0.75rem; | |
| font-size: 0.9rem; | |
| color: var(--muted); | |
| } | |
| .visit-gate__facts { | |
| display: grid; | |
| grid-template-columns: minmax(8rem, auto) 1fr; | |
| gap: 0.35rem 1rem; | |
| margin: 0 0 0.75rem; | |
| font-size: 0.92rem; | |
| } | |
| .visit-gate__facts dt { color: var(--muted); } | |
| .visit-gate__facts dd { margin: 0; overflow-wrap: anywhere; } | |
| .visit-gate__low { color: var(--critical-text); font-weight: 700; } | |
| .visit-gate__edit { | |
| width: 100%; | |
| padding: 0.5rem; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 0.4rem; | |
| font: inherit; | |
| } | |
| .visit-gate__checks { | |
| margin: 0 0 0.85rem; | |
| padding: 0; | |
| list-style: none; | |
| font-size: 0.88rem; | |
| color: var(--muted); | |
| } | |
| .visit-gate__checks li { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| } | |
| .visit-gate__term { color: var(--faint); } | |
| .visit-gate__actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| /* --- document review ---------------------------------------------------- */ | |
| /* One frame and one warning for a whole sheet: a prescription arrives as six | |
| lines at once, and six full gate cards bury the consultation. */ | |
| .visit-docreview { | |
| margin-top: 1.25rem; | |
| border: 2px solid var(--amber); | |
| border-radius: var(--r-panel); | |
| background: color-mix(in srgb, var(--amber) 8%, var(--surface)); | |
| overflow: hidden; | |
| } | |
| .visit-docreview__head { | |
| padding: 0.85rem 1.1rem 0.7rem; | |
| border-bottom: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); | |
| } | |
| .visit-docreview__head h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.45rem; | |
| margin: 0; | |
| font-size: 1.02rem; | |
| color: var(--amber-text); | |
| } | |
| .visit-docreview__count { | |
| margin-left: auto; | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| border: 1px solid currentColor; | |
| border-radius: 999px; | |
| padding: 0.1rem 0.55rem; | |
| } | |
| .visit-docreview__head p { | |
| margin: 0.3rem 0 0; | |
| font-size: 0.86rem; | |
| color: var(--muted); | |
| } | |
| .visit-docreview__list { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .visit-docrow { | |
| display: grid; | |
| gap: 0.35rem; | |
| padding: 0.85rem 1.1rem; | |
| background: var(--surface); | |
| border-top: 1px solid var(--line); | |
| } | |
| .visit-docrow:first-child { border-top: 0; } | |
| .visit-docrow__source { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: baseline; | |
| gap: 0.5rem; | |
| margin: 0; | |
| font-weight: 600; | |
| overflow-wrap: anywhere; | |
| } | |
| .visit-docrow__tier { | |
| flex: none; | |
| font-size: 0.66rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| padding: 0.12rem 0.45rem; | |
| border-radius: 999px; | |
| color: var(--amber-text); | |
| background: color-mix(in srgb, var(--amber) 22%, transparent); | |
| } | |
| .visit-docrow__tier--critical { | |
| color: var(--critical-text); | |
| background: color-mix(in srgb, var(--critical) 15%, transparent); | |
| } | |
| .visit-docrow__target { | |
| margin: 0; | |
| color: var(--muted); | |
| overflow-wrap: anywhere; | |
| } | |
| .visit-docrow__checks { | |
| margin: 0; | |
| font-size: 0.78rem; | |
| color: var(--faint); | |
| } | |
| .visit-docrow__edit { | |
| width: 100%; | |
| padding: 0.45rem 0.55rem; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 0.4rem; | |
| font: inherit; | |
| } | |
| .visit-docrow__actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.4rem; | |
| margin-top: 0.15rem; | |
| } | |
| .visit-docrow__actions .button { | |
| padding-block: 0.4rem; | |
| font-size: 0.88rem; | |
| } | |
| .visit-turn__origin { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.3rem; | |
| margin: 0 0 0.3rem; | |
| font-size: 0.72rem; | |
| letter-spacing: 0.03em; | |
| text-transform: uppercase; | |
| color: var(--faint); | |
| } | |
| /* --- input row ---------------------------------------------------------- */ | |
| .visit-column__input { | |
| margin-top: auto; | |
| display: grid; | |
| gap: 0.5rem; | |
| } | |
| .visit-mic { | |
| padding: 0.85rem 1rem; | |
| border-radius: 0.5rem; | |
| border: 2px solid var(--teal); | |
| background: var(--surface); | |
| color: var(--accent-ink); | |
| font: inherit; | |
| font-weight: 700; | |
| cursor: pointer; | |
| } | |
| .visit-mic--on { | |
| background: var(--teal); | |
| color: white; | |
| } | |
| .visit-typed { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .visit-typed input { | |
| flex: 1; | |
| min-width: 0; | |
| padding: 0.6rem 0.7rem; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 0.4rem; | |
| background: var(--input-bg); | |
| font: inherit; | |
| } | |
| /* --- review ------------------------------------------------------------- */ | |
| .visit-review__banner, | |
| .visit-review__withheld { | |
| margin: 1rem 0 0; | |
| padding: 0.75rem 1rem; | |
| border-radius: var(--r-panel); | |
| background: var(--tint); | |
| border: 1px solid var(--line-strong); | |
| font-size: 0.92rem; | |
| } | |
| .visit-review__withheld { | |
| background: color-mix(in srgb, var(--amber) 12%, var(--surface)); | |
| border-color: color-mix(in srgb, var(--amber) 45%, transparent); | |
| color: var(--amber-text); | |
| } | |
| .visit-docs { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| margin-top: 1.25rem; | |
| } | |
| @media (max-width: 52rem) { | |
| .visit-docs { grid-template-columns: 1fr; } | |
| } | |
| .visit-doc { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.85rem; | |
| min-width: 0; | |
| padding: 1.1rem; | |
| background: var(--surface); | |
| border: 1px solid var(--line); | |
| border-radius: var(--r-panel); | |
| } | |
| .visit-doc h2 { | |
| margin: 0; | |
| font-size: 1.05rem; | |
| } | |
| .visit-doc__lang { | |
| display: block; | |
| font-size: 0.78rem; | |
| font-weight: 400; | |
| color: var(--muted); | |
| } | |
| .visit-doc__body { margin: 0; display: grid; gap: 0.7rem; } | |
| .visit-doc__row { display: grid; gap: 0.15rem; } | |
| .visit-doc__row dt { font-weight: 700; font-size: 0.85rem; color: var(--accent-ink); } | |
| .visit-doc__row dd { margin: 0; overflow-wrap: anywhere; } | |
| .visit-doc__lines { | |
| margin: 0; | |
| padding-left: 1.05rem; | |
| display: grid; | |
| gap: 0.3rem; | |
| } | |
| .visit-doc__missing, | |
| .visit-doc__allergies { | |
| padding: 0.7rem 0.85rem; | |
| border-radius: 0.5rem; | |
| background: var(--tint); | |
| } | |
| .visit-doc__allergies { | |
| background: color-mix(in srgb, var(--critical) 8%, var(--surface)); | |
| border: 1px solid color-mix(in srgb, var(--critical) 35%, transparent); | |
| } | |
| .visit-doc__missing h3, | |
| .visit-doc__allergies h3 { | |
| margin: 0 0 0.35rem; | |
| font-size: 0.88rem; | |
| } | |
| .visit-doc__missing ul, | |
| .visit-doc__allergies ul { | |
| margin: 0; | |
| padding-left: 1.1rem; | |
| font-size: 0.9rem; | |
| } | |
| .visit-doc > .button { margin-top: auto; align-self: start; } | |
| .visit-review__meta { | |
| margin-top: 1rem; | |
| font-size: 0.82rem; | |
| color: var(--faint); | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .visit *, .visit *::before, .visit *::after { | |
| animation-duration: 0.001ms ; | |
| transition-duration: 0.001ms ; | |
| } | |
| } | |