.paramedic-rhythm-first-look {
  color: #223e47; padding: .72rem; border: 1px solid #abcac6; border-radius: 13px;
  background: linear-gradient(145deg, #f4faf8, #eaf2f0 72%, #faf5e9);
  box-shadow: 0 3px 15px #153b4412; overflow-wrap: anywhere;
}
.paramedic-rhythm-first-look * { box-sizing: border-box; min-width: 0; }
.paramedic-rhythm-first-look h3,
.paramedic-rhythm-first-look p { margin: 0; }
.paramedic-rhythm-first-look h3 { color: #223e47; font-size: 1.08rem; line-height: 1.2; }
.paramedic-rhythm-kicker { color: #28736e; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.paramedic-rhythm-source-card {
  display: grid; gap: .13rem; margin-top: .45rem; padding: .42rem .5rem;
  border: 1px solid #cadbd6; border-left: 4px solid #4c858c;
  border-radius: 7px; background: #fff; font-size: .69rem; line-height: 1.25;
}
.paramedic-rhythm-source-card small { color: #567266; font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.paramedic-rhythm-source-card strong { color: #223f47; }
.paramedic-rhythm-source-card span { color: #4b6269; }
.paramedic-rhythm-first-look button {
  color: #25535a; background: #fff; border: 1px solid #91b3b1; border-radius: 7px;
  padding: .36rem .46rem; font: inherit; font-size: .7rem; font-weight: 750;
  line-height: 1.2; cursor: pointer;
}
.paramedic-rhythm-first-look button:hover { background: #e5f4ef; }
.paramedic-rhythm-first-look button:focus-visible { outline: 3px solid #f0ae4c; outline-offset: 2px; }
.paramedic-rhythm-first-look button[aria-pressed="true"] { color: #fff; background: #1d706b; border-color: #1d706b; }
.paramedic-rhythm-choice-group { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .46rem; }
.paramedic-rhythm-chronology { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; margin-top: .44rem; }
.paramedic-rhythm-chronology > div {
  display: grid; align-content: start; gap: .12rem; padding: .28rem .32rem;
  border-top: 3px solid #8ea5a2; border-radius: 5px; background: #e8f0ed;
  color: #3c5960; font-size: .62rem; line-height: 1.2;
}
.paramedic-rhythm-chronology > div.is-current { border-top-color: #b57954; background: #fff1e1; }
.paramedic-rhythm-chronology time { color: #315c62; font-weight: 800; }
.paramedic-rhythm-first-look [data-rhythm-pin],
.paramedic-rhythm-first-look [data-rhythm-independent] { width: 100%; margin-top: .45rem; }
.paramedic-rhythm-comparison {
  margin-top: .4rem; padding: .38rem .45rem; border: 1px solid #cddad2;
  border-radius: 6px; background: #fffefa; font-size: .68rem; line-height: 1.28;
}
.paramedic-rhythm-two-lanes,
.paramedic-rhythm-conduction-diagram { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .32rem; margin-top: .45rem; }
.paramedic-rhythm-two-lanes > div,
.paramedic-rhythm-conduction-diagram > div {
  white-space: pre-line; padding: .4rem .45rem; border-radius: 6px;
  background: #e9f0ee; font-size: .67rem; line-height: 1.25;
}
.paramedic-rhythm-two-lanes .is-signal,
.paramedic-rhythm-conduction-diagram .is-atrial { border-top: 4px solid #4d819a; }
.paramedic-rhythm-two-lanes .is-patient,
.paramedic-rhythm-conduction-diagram .is-patient { border-top: 4px solid #b27b5c; }
.paramedic-rhythm-trend-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .26rem; margin-top: .45rem; }
.paramedic-rhythm-trend-chart > div {
  display: grid; align-content: start; gap: .14rem; padding: .32rem .33rem;
  border: 1px solid #d2ded7; border-radius: 6px; background: #fff;
  font-size: .62rem; line-height: 1.17;
}
.paramedic-rhythm-trend-chart > div.is-current { border-color: #a57659; background: #fff7ec; }
.paramedic-rhythm-trend-chart time { color: #2c6264; font-weight: 800; }
.paramedic-rhythm-trend-chart .is-rate,
.paramedic-rhythm-trend-chart .is-pressure { height: 5px; min-width: 4px; border-radius: 4px; }
.paramedic-rhythm-trend-chart .is-rate { background: #59859a; }
.paramedic-rhythm-trend-chart .is-pressure { background: #ae7659; }
.paramedic-rhythm-limit { margin-top: .42rem !important; color: #765a49; font-size: .66rem; line-height: 1.3; }
.paramedic-rhythm-actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.paramedic-rhythm-actions [data-rhythm-check] { color: #fff; background: #1d706b; border-color: #1d706b; }
.paramedic-rhythm-feedback {
  margin-top: .4rem; padding: .4rem .48rem; border: 1px solid #cadbd4;
  border-radius: 7px; background: #fffefa; font-size: .68rem; line-height: 1.3;
}
.paramedic-rhythm-feedback p { margin-top: .16rem !important; }
.paramedic-rhythm-feedback[data-ready="false"] { border-color: #d3a879; background: #fff7e8; }
.paramedic-rhythm-feedback[data-ready="true"] { border-color: #86bb9b; background: #edf8ef; }
.paramedic-rhythm-first-look [data-rhythm-open-lab] { width: 100%; margin-top: .42rem; }
@media (max-width: 430px) {
  .paramedic-rhythm-first-look { padding: .6rem; }
  .paramedic-rhythm-chronology,
  .paramedic-rhythm-trend-chart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paramedic-rhythm-first-look button { font-size: .75rem; min-height: 2rem; }
  .paramedic-rhythm-source-card,
  .paramedic-rhythm-comparison,
  .paramedic-rhythm-feedback { font-size: .74rem; }
  .paramedic-rhythm-chronology > div,
  .paramedic-rhythm-trend-chart > div,
  .paramedic-rhythm-two-lanes > div,
  .paramedic-rhythm-conduction-diagram > div { font-size: .7rem; }
  .paramedic-rhythm-limit { font-size: .72rem; }
}
