/* =========================================================================
   Tools Hub — styles (tools.css)
   The fifth surface. Accent --tools (teal/utility, distinct from gold
   Template and blue Impl). Reuses the shared OS tokens (--panel, --line,
   --tx2, --shadow, --font-mono) and the .pad / .sec-head chrome.
   ========================================================================= */
html[data-theme="dark"]      { --tools:#16B8A6; --tools-soft:#5FE3D2; }
html[data-theme="light"]     { --tools:#0E8C7E; --tools-soft:#13A595; }
html[data-theme="beige"]     { --tools:#0E8C7E; --tools-soft:#13A595; }
html[data-theme="blueprint"] { --tools:#5FE3D2; --tools-soft:#9CF2E7; }

/* surface head — match the impl sec-head but recolor the number chip */
.tl-num{ color:var(--tools); border-color:color-mix(in srgb,var(--tools) 38%,var(--line2)) }

/* category group */
.tl-group{ margin-top:26px }
.tl-group:first-of-type{ margin-top:18px }
.tl-group-head{ display:flex; align-items:center; gap:9px; margin:0 0 12px }
.tl-group-name{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--tx2) }
.tl-group-n{ font-size:11px; font-weight:600; color:var(--tools); background:color-mix(in srgb,var(--tools) 13%,transparent); padding:2px 9px; border-radius:999px }

/* tool grid */
.tl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px }

/* tool card — clickable, opens the brief */
.tl-card{
  display:flex; flex-direction:column; gap:8px; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:13px;
  padding:16px 16px 13px; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.tl-card:hover{ border-color:color-mix(in srgb,var(--tools) 48%,var(--line2)); transform:translateY(-2px); box-shadow:var(--shadow) }
.tl-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.tl-icon{ font-size:26px; line-height:1 }
.tl-name{ margin:2px 0 0; font-size:15px; font-weight:700; line-height:1.25; color:var(--tx) }
.tl-blurb{ margin:0; font-size:12.5px; line-height:1.45; color:var(--tx2); flex:1 }
.tl-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; padding-top:10px; border-top:1px solid var(--line) }
.tl-lead{ font-size:11px; color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tl-open{ display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700; color:var(--tools); flex:none }
.tl-briefbtn{ font:inherit; font-size:11px; font-weight:600; color:var(--tx2); background:none; border:1px solid var(--line2); border-radius:999px; padding:3px 10px; cursor:pointer; flex:none; transition:all .15s }
.tl-briefbtn:hover{ border-color:color-mix(in srgb,var(--tools) 45%,var(--line2)); color:var(--tools) }

/* state pill */
.tl-state{ font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:999px; border:1px solid transparent; flex:none; white-space:nowrap }
.tl-state--real    { color:var(--tools); background:color-mix(in srgb,var(--tools) 13%,transparent); border-color:color-mix(in srgb,var(--tools) 38%,transparent) }
.tl-state--rebuild { color:#E0853A; background:color-mix(in srgb,#E0853A 14%,transparent); border-color:color-mix(in srgb,#E0853A 40%,transparent) }
.tl-state--thin    { color:var(--tx2); background:color-mix(in srgb,var(--tx2) 11%,transparent); border-color:var(--line2) }