/* Topic and difficulty classes, replacing inline style attributes.
 *
 * The old markup carried style="--topic-color: var(--topic-prob)" on
 * rows, pills and meters, which forced 'unsafe-inline' into style-src.
 * R33 wants styles restricted to this origin, and 'unsafe-inline' is
 * exactly the hole that undoes that, so every one of those attributes is
 * now a class. This closes INFO-3 in SECURITY_AUDIT.md.
 *
 * The names match the topic slugs and difficulty bands emitted by
 * build/scripts/build.py; changing one without the other silently drops
 * the colour.
 */

/* --- topics ------------------------------------------------------------ */

.topic-probability   { --topic-color: var(--topic-prob); }
.topic-game-theory   { --topic-color: var(--topic-game); }
.topic-combinatorics { --topic-color: var(--topic-combo); }
.topic-brainteasers  { --topic-color: var(--topic-brain); }
.topic-statistics    { --topic-color: var(--topic-stats); }

/* --- difficulty bands --------------------------------------------------- */

.diff-easy   { --diff-color: var(--diff-easy); }
.diff-medium { --diff-color: var(--diff-medium); }
.diff-hard   { --diff-color: var(--diff-hard); }
.diff-expert { --diff-color: var(--diff-expert); }

/* --- difficulty meter fill ---------------------------------------------- */
/* Predicted difficulty rounds to a whole number before display, so ten
 * discrete widths cover every value the meter can show. A continuous
 * inline width would have meant keeping 'unsafe-inline' for one number. */

.diff-meter-fill { background: var(--diff-color, var(--border-strong)); }

.diff-fill-0   { width: 0; }
.diff-fill-10  { width: 10%; }
.diff-fill-20  { width: 20%; }
.diff-fill-30  { width: 30%; }
.diff-fill-40  { width: 40%; }
.diff-fill-50  { width: 50%; }
.diff-fill-60  { width: 60%; }
.diff-fill-70  { width: 70%; }
.diff-fill-80  { width: 80%; }
.diff-fill-90  { width: 90%; }
.diff-fill-100 { width: 100%; }

/* --- elements introduced by the generated pages ------------------------- */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  list-style: none;
  margin: var(--space-4, 1rem) 0;
  padding: 0;
}

.tag {
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 999px;
  color: var(--text-muted, #9a9a9a);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.65rem;
}

/* --- collapsed extras ---------------------------------------------------- */
/* Related problems and prerequisites start closed. Landing on a problem
 * should show the problem: a list of similar problems is both a
 * distraction while you are thinking and a mild spoiler about the method.
 * One click opens it, and it works with JS disabled. */

.problem-extras {
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  margin-top: var(--space-10, 40px);
}

.problem-extras-summary {
  align-items: center;
  color: var(--text-muted, #71717a);
  cursor: pointer;
  display: flex;
  font-family: var(--font-mono);
  font-size: 12px;
  justify-content: space-between;
  letter-spacing: 0.06em;
  list-style: none;
  padding: var(--space-4, 16px) 0;
  text-transform: uppercase;
  transition: color 0.15s ease;
}

/* Hide the native disclosure triangle in both engines; the hint text on
   the right does that job with the site's own typography. */
.problem-extras-summary::-webkit-details-marker { display: none; }
.problem-extras-summary::marker { content: ''; }

.problem-extras-summary:hover,
.problem-extras[open] > .problem-extras-summary {
  color: var(--text-secondary, #a1a1aa);
}

.problem-extras-summary:focus-visible {
  outline: 2px solid var(--accent, #fff);
  outline-offset: 4px;
}

.problem-extras-hint::after { content: 'show'; }
.problem-extras[open] .problem-extras-hint::after { content: 'hide'; }
.problem-extras-hint { font-size: 0; }
.problem-extras-hint::after { font-size: 12px; }

.problem-extras-body { padding-bottom: var(--space-4, 16px); }

/* Inside the disclosure the first section needs no rule of its own — the
   summary already provides the separation. */
.problem-extras-body > .prereq-section:first-child,
.problem-extras-body > .related-section:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.prereq-section,
.related-section {
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  margin-top: var(--space-6, 24px);
  padding-top: var(--space-5, 20px);
}

.prereq-heading,
.related-heading {
  color: var(--text-muted, #9a9a9a);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-3, 0.75rem);
  text-transform: uppercase;
}

.prereq-list,
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prereq-list li,
.related-list li {
  padding: var(--space-2, 0.5rem) 0;
}

.related-meta,
.prereq-difficulty {
  color: var(--text-muted, #9a9a9a);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-left: var(--space-2, 0.5rem);
}

.recommend-suggestion {
  border-left: 2px solid var(--accent, #5a9eed);
  margin-top: var(--space-4, 1rem);
  padding-left: var(--space-3, 0.75rem);
}

/* Permalink under an inlined solution: the solution still has its own
   page, and someone who wants to share or bookmark it needs the URL. */
.solution-permalink {
  font-family: var(--font-mono);
  font-size: 12px;
  margin-top: var(--space-5, 20px);
}

.solution-permalink a {
  color: var(--text-muted, #71717a);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.solution-permalink a:hover { color: var(--accent-dim, #d4d4d8); }

.source-attribution {
  border-top: 1px solid var(--border, #2a2a2a);
  color: var(--text-muted, #9a9a9a);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-top: var(--space-8, 2rem);
  padding-top: var(--space-4, 1rem);
}

.solution-eyebrow {
  color: var(--text-muted, #9a9a9a);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  margin: 0 0 var(--space-2, 0.5rem);
  text-transform: uppercase;
}

.statement-recap {
  border: 1px solid var(--border, #2a2a2a);
  border-radius: var(--radius, 6px);
  margin: var(--space-6, 1.5rem) 0;
  padding: var(--space-4, 1rem);
}

.statement-recap summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* --- topic navigation --------------------------------------------------- */

.topic-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-5, 1.25rem);
}

.topic-chip {
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 999px;
  color: var(--text-muted, #9a9a9a);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.3rem 0.85rem;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.topic-chip:hover,
.topic-chip.is-active {
  border-color: var(--topic-color, var(--accent, #5a9eed));
  color: var(--text, #f0f0f0);
}

.topic-chip-count {
  color: var(--text-faint, #6a6a6a);
  margin-left: 0.35rem;
}

/* --- progress ----------------------------------------------------------- */

/* Progress page. Vertical rhythm comes from .legal-content and
 * .legal-section (see layout.css), the same wrappers Privacy and Terms
 * use — these rules only cover the pieces those pages don't have. */

.progress-figure {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  margin: 0;
}

.progress-figure strong {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.progress-figure-label {
  color: var(--text-secondary, #a1a1aa);
  font-size: 14px;
}

.progress-bar {
  background: var(--surface-raised, #1a1a1a);
  border-radius: 999px;
  height: 6px;
  /* Sits between the count and the detail line, matching the
     .legal-text + .legal-text step so the block reads as one unit. */
  margin: var(--space-5, 20px) 0 var(--space-4, 16px);
  max-width: 680px;
  overflow: hidden;
}

.progress-detail {
  margin: 0;
  min-height: 1.75em;
}

/* Scaled rather than width-animated: transform is composited, so the bar
 * cannot thrash layout on the way to its value. progress-page.js sets
 * scaleX(); transform-origin keeps it growing from the left. */
.progress-bar-fill {
  background: var(--accent, #5a9eed);
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-fill,
  .topic-chip {
    transition: none;
  }
}

.progress-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  /* A clear step down from the prose above it — these are the actions the
     preceding paragraphs describe, so they read as part of that section
     rather than as a new one. */
  margin-top: var(--space-6, 24px);
}

.progress-feedback {
  font-size: 14px;
  line-height: 1.75;
  /* Reserved even when empty, so the buttons don't jump when a message
     appears after an export or import. */
  margin: var(--space-3, 12px) 0 0;
  min-height: 1.75em;
}

.progress-feedback.is-error { color: var(--diff-expert, #ef4444); }
.progress-feedback.is-ok { color: var(--diff-easy, #22c55e); }

.solved-list {
  list-style: none;
  margin: 0;
  max-width: 680px;
  padding: 0;
}

.solved-list li {
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  color: var(--text-secondary, #a1a1aa);
  font-size: 14px;
  padding: var(--space-3, 12px) 0;
}

.solved-list li:last-child { border-bottom: 0; }

/* Title on the left, how long it took on the right. They collapse onto
   two lines on narrow screens rather than crushing the title. */
.solved-item {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px) var(--space-4, 16px);
  justify-content: space-between;
}

.solved-name a {
  color: var(--text-primary, #f4f4f5);
  text-decoration: none;
}

.solved-name a:hover {
  color: var(--accent, #fff);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.solved-meta {
  color: var(--text-muted, #71717a);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.solved-empty {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.75;
}

/* Topic-page and listing intro line. Was unstyled, so it inherited no
   measure or leading and sat tight under the title. */
.page-intro {
  color: var(--text-secondary, #a1a1aa);
  font-size: 14px;
  line-height: 1.75;
  margin-top: var(--space-4, 16px);
  max-width: 680px;
}

.listing-count {
  color: var(--text-muted, #71717a);
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: var(--space-3, 12px);
}

/* --- problem status column ---------------------------------------------- */
/* A filled green dot for solved, a hollow muted ring for unsolved, with the
 * word alongside it. Colour is reinforcement, never the only signal — the
 * label says which it is, so the column survives greyscale and colour
 * blindness. Both states occupy identical space, so nothing shifts when a
 * row flips to solved. */

.status-badge {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  gap: var(--space-2, 0.5rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.status-dot {
  border-radius: 50%;
  box-sizing: border-box;
  flex: none;
  height: 8px;
  width: 8px;
}

.status-badge.is-solved { color: var(--diff-easy, #22c55e); }
.status-badge.is-solved .status-dot {
  background: var(--diff-easy, #22c55e);
  /* Same glow language the hovered row uses elsewhere on the site. */
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.55);
}

.status-badge.is-unsolved { color: var(--text-muted, #71717a); }
.status-badge.is-unsolved .status-dot {
  background: transparent;
  border: 1.5px solid var(--border-strong, #52525b);
}

.problems-table tr.is-solved .cell-title { color: var(--text-muted, #9a9a9a); }

/* The table is table-layout: fixed and components.css sizes columns 1, 3
 * and 4 explicitly. Status is the new fifth column, sized here so the
 * original file stays untouched. */
.problems-table th:nth-child(5),
.problems-table td:nth-child(5) {
  width: 108px;
}

@media (max-width: 640px) {
  /* Phone widths are already tight — components.css shrinks topic and
     difficulty here. Status drops to the dot alone; the label stays in the
     accessibility tree for screen readers. */
  .problems-table th:nth-child(5),
  .problems-table td:nth-child(5) {
    width: 34px;
  }

  .status-label {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .problems-table thead th:nth-child(5) {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.cell-source { font-size: 0.8rem; line-height: 1.6; }
.answer-feedback.is-checking { color: var(--text-muted, #9a9a9a); }