/* Cardiac monitor display. Everything is scoped under .mon so it can sit on any page.
   The screen is always dark, like the real device, in both site themes. */

.mon{
  --mon-line:#5B6472;
  --mon-ink:#F2F4F7;
  --mon-key:#3E4A5B;
  --mon-key-dark:#28323F;
  --mon-orange:#FF8A2B;
  --mon-orange-dark:#E8561A;
  --mon-bezel:#C9CED6;
  --mon-rim:#1F4F8F;
  container-type:inline-size;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--mon-ink);
  -webkit-tap-highlight-color:transparent;
}
.mon *{box-sizing:border-box;}
.mon :where(button){font:inherit;color:inherit;cursor:pointer;}
.mon button:focus-visible{outline:3px solid #fff;outline-offset:1px;}

.mon-shell{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  background:var(--mon-bezel);border:4px solid var(--mon-rim);border-radius:18px;padding:10px;
}
.mon-screen{position:relative;background:#000;border-radius:8px;padding:6px 6px 6px;border:3px solid #202329;min-width:0;}

/* Status bar */
.mon-status{display:flex;align-items:center;gap:14px;font:600 11px 'IBM Plex Mono',monospace;padding:2px 4px 5px;white-space:nowrap;overflow:hidden;}
.mon-shocks{display:inline-flex;align-items:center;gap:2px;}
.mon-shocks svg{width:12px;height:12px;}
.mon-batt{margin-left:auto;width:24px;height:12px;border:1.5px solid #9BE15D;border-radius:2px;position:relative;flex:none;}
.mon-batt::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;background:#9BE15D;border-radius:1px;}
.mon-batt span{position:absolute;inset:1.5px;background:#7ED957;border-radius:1px;}

/* Tabs */
.mon-tabs{display:flex;gap:6px;margin:0 0 6px;}
.mon-tabgroup{display:flex;flex:0 0 auto;border-radius:4px;overflow:hidden;}
.mon-tabgroup-right{flex:1 1 auto;}
.mon-tabs button{
  min-height:36px;padding:0 14px;border:0;border-right:1px solid #1B222C;
  background:linear-gradient(#56637A,#3A4558);font-weight:600;font-size:13px;letter-spacing:0.2px;
}
.mon-tabs button.on{background:linear-gradient(#FFA04A,#F2621B);}
.mon-tab-icon svg{width:18px;height:18px;display:block;}
.mon-tab-pt{flex:1 1 auto;text-align:left;}
.mon-tab-more{padding:0 10px !important;border-right:0 !important;}

/* Trace and number grid */
.mon-grid{
  display:grid;grid-template-columns:1fr minmax(96px,24%);
  grid-template-rows:2fr 1fr 1fr 0.85fr;
  height:clamp(250px,58cqw,430px);
  border:1px solid var(--mon-line);
}
.mon-trace{position:relative;border-bottom:1px solid var(--mon-line);min-width:0;overflow:hidden;}
.mon-trace canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.mon-row-nibp{border-bottom:0;}
.mon-tlabel{position:absolute;left:8px;top:4px;font:700 12px 'Inter',sans-serif;z-index:1;}
.mon-tscale{position:absolute;left:62px;top:4px;font:600 11px 'Inter',sans-serif;z-index:1;}
.mon-tmsg{position:absolute;left:0;right:0;top:45%;text-align:center;font-weight:700;font-size:15px;z-index:1;}
.mon-co2scale{position:absolute;left:0;top:0;bottom:0;width:22px;font:600 9.5px 'Inter',sans-serif;color:#fff;z-index:1;}
/* Label positions match yFor('co2'): full scale at 8% of the row height, zero at 90%. */
.mon-co2scale b{position:absolute;left:3px;font-weight:600;transform:translateY(-50%);}
.mon-co2scale b:nth-child(1){top:8%;}
.mon-co2scale b:nth-child(2){top:49%;}
.mon-co2scale b:nth-child(3){top:90%;}
.mon-row-co2 .mon-tlabel{left:26px;}
.mon-row-co2 canvas{left:22px;width:calc(100% - 22px);}

.mon-num{
  position:relative;color:var(--c);border-left:1px solid var(--mon-line);border-bottom:1px solid var(--mon-line);
  padding:4px 6px;display:flex;flex-direction:column;min-width:0;overflow:hidden;
}
.mon-num[data-num="nibp"]{border-bottom:0;}
.mon-num-head{display:flex;align-items:flex-start;gap:6px;font-size:11px;font-weight:700;}
.mon-num-head span:nth-child(2){font-weight:600;opacity:0.9;}
.mon-bell{margin-left:auto;font-style:normal;line-height:0;}
.mon-bell svg{width:15px;height:14px;}
.mon-val{flex:1;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(22px,7cqw,46px);line-height:1;font-variant-numeric:tabular-nums;}
.mon-val-bp{font-size:clamp(16px,4.4cqw,30px);}
.mon-val-bp small{font-size:0.62em;margin-left:3px;}
.mon-sub{font-size:10.5px;text-align:center;opacity:0.9;font-variant-numeric:tabular-nums;}
.mon-msg{font-size:clamp(11px,2.4cqw,15px);font-weight:600;text-align:center;line-height:1.25;}
.mon-num.nosig .mon-val{flex:0;}
.mon-num.nosig .mon-msg{flex:1;display:flex;align-items:center;justify-content:center;}

/* Alarm: the box inverts and pulses. Visual only. */
.mon-num.alarm{background:var(--c);color:#000;animation:mon-pulse 1s steps(2,jump-none) infinite;}
@keyframes mon-pulse{50%{background:#000;color:var(--c);}}
@media (prefers-reduced-motion:reduce){.mon-num.alarm{animation:none;}}

/* Softkeys */
.mon-keys{display:grid;grid-template-columns:0.8fr repeat(5,1fr) repeat(2,1fr) 1.6fr;gap:3px;margin-top:6px;}
.mon-key{
  min-height:44px;border:0;border-radius:3px;padding:3px 2px;
  background:linear-gradient(#55627A,#36414F);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:10.5px;font-weight:600;color:#B9E0FF;line-height:1.1;
}
.mon-key svg{width:18px;height:18px;}
.mon-key b{font-size:14px;color:#fff;}
.mon-key-orange{background:linear-gradient(#FFA04A,#F2621B);color:#fff;}
.mon-key-energy{flex-direction:row;gap:6px;}
.mon-key-energy b{font-size:clamp(14px,3.6cqw,24px);}
.mon-key-live{outline:1px solid rgba(98,207,244,0.55);outline-offset:-1px;}

/* Toast for display-only controls */
.mon-toast{
  position:absolute;left:50%;bottom:64px;transform:translateX(-50%);max-width:90%;
  background:#F2F4F7;color:#111;font-size:13px;font-weight:600;padding:8px 12px;border-radius:8px;
  opacity:0;pointer-events:none;transition:opacity .15s;text-align:center;
}
.mon-toast.on{opacity:1;}

/* Shock and Charge */
.mon-side{display:flex;flex-direction:column;gap:18px;align-items:center;padding:0 2px;}
.mon-side-btn{display:flex;flex-direction:column;align-items:center;gap:6px;font:700 11px 'Inter',sans-serif;color:#5D6573;letter-spacing:0.4px;}
.mon-shock,.mon-charge{width:56px;height:56px;border-radius:50%;border:3px solid #9AA1AC;display:grid;place-items:center;}
.mon-shock{background:radial-gradient(circle at 40% 35%,#FFA04A,#E8561A);color:#fff;}
.mon-shock svg{width:26px;height:26px;}
.mon-charge{background:radial-gradient(circle at 40% 35%,#8D949E,#5B626C);}

/* Narrow containers: Shock and Charge move under the screen, softkeys wrap to two rows. */
@container (max-width:620px){
  .mon-shell{grid-template-columns:1fr;padding:7px;border-radius:14px;}
  .mon-side{flex-direction:row;justify-content:flex-end;gap:16px;}
  .mon-side-btn{flex-direction:row;}
  .mon-shock,.mon-charge{width:46px;height:46px;}
  .mon-keys{grid-template-columns:repeat(5,1fr);}
  .mon-key-energy{grid-column:span 2;}
  .mon-tabs button{padding:0 9px;font-size:12px;}
  .mon-status{gap:9px;font-size:10px;}
  .mon-tscale{display:none;}
  .mon-grid{grid-template-columns:1fr minmax(92px,31%);grid-template-rows:1.7fr 1fr 1fr 1.05fr;height:clamp(250px,84cqw,380px);}
  .mon-num[data-num="nibp"] .mon-num-head span:nth-child(2),
  .mon-num[data-num="etco2"] .mon-num-head span:nth-child(2){display:none;}
  .mon-val-bp{font-size:clamp(14px,5.2cqw,22px);}
  .mon-val-bp small{display:block;text-align:center;margin:2px 0 0;}
  .mon-key{font-size:10px;}
}

/* Strip layout: numbers only, for a compact bar above other content. */
.mon-strip .mon-shell{display:block;padding:0;border:0;background:none;border-radius:10px;}
.mon-strip .mon-screen{padding:0;border-width:2px;}
.mon-strip .mon-status,.mon-strip .mon-tabs,.mon-strip .mon-keys,.mon-strip .mon-side,.mon-strip .mon-trace,.mon-strip .mon-toast{display:none;}
.mon-strip .mon-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:auto;height:auto;border:0;}
.mon-strip .mon-num{border-bottom:0;min-height:62px;}
.mon-strip .mon-num[data-num="hr"]{border-left:0;}
.mon-strip .mon-val{font-size:clamp(20px,6cqw,30px);}
.mon-strip .mon-val-bp{font-size:clamp(14px,4cqw,22px);}
.mon-strip .mon-num-head span:nth-child(2){display:none;}
.mon-strip .mon-sub{display:none;}