/* Square Town — category pages (/category/, /category/<slug>): the tile grid, the hub cards, the sort row.
   Tints are the square card's own (public/index.html, #tip[data-cat=…] → --sqh-*), copied here as --cat-* so a
   category's page wears the colour its card wears in town. Change them there first, then mirror here. */
/* Neutral fallback first, so the per-category rules below (same specificity) win by order: the sheet, the hub
   cards and the sibling pills all read --cat-*; a page for a slug without a tint row simply stays neutral. */
.catPage, [data-cat] { --cat-bg:var(--panel2); --cat-line:var(--line); --cat-mut:var(--dim); --cat-pill:var(--panel2); --cat-pill-tx:var(--text2); }
[data-cat="saas"]      { --cat-bg:#FDF6DC; --cat-line:#EFE6C6; --cat-mut:#7A756B; --cat-pill:#F2E7BE; --cat-pill-tx:#7A6320; }
[data-cat="commerce"]  { --cat-bg:#FBEFEA; --cat-line:#F0DCD3; --cat-mut:#9E7A6C; --cat-pill:#F4DDD1; --cat-pill-tx:#96562F; }
[data-cat="health"]    { --cat-bg:#EEF1F7; --cat-line:#DDE2ED; --cat-mut:#77809A; --cat-pill:#DFE5F2; --cat-pill-tx:#59648A; }
[data-cat="education"] { --cat-bg:#EDF4EE; --cat-line:#DCE9DF; --cat-mut:#6C8474; --cat-pill:#D8E8DC; --cat-pill-tx:#3F6B4E; }
[data-cat="dev-tools"] { --cat-bg:#EEF2F4; --cat-line:#DCE4E8; --cat-mut:#74838C; --cat-pill:#DDE7EC; --cat-pill-tx:#4E6672; }
[data-cat="ai"]        { --cat-bg:#F2EFF8; --cat-line:#E3DDEF; --cat-mut:#837A9E; --cat-pill:#E6DFF3; --cat-pill-tx:#675A8C; }
[data-cat="design"]    { --cat-bg:#EBF4F3; --cat-line:#D8E9E7; --cat-mut:#6D8783; --cat-pill:#D6E8E5; --cat-pill-tx:#3F6B63; }
[data-cat="marketing"] { --cat-bg:#FCF1E7; --cat-line:#F1E0CE; --cat-mut:#9A7F62; --cat-pill:#F5E2CB; --cat-pill-tx:#8A5F26; }
[data-cat="finance"]   { --cat-bg:#F0F4E6; --cat-line:#E0E8CC; --cat-mut:#7E8663; --cat-pill:#E3EBC9; --cat-pill-tx:#5E6B2A; }
[data-cat="media"]     { --cat-bg:#FBEDED; --cat-line:#F0DADA; --cat-mut:#9E7575; --cat-pill:#F5D9D9; --cat-pill-tx:#96504F; }
[data-cat="social"]    { --cat-bg:#EBF3F8; --cat-line:#D9E6EF; --cat-mut:#718695; --cat-pill:#D8E6F2; --cat-pill-tx:#4A6C8A; }
[data-cat="games"]     { --cat-bg:#F8EDF5; --cat-line:#EDDAE8; --cat-mut:#97748B; --cat-pill:#F2D9EA; --cat-pill-tx:#8A4E78; }
[data-cat="personal"]  { --cat-bg:#F5F1EA; --cat-line:#E8E1D4; --cat-mut:#8A8272; --cat-pill:#EBE2CE; --cat-pill-tx:#6E6132; }
[data-cat="travel"]    { --cat-bg:#EAF4F6; --cat-line:#D7E8EB; --cat-mut:#6F878D; --cat-pill:#D5E8EC; --cat-pill-tx:#3F6C77; }
[data-cat="services"]  { --cat-bg:#F0F1F3; --cat-line:#DFE1E6; --cat-mut:#7C8088; --cat-pill:#E1E4EA; --cat-pill-tx:#5A6068; }
[data-cat="utilities"] { --cat-bg:#EAEFFA; --cat-line:#D6DEF2; --cat-mut:#6E7CA4; --cat-pill:#D9E1F6; --cat-pill-tx:#3E56A0; }
[data-cat="community"] { --cat-bg:#EEF6E6; --cat-line:#DCEBCF; --cat-mut:#6F8A5C; --cat-pill:#DDEBCB; --cat-pill-tx:#437A2E; }
[data-cat="other"]     { --cat-bg:#F4F3F0; --cat-line:#E5E3DE; --cat-mut:#85817A; --cat-pill:#E8E6E0; --cat-pill-tx:#6E6A62; }
:root[data-theme="dark"] [data-cat="saas"]      { --cat-bg:#262218; --cat-line:#38321F; --cat-mut:#A29A88; --cat-pill:#3C3520; --cat-pill-tx:#E2CF92; }
:root[data-theme="dark"] [data-cat="commerce"]  { --cat-bg:#2A211C; --cat-line:#3C2F26; --cat-mut:#B29B8D; --cat-pill:#402F24; --cat-pill-tx:#E8C7B0; }
:root[data-theme="dark"] [data-cat="health"]    { --cat-bg:#1D212B; --cat-line:#2B3140; --cat-mut:#93A0BC; --cat-pill:#2B3446; --cat-pill-tx:#C4D0EC; }
:root[data-theme="dark"] [data-cat="education"] { --cat-bg:#1B241F; --cat-line:#28352D; --cat-mut:#90AF9D; --cat-pill:#25372B; --cat-pill-tx:#BFE0CB; }
:root[data-theme="dark"] [data-cat="dev-tools"] { --cat-bg:#1E2226; --cat-line:#2C3238; --cat-mut:#93A1AB; --cat-pill:#2B343B; --cat-pill-tx:#C2D2DC; }
:root[data-theme="dark"] [data-cat="ai"]        { --cat-bg:#221F2A; --cat-line:#322D3F; --cat-mut:#A093BC; --cat-pill:#332C44; --cat-pill-tx:#CFC2EC; }
:root[data-theme="dark"] [data-cat="design"]    { --cat-bg:#1B2423; --cat-line:#283533; --cat-mut:#8FAFA9; --cat-pill:#243733; --cat-pill-tx:#BFE0D9; }
:root[data-theme="dark"] [data-cat="marketing"] { --cat-bg:#272019; --cat-line:#392F22; --cat-mut:#B29E85; --cat-pill:#3D2F1D; --cat-pill-tx:#E5CDA5; }
:root[data-theme="dark"] [data-cat="finance"]   { --cat-bg:#22241A; --cat-line:#323726; --cat-mut:#A3AB8C; --cat-pill:#333A22; --cat-pill-tx:#D4DFAC; }
:root[data-theme="dark"] [data-cat="media"]     { --cat-bg:#2A1E1E; --cat-line:#3D2B2B; --cat-mut:#B79595; --cat-pill:#422A2A; --cat-pill-tx:#EBC2C2; }
:root[data-theme="dark"] [data-cat="social"]    { --cat-bg:#1D2229; --cat-line:#2B323D; --cat-mut:#92A3B5; --cat-pill:#2A3542; --cat-pill-tx:#C1D5E8; }
:root[data-theme="dark"] [data-cat="games"]     { --cat-bg:#271E25; --cat-line:#392C36; --cat-mut:#B294A9; --cat-pill:#3F2A39; --cat-pill-tx:#E6C2DB; }
:root[data-theme="dark"] [data-cat="personal"]  { --cat-bg:#25221C; --cat-line:#363126; --cat-mut:#ABA18E; --cat-pill:#383223; --cat-pill-tx:#DFD3B6; }
:root[data-theme="dark"] [data-cat="travel"]    { --cat-bg:#1B2325; --cat-line:#283537; --cat-mut:#8FADB3; --cat-pill:#243639; --cat-pill-tx:#BFDEE4; }
:root[data-theme="dark"] [data-cat="services"]  { --cat-bg:#202124; --cat-line:#303237; --cat-mut:#9DA1A9; --cat-pill:#303338; --cat-pill-tx:#CBD0D8; }
:root[data-theme="dark"] [data-cat="utilities"] { --cat-bg:#1C2030; --cat-line:#2A3048; --cat-mut:#98A4CC; --cat-pill:#2A334F; --cat-pill-tx:#C3CFF2; }
:root[data-theme="dark"] [data-cat="community"] { --cat-bg:#1C261A; --cat-line:#2A3A26; --cat-mut:#9CB88C; --cat-pill:#2A3D24; --cat-pill-tx:#C6E5B2; }
:root[data-theme="dark"] [data-cat="other"]     { --cat-bg:#222225; --cat-line:#323236; --cat-mut:#9C978F; --cat-pill:#333337; --cat-pill-tx:#CFCBC4; }

/* The illustrated frame (site.css .townHero) with the district's own favicons as the art: a tilted field
   of tiles on the right, fading into the paper under the same gradient the illustrations use. Replaced by
   the real illustration as soon as its PNG is encoded (see design/category-heroes.md). */
.catHero .catMosaic { position:absolute; z-index:-2; inset:-8% -6% -8% 38%; display:grid; grid-template-columns:repeat(12, 1fr); gap:10px; align-content:center;
  transform:rotate(-7deg) scale(1.08); transform-origin:60% 50%; pointer-events:none; }
.catHero .catMosaic img { width:100%; aspect-ratio:1; border-radius:14%; background:#fff8e6; box-shadow:0 2px 0 #e7d8b3, 0 8px 18px -10px rgba(60,40,10,.35); padding:9%; box-sizing:border-box; object-fit:contain; }
.catHero .catMosaic img:nth-child(3n) { transform:translateY(6px); } .catHero .catMosaic img:nth-child(5n) { transform:translateY(-5px); }
.catHero::before { background:linear-gradient(90deg, #fcf0d4 0%, #fcf0d4f5 40%, #fcf0d4a0 58%, #fcf0d400 78%); }
.catHero .mastText { position:relative; }
@media (max-width: 760px) {
  .catHero .catMosaic { inset:auto -6% -6% -6%; height:300px; grid-template-columns:repeat(8, 1fr); gap:8px; transform:rotate(-5deg) scale(1.05); }
  .catHero::before { background:linear-gradient(180deg, #fcf0d4 0%, #fcf0d4 calc(100% - 280px), #fcf0d400 calc(100% - 200px)); } }
@media print { .catHero .catMosaic { display:none; } }

/* the sheet takes the page's tint as an accent: masthead rule, sort row, tile frames */
.catPage .mast { border-bottom-color:var(--cat-line); }
.catPage .meta a.district { color:var(--cat-pill-tx); border-bottom-color:var(--cat-line); }

/* sort row: real links (each order is a URL), the current one filled */
.sortRow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; font:12px/1.4 var(--mono); color:var(--dim); }
.sortRow > span { margin-right:4px; }
.sortRow a { color:var(--text2); text-decoration:none; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--panel); }
.sortRow a:hover { border-color:var(--cat-pill-tx); color:var(--text); }
.sortRow a[aria-current] { background:var(--cat-pill); color:var(--cat-pill-tx); border-color:var(--cat-pill); font-weight:700; }

/* the grid: every square of this kind, edge to edge, like the 2D wall seen from above */
.catGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:4px; margin:0 0 14px; }
.catGrid .sq { position:relative; display:block; aspect-ratio:1; border-radius:8px; background:var(--cat-bg); border:1px solid var(--cat-line);
  overflow:visible; text-decoration:none; outline-offset:2px; }
.catGrid .sq img { display:block; width:100%; height:100%; padding:14%; box-sizing:border-box; object-fit:contain; image-rendering:auto; border-radius:inherit; }
.catGrid .sq:hover, .catGrid .sq:focus-visible { border-color:var(--cat-pill-tx); z-index:2; }
/* the hover label: domain plus the active metric, read off data-* so tiles carry no label markup */
.catGrid .sq::after { position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); z-index:3; white-space:nowrap; pointer-events:none;
  padding:5px 9px; border-radius:7px; background:var(--text); color:var(--bg); font:11px/1.3 var(--mono); opacity:0; transition:opacity .12s; }
.catGrid .sq:hover::after, .catGrid .sq:focus-visible::after { opacity:1; }
.catGrid[data-sort="views"]  .sq::after { content:attr(data-d) " · " attr(data-v) " views"; }
.catGrid[data-sort="clicks"] .sq::after { content:attr(data-d) " · " attr(data-c) " clicks"; }
.catGrid[data-sort="kisses"] .sq::after { content:attr(data-d) " · " attr(data-k) " kisses"; }
.catGrid[data-sort="newest"] .sq::after { content:attr(data-d) " · since " attr(data-since); }
.catGrid .sq:first-child::after, .catGrid .sq:nth-child(2)::after { left:0; transform:none; }
.catNote { font:12px/1.6 var(--mono); color:var(--dim); margin:0 0 34px; }
.catNote a { color:var(--dim); }
@media (max-width: 760px) { .catGrid { grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); gap:3px; } .catGrid .sq { border-radius:6px; } }
@media (prefers-reduced-motion: reduce) { .catGrid .sq::after { transition:none; } }

/* the essay under the grid, then the other districts */
.catCopy { max-width:68ch; font:16.5px/1.65 var(--serif); }
.catCopy p { margin:0 0 16px; }
.catSiblings ul { display:flex; flex-wrap:wrap; gap:8px; }
.catSiblings li { margin:0; }
.catSiblings a { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; text-decoration:none; font:12px/1.3 var(--mono);
  background:var(--cat-pill); color:var(--cat-pill-tx); border:1px solid var(--cat-line); }
.catSiblings a:hover { filter:brightness(.96); }
.catSiblings a b { font-weight:400; opacity:.75; }

/* the hub: one card per district, sorted by size, with a strip of its most-viewed icons */
.catCards { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px; }
.catCards li { margin:0; }
.catCards a { display:grid; grid-template-rows:auto auto 1fr auto; gap:6px; height:100%; box-sizing:border-box; padding:18px 18px 16px; border-radius:14px; text-decoration:none; color:var(--text);
  background:var(--cat-bg); border:1px solid var(--cat-line); transition:transform .12s, border-color .12s; }
.catCards a:hover { transform:translateY(-2px); border-color:var(--cat-pill-tx); }
.catCards .name { font:700 18px/1.2 var(--mono); }
.catCards .n { font:12px/1.4 var(--mono); color:var(--cat-pill-tx); }
.catCards p { margin:0; font:14px/1.5 var(--serif); color:var(--text2); }
.catCards .strip { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; overflow:hidden; max-height:48px; }   /* two rows at most; never past the card edge */
.catCards .strip img { width:22px; height:22px; border-radius:5px; background:var(--panel); padding:2px; box-sizing:border-box; object-fit:contain; }
.catCards .strip .more { width:22px; height:22px; border-radius:5px; background:var(--cat-pill); color:var(--cat-pill-tx); font:700 9px/22px var(--mono); text-align:center; }