/* wb.css — Workbench R1: the connected library (WORKBENCH-DESIGN.md §0.1).
   Extends style.css tokens. Serif = the teacher's words ONLY. */

/* app frame */
.wb-nav { display:flex; gap:22px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line);
  font-family:system-ui, sans-serif; font-size:.9rem; }
.wb-nav a { color:var(--muted); text-decoration:none; }
.wb-nav a.on { color:var(--ink); border-bottom:2px solid var(--gold); padding-bottom:8px; margin-bottom:-11px; }
.wb-nav .spacer { flex:1; }
.wb-badge { background:var(--gold); color:var(--bg); border-radius:99px; font-size:.7rem;
  padding:0 7px; font-weight:700; vertical-align:2px; }
.wb-wrap { max-width:1280px; margin:0 auto; padding:0 16px 64px; font-family:system-ui, sans-serif; }
.wb-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; }
.wb-layout.no-side { grid-template-columns:minmax(0,1fr); }
@media (max-width:1180px){ .wb-layout { grid-template-columns:minmax(0,1fr); } .wb-side{order:-1} }

/* the teacher's words */
.verbatim { font-family:Georgia, "Noto Serif", serif; font-size:1.02rem; line-height:1.7;
  border-left:2px solid var(--gold); padding-left:14px; margin:8px 0; }
.verbatim mark { background:#4a3c14; color:var(--ink); }

/* evidence card (2-badge rule) */
.ev { border-bottom:1px solid var(--line); padding:14px 0; }
.ev-head { display:flex; gap:10px; align-items:baseline; font-size:.82rem; color:var(--muted); flex-wrap:wrap; }
.ev-head .t-title { color:var(--ink); font-size:.9rem; }
.badge { border:1px solid var(--line); border-radius:5px; padding:1px 8px; font-size:.72rem;
  color:var(--muted); cursor:pointer; user-select:none; }
.badge.ok { border-color:#3c5a3c; color:#8fbc8f; }
.badge.gold { border-color:var(--gold); color:var(--gold); }
.badge-detail { display:none; font-size:.75rem; color:var(--muted); padding:6px 0 0; }
.ev.open .badge-detail { display:block; }
.ev-foot { display:flex; gap:14px; font-size:.76rem; color:var(--muted); margin-top:6px; flex-wrap:wrap; }
.ev-foot a { color:var(--link); text-decoration:none; }
.ev-actions { display:flex; gap:8px; margin-top:8px; opacity:.55; transition:opacity .12s; }
.ev:hover .ev-actions, .ev:focus-within .ev-actions { opacity:1; }
.ev-actions button { margin:0; padding:3px 12px; font-size:.76rem; }

/* chips */
.chip { display:inline-block; border:1px solid var(--line); border-radius:99px; padding:1px 10px;
  font-size:.76rem; color:var(--muted); cursor:pointer; margin:0 6px 6px 0; text-decoration:none; }
.chip.on { border-color:var(--gold); color:var(--gold); }
.chip small { opacity:.7; }
a.chip:hover { color:var(--gold); }

/* the tray: 48px rail ⇄ 300px drawer */
#tray { position:fixed; right:0; top:0; bottom:0; z-index:40; display:flex; font-family:system-ui,sans-serif; }
#tray .rail { width:48px; background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:64px; }
#tray .rail button { border:none; margin:0; padding:6px 4px; font-size:.62rem; color:var(--muted);
  background:none; display:flex; flex-direction:column; align-items:center; gap:2px; width:44px; }
#tray .rail button:hover { color:var(--gold); background:none; }
#tray .rail .cnt { background:var(--gold); color:var(--bg); border-radius:99px; padding:0 6px;
  font-size:.68rem; font-weight:700; }
#tray .drawer { width:0; overflow:hidden; transition:width .15s; background:var(--panel);
  border-left:1px solid var(--line); }
#tray.open .drawer { width:300px; overflow-y:auto; padding:64px 16px 24px; }
#tray .drawer h3 { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:18px 0 6px; }
#tray .drawer .q { font-size:.95rem; color:var(--ink); }
.meter { height:4px; background:var(--line); border-radius:2px; margin:6px 0; }
.meter > div { height:4px; background:var(--gold); border-radius:2px; }

/* accordion (talk connections) */
.acc-sec { border-top:1px solid var(--line); }
.acc-sec > .acc-h { display:flex; justify-content:space-between; padding:10px 2px; cursor:pointer;
  font-size:.84rem; color:var(--ink); }
.acc-sec > .acc-h .n { color:var(--muted); }
.acc-sec > .acc-b { display:none; padding-bottom:12px; }
.acc-sec.open > .acc-b { display:block; }
.acc-preview { font-size:.75rem; color:var(--muted); padding:0 2px 8px; }

/* selection action bar */
#selbar { position:absolute; display:none; background:var(--panel); border:1px solid var(--gold);
  border-radius:8px; padding:4px 6px; z-index:50; box-shadow:0 4px 18px rgba(0,0,0,.5); }
#selbar button { margin:0 2px; padding:3px 10px; font-size:.76rem; border-color:var(--line); }

/* small utilities */
.h-sub { font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:20px 0 8px; }
.rowline { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--line); font-size:.88rem; }
.rowline .r { color:var(--muted); font-size:.76rem; white-space:nowrap; }
.stamp2 { font-size:.72rem; color:var(--muted); font-family:ui-monospace,monospace; text-decoration:none; }
.stamp2:hover { color:var(--gold); }
.wb-note { font-family:system-ui,sans-serif; font-size:.8rem; color:var(--muted);
  border:1px dashed var(--line); border-radius:8px; padding:8px 12px; }
.filters-pop { display:none; position:absolute; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:12px; z-index:30; }
.filters-pop.open { display:block; }