/* Problem-specific content styles; the worksheet shell lives in /site-src/worksheet.css. */
[data-problem-id="28"] .problem-content {
  --night: #10243a;
  --night-soft: #1d3d59;
  --cyan: #24b8c7;
  --cyan-pale: #e7f8f8;
  --violet: #6955a8;
  --gold: #d8942d;
  --line: #9fc4cf;
}

[data-problem-id="28"] .problem-setup {
  max-width: 7.25in;
  padding: 0.11in 0.16in;
  background: linear-gradient(135deg, #f6fbfb, #f6f2fb);
  border: 1.5px solid var(--line);
  border-left: 0.07in solid var(--violet);
  border-radius: 0.085in;
  font-size: 0.18in;
  line-height: 1.4;
}

[data-problem-id="28"] .problem-setup p {
  margin: 0;
}

[data-problem-id="28"] .problem-setup p + p {
  margin-top: 0.08in;
}

[data-problem-id="28"] .coordinate {
  padding: 0.01in 0.05in;
  color: #fff;
  background: var(--night-soft);
  border-radius: 0.045in;
  font-weight: 850;
  white-space: nowrap;
}

[data-problem-id="28"] .problem-figure {
  margin: 0.08in auto 0.1in;
}

[data-problem-id="28"] .problem-figure img {
  max-height: 3.85in;
  filter: drop-shadow(0 0.045in 0.08in rgb(16 36 58 / 14%));
}

[data-problem-id="28"] .problem-question {
  margin-top: 0.06in;
}

[data-problem-id="28"] .problem-parts {
  gap: 0.08in;
}

[data-problem-id="28"] .proof-lock {
  margin-top: 0.12in;
  padding: 0.13in 0.16in 0.14in;
  color: var(--night);
  background: var(--cyan-pale);
  border: 1.5px solid var(--cyan);
  border-radius: 0.085in;
  break-inside: avoid;
}

[data-problem-id="28"] .proof-lock h3 {
  margin: 0 0 0.065in;
  color: var(--violet);
  font-size: 0.15in;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

[data-problem-id="28"] .proof-lock ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.08in;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-problem-id="28"] .proof-lock li {
  padding: 0.08in 0.09in 0.08in 0.28in;
  background: #fff;
  border: 1px solid #b7d7dd;
  border-radius: 0.06in;
  font-size: 0.135in;
  line-height: 1.28;
  font-weight: 760;
}

[data-problem-id="28"] .proof-lock li::before {
  margin-left: -0.2in;
  margin-right: 0.065in;
  color: var(--gold);
  content: "◆";
}

@media (max-width: 640px) {
  [data-problem-id="28"] .proof-lock ul {
    grid-template-columns: 1fr;
  }
}

@media print {
  [data-problem-id="28"] .problem-figure img {
    max-height: 3.65in;
  }

  [data-problem-id="28"] .problem-question {
    break-before: page;
  }
}