/* Tools hub styles.
   Gate K: the hub is a native SPA view, so these rules live in a real
   stylesheet the generic asset loader can pick up, and every one of them is
   scoped to .hh-tool-hub — the wrapper the server writes around the extracted
   body — exactly as Gate B scoped the Chart Pattern Scanner.

   Deliberately NOT carried over from the old inline <style>:
     * the four :root token blocks — the SPA already defines all 13 variables
       the hub uses, so inheriting them makes the hub follow the app's theme
       instead of shipping a second, competing palette.
     * .topbar / .topbar-brand / .theme-btn / .top-badge — those belong to the
       standalone shell (tools/_shell.html), which a native hub never renders.
     * .wrap — the SPA's #main is the layout container now; the extraction
       yields <main>'s inner HTML, so the wrapper element itself is gone. */

.hh-tool-hub, .hh-tool-hub *, .hh-tool-hub *::before, .hh-tool-hub *::after{box-sizing:border-box;margin:0;padding:0}
.hh-tool-hub{color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.55;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
.hh-tool-hub a{color:inherit;text-decoration:none}
.hh-tool-hub button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.hh-tool-hub :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

/* .page-head is the one class the hub shares with the SPA, whose rule is
   display:flex;justify-content:space-between — that put the description
   beside the H1 instead of under it. The h1/p rules below already win on
   specificity; only the container layout needed reclaiming. */
.hh-tool-hub .page-head{display:block;margin-bottom:26px}
.hh-tool-hub .page-breadcrumb{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.hh-tool-hub .page-head h1{font-size:26px;font-weight:700;letter-spacing:-.022em}
.hh-tool-hub .page-head p{margin-top:4px;color:var(--text-dim);font-size:14px}

/* Two fixed columns, not auto-fill: the reference layout keeps a predictable
   pair per row so a lone card (Glossary) sits in the left column instead of
   stretching across the content width. */
.hh-tool-hub .tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* Horizontal card: icon tile left, title + description right. Height is driven
   by the content so the row stays compact rather than becoming a panel. */
.hh-tool-hub .tool-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:15px;
  padding:15px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  transition:border-color .15s,box-shadow .15s}
.hh-tool-hub .tool-card:hover{border-color:var(--gold-soft);box-shadow:var(--shadow-sm)}
.hh-tool-hub .tool-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);flex:none}
.hh-tool-hub .tool-ico svg{width:21px;height:21px}
.hh-tool-hub .tool-body{min-width:0;display:block}
.hh-tool-hub .tool-card h3{font-size:15.5px;font-weight:600;letter-spacing:-.011em;color:var(--text)}
.hh-tool-hub .tool-card p{margin-top:3px;font-size:13px;color:var(--text-dim);line-height:1.45}

.hh-tool-hub .section-label{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);margin:26px 0 11px}
.hh-tool-hub .section-label:first-of-type{margin-top:0}
.hh-tool-hub .disclaimer{margin-top:26px;font-size:12px;color:var(--text-faint);line-height:1.5}

/* One column below the two-up breakpoint; the card keeps its horizontal shape. */
@media(max-width:820px){.hh-tool-hub .tool-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
  .hh-tool-hub .page-head h1{font-size:23px}
  .hh-tool-hub .tool-card{padding:14px 15px;gap:13px}
  .hh-tool-hub .tool-ico{width:42px;height:42px;border-radius:11px}
  .hh-tool-hub .tool-ico svg{width:19px;height:19px}
}