/* Docline UI — shared clinical components (see ui.js). Greyscale by default; colour only as signal. */

.ui-av { width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: calc(var(--s) * .38); font-weight: 650; color: var(--text-1); background: var(--surface-2); border: 1px solid var(--line-strong); }

/* identity eyebrow (on every patient-bound surface) */
.ui-id { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.ui-id .sep { color: var(--text-3); }
.ui-id-av { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 7.5px; font-weight: 750; letter-spacing: 0; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-1); }
.ui-id.compact .ui-id-av + span, .ui-id.compact .sep, .ui-id.compact .tnum { display: none; }

/* flags: square letter badge (flag ≠ trend) */
.ui-flag { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; font-size: 11px; font-weight: 750; letter-spacing: 0; font-family: var(--font-mono); background: var(--warn-soft); color: var(--warn-text); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.ui-flag.crit { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.ui-trend { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* state chips */
.ui-state { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-sunken); border: 1px solid var(--line); white-space: nowrap; }
.ui-state .ico { width: 12px; height: 12px; flex: none; }
.ui-state .d { font-weight: 450; color: var(--text-3); }
.ui-state.warn { color: var(--warn-text); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.ui-state.warn .d { color: inherit; opacity: .8; }
.ui-state.ai { color: var(--ai-text, var(--ai)); background: var(--ai-soft); border-color: var(--ai-line); }
.ui-state.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.ui-state.accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }

/* tiers */
.ui-tier { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.ui-tier .ico { width: 12px; height: 12px; }
.ui-tier.t1 { color: var(--accent); background: var(--accent-soft); }
.ui-tier.t2 { color: var(--ai-text, var(--ai)); background: var(--ai-soft); }
.ui-tier.t3 { color: var(--text-inverse); background: var(--text-1); }

/* field provenance */
.ui-prov { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 650; white-space: nowrap; color: var(--text-3); background: var(--surface-sunken); }
.ui-prov .ico { width: 11px; height: 11px; }
.ui-prov.heard { color: var(--text-2); }
.ui-prov.derived, .ui-prov.unheard { color: var(--warn-text); background: var(--warn-soft); }

/* Kartei type column — greyscale; clinical (doctor-only) types in weight 600 */
.ui-type { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.ui-type .k { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); width: 28px; flex: none; }
.ui-type .l { font-size: 13px; color: var(--text-2); }
.ui-type.clin .l { font-weight: 600; color: var(--text-1); }

/* AI ink: stitched rail + italic + KI micro-label. "Drying" = add .dry → rail closes & fades, text turns upright. */
.ui-ink { position: relative; display: flex; gap: 10px; padding-left: 12px; }
.ui-ink::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--ai) 0 3px, transparent 3px 7px); transition: background 240ms ease, opacity 400ms ease 240ms; }
.ui-ink .t { font-style: italic; color: color-mix(in srgb, var(--text-1) 90%, transparent); }
.ui-ki { flex: none; height: 16px; padding: 0 5px; border-radius: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--ai-text, var(--ai)); background: var(--ai-soft); display: inline-grid; place-items: center; margin-top: 2px; }
.ui-ink.dry::before { background: var(--ai); opacity: 0; }
.ui-ink.dry .t { font-style: normal; color: var(--text-1); }
.ui-ink.dry .ui-ki { opacity: 0; width: 0; padding: 0; margin: 0; overflow: hidden; transition: all 240ms ease; }
.ui-unheard { background: var(--warn-soft); color: inherit; border-bottom: 1.5px dashed var(--warn); border-radius: 3px; padding: 0 2px; cursor: help; }

/* sparkline */
.ui-spark { display: block; overflow: visible; }
.ui-spark .band { fill: var(--surface-sunken); }
.ui-spark polyline { fill: none; stroke: var(--text-2); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.ui-spark circle { fill: var(--text-2); }
.ui-spark circle.flag { fill: var(--warn); }
.ui-spark circle.last { stroke: var(--plate); stroke-width: 1.5; }

/* multi-analyte comparison (relative multigraph) */
.ui-cmp { position: relative; }
.ui-cmp-plot { position: relative; height: 150px; margin: 6px 64px 0 0; }
.ui-compare { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-compare .band { fill: var(--surface-sunken); stroke: var(--line); stroke-width: .3; vector-effect: non-scaling-stroke; }
.ui-compare polyline { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linejoin: round; }
.ui-compare polyline.flag { stroke: var(--warn); }
.ui-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--text-2); box-shadow: 0 0 0 2px var(--plate); }
.ui-dot.flag { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--warn); }
.ui-dot.new { box-shadow: 0 0 0 2px var(--plate), 0 0 0 4px color-mix(in srgb, var(--warn) 45%, transparent); }
.ui-lbl { position: absolute; transform: translate(10px, -50%); font-size: 11.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.ui-lbl.flag { color: var(--warn-text); }
.ui-refl { position: absolute; left: 6px; top: calc((1 - (1 + .55) / 2.45) * 100% + 4px); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ui-cmp-axis { position: relative; height: 18px; margin: 4px 64px 0 0; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ui-cmp-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* lab table */
.ui-labs { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ui-labs th { text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding: 0 8px 6px 0; }
.ui-labs td { padding: 6px 8px 6px 0; border-top: 1px solid var(--line); color: var(--text-1); white-space: nowrap; }
.ui-labs .r { text-align: right; padding-right: 14px; }
.ui-labs .ref { color: var(--text-2); }
.ui-labs tr.is-flag td { background: color-mix(in srgb, var(--warn) 6%, transparent); }

/* medication row */
.ui-med { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ui-med:first-child { border-top: 0; }
.ui-med .nm { font-size: 14px; } .ui-med .nm b { font-weight: 650; }
.ui-med .dose { font-size: 13px; color: var(--text-2); text-align: right; }
.ui-med .meta { grid-column: 1 / -1; font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.ui-med .meta .ico { width: 11px; height: 11px; }
.ui-med.ext .nm b { font-style: italic; }
.ui-med.stopped .nm, .ui-med.stopped .dose { text-decoration: line-through; text-decoration-color: var(--text-3); color: var(--text-3); }
.ui-steps { grid-column: 1 / -1; display: flex; align-items: center; gap: 3px; margin-top: 4px; }
.ui-steps i { width: 14px; height: 3px; border-radius: 2px; background: var(--line-strong); }
.ui-steps i.on { background: var(--text-2); }
.ui-steps span { margin-left: 8px; font-size: 11.5px; color: var(--text-3); }

/* hint (non-blocking) */
.ui-hint { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); font-size: 13px; color: var(--text-1); }
.ui-hint > .ico { color: var(--warn-text); flex: none; margin-top: 1px; }
.ui-hint b { font-weight: 650; }
.ui-hint .d { color: var(--text-2); margin-top: 2px; }
.ui-hint.resolved { background: var(--surface-sunken); border-color: var(--line); color: var(--text-2); align-items: center; }
.ui-hint.resolved > .ico { color: var(--ok); }

/* seal-and-send hold button */
.hold { position: relative; overflow: hidden; height: 46px; padding: 0 22px; border-radius: var(--r-pill); font-size: 15px; font-weight: 650; color: var(--text-1); background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-1); display: inline-flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: none; transition: transform 140ms var(--ease-out); }
.hold .hold-base, .hold .hold-fill > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hold .hold-fill { position: absolute; inset: 0; display: grid; place-items: center; background: var(--text-1); color: var(--text-inverse); clip-path: inset(0 100% 0 0 round 999px); }
.hold.holding { transform: scale(.98); }
.hold.done .hold-fill { clip-path: inset(0 0 0 0 round 999px) !important; }
.hold[disabled] { opacity: .45; }
.hold .ico { width: 16px; height: 16px; }

/* flag badge — centred letter in Poppins (line-height 1, flex centring), aligned to the text around it */
.ui-flag, .pg-desk .ui-flag, .pg-akte .ui-flag { display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 18px; min-width: 18px; padding: 1px 5px 0; border-radius: 6px; font-family: 'Poppins', var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0; vertical-align: middle; flex: none; }