/* =========================================================
   /tools hub: only the layout the tool kit in article.css can't express.
   Markup: content/pages/tools.json · Logic: custom/js/tools-hub.js
   ========================================================= */
.tools-hub { --hub-miss: #E0605C; --hub-part: var(--warn); }
.block:has(> .tools-hub) { margin-top: 0; } /* sits right under the hero */

.tools-hub-meta { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); font-size: 1.4rem; color: var(--text-subtle); }
.tools-hub-search { margin-top: var(--space-20); max-width: 48rem; }
.tools-hub-empty:not(:empty) { margin-top: var(--space-20); color: var(--text-muted); }

/* Grid of tool cards (buttons that reuse .post-card) */
.tools-hub-grid { list-style: none; padding: 0; margin-top: var(--space-32); }
@media (min-width: 1100px) { .tools-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tools-hub-grid > li { display: flex; }
.tools-hub-grid > li[hidden] { display: none; }
.tools-hub-card { width: 100%; text-align: start; cursor: pointer; }
.tools-hub-card[aria-expanded="true"] {
  background:
    linear-gradient(var(--bg-card)) padding-box,
    linear-gradient(var(--cta-main), var(--cta-main)) border-box;
}
.tools-hub-card-title { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.4; }
.tools-hub-card-desc { font-size: var(--fs-small); color: var(--text-muted); }

/* Panel */
.tools-hub-panel { max-width: none; margin-top: var(--space-32); }
.tools-hub-panel:focus-visible { outline-offset: 4px; border-radius: var(--space-20); }
.tools-hub-panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-16); }
.tools-hub-panel-head h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.3; }
.tools-hub-panel-head p { margin-top: var(--space-8); max-width: 64rem; }
.tools-hub-body > * + * { margin-top: var(--space-24); }
.tools-hub-body .tool-actions { align-items: center; }
.tools-hub-body .tool-stat-value { overflow-wrap: anywhere; }
.tools-hub-result:empty { margin: 0; }
.tools-hub-result > * + *, .tools-hub-report > * + * { margin-top: var(--space-16); }

/* Progress and score bars */
.tools-hub-progress, .tools-hub-score { display: flex; align-items: center; gap: var(--space-16); }
.tools-hub-score { max-width: 42rem; }
.tools-hub-bar { flex: 1; height: 0.6rem; border-radius: 1rem; background: var(--line); overflow: hidden; }
.tools-hub-bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--cta-main); transition: width 0.3s; }

/* Questions */
.tools-hub-questions { display: grid; gap: var(--space-12); }
.tools-hub-q { padding: var(--space-16) var(--space-20); border-radius: var(--space-16); border: 1px solid var(--line); background: var(--bg-main); }
.tools-hub-q-text { display: flex; align-items: baseline; gap: var(--space-12); line-height: 1.6; }
.tools-hub-q-text strong, .tools-hub-ask { display: block; }
.tools-hub-ask { font-size: var(--fs-small); color: var(--text-muted); }
.tools-hub-q .tool-options { margin-top: var(--space-12); }
.tools-hub-num { flex: none; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--link); }

/* Results */
.tools-hub-report-title { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.3; }
.tools-hub-report > .tools-hub-sub { margin-top: var(--space-24); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.tools-hub-gaps { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.tools-hub-chip { display: inline-flex; align-items: center; gap: var(--space-8); padding: 0.6rem var(--space-12); border-radius: var(--space-40); border: 1px solid var(--line); background: var(--bg-secondary); font-size: 1.4rem; }
.tools-hub-chip::before { content: ''; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--hub-part); }
.tools-hub-level { font-weight: var(--fw-bold); color: var(--hub-part); }
.tools-hub-chip[data-level="miss"]::before { background: var(--hub-miss); }
.tools-hub-chip[data-level="miss"] .tools-hub-level { color: var(--hub-miss); }
.tools-hub-priorities { list-style: none; padding: 0; }
.tools-hub-priorities li { display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--space-12); padding-block: var(--space-16); border-top: 1px solid var(--line); }
.tools-hub-priorities .tools-hub-num { font-size: 2.4rem; line-height: 1.2; }
.tools-hub-priorities p { font-size: var(--fs-small); color: var(--text-muted); }
.tools-hub-priorities a, .tools-hub-links { font-size: var(--fs-small); }
.tools-hub-links { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-20); }

@media (prefers-reduced-motion: reduce) { .tools-hub-bar > span { transition: none; } }