/* Lab view (#lab). Shared components (.panel, .lead, .section-title, .chapter-nav,
   .segmented, .chips, .field, .form-grid, .empty, .status) come from styles.css; only
   the Lab's own layout lives here, and every selector starts with .lab- so nothing
   leaks into other pages. Colors come from the tokens in styles.css; text stays in
   ink, data colors only mark bars, dots and lines. */

.lab-page,
.lab-body,
.lab-sub,
.lab-section,
.lab-page .panel {
  min-width: 0;
}

.lab-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The answer first: labStory's headline on the black ground. */
.lab-intro {
  max-width: 44em;
}

.lab-lead {
  max-width: none;
}

/* Sub-page switcher: the shared sticky chapter bar. */
.lab-nav {
  margin-top: 4px;
}

.lab-nav .segmented > button {
  height: 34px;
  padding: 0 14px;
  font-size: 14px;
}

.lab-body {
  padding-top: 8px;
}

.lab-sub {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* A section's opening sentence: the conclusion, in ink, before the evidence. */
.lab-section-lead {
  max-width: 62ch;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.45;
  text-wrap: pretty;
}

.lab-section-actions {
  display: flex;
  gap: 8px;
}

.lab-foot-note {
  margin-top: 8px;
}

.lab-page .panel-foot .legend + .lab-foot-note,
.lab-page .panel-foot .legend + .insights-foot-note {
  margin-top: 8px;
}

/* The scatter in Drivers sticks below the switcher, not under it. */
@media (min-width: 900px) {
  .lab-page .insights-scatter-panel {
    top: calc(var(--safe-top, 0px) + 80px);
  }
}

/* ------------------------------------------------------------ forecast */

.lab-fc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* Side by side once the controls panel is wide enough for two controls per row;
   narrower screens stack the answer over the controls. */
@media (min-width: 1280px) {
  .lab-fc-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
  }
}

.lab-fc-readout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 720px;
  padding-top: 4px;
}

.lab-fc-range {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink);
}

.lab-fc-range-value {
  font-size: 84px;
  line-height: 0.92;
  letter-spacing: -0.01em;
}

.lab-fc-unit {
  color: var(--ink-2);
  font-size: 28px;
  font-stretch: 72%;
  font-weight: 600;
}

.lab-fc-sentence {
  margin-top: 6px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
}

/* Round 3: "Most likely" names the large 50% range; the 80% range is a sentence under it. */
.lab-fc-label {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.3;
}

.lab-fc-wide {
  max-width: 40em;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
}

.lab-fc-track {
  position: relative;
  min-height: 56px;
  margin: 10px 0 2px;
}

.lab-fc-vs {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
}

.lab-fc-controls-wrap {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lab-fc-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 28px;
  align-items: start;
}

.lab-fc-controls .slider-hint {
  margin-top: -4px;
}

.lab-fc-controls .toggle {
  align-self: stretch;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

/* Wide panels: two controls per row, the switch beside the sleep slider. */
@container (min-width: 460px) {
  .lab-fc-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lab-fc-controls .toggle {
    padding-top: 0;
    border-top: 0;
  }
}

.lab-fc-reset-row {
  display: flex;
  padding-top: 4px;
}

.lab-fc-reset .icon {
  color: var(--ink-3);
}

/* A borderless button: line its icon up with the controls' left edge, not its padding. */
.lab-fc-reset-row .lab-fc-reset {
  margin-left: -12px;
  padding-left: 12px;
  padding-right: 12px;
}

.lab-fc-range-note {
  max-width: 60ch;
  margin-top: 6px;
}

.lab-intro-more {
  margin-top: 10px;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}

/* What matters most: one row per input, a bar of |effect|, the sentence under it. */
.lab-matters {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lab-matter {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 84px;
  grid-template-areas:
    "label bar value"
    ". sentence sentence";
  align-items: center;
  gap: 4px 16px;
  min-width: 0;
}

.lab-matter-head {
  display: contents;
}

.lab-matter-label {
  grid-area: label;
  color: var(--ink);
  font-size: 15px;
  font-weight: 550;
  line-height: 1.3;
}

.lab-matter-value {
  grid-area: value;
  color: var(--ink-2);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.lab-matter-value .num {
  color: var(--ink);
  font-size: 20px;
}

.lab-matter-bar {
  grid-area: bar;
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--grid);
}

.lab-matter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  border-radius: var(--radius-pill);
  background: var(--sw, var(--ink-3));
}

.lab-matter-sentence {
  grid-area: sentence;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 599.98px) {
  .lab-matter {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label value"
      "bar bar"
      "sentence sentence";
    gap: 6px 12px;
  }
}

/* ---------------------------------------------------------- experiments */

.lab-exp-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lab-exp-list > .lab-section-lead {
  margin-bottom: 8px;
}

.lab-exp {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lab-exp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
}

.lab-exp-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lab-exp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 620;
  font-stretch: 105%;
  line-height: 1.25;
}

.lab-exp-title .icon {
  flex: none;
  color: var(--ink-3);
}

.lab-exp-dates {
  color: var(--ink-2);
  font-size: 14px;
}

.lab-exp-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.lab-exp-headline {
  max-width: 64ch;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.45;
  text-wrap: pretty;
}

.lab-exp-text,
.lab-exp-others {
  max-width: 72ch;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.lab-exp-text-label {
  color: var(--ink);
  font-weight: 550;
}

.lab-exp-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.lab-exp-subtitle {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 550;
}

.lab-interval {
  width: 100%;
  min-height: 120px;
}

.lab-caveats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lab-caveats li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}

.lab-caveats .icon {
  flex: none;
  margin-top: 2px;
  color: var(--ink-3);
}

.lab-exp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.lab-exp-delete {
  margin-left: auto;
}

.lab-exp-delete .icon {
  color: var(--ink-3);
}

.lab-exp-fine {
  max-width: 76ch;
  margin-top: 8px;
}

.lab-example {
  color: var(--ink);
}

/* The inline form for a new or edited experiment. */
.lab-exp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-color: var(--axis);
}

.lab-exp-form > * {
  max-width: 760px;
}

.lab-exp,
.lab-exp-form {
  scroll-margin-top: calc(var(--safe-top, 0px) + 88px);
}

.lab-exp-form-title:focus {
  outline: none; /* focused only to move a screen reader into the form, not a control */
}

.lab-exp-form-title {
  color: var(--ink);
  font-size: 19px;
  font-weight: 620;
  font-stretch: 105%;
}

.lab-exp-form .form-grid {
  max-width: none;
}

.lab-exp-form .field,
.lab-cmp-custom .field {
  min-width: 0;
}

.lab-exp-form textarea.input {
  min-height: 84px;
}

.lab-field-hint {
  margin-top: 2px;
}

.lab-exp-form .toggle {
  max-width: 560px;
}

.lab-exp-baseline .more-body {
  gap: 12px;
}

.lab-exp-form-actions {
  padding-top: 4px;
}

/* -------------------------------------------------------------- compare */

.lab-cmp-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lab-cmp-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 820px;
}

@media (min-width: 720px) {
  .lab-cmp-custom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.lab-cmp-period {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lab-cmp-period > legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.lab-cmp-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  margin-top: 8px;
}

.lab-cmp-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0;
}

.lab-cmp-period-term {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lab-cmp-period-term dt {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.lab-cmp-period-term dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

/* ------------------------------------------------------------ long-term */

.lab-trends {
  display: flex;
  flex-direction: column;
  margin: 0;
  list-style: none;
}

.lab-trend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}

.lab-trend:first-child {
  padding-top: 0;
  border-top: 0;
}

.lab-trend:last-child {
  padding-bottom: 0;
}

.lab-trend-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lab-trend-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.lab-trend-sentence {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  text-wrap: pretty;
}

.lab-trend.is-flat .lab-trend-sentence {
  color: var(--ink-2);
}

/* Per-year average bars: square at the baseline, 4px rounded at the data end. */
.lab-yearbars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.lab-yearbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 52px;
}

.lab-yearbar-value {
  color: var(--ink-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lab-yearbar-track {
  display: flex;
  align-items: flex-end;
  width: 18px;
  height: 40px;
  border-bottom: 1px solid var(--axis);
}

.lab-yearbar-fill {
  display: block;
  width: 100%;
  height: var(--h, 0%);
  border-radius: 4px 4px 0 0;
  background: var(--sw, var(--ink-3));
}

.lab-trend.is-flat .lab-yearbar-fill {
  opacity: 0.55;
}

.lab-yearbar-year {
  color: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.lab-year-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

.lab-year {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.lab-year-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.lab-year-title {
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.lab-year-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.lab-year-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--hairline);
}

.lab-year-row dt {
  color: var(--ink-2);
  font-size: 13px;
  white-space: nowrap;
}

.lab-year-value {
  white-space: nowrap;
}

.lab-year-row dd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.lab-year-value {
  color: var(--ink);
  font-size: 19px;
}

.lab-year-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ink-2);
  font-size: 12px;
  white-space: nowrap;
}

.lab-year-delta .icon { color: var(--ink-3); }
.lab-year-delta.good .icon { color: var(--status-good); }
.lab-year-delta.bad .icon { color: var(--status-critical); }

.lab-yoy-legend {
  margin-bottom: 10px;
}

.lab-yoy-chart {
  width: 100%;
  min-height: 260px;
}

.lab-yoy .panel-actions .segmented {
  max-width: 100%;
}

.lab-label-short {
  display: none;
}

/* ----------------------------------------------------------------- phones */

@media (max-width: 599.98px) {
  .lab-page {
    gap: 16px;
  }

  .lab-sub {
    gap: 36px;
  }

  /* Five options share the width; the shared bar scrolls if a label still does not fit. */
  .lab-nav .segmented {
    display: flex;
    width: 100%;
  }

  .lab-nav .segmented > button {
    flex: 1 1 auto;
    padding: 0 6px;
    font-size: 13px;
    font-stretch: 94%;
  }

  .lab-section-lead {
    font-size: 17px;
  }

  .lab-fc-range-value {
    font-size: 68px;
  }

  .lab-fc-unit {
    font-size: 24px;
  }

  .lab-fc-sentence {
    font-size: 19px;
  }

  .lab-exp-title {
    font-size: 17px;
  }

  .lab-exp-headline {
    font-size: 16px;
  }

  .lab-exp-actions .btn {
    flex: 1 1 auto;
  }

  .lab-exp-delete {
    margin-left: 0;
  }

  .lab-trend {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-yearbar-track {
    height: 28px;
  }

  .lab-label-long {
    display: none;
  }

  .lab-label-short {
    display: inline;
  }

  .lab-yearbars {
    justify-content: flex-start;
  }

  .lab-year-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-yoy .panel-head {
    flex-wrap: wrap;
  }

  .lab-yoy .panel-actions {
    width: 100%;
  }

  .lab-yoy .panel-actions .segmented {
    display: flex;
    width: 100%;
  }

  .lab-yoy .panel-actions .segmented > button {
    flex: 1 1 auto;
  }
}

@media (any-pointer: coarse) {
  .lab-nav .segmented > button {
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-matter-fill,
  .lab-yearbar-fill {
    transition: none;
  }
}

/* ---------- day links (round 3: a record's date opens the day sheet) ---------- */

.lab-page .insights-day-link {
  font-weight: 400;
  color: inherit;
  text-decoration-color: color-mix(in oklab, var(--ink-3) 70%, transparent);
  white-space: normal;
  text-align: left;
}

.lab-page .insights-day-link:hover {
  color: var(--ink);
  text-decoration-color: var(--ink-2);
}

.lab-page .insights-day-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (any-pointer: coarse) {
  .lab-page .insights-day-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    left: -6px;
    height: max(44px, calc(100% + 24px));
    transform: translateY(-50%);
  }
}

/* "Typical change: ..." before each input's sentence: what its bar stands for. */
.lab-matter-swing {
  color: var(--ink-3);
  font-size: 13px;
}