/* Mobile-first baseline lifted from patterns/ui/code/base.css (dogfooding). */
:root{
  --paper:#ffffff; --paper-2:#f5f7fa; --ink:#14181d; --ink-2:#5b6673;
  --line:#e2e7ee; --accent:#2f6f4f; --accent-ink:#ffffff; --warn:#8a5a00;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.06);
  --tap:48px; --tap-min:44px;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem;
  --maxw:64rem;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#14181d; --paper-2:#1b2027; --ink:#e8edf3; --ink-2:#9aa7b5;
         --line:#2a323c; --accent:#7fd1a5; --accent-ink:#0f1317; --warn:#e0b256;
         --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35); }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-ink);
  padding:.9rem 1.25rem; border-radius:0 0 var(--radius) 0;
  font-weight:650; text-decoration:none;
}
.skip-link:focus{left:0}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-4)}
.top{background:var(--paper-2); border-bottom:1px solid var(--line); padding:var(--sp-6) 0 var(--sp-4)}
h1{margin:0; font-size:1.5rem; letter-spacing:-.01em}
h2{font-size:1.15rem; margin:var(--sp-8) 0 var(--sp-2)}
.sub{margin:var(--sp-1) 0 var(--sp-4); color:var(--ink-2); font-size:.9rem}
.searchrow{position:relative; display:flex}
#q{
  flex:1; min-height:var(--tap); padding:0 2.5rem 0 var(--sp-4);
  font-size:16px; /* 16px stops iOS zoom-on-focus */
  color:var(--ink); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); appearance:none;
}
#q:focus{outline:2px solid var(--accent); outline-offset:1px}
#clear{
  position:absolute; right:var(--sp-1); top:0; height:var(--tap); width:var(--tap);
  border:0; background:transparent; color:var(--ink-2); font-size:1.4rem; cursor:pointer;
}
.controls{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3)}
.chips{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.chip{
  min-height:var(--tap-min); padding:0 var(--sp-4); border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  font-size:.85rem; touch-action:manipulation;
}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.sortlabel{
  display:flex; align-items:center; gap:var(--sp-2); font-size:.8rem; color:var(--ink-2);
  margin-left:auto;
}
#sort{
  min-height:var(--tap-min); padding:0 var(--sp-3); border-radius:var(--radius);
  border:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:.85rem;
}
#sort:focus-visible, .chip:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.count{margin:var(--sp-3) 0 0; font-size:.8rem; color:var(--ink-2)}
.clear-filters{
  margin-top:var(--sp-2); min-height:var(--tap-min); padding:0 var(--sp-3);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  color:var(--accent); font-size:.8rem; cursor:pointer; touch-action:manipulation;
}
.cat{margin-top:var(--sp-8)}
.cat > h2{margin-bottom:var(--sp-1)}
.cat .blurb{margin:0 0 var(--sp-4); color:var(--ink-2); font-size:.9rem}
.card{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-2);
  box-shadow:var(--shadow); margin-bottom:var(--sp-3); overflow:hidden;
}
.card > summary{
  list-style:none; cursor:pointer; padding:var(--sp-4); min-height:var(--tap);
  display:flex; flex-direction:column; gap:var(--sp-1); touch-action:manipulation;
}
.card > summary::-webkit-details-marker{display:none}
.card > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.name{font-weight:650; font-size:1rem}
.summary{color:var(--ink-2); font-size:.9rem}
.meta{display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-1)}
.tag{
  font-size:.7rem; letter-spacing:.02em; padding:.15rem .5rem; border-radius:999px;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-2);
}
.tag.src{border-color:var(--accent); color:var(--accent)}
.tag.cx-high{color:var(--warn); border-color:var(--warn)}
.tag.date{border-style:dashed; opacity:.75; font-variant-numeric:tabular-nums}
.body{padding:0 var(--sp-4) var(--sp-4); border-top:1px solid var(--line)}
.body dt{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin-top:var(--sp-4)}
.body dd{margin:var(--sp-1) 0 0}
.body ul{margin:var(--sp-1) 0 0; padding-left:1.1rem}
.body li{margin:var(--sp-1) 0; font-size:.9rem}
.body a{color:var(--accent); min-height:var(--tap-min); display:inline-flex; align-items:center}
.copy-btn{
  border:1px solid var(--line); background:var(--paper); color:var(--accent);
  border-radius:var(--radius); padding:.35em .75em; font-size:.85rem; cursor:pointer;
  min-height:var(--tap-min); touch-action:manipulation; display:inline-flex; align-items:center;
}
.copy-btn.copied{color:var(--accent-ink); background:var(--accent); border-color:var(--accent)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em;
     background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:.05em .35em}
.filelist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem}
.filelist li{
  font-size:.85rem; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:6px; padding:.3rem .6rem;
}
.filelist code{border:0; background:transparent; padding:0}
.lessons{padding-bottom:var(--sp-6)}
.lesson-group{margin-bottom:var(--sp-4)}
.lesson-group h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin:0 0 var(--sp-1)}
.lesson-group li{font-size:.88rem; margin:var(--sp-1) 0}
.foot{border-top:1px solid var(--line); margin-top:var(--sp-8); padding-top:var(--sp-4);
      padding-bottom:var(--sp-8); color:var(--ink-2); font-size:.8rem}
.warn{color:var(--warn)}
.empty{padding:var(--sp-8) 0; text-align:center; color:var(--ink-2)}
.linklike{
  background:transparent; border:0; padding:0; color:var(--accent); text-decoration:underline;
  cursor:pointer; font:inherit;
}
mark{background:var(--accent); color:var(--accent-ink); border-radius:3px; padding:0 .1em}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}


/* --- "Has live demo" filter + tag ---------------------------------------- */
.chip-demo[aria-pressed="true"] {
  border-color: #7ee787;
  color: #7ee787;
}
.tag.demo {
  border-color: #7ee787;
  color: #7ee787;
  font-weight: 600;
}