/*
  G8 Circulation — extras on top of the Gener8 style kit (/kit/css).

  The vitals block (ECG trace and readouts), the condition section and spirometry chart, the colour key, the organ card's figures
  and fact, the "Follow a cell" journey line, and the credits line and dialog.
  Everything else (panels, buttons, sliders, card, labels, dialogs) is the kit's.
*/

/* Left panel scrolls as one list; give its groups some air */
.parts .plist { gap: calc(var(--u) * .9); }
.parts .pair { margin-top: calc(var(--u) * .2); }

/* ---- Panel sizes: big enough on a wall that neither side panel needs scrolling ------ */
.side { max-height: min(94vh, calc(var(--u) * 96)); }
.tools { width: calc(var(--u) * 30); }
.parts { width: calc(var(--u) * 44); }

/* ---- Monitor: floating panel with the ECG, vitals and spirometry ---------------------
   Docked beside the Circulation panel on the reach line; drag its heading to move it
   (kit float.css / float-panel.js). */
.monitor {
  position: absolute; z-index: 5; top: var(--reach); transform: translateY(-50%);
  left: calc(var(--u) * 48); width: calc(var(--u) * 40);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * 1.3);
  border-radius: var(--r-lg);
}
.parts.closed ~ .monitor:not(.floating) { left: calc(var(--u) * 8); }
.mbody { display: flex; flex-direction: column; gap: calc(var(--u) * .8); }

/* Stories panel: /kit/css/story.css (shared by every viewer); docked beside this wider Tools panel */
.story { right: calc(var(--u) * 34); }

/* ---- Close-ups (air sacs, airway wall): across the whole stage in place of the body --- */
#closeView { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.closetools .seg.wrap.three button { font-size: calc(var(--tu) * 1.2); }
.ckey { gap: calc(var(--u) * .45); font-size: calc(var(--tu) * 1.2); }
.ctext { color: var(--ink); line-height: 1.45; }
.dot.sac { background: #f2b8b0; }
.dot.muscle { background: #b8503b; }
.dot.mucus { background: #e6d89c; }
.dot.immune { background: #e8833a; }
.dot.pus { background: #dcbb7c; }
.dot.epi { background: #eea79f; }
.dot.lamina { background: #f6cdbf; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.dot.cartilage { background: #dce5ee; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.dot.gland { background: #efe0b8; }
.dot.goblet { background: #f6efda; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.dot.vessel { background: #c0392b; }
.dot.adv { background: #ead6ca; }
.dot.intima { background: #f3c9bf; }
.dot.lipid { background: #e9c86a; }
.dot.fcap { background: #f0d8cf; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.dot.clot { background: #7a1d22; }
.dot.stent { background: #c9ced6; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }

/* ---- Vitals: ECG and three numbers ------------------------------------------------- */
.vitals {
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r);
  padding: calc(var(--u) * .8);
}
#ecg { display: block; width: 100%; height: calc(var(--u) * 9); }
.readouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .6); margin-top: calc(var(--u) * .6); }
.readouts div { display: flex; flex-direction: column; gap: calc(var(--u) * .1); }
.readouts b { font-family: var(--font-mono); font-weight: 400; font-size: calc(var(--tu) * 2.1); line-height: 1.1; color: var(--ink); }
.readouts span { font-size: calc(var(--tu) * 1.2); color: var(--muted); line-height: 1.25; }

/* ---- Condition: healthy / asthma / COPD, level, reliever, spirometry ------------------- */
.cond { display: flex; flex-direction: column; gap: calc(var(--u) * .7); }
/* The panel list scrolls: keep these at full height rather than letting them shrink */
.parts .plist > *, .cond > * { flex-shrink: 0; }
.cond .seg.wrap button { font-size: calc(var(--tu) * 1.2); padding: 0 calc(var(--u) * .4); }
.cond .pair .btn { font-size: calc(var(--tu) * 1.3); }
#cNote { padding: 0 calc(var(--u) * .4); }
.spiro-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * .6); margin-bottom: calc(var(--u) * .5); }
.spiro-head .kicker { padding: 0; }
.spiro-head .seg { padding: calc(var(--u) * .2); }
.spiro-head .seg button { min-height: calc(var(--u) * 3.6); font-size: calc(var(--tu) * 1.2); padding: 0 calc(var(--u) * .6); }
#spiro { display: block; width: 100%; height: calc(var(--u) * 18); }
.spiro-key { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .4) calc(var(--u) * 1.2); margin-top: calc(var(--u) * .4); font-size: calc(var(--tu) * 1.2); color: var(--muted); }
.spiro-key span { display: flex; align-items: center; gap: calc(var(--u) * .5); }
.ln { width: calc(var(--u) * 2.2); border-top: calc(var(--u) * .25) solid var(--ink); }
.ln.dash { border-top-style: dashed; border-color: var(--muted); }
.ln.dot { border-top-style: dotted; border-color: var(--muted); }
/* FEV1/FVC under 0.7: airflow obstruction */
.readouts b.low { color: #c2352b; }

/* ---- Colour key ----------------------------------------------------------------------- */
.keyhead { padding: calc(var(--u) * .6) calc(var(--u) * .4) 0; }
.legend { display: flex; flex-direction: column; gap: calc(var(--u) * .6); padding: 0 calc(var(--u) * .4); font-size: calc(var(--tu) * 1.3); }
.legend span { display: flex; align-items: center; gap: calc(var(--u) * .9); }
.dot { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); border-radius: 50%; flex: none; box-shadow: inset 0 0 0 calc(var(--u) * .2) rgba(0, 0, 0, .25); }
.dot.red { background: #d3262e; }
.dot.blue { background: #3157c9; }
.dot.white { background: #f3f0e8; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.dot.cap { background: linear-gradient(90deg, #d3262e, #3157c9); border-radius: 99px; width: calc(var(--u) * 2.6); height: calc(var(--u) * .5); box-shadow: none; }
.small { font-size: calc(var(--tu) * 1.2); line-height: 1.4; margin: 0; padding: 0 calc(var(--u) * .4); }
.muted { color: var(--muted); }

/* ---- Organ card: Latin name, four figures, a fact -------------------------------------- */
.card .latin { font-family: var(--font-display); font-style: normal; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .6); margin: 0 0 calc(var(--u) * 1.2); }
.stat { background: var(--well); border-radius: var(--r-sm); padding: calc(var(--u) * .7) calc(var(--u) * .9); display: flex; flex-direction: column; }
.stat b { font-family: var(--font-mono); font-weight: 400; font-size: calc(var(--tu) * 1.7); color: var(--ink); }
.stat span { font-size: calc(var(--tu) * 1.2); color: var(--muted); line-height: 1.3; }
.card-text p { margin: 0 0 calc(var(--u) * .8); }
.fact {
  margin: 0 0 calc(var(--u) * 1.2); padding: calc(var(--u) * .8) calc(var(--u) * 1);
  border-left: calc(var(--u) * .35) solid var(--accent); background: var(--accent-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: calc(var(--tu) * 1.35); line-height: 1.45; color: var(--ink);
}

/* ---- Follow a cell ----------------------------------------------------------------------- */
.journey {
  min-height: calc(var(--u) * 5.5); padding: calc(var(--u) * .6) calc(var(--u) * .5);
  font-size: calc(var(--tu) * 1.3); line-height: 1.4; color: var(--ink);
}
.journey .where { display: flex; align-items: center; gap: calc(var(--u) * .7); font-weight: 700; }
.journey .vessel { color: var(--muted); font-size: calc(var(--tu) * 1.2); margin-top: calc(var(--u) * .2); }
.journey .dot { width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); }

/* ---- Credits line and dialog ---------------------------------------------------------------- */
.credit { display: block; width: 100%; padding: calc(var(--u) * .6) calc(var(--u) * .4); font-size: calc(var(--tu) * 1.2); line-height: 1.35; color: var(--faint); text-align: left; }
.credit u { color: var(--muted); }
.credits p { margin: 0; font-size: calc(var(--tu) * 1.35); line-height: 1.5; user-select: text; -webkit-user-select: text; }
.credits .muted { font-size: calc(var(--tu) * 1.2); }
.credits .mit { font-size: calc(var(--tu) * 1.2); }

/* ---- Tools panel: the Show switches, two to a row so the panel fits a wall ---------- */
.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .5); }
.toggles .btn { padding: 0 calc(var(--u) * .5); font-size: calc(var(--tu) * 1.3); }

/* Views and zoom in one block: four to a row */
.seg.wrap.four { grid-template-columns: repeat(4, 1fr); }
.seg.wrap.four button, .seg.wrap.three button { padding: 0 calc(var(--u) * .3); font-size: calc(var(--tu) * 1.2); }
.seg.wrap.three { grid-template-columns: repeat(3, 1fr); }
.tools .pair .btn { font-size: calc(var(--tu) * 1.25); }

/* "Follow a cell": where the cell is, low in the middle of the screen where everyone can read it */
.ride {
  position: absolute; left: 50%; bottom: calc(var(--u) * 3); transform: translateX(-50%); z-index: 5;
  min-width: calc(var(--u) * 36); max-width: 60vw; padding: calc(var(--u) * 1) calc(var(--u) * 1.8);
  border-radius: var(--r-lg);
}
.ride .journey { min-height: 0; padding: 0; font-size: calc(var(--tu) * 1.6); }
.ride .journey .vessel { font-size: calc(var(--tu) * 1.35); padding-left: calc(var(--u) * 2); }

/* ---- Blocked vessel callouts (block-marks.js): small tags with a coloured dot --------- */
#marks { position: absolute; inset: 0; pointer-events: none; z-index: 4; transition: opacity .2s; }
#marks .pin-lab.clot, #marks .pin-lab.plaque { pointer-events: auto; }
#marks.moving { opacity: 0; }
#marks .pin-lab { position: absolute; display: flex; align-items: center; gap: calc(var(--u) * .5); white-space: nowrap; }
#marks .pin-lab i { width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-radius: 50%; background: #4a0f14; }
#marks .pin-lab.plaque i { background: #e9c86a; }
#marks .pin-lab.starved i { background: #5a2a3a; }
#marks .pin-dot { position: absolute; }
/* ---- The heart's wiring callouts (conduction.js): SA node, AV node, bundle of His, branches ---- */
#wiring { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
#wiring .pin-lab { position: absolute; display: flex; align-items: center; gap: calc(var(--u) * .5); white-space: nowrap; transform: translate(calc(var(--u) * .8), -50%); }
#wiring .pin-lab i { width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-radius: 50%; background: #e3c27a; flex: none; }
#wiring .pin-lab.left { transform: translate(calc(-100% - var(--u) * .8), -50%); }
#wiring .pin-lab b { font-weight: 700; }
#wiring .pin-lab span { color: var(--muted); margin-left: calc(var(--u) * .4); }

/* ---- Timeline strip for a condition level with stages ------------------------------------ */
.stages { display: flex; flex-direction: column; gap: calc(var(--u) * .4); padding: 0 calc(var(--u) * .4); }
.stages .bar { position: relative; height: calc(var(--u) * .8); border-radius: 99px; background: var(--well); overflow: hidden; }
.stages .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 99px; }
.stages .ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: calc(var(--tu) * 1.2); color: var(--muted); }

/* Artery stage buttons: while following the condition, the stage on screen is marked */
#cArteryStages button.showing { box-shadow: inset 0 -3px 0 var(--accent); }