/* Shared student-help blocks for the System Design pages.
   Link from a page head: <link rel="stylesheet" href="../sd-student.css"> */

/* callout boxes: <div class="sd-box tip"><b>Tip</b> ...</div> */
.sd-box{border-radius:10px; padding:.75em 1.1em; margin:1.2em 0; border:1px solid var(--border,#e2e8f0); border-left-width:5px}
.sd-box > b:first-child, .sd-box > strong:first-child{display:block; margin-bottom:.25em; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase}
.sd-box p:first-of-type{margin-top:.2em}
.sd-box.tip{background:#f0fdf4; border-left-color:#16a34a}
.sd-box.tip > b:first-child{color:#15803d}
.sd-box.mistake{background:#fef2f2; border-left-color:#dc2626}
.sd-box.mistake > b:first-child{color:#b91c1c}
.sd-box.interview{background:#faf5ff; border-left-color:#7c3aed}
.sd-box.interview > b:first-child{color:#6d28d9}
.sd-box.intuition{background:#fffbeb; border-left-color:#d97706}
.sd-box.intuition > b:first-child{color:#b45309}

/* back-of-envelope math: <table class="sd-est"> with a final .total row */
table.sd-est td:last-child{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; white-space:nowrap}
table.sd-est tr.total td{font-weight:700; background:#eff6ff}

/* check-yourself answers: <details class="sd-ans"><summary>Answer</summary>...</details> */
ol.sd-quiz > li{margin:.9em 0}
details.sd-ans{margin:.35em 0 0; border:1px dashed var(--border,#cbd5e1); border-radius:8px; padding:.3em .8em; background:#f8fafc}
details.sd-ans > summary{cursor:pointer; color:var(--accent,#2563eb); font-weight:600; font-size:.92rem}
details.sd-ans[open] > summary{margin-bottom:.3em}

/* inline SVG diagrams: <figure class="sd-diagram"><svg viewBox=...>...</svg><figcaption>...</figcaption></figure> */
figure.sd-diagram svg{max-width:100%; height:auto; border:1px solid var(--border,#e2e8f0); border-radius:10px; background:#fff}
figure.sd-diagram svg text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* glossary: <dl class="sd-terms"><dt>Term</dt><dd>meaning</dd></dl> */
dl.sd-terms{display:grid; grid-template-columns:max-content 1fr; gap:.35em 1.2em; margin:1em 0}
dl.sd-terms dt{font-weight:600}
dl.sd-terms dd{margin:0; color:var(--fg,#1f2937)}
@media (max-width:640px){ dl.sd-terms{grid-template-columns:1fr} dl.sd-terms dd{margin-bottom:.5em} }

/* wide tables scroll inside themselves on phones instead of widening the page */
@media (max-width:640px){ .wrap table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch} }

/* Student edition: readable prose, visible contracts, and local explanations. */
:root{--accent:#185f58;--fg:#22312f;--muted:#53665f;--border:#d9e3de;--code-bg:#f5f7f4}
body{background:#fcfcf9;line-height:1.75}
.wrap{max-width:1020px;padding-top:40px}
.wrap > h1{max-width:900px;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15}
.wrap h2{scroll-margin-top:100px;border-bottom-color:#d9e3de}
.wrap h3,.sd-concept{scroll-margin-top:100px}
.wrap > p,.wrap > ul,.wrap > ol{max-width:900px}
.wrap .lead{font-style:normal;color:#53665f}
.wrap a{color:#185f58}
.wrap a:focus-visible,.wrap summary:focus-visible,.wrap input:focus-visible{outline:3px solid #ad7525;outline-offset:4px}
.wrap pre{background:#f5f7f4;line-height:1.6;max-width:100%;tab-size:4}
.wrap pre code{white-space:pre;font-size:.87rem}
.wrap .toc{background:white;border-color:#d9e3de}
.wrap .toc ol{columns:2;column-gap:28px}
.wrap .toc li{break-inside:avoid}
.sd-start{background:#eef5f0;border:1px solid #c4dace;border-top:4px solid #185f58;border-radius:12px;padding:20px 24px;margin:24px 0}
.sd-eyebrow{color:#185f58;font-size:.75rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;margin-top:0}
.sd-assumptions{font-size:.88rem;color:#4a6057;border-top:1px solid #c4dace;padding-top:12px}
.sd-concept-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.sd-concept{background:white;border:1px solid #d9e3de;border-radius:12px;padding:18px 20px}
.sd-concept h3{font-size:1.05rem;margin:0 0 10px;color:#185f58}
.sd-concept p{font-size:.94rem;margin:10px 0}
.sd-concept-example{border-left:3px solid #c49a55;padding-left:12px}
.sd-concept-limit{color:#53665f}
.sd-concept-link{text-decoration:underline dotted;text-underline-offset:4px}
.sd-trace svg{display:block;width:100%;max-width:760px;height:auto;margin:auto;font-family:inherit}
.sd-trace figcaption{max-width:760px;margin:8px auto}
.sd-self-check,.sd-sources{background:#fff8e9;border:1px solid #ead9b3;border-radius:10px;padding:14px 18px;margin:20px 0}
.sd-sources{background:white;border-color:#d9e3de}
.sd-self-check summary,.sd-sources summary{cursor:pointer;font-weight:650;line-height:1.5}
.sd-reviewed{font-size:.8rem;color:#53665f;text-align:center;border-top:1px solid #d9e3de;padding-top:18px;margin-top:40px}
.wrap .btnlist{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wrap a.btn{flex-wrap:wrap;color:#185f58;border-color:#d9e3de;background:white;transition:border-color .15s}
.wrap a.btn:hover{transform:none;border-color:#185f58;box-shadow:none}
.wrap a.btn .dot{background:#24746d;box-shadow:none}
.sd-card-description{display:block;flex-basis:100%;font-size:.86rem;line-height:1.55;font-weight:400;color:#53665f}
.sd-search-label{display:block;font-weight:650;margin-bottom:8px}
#guide-search{display:block;width:100%;max-width:560px;padding:12px 16px;font:inherit;border:1px solid #99b8a8;border-radius:8px;background:white}
#guide-search-count{font-size:.85rem;color:#53665f}
.sd-guide-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sd-guide-card{display:block;border:1px solid #d9e3de;background:white;border-radius:12px;padding:20px;text-decoration:none}
.sd-guide-card:hover{border-color:#185f58;text-decoration:none}
.sd-guide-card h3{margin:0 0 10px;font-size:1.1rem}
.sd-guide-card p{color:#22312f;font-size:.9rem;line-height:1.6}
.sd-guide-card span{font-size:.76rem;color:#53665f;line-height:1.6;display:block}
[hidden]{display:none!important}
@media(max-width:700px){.wrap{padding:28px 18px 64px}.sd-concept-grid,.wrap .btnlist,.sd-guide-catalog{grid-template-columns:1fr}.wrap .toc ol{columns:1}.sd-start{padding:16px}.wrap table{display:block;overflow-x:auto}.wrap .sd-terms{grid-template-columns:1fr}.wrap .sd-terms dt{overflow-wrap:anywhere}.wrap img{max-width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wrap *{transition:none!important}}
@media print{.wrap{max-width:none;padding:0}.sd-start,.sd-concept,.sd-self-check{break-inside:avoid}.sd-concept-grid{display:block}.sd-concept{margin-bottom:12px}.sd-trace{break-inside:avoid}.wrap pre{white-space:pre-wrap}.wrap pre code{white-space:pre-wrap}.sd-reviewed{margin-top:20px}}