/* Service catalog (/services): the same instrument signed in (customer shell) and signed out
   (general_page). Depends on tokens.css + base.css only; scoped to .cat-head and .cat so neither
   layout's other styles are needed. Rows (.sv-*) load per category; nothing here assumes 3,900 of them. */

.cat, .cat-head {
  --op-micro: 0.6rem;
  --op-label: 0.64rem;
  --op-xs: 0.75rem;
  --op-sm: 0.875rem;
  --op-md: 0.9375rem;
  --op-lg: 1.125rem;
  --op-title: 1.375rem;
  --op-h1: 1.625rem;
  --tap: 40px;
  --cat-top: var(--top-h, 64px);  /* sticky offset: panel top bar (56px) or the public bezel (64px) */
  font-size: var(--op-md);
  line-height: 1.5;
}
@media (pointer: coarse) { .cat, .cat-head { --tap: 44px; } }
.page--catalog { padding-top: var(--s-5); }
@media (min-width: 720px) { .page--catalog { padding-top: var(--s-6); } }

.cat h1, .cat h2, .cat h3, .cat-head h1 { margin: 0; font-weight: 700; line-height: 1.25; }
.cat p { margin: 0; }
.cat .num, .cat-head .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-head .mod__tag, .cat-view__head .mod__tag { white-space: normal; }
.cat .num .sep { display: inline-block; width: 0.45em; text-align: center; }
.cat .ico { width: 18px; height: 18px; }
.cat [hidden] { display: none !important; }
.cat-r { text-align: right; }

/* ---------- page head ---------- */
.cat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.cat-head__title { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; min-width: 0; }
.cat-head h1 { font-size: var(--op-h1); letter-spacing: -0.01em; text-wrap: balance; }
.cat-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.cat-head .btn--switch { margin-top: 10px; }
.cat-head .btn--ghost .ico { width: 18px; height: 18px; }
@media (min-width: 900px) { .cat-head { margin-bottom: var(--s-5); } }

/* ---------- bar: search, favourites, status ---------- */
.cat { overflow: visible; }
.cat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: var(--line); background: var(--panel); border-radius: var(--r) var(--r) 0 0; }
@media (min-width: 900px) { .cat-bar { position: sticky; top: var(--cat-top); z-index: 3; } }
.cat-search { position: relative; display: flex; align-items: center; flex: 1 1 100%; min-width: 0; margin: 0; }
.cat-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--ink-3); pointer-events: none; }
.cat-search__icon .ico { width: 16px; height: 16px; }
.cat-cell {
  width: 100%; min-height: 44px; padding: var(--s-2) 44px var(--s-2) 36px; background: var(--panel-2); border: 1px solid var(--bezel-2); border-radius: var(--r-sm);
  color: var(--ink); font: inherit; font-size: var(--op-sm); line-height: 1.5; appearance: none; -webkit-appearance: none; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cat-cell::placeholder { color: var(--ink-3); }
.cat-cell::-webkit-search-cancel-button, .cat-cell::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.cat-cell:hover { border-color: var(--ink-3); }
.cat-cell:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 227, 140, 0.15); outline: none; }
.cat-search__clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.cat .ib { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); flex: none; padding: 0; border: 0; border-radius: var(--r-sm); color: var(--ink-2); background: transparent; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.cat .ib:hover { color: #fff; background: var(--panel); }
.cat .ib:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.cat-chk { position: relative; display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--tap); cursor: pointer; font-size: var(--op-sm); color: var(--ink-2); flex: none; }
.cat-chk input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cat-chk__lamp { width: 18px; height: 18px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--bezel-2); flex: none; position: relative; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.cat-chk input:checked + .cat-chk__lamp { background: var(--green); border-color: var(--green); box-shadow: 0 0 8px var(--green-glow); }
.cat-chk input:checked + .cat-chk__lamp::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--ground); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cat-chk input:focus-visible + .cat-chk__lamp { outline: 2px solid var(--green); outline-offset: 3px; }
.cat-chk:hover { color: var(--ink); }
.cat-status { flex: 1 1 14rem; min-width: 0; font-size: var(--op-xs); color: var(--ink-2); line-height: 1.5; }
.cat-status .num { color: var(--green); }
.cat-status q { quotes: "\201C" "\201D"; color: var(--ink); }
@media (min-width: 720px) {
  .cat-search { flex: 1 1 18rem; max-width: 30rem; }
  .cat-status { text-align: right; margin-left: auto; }
}

/* ---------- body: platform rail + main ---------- */
.cat-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.cat-rail { border-bottom: var(--line); }
.cat-rail__list { list-style: none; margin: 0; padding: var(--s-2) var(--s-4); display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.cat-rail__list::-webkit-scrollbar { display: none; }
.cat-plat { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--bezel-2); border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--op-xs); text-decoration: none; white-space: nowrap; scroll-snap-align: start; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.cat-plat__n { color: var(--ink-3); font-size: var(--op-xs); }
.cat-plat:hover { color: #fff; border-color: var(--ink-3); }
.cat-plat[aria-current="page"] { color: var(--green); border-color: var(--green-2); background: rgba(0, 227, 140, 0.06); }
.cat-plat[aria-current="page"] .cat-plat__n { color: var(--green); }
.cat-plat:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (pointer: coarse) { .cat-plat { min-height: 44px; } }
.cat-main { min-width: 0; }

@media (min-width: 900px) {
  .cat-body { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .cat-rail { position: sticky; top: calc(var(--cat-top) + 69px); max-height: calc(100vh - var(--cat-top) - 69px); overflow-y: auto; border-bottom: 0; border-right: var(--line); scrollbar-width: thin; }
  .cat-rail__list { flex-direction: column; gap: 1px; padding: var(--s-2); overflow: visible; }
  .cat-plat { display: flex; justify-content: space-between; min-height: 40px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); font-size: var(--op-sm); white-space: normal; }
  .cat-plat__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cat-plat:hover { background: rgba(255, 255, 255, 0.03); }
  .cat-plat[aria-current="page"] { background: var(--panel-2); color: #fff; box-shadow: inset 2px 0 0 var(--green); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
  .cat-plat[aria-current="page"] .cat-plat__n { color: var(--green); }
  .cat-plat:focus-visible { outline-offset: -2px; }
}

/* ---------- board: one readout row per platform ---------- */
.cat-board__cols { display: none; }
.cat-board__list { list-style: none; margin: 0; padding: 0; }
.cat-brow { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-4); border-bottom: var(--line); color: var(--ink); text-decoration: none; transition: background var(--t-fast); }
.cat-board__list li:last-child .cat-brow { border-bottom: 0; }
.cat-brow:hover { background: rgba(255, 255, 255, 0.02); }
.cat-brow:hover .cat-brow__chev { color: var(--green); transform: rotate(-90deg) translateY(2px); }
.cat-brow:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.cat-brow__main { display: grid; gap: 2px; min-width: 0; }
.cat-brow__name { font-weight: 700; font-size: var(--op-md); min-width: 0; }
.cat-brow__facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.cat-brow__n, .cat-brow__c { font-size: var(--op-xs); color: var(--ink-2); white-space: nowrap; }
.cat-brow__from { white-space: nowrap; font-size: var(--op-sm); text-align: right; }
.cat-brow__from .num { color: var(--green); font-weight: 700; }
.cat-brow__k { display: inline-block; margin-right: 0.4em; font-family: var(--font-label); font-size: var(--op-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.cat-brow__chev { width: 16px; height: 16px; color: var(--ink-3); transform: rotate(-90deg); transition: transform var(--t-fast) var(--ease-out), color var(--t-fast); }
@media (min-width: 720px) {
  .cat-board__cols { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 7rem 8rem 20px; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-bottom: var(--line); font-family: var(--font-label); font-size: var(--op-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
  .cat-brow { grid-template-columns: minmax(0, 1fr) 7rem 7rem 8rem 20px; min-height: 52px; padding: var(--s-2) var(--s-4); }
  .cat-brow__main, .cat-brow__facts { display: contents; }
  .cat-brow__n, .cat-brow__c { text-align: right; font-size: var(--op-sm); color: var(--ink); }
  .cat-brow__k { display: none; }
}

/* ---------- platform view ---------- */
.cat-view__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3); }
.cat-view__head h2 { font-size: var(--op-title); letter-spacing: -0.01em; }
.cat-view__head .mod__tag { white-space: normal; }
.cat-back { display: inline-flex; align-items: center; gap: var(--s-2); flex-basis: 100%; min-height: var(--tap); margin: calc(var(--s-2) * -1) 0 0 calc(var(--s-2) * -1); padding: 0 var(--s-2); color: var(--ink-2); font-size: var(--op-sm); text-decoration: none; }
.cat-back .ico { width: 16px; height: 16px; }
.cat-back:hover { color: #fff; }
@media (min-width: 900px) { .cat-back { display: none; } }

.cat-types { display: flex; gap: var(--s-2); padding: 0 var(--s-4) var(--s-3); overflow-x: auto; scrollbar-width: none; }
.cat-types::-webkit-scrollbar { display: none; }
.cat-type { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; min-height: 34px; padding: 0 var(--s-3); border: 1px solid var(--bezel-2); border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--op-xs); white-space: nowrap; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.cat-type .num { color: var(--ink-3); }
.cat-type:hover { color: #fff; border-color: var(--ink-3); }
.cat-type[aria-pressed="true"] { color: var(--green); border-color: var(--green-2); background: rgba(0, 227, 140, 0.06); }
.cat-type[aria-pressed="true"] .num { color: var(--green); }
.cat-type:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cat-types--folded .cat-type:nth-child(n+12):not(.cat-types__more) { display: none; }
.cat-types__more { border-style: dashed; }
@media (pointer: coarse) { .cat-type { min-height: 44px; } }

.cat-view__cols { display: none; }
@media (min-width: 720px) {
  .cat-view__cols { display: grid; grid-template-columns: 16px minmax(0, 1fr) 5rem 8.5rem; gap: 2px var(--s-3); padding: var(--s-2) var(--s-4); border-top: var(--line); font-family: var(--font-label); font-size: var(--op-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
  .cat-view__cols + .cat-group { border-top: var(--line); }
  .cat-types { flex-wrap: wrap; overflow: visible; }
}
.cat-group { border-top: var(--line); }
.cat-group__label { padding: var(--s-3) var(--s-4) var(--s-1); font-family: var(--font-label); font-size: var(--op-label); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.cat-group__label .num { margin-left: 0.5em; letter-spacing: 0; color: var(--ink-3); }
.cat-cats { list-style: none; margin: 0; padding: 0; }
.cat-cat + .cat-cat { border-top: var(--line); }
.cat-cat__head { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "chev name n" "chev from from"; align-items: center; gap: 2px var(--s-3); min-height: 48px; padding: var(--s-2) var(--s-4); color: var(--ink); text-decoration: none; transition: background var(--t-fast); }
.cat-cat__head:hover { background: rgba(255, 255, 255, 0.02); }
.cat-cat__head:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.cat-cat__chev { grid-area: chev; width: 16px; height: 16px; color: var(--ink-3); transform: rotate(-90deg); transition: transform var(--t-fast) var(--ease-out), color var(--t-fast); }
.cat-cat__head[aria-expanded="true"] .cat-cat__chev { transform: none; color: var(--green); }
.cat-cat__name { grid-area: name; min-width: 0; font-size: var(--op-sm); line-height: 1.5; word-break: break-word; }
.cat-name__base { font-weight: 700; }
.cat-name__rest { color: var(--ink-2); }
.cat-cat__name .tok { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.5; margin: 0.1em 0.05em; padding: 0 0.35em; vertical-align: 0.08em; }
.cat-cat__n { grid-area: n; font-size: var(--op-xs); color: var(--ink-2); white-space: nowrap; }
.cat-cat__from { grid-area: from; font-size: var(--op-xs); color: var(--ink-2); white-space: nowrap; }
.cat-cat__from .num { color: var(--green); font-weight: 700; font-size: var(--op-sm); }
.cat-cat__fromk { font-family: var(--font-label); font-size: var(--op-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-right: 0.3em; }
.cat-cat[data-state="loaded"] > .cat-cat__head[aria-expanded="true"], .cat-cat[data-state="loading"] > .cat-cat__head, .cat-cat[data-state="error"] > .cat-cat__head { background: rgba(255, 255, 255, 0.02); }
.cat-cat__body { background: var(--panel-2); border-top: var(--line); }
@media (min-width: 720px) {
  .cat-cat__head { grid-template-columns: 16px minmax(0, 1fr) 5rem 8.5rem; grid-template-areas: "chev name n from"; }
  .cat-cat__n, .cat-cat__from { text-align: right; }
}

/* loading + error inside a category */
.cat-skel { padding: var(--s-2) 0; }
.cat-skel__row { display: flex; gap: var(--s-4); padding: var(--s-3) var(--s-4); }
.cat-skel__bar { display: block; height: 10px; width: var(--w, 60%); max-width: 260px; flex: 1; border-radius: 3px; background: var(--panel); border: 1px solid var(--bezel); }
.cat-fail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); font-size: var(--op-sm); color: var(--ink-2); }
.cat-fail .lamp { background: var(--amber); box-shadow: 0 0 8px var(--amber-glow); }

/* ---------- search / favourites results ---------- */
.cat-results[aria-busy="true"] { opacity: 0.55; }
.cat-res { border-top: var(--line); }
.cat-res:first-child { border-top: 0; }
.cat-res__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4) var(--s-2); font-size: var(--op-sm); font-weight: 400; }
.cat-res__plat { color: var(--green); font-weight: 700; text-decoration: none; }
.cat-res__plat:hover { color: #fff; }
.cat-res__name { min-width: 0; }
.cat-res__name .tok { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.5; margin: 0.1em 0.05em; padding: 0 0.35em; vertical-align: 0.08em; }
.cat-res__n { font-size: var(--op-xs); color: var(--ink-2); }
.cat-res .sv-list { background: var(--panel-2); border-top: var(--line); }

/* ---------- empty ---------- */
.cat-empty { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-5) var(--s-4); color: var(--ink-2); }
.cat-empty > .lamp { margin-top: 0.45em; }
.cat-empty__title { color: var(--ink); font-weight: 700; font-size: var(--op-md); }
.cat-empty__hint { font-size: var(--op-sm); margin-top: var(--s-1); max-width: 60ch; }

/* ---------- service rows (.sv-*) ---------- */
/* A row is id + name (min/max under it) with the price and six metric badges on a second line, and the
   actions at the right. The module sits beside a 220px rail (and the shell's 240px rail when signed in),
   so a one-line-per-metric-column grid never fits; sorting lives in the bar's select instead. */
.cat { --sv-indent: 0px; --r-pill: 11px; }
.sv-list { list-style: none; margin: 0; padding: 0; }
.sv-cols { display: none; }
.sv-r { text-align: right; }
.sv-row { content-visibility: auto; contain-intrinsic-size: auto 72px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "id name fav" "nums nums nums" "act act act"; gap: var(--s-2) var(--s-3); align-items: start; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + var(--sv-indent)); border-top: var(--line); font-size: var(--op-sm); }
.cat[data-logged="0"] .sv-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "id name" "nums nums" "act act"; }
.sv-list > .sv-row:first-child { border-top: 0; }
.sv-row:hover { background: rgba(255, 255, 255, 0.02); }
.sv-id { grid-area: id; font-size: var(--op-xs); color: var(--ink-2); line-height: 1.7; }
.sv-name { grid-area: name; min-width: 0; }
.sv-fav { grid-area: fav; }
.sv-nums { grid-area: nums; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px dashed var(--bezel); }
.sv-rate, .sv-avg { display: inline-block; margin-right: var(--s-2); white-space: nowrap; }
.sv-rate::before, .sv-avg::before { margin-right: 6px; font-family: var(--font-label); font-size: var(--op-micro); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.sv-rate::before { content: var(--l-rate); }
.sv-avg { order: 1; }
.sv-avg::before { content: var(--l-avg); }
.sv-m { min-width: 0; }
.sv-m:has(.mb--none) { display: none; }
.sv-act { grid-area: act; }
@media (min-width: 720px) {
  .sv-row { grid-template-columns: 32px 3.25rem minmax(0, 1fr) auto; grid-template-areas: "fav id name act" "fav id nums act"; gap: var(--s-2) var(--s-3); align-items: start; }
  .cat[data-logged="0"] .sv-row { grid-template-columns: 3.25rem minmax(0, 1fr) auto; grid-template-areas: "id name act" "id nums act"; }
  .sv-fav { align-self: start; margin-top: -6px; }
  .sv-nums { border-top: 0; padding-top: 0; }
  .sv-act { align-self: center; }
}
.sv-name .svc { font-family: var(--font-mono); font-size: var(--op-xs); line-height: 1.7; color: var(--ink); word-break: break-word; }
.sv-name .svc__base { color: var(--ink); }
.sv-name .svc__rest { color: var(--ink-2); }
.sv-name .svc .tok { margin: 0.1em 0.05em; padding: 0 0.35em; font-size: 0.95em; line-height: 1.5; }
.sv-name .svc__emo { filter: grayscale(1) brightness(1.3); opacity: 0.7; font-size: 0.9em; }
.sv-meta { display: block; margin-top: 2px; font-size: var(--op-xs); color: var(--ink-3); }
.sv-meta .num { color: var(--ink-2); }
.sv-rate { color: var(--green); font-size: var(--op-sm); font-weight: 700; }
.sv-avg { color: var(--ink-2); font-size: var(--op-xs); }
/* sort select in the bar */
.sv-act { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-1); }
.cat .btn--sm { min-height: 36px; padding: 0 var(--s-3); font-size: 0.72rem; }
.cat .sv-act .btn--link { padding: 0 var(--s-2); font-size: var(--op-xs); }
@media (pointer: coarse) { .cat .btn--sm { min-height: 44px; } }


.cat-sort { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; font-size: var(--op-xs); color: var(--ink-2); }
.cat-sort__k { white-space: nowrap; }
.cat-cell--sort { width: auto; min-width: 10rem; min-height: 36px; padding: 0.3rem 2.2rem 0.3rem var(--s-3); font-size: var(--op-xs); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238FA3B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 14px; }
.cat-cell--sort option { background: var(--panel); color: var(--ink); }
@media (pointer: coarse) { .cat-cell--sort { min-height: 44px; } }

/* metric badges on the signed-out page (metrics.css scopes them to .sbp) */
.cat .mb { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--bezel); font-family: var(--font-mono); font-size: var(--op-xs); line-height: 1; white-space: nowrap; cursor: help; }
.cat .mb:hover { box-shadow: inset 0 0 0 1px var(--bezel-2); }
.cat .mb:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.cat .mb__lamp { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--bezel-2); }
.cat .mb--good { color: var(--green); }
.cat .mb--good .mb__lamp { background: var(--green); box-shadow: 0 0 6px var(--green-glow); }
.cat .mb--avg { color: var(--amber); }
.cat .mb--avg .mb__lamp { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
.cat .mb--bad { color: var(--red); }
.cat .mb--bad .mb__lamp { background: var(--red); box-shadow: 0 0 6px rgba(255, 90, 90, 0.35); }
.cat .mb--off { color: var(--ink); }
.cat .mb--none { justify-content: center; min-width: 28px; color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--bezel); }

/* favourite: a lamp switch (lit = favourite) */
.sv-fav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer; }
.sv-fav::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bezel-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); transition: background var(--t-fast), box-shadow var(--t-fast); }
.sv-fav:hover::before { background: var(--green-2); }
.sv-fav[aria-pressed="true"]::before { background: var(--green); box-shadow: 0 0 0 2px rgba(0, 227, 140, 0.12), 0 0 8px var(--green-glow); }
.sv-fav[aria-busy="true"] { opacity: 0.5; cursor: progress; }
.sv-fav.is-error::before { background: var(--amber); box-shadow: 0 0 8px var(--amber-glow); }
.sv-fav:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
@media (pointer: coarse) { .sv-fav { width: 44px; height: 44px; margin: -6px 0; } }

/* description popover */
.sv-pop { position: fixed; inset: 0; margin: auto; width: min(92vw, 640px); max-height: min(80vh, 40rem); height: fit-content; padding: 0; overflow: auto; border: 1px solid var(--bezel-2); color: var(--ink); }
.sv-pop::backdrop { background: rgba(10, 15, 20, 0.8); }
.sv-pop .mod__head { position: sticky; top: 0; z-index: 1; background: var(--panel); display: flex; align-items: center; justify-content: space-between; }
.sv-pop .mod__label .num { color: var(--ink-2); letter-spacing: 0; }
.sv-pop .prose { word-break: break-word; font-size: var(--op-sm); line-height: 1.6; }

@media (min-width: 900px) {
  .cat { --sv-indent: calc(16px + var(--s-3)); }
  .cat-res .sv-row { --sv-indent: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat *, .cat *::before, .cat *::after { transition-duration: 0.01ms !important; }
}