/* Tech Concepts Prep - shared styles */
:root {
  --bg: #f6f7fb; --card: #ffffff; --ink: #1e293b; --muted: #64748b; --line: #e2e8f0;
  --blue: #2563eb; --blue-bg: #eff6ff; --green: #059669; --green-bg: #ecfdf5;
  --purple: #7c3aed; --purple-bg: #f5f3ff; --amber: #b45309; --amber-bg: #fffbeb;
  --red: #dc2626; --red-bg: #fef2f2; --teal: #0f766e; --teal-bg: #f0fdfa; --slate-bg: #f1f5f9;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--ink);
  background: var(--bg); line-height: 1.55; font-size: 16px; }
a { color: var(--blue); }

nav.top { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 10px 20px; background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line); font-size: 14px; }
nav.top a { text-decoration: none; font-weight: 600; }
nav.top .here { color: var(--muted); font-weight: 600; }

main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; }

.hero { background: linear-gradient(135deg, #1e3a8a, #6d28d9); color: #fff; border-radius: 18px; padding: 30px 32px; margin-bottom: 28px; }
.hero .kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; opacity: .85; }
.hero h1 { margin: 6px 0 8px; font-size: 34px; line-height: 1.2; }
.hero p { margin: 0 0 16px; opacity: .93; max-width: 780px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; border: 1px solid rgba(255,255,255,.28); }
.toc a:hover { background: rgba(255,255,255,.3); }
.toc a.added { border-style: dashed; }
.legend { font-size: 12px; opacity: .85; margin-top: 12px; }

section.concept { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px;
  margin-bottom: 24px; box-shadow: 0 1px 3px rgba(15,23,42,.05); scroll-margin-top: 60px; }
section.concept > h2 { margin: 0 0 6px; font-size: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.num { background: var(--blue-bg); color: var(--blue); font-size: 13px; border-radius: 8px; padding: 2px 9px; font-weight: 700; }
.tag-added { background: var(--green-bg); color: var(--green); font-size: 11px; border-radius: 999px; padding: 2px 9px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border: 1px dashed var(--green); }
.oneliner { font-size: 17px; color: #334155; margin: 0 0 14px; border-left: 4px solid var(--purple); padding: 4px 0 4px 12px;
  background: linear-gradient(90deg, var(--purple-bg), transparent); border-radius: 0 8px 8px 0; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--purple); margin: 22px 0 8px; }
h4 { margin: 0 0 6px; font-size: 16px; }
ul, ol { margin: 6px 0; padding-left: 22px; }
li { margin: 4px 0; }
p { margin: 6px 0; }
code { background: var(--slate-bg); padding: 1px 6px; border-radius: 6px; font-family: "Cascadia Code", Consolas, monospace; font-size: .9em; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 10px 0; }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10px 0; }
@media (max-width: 760px) { .cols2 { grid-template-columns: 1fr; } }

.box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; }
.box p, .box ul { font-size: 14.5px; }
.box.blue { background: var(--blue-bg); border-color: #bfdbfe; }
.box.green { background: var(--green-bg); border-color: #a7f3d0; }
.box.purple { background: var(--purple-bg); border-color: #ddd6fe; }
.box.amber { background: var(--amber-bg); border-color: #fde68a; }
.box.red { background: var(--red-bg); border-color: #fecaca; }
.box.teal { background: var(--teal-bg); border-color: #99f6e4; }

/* Flow diagrams */
.flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 12px 0;
  padding: 16px; background: var(--slate-bg); border-radius: 12px; border: 1px solid var(--line); }
.flow.v { flex-direction: column; }
.flow .cap { width: 100%; text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.n { background: #fff; border: 2px solid var(--blue); color: var(--ink); padding: 8px 12px; border-radius: 10px;
  font-weight: 600; font-size: 14px; text-align: center; min-width: 90px; }
.n small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.n.g { border-color: var(--green); } .n.p { border-color: var(--purple); } .n.a { border-color: #d97706; }
.n.r { border-color: var(--red); } .n.t { border-color: var(--teal); } .n.s { border-color: #94a3b8; }
.n.fill { background: var(--blue); color: #fff; } .n.fill small { color: #dbeafe; }
.ar { color: #475569; font-weight: 700; font-size: 18px; text-align: center; line-height: 1.1; }
.ar small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }

pre.diagram { background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: 16px 18px; overflow-x: auto;
  font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.45; margin: 12px 0; }
.box pre.diagram { font-size: 12px; padding: 10px 12px; white-space: pre-wrap; }
pre.diagram .hl { color: #fbbf24; } pre.diagram .ok { color: #34d399; } pre.diagram .bad { color: #f87171; } pre.diagram .dim { color: #94a3b8; }

.svgwrap { background: var(--slate-bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 12px 0; text-align: center; }
.svgwrap svg { max-width: 100%; height: auto; }

table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; background: #fff; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--slate-bg); font-weight: 700; }
.tablewrap { overflow-x: auto; }

.remember { background: var(--amber-bg); border: 1px solid #fde68a; border-radius: 12px; padding: 12px 16px 12px; margin-top: 16px; }
.remember::before { content: "🧠 Points to remember"; display: block; font-weight: 700; color: var(--amber); font-size: 14px; margin-bottom: 2px; }
.tip { background: var(--teal-bg); border: 1px solid #99f6e4; border-radius: 12px; padding: 10px 14px; margin-top: 12px; font-size: 14.5px; }
.tip::before { content: "💡 "; }
.warn { background: var(--red-bg); border: 1px solid #fecaca; border-radius: 12px; padding: 10px 14px; margin-top: 12px; font-size: 14.5px; }
.warn::before { content: "⚠️ "; }

.post { background: #f0f7ff; border: 1px dashed #60a5fa; border-radius: 12px; padding: 12px 16px; margin-top: 16px; position: relative; }
.post::before { content: "📣 LinkedIn post idea"; display: block; font-weight: 700; font-size: 13px; color: var(--blue); margin-bottom: 4px; }
.post p { margin: 4px 0; font-size: 14.5px; }
.copy-btn { position: absolute; top: 10px; right: 10px; border: 1px solid #93c5fd; background: #fff; color: var(--blue);
  border-radius: 8px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-weight: 600; }
.copy-btn:hover { background: var(--blue-bg); }

details.qa { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
details.qa summary { cursor: pointer; font-weight: 600; }
details.qa p { margin-top: 8px; color: #334155; }
.qa-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; margin-bottom: 24px; }
.qa-wrap h2 { margin-top: 0; }

.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; margin: 1px 2px; }
.pill.g { background: var(--green-bg); color: var(--green); } .pill.r { background: var(--red-bg); color: var(--red); }
.pill.a { background: var(--amber-bg); color: var(--amber); } .pill.b { background: var(--blue-bg); color: var(--blue); }
.pill.p { background: var(--purple-bg); color: var(--purple); }

.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.pager a { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; text-decoration: none; font-weight: 600; }
.pager a.next { text-align: right; }
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 20px; }

/* Index cards */
.sec-card { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; transition: transform .12s, box-shadow .12s; }
.sec-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.sec-card .sn { font-size: 12px; font-weight: 800; color: var(--purple); letter-spacing: .1em; }
.sec-card h3 { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 18px; margin: 4px 0 8px; }
.sec-card ul { font-size: 13.5px; color: #334155; padding-left: 18px; }
.sec-card li.added { color: var(--green); }

@media print {
  nav.top, .copy-btn, .pager { display: none; }
  body { background: #fff; }
  section.concept { break-inside: avoid; box-shadow: none; }
  .hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ================= Animated diagrams (viz.js) ================= */
figure.viz { margin: 14px 0; padding: 14px 16px 12px; background: linear-gradient(180deg, #f8fafc, #f1f5f9); border: 1px solid var(--line);
  border-radius: 14px; overflow-x: auto; text-align: center; }
figure.viz > script { display: none; }
.viz-title { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; text-align: center; }
.viz-svg { max-width: 100%; height: auto; display: block; margin: 0 auto; font-family: "Segoe UI", system-ui, sans-serif; }
.viz-err { color: var(--red); font-weight: 700; }
.box figure.viz { padding: 10px; margin: 8px 0; }

/* frames */
.vf-stage { display: flex; flex-direction: column; gap: 10px; align-items: center; min-height: 60px; padding: 6px 0; }
.vf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.vf-rowlabel { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 70px; text-align: right; }
.vf-node { padding: 7px 12px; border-radius: 10px; border: 2px solid; font-size: 13.5px; min-width: 52px; background: #fff;
  transition: background-color .5s, border-color .5s, color .5s, opacity .5s; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.vf-node b { display: block; font-weight: 700; }
.vf-node small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.vf-node.big { padding: 12px 18px; font-size: 15px; }
.vf-arrow { font-size: 20px; font-weight: 800; color: #475569; line-height: 1; animation: arpulse 1.6s ease-in-out infinite; }
.vf-arrow small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
.vf-text { font-size: 13px; font-weight: 600; color: #334155; }
.vf-gap { width: 18px; }
.vf-caption { margin-top: 8px; font-size: 14px; font-weight: 600; color: #334155; min-height: 22px; }
.vf-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vf-dot { border: 1px solid var(--line); background: #fff; border-radius: 999px; font-size: 11.5px; padding: 2px 9px; cursor: pointer; color: var(--muted); font-family: inherit; }
.vf-dot span { font-weight: 800; }
.vf-dot.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.pop { animation: pop .55s ease-out; }
@keyframes pop { 0% { transform: scale(.85); opacity: .3; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }

.c-blue { border-color: #2563eb; background-color: #dbeafe; } .c-green { border-color: #059669; background-color: #d1fae5; }
.c-purple { border-color: #7c3aed; background-color: #ede9fe; } .c-amber { border-color: #d97706; background-color: #fef3c7; }
.c-red { border-color: #dc2626; background-color: #fee2e2; } .c-teal { border-color: #0f766e; background-color: #ccfbf1; }
.c-slate { border-color: #64748b; background-color: #f1f5f9; } .c-pink { border-color: #db2777; background-color: #fce7f3; }
.c-off { border-color: #cbd5e1; background-color: #f8fafc; color: #94a3b8; border-style: dashed; }
.tc-red { color: var(--red); } .tc-green { color: var(--green); } .tc-amber { color: var(--amber); } .tc-blue { color: var(--blue); }

/* journey */
.vj { position: relative; text-align: left; padding: 4px 0 4px 34px; max-width: 900px; margin: 0 auto; }
.vj-track { position: absolute; left: 14px; top: 10px; bottom: 10px; width: 3px; background: #cbd5e1; border-radius: 3px; }
.vj-dot { position: absolute; left: 8px; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 5px rgba(37,99,235,.2); transition: top .6s ease-in-out; }
.vj-step { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin: 6px 0; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; transition: transform .35s, box-shadow .35s, border-color .35s, background-color .35s; }
.vj-step.indent { margin-left: 34px; }
.vj-step.on { transform: translateX(6px); border-color: var(--blue); box-shadow: 0 4px 14px rgba(37,99,235,.18); background: #f8fbff; }
.vj-step.done { border-color: #a7f3d0; }
.vj-icon { font-size: 20px; width: 28px; text-align: center; }
.vj-body { flex: 1; }
.vj-title { font-weight: 700; font-size: 14.5px; }
.vj-desc { font-size: 13px; color: var(--muted); }
.vj-tag { font-size: 11.5px; font-weight: 700; color: var(--purple); background: var(--purple-bg); border-radius: 999px; padding: 2px 9px; text-decoration: none; white-space: nowrap; }

/* bars */
.vb { position: relative; text-align: left; max-width: 820px; margin: 0 auto; }
.vb-row { display: grid; grid-template-columns: 170px 1fr 150px; gap: 10px; align-items: center; margin: 7px 0; }
.vb-label { font-size: 13px; font-weight: 700; text-align: right; }
.vb-track { height: 22px; background: #e2e8f0; border-radius: 6px; overflow: hidden; }
.vb-fill { height: 100%; width: 0; border-radius: 6px; border: 0; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.vb-fill.c-blue { background: #3b82f6; } .vb-fill.c-green { background: #10b981; } .vb-fill.c-purple { background: #8b5cf6; }
.vb-fill.c-amber { background: #f59e0b; } .vb-fill.c-red { background: #ef4444; } .vb-fill.c-teal { background: #14b8a6; }
.vb-fill.c-slate { background: #94a3b8; } .vb-fill.c-pink { background: #ec4899; } .vb-fill.c-off { background: #cbd5e1; }
.vb-val { font-size: 13px; font-weight: 700; }
.vb-val small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.vb-threshold { position: absolute; top: 0; bottom: 0; left: calc(180px + (100% - 340px) * var(--x) / 100); border-left: 2px dashed var(--red); }
.vb-threshold span { position: absolute; top: -18px; left: 4px; font-size: 11px; font-weight: 700; color: var(--red); white-space: nowrap; }

/* steps */
.vs { text-align: left; max-width: 860px; margin: 0 auto; }
.vs-item { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; margin: 5px 0; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; opacity: .12; transform: translateY(6px); transition: opacity .45s, transform .45s; }
.vs-item.on { opacity: 1; transform: none; }
.vs-item.indent { margin-left: 26px; }
.vs-k { font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; border: 1.5px solid; white-space: nowrap; }
.vs-t { font-size: 14px; }

/* static flow arrows pulse in sequence */
.flow .ar { animation: arpulse 1.8s ease-in-out infinite; }
@keyframes arpulse { 0%, 100% { opacity: .35; color: #475569; } 50% { opacity: 1; color: #2563eb; } }

/* code samples (not drawings) */
pre.code { background: #f8fafc; color: #0f172a; border: 1px solid var(--line); border-left: 4px solid var(--purple); border-radius: 10px;
  padding: 14px 16px; overflow-x: auto; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.5; margin: 12px 0; }
pre.code .hl { color: #b45309; font-weight: 700; } pre.code .ok { color: #047857; font-weight: 700; } pre.code .bad { color: #b91c1c; font-weight: 700; } pre.code .dim { color: #64748b; }

@media (prefers-reduced-motion: reduce) {
  .flow .ar, .vf-arrow, .pop { animation: none !important; }
  .vj-dot, .vb-fill, .vs-item { transition: none !important; }
}
@media print { .vf-dots { display: none; } }

/* journey step accent colours */
.vj-step[class*=" c-"] { border-left-width: 5px; background-color: #fff; }
.vj-step.c-blue { border-left-color: #2563eb; } .vj-step.c-green { border-left-color: #059669; } .vj-step.c-purple { border-left-color: #7c3aed; }
.vj-step.c-amber { border-left-color: #d97706; } .vj-step.c-red { border-left-color: #dc2626; } .vj-step.c-teal { border-left-color: #0f766e; }
.vj-step.c-pink { border-left-color: #db2777; } .vj-step.c-slate { border-left-color: #64748b; }

/* ================= .NET 10 implementation boxes ================= */
.dotnet { margin-top: 16px; border: 1px solid #c4b5fd; border-left: 5px solid #512bd4; border-radius: 12px; background: #faf8ff; padding: 12px 16px; }
.dotnet-head { font-weight: 800; color: #512bd4; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.dotnet-logo { background: #512bd4; color: #fff; border-radius: 6px; padding: 1px 8px; font-size: 12px; letter-spacing: .02em; }
.dotnet table { font-size: 13.5px; margin: 6px 0; }
.dotnet th { background: #ede9fe; }
.dotnet td:first-child { white-space: nowrap; }
.dotnet code { background: #ede9fe; }
.dotnet pre.code { border-left-color: #512bd4; font-size: 12.5px; background: #fff; }
.dotnet pre.code code { background: none; padding: 0; }
.dotnet p { font-size: 14px; }
.pill.preview { background: #fef3c7; color: #b45309; }
.pill.lic { background: #fee2e2; color: #b91c1c; }
.pill.builtin { background: #ede9fe; color: #512bd4; }

pre.code { font-variant-ligatures: none; }

/* Left-side topics menu (assets/menu.js) */
.side { position: fixed; top: 0; left: 0; bottom: 0; width: 290px; z-index: 30; display: flex; flex-direction: column;
  background: #fff; border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .2s ease;
  font-size: 14px; }
body.side-open .side { transform: none; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px 16px; }
.side-home { font-weight: 800; text-decoration: none; color: var(--ink); font-size: 15px; }
.side-x { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.side-x:hover { background: var(--slate-bg); color: var(--ink); }
.side-tools { padding: 4px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.side-filter { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13.5px; background: var(--bg); }
.side-filter:focus { outline: 2px solid #bfdbfe; border-color: var(--blue); background: #fff; }
.side-btns { display: flex; gap: 6px; margin-top: 8px; }
.side-btns button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 4px 0; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.side-btns button:hover { color: var(--blue); border-color: #bfdbfe; background: var(--blue-bg); }
.side-list { flex: 1; overflow-y: auto; padding: 8px 8px 40px; overscroll-behavior: contain; }
.side-grp summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.side-grp summary::-webkit-details-marker { display: none; }
.side-grp summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8;
  transform: rotate(-45deg); transition: transform .15s; margin: 0 4px 0 2px; }
.side-grp[open] > summary::before { transform: rotate(45deg); }
.side-grp summary:hover { background: var(--slate-bg); }
.side-page { text-decoration: none; color: var(--ink); font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.side-num { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 18px; }
.side-grp.current > summary { background: var(--blue-bg); }
.side-grp.current .side-page { color: var(--blue); }
.side-grp ul { list-style: none; margin: 2px 0 8px; padding: 0 0 0 34px; border-left: 0; }
.side-grp li { margin: 0; }
.side-grp li a { display: block; padding: 3px 8px; border-radius: 6px; color: #475569; text-decoration: none; font-size: 13px; line-height: 1.35; }
.side-grp li a:hover { background: var(--slate-bg); color: var(--ink); }
.side-grp li a.active { background: var(--blue-bg); color: var(--blue); font-weight: 600; box-shadow: inset 2px 0 0 var(--blue); }
.side-toggle { position: fixed; top: 6px; left: 12px; z-index: 31; border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 34px; height: 30px; font-size: 16px; line-height: 1;
  cursor: pointer; color: var(--ink); flex: none; }
.side-toggle:hover { background: var(--blue-bg); border-color: #bfdbfe; color: var(--blue); }
nav.top { padding-left: 60px; }
body.side-open .side-toggle { display: none; }
.side-shade { display: none; }
@media (min-width: 1100px) {
  body { transition: padding-left .2s ease; }
  body.side-open { padding-left: 290px; }
}
@media (max-width: 1099px) {
  body.side-open .side { box-shadow: 0 10px 40px rgba(15,23,42,.25); }
  body.side-open .side-shade { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(15,23,42,.35); }
}
@media print { .side, .side-toggle, .side-shade { display: none !important; } body.side-open { padding-left: 0; } }
/* ================= Mobile (phones and small tablets) ================= */
.grid > *, .cols2 > *, .flow > *, .box, .dotnet, figure.viz, .svgwrap { min-width: 0; }
.grid { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  main { padding: 14px 10px 60px; }
  nav.top { padding: 8px 10px 8px 54px; font-size: 13px; gap: 8px; }
  nav.top .here { display: none; }
  .side-toggle { left: 10px; }
  .hero { padding: 20px 16px; border-radius: 14px; margin-bottom: 18px; }
  .hero h1 { font-size: 25px; }
  .hero p { font-size: 15px; }
  .toc a { font-size: 12.5px; padding: 4px 10px; }
  section.concept { padding: 18px 14px; border-radius: 14px; margin-bottom: 18px; }
  section.concept > h2 { font-size: 20px; gap: 8px; }
  .oneliner { font-size: 16px; }
  .qa-wrap { padding: 16px 14px; }
  .dotnet { padding: 10px 10px; }
  .box { padding: 12px 12px; }
  .flow { padding: 12px 8px; }
  figure.viz { padding: 10px 8px; }
  .pager { flex-direction: column; }
  .pager a.next { text-align: left; }
  .post { padding: 12px 12px; }
  .post::before { padding-right: 64px; }

  /* text never sticks out: wrap long words, package names and code */
  main { overflow-wrap: break-word; }
  code { overflow-wrap: anywhere; word-break: normal; }
  pre.code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; padding: 10px; }
  .dotnet pre.code { font-size: 11.5px; }
  .dotnet td:first-child { white-space: normal; }

  /* tables become stacked cards: one card per row, each value labelled with its column */
  .tablewrap { overflow-x: visible; }
  table.stack, table.stack tbody, table.stack tr, table.stack th, table.stack td { display: block; width: auto; }
  table.stack { border: 0; background: none; margin: 8px 0; }
  table.stack tr.stack-head { display: none; }
  table.stack tr { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; }
  table.stack th, table.stack td { border: 0; padding: 3px 0; white-space: normal !important; }
  table.stack tr > :first-child { font-weight: 700; font-size: 15px; padding-bottom: 4px; }
  table.stack td[data-label]::before, table.stack th[data-label]::before { content: attr(data-label); display: block;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  table.stack tr > :first-child[data-label]::before { display: none; }
  .dotnet table.stack tr { background: #fff; border-color: #ddd6fe; }

  /* diagrams keep readable labels and scroll sideways inside their own box */
  figure.viz, .svgwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .viz-svg, .svgwrap svg { max-width: none; width: 100%; min-width: var(--minw, 0); }
  figure.viz.scrollx::after, .svgwrap.scrollx::after { content: "\2190  swipe to see the whole diagram  \2192"; display: block;
    position: sticky; left: 0; text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
}
/* long package names and code in tables wrap instead of widening the table (any screen size) */
td code, th code { overflow-wrap: anywhere; }

/* diagrams keep readable labels at every width: scroll inside their own box only when they don't fit */
figure.viz, .svgwrap { overflow-x: auto; }
.viz-svg, .svgwrap svg { min-width: var(--minw, 0); }
figure.viz.scrollx::after, .svgwrap.scrollx::after { content: "\2190  swipe or scroll to see the whole diagram  \2192"; display: block;
  position: sticky; left: 0; text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
/* ================= Slim header (overrides the original hero and top bar) ================= */
nav.top { min-height: 40px; padding: 4px 16px 4px 56px; font-size: 13px; gap: 10px; }
nav.top a { padding: 4px 8px; border-radius: 7px; }
nav.top a:hover { background: var(--blue-bg); }
nav.top .here { font-size: 12.5px; }
.side-toggle { top: 5px; width: 32px; height: 30px; }
main { padding-top: 16px; }
.hero { position: relative; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 18px 12px 22px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); overflow: hidden; }
.hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #2563eb, #7c3aed); }
.hero .kicker { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--purple); opacity: 1;
  background: var(--purple-bg); border-radius: 999px; padding: 1px 8px; }
.hero h1 { font-size: 22px; line-height: 1.25; margin: 4px 0 2px; color: #0f172a; }
.hero p { font-size: 14px; line-height: 1.5; color: #475569; opacity: 1; margin: 0 0 8px; max-width: 900px; }
.hero p:last-of-type { margin-bottom: 8px; }
.hero a { color: var(--blue); }
.toc { gap: 5px; }
.toc a { background: var(--slate-bg); color: #334155; border: 1px solid var(--line); font-size: 12px; padding: 2px 9px; line-height: 1.5; }
.toc a:hover { background: var(--blue-bg); color: var(--blue); border-color: #bfdbfe; }
.toc a.added { border-style: dashed; border-color: #cbd5e1; }
.legend { font-size: 11.5px; opacity: 1; color: var(--muted); margin-top: 6px; }
/* the left menu already lists every topic: hide the duplicate chips while it is open beside the page */
@media (min-width: 1100px) { body.side-open.in-menu .hero .toc { display: none; } body.side-open.in-menu .hero p:last-of-type { margin-bottom: 0; } }
@media (max-width: 760px) {
  nav.top { padding: 4px 8px 4px 50px; }
  main { padding-top: 10px; }
  .hero { padding: 10px 12px 10px 16px; margin-bottom: 12px; border-radius: 10px; }
  .hero h1 { font-size: 19px; }
  .hero p { font-size: 13.5px; }
  .toc { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .toc::-webkit-scrollbar { display: none; }
  .toc a { flex: none; white-space: nowrap; }
}
@media print { .hero { box-shadow: none; } .hero .toc { display: none; } }
/* Header background (slim card with a soft colour wash) */
.hero { background: linear-gradient(120deg, #e6ecff 0%, #efe9ff 55%, #f8eeff 100%); border-color: #c7d2fe; }
.hero .kicker { background: #fff; box-shadow: 0 0 0 1px #ddd6fe inset; }
.hero p { color: #3f4a5e; }
.toc a { background: rgba(255,255,255,.8); border-color: #d6dcf5; }
.toc a.added { border-color: #c4b5fd; }
.toc a:hover { background: #fff; }

/* Behavioural question cards (STAR answers) */
.bq { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px 16px; margin: 14px 0; box-shadow: 0 1px 2px rgba(15,23,42,.04); scroll-margin-top: 60px; }
.bq-q { display: flex; gap: 10px; align-items: baseline; font-size: 17px; font-weight: 700; color: #0f172a; line-height: 1.4; margin-bottom: 10px; }
.qnum { flex: none; background: #1e293b; color: #fff; font-size: 12px; font-weight: 700; border-radius: 7px; padding: 2px 8px; }
.bq-why { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.bq-why > div { border-radius: 10px; padding: 10px 12px; font-size: 14.5px; }
.bq-why h5 { margin: 0 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.bq-why p { margin: 4px 0; }
.bq-psy { background: var(--amber-bg); border: 1px solid #fde68a; } .bq-psy h5 { color: var(--amber); }
.bq-phi { background: var(--teal-bg); border: 1px solid #99f6e4; } .bq-phi h5 { color: var(--teal); }
.star { display: grid; gap: 6px; }
.star > div { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--slate-bg); font-size: 14.5px; }
.star > div > :not(.k) { min-width: 0; }
.star p { margin: 2px 0; } .star ul { margin: 4px 0; }
.star .k { display: inline-flex; align-items: center; justify-content: center; height: 26px; border-radius: 7px; color: #fff; font-weight: 800; font-size: 13px; }
.st-s .k { background: #2563eb; } .st-t .k { background: #7c3aed; } .st-a .k { background: #d97706; }
.st-r .k { background: #059669; } .st-l .k { background: #0f766e; font-size: 11px; }
.st-r { background: var(--green-bg) !important; }
.bq-keys { font-size: 13.5px; color: #475569; margin: 8px 0 0; }
@media (max-width: 760px) {
  .bq { padding: 12px; } .bq-q { font-size: 16px; }
  .bq-why { grid-template-columns: 1fr; }
  .star > div { grid-template-columns: 30px 1fr; gap: 8px; padding: 8px; font-size: 14px; }
}
/* Menu: context groups (e.g. "APIs & integration") around the page entries */
.side-ctx { margin: 0 0 4px; }
.side-ctx { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.side-ctx:last-child { border-bottom: 0; }
.side-ctx > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 5px; border-radius: 8px; cursor: pointer;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #64748b; }
.side-ctx > summary::-webkit-details-marker { display: none; }
.side-ctx > summary:hover { color: var(--ink); background: var(--slate-bg); }
.side-ctx > summary::after { content: ""; margin-left: auto; flex: none; width: 6px; height: 6px; border-right: 2px solid #cbd5e1; border-bottom: 2px solid #cbd5e1;
  transform: rotate(-45deg); transition: transform .15s; }
.side-ctx[open] > summary::after { transform: rotate(45deg); }
.side-ctx-n { flex: none; background: var(--slate-bg); color: #64748b; border-radius: 999px; padding: 1px 7px; font-size: 10.5px; letter-spacing: 0; }
.side-ctx.has-current > summary { color: var(--blue); }
.side-ctx.has-current .side-ctx-n { background: var(--blue-bg); color: var(--blue); }
.side-ctx-body { padding-bottom: 4px; }
/* ===== Quick revise: panel, mind map, flashcards, quiz, revise mode (assets/revise.js) ===== */
.rv-panel { background: var(--card); border: 1px solid #c7d2fe; border-radius: 16px; padding: 14px 16px 16px; margin: 0 0 18px; box-shadow: 0 6px 20px rgba(79,70,229,.08); }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rv-title { font-weight: 800; font-size: 17px; color: var(--ink); }
.rv-title small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.rv-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #4338ca; cursor: pointer; user-select: none; }
.rv-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-track { width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .2s; flex: none; }
.rv-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.rv-switch input:checked + .rv-track { background: #4f46e5; }
.rv-switch input:checked + .rv-track::after { transform: translateX(16px); }
.rv-switch input:focus-visible + .rv-track { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.rv-tabs { display: flex; gap: 6px; margin: 12px 0 10px; overflow-x: auto; scrollbar-width: none; }
.rv-tabs::-webkit-scrollbar { display: none; }
.rv-tab { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 13.5px; font-weight: 600; color: #475569; cursor: pointer; }
.rv-tab:hover { border-color: #c7d2fe; color: #4338ca; }
.rv-tab.on { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.rv-body { min-height: 120px; outline: none; }
.rv-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rv-count { font-size: 13px; font-weight: 700; color: var(--muted); }
.rv-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-mini { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 9px; font: inherit; font-size: 12.5px; color: #475569; cursor: pointer; }
.rv-mini:hover, .rv-mini.on { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }
.rv-hint { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; text-align: center; }

/* flashcards */
.rv-fc { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; perspective: 1200px; font: inherit; text-align: left; }
.rv-fc-inner { display: grid; transition: transform .45s; transform-style: preserve-3d; }
.rv-fc.flipped .rv-fc-inner { transform: rotateY(180deg); }
.rv-fc-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; min-height: 190px; border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px; border: 1px solid #c7d2fe; }
.rv-fc-front { background: linear-gradient(135deg, #eef2ff, #faf5ff); }
.rv-fc-back { background: linear-gradient(135deg, #ecfdf5, #f0fdfa); border-color: #a7f3d0; transform: rotateY(180deg); }
.rv-fc-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6366f1; }
.rv-fc-back .rv-fc-tag { color: var(--green); }
.rv-fc-q { font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.rv-fc-a { font-size: 16px; line-height: 1.55; color: var(--ink); }
.rv-fc-tip { font-size: 12.5px; color: var(--muted); }
.rv-fc-link { font-size: 13px; font-weight: 600; }
.rv-fc-nav { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rv-nav, .rv-again, .rv-got { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; color: #475569; }
.rv-again { color: var(--amber); border-color: #fde68a; background: var(--amber-bg); }
.rv-got { color: #fff; background: #4f46e5; border-color: #4f46e5; }
.rv-nav:hover { background: var(--slate-bg); }
.rv-again:hover { background: #fef3c7; }
.rv-got:hover { background: #4338ca; }

/* quiz */
.rv-prog { height: 6px; background: var(--slate-bg); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.rv-prog-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #a855f7); transition: width .3s; }
.rv-q { font-size: 18px; font-weight: 700; line-height: 1.4; margin: 6px 0 12px; color: var(--ink); }
.rv-opts { display: grid; gap: 8px; }
.rv-opt { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 11px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.rv-opt:hover:not(:disabled) { border-color: #a5b4fc; background: #eef2ff; }
.rv-opt:disabled { cursor: default; }
.rv-letter { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--slate-bg); font-size: 12.5px; font-weight: 800; color: #475569; }
.rv-opt.right { border-color: #34d399; background: var(--green-bg); }
.rv-opt.right .rv-letter { background: var(--green); color: #fff; }
.rv-opt.wrong { border-color: #fca5a5; background: var(--red-bg); }
.rv-opt.wrong .rv-letter { background: var(--red); color: #fff; }
.rv-expl { margin-top: 10px; font-size: 14.5px; line-height: 1.5; border-radius: 10px; }
.rv-expl.ok, .rv-expl.bad { padding: 10px 12px; }
.rv-expl.ok { background: var(--green-bg); }
.rv-expl.bad { background: var(--amber-bg); }
.rv-next { display: block; margin: 12px 0 0 auto; }
.rv-done { text-align: center; }
.rv-score { font-size: 46px; font-weight: 900; margin: 4px 0; }
.rv-score.ok { color: var(--green); } .rv-score.mid { color: var(--amber); } .rv-score.bad { color: var(--red); }
.rv-missed { text-align: left; display: inline-block; margin: 4px 0 6px; font-size: 14px; }

/* mind map */
.rv-mm { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px 46px; align-items: center; padding: 6px 0; }
.rv-mm-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.rv-mm-line { fill: none; stroke-width: 2.2; stroke-dasharray: 600; stroke-dashoffset: 600; animation: rv-draw .9s ease-out forwards; }
@keyframes rv-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .rv-mm-line { animation: none; stroke-dashoffset: 0; } .rv-fc-inner { transition: none; } }
.s-blue { stroke: #93c5fd; } .s-purple { stroke: #c4b5fd; } .s-teal { stroke: #5eead4; } .s-amber { stroke: #fcd34d; } .s-green { stroke: #6ee7b7; } .s-pink { stroke: #f9a8d4; } .s-red { stroke: #fca5a5; }
.rv-mm-col { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.rv-mm-root { position: relative; z-index: 1; max-width: 190px; text-align: center; padding: 14px 16px; border-radius: 16px; font-weight: 800; font-size: 15px; line-height: 1.3;
  color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed); box-shadow: 0 8px 22px rgba(79,70,229,.3); }
.rv-mm-root small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.rv-mm-node { display: block; text-decoration: none; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-left-width: 5px; border-radius: 12px; padding: 8px 11px; transition: transform .15s, box-shadow .15s; }
.rv-mm-node:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.rv-mm-node b { display: block; font-size: 14px; line-height: 1.3; }
.rv-mm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rv-mm-chips i { font-style: normal; font-size: 11.5px; background: var(--slate-bg); color: #475569; border-radius: 999px; padding: 1px 7px; }
.rv-mm-node.c-blue { border-left-color: #3b82f6; } .rv-mm-node.c-purple { border-left-color: #8b5cf6; } .rv-mm-node.c-teal { border-left-color: #14b8a6; }
.rv-mm-node.c-amber { border-left-color: #f59e0b; } .rv-mm-node.c-green { border-left-color: #10b981; } .rv-mm-node.c-pink { border-left-color: #ec4899; } .rv-mm-node.c-red { border-left-color: #ef4444; }
.rv-mm.stack { grid-template-columns: 1fr; gap: 10px; padding-left: 14px; border-left: 3px solid #c7d2fe; }
.rv-mm.stack .rv-mm-root { grid-row: 1; max-width: none; text-align: left; }
.rv-mm.stack .rv-mm-lines { display: none; }

/* how to answer */
.rv-h { margin: 12px 0 6px; font-size: 14.5px; color: var(--ink); }
.rv-h:first-child { margin-top: 2px; }
.rv-steps { counter-reset: rv; list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.rv-steps li { counter-increment: rv; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: start; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.rv-steps li::before { content: counter(rv); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: #4f46e5; color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.rv-steps b { font-size: 14.5px; }
.rv-steps span { font-size: 13.5px; color: #475569; }
.rv-traps { margin: 0; padding-left: 20px; font-size: 14px; }
.rv-traps li::marker { content: "✗  "; color: var(--red); }
.rv-says { display: grid; gap: 8px; }
.rv-say { border-left: 3px solid #a5b4fc; padding: 2px 0 2px 10px; }
.rv-say a { font-weight: 700; font-size: 13.5px; text-decoration: none; }
.rv-say p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; }

/* revise mode: hide the long text, show the compact card per section */
.rv-card { margin: 10px 0 14px; }
.rv-card .rv-card-pts { display: none; }
body.rv-mode .rv-card .rv-card-pts { display: block; }
.rv-card-h { display: block; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #4338ca; margin-bottom: 2px; }
body.rv-mode section.concept > *:not(h2):not(.rv-card) { display: none !important; }
body.rv-mode .rv-card { display: block; margin-top: 6px; }
body.rv-mode section.concept { padding-bottom: 14px; }
.rv-card-say { background: #eef2ff; border-radius: 10px; padding: 9px 12px; margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0 0 8px; }
.rv-chips-h { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.rv-chip { font-size: 12.5px; font-weight: 600; background: #f5f3ff; color: #5b21b6; border: 1px solid #ddd6fe; border-radius: 999px; padding: 2px 9px; }
.rv-card-pts { margin: 0; padding-left: 20px; font-size: 14.5px; }
.rv-card-pts li { margin: 2px 0; }
.rv-pill { display: none; position: fixed; right: 14px; bottom: 14px; z-index: 40; border: 0; border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 700;
  color: #fff; background: #4f46e5; box-shadow: 0 6px 18px rgba(79,70,229,.35); cursor: pointer; }
body.rv-mode .rv-pill { display: block; }

@media (max-width: 640px) {
  .rv-panel { padding: 12px; }
  .rv-tabs { flex-wrap: wrap; overflow: visible; }
  .rv-tab { flex: 1 1 calc(50% - 3px); text-align: center; padding: 7px 8px; }
  .rv-fc-q { font-size: 17px; }
  .rv-q { font-size: 16.5px; }
  .rv-opt { font-size: 14.5px; }
  .rv-fc-face { min-height: 170px; padding: 14px; }
}
@media print { .rv-panel, .rv-pill { display: none !important; } }
/* Quick revise: hub page (revise.html) and the menu link */
.side-quick { display: block; margin-top: 8px; text-align: center; text-decoration: none; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed); border-radius: 8px; padding: 6px 0; }
.side-quick:hover, .side-quick.on { filter: brightness(1.08); }
.rv-picker { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 4px; }
.rv-presets { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.rv-groups { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
@media (min-width: 900px) { .rv-groups { max-height: none; } }
.rv-group { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rv-group-h { border: 0; background: none; padding: 2px 4px 2px 0; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.rv-group-h:hover { color: #4338ca; }
.rv-pick { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; color: #475569; cursor: pointer; }
.rv-pick span { font-weight: 800; color: var(--muted); margin-right: 5px; }
.rv-pick.on { background: #eef2ff; border-color: #a5b4fc; color: #3730a3; }
.rv-pick.on span { color: #4f46e5; }
.rv-hub-tools { margin: -2px 0 10px; }
.rv-select { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; max-width: 100%; }
.rv-cram { margin: 6px 0 16px; }
.rv-cram h3 { font-size: 16px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid #e0e7ff; }
.rv-cram h3 a { text-decoration: none; color: var(--ink); }
.rv-cram-row { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.rv-cram-row > b { font-size: 14.5px; }
.rv-cram-row p { margin: 2px 0 5px; font-size: 14px; line-height: 1.5; }
.rv-cram-row .rv-chips { margin: 0; }
.rv-howto { margin-top: 0; }
@media print {
  .rv-panel.rv-hub { display: block !important; border: 0; box-shadow: none; padding: 0; }
  .rv-hub .rv-picker, .rv-hub .rv-tabs, .rv-hub .rv-bar, .rv-hub-tools, .rv-howto, nav.top, header.hero, footer { display: none !important; }
  .rv-cram-row { break-inside: avoid; }
}
.hero .toc a.rv-toc-hot { background: #4f46e5; color: #fff; border-color: #4f46e5; font-weight: 700; }

/* Interview-first layout: folded .NET boxes, LinkedIn posts and full behavioural answers */
.rv-card-say { border-left: 4px solid #6366f1; }
details.fold { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
details.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; font-size: 14px; font-weight: 700; color: #334155; border-radius: 10px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; margin-left: auto; font-size: 18px; line-height: 1; color: var(--muted); }
details.fold[open] > summary::after { content: "\2212"; }
details.fold > summary:hover { background: #f8fafc; }
details.fold > summary small { font-weight: 500; color: var(--muted); font-size: 12.5px; }
details.fold > .dotnet, details.fold > .post { margin: 0 10px 10px; }
details.fold-dotnet { border-color: #c4b5fd; border-left: 5px solid #512bd4; background: #faf8ff; }
details.fold-dotnet > summary { color: #512bd4; }
details.fold-post { border-color: #bfdbfe; border-style: dashed; background: #f8fbff; }
details.fold-post > summary { color: #1d4ed8; }
.bq-why.solo { grid-template-columns: 1fr; }
.bq-skel { background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid #16a34a; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 14.5px; line-height: 1.55; }
.bq-skel h5 { margin: 0 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: #15803d; }
.bq-skel p { margin: 0; }
details.fold-star > summary { color: #7c3aed; }
details.fold-star > .bq-phi { margin: 0 10px 8px; border-radius: 10px; padding: 10px 12px; font-size: 14.5px; }
details.fold-star > .star { margin: 0 10px 10px; }
@media print { details.fold > summary::after { content: none; } }details.fold-star > .bq-phi h5 { margin: 0 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
details.fold-star > .bq-phi p { margin: 4px 0; }
details.fold > summary { flex-wrap: nowrap; }
details.fold > summary::after { flex: none; }
@media (max-width: 480px) { details.fold > summary small { display: none; } }

/* ---------- Colour themes: one per menu group (set by assets/menu.js as data-theme) ---------- */
:root, [data-theme] { --th: #4338ca; --th2: #7c3aed; }
[data-theme="fundamentals"] { --th: #1d4ed8; --th2: #6366f1; }
[data-theme="scale"]        { --th: #0369a1; --th2: #06b6d4; }
[data-theme="data"]         { --th: #0f766e; --th2: #10b981; }
[data-theme="apis"]         { --th: #6d28d9; --th2: #c084fc; }
[data-theme="architecture"] { --th: #b45309; --th2: #f59e0b; }
[data-theme="security"]     { --th: #be123c; --th2: #fb7185; }
[data-theme="ai"]           { --th: #a21caf; --th2: #ec4899; }
[data-theme="domain"]       { --th: #15803d; --th2: #84cc16; }
[data-theme="engineering"]  { --th: #512bd4; --th2: #8b5cf6; }
[data-theme="interview"]    { --th: #c2410c; --th2: #fb923c; }
:root, [data-theme] {
  --th-bg: color-mix(in srgb, var(--th) 9%, #fff);
  --th-line: color-mix(in srgb, var(--th) 24%, #fff);
  --th-grad: linear-gradient(90deg, var(--th), var(--th2));
  --th-grad-ink: linear-gradient(90deg, var(--th), color-mix(in srgb, var(--th) 72%, var(--th2))); /* behind white text */
}

/* page background: soft tinted glows */
body {
  background:
    radial-gradient(900px 460px at 100% -5%, color-mix(in srgb, var(--th2) 14%, transparent), transparent 70%),
    radial-gradient(760px 420px at -5% 40%, color-mix(in srgb, var(--th) 9%, transparent), transparent 70%),
    linear-gradient(180deg, #f8f9fd 0%, #f1f3f9 100%);
  background-attachment: fixed;
}

/* frosted top bar with a colour line */
nav.top { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); }
nav.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--th-grad); opacity: .8; }
nav.top a { color: var(--th); }
nav.top a:hover { background: var(--th-bg); }

/* header: theme gradient, accent bar and a soft glow */
.hero { background: radial-gradient(240px 220px at 100% 0, color-mix(in srgb, var(--th2) 20%, transparent), transparent 70%), linear-gradient(115deg, color-mix(in srgb, var(--th) 14%, #fff) 0%, color-mix(in srgb, var(--th2) 9%, #fff) 55%, #fff 100%); border-color: var(--th-line); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--th) 45%, transparent); }
.hero::before { background: linear-gradient(180deg, var(--th), var(--th2)); width: 5px; }
.hero .kicker { color: var(--th); box-shadow: 0 0 0 1px var(--th-line) inset; }
.hero .toc a { border-color: var(--th-line); }
.hero .toc a:hover { background: var(--th-bg); color: var(--th); }

/* section cards: colour strip on top, softer shadow, themed numbers and sub-headings */
section.concept, .qa-wrap { position: relative; border-color: #e5e8f1; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -18px rgba(15, 23, 42, .18); }
section.concept::before, .qa-wrap::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; border-radius: 16px 16px 0 0; background: var(--th-grad); }
section.concept > h2 .num { background: var(--th-grad-ink); color: #fff; box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--th) 60%, transparent); }
section.concept h3 { color: var(--th); }
section.concept h3::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--th-grad); vertical-align: middle; margin: -2px 8px 0 0; }
.oneliner { border-left-color: var(--th2); background: linear-gradient(90deg, var(--th-bg), transparent 85%); border-radius: 0 10px 10px 0; }
.rv-card-say { border-left-color: var(--th); background: var(--th-bg); }
.rv-card-h { color: var(--th); }
.rv-chip { background: #fff; color: var(--th); border-color: var(--th-line); }

/* quick revise panel picks up the theme */
.rv-panel { border-color: var(--th-line); background: linear-gradient(180deg, var(--th-bg) 0, #fff 150px); }
.rv-tab.on { background: var(--th-grad-ink); border-color: var(--th); }
.rv-tab:hover { border-color: var(--th-line); color: var(--th); }

/* pager and footer */
.pager a { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s, transform .15s; }
.pager a { color: var(--th); }
.pager a:hover { border-color: var(--th); transform: translateY(-1px); }
footer { margin-top: 10px; color: #fff; background: var(--th-grad-ink); }
footer a { color: #fff; }

/* left menu: coloured dot per group, current group in its colour */
.side-ctx > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--th-grad); }
.side-ctx.has-current > summary { color: var(--th); }
.side-ctx.has-current .side-ctx-n { background: var(--th-bg); color: var(--th); }
.side-grp.current > summary { background: var(--th-bg); }
.side-grp.current .side-page { color: var(--th); }

/* roadmap cards: group colour strip and label */
.sec-card { position: relative; overflow: hidden; border-color: #e5e8f1; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -18px rgba(15, 23, 42, .2); }
.sec-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--th-grad); }
.sec-card .sn { color: var(--th); }
.sec-card:hover { border-color: var(--th-line); }

@media print { body { background: #fff; } nav.top::after, section.concept::before, .qa-wrap::before { display: none; } footer { background: none; color: var(--muted); } }#path .flow .n[data-theme] { background: var(--th-bg); border-color: var(--th); color: var(--th); font-weight: 700; }
.rv-mm-root { background: var(--th-grad-ink); }
.rv-switch { color: var(--th); }
.rv-switch input:checked + .rv-track { background: var(--th); }
/* Animation speed control (assets/viz.js) */
.spd { position: fixed; left: 14px; bottom: 14px; z-index: 20; display: flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--th-line, var(--line));
  border-radius: 999px; box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .3); font-size: 12.5px; }
.spd-lab { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.spd button { border: 0; background: none; font: inherit; font-weight: 700; color: var(--th, var(--blue)); min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 999px; cursor: pointer; line-height: 1; }
.spd button:hover:not(:disabled) { background: var(--th-bg, var(--blue-bg)); }
.spd button:disabled { color: #cbd5e1; cursor: default; }
.spd .spd-step { font-size: 18px; }
.spd .spd-val { min-width: 54px; font-variant-numeric: tabular-nums; color: var(--ink); }
.spd.off { border-color: #f59e0b; }
.spd.off .spd-val { color: #b45309; }
@media (min-width: 1100px) { body.side-open .spd { left: 304px; } }
@media (max-width: 760px) { .spd { left: 8px; bottom: 8px; } }
@media print { .spd { display: none !important; } }
/* Menu search results (assets/menu.js) */
.side-results { flex: 1; overflow-y: auto; padding: 8px 8px 40px; overscroll-behavior: contain; }
.side-results-h { font-size: 12px; color: var(--muted); padding: 2px 8px 8px; }
.side-hit { display: block; padding: 7px 10px 8px; margin-bottom: 4px; border-radius: 9px; border: 1px solid transparent; border-left: 3px solid var(--th, var(--blue)); text-decoration: none; color: var(--ink); }
.side-hit:hover, .side-hit:focus { background: var(--th-bg, var(--blue-bg)); border-color: var(--th-line, var(--line)); border-left-color: var(--th, var(--blue)); outline: none; }
.side-hit-t { display: block; font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.side-hit-p { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.side-hit-k { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.side-hit-k i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--th, var(--blue)); background: #fff; border: 1px solid var(--th-line, var(--line)); border-radius: 999px; padding: 0 7px; }

/* Last-minute topic page (topic.html, assets/topic.js) */
.tp-one { font-size: 16px; }
.tp-sec h2 { font-size: 19px; }
.tp-say-text { font-size: 17px; line-height: 1.55; background: var(--th-bg, var(--blue-bg)); border-left: 4px solid var(--th, var(--blue)); border-radius: 10px; padding: 12px 14px; margin: 4px 0 12px; }
.tp-pts { margin: 0; padding-left: 20px; }
.tp-pts li { margin: 3px 0; }
.tp-notes-pick .box { margin-top: 12px; }
.tp-fc { border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; background: #fff; }
.tp-fc > summary { cursor: pointer; padding: 9px 12px; font-weight: 700; list-style: none; }
.tp-fc > summary::-webkit-details-marker { display: none; }
.tp-fc > summary::before { content: "Q"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--th, var(--blue)); color: #fff; font-size: 11px; }
.tp-fc[open] > summary { border-bottom: 1px dashed var(--line); }
.tp-fc-a { padding: 9px 12px 11px 40px; color: #334155; }
.tp-quiz .rv-body { padding: 0; }
.tp-fold-body { padding: 4px 12px 12px; }
.tp-pager { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tp-pager a { font-weight: 700; text-decoration: none; color: var(--th, var(--blue)); }
.tp-next { margin-left: auto; text-align: right; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip { font-size: 13px; text-decoration: none; color: #334155; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 10px; }
.tp-chip:hover { border-color: var(--th-line, var(--line)); background: var(--th-bg, var(--blue-bg)); }
.tp-chip.on { background: var(--th, var(--blue)); border-color: var(--th, var(--blue)); color: #fff; font-weight: 700; }
@media print { .tp-quiz, .tp-more, .hero .toc { display: none !important; } }.side-btns[hidden], .side-list[hidden], .side-results[hidden] { display: none; }
.hero .kicker a { color: inherit; text-decoration: none; }