/* collapsible sections */
.section {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.section:hover { border-color: var(--border2); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }

/* sticky wrapper — section title + column headers stick together */
.section-sticky {
  position: sticky; top: var(--controls-h, 72px); z-index: 20;
  background: var(--surface);
  border-radius: 14px 14px 0 0;
  transform: translateZ(0);
  will-change: transform;
}
.section.collapsed .section-sticky { border-radius: 14px; }

/* section header (title row) */
.section-header {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  cursor: pointer; user-select: none; transition: background 0.15s, box-shadow 0.25s;
  border-radius: 14px 14px 0 0;
  position: relative; overflow: hidden;
}
.section-header::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08), transparent 60%);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.section-header:hover::after { opacity: 1; }
.section-header:hover { background: var(--surface2); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.1); }
.section.collapsed .section-header { border-radius: 14px; }

.section-num   { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); min-width: 28px; }
.section-title { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.section-meta  { display: flex; align-items: center; gap: 10px; }
.section-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); transition: color 0.2s; }
.section-count.sc-filtered { color: var(--accent); }
.section-count.sc-empty    { color: var(--text-muted); opacity: 0.4; }
.section.section-no-match  { display: none !important; }

.section-progress-mini      { width: 80px; height: 4px; background: var(--surface3); border-radius: 999px; overflow: hidden; }
.section-progress-mini-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.4s ease; }

.chevron {
  color: var(--text-muted);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), color 0.2s;
  font-size: 12px;
}
.section:hover .chevron { color: var(--accent); }
.section.collapsed .chevron { transform: rotate(-90deg); }

/* column header row */
.section-col-headers {
  display: table;
  width: 100%;
  table-layout: fixed;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); font-weight: 500;
}
.section-col-headers {
  max-height: 80px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
}
.section.collapsed .section-col-headers { max-height: 0; opacity: 0; }

.th-check     { display: table-cell; vertical-align: middle; width: 40px; padding: 10px 14px; }
.th-problem   { display: table-cell; vertical-align: middle; width: 35%; padding: 10px 14px; }
.th-diff      { display: table-cell; vertical-align: middle; width: 90px; padding: 10px 14px; }
.th-col       { display: table-cell; vertical-align: middle; padding: 10px 14px; }
/* Both hidden: spacer fills, diff stays next to prob */
.th-spacer                                       { display: none; }
body.notes-hidden.solution-hidden .th-spacer     { display: table-cell; width: auto; }

@media (max-width: 768px) {
  .section-header { padding: 12px 14px; gap: 10px; }
  .section-progress-mini { display: none; }
  .th-check, .th-problem, .th-diff, .th-col { padding: 8px 10px; }
}

/* section body (collapsible) */
/* Use grid-template-rows trick for true-height smooth animation */
.section-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.section.collapsed .section-body {
  grid-template-rows: 0fr;
}
.section-body-inner {
  overflow: hidden;
  min-height: 0;
}

/* ── light mode overrides ── */
[data-theme="light"] .section:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
[data-theme="light"] .section-col-headers {
  color: var(--text-dim);
  font-weight: 600;
}