/* Shared stylesheet for the CLRS chapter-recap subsite.
   One file for ~35 chapter pages, so a style tweak is a single edit. */

:root{
  --bg:#ffffff; --fg:#1f2937; --muted:#64748b; --accent:#2563eb;
  --border:#e2e8f0; --code-bg:#f8fafc; --th-bg:#f1f5f9; --row:#fafbfc;
  --good:#16a34a; --bad:#dc2626; --warn:#b45309;
  --ink:#0f172a; --violet:#7c3aed;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; font-size:17px;
}
.wrap{max-width:960px; margin:0 auto; padding:48px 24px 96px}

h1{font-size:2.1rem; line-height:1.2; margin:0 0 .3em; letter-spacing:-.02em}
h2{font-size:1.5rem; margin:2.2em 0 .6em; padding-bottom:.25em; border-bottom:2px solid var(--border)}
h3{font-size:1.15rem; margin:1.8em 0 .4em}
h4{font-size:1rem; margin:1.4em 0 .3em; color:var(--ink)}
p{margin:.7em 0}
.lead{color:var(--muted); font-size:1.05rem; font-style:italic; margin-bottom:1.5em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{padding-left:1.4em}
li{margin:.35em 0}
strong{color:var(--ink)}

/* chapter/part chrome */
.backlink{font-size:.9rem; margin-bottom:1.5em}
.chapmeta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 1.2em}
.badge{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.05em;
       text-transform:uppercase; padding:.28em .7em; border-radius:999px;
       background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe}
.badge.part{background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe}
.badge.ds{background:#ecfdf5; color:#047857; border-color:#a7f3d0}
.badge.soon{background:#f8fafc; color:#64748b; border-color:var(--border)}

/* code */
code{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:.9em;
     background:var(--code-bg); padding:.1em .35em; border-radius:4px; border:1px solid var(--border)}
pre{background:var(--code-bg); border:1px solid var(--border); border-radius:10px;
    padding:16px 18px; overflow-x:auto; margin:1em 0; line-height:1.5}
pre code{background:none; border:none; padding:0; font-size:.85rem; color:var(--ink)}
.cmt{color:var(--good)}
.kw{color:var(--violet); font-weight:600}
.ln{color:#94a3b8; user-select:none}

/* CLRS-style pseudocode block */
.pseudo{background:#fffdf7; border:1px solid #fde68a; border-radius:10px;
        padding:14px 18px; overflow-x:auto; margin:1.1em 0; line-height:1.55}
.pseudo .name{font-weight:700; color:#92400e}
.pseudo code{background:none; border:none; padding:0; font-size:.86rem; color:var(--ink)}
.pseudo .ln{color:#c8a24a}
.pseudo-cap{color:var(--muted); font-size:.85rem; margin:-.6em 0 1.4em}

/* tables */
table{border-collapse:collapse; width:100%; margin:1.2em 0; font-size:.95rem}
th,td{border:1px solid var(--border); padding:9px 12px; text-align:left; vertical-align:top}
th{background:var(--th-bg); font-weight:600}
tbody tr:nth-child(even){background:var(--row)}
td.num{text-align:right; font-variant-numeric:tabular-nums}

/* figures: inline SVG, self-contained, no image hosting needed */
figure{margin:1.6em 0; text-align:center}
figure svg{max-width:100%; height:auto}
.svgbox{border:1px solid var(--border); border-radius:10px; padding:14px;
        background:#fcfdff; box-shadow:0 1px 3px rgba(15,23,42,.05)}
figcaption{color:var(--muted); font-size:.85rem; margin-top:.6em; text-align:center}

/* callouts */
.toc{background:var(--code-bg); border:1px solid var(--border); border-radius:10px; padding:16px 22px; margin:1.5em 0}
.toc h2{border:none; margin:.1em 0 .4em; font-size:1.05rem}
.toc ol{columns:2; column-gap:32px; margin:0}
.note{background:#eff6ff; border-left:4px solid var(--accent); border-radius:6px;
      padding:.6em 1em; margin:1.2em 0; color:#1e3a5f}
.warn{background:#fffbeb; border-left:4px solid #f59e0b; border-radius:6px;
      padding:.6em 1em; margin:1.2em 0; color:#713f12}
.keyidea{background:#fdf4ff; border:1px solid #f0abfc; border-radius:10px; padding:.6em 1.1em;
         margin:1.2em 0; color:#701a75}
.recap{background:#f0fdf4; border:1px solid #86efac; border-radius:10px; padding:.9em 1.2em; margin:1.6em 0}
.recap h3{margin:.1em 0 .4em; font-size:1rem; color:#065f46}
.recap ul{margin:.3em 0}

/* good/bad comparison */
.codepair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:1em 0 1.6em}
@media (max-width:720px){.codepair{grid-template-columns:1fr}.toc ol{columns:1}}
.codebox{border:1px solid var(--border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column}
.codebox .lbl{font-size:.8rem; font-weight:700; padding:.4em .85em; color:#fff}
.codebox.bad .lbl{background:var(--bad)}
.codebox.good .lbl{background:var(--good)}
.codebox pre{margin:0; border:none; border-radius:0; flex:1; background:#fff}

/* chapter nav footer */
hr{border:none; border-top:1px solid var(--border); margin:2.5em 0}
.chapnav{display:flex; justify-content:space-between; gap:16px; margin:2.5em 0 1em; font-size:.92rem}
.chapnav a{font-weight:600}
.chapnav span{color:var(--muted)}
footer{color:var(--muted); font-size:.85rem; text-align:center; margin-top:2em}

/* hub index */
.btnlist{display:flex; flex-direction:column; gap:9px}
a.btn{display:flex; align-items:center; gap:11px; text-decoration:none;
      background:#fff; border:1.5px solid var(--border); border-radius:11px;
      padding:10px 15px; font-size:.95rem; font-weight:700; color:var(--accent);
      transition:border-color .15s,box-shadow .15s,transform .15s}
a.btn:hover{border-color:var(--accent); box-shadow:0 1px 8px rgba(37,99,235,.12); transform:translateY(-1px)}
a.btn .dot{width:11px; height:11px; border-radius:50%; background:#22d3ee; flex:none;
           box-shadow:0 0 0 3px rgba(34,211,238,.18)}
a.btn .num{color:var(--accent); font-variant-numeric:tabular-nums; min-width:1.6em}
a.btn .sep{color:var(--muted); font-weight:400; margin:0 .15em}
a.btn .tag{margin-left:auto; font-size:.68rem; font-weight:700; color:#047857;
           background:#ecfdf5; border:1px solid #a7f3d0; border-radius:999px; padding:.15em .6em;
           text-transform:uppercase; letter-spacing:.04em}
span.btn{display:flex; align-items:center; gap:11px; background:#fbfcfe;
         border:1.5px dashed var(--border); border-radius:11px; padding:10px 15px;
         font-size:.95rem; font-weight:600; color:#94a3b8}
span.btn .dot{width:11px; height:11px; border-radius:50%; background:#e2e8f0; flex:none}
span.btn .num{font-variant-numeric:tabular-nums; min-width:1.6em}
h2.part{font-size:1rem; margin:2em 0 .8em; color:#000; font-weight:700;
        text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border);
        padding-bottom:.3em}
h2.part:first-of-type{margin-top:1.2em}