:root { --bg: #f6f7f9; --surface: #ffffff; --ink: #14212e; --ink-soft: #5a6b7b; --line: #d9e0e7; --accent: #0b6b6b; --accent-ink: #ffffff; --warn-bg: #fff6e5; --warn-ink: #7a4b00; --danger: #a3222b; --ok: #1b6b3a; --radius: 14px; --tap: 52px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 17px; line-height: 1.55; /* Belt and braces against the one thing a phone user notices immediately. */ overflow-x: hidden; /* Every document this stylesheet serves is Hebrew. The direction is already on , but it is stated here too so that a page rendered without the attribute, or a fragment lifted into another context, still lays out right to left instead of silently falling back to English. */ direction: rtl; text-align: right; } body { padding: 0 0 48px; } /* An island of Latin content inside the Hebrew document: a Patient_ID, a code, an English-only field. Isolated so it can neither be reordered by the Hebrew around it nor reorder that Hebrew. Alignment stays logical, so text in such an island starts where its own direction starts. */ [dir="ltr"] { direction: ltr; unicode-bidi: isolate; text-align: start; } /* Latin/numeric runs inside Hebrew prose, emitted by the bidi helper. Nothing inside one may be reordered by its surroundings. */ bdi { unicode-bidi: isolate; } .wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 16px; } header.bar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } header.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; } .brand { font-weight: 700; font-size: 18px; margin: 0; } .brand small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-soft); } .mode-flag { background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid #f0d9a8; font-size: 13px; text-align: center; padding: 6px 12px; } /* Headings and prose are aligned logically rather than to a physical side, so the same rule is correct for the Hebrew document and for any Latin island inside it. In this RTL document "start" is the right-hand edge. */ h1, h2, h3, h4, p, dt, dd, li, figcaption { text-align: start; } h1 { font-size: 22px; margin: 20px 0 8px; } h2 { font-size: 19px; margin: 24px 0 8px; } p.lede { color: var(--ink-soft); margin: 0 0 20px; } /* Ordered and unordered lists. A browser default puts list markers on the inline-start side, which is the right edge here, but it reaches that side through a physical padding-left in some user-agent stylesheets, which leaves the marker hanging outside the card in RTL. The padding is therefore restated on the logical axis: the marker sits on the right edge and the Hebrew flows right to left after it, so an item reads "1. תלונה עיקרית" with the number on the right. */ ol, ul { margin-block: 10px; padding-inline-start: 1.7em; padding-inline-end: 0; list-style-position: outside; text-align: start; } ol { list-style-type: decimal; } /* A nested level is lettered in Hebrew (א. ב. ג.) rather than repeating digits, which is the convention Hebrew clinical documents use. */ ol ol { list-style-type: hebrew; } ol ol ol { list-style-type: decimal; } ul { list-style-type: disc; } li { margin-block-end: 6px; } /* The marker is a number or a Hebrew letter next to prose in the other direction; isolating it stops the two from being resolved together. */ li::marker { unicode-bidi: isolate; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; text-align: start; } /* The two primary actions. Kept as separate full-width blocks so they can never be mistaken for one combined search box (ADR-002). */ .action { display: block; width: 100%; text-align: start; text-decoration: none; color: inherit; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; min-height: var(--tap); } .action:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .action .title { font-size: 20px; font-weight: 700; display: block; } .action .desc { color: var(--ink-soft); font-size: 15px; display: block; margin-top: 6px; } .action.primary { border-color: var(--accent); } /* The label is a block above its field and inherits the document direction, so it starts on the right edge and sits over the right edge of the box. */ label { display: block; font-weight: 600; margin-bottom: 6px; text-align: start; } /* Form controls are the one place a browser or an on-screen keyboard can disagree with the document, so direction and alignment are stated instead of inherited by luck: the caret starts at the right edge of the box, the text grows leftwards, and the placeholder sits on the right. A field that genuinely holds Latin text carries dir="ltr" and is handled by the [dir="ltr"] rule above. */ input, textarea, select { text-align: start; } /* An explicit dir attribute on a field always wins; these only supply the document direction to a field that did not state one. */ input:not([dir]), textarea:not([dir]), select:not([dir]) { direction: inherit; } /* A field or block that decides its own direction from its content. */ [dir="auto"] { unicode-bidi: plaintext; } input[type="text"], input[type="search"], input[type="date"], textarea { width: 100%; min-height: var(--tap); padding-block: 12px; padding-inline: 14px; font: inherit; font-size: 17px; /* 16px or larger stops iOS zooming the whole page on focus */ color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; } textarea { min-height: 120px; resize: vertical; line-height: 1.6; text-align: start; } /* Clinical prose is Hebrew with Latin islands: the field stays right to left whatever the first word happens to be, so a note that opens with "MRI" does not turn the whole box into an English form. */ textarea:not([dir]) { direction: rtl; } input::placeholder, textarea::placeholder { text-align: start; } input:focus, textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; } button { min-height: var(--tap); width: 100%; padding: 12px 18px; font: inherit; font-weight: 600; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; } button.secondary { background: var(--surface); color: var(--accent); } .button-link { min-height: var(--tap); padding: 12px 18px; border-radius: 10px; border: 1px solid var(--accent); color: var(--accent); background: var(--surface); text-decoration: none; font-weight: 600; display: flex; align-items: center; justify-content: center; } .version-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0; } .version-actions button { margin-top: 0; } @media (min-width: 520px) { .version-actions { grid-template-columns: 1fr 1fr; } } button:disabled { opacity: .55; cursor: not-allowed; } button + button { margin-top: 10px; } .hint { background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px; padding: 12px 14px; font-size: 15px; margin: 12px 0 0; } .status { font-size: 15px; margin-top: 10px; min-height: 24px; } .status.error { color: var(--danger); font-weight: 600; } .status.ok { color: var(--ok); } .candidate { display: block; width: 100%; text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-top: 10px; min-height: var(--tap); cursor: pointer; color: inherit; font: inherit; } .candidate .name { font-weight: 700; font-size: 18px; display: block; } .candidate .meta { color: var(--ink-soft); font-size: 14px; display: block; margin-top: 4px; } .pid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; background: #eef3f6; border-radius: 8px; padding: 2px 8px; direction: ltr; display: inline-block; unicode-bidi: isolate; } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 14px; margin-bottom: 10px; } .timeline .row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .timeline .when { color: var(--ink-soft); font-size: 14px; } .badge { display: inline-block; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: #e8eef2; color: var(--ink-soft); } .badge.signed { background: #e2f1e8; color: var(--ok); } .badge.draft { background: #fdf0d8; color: var(--warn-ink); } .section-field { margin-bottom: 18px; } .savebar { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 12px 16px; margin: 0 -16px -16px; } .savebar .state { font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; } .savebar .state.saving { color: var(--warn-ink); } .savebar .state.saved { color: var(--ok); } .savebar .state.error { color: var(--danger); font-weight: 700; } /* A rendered clinical section: Hebrew prose, right to left, with the Latin and numeric islands already isolated in by the server or by the client helper. The block itself stays RTL so a section never flips to an English layout because its first word happened to be Latin. */ .readonly-block { border: 1px solid var(--line); background: #fbfcfd; border-radius: 10px; padding: 14px; margin-bottom: 12px; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; direction: rtl; text-align: start; } /* The server-rendered print sheet titles its sections at level 2; the client renders the same block at level 3 inside an already-titled card. */ .readonly-block h2, .readonly-block h3 { margin: 0 0 6px; font-size: 16px; text-align: start; } .readonly-block ol, .readonly-block ul { margin-block: 6px; } .print-sheet { background: var(--surface); } .summary-header { /* --border and --muted were never defined in :root, so the border and the muted term colour below were invalid at computed-value time and silently dropped: the document header rendered with no frame at all. */ border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; padding: 16px; margin-bottom: 20px; text-align: start; } .summary-header h2 { margin: 0 0 12px; font-size: 1.05rem; } .summary-header-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; } .summary-header-grid div { min-width: 0; } .summary-header-grid dt { color: var(--ink-soft); font-size: .82rem; text-align: start; } /* A
carries a 40px inline-start indent from the user-agent stylesheet, which in RTL pushes the value away from the right edge and out of line with its own term. It is cleared on the logical axis. */ .summary-header-grid dd { margin: 0; margin-block-start: 3px; margin-inline-start: 0; font-weight: 700; overflow-wrap: anywhere; text-align: start; } .manual-treatment-date { display: block; margin-top: 14px; } .medical-document-brand { border-block-end: 2px solid var(--ink); margin-bottom: 18px; padding-bottom: 10px; text-align: start; } .medical-document-brand .brand { font-weight: 800; /* A Latin clinic name at the top of a Hebrew document. */ direction: ltr; unicode-bidi: isolate; text-align: end; } .medical-document-brand h1 { margin: 6px 0 0; } .print-instructions h2 { margin-top: 0; } .print-instructions ol { margin-block-end: 16px; } a.back { display: inline-block; margin-top: 18px; color: var(--accent); } .hidden { display: none !important; } .home-actions { display: grid; gap: 14px; } .action-hero { min-height: 112px; display: flex; flex-direction: column; justify-content: center; } .action-hero .title { font-size: clamp(22px, 6vw, 30px); } .appointments { margin-top: 28px; } .appointments h2 { margin-bottom: 4px; } .appointments-help { margin: 0 0 12px; color: var(--ink-soft); font-size: 15px; } .appointment-list { display: grid; gap: 12px; } .appointment-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .appointment-card h3 { margin: 0; font-size: 18px; } .appointment-card time { color: var(--ink-soft); } .appointment-open { width: 100%; margin: 0; } .appointment-open[aria-busy="true"] { cursor: wait; opacity: .68; } /* * Today card. * * The hour leads, because a physician scanning the day reads times first, and * the single primary action sits at the end of the card where the thumb is. * Chips carry state, so the card can say "unsigned draft" without spending a * button on it. */ .appointment-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .appointment-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; color: var(--ink); direction: ltr; unicode-bidi: isolate; } .appointment-patient { margin: 0; font-size: 18px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .appointment-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .chip { font-size: 13px; line-height: 1.4; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--bg); } .chip-attention { border-color: #e0c48a; background: var(--warn-bg); color: var(--warn-ink); } .chip-done { border-color: #a7cdb5; background: #eef7f1; color: #1f5c3a; } .chip-demo { border-color: #b9c4d6; background: #eef2f8; color: #33455f; } .appointment-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .appointment-primary { margin: 0; flex: 1 1 auto; min-height: 46px; } .appointment-primary[aria-busy="true"] { cursor: wait; opacity: .68; } .appointment-secondary { background: none; border: none; padding: 8px 4px; min-height: 44px; color: var(--accent); font: inherit; font-size: 15px; text-decoration: underline; cursor: pointer; width: auto; margin: 0; } .appointment-secondary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .appointment-blocked { margin: 0; color: var(--ink-soft); font-size: 15px; } .appointment-card.is-demo { border-inline-start: 3px solid #7f93b5; } /* Secondary doors, kept reachable without competing with the day. */ .home-more { margin-top: 32px; } .action-quiet { background: var(--bg); } .action-quiet .title { font-size: 17px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .nerve-declined { color: var(--ink-soft); margin: 0 0 8px; } .creation-methods { margin: 22px 0; } .creation-methods h2 { font-size: 20px; margin-bottom: 12px; } .upload-zone { min-height: 190px; border: 2px dashed var(--accent); border-radius: 16px; background: #f4fafc; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; } .upload-zone:hover, .upload-zone.dragging { background: #e6f4f8; transform: translateY(-1px); } .upload-zone.uploading { opacity: .65; cursor: wait; } .upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .upload-title { font-size: 24px; font-weight: 800; color: var(--accent); } .upload-help { margin-top: 8px; color: var(--ink-soft); max-width: 38rem; } .manual-choice { width: 100%; min-height: 52px; margin-top: 12px; } .editor-panel { scroll-margin-top: 16px; } .success-actions { display: grid; gap: 10px; margin: 18px 0; } /* Two of these sit side by side. The gap belongs between them, which in this RTL row is the inline-end side of each, not a physical left margin. */ .document-link { display: inline-block; width: auto; margin-block-start: 12px; margin-inline-end: 10px; padding-block: 10px; padding-inline: 18px; text-decoration: none; } .scribe-panel { border: 2px solid var(--accent); border-radius: 14px; background: #f4fafc; padding: 16px; margin-bottom: 24px; } .scribe-panel h2 { margin-top: 0; } .scribe-synthetic { color: var(--danger); font-weight: 700; margin: 0 0 14px; } .consent-check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; margin-bottom: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); } .consent-check input { width: 22px; height: 22px; margin: 2px 0 0; } .scribe-recording { margin-top: 14px; padding: 14px; border-radius: 12px; background: #fff1f2; border: 1px solid #efb8bd; } .recording-indicator { color: var(--danger); font-weight: 800; } .recording-indicator span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: recording-pulse 1.2s ease-in-out infinite; } /* The elapsed time is a Latin numeric island: read left to right, isolated from the Hebrew panel around it, but still hugging the edge the Hebrew in that panel starts from. */ #scribe-timer { display: block; direction: ltr; unicode-bidi: isolate; text-align: end; font: 800 30px ui-monospace, monospace; margin: 10px 0; } .scribe-actions { display: grid; grid-template-columns: 1fr; gap: 8px; } .scribe-actions button { margin: 0; } .scribe-draft-notice { color: var(--ok); background: #e8f5ec; border: 1px solid #a8d4b7; border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-weight: 700; } @keyframes recording-pulse { 50% { opacity: .35; transform: scale(.82); } } @media (min-width: 700px) { body { font-size: 17px; } .wrap { padding: 24px; } .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* * The card stays a single column at every width. Widening it into a row put * the next action far from the patient it belongs to, which is exactly the * scanning cost Today is meant to remove. */ .appointment-primary { flex: 0 0 auto; min-width: 180px; } .scribe-actions { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------------ print */ /* The printed sheet is the medical document itself, so it keeps exactly the same right-to-left standard as the screen: the direction comes from , the alignment stays logical, and every interactive control is removed rather than merely faded. */ @page { size: A4; margin: 14mm 16mm; } @media print { :root { --bg: #ffffff; --surface: #ffffff; --ink: #000000; --ink-soft: #333333; --line: #cfcfcf; } html, body { background: #ffffff; color: #000000; font-size: 11.5pt; line-height: 1.5; overflow: visible; direction: rtl; text-align: right; } body { padding: 0; } /* No control survives into the paper copy: the print sheet is a document, not a screenshot of an application. Fields are left alone deliberately — they carry content rather than actions. */ header.bar, .mode-flag, .no-print, button, .button-link, .savebar, .upload-zone, .version-actions, .status { display: none !important; } .wrap { max-width: none; padding: 0; margin: 0; } .print-sheet { width: 100%; margin: 0; padding: 0; } /* One document title, then the header block, then the sections. */ .medical-document-brand { border-block-end: 1.5pt solid #000000; padding-bottom: 6pt; margin-bottom: 12pt; break-after: avoid; } .medical-document-brand .brand { font-size: 11pt; letter-spacing: .04em; } .print-sheet h1 { margin: 4pt 0 0; font-size: 17pt; break-after: avoid; } .summary-header { border: .75pt solid #9aa4ad; border-radius: 0; background: #ffffff; padding: 8pt 10pt; margin-bottom: 14pt; break-inside: avoid; } .summary-header h2 { font-size: 11.5pt; margin: 0 0 6pt; } .summary-header-grid { gap: 5pt 16pt; } .summary-header-grid dt { font-size: 8.5pt; color: #444444; } .summary-header-grid dd { font-size: 11pt; } .pid { background: transparent; padding: 0; font-size: 10pt; } .print-section { border: 0; border-block-end: .5pt solid #b9c0c6; border-radius: 0; padding: 7pt 0 9pt; margin: 0; background: #ffffff; /* A section is never split across a page boundary and never orphans its own heading, which is what produces clipped-looking print output. */ break-inside: avoid; } .print-section:last-of-type { border-block-end: 0; } .print-section h2, .print-section h3 { font-size: 12pt; margin: 0 0 3pt; break-after: avoid; text-align: start; } /* Long unbroken tokens (a Patient_ID, a URL, a code) wrap instead of running off the inline-end edge of the page. */ .print-section > div, .readonly-block > div { overflow-wrap: anywhere; text-align: start; } ol, ul { padding-inline-start: 1.6em; padding-inline-end: 0; } a { color: #000000; text-decoration: none; } } @media (max-width: 620px) { .summary-header-grid { grid-template-columns: 1fr; } } /* * NERVE contextual panel. * * Mobile first, like everything else: the panel is a block that follows the * work, and only becomes a column once there is genuinely room beside the * workspace. It is never a fixed overlay, because a floating panel on a 390px * screen covers the clinical content the physician is reading. */ .nerve { margin-top: 24px; padding: 16px; border: 1px solid #d8dee6; border-radius: 12px; background: #f7f9fc; } .nerve h2 { margin: 0 0 12px; font-size: 0.95rem; letter-spacing: 0.08em; } .nerve-context { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .nerve-context-label { font-size: 0.75rem; color: #5a6675; } .nerve-context-scope { font-weight: 600; } .nerve-context-detail { font-size: 0.85rem; color: #5a6675; } .nerve-pending { margin: 0; font-size: 0.85rem; color: #5a6675; } /* * The document is RTL, so grid column 1 is the RIGHT-hand column. Placing the * panel explicitly in column 1 rather than relying on source order is what puts * NERVE on the right; auto-placement would follow the DOM and land it on the * left, which reads as a navigation rail rather than a companion panel. */ @media (min-width: 1024px) { main.with-nerve { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; /* * The 640px reading measure is right for a single column of clinical text * and wrong once a 320px panel sits beside it: the panel would eat half the * workspace. Widened only on this layout, so every other page keeps the * measure it was designed around. */ max-width: 1120px; } main.with-nerve .nerve { grid-column: 1; grid-row: 1; margin-top: 0; position: sticky; top: 16px; } main.with-nerve .workspace-column { grid-column: 2; grid-row: 1; min-width: 0; } } /* Pre-visit brief */ .brief { margin: 24px 0; } .brief h2 { font-size: 1rem; } .brief-summary { font-weight: 600; margin: 0 0 4px; } .brief-block { margin-top: 16px; } .brief-block h3 { font-size: 0.9rem; margin: 0 0 6px; } .brief-block ul { margin: 0; padding-inline-start: 18px; } .brief-block li { margin-bottom: 4px; } .brief-empty, .brief-flag { font-size: 0.9rem; margin: 12px 0 0; } .brief-flag { font-weight: 600; } /* Patient timeline. Source is carried visually, not just in the data. */ .patient-timeline { margin: 24px 0; } .patient-timeline h2 { font-size: 1rem; } .timeline-entries { list-style: none; margin: 0; padding: 0; } .timeline-entry { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 8px 12px; border-inline-start: 3px solid #d8dee6; } .timeline-entry time { font-size: 0.8rem; color: #5a6675; } .timeline-entry.source-encounter { border-inline-start-color: #2f6f9f; } .timeline-entry.source-note { border-inline-start-color: #4a8f6d; } .timeline-entry.source-document { border-inline-start-color: #9a7b3f; } /* Recording made elsewhere. Same pipeline, second door in. */ .scribe-upload { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e2e7ee; } .scribe-upload label { display: block; font-size: 0.9rem; margin-bottom: 6px; } .scribe-upload input[type="file"] { width: 100%; } .scribe-upload-help { margin: 6px 0 0; font-size: 0.8rem; color: #5a6675; } .methods-help { margin: 0 0 12px; font-size: 0.9rem; color: #5a6675; } /* NERVE input and answers */ .nerve-ask { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .nerve-ask-label { font-size: 0.8rem; color: #5a6675; } .nerve-ask textarea { width: 100%; padding: 8px; border: 1px solid #d8dee6; border-radius: 8px; font: inherit; resize: vertical; } .nerve-examples { margin-top: 12px; font-size: 0.85rem; color: #5a6675; } .nerve-examples ul { margin: 8px 0 0; padding-inline-start: 18px; } .nerve-examples li { margin-bottom: 4px; } .nerve-result { margin-top: 12px; } .nerve-item { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; } .nerve-item-body { flex: 1; min-width: 0; } .nerve-item-label { font-size: 0.9rem; } .nerve-item-detail { font-size: 0.85rem; color: #35404d; margin-top: 2px; } .nerve-item-when { font-size: 0.75rem; color: #5a6675; margin-top: 2px; } .nerve-item-link { font-size: 0.75rem; } .nerve-note { margin: 10px 0 0; font-size: 0.8rem; color: #5a6675; } /* * A source chip on every answer. The colour is a shortcut, not the mechanism: * the layer is in the response body, so provenance survives a stylesheet. */ .source-chip { flex: none; font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid #d8dee6; background: #fff; white-space: nowrap; } .source-chip.layer-PATIENT_RECORD { border-color: #2f6f9f; color: #2f6f9f; } .source-chip.layer-ENCOUNTER { border-color: #2f6f9f; color: #2f6f9f; } .source-chip.layer-DOCUMENT { border-color: #9a7b3f; color: #9a7b3f; } .source-chip.layer-CALENDAR { border-color: #4a8f6d; color: #4a8f6d; } .source-chip.layer-CLINIC_WEBSITE { border-color: #6b5aa0; color: #6b5aa0; } .source-chip.layer-MEDICAL_EVIDENCE { border-color: #1f5f4f; color: #1f5f4f; } .source-chip.layer-AI_INFERENCE { border-color: #8a8f96; color: #6a6f76; font-style: italic; } /* A refusal is a result, not an error state. */ .nerve-refusal { border-inline-start: 3px solid #9a7b3f; padding-inline-start: 10px; } .nerve-refusal-title { font-weight: 600; margin-bottom: 4px; } .nerve-redflag { border-inline-start: 3px solid #a33; padding: 6px 10px; margin-bottom: 10px; font-weight: 600; background: #fdf3f3; } .nerve-redflag.urgency-immediate { background: #fbe9e9; } /* Conflicts are surfaced, never resolved for the physician. */ .nerve-conflict { margin-top: 12px; padding: 10px; border: 1px solid #9a7b3f; border-radius: 8px; background: #fdfaf4; } .nerve-conflict-title { font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; } .doctors-home-assistants { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 4px 0 24px; } .doctors-assistant-card { min-height: 94px; width: 100%; margin: 0; padding: 18px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; text-align: start; } .doctors-assistant-card[disabled] { opacity: .72; cursor: default; } .doctors-assistant-card.active { border: 2px solid #2468d8; } .doctors-assistant-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: #2468d8; background: #eef4ff; } .doctors-assistant-card.clerk .doctors-assistant-icon { color: #617184; background: #f0f3f6; } .doctors-assistant-copy { min-width: 0; display: flex; flex-direction: column; } .doctors-assistant-title { font-size: 21px; font-weight: 800; direction: ltr; unicode-bidi: isolate; } .doctors-assistant-desc { margin-top: 2px; color: var(--ink-soft); font-size: 14px; } .doctors-home-hero { margin: 6px 0 34px; padding: 4px 0 28px; border-bottom: 1px solid var(--line); } .doctors-home-heading { text-align: center; margin: 0 auto 22px; } .doctors-home-heading > div { display: inline-block; } .doctors-home-heading h1 { margin: 0; font-size: clamp(30px, 8vw, 44px); text-align: center; } .doctors-home-heading p { margin: 8px 0 0; color: var(--ink-soft); text-align: center; } .doctors-home-plus { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; margin-inline-start: 10px; background: linear-gradient(135deg, #0b8b83, #0b6b6b); color: #fff; font-size: 30px; font-weight: 800; vertical-align: top; } .doctors-home-primary-actions { display: grid; grid-template-columns: 1fr; gap: 16px; } .doctors-home-primary-card { min-height: 300px; padding: 24px 20px; border-radius: 20px; border: 2px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } .doctors-home-primary-card.chat { border-color: #9ad9d3; } .doctors-home-primary-card.upload { border-color: #b8cdf7; } .doctors-home-card-icon { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; font-size: 32px; font-weight: 800; } .doctors-home-primary-card.chat .doctors-home-card-icon { color: #087a73; background: #e9f7f5; } .doctors-home-primary-card.upload .doctors-home-card-icon { color: #2468d8; background: #eef4ff; } .doctors-home-card-title { font-size: 26px; font-weight: 800; } .doctors-home-primary-card.chat .doctors-home-card-title { color: #087a73; } .doctors-home-primary-card.upload .doctors-home-card-title { color: #2468d8; } .doctors-home-card-desc { margin-top: 8px; color: var(--ink-soft); font-size: 15px; } .doctors-home-upload-hint { width: 100%; margin-top: 18px; padding: 10px 12px; border: 1px dashed #8db3f1; border-radius: 12px; color: #456483; direction: ltr; unicode-bidi: isolate; } .doctors-home-card-button { width: 100%; margin-top: auto; padding: 13px 16px; border-radius: 12px; color: #fff; font-weight: 800; text-align: center; } .doctors-home-primary-card.chat .doctors-home-card-button { background: #087a73; } .doctors-home-primary-card.upload .doctors-home-card-button { background: #2468d8; } .doctors-home-disclaimer { margin: 18px 0 0; color: var(--ink-soft); font-size: 13px; text-align: center; } .doctors-home-below-title { margin-top: 30px; } @media (min-width: 700px) { .doctors-home-assistants { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doctors-home-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .doctors-home-assistants { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 4px 0 24px; } .doctors-assistant-card { min-height: 94px; width: 100%; margin: 0; padding: 18px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; text-align: start; } .doctors-assistant-card[disabled] { opacity: .72; cursor: default; } .doctors-assistant-card.active { border: 2px solid #2468d8; } .doctors-assistant-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: #2468d8; background: #eef4ff; } .doctors-assistant-card.clerk .doctors-assistant-icon { color: #617184; background: #f0f3f6; } .doctors-assistant-copy { min-width: 0; display: flex; flex-direction: column; } .doctors-assistant-title { font-size: 21px; font-weight: 800; direction: ltr; unicode-bidi: isolate; } .doctors-assistant-desc { margin-top: 2px; color: var(--ink-soft); font-size: 14px; } .doctors-home-hero { margin: 6px 0 34px; padding: 4px 0 28px; border-bottom: 1px solid var(--line); } .doctors-home-heading { text-align: center; margin: 0 auto 22px; } .doctors-home-heading > div { display: inline-block; } .doctors-home-heading h1 { margin: 0; font-size: clamp(30px, 8vw, 44px); text-align: center; } .doctors-home-heading p { margin: 8px 0 0; color: var(--ink-soft); text-align: center; } .doctors-home-plus { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; margin-inline-start: 10px; background: linear-gradient(135deg, #0b8b83, #0b6b6b); color: #fff; font-size: 30px; font-weight: 800; vertical-align: top; } .doctors-home-primary-actions { display: grid; grid-template-columns: 1fr; gap: 16px; } .doctors-home-primary-card { min-height: 300px; padding: 24px 20px; border-radius: 20px; border: 2px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } .doctors-home-primary-card.chat { border-color: #9ad9d3; } .doctors-home-primary-card.upload { border-color: #b8cdf7; } .doctors-home-card-icon { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; font-size: 32px; font-weight: 800; } .doctors-home-primary-card.chat .doctors-home-card-icon { color: #087a73; background: #e9f7f5; } .doctors-home-primary-card.upload .doctors-home-card-icon { color: #2468d8; background: #eef4ff; } .doctors-home-card-title { font-size: 26px; font-weight: 800; } .doctors-home-primary-card.chat .doctors-home-card-title { color: #087a73; } .doctors-home-primary-card.upload .doctors-home-card-title { color: #2468d8; } .doctors-home-card-desc { margin-top: 8px; color: var(--ink-soft); font-size: 15px; } .doctors-home-upload-hint { width: 100%; margin-top: 18px; padding: 10px 12px; border: 1px dashed #8db3f1; border-radius: 12px; color: #456483; direction: ltr; unicode-bidi: isolate; } .doctors-home-card-button { width: 100%; margin-top: auto; padding: 13px 16px; border-radius: 12px; color: #fff; font-weight: 800; text-align: center; } .doctors-home-primary-card.chat .doctors-home-card-button { background: #087a73; } .doctors-home-primary-card.upload .doctors-home-card-button { background: #2468d8; } .doctors-home-disclaimer { margin: 18px 0 0; color: var(--ink-soft); font-size: 13px; text-align: center; } .doctors-home-below-title { margin-top: 30px; } @media (min-width: 700px) { .doctors-home-assistants { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doctors-home-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }