/* Earth's ECG — classic paper-strip aesthetic on a round kiosk display. */

:root {
  --ink: #181109;
  --paper: #f6f1e8;
  --print: #1a140c;          /* header print colour */
  --bezel: #0b0a09;
  --bezel-edge: #23201b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bezel);
  color: var(--print);
  font-family: "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.stage {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Round display. Diameter = the smaller viewport side. */
.screen {
  position: relative;
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  box-shadow:
    0 0 0 10px var(--bezel-edge),
    0 0 0 20px var(--bezel),
    0 24px 80px rgba(0, 0, 0, 0.6);
}

#paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Very light paper grain + edge vignette, printed over the grid. */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
      rgba(0, 0, 0, 0) 58%, rgba(60, 40, 20, 0.10) 100%);
  mix-blend-mode: multiply;
}

/* Procedural paper fibre — static grain over the stationary grid. */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---- Top-arc vital readout -------------------------------------------- */
.vitals {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 47%;
  display: flex;
  justify-content: space-between;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(9px, 1.35vmin, 15px);
  color: var(--print);
}
.v-cell { display: inline-flex; gap: 5px; align-items: baseline; }
.v-k { font-weight: 700; opacity: 0.62; letter-spacing: 0.5px; }
.v-v { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Bottom-arc comorbidity + uptime ---------------------------------- */
.comorbid {
  position: absolute;
  bottom: 8.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 54%;
  display: flex;
  justify-content: space-between;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(9px, 1.3vmin, 14px);
  font-weight: 700;
  letter-spacing: 0.4px;
  opacity: 0.82;
}
.comorbid b { font-variant-numeric: tabular-nums; }

/* ---- Printed report header (mirrors a 12-lead print-out) --------------- */
.report {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 63%;
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 1.05fr;
  gap: 4px 16px;
  color: var(--print);
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(10px, 1.85vmin, 21px);
  line-height: 1.3;
  letter-spacing: 0.1px;
}

.report .col { display: flex; flex-direction: column; }
.report .lead { font-size: 1.28em; letter-spacing: 0.3px; }
.report .muted { font-weight: 600; opacity: 0.72; }
.report .serial { font-variant-numeric: tabular-nums; }

.report .center { align-items: flex-start; }
.report .hr { font-size: 1.34em; }

.report .interp { align-items: flex-start; }
.report .interp .title { font-size: 1.16em; }
.report .interp .sep { margin: 0 0.35em; opacity: 0.45; }
.report .interp .status { font-weight: 800; letter-spacing: 0.5px; }
.report .interp ul { margin: 2px 0 0; padding: 0; list-style: none; }
.report .interp li { position: relative; padding-left: 12px; font-weight: 600; }
.report .interp li::before {
  content: "•"; position: absolute; left: 0; top: -1px;
}

/* ---- Tier-1 rhythm strip (monospace, clinical) ------------------------- */
.rhythm {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 63%;
  font-family: "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  font-size: clamp(9px, 1.5vmin, 16px);
  line-height: 1.5;
  color: var(--print);
}

.r-row { display: flex; gap: 10px; }
.r-key {
  flex: 0 0 108px;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0.8;
}
.r-val { flex: 1; }

/* ---- Calibration mark, like the 10mm/mV note on the paper -------------- */
.cal {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(9px, 1.35vmin, 15px);
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0.7;
}

/* ---- On-screen controls — small round icons hugging the rim of the dial.
   Read the round screen as a clock: sound at 10:30, register at 1:30, the
   (kiosk-only) events button at 7:30. Toned to the ink/paper print so they
   integrate rather than shout. ---------------------------------------------- */
.touch { position: absolute; inset: 0; pointer-events: none; }
.tbtn {
  position: absolute;
  pointer-events: auto;
  width: clamp(32px, 4.6vmin, 46px);
  height: clamp(32px, 4.6vmin, 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: clamp(13px, 2vmin, 20px);
  line-height: 1;
  color: rgba(24, 17, 9, 0.42);
  background: rgba(246, 241, 232, 0.30);
  border: 1px solid rgba(24, 17, 9, 0.18);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s, transform 0.1s;
}
#tb-audio    { top: 20%;    left: 11%;  }   /* 10:30 */
#tb-register { top: 20%;    right: 11%; }   /*  1:30 */
#tb-events   { bottom: 20%; left: 11%;  }   /*  7:30 (kiosk only) */
.tbtn:hover {
  opacity: 1;
  color: #b3341f;
  border-color: rgba(179, 52, 31, 0.5);
  background: rgba(246, 241, 232, 0.6);
}
.tbtn:active { transform: scale(0.9); }
#tb-audio.on { opacity: 0.95; color: #b3341f; border-color: rgba(179, 52, 31, 0.5); }

.dm-reset, .dm-close { cursor: pointer; }
.dm-reset:hover, .dm-close:hover { color: #e0916f; }
#sr-close { cursor: pointer; }

/* ---- Demo mode -------------------------------------------------------- */
.demo-indicator {
  position: absolute;
  top: 3.5%;
  left: 50%;
  transform: translateX(-50%);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(9px, 1.2vmin, 13px);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #b3341f;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.demo-indicator.show { opacity: 1; }

.demo-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  max-width: 520px;
  transform: translate(-50%, -50%) scale(0.97);
  background: rgba(18, 15, 11, 0.94);
  color: #f0e9dc;
  border: 1px solid rgba(210, 120, 90, 0.5);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
  z-index: 10;
}
.demo-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.dm-head {
  font-size: clamp(9px, 1.25vmin, 13px);
  font-weight: 700;
  letter-spacing: 2px;
  color: #e0916f;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(210, 120, 90, 0.28);
  margin-bottom: 6px;
}
.dm-list { list-style: none; margin: 0; padding: 0; }
.dm-list li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: clamp(9px, 1.3vmin, 14px);
  cursor: pointer;
}
.dm-list li.on { background: rgba(210, 120, 90, 0.20); }
.dm-list li:hover { background: rgba(210, 120, 90, 0.12); }
.dk { font-weight: 700; color: #e0916f; text-align: center; }
.dl { color: #f0e9dc; }
.dh { color: #9c9385; font-size: 0.86em; }
.dm-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(210, 120, 90, 0.28);
  font-size: clamp(8px, 1.1vmin, 12px);
  color: #9c9385;
}

/* ---- Scar register ---------------------------------------------------- */
.scar-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  max-width: 540px;
  max-height: 62%;
  transform: translate(-50%, -50%) scale(0.97);
  display: flex;
  flex-direction: column;
  background: rgba(18, 15, 11, 0.95);
  color: #f0e9dc;
  border: 1px solid rgba(210, 120, 90, 0.5);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
  z-index: 11;
}
.scar-panel.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.sr-head {
  font-size: clamp(9px, 1.25vmin, 13px);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #e0916f;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(210, 120, 90, 0.28);
}
/* 7-day comorbidity sparkline */
.sr-spark { padding: 8px 2px 7px; border-bottom: 1px solid rgba(210, 120, 90, 0.18); }
.sr-spark .spark { display: block; width: 100%; height: 30px; }
.spark-area { fill: rgba(224, 145, 111, 0.12); stroke: none; }
.spark-line { fill: none; stroke: #e0916f; stroke-width: 1.4; vector-effect: non-scaling-stroke;
              stroke-linejoin: round; stroke-linecap: round; }
.spark-cap { margin-top: 4px; font-size: clamp(8px, 1.05vmin, 11px); letter-spacing: 1px; color: #9c9385; }
.sr-spark-empty { font-size: clamp(8px, 1.1vmin, 12px); color: #9c9385; letter-spacing: 0.5px; }

.sr-body { overflow-y: auto; padding: 8px 2px 2px; }
.sr-sec { margin-bottom: 10px; }
.sr-h {
  font-size: clamp(8px, 1.05vmin, 11px);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #9c9385;
  margin-bottom: 3px;
}
.sr-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 4px;
  font-size: clamp(9px, 1.25vmin, 13px);
}
.sr-t { flex: 0 0 40%; color: #f0e9dc; }
.sr-m { flex: 1; color: #b8b0a2; font-size: 0.9em; }
.sr-tag {
  color: #e0916f;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.sr-foot {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(210, 120, 90, 0.28);
  font-size: clamp(8px, 1.1vmin, 12px);
  color: #9c9385;
}

/* ---- Small screens (phone, or a small embedded monitor) -------------------
   The overlay text otherwise crowds the whole dial and squeezes the trace.
   Shrink it, widen the blocks so nothing spills past the rim, and drop the two
   longest low-value lines (serial number + morphology) so the ECG can breathe.
   The kiosk (~1080px) and the desktop showcase monitor (~540px) are unaffected. */
@media (max-width: 460px) {
  /* Keep the block widths (the round chord is narrow top & bottom — widening
     spills text past the rim). Just shrink the type and drop the two longest,
     lowest-value lines so the trace gets a taller, clearer band. */
  .vitals { top: 9.5%; width: 56%; font-size: clamp(6px, 2.2vmin, 10px); }
  .report { top: 16%; width: 62%; gap: 2px 6px; font-size: clamp(6.5px, 2.25vmin, 11px); }
  .report .lead { font-size: 1.1em; }
  .report .serial { display: none; }                /* long serial/date line */
  .rhythm { bottom: 17.5%; width: 64%; line-height: 1.3; font-size: clamp(6.5px, 2.2vmin, 11px); }
  .r-key { flex: 0 0 60px; }
  .r-row:nth-child(4) { display: none; }            /* MORPHOLOGY (wraps long) */
  .comorbid { width: 62%; bottom: 10%; font-size: clamp(6px, 2.1vmin, 10px); }
  .cal { bottom: 6%; font-size: clamp(6px, 2.1vmin, 10px); }
  #tb-audio, #tb-register, #tb-events { width: 30px; height: 30px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The sweep is the subject; leave it, but nothing else animates. */
  .demo-menu, .scar-panel { transition: none; }
}