/* QRC Resource Directory styles.
   Layout: one reading column; a "What do you need?" index of needs, then sections of annotated entries.
   To re-skin for a Lawrence-hosted page, change only the tokens in the first :root block and the two dark blocks. */
:root{
  --bg:#f5f6f8; --surface:#ffffff; --ink:#18212b; --muted:#56616d; --rule:#d8dde3; --soft:#eaeef3;
  --accent:#1f4f8f;      /* links, focus, section numbers */
  --pick:#9a6a12;        /* "QRC pick" mark */
  --pick-bg:#fbf3e2;
  --display:"IBM Plex Serif", Georgia, "Times New Roman", serif;
  --body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11161c; --surface:#181f27; --ink:#e3e8ee; --muted:#9aa6b2; --rule:#2c3640; --soft:#1f2832;
    --accent:#8db4ef; --pick:#e2b45a; --pick-bg:#2a2416; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#11161c; --surface:#181f27; --ink:#e3e8ee; --muted:#9aa6b2; --rule:#2c3640; --soft:#1f2832;
  --accent:#8db4ef; --pick:#e2b45a; --pick-bg:#2a2416; color-scheme:dark;
}

.qrcdir, .qrcdir *{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); margin:0}
.qrcdir{font-family:var(--body); font-size:16.5px; line-height:1.55; max-width:920px; margin:0 auto; padding-inline:16px; padding-block:28px 72px}
.qrcdir a{color:var(--accent)}
.qrcdir :focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.qrcdir h1,.qrcdir h2,.qrcdir h3{font-family:var(--display); line-height:1.2; text-wrap:balance; margin:0}

/* header */
.qd-eyebrow{font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.qd-head h1{font-size:clamp(1.9rem,4.6vw,2.6rem); font-weight:600; margin-top:.35rem}
.qd-lede{font-size:1.08rem; max-width:62ch; margin:.7rem 0 0}
.qd-meta{font-family:var(--mono); font-size:.78rem; color:var(--muted); margin-top:.6rem}

/* controls */
.qd-controls{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--bg); border-bottom:1px solid var(--rule); padding-block:12px; margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center}
.qd-search{flex:1 1 260px; min-width:0; position:relative}
.qd-search input{width:100%; font:inherit; font-size:1rem; padding:9px 12px; border:1px solid var(--rule); border-radius:6px; background:var(--surface); color:var(--ink)}
.qd-chips{display:flex; flex-wrap:wrap; gap:6px}
.qd-chip{font:inherit; font-size:.86rem; padding:5px 11px; border:1px solid var(--rule); border-radius:999px; background:var(--surface); color:var(--ink); cursor:pointer}
.qd-chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--surface)}
.qd-toggle{display:flex; align-items:center; gap:6px; font-size:.88rem; color:var(--muted); cursor:pointer}
.qd-viewrow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
.qd-label{font-size:.82rem; color:var(--muted)}
.qd-chipn{font-family:var(--mono); font-size:.74rem; opacity:.75; margin-left:2px}
.qd-banner{margin:14px 0 0; padding:10px 14px; background:var(--soft); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; max-width:70ch}
.qd-count{font-family:var(--mono); font-size:.8rem; color:var(--muted); flex-basis:100%}

/* needs index */
.qd-needs{margin-top:26px}
.qd-needs h2{font-size:1.3rem; font-weight:600}
.qd-group{margin-top:14px}
.qd-group h3{font-family:var(--body); font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.qd-needgrid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px}
.qd-needgrid a{display:block; height:100%; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:10px 12px}
.qd-needgrid a:hover{border-color:var(--accent)}
.qd-needgrid b{display:block; font-family:var(--display); font-weight:600; font-size:.98rem; color:var(--accent)}
.qd-needgrid span{display:block; font-size:.86rem; color:var(--muted); margin-top:2px}
.qd-needgrid em{font-style:normal; font-family:var(--mono); font-size:.74rem; color:var(--muted)}

/* sections */
.qd-section{margin-top:40px; scroll-margin-top:110px}
.qd-section > header{border-bottom:2px solid var(--ink); padding-bottom:8px}
.qd-section h2{font-size:1.45rem; font-weight:600}
.qd-need{font-style:italic; color:var(--muted); margin:.25rem 0 0}
.qd-blurb{margin:.35rem 0 0; max-width:68ch}
.qd-list{list-style:none; margin:0; padding:0}
.qd-entry{padding:16px 0; border-bottom:1px solid var(--rule); display:grid; gap:4px}
.qd-entry.is-pick{background:linear-gradient(90deg,var(--pick-bg),transparent 70%); padding-left:12px; margin-left:-12px; border-left:3px solid var(--pick)}
.qd-title{font-family:var(--display); font-size:1.12rem; font-weight:600}
.qd-title a{text-decoration-thickness:1px; text-underline-offset:3px}
.qd-by{font-size:.88rem; color:var(--muted)}
.qd-tags{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0}
.qd-tag{font-size:.74rem; padding:1px 7px; border:1px solid var(--rule); border-radius:4px; color:var(--muted); background:var(--surface); white-space:nowrap}
.qd-tag.type{color:var(--ink); font-weight:600}
.qd-tag.lu{color:var(--accent); border-color:var(--accent); font-weight:600}
.qd-tag.pick{color:var(--pick); border-color:var(--pick); font-weight:600}
.qd-note{margin:2px 0 0; max-width:70ch}
.qd-start{margin:0; font-size:.92rem; max-width:70ch}
.qd-start b{font-weight:600}
.qd-checked{font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.qd-empty{padding:18px 0; color:var(--muted)}

/* footer */
.qd-about{margin-top:56px; border-top:2px solid var(--ink); padding-top:14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px 32px; font-size:.94rem}
.qd-about > div{min-width:0}
.qd-about h2{font-size:1.1rem; font-weight:600; margin-bottom:.3rem}
.qd-about ul{padding-left:1.1rem; margin:.3rem 0}
.qd-about p{margin:.3rem 0}

@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
@media (max-width:520px){ .qd-section{scroll-margin-top:170px} }

/* ---------- v0.2 navigation: home topics, topic pages, folded extras ---------- */
.qd-controls{position:static; border-bottom:0; padding-block:0; margin-top:18px}
.qd-person{margin:16px 0 0; padding:12px 14px; background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--accent); border-radius:0 6px 6px 0; max-width:none}
.qd-person b{font-weight:600}
.qd-ask{font-size:1.35rem; font-weight:600; margin-top:28px}
.qd-topics{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.qd-topics a{display:block; height:100%; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:14px 14px 12px}
.qd-topics a:hover,.qd-topics a:focus-visible{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.qd-topics b{display:block; font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--accent); line-height:1.25}
.qd-topics span{display:block; font-size:.85rem; color:var(--muted); margin-top:4px}
.qd-others{margin:22px 0 0; font-size:.92rem; color:var(--muted)}
.qd-back{margin:18px 0 0; font-size:.92rem}
.qd-back a{text-decoration:none}
.qd-topichead{margin-top:10px; border-bottom:2px solid var(--ink); padding-bottom:10px}
.qd-topichead h2{font-size:1.6rem; font-weight:600}
.qd-sub{font-family:var(--body); font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:22px 0 4px}
.qd-more{margin-top:18px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); padding:0 14px}
.qd-more summary{cursor:pointer; padding:12px 0; font-weight:600; color:var(--accent)}
.qd-more[open] summary{border-bottom:1px solid var(--rule)}
.qd-more .qd-entry:last-child{border-bottom:0}
.qd-entry.is-compact .qd-title{font-size:1rem}
.qd-entry.is-compact .qd-note{font-size:.93rem}
.qd-toc{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.qd-toc a{display:inline-block; font-size:.85rem; padding:4px 10px; border:1px solid var(--rule); border-radius:999px; background:var(--surface); text-decoration:none}
.qd-where{font-size:.76rem; letter-spacing:.06em; text-transform:uppercase}
.qd-where a{text-decoration:none; color:var(--muted)}
.qd-plain{color:inherit; text-decoration:none}
.qd-count{flex-basis:auto; margin-top:16px}