@charset "UTF-8";
/* CRRT module: the drawn circuit and the dose worksheet. Fluid colours carry meaning and are named in the legend. */
.crrt {
  --cc-blood: #c8352b; --cc-dialysate: #23885a; --cc-replacement: #2f6fd0; --cc-effluent: #c48a00; --cc-heparin: #8247c9;
  --cc-treated: #19b3a0; --cc-leak: #e0607e; --cc-clot: #5a1410;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .crrt { --cc-blood: #ff6b5e; --cc-dialysate: #4cc98a; --cc-replacement: #6ea4ff; --cc-effluent: #f0b429; --cc-heparin: #b98cff; --cc-clot: #c0675e; }
}
:root[data-theme="dark"] .crrt { --cc-blood: #ff6b5e; --cc-dialysate: #4cc98a; --cc-replacement: #6ea4ff; --cc-effluent: #f0b429; --cc-heparin: #b98cff; --cc-clot: #c0675e; }

/* The diagram scrolls inside its own box on narrow screens; the column must not grow to fit it. */
.crrt .h3d-stage-wrap, .crrt .h3d-info { min-width: 0; }
.crrt-diagram { overflow-x: auto; border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: 6px; background: var(--surface); }
.cc-svg { display: block; width: 100%; min-width: 740px; height: auto; font-family: inherit; }
.cc-svg text { fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.cc-label { font-size: 14px; }
.cc-name { font-size: 14px; font-weight: 650; }
.cc-title { font-size: 16px; font-weight: 700; }
.cc-small { font-size: 12.5px; fill: var(--ink-2) !important; }
.cc-rate { font-size: 13px; font-weight: 700; fill: var(--accent) !important; }
.cc-vert { font-size: 13px; font-weight: 700; writing-mode: vertical-rl; }
.cc-blood-ink { fill: var(--cc-blood) !important; } .cc-return-ink { fill: var(--cc-replacement) !important; }

/* Flow lines: a pale track with moving dots (dashes of zero length with round caps). */
.cc-track, .cc-flow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cc-track { stroke-width: 9; opacity: .18; }
.cc-flow { stroke-width: 6; stroke-dasharray: 0 14; animation: cc-move 0.9s linear infinite; }
@keyframes cc-move { to { stroke-dashoffset: -14; } }
.cc-blood { stroke: var(--cc-blood); } .cc-dialysate { stroke: var(--cc-dialysate); } .cc-replacement { stroke: var(--cc-replacement); }
.cc-effluent { stroke: var(--cc-effluent); } .cc-heparin { stroke: var(--cc-heparin); } .cc-compartment { stroke: var(--cc-effluent); }
.cc-svg.has-dialysate .cc-compartment { stroke: var(--cc-dialysate); }
.cc-flow.cc-heparin { stroke-width: 5; animation-duration: 2.4s; }
.cc-blood-fill { fill: var(--cc-blood); } .cc-dialysate-fill { fill: var(--cc-dialysate); } .cc-replacement-fill { fill: var(--cc-replacement); }
.cc-effluent-fill { fill: var(--cc-effluent); } .cc-heparin-fill { fill: var(--cc-heparin); }

/* Components */
.cc-part { cursor: pointer; }
.cc-hit { fill: transparent; stroke: none; }
.cc-part:hover .cc-hit { fill: var(--accent-soft); }
.cc-part.is-selected .cc-hit { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.cc-part.is-alert .cc-hit { fill: var(--danger-bg); stroke: var(--danger); stroke-width: 2.5; }
.cc-patient { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.5; }
.cc-lumen-a { fill: var(--cc-blood); } .cc-lumen-v { fill: var(--cc-replacement); }
.cc-pump, .cc-gauge { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
.cc-rotor { stroke: var(--ink-2); stroke-width: 3; fill: var(--ink-2); animation: cc-spin 2.4s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
.cc-stem { stroke: var(--ink-2); stroke-width: 1.5; }
.cc-sign { font-size: 17px; font-weight: 700; }
.cc-trend { font-size: 13px; font-weight: 700; fill: var(--danger) !important; }
.cc-syringe { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
.cc-plunger { stroke: var(--ink-2); stroke-width: 3; }
.cc-filter { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
.cc-fibers line { stroke: var(--cc-blood); stroke-width: 2; opacity: .35; }
/* Clotting: the fibres and the chamber turn a duller, darker red than the blood (lighter on a dark background, so it stays visible). */
.cc-svg.is-clot .cc-fibers line { stroke: var(--cc-clot); stroke-width: 3; opacity: 1; }
.cc-svg.is-clot .cc-chamber-blood { fill: var(--cc-clot); opacity: 1; }
/* Clots drawn in the fibres: the same in both themes, so the meaning does not depend on lighter or darker. */
.cc-clots { display: none; }
.cc-svg.is-clot .cc-clots { display: inline; }
.cc-clots circle { fill: var(--cc-clot); stroke: var(--ink); stroke-width: 1.5; }
.cc-membrane { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.cc-conv path { fill: none; stroke: var(--cc-effluent); stroke-width: 2; }
.cc-diff circle { fill: var(--cc-dialysate); animation: cc-diffuse 1.8s ease-in-out infinite; }
@keyframes cc-diffuse { from { transform: translateX(0); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(24px); opacity: 0; } }
.cc-bag { stroke: var(--ink-2); stroke-width: 1.5; opacity: .8; }
.cc-detector, .cc-warmer, .cc-readout { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
.cc-readout-k { font-size: 13px; font-weight: 700; }
.cc-wave { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.cc-chamber { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
.cc-chamber-blood { fill: var(--cc-blood); opacity: .75; }
.cc-clamp { stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.cc-svg.is-stopped .cc-clamp { stroke: var(--danger); }
.cc-svg .is-off { display: none; }

/* Alarm states */
.cc-svg.is-leak [data-path="effluent"], .cc-svg.is-leak [data-path="compartment"] { stroke: var(--cc-leak); }
.cc-svg.is-leak .cc-effluent-fill { fill: var(--cc-leak); }
.cc-svg.is-stopped .cc-flow, .cc-svg.is-stopped .cc-rotor, .cc-svg.is-stopped .cc-diff circle { animation-play-state: paused; }
.cc-svg.is-paused .cc-flow, .cc-svg.is-paused .cc-rotor, .cc-svg.is-paused .cc-diff circle { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cc-flow, .cc-rotor, .cc-diff circle { animation: none; }
}

.crrt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.crrt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 13px; color: var(--ink-2); }
.crrt-k-blood { background: var(--cc-blood); } .crrt-k-dialysate { background: var(--cc-dialysate); } .crrt-k-replacement { background: var(--cc-replacement); }
.crrt-k-effluent { background: var(--cc-effluent); } .crrt-k-heparin { background: var(--cc-heparin); }
.crrt-k-treated { background: #19b3a0; border-radius: 50%; } .crrt-k-catheter { background: #f1f3f5; } .crrt-k-return { background: #3f6fd0; }

/* Dose worksheet */
.crrt-calc { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.crrt-calc .field input { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); font-size: 16px; }
.crrt-calc-result { grid-column: 1 / -1; }
.crrt-calc-out { margin: 4px 0 0; display: grid; gap: 6px; }
.crrt-calc-out div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.crrt-calc-out dt { font-size: 14px; font-weight: 650; color: var(--ink-2); }
.crrt-calc-out dd { margin: 0; font-size: 15px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.crrt-calc-out b { font-size: 17px; }
.crrt-calc-note { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--warn-line); background: var(--warn-bg); font-size: 14px; }
.crrt-calc-error { margin: 0; color: var(--danger); font-weight: 600; }
.crrt-calc-foot { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .crrt-calc-out div { grid-template-columns: 1fr; gap: 2px; } }

/* Read by screen readers only. */
.crrt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }