/* Browse page for the toolkit cards (/tools). Layout only; card styles come from cards.css. Session 2026-09-29. */
:root { --g-ink:#182634; --g-hero:#0f2a40; --g-accent:#1f5f8b; --g-gold:#d9a441; --g-muted:#5b6b7a; --g-line:#d8e0e6; --g-bg:#f6f8fa; --g-ui:"Segoe UI", system-ui, Arial, sans-serif; --g-serif:Georgia, "Times New Roman", serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--g-bg); color:var(--g-ink); font:17px/1.55 var(--g-serif); }
.g-wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
.g-hero { background:var(--g-hero); color:#fff; padding:40px 0 34px; background-image:radial-gradient(1200px 300px at 20% -20%, rgba(159,208,232,.18), transparent 60%); }
.g-kicker { font-family:var(--g-ui); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g-gold); margin:0 0 8px; }
.g-hero h1 { font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin:0 0 10px; line-height:1.15; }
.g-lede { max-width:760px; margin:0; color:#dfe8ef; font-size:1.05rem; }
.g-controls { background:#fff; border:1px solid var(--g-line); border-radius:10px; padding:14px 18px; margin:22px 0 18px; box-shadow:0 1px 2px rgba(20,40,60,.04); }
.g-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.g-row2 { margin-top:12px; gap:12px 18px; }
.g-chips button { font:600 .84rem/1 var(--g-ui); padding:8px 12px; border-radius:999px; border:1px solid var(--g-line); background:#f6f8fa; color:var(--g-ink); cursor:pointer; }
.g-chips button:hover { border-color:var(--g-accent); }
.g-chips button.on { background:var(--g-accent); border-color:var(--g-accent); color:#fff; }
.g-chips button .n { opacity:.7; font-weight:400; margin-left:4px; }
.g-field { display:flex; flex-direction:column; gap:4px; font:.8rem var(--g-ui); color:var(--g-muted); }
.g-field select, .g-field input { font:1rem var(--g-ui); padding:7px 10px; border:1px solid var(--g-line); border-radius:6px; min-width:180px; background:#fff; }
.g-grow { flex:1 1 240px; }
.g-grow input { width:100%; }
.g-check { font:.85rem var(--g-ui); color:var(--g-muted); display:flex; gap:6px; align-items:center; margin-top:16px; }
.g-clear { font:.85rem var(--g-ui); margin-top:16px; padding:7px 12px; border-radius:6px; border:1px solid var(--g-line); background:#fff; cursor:pointer; }
.g-count { font:.85rem var(--g-ui); color:var(--g-muted); margin-top:10px; }
.g-group { margin:26px 0 8px; }
.g-group h2 { font:700 1.15rem var(--g-ui); margin:0 0 4px; color:var(--g-ink); }
.g-group p { margin:0 0 12px; color:var(--g-muted); font-size:.95rem; }
.g-foot { margin:36px 0 40px; font:.85rem/1.5 var(--g-ui); color:var(--g-muted); border-top:1px solid var(--g-line); padding-top:14px; }
.g-empty { padding:30px; text-align:center; color:var(--g-muted); font-family:var(--g-ui); }
@media (max-width:640px) { .g-hero { padding:28px 0 24px; } .g-field select, .g-field input { min-width:0; width:100%; } .g-field { flex:1 1 100%; } }
.g-signin { font:.85rem var(--g-ui); color:var(--g-ink); margin-top:6px; padding:8px 12px; background:#f6f8fa; border-radius:6px; }