/* Velotrak website — Tools listing. Copied verbatim from the approved mockup (velotrak_page_tools.html); values come from
   velotrak_web_bible_v0_1.html. Don't edit values here without updating the bible. */

/* ---------- Tools listing ---------- */
.tl-hero{ padding:56px 0 8px; display:grid; gap:14px; max-width:720px; }
.tl-group{ margin-top:48px; }
.tl-group-h{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; padding-bottom:12px; box-shadow:0 1px 0 var(--line); }
.tl-group-h .n{ font-size:13px; color:var(--text-low); }
.tl-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
@media (max-width:960px){ .tl-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:760px){ .tl-grid{ grid-template-columns:minmax(0,1fr); } }

/* Every card is the same height: fixed art ratio, 3-line description, 4 features in 2 columns, footer pinned */
.tcard{ display:flex; flex-direction:column; gap:14px; padding:18px; color:inherit; text-decoration:none; height:100%;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.tcard:hover, .tcard:focus{ text-decoration:none; }
.tcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-panel), var(--hl-panel), 0 0 0 1px var(--line-strong); }
.tcard:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.tcard .art{ position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#1e1f22; box-shadow:var(--sunken), var(--sunken-edge); }
.tcard .art svg{ position:absolute; inset:0; width:100%; height:100%; }
.tcard .art .tbd{ position:absolute; left:10px; top:10px; }
.tcard .meta{ display:flex; gap:6px; }
.tcard .chip.type{ color:var(--accent-text); }
.tcard h3{ font-size:20px; line-height:1.3; font-weight:600; color:var(--text-hi); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcard .desc{ font-size:14px; line-height:1.5; color:var(--text-mid); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(14px*1.5*3); }
.tcard .feats{ padding-top:12px; border-top:1px solid var(--line); }
.tcard .feats h4{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-low); margin:0 0 8px; }
.tcard .feats ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.tcard .feats li{ font-size:13px; color:var(--text-mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:12px; position:relative; }
.tcard .feats li::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.tcard .go{ margin-top:auto; align-self:flex-end; font-size:14px; font-weight:600; color:var(--accent-text); display:inline-flex; align-items:center; gap:6px; }
.tcard .go span{ transition: transform var(--t-med) var(--ease-out); }
.tcard:hover .go span{ transform:translateX(3px); }
.tl-note{ margin-top:40px; }
@media (prefers-reduced-motion: reduce){ .tcard, .tcard .go span{ transition:none; } .tcard:hover{ transform:none; } }


/* Build addition (W1): the card art is a static image exported from the mockup's chart */
.tcard .art img{ position:absolute; inset:0; width:100%; height:100%; display:block; }