/*
 * GeekBase — C Programming workshop curriculum styles.
 *
 * The curriculum markup comes verbatim from the authored source document
 * (see scripts/build-c-workshop-data.mjs), so it carries its own class names
 * rather than Tailwind utilities. This sheet re-implements those classes in the
 * geekbase brand and scopes every rule under .cw-doc so nothing leaks into the
 * rest of the page. Tailwind's preflight has already reset margins/borders, so
 * values here are stated explicitly instead of relying on UA defaults.
 */

.cw-doc {
  --cw-fg: #171c26;
  --cw-muted: #667085;
  --cw-border: #e6e8ee;
  --cw-brand: #0044b8;
  --cw-brand-light: #2575fc;
  --cw-brand-soft: #e5eeff;
  --cw-brand-tint: #f0f5ff;
  --cw-emerald: #047857;
  --cw-violet: #6d28d9;
  --cw-rose: #be123c;
  --cw-amber: #b45309;
  --cw-cyan: #0e7490;
  --cw-teal: #0f766e;
  --cw-indigo: #4338ca;
  --cw-fuchsia: #a21caf;
  --cw-red: #dc2626;

  color: var(--cw-fg);
  font-size: 15px;
  line-height: 1.65;
  /* The curriculum quotes long download URLs and identifiers. Inherited by every
     descendant, this breaks them rather than letting them widen the page on
     mobile. <pre> blocks are unaffected (white-space: pre) — they scroll instead. */
  overflow-wrap: break-word;
}

.cw-doc code,
.cw-doc pre,
.cw-doc .mono,
.cw-doc .ascii {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ── prose ─────────────────────────────────────────────────────────────── */
.cw-doc .prose { margin: 0 0 10px; }
.cw-doc .prose.muted,
.cw-doc .muted { color: var(--cw-muted); }
.cw-doc .foot { font-size: 13px; color: var(--cw-muted); font-style: italic; margin: 8px 0 0; }
.cw-doc b { font-weight: 700; }

/* ── lists ─────────────────────────────────────────────────────────────── */
.cw-doc .list { list-style: none; margin: 0 0 10px; padding: 0; }
.cw-doc .list li { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; }
/* Flex items default to min-width:auto, which refuses to shrink below the widest
   word — a download URL then widens the whole page on mobile. Allowing them to
   shrink lets the inherited overflow-wrap actually break those URLs. */
.cw-doc .list li > span { min-width: 0; }
.cw-doc .list .mk { color: var(--cw-muted); flex-shrink: 0; font-size: 13px; margin-top: 3px; }
.cw-doc .list .mk.red { color: var(--cw-red); font-weight: 700; }
.cw-doc ol { padding-left: 20px; margin: 8px 0; }
.cw-doc ol li { margin: 5px 0; }

/* ── panels ────────────────────────────────────────────────────────────── */
.cw-doc .panel {
  border: 1px solid var(--cw-border);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 16px 0;
  background: #fcfcfd;
}
.cw-doc .phead { margin-bottom: 12px; }
.cw-doc .phead h4 { margin: 0; font-size: 16px; font-weight: 700; }
.cw-doc .kicker { margin: 2px 0 0; font-size: 13px; color: var(--cw-muted); }
.cw-doc .panel.rose { background: #fff1f3; border-color: #fecdd3; }
.cw-doc .panel.indigo { background: var(--cw-brand-tint); border-color: #c7d2fe; }
.cw-doc .panel.blue { background: var(--cw-brand-tint); border-color: #bfdbfe; }
.cw-doc .panel.emerald { background: #ecfdf5; border-color: #a7f3d0; }
.cw-doc .panel.teal { background: #f0fdfa; border-color: #99f6e4; }
.cw-doc .panel.violet { background: #f5f3ff; border-color: #ddd6fe; }
.cw-doc .panel.fuchsia { background: #fdf4ff; border-color: #f5d0fe; }
.cw-doc .phead.rose h4 { color: var(--cw-rose); }
.cw-doc .phead.indigo h4 { color: var(--cw-indigo); }
.cw-doc .phead.blue h4 { color: var(--cw-brand); }
.cw-doc .phead.emerald h4 { color: var(--cw-emerald); }
.cw-doc .phead.teal h4 { color: var(--cw-teal); }
.cw-doc .phead.violet h4 { color: var(--cw-violet); }
.cw-doc .phead.fuchsia h4 { color: var(--cw-fuchsia); }

/* ── headings ──────────────────────────────────────────────────────────── */
.cw-doc .blockhead {
  font-size: 16px;
  font-weight: 700;
  margin: 24px 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--cw-brand);
  color: var(--cw-brand);
}
.cw-doc .blockhead.violet { border-color: var(--cw-violet); color: var(--cw-violet); }
.cw-doc .blockhead.cyan { border-color: var(--cw-cyan); color: var(--cw-cyan); }
.cw-doc .blockhead.teal { border-color: var(--cw-teal); color: var(--cw-teal); }
.cw-doc .blockhead.emerald { border-color: var(--cw-emerald); color: var(--cw-emerald); }
.cw-doc .blockhead.amber { border-color: var(--cw-amber); color: var(--cw-amber); }
.cw-doc .blockhead.blue { border-color: var(--cw-brand); color: var(--cw-brand); }
.cw-doc .block { margin: 18px 0; }
.cw-doc .intro { margin: 20px 0; display: block; }

/* Topics are sidebar jump targets — keep them clear of the sticky site header. */
.cw-doc .topic { margin: 34px 0; padding-top: 8px; scroll-margin-top: 6rem; }
.cw-doc .topictitle {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cw-border);
  letter-spacing: -0.01em;
}
.cw-doc .subtopic { margin: 20px 0; }
.cw-doc .subtitle { font-size: 16px; font-weight: 700; margin: 0 0 8px; }

/* ── what / why / how ──────────────────────────────────────────────────── */
.cw-doc .wwh { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; }
.cw-doc .strip { border-left: 3px solid var(--cw-brand); padding-left: 16px; }
.cw-doc .strip.blue { border-color: var(--cw-brand); }
.cw-doc .strip.emerald { border-color: var(--cw-emerald); }
.cw-doc .strip.violet { border-color: var(--cw-violet); }
.cw-doc .strip h5 { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.cw-doc .strip.blue h5 { color: var(--cw-brand); }
.cw-doc .strip.emerald h5 { color: var(--cw-emerald); }
.cw-doc .strip.violet h5 { color: var(--cw-violet); }

/* ── motivation extras ─────────────────────────────────────────────────── */
.cw-doc .wall { background: #fff; border: 1px solid #fecdd3; border-radius: 12px; padding: 14px; margin: 12px 0; }
.cw-doc .walllabel {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cw-rose);
}
.cw-doc .insight { font-weight: 600; margin: 6px 0 0; }
.cw-doc .keybox { border-left: 3px solid var(--cw-brand); padding: 4px 0 4px 16px; margin-top: 14px; }
.cw-doc .keylabel { font-size: 13px; font-weight: 700; color: var(--cw-brand); margin: 0 0 6px; }

/* ── code ──────────────────────────────────────────────────────────────── */
.cw-doc .codewrap { margin: 14px 0; }
.cw-doc .codecap {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  background: #1e293b;
  border: 1px solid #334155;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 8px 14px;
}
.cw-doc .codecap + .code { border-radius: 0 0 12px 12px; margin: 0; }
.cw-doc pre.code {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
  margin: 14px 0;
}
.cw-doc pre.code.sm { font-size: 12.5px; }
.cw-doc pre.ascii {
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  padding: 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
  color: #1e293b;
  margin: 14px 0;
}
.cw-doc .chip {
  background: #ede9fe;
  color: var(--cw-violet);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 13px;
  font-weight: 600;
}
.cw-doc .chip.emerald { background: #d1fae5; color: var(--cw-emerald); display: inline-block; margin-bottom: 4px; }

/* ── tables ────────────────────────────────────────────────────────────── */
.cw-doc .tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 12px 0;
  display: block;
  overflow-x: auto;
}
.cw-doc .tbl th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid var(--cw-border);
  color: var(--cw-violet);
  font-weight: 600;
  white-space: nowrap;
}
.cw-doc .tbl td { padding: 8px 12px; border-bottom: 1px solid var(--cw-border); vertical-align: top; }
.cw-doc .tbl td.mono { font-size: 13px; }
.cw-doc .atitle { font-weight: 700; color: var(--cw-teal); margin: 0 0 6px; }

/* ── steps ─────────────────────────────────────────────────────────────── */
.cw-doc .steps { list-style: none; counter-reset: st; margin: 8px 0; padding: 0; }
.cw-doc .steps li { counter-increment: st; display: flex; gap: 12px; margin: 12px 0; }
.cw-doc .steps li::before {
  content: counter(st);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cw-brand-soft);
  color: var(--cw-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #bfdbfe;
}
.cw-doc .panel.emerald .steps li::before { background: #d1fae5; color: var(--cw-emerald); border-color: #a7f3d0; }
.cw-doc .steplabel { font-weight: 600; margin: 0; }
.cw-doc .stepbody { padding-top: 2px; }

/* ── warnings ──────────────────────────────────────────────────────────── */
.cw-doc .warnbox { background: #fffbeb; border: 1px solid #fde68a; border-radius: 16px; padding: 18px 20px; margin: 18px 0; }
.cw-doc .warnhead { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.cw-doc .warnhead.amber { color: var(--cw-amber); }
.cw-doc .warnhead.red { color: var(--cw-red); }
.cw-doc .warnbox .warnhead.red { margin-top: 16px; }
.cw-doc .mtitle { font-weight: 700; margin: 0 0 4px; }
.cw-doc .lbl { color: var(--cw-muted); font-weight: 600; }
.cw-doc .lbl.fix { color: var(--cw-emerald); }

/* ── do / don't ────────────────────────────────────────────────────────── */
.cw-doc .docols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; }
/* Same min-width:auto trap as .list li: a <pre> of example output reports its
   longest line as min-content, which inflates the 1fr track past the viewport.
   Letting the items shrink hands the overflow to the <pre>'s own scrollbar. */
.cw-doc .docols > * { min-width: 0; }
.cw-doc .doblk {
  display: block;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.cw-doc .doblk.do { background: #d1fae5; color: #065f46; }
.cw-doc .doblk.dont { background: #fee2e2; color: #991b1b; }
.cw-doc .miclabel {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.cw-doc .miclabel.emerald { color: var(--cw-emerald); }
.cw-doc .miclabel.red { color: var(--cw-red); }
.cw-doc .miclabel.fuchsia { color: var(--cw-fuchsia); }
.cw-doc .miclabel.muted { color: var(--cw-muted); }

/* ── mini activity ─────────────────────────────────────────────────────── */
.cw-doc .expected { background: #fff; border: 1px solid #f5d0fe; border-radius: 12px; padding: 14px; margin-top: 12px; }
.cw-doc .expre { font-size: 13px; white-space: pre-wrap; margin: 0; }

/* ── practice problems ─────────────────────────────────────────────────── */
.cw-doc .ppdhead { font-size: 20px; font-weight: 800; margin: 8px 0; }
.cw-doc .prob { border: 1px solid var(--cw-border); border-radius: 16px; padding: 18px 20px; margin: 14px 0; background: #fff; }
.cw-doc .probhead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cw-doc .probhead h4 { margin: 0; font-size: 16px; flex: 1; font-weight: 700; }
.cw-doc .probnum {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--cw-brand-soft);
  color: var(--cw-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.cw-doc .diff { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; border: 1px solid; }
.cw-doc .diff.easy { background: #dcfce7; color: #15803d; border-color: #86efac; }
.cw-doc .diff.medium { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.cw-doc .diff.hard { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.cw-doc .disc { margin: 10px 0; border: 1px solid var(--cw-border); border-radius: 12px; overflow: hidden; }
.cw-doc .disc summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
  background: #f8fafc;
  user-select: none;
  list-style: none;
}
.cw-doc .disc summary::-webkit-details-marker { display: none; }
.cw-doc .disc summary::before { content: "▸ "; color: var(--cw-brand); font-weight: 700; }
.cw-doc .disc[open] summary { border-bottom: 1px solid var(--cw-border); }
.cw-doc .disc[open] summary::before { content: "▾ "; }
.cw-doc .hintbox { padding: 14px; background: #fffbeb; color: #92400e; }
.cw-doc .explbox { padding: 12px 14px; background: var(--cw-brand-tint); border: 1px solid #bfdbfe; border-radius: 12px; margin-top: 8px; font-size: 14px; }
.cw-doc .cplxbox { padding: 12px 14px; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 12px; margin-top: 8px; font-size: 14px; }

/* ── mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cw-doc { font-size: 14.5px; }
  .cw-doc .docols { grid-template-columns: 1fr; }
  .cw-doc .topictitle { font-size: 18px; }
  .cw-doc .panel,
  .cw-doc .warnbox,
  .cw-doc .prob { padding: 14px 15px; border-radius: 14px; }
  .cw-doc pre.code,
  .cw-doc pre.ascii { font-size: 12px; padding: 13px; }
  .cw-doc .probhead { flex-wrap: wrap; }
  .cw-doc .probhead h4 { flex: 1 1 100%; order: 3; }
}