/* Melola Computer Science: Stat's layout with its own accent (ADR 0036). The colour is provisional
   until the logo and colours are chosen (ADR 0036, pertanyaan terbuka). */
.cs {
  --stat-accent: #4338ca;
  --stat-accent-soft: #e0e7ff;
}

.topbar--cs { border-bottom: 3px solid var(--stat-accent); }

.cs-patterns { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 32px; padding: 0; list-style: none; }
.cs-pattern { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.cs-pattern--ready { border: 2px solid var(--stat-accent); }
.cs-pattern h3 { margin: 0; font-size: 1.05rem; }
.cs-pattern p { margin: 0; color: var(--ink-muted); font-size: 0.92rem; }
.cs-pattern__status { align-self: flex-start; margin: 0; padding: 1px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.cs-pattern--ready .cs-pattern__status { background: var(--stat-accent-soft); color: var(--stat-accent); }
.cs-pattern--soon .cs-pattern__status { background: #fef3c7; color: #92400e; }
.cs-pattern__more { margin-top: auto; font-weight: 600; color: var(--link); }
.cs-questions { margin: 16px 0 0; padding-left: 1.2em; color: var(--ink-muted); }
.cs-status { margin: 0; padding-left: 1.2em; }
.cs-status li + li { margin-top: 4px; }