/* WunderPaint glossary: components layered on top of docs.css.
   Every glossary page links docs.css first, then this file. */

:root{
	--gl-maxw:980px;
	--ai:#0ea5a3; --ai-soft:#e6f7f6;
	--chip:#eef1f5; --chip-ink:#48515e;
}

/* The reference content wants a touch more width than the prose docs. */
.gl .wrap{max-width:var(--gl-maxw)}

/* ---- cross-page nav (top of every sidebar) ---- */
.side .xnav{margin:2px 0 10px}
.side .xnav a{display:flex;align-items:center;gap:9px;padding:7px 10px}
.side .xnav a .gi{width:15px;text-align:center;opacity:.75;font-size:13px}
.side .xnav a.cur{background:var(--accent);color:#fff}
.side .xnav a.cur .gi{opacity:1}
.side .xsep{height:1px;background:var(--side-line);margin:12px 8px}
.side .backlink{color:var(--side-mut);font-size:12.5px;padding:6px 10px;display:block}
.side .backlink:hover{color:#fff;text-decoration:none}

/* ---- global search dropdown ---- */
.search{position:relative}
.gl-results{position:absolute;top:46px;left:0;width:min(560px,86vw);max-height:70vh;overflow:auto;
	background:#12151d;border:1px solid #2b3140;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.5);
	padding:6px;display:none;z-index:60}
.gl-results.open{display:block}
.gl-results .r{display:block;padding:8px 10px;border-radius:7px;color:#c3cad6}
.gl-results .r:hover,.gl-results .r.sel{background:#1d2230;text-decoration:none}
.gl-results .r .rt{color:#fff;font-size:14px;font-weight:600}
.gl-results .r .rt mark{background:#3b4a2a;color:#e9f5d6}
.gl-results .r .rd{color:#8b93a3;font-size:12.5px;margin-top:2px;line-height:1.4;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gl-results .r .rp{float:right;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
	color:#7d8697;border:1px solid #2b3140;border-radius:20px;padding:2px 8px;margin-left:8px}
.gl-results .r .rk{font-size:10px;color:#5c6470;margin-right:6px}
.gl-results .none{padding:14px 12px;color:#7d8697;font-size:13.5px}
.gl-results .hint{padding:8px 12px;color:#5c6470;font-size:11.5px;border-top:1px solid #20242f;margin-top:4px}

/* ---- section blocks ---- */
.sec-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.sec-count{font-size:12px;color:var(--muted);font-weight:600;background:var(--bg-alt);
	border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.tag.ai{background:var(--ai-soft);color:var(--ai)}
.tag.local{background:#eef7ea;color:#3d7a2a}

/* ---- terms (the controls) ---- */
.terms{margin:14px 0 6px;border-top:1px solid var(--line)}
.term{padding:14px 2px 14px;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.term:target{background:var(--accent-soft);border-radius:8px;padding-left:12px;padding-right:12px;
	box-shadow:inset 3px 0 0 var(--accent)}
.term-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px}
.term-h h4{margin:0;font-size:15.5px;letter-spacing:-.1px}
.term-h .anchor{opacity:0;color:var(--muted);font-weight:400;font-size:13px;text-decoration:none}
.term:hover .term-h .anchor{opacity:1}
.term p{margin:6px 0 0;font-size:14.5px}
.term .tip{color:var(--muted);font-size:13.5px;margin-top:6px}
.term .tip b{color:var(--accent-2);text-transform:none;font-size:13.5px;font-weight:650}

/* meta pills (Range / Default / Options / Shortcut ...) */
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.meta .m{font-size:12px;color:var(--muted);background:var(--bg-alt);border:1px solid var(--line);
	border-radius:6px;padding:3px 9px;line-height:1.3}
.meta .m b{color:var(--ink);font-weight:650;font-size:11px;letter-spacing:.02em;text-transform:uppercase;margin-right:5px}
kbd.k{font-family:var(--mono);font-size:.8em;background:#fff;border:1px solid #cfd4dc;border-bottom-width:2px;
	border-radius:5px;padding:1px 6px;color:#333}

/* ---- related-topics chips ---- */
.related{margin:16px 0 2px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.related .rl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:650;margin-right:2px}
.related a{font-size:13px;background:var(--accent-soft);color:var(--accent-2);border:1px solid #dbe3ff;
	border-radius:20px;padding:4px 11px}
.related a:hover{background:#dfe7ff;text-decoration:none}

/* ---- hub / overview page ---- */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:22px 0}
.hubcard{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff;color:inherit}
.hubcard:hover{text-decoration:none;border-color:var(--accent);box-shadow:0 10px 30px rgba(20,30,60,.08);transform:translateY(-1px)}
.hubcard .hc-ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-2);
	display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:11px}
.hubcard h3{margin:0 0 4px;font-size:16px}
.hubcard p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.hubcard .hc-n{color:var(--accent-2);font-size:12px;font-weight:650;margin-top:9px;display:inline-block}

/* A-Z quick jump on the hub */
.azbar{display:flex;flex-wrap:wrap;gap:5px;margin:16px 0 8px}
.azbar a{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px;
	border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--accent-2)}
.azbar a:hover{background:var(--accent);color:#fff;text-decoration:none;border-color:var(--accent)}
.azbar a.off{color:#c2c8d1;pointer-events:none;background:var(--bg-alt)}
.azgroup{margin:20px 0}
.azgroup h3{border-bottom:1px solid var(--line);padding-bottom:6px}
.azlist{columns:2;column-gap:34px;margin:10px 0}
.azlist a{display:block;padding:3px 0;font-size:14px;break-inside:avoid}
.azlist a .ap{color:var(--muted);font-size:11.5px}

/* diagram figures with callouts */
figure.diagram{margin:20px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt);
	padding:14px;overflow-x:auto}
figure.diagram svg{display:block;max-width:100%;height:auto;margin:0 auto}
figure.diagram figcaption{color:var(--muted);font-size:13px;margin-top:10px;text-align:center}

/* small helper */
.muted{color:var(--muted)}
.pagelead{color:var(--muted);font-size:16px;margin:4px 0 18px;max-width:74ch}
@media(max-width:960px){ .azlist{columns:1} }

/* section screenshots (2026-07-27): same framing as figure.diagram */
figure.shot{margin:16px 0 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt);padding:10px}
figure.shot img{display:block;width:auto;max-width:100%;height:auto;max-height:660px;border-radius:calc(var(--radius) - 4px)}
figure.shot figcaption{color:var(--muted);font-size:13px;margin-top:8px;text-align:center}