.home-lab {
  scroll-margin-top: 24px;
  background: radial-gradient(ellipse at 80% 8%, #76472b24, transparent 60%), #191715;
}

.home-lab [data-tab-demo][data-ready] > .demo-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-lab .demo-tabs button {
  padding-inline: clamp(8px, 1.25vw, 20px);
}

.home-lab .demo-tabs button span {
  margin-right: 5px;
}

.home-lab .demo-panel {
  padding: clamp(19px, 3vw, 40px);
  gap: clamp(20px, 3.3vw, 44px);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}

.home-lab .demo-panel p {
  min-height: 0;
}

.lab-screen {
  --screen-line: #55516a;
  --screen-ink: #f0eaf8;
  --screen-muted: #c5bcd3;
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 245px;
  padding: clamp(12px, 1.75vw, 21px);
  border: 1px solid var(--screen-line);
  color: var(--screen-ink);
  background: #171420;
}

.lab-screen--plan {
  --screen-line: #625343;
  --screen-ink: #f7e9da;
  --screen-muted: #cebba9;
  background: #211a17;
}

.lab-screen--editorial {
  --screen-line: #685342;
  --screen-ink: #f8eadf;
  --screen-muted: #d5beae;
  background: #221915;
}

.lab-screen--delivery {
  --screen-line: #425f52;
  --screen-ink: #e2f4e8;
  --screen-muted: #b8d4c5;
  background: #15211c;
}

.lab-screen-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 3px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--screen-line);
  font: .69rem / 1.35 var(--mono);
  letter-spacing: .07em;
}

.lab-screen-head span {
  color: var(--screen-muted);
}

.lab-chip {
  display: inline-block;
  padding: 4px 7px;
  color: #eadff7;
  background: #39304a;
  font: 600 .69rem / 1.2 var(--mono);
}

.lab-chip-ok {
  color: #d3f3db;
  background: #274635;
}

.lab-chip-warning {
  color: #ffdfc9;
  background: #5d382c;
}

.lab-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.lab-plan > strong {
  color: #ffc39f;
  font: 700 clamp(1.8rem, 4.1vw, 3.6rem) / 1 var(--display);
  letter-spacing: -.06em;
}

.lab-plan > strong span {
  font-size: .62em;
}

.lab-list > div {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--screen-line);
  font-size: .81rem;
}

.lab-list dd {
  justify-self: end;
  text-align: right;
  color: var(--screen-muted);
}

.lab-schedule {
  padding: 8px;
  border: 1px solid #5e4e76;
  background: #221b32;
}

.lab-schedule-dates,
.lab-schedule-row {
  display: grid;
  grid-template-columns: 3ch repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 3px;
}

.lab-schedule-dates {
  padding-bottom: 6px;
  font: .63rem var(--mono);
  color: var(--screen-muted);
}

.lab-schedule-dates span:not(:first-child) {
  grid-column: span 3;
}

.lab-schedule-row {
  min-height: 29px;
  border-top: 1px solid #6d5a805e;
}

.lab-schedule-row b {
  font: .67rem var(--mono);
}

.lab-schedule-row i {
  grid-row: 1;
  height: 7px;
  border-radius: 2px;
}

.lab-schedule-row i:nth-of-type(1) { background: #b2a2ff; }
.lab-schedule-row i:nth-of-type(2) { background: #ec9cdb; }
.lab-schedule-row i:nth-of-type(3) { background: #ffd09a; }
.lab-schedule-row:nth-child(2) i:nth-of-type(1) { grid-column: 2 / 5; }
.lab-schedule-row:nth-child(2) i:nth-of-type(2) { grid-column: 5 / 7; }
.lab-schedule-row:nth-child(2) i:nth-of-type(3) { grid-column: 7 / 8; }
.lab-schedule-row:nth-child(3) i:nth-of-type(1) { grid-column: 4 / 8; }
.lab-schedule-row:nth-child(3) i:nth-of-type(2) { grid-column: 8 / 10; }
.lab-schedule-row:nth-child(3) i:nth-of-type(3) { grid-column: 10 / 11; }
.lab-schedule-row:nth-child(4) i:nth-of-type(1) { grid-column: 7 / 10; }
.lab-schedule-row:nth-child(4) i:nth-of-type(2) { grid-column: 10 / 13; }
.lab-schedule-row:nth-child(4) i:nth-of-type(3) { grid-column: 13 / 14; }

.lab-schedule-key {
  display: flex;
  gap: 14px;
  color: var(--screen-muted);
  font: .67rem var(--mono);
}

.lab-schedule-key span::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  background: #b2a2ff;
}

.lab-schedule-key span:nth-child(2)::before { background: #ec9cdb; }
.lab-schedule-key span:nth-child(3)::before { background: #ffd09a; }

.lab-monitor {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.lab-monitor-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 112px;
  aspect-ratio: 1.72;
  background: #162130;
}

.lab-monitor-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lab-monitor-image i {
  position: absolute;
  top: 61%;
  left: 61%;
  width: 17%;
  height: 18%;
  border: 1px solid #ffd496;
  border-radius: 50%;
}

.lab-monitor-image > span {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 6px;
  color: #fff4de;
  background: #16110fdd;
  font: .63rem var(--mono);
}

.lab-note {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  padding: 9px 10px;
  border-left: 2px solid #d9a689;
  background: #fff2db0b;
}

.lab-note > b,
.lab-note > small {
  color: var(--screen-muted);
  font: .66rem / 1.3 var(--mono);
}

.lab-note > span {
  font-size: .81rem;
}

.lab-tracker {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .75rem;
  text-align: left;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.lab-tracker thead th {
  color: var(--screen-muted);
  font-weight: 600;
}

.lab-tracker th,
.lab-tracker td {
  padding: 6px;
  border-bottom: 1px solid var(--screen-line);
}

.lab-tracker th:first-child {
  width: max(52px, 21%);
}

.lab-tracker th:last-child {
  width: 38%;
}

.lab-tracker tbody th {
  position: relative;
  padding: 0;
  font-family: var(--mono);
}

.lab-tracker tr:has(.lab-shot-input:checked) {
  color: #fff0e9;
  background: #5a3d4c;
}

.lab-shot-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
}

.lab-tracker label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: #f8bb91;
  text-underline-offset: 3px;
}

.lab-shot-input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.lab-shot-notes {
  display: grid;
}

.lab-shot-notes > .lab-note {
  grid-area: 1 / 1;
  visibility: hidden;
}

.lab-screen--tracker:has(#lab-shot-SH010:checked) #lab-note-SH010,
.lab-screen--tracker:has(#lab-shot-SH020:checked) #lab-note-SH020,
.lab-screen--tracker:has(#lab-shot-SH030:checked) #lab-note-SH030 {
  visibility: inherit;
}

.lab-deliveries dt {
  font-weight: 700;
}

.lab-deliveries small {
  display: block;
  color: var(--screen-muted);
  font-weight: 400;
}

@media (max-width: 720px) {
  .home-lab .demo-panel {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }
}

@media (max-width: 640px) {
  .home-lab [data-tab-demo][data-ready] > .demo-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-lab .demo-tabs button {
    grid-column: span 2;
  }

  .home-lab .demo-tabs button:nth-child(n+4) {
    grid-column: span 3;
  }
}

@media (max-width: 530px) {
  .home-lab .demo-panel {
    padding: 16px;
  }

  .lab-screen {
    min-height: 0;
  }
}

@media (max-width: 380px) {
  .lab-tracker td {
    padding-inline: 4px;
  }

  .lab-tracker .lab-chip {
    padding-inline: 4px;
  }

  .lab-monitor {
    grid-template-columns: 1fr;
  }
}