/* Carino Donate — the storefront skin of software.carino.systems.
   Copied from SoftwareCatalog/assets/css/main.css (2026-11-12) so the two
   pages look alike: its tokens, search head, facets, cards, banner, shelves
   and tiles. My List, command tooltips, toasts, the theme orb and the section
   scrubber were left out (Donate has none of them). Donate's own rules are
   in donate.css, after this file. */

/* ── Software Catalogue — two themes, one layout ───────────────
   carino-ui.css is linked first and stays untouched; this sheet lays an
   app-grid skin over it under its own --sc-* tokens. The base rules are the
   Colourful skin; Gold & Black is a token set plus a block of scoped component
   overrides appended near the end, so it wins at equal specificity:
     • Gold & Black (default; <html data-carino-theme="gold"> or no attribute):
       the Carino identity, near-black with gold used sparingly. Dark only.
     • Colourful (<html data-carino-theme="color">): light app-store skin,
       every category owns a colour; dark variant follows prefers-color-scheme
       (data-theme="light" on <html> opts out).
   The inline script in index.html picks the theme before first paint; the orb
   left of the navbar brand (main.js) switches it. */
:root {
    --sc-wrap: 1240px;
    --sc-bg: #eef3fc;            /* a pale blue page under white cards */
    --sc-surface: #ffffff;
    --sc-cover: #e8eef9;         /* the card cover and the featured banner */
    --sc-pill: #dfe7f4;
    --sc-pill-hv: #d3ddee;
    --sc-line: #d2dcec;
    --sc-line-2: #c4c7c5;
    --sc-text: #1f1f1f;
    --sc-text-2: #444746;
    --sc-text-3: #5f6368;
    --sc-primary: #0b57d0;
    --sc-domain: #188038;
    --sc-badge: #d93025;
    --sc-on-primary: #ffffff;
    --sc-primary-tonal: #d3e3fd;
    --sc-on-tonal: #041e49;
    --sc-hover: rgba(68, 71, 70, 0.08);
    --sc-shadow-1: 0 1px 2px rgba(60, 64, 67, .16), 0 1px 3px 1px rgba(60, 64, 67, .08);
    --sc-shadow-2: 0 1px 3px rgba(60, 64, 67, .22), 0 4px 10px 3px rgba(60, 64, 67, .12);
    --sc-tip-bg: #303134;
    --sc-tip-fg: #f1f3f4;
    --sc-radius: 16px;

    /* platform tints for the install chips: bg / fg */
    --p-windows-bg: #e8f0fe; --p-windows-fg: #174ea6;
    --p-mac-bg:     #eef0f2; --p-mac-fg:     #3c4043;
    --p-linux-bg:   #e6f4ea; --p-linux-fg:   #0d652d;

    /* app-tile hues (light → base): the seven category colours (blue, red,
       amber, green, purple, teal, pink), so a tile always belongs to the family */
    --h0a: #5e97f6; --h0b: #1a73e8;
    --h1a: #f07368; --h1b: #d93025;
    --h2a: #fbc02d; --h2b: #ea8600;
    --h3a: #4cc06b; --h3b: #1e8e3e;
    --h4a: #b373f0; --h4b: #8430ce;
    --h5a: #33c3d4; --h5b: #00838f;
    --h6a: #f06aa8; --h6b: #c2185b;
    color-scheme: light;
}

/* ── Category colours: c (fill), on (text on fill), t (tonal bg), tt (tonal text) ── */
.c-all          { --c: #3c4043; --on: #fff;    --t: #eef0f2; --tt: #3c4043; }
.c-highlights   { --c: #f9ab00; --on: #1f1f1f; --t: #fef3d0; --tt: #8a4b00; }
.c-carino       { --c: #4f5bd5; --on: #fff;    --t: #e8eafb; --tt: #3a44a8; }
.c-basic        { --c: #1a73e8; --on: #fff;    --t: #e3edfd; --tt: #1958b7; }
.c-general      { --c: #d93025; --on: #fff;    --t: #fce8e6; --tt: #a50e0e; }
.c-professional { --c: #188038; --on: #fff;    --t: #e2f3e7; --tt: #0d652d; }
.c-it-systems   { --c: #8430ce; --on: #fff;    --t: #f1e6fc; --tt: #7024b5; }
.c-security     { --c: #00838f; --on: #fff;    --t: #ddf3f5; --tt: #005f66; }
.c-reviewing    { --c: #c2185b; --on: #fff;    --t: #fce4ee; --tt: #a3134b; }

@media (prefers-color-scheme: dark) {
    :root[data-carino-theme="color"]:not([data-theme="light"]) {
        --sc-bg: #0e1420; --sc-surface: #172031; --sc-cover: #131b28;
        --sc-pill: #222c3d; --sc-pill-hv: #2c3850;
        --sc-line: #2a3549; --sc-line-2: #5f6368;
        --sc-text: #e3e3e3; --sc-text-2: #c4c7c5; --sc-text-3: #9aa0a6;
        --sc-primary: #a8c7fa; --sc-on-primary: #062e6f; --sc-domain: #81c995; --sc-primary-tonal: #004a77; --sc-on-tonal: #c2e7ff;
        --sc-hover: rgba(227, 227, 227, 0.08);
        --sc-shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --sc-shadow-2: 0 2px 6px 2px rgba(0, 0, 0, .45);
        --sc-tip-bg: #e3e3e3; --sc-tip-fg: #1f1f1f;
        --p-windows-bg: rgba(138, 180, 248, .14); --p-windows-fg: #a8c7fa;
        --p-mac-bg: rgba(227, 227, 227, .09); --p-mac-fg: #d5d7d9;
        --p-linux-bg: rgba(129, 201, 149, .14); --p-linux-fg: #9fdcaf;
        color-scheme: dark;
    }
    :root[data-carino-theme="color"]:not([data-theme="light"]) [class*="hue-"] { --art: var(--ta); }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-all          { --c: #e3e3e3; --on: #1f1f1f; --t: rgba(227,227,227,.09); --tt: #e3e3e3; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-highlights   { --c: #fdd663; --on: #1f1f1f; --t: rgba(253,214,99,.14); --tt: #fdd663; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-carino       { --c: #aab2f5; --on: #141a4a; --t: rgba(170,178,245,.15); --tt: #c3c9f8; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-basic        { --c: #8ab4f8; --on: #0b1f45; --t: rgba(138,180,248,.15); --tt: #a8c7fa; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-general      { --c: #f28b82; --on: #3b0907; --t: rgba(242,139,130,.15); --tt: #f6aea9; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-professional { --c: #81c995; --on: #072711; --t: rgba(129,201,149,.15); --tt: #a8dab5; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-it-systems   { --c: #c58af9; --on: #2a0a4a; --t: rgba(197,138,249,.15); --tt: #d7aefb; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-security     { --c: #78d9ec; --on: #00363d; --t: rgba(120,217,236,.14); --tt: #a1e4f2; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-reviewing    { --c: #ff8bcb; --on: #3e0021; --t: rgba(255,139,203,.14); --tt: #ffb0db; }
}

/* ── Base ─────────────────────────────────────────────────── */
:root { scrollbar-color: var(--sc-line-2) transparent; }
::-webkit-scrollbar-thumb { background: var(--sc-line-2); }
body { background: var(--sc-bg); color: var(--sc-text); font-size: 14px; }
a { text-decoration: none; color: var(--sc-primary); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--sc-wrap); margin: 0 auto; padding: 0 24px 24px; }

/* ── Shared navbar, re-skinned from the --sc-* tokens (both themes; its own
      CSS is injected later, so these carry `html body` to win) ──────── */
html body #carinoNav {
    --cn-bg: var(--sc-bg); --cn-border: var(--sc-line); --cn-text: var(--sc-text); --cn-muted: var(--sc-text-3);
    --cn-accent: var(--sc-primary);
    background: var(--sc-bg); border-bottom-color: transparent;
}
/* the clock's zone chip and the language menu's current row read the accent
   too (gold in Gold & Black, the one blue in Colourful) */
html body #carinoNav .clock-tz { color: var(--sc-on-primary); }
html body #cnLangBox button.active, html body #cnLangBox button.active .code { color: var(--sc-primary); }
/* the fleet's pale-gold "Carino" all but vanishes on the white Colourful
   bar (1.2:1); deepen the sweep there (>= 3.4:1 at its lightest) */
html:root[data-carino-theme="color"] body #carinoNav .brand-name { background-image: linear-gradient(130deg, #c26a06 0%, #b45309 55%, #92400e 100%); }
@media (prefers-color-scheme: dark) {
    :root[data-carino-theme="color"]:not([data-theme="light"]) body #carinoNav .brand-name { background-image: linear-gradient(130deg, #fef08a 0%, #eab308 50%, #b45309 100%); }
}
html body #carinoNav .app-tag { -webkit-text-fill-color: var(--sc-text-2); color: var(--sc-text-2); border-color: var(--sc-line); border-radius: 999px; padding: 3px 9px; }
html body #carinoNav .app-tag:hover { background: var(--sc-hover); border-color: var(--sc-line-2); }
html body #carinoNav .icon-btn { border-color: transparent; border-radius: 999px; color: var(--sc-text-2); }
html body #carinoNav .icon-btn:hover { background: var(--sc-hover); color: var(--sc-text); border-color: transparent; transform: none; box-shadow: none; }
html body #carinoNav .cn-more-menu { background: var(--sc-surface); border-color: var(--sc-line); box-shadow: var(--sc-shadow-2); border-radius: 12px; }
html body #cnLangBtn { border-color: var(--sc-line); color: var(--sc-text-2); border-radius: 999px; }
html body #cnLangBtn:hover { background: var(--sc-hover); color: var(--sc-text); border-color: var(--sc-line-2); }
html body #cnLangBox { background: var(--sc-surface); border-color: var(--sc-line); box-shadow: var(--sc-shadow-2); border-radius: 12px; }
html body #cnLangBox button { color: var(--sc-text); }
html body #cnLangBox button:hover { background: var(--sc-hover); color: var(--sc-text); }
/* the About popup: carino-navbar.js draws it for a black page; Colourful
   gives it this catalogue's own surfaces (Gold keeps the fleet's) */
:root[data-carino-theme="color"] body #carinoNav .cn-help { background: rgba(0, 0, 0, .42); }
:root[data-carino-theme="color"] body #carinoNav .cn-help-card { background: var(--sc-surface); border-color: var(--sc-line); box-shadow: var(--sc-shadow-2); }
:root[data-carino-theme="color"] body #carinoNav .cn-way { background: var(--sc-cover); border-color: var(--sc-line); }
:root[data-carino-theme="color"] body #carinoNav .cn-way:hover,
:root[data-carino-theme="color"] body #carinoNav .cn-way:focus-visible { background: var(--sc-primary-tonal); border-color: var(--sc-primary); }
:root[data-carino-theme="color"] body #carinoNav .cn-ab-page { background: color-mix(in srgb, var(--sc-primary) 12%, transparent); border-color: color-mix(in srgb, var(--sc-primary) 55%, transparent); }
:root[data-carino-theme="color"] body #carinoNav .cn-pill:hover,
:root[data-carino-theme="color"] body #carinoNav .cn-pill:focus-visible { background: var(--sc-hover); }


/* ── Sticky navbar and head ─────────────────────────────────────
   The navbar stays on screen at every width (carino-navbar.js); the head
   (search pill, category tabs) sticks under it. --nav-h is its height. */
:root { --nav-h: 60px; }
html body #carinoNav { z-index: 70; }
.sc-head {
    position: sticky; top: var(--nav-h); z-index: 60;
    background: var(--sc-bg); transition: box-shadow .2s;
}
.sc-head.stuck { box-shadow: 0 1px 0 var(--sc-line), 0 4px 12px -6px rgba(60, 64, 67, .25); }
.sc-head-in { max-width: var(--sc-wrap); margin: 0 auto; padding: 6px 24px 0; }
.sc-row1 { display: flex; align-items: center; gap: 20px; }


/* white pill on a hairline with a soft shadow; on focus its ring takes the
   picked category's colour (blue under "All") */
.sc-search {
    --ring: var(--c, var(--sc-primary));
    position: relative; flex: 1 1 auto; max-width: 720px; height: 50px;
    display: flex; align-items: center;
    background: var(--sc-surface); border: 1px solid var(--sc-line); border-radius: 999px;
    box-shadow: 0 1px 6px rgba(32, 33, 36, .1);
    transition: border-color .2s, box-shadow .2s;
}
.sc-search.c-all { --ring: var(--sc-primary); }
.sc-search:hover { border-color: transparent; box-shadow: 0 1px 6px rgba(32, 33, 36, .28); }
.sc-search:focus-within { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring), 0 1px 6px rgba(32, 33, 36, .2); }
.sc-search > i { position: absolute; left: 20px; color: var(--sc-text-3); font-size: 1rem; pointer-events: none; transition: color .2s; }
.sc-search:focus-within > i { color: var(--ring); }
.sc-find {
    width: 100%; height: 100%; border: 0; outline: 0; background: transparent;
    padding: 0 84px 0 52px; border-radius: 999px;
    font-family: var(--sans); font-size: 1rem; color: var(--sc-text);
}
.sc-find::placeholder { color: var(--sc-text-3); opacity: 1; }
.sc-find::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sc-find-clear {
    position: absolute; right: 10px; width: 34px; height: 34px; border-radius: 50%;
    border: 0; background: transparent; color: var(--sc-text-2); cursor: pointer; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center;
}
.sc-find-clear:hover { background: var(--sc-hover); }
.sc-find-clear:focus-visible { outline: 2px solid var(--sc-primary); }
.sc-kbd {
    position: absolute; right: 18px; pointer-events: none;
    background: var(--sc-surface); color: var(--sc-text-3); border-color: var(--sc-line-2);
    font-size: .7rem; padding: 1px 7px;
}
.sc-find:focus ~ .sc-kbd, .sc-find:not(:placeholder-shown) ~ .sc-kbd { display: none; }

.sc-stats { margin: 0 0 0 auto; flex: none; font-size: .76rem; line-height: 1.45; color: var(--sc-text-3); text-align: right; }
.sc-stats b { color: var(--sc-text); font-size: .95rem; font-weight: 700; }

/* category tabs: neutral pills with a coloured icon; hover tints them in
   their colour and only the picked one is filled, so the row stays calm */
.sc-tabs {
    display: flex; gap: 5px; padding: 10px 0 12px; overflow-x: auto; scrollbar-width: none;
}
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tabs[hidden] { display: none; }
.sc-tabs.wrap { flex-wrap: wrap; row-gap: 6px; overflow: visible; }
/* without the tabs under it, the search row keeps the same breathing room */
.sc-head-in:has(> .sc-tabs[hidden]) { padding-bottom: 12px; }
/* when the row scrolls (narrow screens, long translations) its far edge fades */
.sc-tabs.ovf { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.sc-tabs.ovf.at-end { -webkit-mask-image: none; mask-image: none; }
.fchip.cat-chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 7px 0 12px; border: 0; border-radius: 999px;
    background: var(--sc-pill); color: var(--sc-text-2);
    font-family: var(--sans); font-size: .84rem; font-weight: 600; letter-spacing: 0;
    transition: background .18s, color .18s, box-shadow .18s, filter .18s;
}
.fchip.cat-chip i { font-size: .82rem; color: var(--c); transition: color .18s; }
.fchip.cat-chip:hover, .fchip.cat-chip:focus-visible { border: 0; color: var(--tt); background: var(--t); }
.fchip.cat-chip:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.fchip.cat-chip.active, .fchip.cat-chip.active:hover { background: var(--c); color: var(--on); filter: none; box-shadow: var(--sc-shadow-1); }
.fchip.cat-chip.active i { color: var(--on); }
.cat-n {
    font-size: .7rem; font-weight: 700; min-width: 22px; padding: 1px 6px; border-radius: 999px; text-align: center;
    background: color-mix(in srgb, var(--sc-text) 7%, transparent); color: var(--sc-text-3);
}
.cat-chip:hover .cat-n { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--tt); }
.cat-chip.active .cat-n { background: color-mix(in srgb, var(--on) 22%, transparent); color: var(--on); }
/* no hits under the current search: dim the colour, not the whole tab, so
   the label still clears 4.5:1 (it stays a working control) */
.fchip.cat-chip.empty:not(.active):not(:hover):not(:focus-visible),
:root:not([data-carino-theme="color"]) .fchip.cat-chip.empty:not(.active):not(:hover):not(:focus-visible) { color: var(--sc-text-3); }
.fchip.cat-chip.empty:not(.active) i { opacity: .55; }
/* "All" gets a four-colour glyph, idle or picked */
.fchip.cat-chip.c-all i, .fchip.cat-chip.c-all.active i {
    background: conic-gradient(from -90deg, #4285f4 0 25%, #ea4335 0 50%, #fbbc04 0 75%, #34a853 0);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Facets: Material filter chips under the head ──────────── */
.sc-facets {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 4px 0 16px;
    font-family: var(--sans); font-size: .82rem;
}
.sc-facets .fchip-lbl { font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sc-text-3); margin-right: 2px; }
.sc-facets .fchip-sep { background: var(--sc-line); height: 20px; margin: 0 4px; }
.sc-facets .fchip {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px;
    border: 1px solid var(--sc-line-2); border-radius: 8px; background: transparent; color: var(--sc-text-2);
    font-family: var(--sans); font-size: .82rem; font-weight: 500;
    transition: background .15s, border-color .15s;
}
.sc-facets .fchip:hover, .sc-facets .fchip:focus-visible { background: var(--sc-hover); border-color: var(--sc-line-2); color: var(--sc-text); }
.sc-facets .fchip:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 1px; }
.sc-facets .fchip.active, .sc-facets .fchip[aria-pressed="true"] { background: var(--sc-primary-tonal); border-color: transparent; color: var(--sc-on-tonal); }
.sc-check { display: none; font-size: .78rem; }
.fchip.active .sc-check { display: inline; }
.fchip.active .sc-ficon { display: none; }
.sc-ficon { font-size: .9rem; color: var(--sc-text-3); }
/* the detected OS: its install buttons lead every card */
.mine-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-primary); margin-left: -1px; flex: none; }
.fchip.mine:not(.active) { border-color: color-mix(in srgb, var(--sc-primary) 45%, var(--sc-line-2)); }
.sc-facets .fchip.clear { border-style: solid; border-color: transparent; color: var(--sc-primary); font-weight: 600; }
.sc-facets .fchip.clear i { font-size: .75rem; }
.sc-facets .fchips-count { margin-left: 6px; color: var(--sc-text-3); font-size: .8rem; white-space: nowrap; }
.sc-facets .fchips-count b { color: var(--sc-text); }
.sc-how {
    flex: 1 1 0; min-width: 0; margin-left: 12px; text-align: right;
    color: var(--sc-text-3); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-how i { color: var(--sc-primary); margin-right: 5px; }

/* ── Results ───────────────────────────────────────────────── */
#results { min-height: 40vh; }
.panel-title { margin: 4px 0 14px; font-family: var(--display); font-weight: 700; font-size: 1.4rem; text-transform: none; letter-spacing: 0; color: var(--sc-text); }

.subcat-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 26px 0 12px;
    font-family: var(--display); font-size: 1.12rem; font-weight: 700; color: var(--sc-text);
    scroll-margin-top: calc(var(--nav-h) + 136px);
}
.subcat-divider:first-child { margin-top: 2px; }
.subcat-ic {
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--t); color: var(--c); font-size: .85rem;
}
.subcat-count {
    font-family: var(--sans); font-size: .72rem; font-weight: 700; color: var(--tt);
    background: var(--t); padding: 2px 9px; border-radius: 999px;
}

.sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 12px; padding-bottom: 6px; }

/* the card: a cover with the programme's icon in its colour (no tile
   behind it), then name + source, description, install chips */
.card.entry.sw {
    cursor: pointer; padding: 0; gap: 0; min-width: 0;
    background: var(--sc-surface); border: 1px solid var(--sc-line); border-radius: var(--sc-radius);
    transition: box-shadow .2s, border-color .2s, transform .2s;
}
.card.entry.sw:hover { background: var(--sc-surface); border-color: transparent; box-shadow: var(--sc-shadow-2); transform: translateY(-2px); }
.card.entry.sw.in-list { border-color: color-mix(in srgb, var(--sc-primary) 45%, transparent); background: color-mix(in srgb, var(--sc-primary-tonal) 28%, var(--sc-surface)); }

.sw-cover {
    position: relative; height: 108px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: calc(var(--sc-radius) - 1px) calc(var(--sc-radius) - 1px) 0 0;
    background: var(--sc-cover); border-bottom: 1px solid var(--sc-line);
}
.sw-art { font-size: 2.9rem; color: var(--art, var(--tb)); transition: transform .25s; }
.card.entry.sw:hover .sw-art { transform: scale(1.07); }
.sw-badge {
    position: absolute; top: 10px; left: 10px; padding: 4px 7px; border-radius: 4px;
    font-family: var(--sans); font-size: .62rem; font-weight: 700; line-height: 1; letter-spacing: .07em; text-transform: uppercase;
    color: var(--sc-text-2); background: var(--sc-surface); border: 1px solid var(--sc-line-2);
}
.sw-cover .star-btn { position: absolute; top: 4px; right: 4px; margin: 0; }
.hue-0 { --ta: var(--h0a); --tb: var(--h0b); } .hue-1 { --ta: var(--h1a); --tb: var(--h1b); }
.hue-2 { --ta: var(--h2a); --tb: var(--h2b); } .hue-3 { --ta: var(--h3a); --tb: var(--h3b); }
.hue-4 { --ta: var(--h4a); --tb: var(--h4b); } .hue-5 { --ta: var(--h5a); --tb: var(--h5b); }
.hue-6 { --ta: var(--h6a); --tb: var(--h6b); }

/* cards pop in on a fresh view; `backwards`, not `both`, so the hover lift
   still applies once the animation is over */
.card.entry.sw.pop { animation: sc-pop .42s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: calc(var(--pop-i, 0) * 24ms); }
@keyframes sc-pop {
    from { opacity: 0; transform: translateY(12px) scale(.95); }
    to   { opacity: 1; transform: none; }
}

.sw-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 13px; }
.sw-body .e-title {
    color: var(--sc-text); font-family: var(--sans); font-size: .98rem; font-weight: 600; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-body .e-title:hover { color: var(--sc-primary); }
.card.entry.sw .src-line {
    margin: -4px 0 0; padding: 0; border: 0; flex-wrap: nowrap; gap: 5px; min-width: 0;
    font-family: var(--sans); font-size: .74rem; color: var(--sc-text-3);
}
.card.entry.sw .src-line a { flex: 0 1 auto; min-width: 0; color: var(--sc-domain); border: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.card.entry.sw .src-line a:hover { color: var(--sc-domain); text-decoration: underline; }
.card.entry.sw .src-date { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sc-text-3); opacity: .8; }

.card.entry.sw .e-desc { font-size: .84rem; line-height: 1.45; color: var(--sc-text-2); margin: 0; min-height: 2.9em; }

/* bookmarking is its own control so it can be reached with a keyboard */
.star-btn {
    width: 36px; height: 36px; flex: none; position: relative;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: transparent; padding: 0; cursor: pointer;
    color: var(--sc-text-3); font-size: .92rem; transition: color .2s, background .2s;
}
.star-btn:hover { color: var(--sc-primary); background: var(--sc-hover); }
.star-btn .on { display: none; }
.star-btn[aria-pressed="true"] { color: var(--sc-primary); }
.star-btn[aria-pressed="true"] .on { display: inline; }
.star-btn[aria-pressed="true"] .off { display: none; }
.star-btn:focus-visible, .os-icon:focus-visible, .sw-body .e-title:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 2px; }

.sub-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; padding-top: 2px; }
/* "Install" leads the chips, so the copy action explains itself */
.sub-row-lbl { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; color: var(--sc-text-3); font-size: .74rem; font-weight: 600; }
.sub-row-lbl i { font-size: .74rem; }
/* tonal chip: OS glyph + the package manager it copies for */
.os-icon {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 9px 0 8px; border-radius: 8px; border: 0;
    font-family: var(--mono); font-size: .72rem; font-weight: 600;
    background: var(--p-mac-bg); color: var(--p-mac-fg); cursor: pointer;
    transition: filter .15s, box-shadow .15s;
}
.os-icon.p-windows { background: var(--p-windows-bg); color: var(--p-windows-fg); }
.os-icon.p-linux   { background: var(--p-linux-bg);   color: var(--p-linux-fg); }
.os-icon i { font-size: .82rem; }
.os-icon[hidden] { display: none; }
/* a web-only entry's one button: the site itself, a link styled as a chip */
.os-icon.p-web { text-decoration: none; }
/* "+N": the other platforms' buttons, folded behind the visitor's own */
.os-more {
    height: 28px; min-width: 32px; padding: 0 8px; border-radius: 8px;
    border: 1px dashed var(--sc-line-2); background: transparent; color: var(--sc-text-3); cursor: pointer;
    font-family: var(--sans); font-size: .74rem; font-weight: 700;
}
.os-more:hover { color: var(--sc-text); border-style: solid; background: var(--sc-hover); }
.os-more:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 2px; }
/* a tint overlay, not `filter`: a filter would become the containing block of
   the command tooltip and squeeze it into the chip's width */
.os-icon:hover { background-image: linear-gradient(color-mix(in srgb, currentColor 9%, transparent), color-mix(in srgb, currentColor 9%, transparent)); box-shadow: var(--sc-shadow-1); }
.os-icon:active { background-image: linear-gradient(color-mix(in srgb, currentColor 16%, transparent), color-mix(in srgb, currentColor 16%, transparent)); }

.show-more {
    display: flex; margin: 22px auto 4px; height: 40px; padding: 0 24px; border-radius: 999px;
    border: 1px solid var(--sc-line-2); background: var(--sc-surface); color: var(--sc-primary);
    font-family: var(--sans); font-size: .88rem; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.show-more:hover { background: color-mix(in srgb, var(--sc-primary) 8%, var(--sc-surface)); color: var(--sc-primary); border-color: var(--sc-line-2); }

.empty-list-msg { color: var(--sc-text-3); text-align: center; padding: 3.5rem 1rem; font-size: .95rem; line-height: 1.6; }
.empty-list-msg .fchip {
    margin-left: 10px; height: 34px; padding: 0 16px; border-radius: 999px; border: 0;
    background: var(--sc-primary); color: var(--sc-on-primary); font-family: var(--sans); font-size: .85rem; font-weight: 600;
}
.empty-list-msg .fchip:hover { box-shadow: var(--sc-shadow-1); color: var(--sc-on-primary); }

.card.entry mark { background: #fde293; color: #1f1f1f; border-radius: 3px; padding: 0 1px; }


/* ── Load error + footer ───────────────────────────────────── */
.alert.err { color: #b3261e; background: #fce8e6; border-color: #f4bfbb; font-family: var(--sans); border-radius: 12px; }
.alert.err code { background: rgba(0,0,0,.06); color: inherit; }
@media (prefers-color-scheme: dark) {
    :root[data-carino-theme="color"]:not([data-theme="light"]) .alert.err { color: #f2b8b5; background: rgba(242,139,130,.12); border-color: rgba(242,139,130,.35); }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .card.entry mark { background: #a8c7fa; color: #062e6f; }
    /* dark: a filled pill reads better than a shadow */
    :root[data-carino-theme="color"]:not([data-theme="light"]) .sc-search { background: var(--sc-pill); border-color: transparent; box-shadow: none; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .sc-search:hover { background: var(--sc-pill-hv); }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .sc-search:focus-within { background: var(--sc-pill); border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
}

/* ── Mid widths: drop the brand-column indent ──────────────── */
@media (max-width: 1100px) {
    .sc-tabs, .sc-facets { margin-left: 0; }
    .sc-how { display: none; }
}
@media (max-width: 860px) {
    .sc-stats { display: none; }
}

/* ── Phone ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wrap { padding: 0 14px 20px; }
    .sc-head-in { padding: 8px 14px 0; }
    .sc-row1 { gap: 10px; }
    .sc-search { height: 46px; }
    .sc-search > i { left: 16px; }
    .sc-find { padding: 0 44px 0 44px; font-size: 16px; }   /* 16px: no iOS zoom on focus */
    .sc-kbd { display: none; }
    .sc-tabs { margin: 0 -14px; padding: 10px 14px 10px; gap: 6px; }
    .fchip.cat-chip { height: 34px; padding: 0 12px; font-size: .82rem; }
    /* the facets scroll sideways as one row */
    .sc-facets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 4px 14px 12px; }
    .sc-facets::-webkit-scrollbar { display: none; }
    .sc-facets .fchip { flex: none; }
    .sc-facets .fchips-count { flex: none; padding-right: 14px; }
    .sc-facets.ovf { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
    .sc-facets.ovf.at-end { -webkit-mask-image: none; mask-image: none; }
    .sub-grid { grid-template-columns: 1fr; gap: 10px; }
    .subcat-divider { scroll-margin-top: 120px; }
    /* every control carries an aria-label; hover tips only get in the way on touch */
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    .card.entry.sw.pop { animation: none; }
}

/* ── Storefront: the opening (Highlights) view ─────────────────
   A featured banner that rotates, shelves that scroll sideways, then a tile
   per category — the shape of an app store's front page. */
.sf-h { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: var(--sc-text); }

.sf-hero { position: relative; margin: 2px 0 28px; }
.sf-slides { display: grid; }
.sf-slide {
    grid-area: 1 / 1; position: relative; overflow: hidden; cursor: pointer;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 24px;
    min-height: 250px; padding: 30px 44px; border-radius: 20px; border: 1px solid var(--sc-line);
    background: radial-gradient(70% 130% at 82% 50%, color-mix(in srgb, var(--tb) 16%, transparent), transparent 70%), var(--sc-cover);
    opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;
}
.sf-slide.on { opacity: 1; visibility: visible; }
.sf-kicker {
    display: inline-block; padding: 4px 8px; border-radius: 4px;
    font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sc-text-2); background: var(--sc-surface); border: 1px solid var(--sc-line-2);
}
.sf-name { margin: 12px 0 8px; font-family: var(--display); font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.08; color: var(--sc-text); }
.sf-desc { margin: 0 0 20px; max-width: 46ch; font-size: 1rem; line-height: 1.5; color: var(--sc-text-2); }
.sf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.sf-actions .sub-row { margin: 0; padding: 0; }
.sf-cta {
    display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 20px; border-radius: 999px;
    background: var(--sc-primary); color: var(--sc-on-primary); font-family: var(--sans); font-size: .9rem; font-weight: 600;
}
.sf-cta i { font-size: .75rem; }
.sf-cta:hover { color: var(--sc-on-primary); box-shadow: var(--sc-shadow-2); }
.sf-cta:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 2px; }
.sf-art { justify-self: center; line-height: 1; }
.sf-art i { font-size: 9rem; color: var(--art, var(--tb)); transform: rotate(-8deg); }

.sf-nav {
    width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    border: 1px solid var(--sc-line); background: var(--sc-surface); color: var(--sc-text-2); font-size: .85rem;
}
.sf-nav:hover { color: var(--sc-text); border-color: var(--sc-line-2); }
.sf-nav:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 2px; }
.sf-hero > .sf-nav { position: absolute; top: 125px; transform: translateY(-50%); box-shadow: var(--sc-shadow-1); }
.sf-hero > .sf-nav.prev { left: -16px; }
.sf-hero > .sf-nav.next { right: -16px; }
.sf-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
/* a 4px bar on a 16px target */
.sf-dot {
    width: 24px; height: 16px; padding: 0; border: 0; cursor: pointer;
    background: linear-gradient(var(--sc-line-2), var(--sc-line-2)) center / 100% 4px no-repeat;
    transition: width .25s;
}
.sf-dot.on { width: 36px; background-image: linear-gradient(var(--sc-primary), var(--sc-primary)); }
.sf-dot:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 1px; }

.sf-shelf { margin: 0 0 26px; scroll-margin-top: calc(var(--nav-h) + 136px); }
.sf-shelf-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sf-shelf-head .sf-h { flex: 1; min-width: 0; }
.sf-all { height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--sc-primary); font-family: var(--sans); font-size: .85rem; font-weight: 600; cursor: pointer; }
.sf-all:hover { background: var(--sc-hover); }
.sf-all:focus-visible { outline: 2px solid var(--sc-primary); }
.sf-nav.sm { width: 34px; height: 34px; }
.sf-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, calc((100% - 36px) / 4)); gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 4px 4px 12px; margin: -4px -4px 0;
}
.sf-track::-webkit-scrollbar { display: none; }
/* paint containment makes the track hold everything inside it: without it,
   something positioned in the cards escaped the scroller after the pop-in and
   widened the page to the shelf's full length (8,000px on a phone) */
.sf-track { contain: paint; }
.sf-track > .card { scroll-snap-align: start; }
/* a shelf scrolls, so its command tips open upward, over the card's cover */
.sf-shelf.open .sf-track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(min(236px, 100%), 1fr)); overflow: visible; }
.sf-shelf.open .sf-nav { display: none; }

.sf-cats { margin: 0 0 30px; }
.sf-cats .sf-h { margin-bottom: 12px; }
.sf-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
/* wide: every category on one row, however many there are */
@media (min-width: 1200px) {
    .sf-cat-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .sf-cat-grid .sf-cat-name { font-size: .9rem; }
    .sf-cat-grid .sf-cat > i { font-size: 2rem; }
}
.sf-cat {
    position: relative; overflow: hidden; height: 96px; padding: 14px 16px; border: 0; border-radius: 14px; cursor: pointer;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left;
    background: linear-gradient(135deg, var(--c) 0%, color-mix(in srgb, var(--c) 72%, #000) 100%); color: var(--on);
    transition: box-shadow .2s, transform .2s;
}
.sf-cat-name { position: relative; font-family: var(--display); font-size: 1.02rem; font-weight: 800; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; }
.sf-cat-n { position: relative; font-size: .76rem; font-weight: 600; opacity: .85; }
.sf-cat > i { position: absolute; right: 12px; top: 14px; font-size: 2.4rem; opacity: .32; transform: rotate(-10deg); transition: transform .3s; }
.sf-cat:hover { transform: translateY(-2px); box-shadow: var(--sc-shadow-2); }
.sf-cat:hover > i { transform: rotate(-2deg) scale(1.1); }
/* the name keeps clear of the icon */
.sf-cat-name { max-width: calc(100% - 44px); }

/* storefront on phones: after the rules above so it wins at equal specificity */
@media (max-width: 640px) {
    .sf-slide { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding: 18px 16px; gap: 12px; border-radius: 16px; }
    .sf-name { margin: 10px 0 6px; }
    .sf-desc { font-size: .9rem; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .sf-actions .sub-row { display: none; }   /* the shelf card below carries the install chips */
    .sf-art { align-self: start; }
    .sf-art i { font-size: 3.2rem; }
    .sf-hero > .sf-nav, .sf-shelf-head .sf-nav { display: none; }
    .sf-track { grid-auto-columns: 78%; margin: -4px -14px 0; padding: 4px 14px 12px; scroll-padding: 0 14px; }
    .sf-cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sf-cat:last-child:nth-child(odd) { grid-column: span 2; }   /* no lone tile */
    .sf-cat { height: 84px; padding: 12px; }
    .sf-cat > i { font-size: 1.9rem; right: 10px; top: 10px; }
    .sf-cat-name { font-size: .86rem; }
}
.sf-cat:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════
   GOLD & BLACK — the default theme
   Luxe minimal: near-black surfaces, warm hairlines, gold spent only where
   it means something (the mark, the picked tab, focus, the
   app glyphs). Category colour survives as a faint tint on the tab icons.
   `:root:not([data-carino-theme="color"])` so a missing attribute (no JS)
   still lands here. This block sits after the colourful rules on purpose:
   equal specificity, later wins.
   ════════════════════════════════════════════════════════════ */
:root:not([data-carino-theme="color"]) {
    --sc-bg: #050505;
    --sc-surface: #0b0b0b;
    --sc-surface-2: #0d0d0d;
    --sc-cover: #0f0e0c;
    --sc-pill: #121212;
    --sc-pill-hv: #191713;
    --sc-line: #1f1d19;          /* warm hairline */
    --sc-line-2: #36322a;
    --sc-text: #f4f1ea;          /* warm white          16.9:1 on --sc-surface */
    --sc-text-2: #bdb7aa;        /* secondary            9.6:1 */
    --sc-text-3: #8f897d;        /* muted                5.6:1 */
    --sc-primary: #eab308;       /* Sharp Gold — the one accent */
    --sc-gold-text: linear-gradient(130deg, #fef08a 0%, #eab308 50%, #c2700a 100%);
    --sc-domain: #c9a85a;
    --sc-badge: #eab308;
    --sc-on-primary: #050505;
    --sc-primary-tonal: rgba(234, 179, 8, .11);
    --sc-on-tonal: #f6d56e;
    --sc-hover: rgba(234, 179, 8, .06);
    --sc-focus: rgba(234, 179, 8, .45);
    --sc-shadow-1: 0 1px 2px rgba(0, 0, 0, .6);
    --sc-shadow-2: 0 10px 28px -14px rgba(234, 179, 8, .28), 0 2px 8px rgba(0, 0, 0, .6);
    --sc-tip-bg: #15130f;
    --sc-tip-fg: #f4f1ea;
    /* install chips: one warm neutral; the OS glyph carries the gold */
    --p-windows-bg: #14130f; --p-windows-fg: #e2dbcb;
    --p-mac-bg:     #14130f; --p-mac-fg:     #e2dbcb;
    --p-linux-bg:   #14130f; --p-linux-fg:   #e2dbcb;
    color-scheme: dark;
}
/* category identity, muted toward gold: c = icon tint, t/tt = hover tonal */
:root:not([data-carino-theme="color"]) .c-all,
:root:not([data-carino-theme="color"]) .c-highlights,
:root:not([data-carino-theme="color"]) .c-carino       { --c: #eab308; }
:root:not([data-carino-theme="color"]) .c-basic        { --c: color-mix(in oklab, #8ab4f8 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) .c-general      { --c: color-mix(in oklab, #f28b82 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) .c-professional { --c: color-mix(in oklab, #81c995 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) .c-it-systems   { --c: color-mix(in oklab, #c58af9 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) .c-security     { --c: color-mix(in oklab, #78d9ec 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) .c-reviewing    { --c: color-mix(in oklab, #ff8bcb 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) [class*=" c-"],
:root:not([data-carino-theme="color"]) [class^="c-"] { --on: #050505; --t: rgba(234, 179, 8, .08); --tt: #f6d56e; }

/* navbar: the fleet's own black, the app tag back in gold */
:root:not([data-carino-theme="color"]) body #carinoNav { background: linear-gradient(180deg, #0c0c0c 0%, #050505 100%); }
:root:not([data-carino-theme="color"]) body #carinoNav .app-tag { -webkit-text-fill-color: var(--sc-primary); color: var(--sc-primary); border-color: #2a2720; }
:root:not([data-carino-theme="color"]) body #carinoNav .app-tag:hover { border-color: rgba(234, 179, 8, .55); background: rgba(234, 179, 8, .08); }

/* page: the fleet's faint gold glow at the top (carino-ui.css's treatment) */
:root:not([data-carino-theme="color"]) body {
    background: radial-gradient(ellipse 1100px 420px at 50% -140px, rgba(234, 179, 8, .11), transparent 70%) no-repeat, var(--sc-bg);
}
/* head: clear over the glow, smoked glass with a gold hairline once it sticks */
:root:not([data-carino-theme="color"]) .sc-head { background: transparent; transition: box-shadow .2s, background-color .2s; }
:root:not([data-carino-theme="color"]) .sc-head.stuck {
    background: rgba(5, 5, 5, .82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 1px 0 rgba(234, 179, 8, .16), 0 10px 24px -14px rgba(0, 0, 0, .9);
}


/* search: a black well with a hairline; gold ring on focus */
:root:not([data-carino-theme="color"]) .sc-search {
    --ring: var(--sc-primary);
    background: var(--sc-surface); border-color: #26231d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02), 0 1px 0 rgba(0, 0, 0, .8);
}
:root:not([data-carino-theme="color"]) .sc-search:hover { border-color: #3a352a; box-shadow: none; }
:root:not([data-carino-theme="color"]) .sc-search:focus-within { background: var(--sc-surface-2); border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring), 0 0 26px -8px var(--sc-focus); }
:root:not([data-carino-theme="color"]) .sc-kbd { background: #121212; border-color: #2e2a23; color: var(--sc-text-3); }

/* category tabs: dark pills on a hairline; the picked one is solid gold */
:root:not([data-carino-theme="color"]) .fchip.cat-chip { background: #0e0e0e; color: var(--sc-text-2); box-shadow: inset 0 0 0 1px #221f1a; }
:root:not([data-carino-theme="color"]) .fchip.cat-chip:hover,
:root:not([data-carino-theme="color"]) .fchip.cat-chip:focus-visible { background: #15130f; color: var(--sc-text); box-shadow: inset 0 0 0 1px #3a3429; }
:root:not([data-carino-theme="color"]) .fchip.cat-chip:focus-visible { outline-color: var(--sc-primary); }
:root:not([data-carino-theme="color"]) .fchip.cat-chip.active,
:root:not([data-carino-theme="color"]) .fchip.cat-chip.active:hover {
    background: linear-gradient(180deg, #f5c62e 0%, #eab308 100%); color: #050505;
    box-shadow: 0 0 0 1px rgba(234, 179, 8, .5), 0 6px 18px -8px rgba(234, 179, 8, .6);
}
:root:not([data-carino-theme="color"]) .fchip.cat-chip.active i { color: #050505; }
:root:not([data-carino-theme="color"]) .cat-n { background: #1a1813; color: var(--sc-text-3); font-family: var(--mono); font-weight: 600; }
:root:not([data-carino-theme="color"]) .cat-chip:hover .cat-n { background: rgba(234, 179, 8, .12); color: var(--sc-on-tonal); }
:root:not([data-carino-theme="color"]) .cat-chip.active .cat-n { background: rgba(5, 5, 5, .16); color: #050505; }
:root:not([data-carino-theme="color"]) .fchip.cat-chip.c-all i { background: var(--sc-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root:not([data-carino-theme="color"]) .fchip.cat-chip.c-all.active i { background: none; color: #050505; }

/* facets */
:root:not([data-carino-theme="color"]) .sc-facets .fchip { border-color: #2a2721; }
:root:not([data-carino-theme="color"]) .sc-facets .fchip:hover,
:root:not([data-carino-theme="color"]) .sc-facets .fchip:focus-visible { border-color: #4a4335; }
:root:not([data-carino-theme="color"]) .sc-facets .fchip.active,
:root:not([data-carino-theme="color"]) .sc-facets .fchip[aria-pressed="true"] { border-color: rgba(234, 179, 8, .45); }
:root:not([data-carino-theme="color"]) .sc-facets .fchip.clear { border-color: rgba(234, 179, 8, .45); }
:root:not([data-carino-theme="color"]) .sc-facets .fchip.clear:hover,
:root:not([data-carino-theme="color"]) .sc-facets .fchip.clear:focus-visible { border-color: var(--sc-primary); background: rgba(234, 179, 8, .08); }
:root:not([data-carino-theme="color"]) .sc-facets .fchips-count b { color: var(--sc-primary); font-family: var(--mono); }
:root:not([data-carino-theme="color"]) .sc-ficon { color: var(--sc-text-2); }
:root:not([data-carino-theme="color"]) .mine-dot { box-shadow: 0 0 6px rgba(234, 179, 8, .8); }
:root:not([data-carino-theme="color"]) .fchip.mine:not(.active) { border-color: rgba(234, 179, 8, .35); }

/* section headings: display caps with a gold rule fading out */
:root:not([data-carino-theme="color"]) .panel-title { font-weight: 900; }
:root:not([data-carino-theme="color"]) .subcat-divider { font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-text); }
:root:not([data-carino-theme="color"]) .subcat-divider::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 4px; background: linear-gradient(90deg, rgba(234, 179, 8, .28), transparent 70%); }
:root:not([data-carino-theme="color"]) .subcat-ic { background: #0e0e0e; color: var(--sc-primary); box-shadow: inset 0 0 0 1px rgba(234, 179, 8, .25); }
:root:not([data-carino-theme="color"]) .subcat-count { background: rgba(234, 179, 8, .12); color: var(--sc-on-tonal); font-family: var(--mono); font-weight: 600; letter-spacing: 0; box-shadow: inset 0 0 0 1px rgba(234, 179, 8, .22); }

/* cards: black slabs on a warm hairline; hover lifts them into a gold rim */
:root:not([data-carino-theme="color"]) .card.entry.sw { background: linear-gradient(180deg, #0d0d0d 0%, #090909 100%); border-color: #1d1b17; }
:root:not([data-carino-theme="color"]) .card.entry.sw:hover { background: linear-gradient(180deg, #0f0f0e 0%, #0a0a0a 100%); border-color: rgba(234, 179, 8, .42); }
@media (hover: hover) and (pointer: fine) {
    :root:not([data-carino-theme="color"]) .card.entry.sw:hover { box-shadow: 0 0 0 1px rgba(234, 179, 8, .12), 0 14px 32px -16px rgba(234, 179, 8, .45), 0 2px 8px rgba(0, 0, 0, .6); }
}
:root:not([data-carino-theme="color"]) .card.entry.sw.in-list { border-color: rgba(234, 179, 8, .38); background: linear-gradient(180deg, #12100a 0%, #0a0907 100%); }

/* covers: a black well under a warm hairline; the icon in a warm metal */
:root:not([data-carino-theme="color"]) .sw-cover { background: radial-gradient(90% 120% at 50% 0%, #15130f 0%, var(--sc-cover) 70%); border-bottom-color: #1d1b17; }
:root:not([data-carino-theme="color"]) .sw-art,
:root:not([data-carino-theme="color"]) .sf-art i {
    background: var(--metal, var(--sc-gold-text)); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
/* five warm metals, gold three times out of seven, so gold still leads */
:root:not([data-carino-theme="color"]) .hue-1 { --metal: linear-gradient(130deg, #fde68a 0%, #f59e0b 55%, #b45309 100%); }  /* amber */
:root:not([data-carino-theme="color"]) .hue-3 { --metal: linear-gradient(130deg, #fbf3dc 0%, #e4cf9a 50%, #b59a5c 100%); }  /* champagne */
:root:not([data-carino-theme="color"]) .hue-5 { --metal: linear-gradient(130deg, #f5d0a9 0%, #d4945a 50%, #a8642a 100%); }  /* bronze */
:root:not([data-carino-theme="color"]) .hue-6 { --metal: linear-gradient(130deg, #fef9c3 0%, #fcd34d 50%, #ca8a04 100%); }  /* honey */
:root:not([data-carino-theme="color"]) .sw-badge { background: #0b0b0b; border-color: rgba(234, 179, 8, .4); color: var(--sc-on-tonal); }

:root:not([data-carino-theme="color"]) .os-icon { box-shadow: inset 0 0 0 1px #26231d; }
:root:not([data-carino-theme="color"]) .os-icon i { color: var(--sc-primary); }
:root:not([data-carino-theme="color"]) .os-icon:hover { box-shadow: inset 0 0 0 1px rgba(234, 179, 8, .5); color: #fff; }
:root:not([data-carino-theme="color"]) .os-more { border-color: #3a352a; }

:root:not([data-carino-theme="color"]) .show-more { background: transparent; border-color: rgba(234, 179, 8, .4); }
:root:not([data-carino-theme="color"]) .show-more:hover { background: rgba(234, 179, 8, .08); border-color: var(--sc-primary); }
:root:not([data-carino-theme="color"]) .card.entry mark { background: rgba(234, 179, 8, .9); color: #050505; }
:root:not([data-carino-theme="color"]) .alert.err { color: #f2b8b5; background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); }

/* storefront in gold: a black banner lit gold from the art side, black
   category tiles with the icon in its muted category tint */
:root:not([data-carino-theme="color"]) .sf-slide {
    background: radial-gradient(70% 130% at 82% 50%, rgba(234, 179, 8, .13), transparent 70%), linear-gradient(180deg, #0f0e0c 0%, #080808 100%);
    border-color: #221f19;
}
:root:not([data-carino-theme="color"]) .sf-kicker { background: #0b0b0b; border-color: rgba(234, 179, 8, .4); color: var(--sc-on-tonal); }
:root:not([data-carino-theme="color"]) .sf-cta { background: linear-gradient(180deg, #f5c62e 0%, #eab308 100%); color: #050505; }
:root:not([data-carino-theme="color"]) .sf-cta:hover { color: #050505; box-shadow: 0 6px 20px -8px rgba(234, 179, 8, .7); }
:root:not([data-carino-theme="color"]) .sf-nav { background: #0e0e0e; border-color: #2a2720; }
:root:not([data-carino-theme="color"]) .sf-nav:hover { border-color: rgba(234, 179, 8, .5); color: var(--sc-primary); }
:root:not([data-carino-theme="color"]) .sf-h { font-weight: 800; }
:root:not([data-carino-theme="color"]) .sf-cat {
    background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 62%), #0d0d0c;
    color: var(--sc-text); box-shadow: inset 0 0 0 1px #24211b;
}
:root:not([data-carino-theme="color"]) .sf-cat > i { color: var(--c); opacity: .6; }
:root:not([data-carino-theme="color"]) .sf-cat-n { color: var(--sc-text-3); opacity: 1; }
:root:not([data-carino-theme="color"]) .sf-cat:hover { box-shadow: inset 0 0 0 1px rgba(234, 179, 8, .5), 0 14px 30px -18px rgba(234, 179, 8, .5); }


/* ── Phone: compact list cards ─────────────────────────────────
   The grid's cards turn into list rows (icon left, text right, install chips
   in one sideways row), about half the height of the cover card. The shelves
   on the storefront keep their covers. */
@media (max-width: 640px) {
    .sub-grid { gap: 8px; }
    .sub-grid .card.entry.sw {
        position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 0;
        grid-template-areas: "art title" "art src" "art badge" "art desc" "row row"; align-content: start;
        padding: 12px 12px 12px 12px;
    }
    .sub-grid .sw-cover, .sub-grid .sw-body { display: contents; }
    .sub-grid .sw-art { grid-area: art; align-self: start; justify-self: center; margin-top: 3px; font-size: 1.9rem; }
    .sub-grid .sw-body .e-title { grid-area: title; padding-right: 30px; }
    .sub-grid .card.entry.sw .src-line { grid-area: src; margin: 1px 0 0; }
    .sub-grid .sw-badge { grid-area: badge; position: static; justify-self: start; margin-top: 6px; }
    .sub-grid .card.entry.sw .e-desc {
        grid-area: desc; margin-top: 5px; min-height: 0;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .sub-grid .sub-row { grid-area: row; margin-top: 10px; padding: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .sub-grid .sub-row::-webkit-scrollbar { display: none; }
    .sub-grid .sub-row > * { flex: none; }
    .sub-grid .sw-cover .star-btn { top: 4px; right: 4px; }
    .sf-track .sw-cover { height: 84px; }
}
/* fingers: install chips at a tappable height */
@media (pointer: coarse) {
    .os-icon, .os-more { height: 34px; }
}