/* notes.css - the shell the section notes share: hld, lld, hr, dsa-notes and,
   in part, the Design Lab. All five grew from one page, so all five carried a
   near-identical copy of this in their own <style> block, and the copies had
   started to drift (.leaf on one page, h4.leaf on the next, a source badge
   defined here but not there). One file now, so a fix lands everywhere.

   Colours come from tokens.css. Nothing here picks a hex except the source
   badges, which are other people's brand colours, and the code chrome, which
   has to match the highlight.js theme rather than the page. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{font-family:"Inter","Inter Fallback",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}

/* ---------------- top bar ---------------- */
header.bar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--border)}
header.bar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.bar-in{max-width:1160px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.1rem;letter-spacing:-.01em}.logo span{color:var(--primary-ink)}
.sp{flex:1}
.btn{padding:9px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.85rem;font-weight:600;cursor:pointer;text-decoration:none;transition:border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.btn:hover{border-color:var(--primary);color:var(--primary-ink);transform:translateY(-1px)}
.menu-btn{display:none;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.05rem;cursor:pointer}

/* ---------------- layout: left rail + content ---------------- */
.layout{max-width:1160px;margin:0 auto;display:flex;gap:28px;padding:0 20px;min-height:100vh}
.side{width:238px;flex:0 0 238px;position:sticky;top:92px;align-self:flex-start;max-height:calc(100vh - 110px);overflow-y:auto;padding:20px 0 30px}
.note-search{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.86rem;outline:none;margin-bottom:10px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.note-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.search-results{display:none;flex-direction:column;gap:2px;margin-bottom:12px;max-height:46vh;overflow-y:auto}
.search-results.show{display:flex}
.search-results a{display:block;padding:7px 10px;border-radius:8px;text-decoration:none;border:1px solid var(--border);background:var(--surface)}
.search-results a:hover{border-color:var(--primary);background:var(--primary-soft)}
.search-results .r-name{display:block;font-size:.84rem;font-weight:600;color:var(--text);line-height:1.3}
.search-results .r-topic{display:block;font-size:.68rem;color:var(--primary-ink);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.search-empty{font-size:.82rem;color:var(--muted);padding:6px 10px}
.side-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;margin:0 0 10px 8px}
#topicNav{display:flex;flex-direction:column;gap:2px}
#topicNav a{display:block;padding:9px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:600;border:1px solid transparent;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);line-height:1.35}
#topicNav a:hover{background:var(--surface2);color:var(--text)}
#topicNav a.active{background:var(--primary-soft);color:var(--primary-ink);border-color:color-mix(in srgb,var(--primary) 30%, transparent)}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
.scrim.open{display:block}
main{flex:1;min-width:0;padding:24px 0 48px}

@media(max-width:860px){
  .layout{padding:0}
  .side{position:fixed;top:0;left:0;bottom:0;width:270px;background:var(--surface);border-right:1px solid var(--border);z-index:40;transform:translateX(-100%);transition:transform var(--t-slow) var(--ease);max-height:none;padding:20px 14px 30px;box-shadow:var(--shadow)}
  .side.open{transform:none}
  .menu-btn{display:inline-block}
  main{padding:16px 20px 40px}
}

/* ---------------- the note itself ---------------- */
h1.topic{font-size:clamp(1.9rem,5vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
.intro{color:var(--text);background:linear-gradient(120deg,var(--primary-soft),transparent);border:1px solid var(--border);border-left:4px solid var(--primary);padding:14px 16px;border-radius:12px;margin-bottom:26px;font-size:1rem;line-height:1.7}

.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 24px;margin-bottom:20px}
h2.pat,h3.sub,.leaf{scroll-margin-top:96px}
@keyframes flashbg{0%{background:var(--primary-soft)}100%{background:transparent}}
.flash{animation:flashbg 1.6s var(--ease)}
h2.pat{font-size:1.4rem;font-weight:750;letter-spacing:-.01em;margin-bottom:6px;padding-bottom:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
h2.pat::before{content:"";width:9px;height:22px;border-radius:5px;background:linear-gradient(var(--primary),var(--accent-2))}
h3.sub{font-size:1.12rem;font-weight:700;margin:22px 0 6px;color:var(--text)}
.leaf{font-size:1.02rem;font-weight:650;margin:18px 0 6px;display:flex;align-items:center;gap:9px;color:var(--text)}
.leaf::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-2)}

.hint{font-size:.95rem;color:var(--text);background:var(--accent-2-soft);border-radius:11px;padding:12px 15px;margin:10px 0;line-height:1.65}
.hint b{font-weight:700}
.note{font-size:.95rem;color:var(--muted);margin:10px 0;line-height:1.7}
.note b{color:var(--text);font-weight:650}
.note code,.inl{font-family:"JetBrains Mono","JetBrains Mono Fallback",monospace;background:var(--surface2);padding:2px 6px;border-radius:5px;color:var(--primary-ink);font-size:.85rem}

/* ---------------- code, editor style ---------------- */
.codewrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:12px 0 14px;box-shadow:var(--shadow-sm)}
.codebar{display:flex;align-items:center;gap:7px;padding:9px 14px;background:var(--code-bar);border-bottom:1px solid #21262d}
.codebar .dot{width:11px;height:11px;border-radius:50%}
.codebar .lang{margin-left:auto;font-family:"JetBrains Mono","JetBrains Mono Fallback",monospace;font-size:.7rem;color:#8b949e;letter-spacing:.04em}
pre.code{margin:0;background:var(--code-bg);color:#c9d1d9;padding:15px 17px;font-family:"JetBrains Mono","JetBrains Mono Fallback",monospace;font-size:.82rem;line-height:1.7;overflow-x:auto;white-space:pre}
pre.code code{background:none!important;padding:0;font-size:inherit}
.langtabs{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
.langtabs button{font-family:"JetBrains Mono","JetBrains Mono Fallback",monospace;font-size:.7rem;color:#8b949e;background:none;border:0;padding:3px 9px;min-height:24px;border-radius:6px;cursor:pointer;letter-spacing:.02em;transition:color var(--t-fast),background var(--t-fast)}
.langtabs button:hover{color:#c9d1d9}
.langtabs button.on{color:#0d1117;background:#c9d1d9;font-weight:600}

/* ---------------- practice links ---------------- */
.qwrap{margin:14px 0 2px;padding-top:12px;border-top:1px dashed var(--border)}
.qhead{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:7px}
.qhead::before{content:"✍️"}
.probs{display:flex;flex-wrap:wrap;gap:9px}
.prob{display:inline-flex;align-items:center;gap:9px;text-decoration:none;padding:8px 13px;border-radius:10px;border:1px solid var(--border);background:var(--surface);font-size:.86rem;color:var(--text);transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.prob:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-sm)}
.tag{font-family:"JetBrains Mono","JetBrains Mono Fallback",monospace;font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:6px}
.tag.E{color:var(--e);background:var(--e-bg)}.tag.M{color:var(--m);background:var(--m-bg)}.tag.H{color:var(--h);background:var(--h-bg)}

/* source badges: other people's brand colours, each nudged until it clears
   4.5:1, so darker on light and lighter on dark */
.pn{font-family:"JetBrains Mono","JetBrains Mono Fallback",monospace;font-size:.74rem;color:var(--muted)}
.pn.gfg{color:#297b3d;font-weight:700}
.pn.edu{color:#5a5ddc;font-weight:700}
.pn.hi{color:#0a7885;font-weight:700}
.pn.gh{color:#7b52da;font-weight:700}
.pn.bb{color:#b05110;font-weight:700}
.pn.dg{color:#bc397a;font-weight:700}
.pn.cwa{color:#0a73a2;font-weight:700}
.pn.amzn{color:#9d5e00;font-weight:700}
.pn.exp{color:#2563eb;font-weight:700}
.pn.hbr{color:#b91c1c;font-weight:700}
.pn.lfy{color:#0b7a70;font-weight:700}
.pn.muse{color:#7c3aed;font-weight:700}
[data-theme="dark"] .pn.gfg{color:#419756}
[data-theme="dark"] .pn.edu{color:#797cf3}
[data-theme="dark"] .pn.hi{color:#0ea5b7}
[data-theme="dark"] .pn.gh{color:#986ff7}
[data-theme="dark"] .pn.bb{color:#f97316}
[data-theme="dark"] .pn.dg{color:#ec4899}
[data-theme="dark"] .pn.cwa{color:#0ea5e9}
[data-theme="dark"] .pn.amzn{color:#ff9900}
[data-theme="dark"] .pn.exp{color:#60a5fa}
[data-theme="dark"] .pn.hbr{color:#f87171}
[data-theme="dark"] .pn.lfy{color:#2dd4bf}
[data-theme="dark"] .pn.muse{color:#a78bfa}

.nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
footer{text-align:center;color:var(--muted);font-size:.82rem;padding:28px 20px 54px}
footer a{color:var(--primary-ink)}

@media(max-width:560px){ .pcard{padding:18px 16px} body{font-size:15px} }
@media print{header.bar,.nav,.btn,select,.prob input{display:none}body{background:#fff}a{color:#000}}