/* TOOLBOX — composed from the Field Notes component library. */

.page-toolbox main { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.toolbox-header { padding: clamp(var(--sp-7), 5vw, var(--sp-9)) 0 var(--sp-5); }
.toolbox-header h1 { margin-bottom: var(--sp-4); }
.toolbox-header p { color: var(--ink-soft); max-width: 62ch; }

/* Category */
.category { margin-bottom: 0; }
.cat-header { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-6) 0 var(--sp-4); }
.cat-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; color: var(--ink); }
.cat-title::after { content: ""; display: inline-block; width: 40px; height: 3px; background: var(--clay); border-radius: 2px; margin-left: var(--sp-3); vertical-align: middle; }
.cat-count { font-size: var(--fs-small); color: var(--faint); margin-left: auto; }

/* Tool rows */
.tool-list { display: grid; gap: 0; }
.tool-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); align-items: start; padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.tool-row:first-child { border-top: none; }
.tool-name-row { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: 5px; flex-wrap: wrap; }
.tool-name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }
.tool-badge { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 500; padding: 3px 9px; border-radius: var(--r-pill); background: var(--field-soft); color: var(--field); }
.tool-badge.blue { background: var(--clay-soft); color: var(--clay-deep); }
.tool-badge.muted { background: var(--paper-sunk); color: var(--muted); }
.tool-desc { font-size: var(--fs-small); color: var(--muted); line-height: 1.55; }
.tool-meta { padding-top: 4px; }
.tool-link { font-size: var(--fs-small); font-weight: 500; color: var(--field); white-space: nowrap; }
.tool-link:hover { color: var(--clay); text-decoration: none; }

/* Honest box */
.honest-box { background: var(--paper-card); border: 1px solid var(--line); border-left: 3px solid var(--clay); border-radius: var(--r); padding: var(--sp-5) var(--sp-6); margin-top: var(--sp-7); }
.honest-label { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); }
.honest-text { color: var(--ink-soft); line-height: 1.6; }

@media (max-width: 560px) {
  .tool-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .cat-count { display: none; }
}