@charset "UTF-8";
/* Pulmonary artery catheter module: monitor with numbers, the heart diagram, strips, practice panels. */
.pc {
  --pc-wall: #8c3a32; --pc-deoxy: #6f8fc4; --pc-deoxy-wall: #2f4f86; --pc-oxy: #d06a5f; --pc-lung: #f6e3e0; --pc-lung-line: #d8b2ab;
  --pc-cath: #fbfaf6; --pc-cath-edge: #3b4350; --pc-balloon: #e0a91d; --pc-tip: #ffd166; --pc-prox: #2f6fd0; --pc-therm: #1f8a7d; --pc-column: #c98a00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pc { --pc-lung: #3a2a2a; --pc-lung-line: #6e4a45; --pc-cath-edge: #0d1117; --pc-column: #ffd479; --pc-prox: #7fb0ff; --pc-therm: #4fd1c0; }
}
:root[data-theme="dark"] .pc { --pc-lung: #3a2a2a; --pc-lung-line: #6e4a45; --pc-cath-edge: #0d1117; --pc-column: #ffd479; --pc-prox: #7fb0ff; --pc-therm: #4fd1c0; }

.pc .h3d-stage-wrap, .pc .h3d-info { min-width: 0; }
.pc-monitor, .pc-insert, .pc-heart, .pc-strip, .pc-thermo, .pc-calc, .pc-quiz, .pc-trouble, .pc-depth { margin-bottom: 14px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Monitor and the numbers beside it */
.pc-monitor-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 0; background: #05090b; border-radius: 6px; overflow: hidden; }
.pc-monitor-row .rhy-screen { border: 0; border-radius: 0; }
.pc-numbers { margin: 0; padding: 8px 10px; display: grid; gap: 8px; align-content: start; text-align: right; color: #d9e3e0; }
.pc-num dt { font-size: 11px; font-weight: 700; color: #8fa39c; }
.pc-num dd { margin: 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-num-hr dd { color: #46e08a; font-size: 24px; } .pc-num-art dd { color: #ff7a6e; } .pc-num-tip dd { color: #ffd166; } .pc-num-cvp dd { color: #7fb6ff; }
@media (max-width: 640px) {
  .pc-monitor-row { grid-template-columns: 1fr; }
  .pc-numbers { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); text-align: left; }
}
.pc-quiz-hidden { display: none !important; }
.pc-trouble-msg { margin: 6px 0 0; font-size: 15px; font-weight: 600; }
.pc-trouble-msg:empty { display: none; }
.pc-wedge-time { font-weight: 700; color: var(--danger); font-variant-numeric: tabular-nums; }
.pc-k-ecg { background: #46e08a; } .pc-k-art { background: #ff7a6e; } .pc-k-tip { background: #ffd166; } .pc-k-cvp { background: #7fb6ff; }
.pc-k-cath { background: #ffc94d; } .pc-k-balloon { background: #ff7a3d; } .pc-k-prox { background: #3f6fd0; }

/* 3D depth slider */
.pc-slider { display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.pc-slider span { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; flex-wrap: wrap; }
.pc-slider output { font-variant-numeric: tabular-nums; color: var(--ink); }
.pc-slider input { width: 100%; accent-color: var(--accent); min-height: 32px; }
.pc-depth-marks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* Insertion practice */
.pc-insert-state { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; margin-bottom: 6px; }
.pc-insert-state b { font-variant-numeric: tabular-nums; }
.pc-insert-buttons .button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.pc-log { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.pc-log li { padding: 6px 10px; border-left: 4px solid var(--line-strong); border-radius: 4px; background: var(--surface); font-size: 14px; line-height: 1.6; }
.pc-log li:first-child { font-weight: 600; }
.pc-log-ok { border-left-color: var(--ok-ink) !important; background: var(--ok-bg) !important; }
.pc-log-warn { border-left-color: var(--warn-line) !important; background: var(--warn-bg) !important; }
.pc-log-error { border-left-color: var(--danger) !important; background: var(--danger-bg) !important; }

/* Heart diagram */
.pc-heart-host { width: 100%; }
.pc-heart-host:not([hidden]) { display: flex; justify-content: center; }
.pc-heart-svg { border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: 6px; background: var(--surface); display: flex; justify-content: center; }
.pc-svg { display: block; width: 100%; max-width: 640px; height: auto; max-height: 62vh; }
.pc-svg text { fill: var(--ink); font-size: 13px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.pc-svg .pc-small { font-size: 12px; } .pc-svg .pc-note { font-size: 11px; font-weight: 400; fill: var(--ink-2); }
/* On a phone the drawing is scaled to about half: larger text in drawing units keeps it readable. */
@media (max-width: 560px) {
  .pc-svg text { font-size: 21px; stroke-width: 5px; } .pc-svg .pc-small { font-size: 19px; } .pc-svg .pc-note { font-size: 17px; }
  .pc-svg .pc-state { font-size: 22px !important; } .pc-svg .pc-warn { font-size: 20px !important; }
}
.pc-lung { fill: var(--pc-lung); stroke: var(--pc-lung-line); stroke-width: 1.5; }
.pc-capillary path { fill: none; stroke: var(--pc-oxy); stroke-width: 1.4; opacity: .8; }
.pc-vessel, .pc-vessel-wall { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pc-vessel.pc-deoxy { stroke: var(--pc-deoxy); } .pc-vessel-wall.pc-deoxy { stroke: var(--pc-deoxy-wall); }
.pc-vessel.pc-oxy { stroke: var(--pc-oxy); } .pc-vessel-wall.pc-oxy { stroke: var(--pc-wall); }
.pc-behind { stroke-dasharray: 9 5; opacity: .85; }
.pc-vein { fill: #5b7fb8; stroke: #26324a; stroke-opacity: .45; }
.pc-artery { fill: #c8665b; stroke: #5e1d18; stroke-opacity: .45; }
.pc-pa { fill: #5b7fb8; stroke: #26324a; stroke-opacity: .45; }
.pc-heart { fill: #d9a092; stroke: #8b5348; stroke-width: 2; }
.pc-cavity { stroke: #8b5348; stroke-width: 1.2; }
.pc-ra, .pc-rv { fill: var(--pc-deoxy); } .pc-la, .pc-lv { fill: var(--pc-oxy); }
.pc-leaf { fill: none; stroke: #f3e6c4; stroke-width: 4; stroke-linecap: round; }
.pc-rvot { fill: var(--pc-deoxy); fill-opacity: .55; stroke: var(--pc-deoxy-wall); stroke-width: 1.5; stroke-dasharray: 6 4; }
.pc-pvleaf { stroke: #f3e6c4; stroke-width: 3.5; stroke-linecap: round; }
.pc-column { fill: none; stroke: var(--pc-column); stroke-width: 5; stroke-dasharray: 2 6; stroke-linecap: round; display: none; }
.pc-cath-edge { fill: none; stroke: var(--pc-cath-edge); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.pc-cath { fill: none; stroke: var(--pc-cath); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pc-coil { fill: none; stroke: var(--pc-cath); stroke-width: 3.5; filter: drop-shadow(0 0 1px var(--pc-cath-edge)); }
.pc-balloon { fill: var(--pc-balloon); fill-opacity: .7; stroke: var(--pc-cath-edge); stroke-width: 1.5; display: none; }
.pc-svg.is-inflated .pc-balloon { display: inline; }
.pc-tip { fill: var(--pc-tip); stroke: var(--pc-cath-edge); stroke-width: 1.2; }
.pc-prox { fill: var(--pc-prox); stroke: #fff; stroke-width: 1.2; }
.pc-thermistor { fill: var(--pc-therm); stroke: #fff; stroke-width: 1; }
.pc-state { font-size: 15px !important; font-weight: 700 !important; }
.pc-warn { font-size: 14px !important; fill: var(--danger) !important; }
.pc-part { cursor: pointer; }
.pc-part.is-tip .pc-cavity, .pc-part.is-tip .pc-pa { stroke: var(--pc-tip); stroke-width: 3.5; }
.pc-part.is-tip .pc-vessel-wall { stroke: var(--pc-tip); }
.pc-part.is-selected path, .pc-part.is-selected circle { filter: drop-shadow(0 0 3px var(--accent)); }
.pc-part.is-alert .pc-balloon, .pc-part.is-alert .pc-prox, .pc-part.is-alert .pc-thermistor, .pc-part.is-alert .pc-tip { stroke: var(--danger); stroke-width: 2.5; }
.pc-part.is-alert .pc-vessel-wall, .pc-part.is-alert .pc-lung { stroke: var(--danger); }

/* Strips */
.pc-strip-host { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pc-strip-canvas { display: block; }
.pc-strip-reading p { margin: 8px 0 0; font-size: 15px; }

/* Thermodilution */
.pc-thermo-host { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fbfcfd; }
.pc-thermo-host canvas { display: block; }
.pc-thermo-out p { margin: 6px 0 0; font-size: 15px; line-height: 1.7; }
.pc-ok { color: var(--ok-ink); font-weight: 700; } .pc-bad { color: var(--danger); font-weight: 700; }

/* Worksheet */
.pc-calc > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; }
.pc-field .field-label small { margin-left: 4px; color: var(--muted); font-weight: 400; }
.pc-presets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.pc-calc-out { grid-column: 1 / -1; }
.pc-calc-rows { margin: 4px 0 0; display: grid; gap: 2px; }
.pc-calc-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pc-calc-row dt { font-weight: 700; } .pc-calc-row dd { margin: 0; font-variant-numeric: tabular-nums; }
.pc-calc-row small { color: var(--muted); }
.pc-calc-row.pc-low dd b, .pc-calc-row.pc-high dd b { color: var(--danger); }
.pc-calc-row.pc-low dd b::after { content: ' ↓'; } .pc-calc-row.pc-high dd b::after { content: ' ↑'; }
.pc-formula { color: var(--ink-2); }
.pc-calc-foot, .pc-calc-error { grid-column: 1 / -1; font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.pc-calc-error { color: var(--danger); font-weight: 600; }
@media (max-width: 520px) { .pc-calc-row { grid-template-columns: 1fr; } }

/* Quizzes and feedback */
.pc-quiz-intro { margin: 0 0 6px; color: var(--ink-2); }
.pc-quiz-case p { margin: 8px 0 0; font-size: 15px; }
.pc-quiz-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 12px; margin: 8px 0 0; }
.pc-quiz-nums div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pc-quiz-nums dt { color: var(--ink-2); } .pc-quiz-nums dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-feedback { margin-top: 10px; }
.pc-feedback p { font-size: 15px; line-height: 1.7; }
.pc-quiz-q { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.pc-quiz-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-quiz-result { margin: 0 0 8px; padding: 8px 12px; border-radius: 4px; font-weight: 600; }
.pc-quiz-result.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.pc-quiz-result.is-wrong { background: var(--danger-bg); color: var(--danger); }

/* Style B drawing: invisible areas over the drawn chambers, outlined when selected, highlighted or holding the tip. */
.pc-area { fill: transparent; stroke: none; }
.pc-part.is-tip .pc-area { stroke: var(--pc-tip); stroke-width: 4; stroke-dasharray: 8 6; }
.pc-part.is-selected .pc-area { stroke: var(--accent); stroke-width: 3; fill: var(--accent-soft); fill-opacity: .25; }
/* The catheter's stretch in front of the section (outflow tract): dashed, a little see-through. */
.pc-svg-b .pc-cath.pc-front { stroke-dasharray: 10 7; opacity: .85; } .pc-svg-b .pc-cath-edge.pc-front { stroke-dasharray: 10 7; opacity: .55; }
.pc-part.is-alert .pc-area { stroke: var(--danger); stroke-width: 4; }
.pc-svg-b text { font-size: 19px; } .pc-svg-b .pc-small { font-size: 17px; } .pc-svg-b .pc-note { font-size: 15px; }
.pc-svg-b .pc-state { font-size: 22px !important; } .pc-svg-b .pc-warn { font-size: 20px !important; }
.pc-svg-b .pc-cath-edge { stroke-width: 9; } .pc-svg-b .pc-cath { stroke-width: 5.5; } .pc-svg-b .pc-coil { stroke-width: 5.5; }
.pc-svg-b .pc-column { stroke-width: 7; }
.pc-leader { stroke: var(--ink-2); stroke-width: 1.2; }
/* Style B is wider (1110 units): on a phone its text needs about twice the drawing size of style A. */
@media (max-width: 560px) {
  .pc-svg-b text { font-size: 34px; stroke-width: 7px; } .pc-svg-b .pc-small { font-size: 30px; } .pc-svg-b .pc-note { font-size: 26px; }
  .pc-svg-b .pc-state { font-size: 36px !important; } .pc-svg-b .pc-warn { font-size: 32px !important; }
}