/* Problem 7: a two-trail race board with room to draw and record every answer. */
[data-problem-id="7"] {
  --sunset-navy: #173552;
  --sunset-blue: #2c6780;
  --sunset-cyan: #dff3f1;
  --sunset-cream: #fff8e8;
  --sunset-orange: #df7439;
  --sunset-gold: #f1b747;
  --sunset-line: #8f705d;
}

[data-problem-id="7"] .sunset-opening {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(2.8in, 0.92fr);
  gap: 0.16in;
  align-items: stretch;
  margin: 0 0 0.12in;
  break-inside: avoid;
}

[data-problem-id="7"] .problem-setup {
  display: flex;
  min-height: 1.29in;
  margin: 0;
  padding: 0.15in 0.18in;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(145deg, rgb(44 103 128 / 92%), rgb(23 53 82 / 98%)),
    var(--sunset-navy);
  border: 2px solid var(--sunset-navy);
  border-radius: 0.11in;
  box-shadow: 0 0.035in 0.09in rgb(24 49 79 / 14%);
}

[data-problem-id="7"] .problem-setup p {
  margin: 0;
  font-size: 0.18in;
  line-height: 1.42;
}

[data-problem-id="7"] .problem-setup strong {
  color: #ffe39b;
}

[data-problem-id="7"] .sunset-illustration {
  min-height: 1.29in;
  margin: 0;
  overflow: hidden;
  border: 2px solid #a94f2d;
  border-radius: 0.11in;
  box-shadow: 0 0.035in 0.09in rgb(24 49 79 / 18%);
}

[data-problem-id="7"] .sunset-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 1.29in;
  object-fit: cover;
  object-position: center center;
}

[data-problem-id="7"] .sunset-deadline {
  display: flex;
  min-height: 0.42in;
  margin: 0 0 0.12in;
  padding: 0.08in 0.15in;
  align-items: center;
  justify-content: space-between;
  gap: 0.18in;
  color: #fff;
  background: linear-gradient(90deg, #a9472d, var(--sunset-orange) 58%, #b85931);
  border-radius: 0.075in;
  font-size: 0.16in;
  line-height: 1.24;
  box-shadow: inset 0 -2px 0 rgb(91 42 30 / 20%);
  break-inside: avoid;
}

[data-problem-id="7"] .sunset-deadline strong {
  color: #fff;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

[data-problem-id="7"] .sunset-deadline b {
  color: #fff3be;
}

[data-problem-id="7"] .sunset-workbench {
  margin: 0;
  padding: 0.13in 0.14in 0.14in;
  background: linear-gradient(180deg, #fffdf7, var(--sunset-cream));
  border: 2px solid var(--sunset-navy);
  border-radius: 0.105in;
  box-shadow: 0 0.04in 0.1in rgb(24 49 79 / 10%);
  break-inside: avoid;
}

[data-problem-id="7"] .workbench-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.16in;
  align-items: end;
  margin-bottom: 0.11in;
}

[data-problem-id="7"] .workbench-heading .problem-section-label {
  margin: 0 0 0.025in;
  color: var(--sunset-navy);
  font-size: 0.235in;
  line-height: 1;
}

[data-problem-id="7"] .workbench-heading p {
  margin: 0;
  color: #3f5364;
  font-size: 0.132in;
  line-height: 1.3;
}

[data-problem-id="7"] .duration-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 0.84in));
  gap: 0.055in;
}

[data-problem-id="7"] .duration-chips span {
  display: flex;
  min-height: 0.46in;
  padding: 0.045in 0.055in;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--sunset-navy);
  background: #fff;
  border: 1.5px solid #9db7bc;
  border-radius: 0.06in;
  text-align: center;
}

[data-problem-id="7"] .duration-chips small {
  font-size: 0.125in;
  line-height: 1.1;
}

[data-problem-id="7"] .duration-chips strong {
  margin-top: 0.02in;
  font-size: 0.125in;
  line-height: 1;
}

[data-problem-id="7"] .timeline-lanes {
  display: grid;
  gap: 0.085in;
}

[data-problem-id="7"] .timeline-lane {
  display: grid;
  grid-template-columns: 1.38in minmax(0, 1fr);
  min-height: 0.78in;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid #9ab5bd;
  border-radius: 0.075in;
  break-inside: avoid;
}

[data-problem-id="7"] .timeline-lane-label {
  display: flex;
  padding: 0.11in 0.12in;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background: var(--sunset-blue);
}

[data-problem-id="7"] .timeline-lane-label strong {
  color: #fff;
  font-size: 0.14in;
  line-height: 1.18;
}

[data-problem-id="7"] .timeline-lane-label span {
  margin-top: 0.035in;
  font-size: 0.125in;
  line-height: 1.25;
}

[data-problem-id="7"] .timeline-canvas {
  display: grid;
  grid-template-columns: 0.62in minmax(0, 1fr) 0.72in;
  min-width: 0;
  padding: 0.09in 0.08in 0.075in;
  align-items: stretch;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 0.18in, rgb(44 103 128 / 7%) 0.185in),
    #fff;
}

[data-problem-id="7"] .timeline-endpoint {
  display: flex;
  position: relative;
  z-index: 2;
  min-height: 0.55in;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--sunset-navy);
  background: #fff;
  border: 1.5px solid var(--sunset-blue);
  border-radius: 0.055in;
  text-align: center;
}

[data-problem-id="7"] .timeline-endpoint b {
  font-size: 0.13in;
  line-height: 1;
}

[data-problem-id="7"] .timeline-endpoint small {
  margin-top: 0.025in;
  font-size: 0.125in;
  line-height: 1;
  text-transform: uppercase;
}

[data-problem-id="7"] .timeline-endpoint--sunset {
  color: #fff;
  background: var(--sunset-orange);
  border-color: #a9472d;
}

[data-problem-id="7"] .timeline-endpoint--finish {
  border-style: dashed;
}

[data-problem-id="7"] .timeline-write-zone {
  display: block;
  position: relative;
  min-width: 0;
  min-height: 0.55in;
}

[data-problem-id="7"] .timeline-write-zone > small {
  display: block;
  margin-top: 0.01in;
  color: #61727e;
  font-size: 0.125in;
  line-height: 1;
  text-align: center;
}

[data-problem-id="7"] .timeline-write-zone > i {
  position: absolute;
  right: 0;
  bottom: 0.12in;
  left: 0;
  height: 2px;
  background: var(--sunset-line);
}

[data-problem-id="7"] .timeline-write-zone > i::before,
[data-problem-id="7"] .timeline-write-zone > i::after {
  content: "";
  position: absolute;
  top: -0.045in;
  width: 2px;
  height: 0.09in;
  background: var(--sunset-line);
}

[data-problem-id="7"] .timeline-write-zone > i::before { left: 0; }
[data-problem-id="7"] .timeline-write-zone > i::after { right: 0; }

[data-problem-id="7"] .sunset-marker {
  position: absolute;
  z-index: 3;
  right: 12%;
  bottom: 0.025in;
  min-width: 0.54in;
  padding: 0.035in 0.045in 0.04in;
  color: #fff;
  background: var(--sunset-orange);
  border: 1px solid #a9472d;
  border-radius: 0.045in;
  font-style: normal;
  text-align: center;
}

[data-problem-id="7"] .sunset-marker::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 0.115in;
  background: #a9472d;
}

[data-problem-id="7"] .sunset-marker b,
[data-problem-id="7"] .sunset-marker small {
  display: block;
  line-height: 1;
}

[data-problem-id="7"] .sunset-marker b { font-size: 0.125in; }
[data-problem-id="7"] .sunset-marker small {
  margin-top: 0.018in;
  font-size: 0.125in;
  text-transform: uppercase;
}

[data-problem-id="7"] .sunset-answers {
  margin: 0.11in 0 0;
  padding: 0;
  background: transparent;
  border: 0;
}

[data-problem-id="7"] .sunset-answers .problem-parts {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.65fr);
  gap: 0.085in;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sunset-answer;
}

[data-problem-id="7"] .sunset-answers .problem-part {
  position: relative;
  min-height: 1.16in;
  margin: 0;
  padding: 0.11in 0.12in 0.1in 0.39in;
  background: #fff;
  border: 1.5px solid #b5a68f;
  border-radius: 0.075in;
  counter-increment: sunset-answer;
  break-inside: avoid;
}

[data-problem-id="7"] .sunset-answers .problem-part::before {
  content: counter(sunset-answer);
  position: absolute;
  top: 0.1in;
  left: 0.1in;
  display: grid;
  width: 0.21in;
  height: 0.21in;
  place-items: center;
  color: #fff;
  background: var(--sunset-navy);
  border-radius: 50%;
  font-size: 0.125in;
  font-weight: 850;
  line-height: 1;
}

[data-problem-id="7"] .sunset-answers .problem-part > p,
[data-problem-id="7"] .sunset-answers .answer-pair > div > p {
  margin: 0;
  font-size: 0.125in;
  line-height: 1.3;
}

[data-problem-id="7"] .sunset-answers .answer-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.12in;
}

[data-problem-id="7"] .sunset-answers .answer-pair > div + div {
  padding-left: 0.12in;
}

[data-problem-id="7"] .sunset-answers .answer-sentence {
  margin-top: 0.16in !important;
  color: var(--sunset-navy);
  font-weight: 750;
  white-space: nowrap;
}

[data-problem-id="7"] .answer-blank {
  display: inline-block;
  width: 0.45in;
  height: 0.19in;
  margin: 0 0.02in;
  vertical-align: -0.02in;
  border-bottom: 1.5px solid var(--sunset-navy);
}

[data-problem-id="7"] .answer-blank--time { width: 0.62in; }
[data-problem-id="7"] .answer-blank--short { width: 0.36in; }

@media screen and (max-width: 52rem) {
  [data-problem-id="7"] .sunset-opening,
  [data-problem-id="7"] .workbench-heading,
  [data-problem-id="7"] .timeline-lane,
  [data-problem-id="7"] .sunset-answers .problem-parts {
    grid-template-columns: 1fr;
  }

  [data-problem-id="7"] .sunset-illustration img {
    aspect-ratio: 1170 / 500;
  }

  [data-problem-id="7"] .duration-chips {
    margin-top: 0.08in;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-problem-id="7"] .timeline-lane-label {
    min-height: 0.52in;
  }

  [data-problem-id="7"] .sunset-deadline {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.025in;
  }
}

@media screen and (max-width: 36rem) {
  [data-problem-id="7"] .duration-chips,
  [data-problem-id="7"] .sunset-answers .answer-pair {
    grid-template-columns: 1fr;
  }

  [data-problem-id="7"] .sunset-answers .answer-pair > div + div {
    padding: 0.1in 0 0;
    border-top: 1px solid #d8cdbb;
    border-left: 0;
  }

  [data-problem-id="7"] .timeline-canvas {
    grid-template-columns: 0.58in minmax(1.4in, 1fr) 0.66in;
  }
}

@media print {
  [data-problem-id="7"] .sunset-opening,
  [data-problem-id="7"] .sunset-deadline,
  [data-problem-id="7"] .sunset-workbench {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}