/* Category colours, home-page guides strip. Loaded after app.css; versioned (?v=1) so changes always reach returning visitors. */
.tabs .tab{box-shadow:inset 0 -3px 0 var(--c,transparent)}
.tab[href$="weight/"],.hubcard[href$="weight/"]{--c:#dd2b0f}
.tab[href$="temperature/"],.hubcard[href$="temperature/"]{--c:#f5a000;--ct:#201e1d}
.tab[href$="length/"],.hubcard[href$="length/"]{--c:#4458d6}
.tab[href$="distance/"],.hubcard[href$="distance/"]{--c:#0b8577}
.tab[href$="fluid/"],.hubcard[href$="fluid/"]{--c:#0c75ab}
.tab[href$="speed/"],.hubcard[href$="speed/"]{--c:#7a35e0}
.tab[href$="pixels/"],.hubcard[href$="pixels/"]{--c:#c42a82}
.tab[href$="area/"],.hubcard[href$="area/"]{--c:#23863a}
.pickhint{margin:0 0 10px;font-size:12.5px}
.hubcard{position:relative;padding-left:22px;box-shadow:inset 7px 0 0 var(--c,var(--color-accent))}
.hubcard::before{content:attr(data-u);position:absolute;top:12px;right:12px;min-width:38px;height:38px;padding:0 6px;display:grid;place-items:center;background:var(--c);color:var(--ct,#fff);font:800 13px/1 var(--font-heading);letter-spacing:-.02em}
.hubcard:hover{background:color-mix(in srgb,var(--c) 11%,#fff)}
.hubcard em{color:color-mix(in srgb,var(--c) 62%,#000)}
.hubcard.is-default{box-shadow:inset 7px 0 0 var(--c),inset 0 0 0 2px var(--c)}
.gs{background:#fff;border-bottom:2px solid var(--color-divider);padding:14px 16px 16px}
.gs-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.gs-head b{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);font-weight:700}
.gs-head a{font-size:14px;font-weight:600}
.gs-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px 16px}
.gs-grid a{display:block;text-decoration:none;color:var(--color-text);padding:2px 0}
.gs-grid a strong{display:block;font-size:15px;line-height:1.3;font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--color-text) 25%,transparent);text-underline-offset:3px}
.gs-grid a:hover strong{text-decoration-color:var(--color-accent);color:var(--color-accent-700)}
.gs-grid span{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--color-neutral-800)}
@media(max-width:1000px){.gs-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.gs-grid{grid-template-columns:1fr 1fr}.gs-grid span{display:none}.gs-grid a:nth-child(n+5){display:none}}