/**
 * @file listing.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description A listing: things in rows of columns under a heading row, each cell between hairlines,
 *   the name in bold with a small typewriter line under it, a grey description, who or where, and the
 *   doors on the right; one row can open a panel under it, framed with the raised shadow. On a phone
 *   one column, without the heading row. The look most Settings & Controls tabs already draw (the
 *   identical copies in skills, extensions, capabilities, libraries, packages and app development),
 *   taken as the one look for this kind (UI consolidation phase 5).
 *   The columns are the listing's own cut, named by what they hold (.listing--<cut>); a page names
 *   one and writes no grid of its own.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.28.0 — 2026-09-27 — The cut name-price-delivery-doors draws the rest of the old .mz-tool: one
 *     rule under the whole row, 14px around, the heavy rule over the list, the cells' letters, the
 *     doors 16px apart, the blocked reason under the row, one column under 900px; appcat parity
 *     (sections-d). The cut is appcat's alone.
 *   v1.27.0 — 2026-09-27 — The cuts name-price-delivery-doors (a tool for sale: the old catalogue's
 *     .mz-tool columns) and name-price-rake-budget-state (a contract an app sources); appcat, detail
 *     builder C. Additive.
 *   v1.26.0 — 2026-09-27 — The cut n-mark-name-desc-state-n-arrow: the app catalogue's rows (appcat,
 *     the shell), the old .cat-row columns; drawn with List index.
 *   v1.25.0 — 2026-09-27 — The cuts of the app catalogue's detail rows (appcat, detail builder B):
 *     name-meaning-doors (a switch, its meaning, its action), key-desc-who (a data map's key, what it
 *     holds, where), name-n (a count per place), when-name-who and when-kind-name-who (the audit log
 *     and the declarations), with the old catalogue's columns. Additive.
 *   v1.24.0 — 2026-09-27 — The cuts of the operator pages' lists of admin group G1:
 *     when-state-path-where-kind-desc (Security's refusal log), state-name-who-when-doors (its
 *     refused-and-kept incidents, with main's 1100px rule) and name-state-meta-meta-doors
 *     (Compliance's register), with main's columns.
 *   v1.23.0 — 2026-09-27 — The cuts of the operator pages' tables (admin page group G3):
 *     name-state-n-trend (Statistics' counters), name-desc-n-n-n-n (what was sent), name-n-n-n-bar
 *     (Usage's models, Database's tables), name-n-n-n-n-n-state (who spent) and name-n-bar-desc
 *     (Metrics' memory ledger), with main's column widths and 1100px rules.
 *   v1.22.0 — 2026-09-27 — The cuts of the operator pages' lists (admin page group G4): n-name-n-when-doors
 *     (Owners), n-name-tags-n-when-doors and name-kind-state-when (Organism ownership),
 *     name-who-tags-n-when-doors and name-n-n-bar-doors (Agents), name-n-code-code-bar, name-n-n-bar and
 *     name-n-desc (Agent integration), name-desc-state-mark-when-when-doors (GHII) and n-name-state
 *     (Organisation sign-in's steps), with main's column widths and narrow rules.
 *   v1.21.0 — 2026-09-27 — The cuts of the operator pages' tables (admin page group G7):
 *     name-ver-who-n-kinds-doors (Cortex), name-words-when (a cortex's versions), name-n-where-state-doors,
 *     name-kind-words and name-words (CSM), name-who-kind-n-seen-review-when-doors (Knowledge) and
 *     tag-name-desc (an extension's actions), with main's column widths and narrow columns.
 *   v1.20.0 — 2026-09-27 — The cuts of the operator pages' tables (page group G6): name-desc-code-n
 *     (Email), name-code-when-when (Push), when-name-kind-who, name-when-who-state-when-doors and
 *     when-name-kind-state-n-desc (Scheduler), name-state-kind-code-when-desc-edit-doors,
 *     name-who-code-desc-desc, state-name-code-desc and name-code-state-when-doors (Federation,
 *     Genesis), with main's column widths; the peers' cut becomes one block per peer at 1100px.
 *   v1.19.0 — 2026-09-27 — The cuts of the operator pages' tables (page group G5): Actions, Capabilities,
 *     Agent tasks, chat sessions, Applications, Boards, Memory (records, reach, versions), Realtime
 *     (rooms, a room's people) and Work, with main's column widths.
 *   v1.18.0 — 2026-09-27 — The cuts of the operator pages' tables (page group G8): name-ver-kind-n-state,
 *     name-id-who-ver-n-when, name-id-score-n-mark-doors, name-id-who-when-mark, name-state-words-when
 *     (Packages), name-where-what-who-when-doors (MSM) and name-tags-when-doors (Skills), with main's
 *     column widths.
 *   v1.17.0 — 2026-09-26 — The cut state-name-who-doors for App development's pitfall lists (a
 *     severity or a tier in its own column), and n-name-doors for the Apps page's condition rows,
 *     each with its old narrow-screen columns (page group G6).
 *   v1.16.0 — 2026-09-26 — The cut check-name-size-when-mark-doors for memory's old key list (a key
 *     picked by its box, opened in place), with the key space's narrow rule: at 1100px the size and
 *     the change go (page group G3).
 *   v1.15.0 — 2026-09-26 — The List component (components/List.js) draws this sheet; the cuts of the
 *     other Settings list kinds it takes (group 9: search hits, a checklist, the uses of an address,
 *     a task's to-dos, the devices, an access group's rows, what was sent, the notifications,
 *     organisms and workspaces, a pick list), with their old narrow-screen columns.
 *   v1.14.0 — 2026-09-26 — The cut id-desc-n-doors for Capabilities' members of an opened provider.
 *   v1.13.0 — 2026-09-26 — The cut name-name for Contacts' "Where": two names to a line.
 *   v1.12.0 — 2026-09-26 — The cut for Workflows' table: its name keeps 10rem, and under 900px the
 *     doors take the line under the name.
 *   v1.11.0 — 2026-09-26 — The cuts for Scheduler's agenda, what is coming, the register and an
 *     agent's own jobs, with their old narrow-screen columns.
 *   v1.10.0 — 2026-09-26 — The cuts for Offers' deliveries, catalogue, selling register and AI hits,
 *     with their old narrow-screen columns.
 *   v1.9.0 — 2026-09-26 — The cuts for Knowledge's packages, the organisms' packages, the library and
 *     a pasted package's entries, with their old narrow-screen columns.
 *   v1.8.0 — 2026-09-26 — The cut for Boards' table, with its old narrow-screen columns.
 *   v1.7.0 — 2026-09-26 — Cuts for Discover's kinds, entries and hits (group 8: the lists held back
 *     while the line under a name was a question), with their old narrow-screen columns and their
 *     heading row kept on a phone.
 *   v1.6.0 — 2026-09-26 — The line under a name (.listing-name small) is also .listing-meta, for a name outside a
 *     Listing row: every such line in Settings takes it (Jouni's decision "Meta line").
 *   v1.5.0 — 2026-09-26 — A framed box is the Object box (.poster-box), the one that stands out (an opened row, the way to take first) its raised tone; a page rule keeps only its place (a unification: Jouni's decision "Box").
 *   v1.4.0 — 2026-09-25 — A table of rows is the Listing (css/components/listing.css): the P&L lines, the accountants, the usage report, the AI spend per app, the security overrides and an agent's internal jobs; figures stand at the right of their column (a unification: the look most tabs use).
 *   v1.3.0 — 2026-09-25 — The cut when-name-who-state-n, for an agent's delivery log (a unification: the look most tabs use).
 *   v1.2.0 — 2026-09-25 — A named cell (name, words, who) centres its words inside the cell instead of
 *     shrinking to them, so its rule lines up with the row's. A listing that keeps its columns on a
 *     phone says so (.listing--cols) and its cut carries its narrow rules; the others stack.
 *   v1.1.0 — 2026-09-25 — The Settings listings move onto it (a unification: the look most tabs use): a
 *     cut for each set of columns they hold, and on a phone any row's cells stack with the rule after
 *     the last one (it was written for the name, the words and the doors only).
 *   v1.0.0 — 2026-09-25 — Initial, with the values of the copies in the Settings tabs (xx-pl, xx-p and
 *     their cells).
 */

.listing { display: grid; gap: 0 .9rem; align-items: stretch; }
.listing-row { display: contents; }
.listing-row > div { padding: .7rem 0; border-bottom: 1px solid var(--border); min-width: 0; display: grid; align-content: center; }
/* The heading row: its cells carry the row label (.poster-label). */
.listing-row--head > div { padding: 0 0 .35rem; border-bottom: 0; }
.listing-row.is-open > div { border-bottom: 0; }
.listing-row > .listing-name { display: block; align-content: center; font-size: .95rem; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
/* The line under a name: small grey typewriter letters. .listing-meta draws the same line under a name
   outside a Listing row (Jouni's decision "Meta line"). */
.listing-name small, .listing-meta { display: block; margin-top: .15rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 400; color: var(--text-dim); }
.listing-name small.is-warn { color: var(--accent); }
.listing-row > .listing-desc { display: block; align-content: center; font-size: .85rem; line-height: 1.5; color: var(--text-dim); }
.listing-row > .listing-who { display: block; align-content: center; font-size: .85rem; font-weight: 600; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.listing-who small { display: block; font-family: var(--font-mono); font-size: .7rem; font-weight: 400; color: var(--text-dim); }
.listing-row > .listing-doors { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; white-space: nowrap; }
/* The panel a row opens: it spans the row, the Object box's raised tone (.poster-box .poster-box--raised). */
.listing-row > .listing-open { grid-column: 1 / -1; display: block; margin: 0 0 .4rem; padding: 1rem 1.2rem 1.1rem; box-shadow: var(--shape-shadow-raised); font-size: .9rem; line-height: 1.55; color: var(--text); }
.listing-open-doors { margin-top: 1rem; }

/* The cuts: which columns a listing has, named by what they hold. */
.listing--name-desc-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) auto; }
/* cuts: group 1 */
.listing--name-desc-who-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(9rem, .9fr) auto; }
.listing--path-size { grid-template-columns: minmax(0, 1fr) 6rem; }
.listing--name-desc-use-doors { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(9rem, .9fr) auto; }
.listing--name-desc-call-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(10rem, .95fr) auto; }
.listing--name-desc-api-doors { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(9rem, .9fr) auto; }
.listing--id-desc-doors { grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) auto; }
.listing--kind-name-who-doors { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.listing--kind-name-desc { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.2fr); }
.listing--mark-name-desc-state-n-doors { grid-template-columns: 2.2rem minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(6rem, .8fr) 3.5rem auto; }
@media (max-width: 860px) {
  .listing--mark-name-desc-state-n-doors { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .listing--mark-name-desc-state-n-doors > .listing-row > :nth-child(3), .listing--mark-name-desc-state-n-doors > .listing-row > :nth-child(4), .listing--mark-name-desc-state-n-doors > .listing-row > :nth-child(5) { display: none; }
  .listing--mark-name-desc-state-n-doors > .listing-row > :nth-child(1), .listing--mark-name-desc-state-n-doors > .listing-row > :nth-child(2) { border-bottom: 0; }
  .listing--mark-name-desc-state-n-doors > .listing-row > :nth-child(2) { padding-bottom: .2rem; }
  .listing--mark-name-desc-state-n-doors > .listing-row > :nth-child(6) { grid-column: 2; justify-content: flex-start; padding-top: 0; }
}
.listing--name-tag-doors { grid-template-columns: minmax(0, 1fr) auto auto; }
/* The old rows wrapped (flex): the name took a line of its own once the row grew too narrow. */
@media (max-width: 560px) {
  .listing--name-tag-doors { grid-template-columns: auto minmax(0, 1fr); }
  .listing--name-tag-doors > .listing-row > :nth-child(1) { grid-column: 1 / -1; border-bottom: 0; padding-bottom: .15rem; }
  .listing--name-tag-doors > .listing-row > :nth-child(n+2) { padding-top: 0; }
  .listing--name-tag-doors > .listing-row > :nth-child(3) { justify-content: flex-start; }
}
.listing--name-doors { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 560px) {
  .listing--name-doors { grid-template-columns: minmax(0, 1fr); }
  .listing--name-doors > .listing-row > :nth-child(1) { border-bottom: 0; padding-bottom: .15rem; }
  .listing--name-doors > .listing-row > :nth-child(2) { justify-content: flex-start; padding-top: 0; flex-wrap: wrap; }
}
/* cuts: group 2 */
.listing--mark-name-who-when-doors { grid-template-columns: 2.2rem minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr) auto; }
@media (max-width: 860px) {
  .listing--mark-name-who-when-doors { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .listing--mark-name-who-when-doors > .listing-row > :nth-child(3), .listing--mark-name-who-when-doors > .listing-row > :nth-child(4) { display: none; }
  .listing--mark-name-who-when-doors > .listing-row > :nth-child(1) { border-bottom: 0; }
  .listing--mark-name-who-when-doors > .listing-row > :nth-child(2) { border-bottom: 0; padding-bottom: .2rem; }
  .listing--mark-name-who-when-doors > .listing-row > :nth-child(5) { grid-column: 2; justify-content: flex-start; padding-top: 0; }
}
.listing--name-who-desc-doors { grid-template-columns: 9rem minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.listing--name-n-n-cap-n { grid-template-columns: minmax(0, 1.4fr) 6rem 6rem 7.5rem 5.5rem; }
@media (max-width: 860px) {
  .listing--name-n-n-cap-n { grid-template-columns: minmax(0, 1fr) 5rem 5.5rem; }
  .listing--name-n-n-cap-n > .listing-row--head > div { display: grid; }
  .listing--name-n-n-cap-n > .listing-row > :nth-child(3), .listing--name-n-n-cap-n > .listing-row > :nth-child(5) { display: none; }
}
.listing--name-when-amount-doors { grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) 6.5rem auto; }
@media (max-width: 860px) {
  .listing--name-when-amount-doors { grid-template-columns: minmax(0, 1fr) 6rem; }
  .listing--name-when-amount-doors > .listing-row > :nth-child(1) { border-bottom: 0; padding-bottom: .1rem; }
  .listing--name-when-amount-doors > .listing-row > :nth-child(2) { grid-column: 1 / -1; padding-top: 0; border-bottom: 0; }
  .listing--name-when-amount-doors > .listing-row > :nth-child(4) { grid-column: 1 / -1; justify-content: flex-start; padding-top: .1rem; }
  .listing--name-when-amount-doors > .listing-row > .listing-open { padding: .8rem .8rem .9rem; }
}
.listing--name-state-cur-doors { grid-template-columns: 8rem minmax(0, 1.5fr) minmax(0, 1fr) auto; }
@media (max-width: 860px) {
  .listing--name-state-cur-doors { grid-template-columns: minmax(0, 1fr) 6rem; }
  .listing--name-state-cur-doors > .listing-row > :nth-child(1) { border-bottom: 0; padding-bottom: .1rem; }
  .listing--name-state-cur-doors > .listing-row > :nth-child(2), .listing--name-state-cur-doors > .listing-row > :nth-child(3) { grid-column: 1 / -1; padding-top: 0; border-bottom: 0; }
  .listing--name-state-cur-doors > .listing-row > :nth-child(4) { grid-column: 1 / -1; justify-content: flex-start; padding-top: .1rem; }
  .listing--name-state-cur-doors > .listing-row > .listing-open { padding: .8rem .8rem .9rem; }
}
.listing--name-desc-since-doors { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 8.5rem auto; }
@media (max-width: 860px) {
  .listing--name-desc-since-doors { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .listing--name-desc-since-doors > .listing-row > :nth-child(1) { border-bottom: 0; padding-bottom: .1rem; }
  .listing--name-desc-since-doors > .listing-row > :nth-child(2), .listing--name-desc-since-doors > .listing-row > :nth-child(3) { grid-column: 1 / -1; padding-top: 0; border-bottom: 0; }
  .listing--name-desc-since-doors > .listing-row > :nth-child(4) { grid-column: 1 / -1; justify-content: flex-start; padding-top: .1rem; }
  .listing--name-desc-since-doors > .listing-row > .listing-open { padding: .8rem .8rem .9rem; }
}
.listing--name-desc-span-doors { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 10rem auto; }
@media (max-width: 860px) {
  .listing--name-desc-span-doors { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .listing--name-desc-span-doors > .listing-row > :nth-child(1) { border-bottom: 0; padding-bottom: .1rem; }
  .listing--name-desc-span-doors > .listing-row > :nth-child(2), .listing--name-desc-span-doors > .listing-row > :nth-child(3) { grid-column: 1 / -1; padding-top: 0; border-bottom: 0; }
  .listing--name-desc-span-doors > .listing-row > :nth-child(4) { grid-column: 1 / -1; justify-content: flex-start; padding-top: .1rem; }
}
.listing--name-desc-count-when-doors { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr) 5.5rem 8rem auto; }
@media (max-width: 860px) {
  .listing--name-desc-count-when-doors { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .listing--name-desc-count-when-doors > .listing-row > :nth-child(1) { border-bottom: 0; padding-bottom: .1rem; }
  .listing--name-desc-count-when-doors > .listing-row > :nth-child(2), .listing--name-desc-count-when-doors > .listing-row > :nth-child(4) { grid-column: 1 / -1; padding-top: 0; border-bottom: 0; }
  .listing--name-desc-count-when-doors > .listing-row > :nth-child(5) { grid-column: 1 / -1; justify-content: flex-start; padding-top: .1rem; }
  .listing--name-desc-count-when-doors > .listing-row > .listing-open { padding: .8rem .8rem .9rem; }
}
.listing--name-who-when-by-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 7rem 8rem auto; }
.listing--who-when-by-doors { grid-template-columns: minmax(0, 1.4fr) 7rem 8rem auto; }
.listing--name-what { grid-template-columns: minmax(0, 1.6fr) 8rem; }
.listing--name-score-desc-doors { grid-template-columns: minmax(10rem, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr) auto; }
.listing--name-who-facts-doors { grid-template-columns: 9rem minmax(0, 1.3fr) minmax(0, 1fr) auto; }
/* cuts: group 3 */
.listing--label-words-doors { grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto; }
.listing--name-state { grid-template-columns: minmax(0, 1fr) auto; }
.listing--name-kind-state-doors { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.listing--name-desc-when-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) 7.5rem auto; }
@media (max-width: 860px) {
  .listing--name-desc-when-doors > .listing-row > .listing-open { padding: .8rem .8rem .9rem; }
}
.listing--name-who-when-doors { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 9rem auto; }
@media (max-width: 860px) {
  .listing--name-who-when-doors > .listing-row > .listing-open { padding: .8rem .8rem .9rem; }
}
.listing--mark-name-desc-doors { grid-template-columns: 2.2rem minmax(0, 1.2fr) minmax(0, 1fr) auto; }
@media (max-width: 860px) {
  .listing--mark-name-desc-doors { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .listing--mark-name-desc-doors > .listing-row > :nth-child(2) { border-bottom: 0; padding-bottom: .2rem; }
  .listing--mark-name-desc-doors > .listing-row > :nth-child(3) { display: none; }
  .listing--mark-name-desc-doors > .listing-row > :nth-child(4) { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; white-space: normal; padding-top: 0; }
}
.listing--mark-name-kind-state-doors { grid-template-columns: 2.2rem minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
@media (max-width: 860px) {
  .listing--mark-name-kind-state-doors { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .listing--mark-name-kind-state-doors > .listing-row > :nth-child(2) { border-bottom: 0; padding-bottom: .2rem; }
  .listing--mark-name-kind-state-doors > .listing-row > :nth-child(3), .listing--mark-name-kind-state-doors > .listing-row > :nth-child(4) { display: none; }
  .listing--mark-name-kind-state-doors > .listing-row > :nth-child(5) { grid-column: 2; justify-content: flex-start; padding-top: 0; }
}
/* The three contact tables on a phone: the mark spans two lines, the name and the doors share the
   first, the last message (or the invitation) takes the second; dense flow puts the doors beside the name. */
.listing--mark-name-tags-shared-last-doors { grid-template-columns: 2.2rem minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) auto; }
@media (max-width: 860px) {
  .listing--mark-name-tags-shared-last-doors { grid-template-columns: 2.2rem minmax(0, 1fr) auto; grid-auto-flow: dense; }
  .listing--mark-name-tags-shared-last-doors > .listing-row > :nth-child(1) { grid-column: 1; grid-row: span 2; align-content: start; }
  .listing--mark-name-tags-shared-last-doors > .listing-row > :nth-child(2) { grid-column: 2; border-bottom: 0; padding-bottom: 0; }
  .listing--mark-name-tags-shared-last-doors > .listing-row > :nth-child(3), .listing--mark-name-tags-shared-last-doors > .listing-row > :nth-child(4) { display: none; }
  .listing--mark-name-tags-shared-last-doors > .listing-row > :nth-child(5) { grid-column: 2 / 4; padding-top: .2rem; }
  .listing--mark-name-tags-shared-last-doors > .listing-row > :nth-child(6) { grid-column: 3; border-bottom: 0; padding-bottom: 0; gap: .5rem; }
}
.listing--mark-name-tags-note-state-doors { grid-template-columns: 2.2rem minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 8rem) auto; }
@media (max-width: 860px) {
  .listing--mark-name-tags-note-state-doors { grid-template-columns: 2.2rem minmax(0, 1fr) auto; grid-auto-flow: dense; }
  .listing--mark-name-tags-note-state-doors > .listing-row > :nth-child(1) { grid-column: 1; grid-row: span 2; align-content: start; }
  .listing--mark-name-tags-note-state-doors > .listing-row > :nth-child(2) { grid-column: 2; border-bottom: 0; padding-bottom: 0; }
  .listing--mark-name-tags-note-state-doors > .listing-row > :nth-child(3), .listing--mark-name-tags-note-state-doors > .listing-row > :nth-child(4) { display: none; }
  .listing--mark-name-tags-note-state-doors > .listing-row > :nth-child(5) { grid-column: 2 / 4; padding-top: .2rem; }
  .listing--mark-name-tags-note-state-doors > .listing-row > :nth-child(6) { grid-column: 3; border-bottom: 0; padding-bottom: 0; gap: .5rem; }
}
.listing--mark-name-who-last-doors { grid-template-columns: 2.2rem minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr) auto; }
@media (max-width: 860px) {
  .listing--mark-name-who-last-doors { grid-template-columns: 2.2rem minmax(0, 1fr) auto; grid-auto-flow: dense; }
  .listing--mark-name-who-last-doors > .listing-row > :nth-child(1) { grid-column: 1; grid-row: span 2; align-content: start; }
  .listing--mark-name-who-last-doors > .listing-row > :nth-child(2) { grid-column: 2; border-bottom: 0; padding-bottom: 0; }
  .listing--mark-name-who-last-doors > .listing-row > :nth-child(3) { display: none; }
  .listing--mark-name-who-last-doors > .listing-row > :nth-child(4) { grid-column: 2 / 4; padding-top: .2rem; }
  .listing--mark-name-who-last-doors > .listing-row > :nth-child(5) { grid-column: 3; border-bottom: 0; padding-bottom: 0; gap: .5rem; }
}
/* cuts: group 4 */
.listing--when-state-desc-doors { grid-template-columns: 7rem 7rem minmax(0, 1fr) 3.5rem; }
@media (max-width: 900px) {
  .listing--when-state-desc-doors { grid-template-columns: 6rem minmax(0, 1fr); }
  .listing--when-state-desc-doors > .listing-row > :nth-child(2), .listing--when-state-desc-doors > .listing-row > :nth-child(4) { display: none; }
}
/* cuts: group 5 */
/* An agent's delivery log (Integration): when, the event, the channel, the result, the latency. */
.listing--when-name-who-state-n { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, .8fr) 3.5rem 4rem; }
/* The og kit's table of spaces (memory, workspace): at 1100px the head row and the two middle columns went. */
.listing--n-name-meta-latest-doors { grid-template-columns: 2.6rem minmax(0, 1fr) auto minmax(0, 18rem) auto; }
@media (max-width: 1100px) {
  .listing--n-name-meta-latest-doors { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
  .listing--n-name-meta-latest-doors > .listing-row > :nth-child(3), .listing--n-name-meta-latest-doors > .listing-row > :nth-child(4) { display: none; }
  .listing--n-name-meta-latest-doors > .listing-row--head > div { display: none; }
}
/* A key space's keys (the same kit table): at 1100px the head row, the size and the change went. */
.listing--name-size-when-mark-doors { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
@media (max-width: 1100px) {
  .listing--name-size-when-mark-doors { grid-template-columns: minmax(0, 1fr) auto auto; }
  .listing--name-size-when-mark-doors > .listing-row > :nth-child(2), .listing--name-size-when-mark-doors > .listing-row > :nth-child(3) { display: none; }
  .listing--name-size-when-mark-doors > .listing-row--head > div { display: none; }
}
/* Memory's old key list: the pick box, the key, its size, its change, its marks, its doors. */
.listing--check-name-size-when-mark-doors { grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; }
@media (max-width: 1100px) {
  .listing--check-name-size-when-mark-doors { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .listing--check-name-size-when-mark-doors > .listing-row > :nth-child(3), .listing--check-name-size-when-mark-doors > .listing-row > :nth-child(4) { display: none; }
}
/* Memory's file rows (fold rows): at 1100px the size went to a line of its own and the doors under it. */
.listing--mark-name-meta-doors { grid-template-columns: auto minmax(0, 1fr) auto auto; }
@media (max-width: 1100px) {
  .listing--mark-name-meta-doors { grid-template-columns: auto minmax(0, 1fr); }
  .listing--mark-name-meta-doors > .listing-row > :nth-child(-n+3) { border-bottom: 0; padding-bottom: .15rem; }
  .listing--mark-name-meta-doors > .listing-row > :nth-child(n+3) { grid-column: 1 / -1; padding-top: 0; }
  .listing--mark-name-meta-doors > .listing-row > :nth-child(4) { justify-content: flex-start; flex-wrap: wrap; padding-top: .1rem; }
}
/* Memory's key rows and its "who else sees" rows (fold rows): at 1100px each part took a line of its own. */
.listing--key-doors { grid-template-columns: minmax(0, 1fr) auto; }
.listing--name-kind-doors { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 1100px) {
  .listing--key-doors, .listing--name-kind-doors { grid-template-columns: minmax(0, 1fr); }
  :is(.listing--key-doors, .listing--name-kind-doors) > .listing-row > div { border-bottom: 0; padding-top: 0; padding-bottom: .15rem; }
  :is(.listing--key-doors, .listing--name-kind-doors) > .listing-row > div:first-child { padding-top: .7rem; }
  :is(.listing--key-doors, .listing--name-kind-doors) > .listing-row > div:last-child { padding-bottom: .7rem; border-bottom: 1px solid var(--border); }
  :is(.listing--key-doors, .listing--name-kind-doors) > .listing-row > .listing-doors { justify-content: flex-start; flex-wrap: wrap; padding-top: .1rem; }
}
/* Rows that kept their one line at every width: the collection, the workspace's new spaces and
   sources, and a node's entries (spaces and approvals take the name-state cut with listing--cols). */
.listing--mark-name-doors { grid-template-columns: auto minmax(0, 1fr) auto; }
.listing--mark-name-tags-doors { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.listing--name-tags-doors { grid-template-columns: minmax(0, 1fr) auto auto; }
/* cuts: group 6 */
.listing--name-runs-access-last-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 6.5rem) minmax(0, 6.5rem) minmax(0, 7.5rem) 3rem; }
.listing--n-name-desc-state { grid-template-columns: 2rem minmax(9rem, 12rem) minmax(0, 1fr) auto; }
.listing--name-count-when-state { grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 9rem) 5rem; }
@media (max-width: 1100px) {
  .listing--name-runs-access-last-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem) 3rem; }
  .listing--name-runs-access-last-doors > .listing-row > :nth-child(2), .listing--name-runs-access-last-doors > .listing-row > :nth-child(3) { display: none; }
  .listing--name-runs-access-last-doors > .listing-row--head > div { display: none; }
}
@media (max-width: 700px) {
  .listing--name-runs-access-last-doors { grid-template-columns: minmax(0, 1fr) 3rem; }
  .listing--name-runs-access-last-doors > .listing-row > :nth-child(4) { display: none; }
  .listing--name-count-when-state { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 6rem) 4.5rem; gap: 0 .6rem; }
}
/* cuts: group 7 (the classic tables of Settings: P&L, usage, the AI spend, security, an agent's
   internal jobs). A figure cell (.listing-n) sits at the right of its column. */
.listing-row > .listing-n { justify-items: end; text-align: right; white-space: nowrap; }
.listing--name-n-n { grid-template-columns: minmax(0, 1fr) auto auto; }
.listing--name-n-n-n { grid-template-columns: minmax(0, 1fr) minmax(4.5rem, auto) minmax(4.5rem, auto) minmax(4rem, auto); }
.listing--name-n-n-n-n { grid-template-columns: minmax(0, 1fr) minmax(4rem, auto) minmax(4rem, auto) minmax(4rem, auto) minmax(4.5rem, auto); }
.listing--name-desc-state-doors { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) auto auto; }
@media (max-width: 560px) {
  .listing--name-n-n-n, .listing--name-n-n-n-n { gap: 0 .6rem; }
}
/* cuts: group 8 (the lists held back while the line under a name was a question). Where a list kept
   its heading row on a phone, its cut shows the heading row again under 860px. */
/* Discover: the map of kinds; the entries (when first); the hits. At 1100px the kind and place went. */
.listing--n-name-where-doors { grid-template-columns: 4.4rem minmax(0, 1fr) minmax(0, 1fr) 3.5rem; }
.listing--when-name-where-doors { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 13rem) 3.5rem; }
.listing--name-where-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 13rem) 3.5rem; }
@media (max-width: 1100px) {
  .listing--n-name-where-doors { grid-template-columns: 3.6rem minmax(0, 1fr) 3.5rem; }
  .listing--when-name-where-doors { grid-template-columns: 5rem minmax(0, 1fr) 3.5rem; }
  .listing--name-where-doors { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  :is(.listing--n-name-where-doors, .listing--when-name-where-doors) > .listing-row > :nth-child(3), .listing--name-where-doors > .listing-row > :nth-child(2) { display: none; }
}
@media (max-width: 860px) {
  :is(.listing--n-name-where-doors, .listing--when-name-where-doors) > .listing-row--head > div { display: grid; }
}
/* Boards: the board, its visibility, its notices, the latest, a door. At 900px the heading row, the
   notices and the latest went. */
.listing--name-state-count-last-doors { grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 8rem) minmax(0, 11rem) 3.5rem; }
@media (max-width: 900px) {
  .listing--name-state-count-last-doors { grid-template-columns: minmax(0, 1fr) 5rem 3.5rem; }
  .listing--name-state-count-last-doors > .listing-row--head > div, .listing--name-state-count-last-doors > .listing-row > :nth-child(3), .listing--name-state-count-last-doors > .listing-row > :nth-child(4) { display: none; }
}
/* Knowledge: the packages (name, entries, sharing, changed, a door), the organisms' packages (name,
   entries, when), the library (name, kind, entries, clonable, a door). At 1100px the middle columns
   went; the packages keep their heading row on a phone. A pasted package's entries: its tag, then
   the entry, at every width. */
.listing--name-count-words-when-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 9rem) minmax(0, 12rem) 6rem 3.5rem; }
.listing--name-count-when { grid-template-columns: minmax(0, 1fr) minmax(0, 9rem) minmax(0, 12rem); }
.listing--name-kind-count-state-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) minmax(0, 9rem) 6rem 3.5rem; }
.listing--tag-name { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 1100px) {
  .listing--name-count-words-when-doors { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .listing--name-count-when { grid-template-columns: minmax(0, 1fr); }
  .listing--name-kind-count-state-doors { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  :is(.listing--name-count-words-when-doors, .listing--name-count-when, .listing--name-kind-count-state-doors) > .listing-row > :is(:nth-child(2), :nth-child(3), :nth-child(4)) { display: none; }
}
@media (max-width: 860px) {
  .listing--name-count-words-when-doors > .listing-row--head > div { display: grid; }
}
/* Offers: the deliveries (when, what came back, the agent, how it went, a door), the catalogue (the
   offer, what you get, cost and time, trust, a door), the selling register (the offer, who sees it,
   the price, a door). At 1100px the middle columns went; each keeps its heading row on a phone. What
   the AI found: a hit's name with its words under it, and a door, at every width. */
.listing--when-name-who-state-doors { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 10rem) minmax(0, 7rem) 3.5rem; }
.listing--name-get-cost-trust-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) minmax(0, 9rem) minmax(0, 8rem) 3.5rem; }
.listing--name-state-price-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) minmax(0, 11rem) 6rem; }
.listing--hit-doors { grid-template-columns: minmax(0, 1fr) 5rem; }
@media (max-width: 1100px) {
  .listing--when-name-who-state-doors { grid-template-columns: 5rem minmax(0, 1fr) 3.5rem; }
  .listing--name-get-cost-trust-doors { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .listing--name-state-price-doors { grid-template-columns: minmax(0, 1fr) 5rem; }
  .listing--when-name-who-state-doors > .listing-row > :is(:nth-child(3), :nth-child(4)), .listing--name-get-cost-trust-doors > .listing-row > :is(:nth-child(2), :nth-child(3), :nth-child(4)), .listing--name-state-price-doors > .listing-row > :is(:nth-child(2), :nth-child(3)) { display: none; }
}
@media (max-width: 860px) {
  :is(.listing--when-name-who-state-doors, .listing--name-get-cost-trust-doors, .listing--name-state-price-doors) > .listing-row--head > div { display: grid; }
}
/* Scheduler: what fires next and the rarer ones (when, the schedule, who runs it, how soon), what is
   coming (when, the zone), the register (the schedule, when, who, the last run, the runs, a door),
   an agent's own jobs (the job, when, its state). At 1100px who, the last run and the runs went; the
   register keeps its heading row on a phone. The register's other columns add up to more than the
   page's main column below about 1400px, which left its name no width at all (the old rows drew the
   names over the next column): its name keeps 10rem, as the calibrator's name does. */
.listing--when-name-who-in { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 12rem) 6.5rem; }
.listing--when-words { grid-template-columns: 6rem minmax(0, 1fr); }
.listing--name-when-who-last-n-doors { grid-template-columns: minmax(10rem, 1fr) minmax(0, 10rem) minmax(0, 12rem) minmax(0, 11rem) 3.5rem 3.5rem; }
.listing--name-when-state { grid-template-columns: minmax(0, 1fr) minmax(0, 14rem) 6rem; }
@media (max-width: 1100px) {
  .listing--when-name-who-in { grid-template-columns: 5rem minmax(0, 1fr) 5.5rem; }
  .listing--when-words { grid-template-columns: 5rem minmax(0, 1fr); }
  .listing--name-when-who-last-n-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 9rem) 3rem; }
  .listing--name-when-state { grid-template-columns: minmax(0, 1fr) minmax(0, 9rem); }
  :is(.listing--when-name-who-in, .listing--name-when-state) > .listing-row > :nth-child(3), .listing--name-when-who-last-n-doors > .listing-row > :is(:nth-child(3), :nth-child(4), :nth-child(5)) { display: none; }
}
@media (max-width: 860px) {
  .listing--name-when-who-last-n-doors > .listing-row--head > div { display: grid; }
}
/* Workflows: the workflow, its trigger, the last run's word, what happened, the doors. Its fixed
   columns left the name no width below about 1400px (the old rows drew the name one letter a line):
   the name keeps 10rem. At 900px the heading row, the trigger and what happened go; the name and
   the last run's word share a line and the doors take the line under them (the old rows put three
   cells into two columns, so a row's doors landed on the next row's line). */
.listing--name-trigger-state-words-doors { grid-template-columns: minmax(10rem, 1fr) minmax(0, 9rem) 7rem minmax(0, 14rem) 8.5rem; }
@media (max-width: 900px) {
  .listing--name-trigger-state-words-doors { grid-template-columns: minmax(0, 1fr) 7rem; }
  .listing--name-trigger-state-words-doors > .listing-row--head > div, .listing--name-trigger-state-words-doors > .listing-row > :is(:nth-child(2), :nth-child(4)) { display: none; }
  .listing--name-trigger-state-words-doors > .listing-row > :is(:nth-child(1), :nth-child(3)) { border-bottom: 0; padding-bottom: .1rem; }
  .listing--name-trigger-state-words-doors > .listing-row > :nth-child(5) { grid-column: 1 / -1; justify-content: flex-start; padding-top: .1rem; }
}
/* Contacts' "Where" and what you share with a person: one name to a row, two rows to a line; on a
   phone they stack, one to a line. */
.listing--name-name { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Capabilities: an opened provider's members (the id, what it does, the calls, the try door); on a
   phone they stack. */
.listing--id-desc-n-doors { grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) 6rem auto; }
/* cuts: group 9 (the other list kinds of Settings, drawn by the List component, components/List.js).
   Each keeps the columns and the narrow rules its own sheet had. */
/* A search's hits (organisms, a workspace): one name to a row, the words under it. */
.listing--name { grid-template-columns: minmax(0, 1fr); }
/* A checklist under a field (the password rules): the mark, the words. */
.listing--mark-name { grid-template-columns: auto minmax(0, 1fr); }
/* What an address is used for (Email): two uses to a line, one on a phone. */
.listing--mark-name-mark-name { grid-template-columns: 1rem minmax(0, 1fr) 1rem minmax(0, 1fr); }
/* A task's to-dos: the tick, the to-do with its lines, its estimate and when it was done. */
.listing--mark-name-meta { grid-template-columns: auto minmax(0, 1fr) auto; }
/* The devices signed in (Access): the device, its sessions, when last used. */
.listing--name-n-when { grid-template-columns: minmax(0, 1.3fr) 7rem 9rem; }
/* An access group's rows (Data wallet): when, the key, what came of it. */
.listing--when-name-state { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 9rem; }
/* What was sent (Email): when, what, by which road, a door. */
.listing--when-name-via-doors { grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 12rem) auto; }
/* The notifications (Notifications): when, who, what, the doors. */
.listing--when-who-name-doors { grid-template-columns: 6.5rem minmax(0, 9rem) minmax(0, 1fr) auto; }
/* Organisms and workspaces: the mark, the name, its marks, its counts, the door and the menu. */
.listing--mark-name-tags-stats-doors { grid-template-columns: 2.2rem minmax(0, 1fr) 8rem auto auto; }
/* The type's tag keeps 6rem and is cut with … (a type is free text up to 40 signs), so every lock
   after it stands at the same place down the list; the full word is on its title. */
.listing--mark-name-tags-stats-doors > .listing-row > :nth-child(3) > .poster-chip:first-child { min-width: 6rem; max-width: 100%; box-sizing: border-box; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A pick list (Packages, the apps to put in a package): the box, the app, what it loads. */
.listing--check-name-desc { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 860px) {
  .listing--mark-name-mark-name { grid-template-columns: 1rem minmax(0, 1fr); }
  .listing--name-n-when { grid-template-columns: minmax(0, 1fr) 4rem; }
  .listing--name-n-when > .listing-row--head > div { display: grid; }
  .listing--name-n-when > .listing-row > :nth-child(3) { display: none; }
  .listing--when-name-via-doors { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: dense; }
  .listing--when-name-via-doors > .listing-row > :is(:nth-child(1), :nth-child(3)) { grid-column: 1; border-bottom: 0; padding-bottom: 0; }
  .listing--when-name-via-doors > .listing-row > :nth-child(2) { grid-column: 1; padding-top: .1rem; }
  .listing--when-name-via-doors > .listing-row > :nth-child(4) { grid-column: 2; grid-row: span 3; align-self: center; }
  .listing--when-who-name-doors { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: dense; }
  .listing--when-who-name-doors > .listing-row > :nth-child(1) { grid-column: 1; border-bottom: 0; padding-bottom: 0; }
  .listing--when-who-name-doors > .listing-row > :nth-child(1) b { display: inline; margin-right: .5rem; }
  .listing--when-who-name-doors > .listing-row > :nth-child(2) { display: none; }
  .listing--when-who-name-doors > .listing-row > :nth-child(3) { grid-column: 1 / -1; padding-top: .1rem; border-bottom: 0; padding-bottom: .4rem; }
  .listing--when-who-name-doors > .listing-row > :nth-child(4) { grid-column: 1 / -1; padding-top: 0; white-space: normal; justify-content: flex-start; flex-wrap: wrap; }
  .listing--mark-name-tags-stats-doors { grid-template-columns: 2.2rem minmax(0, 1fr) auto; grid-auto-flow: dense; }
  .listing--mark-name-tags-stats-doors > .listing-row > :nth-child(1) { grid-column: 1; grid-row: span 3; align-content: start; }
  .listing--mark-name-tags-stats-doors > .listing-row > :nth-child(2) { grid-column: 2; border-bottom: 0; padding-bottom: .1rem; }
  .listing--mark-name-tags-stats-doors > .listing-row > :nth-child(3) { grid-column: 2 / 4; border-bottom: 0; padding-top: 0; padding-bottom: .1rem; }
  .listing--mark-name-tags-stats-doors > .listing-row > :nth-child(4) { grid-column: 2 / 4; padding-top: .1rem; }
  .listing--mark-name-tags-stats-doors > .listing-row > :nth-child(5) { grid-column: 3; border-bottom: 0; padding-bottom: .1rem; }
  .listing--check-name-desc { grid-template-columns: auto minmax(0, 1fr); }
  .listing--check-name-desc > .listing-row > :nth-child(3) { grid-column: 2; }
}
/* App development's three pitfall lists: a state mark in its own column (a severity Status, a tier
   Tag) that keeps its own width, the pitfall, where it applies, the doors. On a phone the mark keeps
   its column and the rest stands under the name (page group G6; formerly appdev-poster.css .ad-pl). */
.listing--state-name-who-doors { grid-template-columns: 5.6rem minmax(0, 1fr) minmax(8rem, 12rem) auto; }
.listing--state-name-who-doors > .listing-row:not(.listing-row--head) > :first-child > * { justify-self: start; white-space: nowrap; }
@media (max-width: 860px) {
  .listing--state-name-who-doors { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .listing--state-name-who-doors > .listing-row > :nth-child(2) { border-bottom: 0; padding-bottom: .2rem; }
  .listing--state-name-who-doors > .listing-row > :nth-child(3) { grid-column: 2; border-bottom: 0; padding-top: 0; padding-bottom: .2rem; }
  .listing--state-name-who-doors > .listing-row > :nth-child(4) { grid-column: 2; justify-content: flex-start; padding-top: 0; flex-wrap: wrap; }
}
/* The Apps page's condition rows: a count in the poster face, what it counts with why, the way to
   those apps. On a phone the way stands under the words (page group G6; formerly apps-poster.css
   .ap-kn). */
.listing--n-name-doors { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
@media (max-width: 860px) {
  .listing--n-name-doors { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .listing--n-name-doors > .listing-row > :nth-child(2) { border-bottom: 0; padding-bottom: .2rem; }
  .listing--n-name-doors > .listing-row > :nth-child(3) { grid-column: 2; justify-content: flex-start; padding-top: 0; }
}

/* The operator pages' tables (page group G8): the Packages page's packages, installs, store listings,
   review queue and decisions, and the MSM page's manifests, each with main's columns
   (admin-packages.css .adm-pk-prow / -irow / -lrow / -qrow / -hrow, admin-msm.css .adm-msm-tbl). They
   stack on a phone as every listing does, each cell saying its column (List labels). */
.listing--name-ver-kind-n-state { grid-template-columns: minmax(0, 1fr) 9.25rem 6.75rem 5.25rem 5.75rem; }
.listing--name-id-who-ver-n-when { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 7.5rem 9.25rem 4.9rem 8.25rem; }
.listing--name-id-score-n-mark-doors { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 6.25rem 5.1rem 5.25rem 6.75rem; }
.listing--name-id-who-when-mark { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 8.75rem 7.5rem 3rem; }
.listing--name-state-words-when { grid-template-columns: minmax(0, 1.3fr) 6.75rem minmax(0, 1fr) 8.25rem; }
.listing--name-where-what-who-when-doors { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, .8fr) auto; }
/* The Skills page's rows: the name, its tags, the day it changed, the doors (admin-skills.css .adm-sk-rtop). */
.listing--name-tags-when-doors { grid-template-columns: minmax(0, 1fr) 16.25rem 5.6rem auto; }

/* The operator pages' lists of page group G4 (Owners, Agents, GHII, Agent integration, Organism
   ownership, Organisation sign-in), with main's column widths (admin-owners.css .adm-own-tr,
   admin-agents.css .adm-ag-row / -orow, admin-ghii.css .adm-gh-row, admin-agent-integration.css
   .adm-agi-row / -brow, admin-organism-ownership.css .adm-oo-row / -tr, admin-sso.css .adm-sso-step).
   The numbered lists keep their numeral on a phone: the name, then its day and its doors under it. */
.listing--n-name-n-when-doors { grid-template-columns: 2.4rem minmax(0, 1fr) 4.5rem 7rem auto; }
.listing--n-name-tags-n-when-doors { grid-template-columns: 2.4rem minmax(0, 1fr) minmax(0, 15rem) 4.5rem 6.5rem auto; }
.listing--name-who-tags-n-when-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 7.6rem) minmax(0, 18.25rem) 3.6rem 6.5rem auto; }
.listing--name-n-n-bar-doors { grid-template-columns: minmax(0, 1fr) 6rem 6rem 9.4rem auto; }
.listing--name-n-code-code-bar { grid-template-columns: minmax(0, 15.6rem) 5rem minmax(0, 10.6rem) minmax(0, 1fr) 11.25rem; }
.listing--name-n-n-bar { grid-template-columns: minmax(0, 16.25rem) 5.6rem 5rem minmax(0, 1fr); }
.listing--name-n-desc { grid-template-columns: minmax(0, 16.25rem) 6.9rem minmax(0, 1fr); }
.listing--name-desc-state-mark-when-when-doors { grid-template-columns: minmax(8rem, 1.6fr) minmax(0, 1fr) auto 4.75rem minmax(0, 1fr) 7.25rem minmax(0, 1.2fr); }
.listing--name-kind-state-when { grid-template-columns: minmax(0, 1fr) 5.5rem 5rem 6rem; }
.listing--n-name-state { grid-template-columns: 2.75rem minmax(0, 1fr) 9.4rem; }
/* A bar in a list cell stands in the middle of its line. */
:is(.listing--name-n-n-bar-doors, .listing--name-n-code-code-bar, .listing--name-n-n-bar) > .listing-row > :nth-child(4):not(.listing-open),
.listing--name-n-code-code-bar > .listing-row > :nth-child(5) { align-content: center; }
@media (max-width: 1100px) {
  /* Organism ownership: the created day goes (main hid it at 1100). */
  .listing--n-name-tags-n-when-doors { grid-template-columns: 2.4rem minmax(0, 1fr) minmax(0, 12rem) 4rem auto; }
  .listing--n-name-tags-n-when-doors > .listing-row > :nth-child(5) { display: none; }
}
@media (max-width: 860px) {
  .listing--n-name-n-when-doors { grid-template-columns: 2rem minmax(0, 1fr) 3.5rem; }
  .listing--n-name-n-when-doors > .listing-row > :nth-child(-n+4) { border-bottom: 0; padding-bottom: .15rem; }
  .listing--n-name-n-when-doors > .listing-row > :nth-child(4) { grid-column: 2 / -1; padding-top: 0; }
  .listing--n-name-n-when-doors > .listing-row > :nth-child(5) { grid-column: 2 / -1; justify-content: flex-start; padding-top: 0; }
  /* Organism ownership: the numeral, the name; the owners and the doors under the name (main hid
     the people count at 700 and the day at 1100). */
  .listing--n-name-tags-n-when-doors { grid-template-columns: 2rem minmax(0, 1fr); }
  .listing--n-name-tags-n-when-doors > .listing-row > :is(:nth-child(4), :nth-child(5)) { display: none; }
  .listing--n-name-tags-n-when-doors > .listing-row > :nth-child(-n+3) { border-bottom: 0; padding-bottom: .15rem; }
  .listing--n-name-tags-n-when-doors > .listing-row > :nth-child(3) { grid-column: 2; padding-top: 0; }
  .listing--n-name-tags-n-when-doors > .listing-row > :nth-child(6) { grid-column: 2; justify-content: flex-start; padding-top: 0; }
  /* A step: its number, then its words; the state under the words. */
  .listing--n-name-state { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .listing--n-name-state > .listing-row > :nth-child(-n+2) { border-bottom: 0; padding-bottom: .15rem; }
  .listing--n-name-state > .listing-row > :nth-child(3) { grid-column: 2; padding-top: 0; justify-content: flex-start; justify-items: start; text-align: left; }
  .listing--name-kind-state-when { grid-template-columns: minmax(0, 1fr) 4.5rem 3.5rem; }
  .listing--name-kind-state-when > .listing-row > :nth-child(4) { display: none; }
}

/* The operator pages' tables (admin page group G7): the Cortex page's cortexes and one cortex's
   versions, the CSM page's registered CSMs, one CSM's fields and what a CSM refuses, the Knowledge
   page's packages, and an extension's actions, each with main's columns (admin-cortex.css
   .adm-cx-tbl / .adm-cx-vrow, admin-csm.css .adm-csm-row / .adm-csm-frow / .adm-csm-ref,
   admin-knowledge.css .adm-kn-tbl, admin-extensions.css .adm-ex-act). */
.listing--name-ver-who-n-kinds-doors { grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 9rem) 4.5rem minmax(0, 9rem) auto; }
.listing--name-n-where-state-doors { grid-template-columns: minmax(0, 13.75rem) 9.4rem minmax(0, 1fr) 9.4rem auto; }
.listing--name-who-kind-n-seen-review-when-doors { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 4.5rem minmax(0, .8fr) minmax(0, 1fr) 6.5rem auto; }
.listing--name-kind-words { grid-template-columns: minmax(0, 12rem) 7.5rem minmax(0, 1fr); }
.listing--name-words { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
.listing--name-words-when { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
.listing--tag-name-desc { grid-template-columns: 3.9rem minmax(0, 1fr) minmax(0, 6rem); }
@media (max-width: 1100px) {
  .listing--name-n-where-state-doors { grid-template-columns: minmax(0, 11.9rem) 8.1rem minmax(0, 1fr) 8.1rem auto; }
}
@media (max-width: 900px) {
  .listing--name-kind-words { grid-template-columns: minmax(0, 1fr) auto; }
  .listing--name-kind-words > .listing-row > :nth-child(1), .listing--name-kind-words > .listing-row > :nth-child(2) { border-bottom: 0; padding-bottom: .1rem; }
  .listing--name-kind-words > .listing-row > :nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
}
@media (max-width: 760px) {
  .listing--tag-name-desc { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .listing--tag-name-desc > .listing-row > :nth-child(1), .listing--tag-name-desc > .listing-row > :nth-child(2) { border-bottom: 0; padding-bottom: .1rem; }
  .listing--tag-name-desc > .listing-row > :nth-child(3) { grid-column: 1 / -1; padding-top: 0; text-align: left; }
}

/* The operator pages' tables (page group G6): Email's automatic messages (name-desc-code-n), Push's
   subscriptions (name-code-when-when), Scheduler's agenda, register and run log, Federation's peers,
   book, directory and request history, and Genesis' peers (name-code-state-when-doors), each with
   main's columns (admin-email.css .adm-em-row, admin-push.css .adm-pu-srow, admin-scheduler.css
   .adm-sch-arow / -row / -lrow, admin-federation.css .adm-fed-tbl). They stack on a phone as every
   listing does, each cell saying its column (List labels). */
.listing--name-desc-code-n { grid-template-columns: minmax(0, 1fr) minmax(0, 18.75rem) minmax(0, 9.4rem) 5.75rem; }
.listing--name-code-when-when { grid-template-columns: minmax(6.9rem, 1fr) minmax(0, 2.4fr) 9.25rem 9.25rem; }
.listing--when-name-kind-who { grid-template-columns: 8.75rem minmax(0, 1fr) minmax(0, 10.6rem) minmax(0, 12.5rem); }
.listing--name-when-who-state-when-doors { grid-template-columns: minmax(10rem, 1fr) minmax(0, 10.6rem) minmax(0, 9.4rem) minmax(0, 10rem) minmax(0, 7.5rem) auto; }
.listing--when-name-kind-state-n-desc { grid-template-columns: 9.4rem minmax(0, 1fr) minmax(0, 7.5rem) minmax(0, 8.1rem) 5.6rem minmax(0, 14.4rem); }
.listing--name-who-code-desc-desc { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 8rem) minmax(0, 1fr) minmax(0, 1fr); }
.listing--state-name-code-desc { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 10rem); }
.listing--name-code-state-when-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 8rem) 9rem auto; }
/* Federation's peers: eight columns, the policy switches a fixed 13rem (a minimum let the longest
   line widen the column past the page). Main turned the table into one block per peer at 1100px,
   not at the phone's 860px: at 1024 the row's own actions stood past the edge of the page. */
.listing--name-state-kind-code-when-desc-edit-doors { grid-template-columns: minmax(8rem, 1.2fr) minmax(0, 1fr) minmax(0, 5.5rem) minmax(0, 7rem) minmax(0, 7.5rem) minmax(0, 1.2fr) 13rem auto; }
@media (max-width: 1100px) {
  .listing--name-state-kind-code-when-desc-edit-doors { grid-template-columns: minmax(0, 1fr); }
  .listing--name-state-kind-code-when-desc-edit-doors > .listing-row--head > div { display: none; }
  .listing--name-state-kind-code-when-desc-edit-doors > .listing-row > div:where(:not(.listing-open)) { border-bottom: 0; padding-top: 0; padding-bottom: .3rem; }
  .listing--name-state-kind-code-when-desc-edit-doors > .listing-row > div:where(:not(.listing-open)):first-child { padding-top: .8rem; }
  .listing--name-state-kind-code-when-desc-edit-doors > .listing-row > div:last-child { padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
  .listing--name-state-kind-code-when-desc-edit-doors > .listing-row > .listing-doors { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
  .listing--name-state-kind-code-when-desc-edit-doors.list--labels > .listing-row > [data-label]:not(:first-child)::before {
    content: attr(data-label) ': '; font-family: var(--font-mono); font-size: .68rem; font-weight: 400; color: var(--text-dim);
    text-transform: var(--shape-case-label); letter-spacing: var(--shape-tracking-label);
  }
}

/* The operator pages' tables (page group G5), each with main's columns: Actions (admin
   actions-tab.js table), Capabilities (capabilities-tab.js table), Agent tasks (agent-tasks-tab.js
   table), the chat sessions (chat-instances-tab.js table), Applications (admin-apps.css .adm-ap-tbl),
   Boards (admin-boards.css .adm-brd-row), Memory's records, its reach and a record's versions
   (admin-memory.css .adm-mem-row-top, .adm-mem-rung, .adm-mem-hrow), Realtime's rooms and a room's
   people (admin-realtime.css .adm-rt-row, .adm-rt-prow) and Work's items (admin-work.css
   .adm-work-row). They stack on a phone as every listing does. */
.listing--id-name-who-state-n-tags { grid-template-columns: minmax(0, 11rem) minmax(0, 1.4fr) minmax(0, 9rem) 7rem 5rem minmax(0, 1fr); }
.listing--id-name-in-out-state-mark-n-n { grid-template-columns: minmax(0, 11rem) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 6.5rem 2.5rem 5rem 4rem; }
.listing--id-name-state-n-when-when { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 6rem 4.5rem 9rem 9rem; }
.listing--name-kind-id-when-state-doors { grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 11rem) 9.5rem 5.5rem auto; }
.listing--name-who-n-n-n-when-doors { grid-template-columns: minmax(0, 1.6fr) minmax(0, 9rem) 5rem 4.5rem 4rem 8.5rem auto; }
.listing--name-who-state-count-when-doors { grid-template-columns: minmax(0, 1fr) 9.5rem 7.5rem 7.5rem 5.5rem auto; }
.listing--name-who-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 13.75rem) auto; }
.listing--tag-n-name-doors { grid-template-columns: 8rem 4.75rem minmax(0, 1fr) auto; }
.listing--tag-when-who-n { grid-template-columns: 3.75rem 9.5rem minmax(0, 1fr) 5.5rem; }
.listing--n-name-who-count-when-doors { grid-template-columns: 2.2rem minmax(0, 1fr) 15rem 6rem 6rem auto; }
.listing--name-id-when { grid-template-columns: minmax(0, 1fr) 10rem 6rem; }
.listing--n-id-state-name-who-n-when { grid-template-columns: 2.2rem 11.5rem 6.5rem minmax(0, 1fr) 14rem 5rem 7rem; }

/* The operator pages' tables of admin page group G3 (Statistics, Usage, Database, Metrics), with
   main's column widths: a counter with its state, its number and its days (admin-stats.css
   .adm-st-crow); what was sent and whether it arrived (the .adm-st-tbl of section 05); the models,
   and the database's tables, ranked with a share bar (admin-usage.css .adm-us-brow,
   admin-database.css .adm-db-row); who spent (the .adm-us-tbl of section 04); the memory ledger
   (admin-metrics-poster.css .adm-mx-ledger). They stack on a phone as every listing does, each cell
   saying its column (List labels). */
.listing--name-state-n-trend { grid-template-columns: minmax(0, 1fr) 7.5rem 9.4rem 13.1rem; }
.listing--name-desc-n-n-n-n { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) repeat(4, minmax(4.5rem, auto)); }
.listing--name-n-n-n-bar { grid-template-columns: minmax(0, 1fr) 6.9rem 6rem 6rem 14.4rem; }
.listing--name-n-n-n-n-n-state { grid-template-columns: minmax(0, 1fr) repeat(5, minmax(4rem, auto)) auto; }
.listing--name-n-bar-desc { grid-template-columns: 14.4rem 6.9rem 10rem minmax(0, 1fr); }
:is(.listing--name-state-n-trend, .listing--name-n-n-n-bar) > .listing-row > :nth-child(4):not(.listing-open),
:is(.listing--name-n-n-n-bar) > .listing-row > :nth-child(5):not(.listing-open),
.listing--name-n-bar-desc > .listing-row > :nth-child(3):not(.listing-open) { align-content: center; }
@media (max-width: 1100px) {
  /* The days and the share go under the row (main's 1100px rules). */
  .listing--name-state-n-trend { grid-template-columns: minmax(0, 1fr) 6.9rem 7.5rem; }
  .listing--name-state-n-trend > .listing-row > :nth-child(4) { grid-column: 1 / -1; }
  .listing--name-n-n-n-bar { grid-template-columns: minmax(0, 1fr) 6.25rem 5.6rem 5.6rem; }
  .listing--name-n-n-n-bar > .listing-row > :nth-child(5) { grid-column: 1 / -1; }
}

/* The operator pages' lists of admin group G1 (Security, Compliance), with main's columns
   (admin-security.css .adm-sec-tbl and .adm-sec-irow, admin-compliance.css .adm-cmp-tbl): the refusal
   log (the time, the answer, the door kept at 15rem so a path reads as one, the source, the
   credential, the reason that gives), the refused-and-kept incidents (the state, what, who, when, the
   doors; at 1100px who and when stand under what and the doors under them), and the register (what,
   its class, its models, who answered, the door). They stack on a phone as every listing does. */
.listing--when-state-path-where-kind-desc { grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(15rem, 1.2fr) minmax(0, max-content) minmax(0, .8fr) minmax(0, 1.4fr); }
.listing--state-name-who-when-doors { grid-template-columns: 6rem minmax(0, 1fr) 13.75rem 11.9rem auto; }
.listing--name-state-meta-meta-doors { grid-template-columns: minmax(0, 1fr) max-content minmax(0, max-content) minmax(0, max-content) auto; }
@media (min-width: 861px) and (max-width: 1100px) {
  .listing--state-name-who-when-doors { grid-template-columns: 6rem minmax(0, 1fr); }
  .listing--state-name-who-when-doors > .listing-row > :nth-child(-n+4) { border-bottom: 0; padding-bottom: .2rem; }
  .listing--state-name-who-when-doors > .listing-row > :is(:nth-child(3), :nth-child(4)) { grid-column: 2; padding-top: 0; }
  .listing--state-name-who-when-doors > .listing-row > :nth-child(5) { grid-column: 1 / -1; justify-content: flex-start; padding-top: .2rem; }
}

/* The app catalogue's detail rows (appcat), with the old catalogue's columns: a switch with its
   meaning and its action (.mk-row: the name 220px, the meaning, the action), a data map's key with
   what it holds and where (.dtl-dm-head: 260px, the words, 200px), a count per place (.vis-table),
   and the two logs (.mk-log: when, the act, by whom; the declarations add the act's word). */
.listing--name-meaning-doors { grid-template-columns: 13.75rem minmax(0, 1fr) auto; gap: 0 1.5rem; }
.listing--key-desc-who { grid-template-columns: 16.25rem minmax(0, 1fr) 12.5rem; gap: 0 1rem; }
.listing--key-desc-who > .listing-row > .listing-who { text-align: right; font-family: var(--font-mono); font-size: .75rem; font-weight: 400; color: var(--text-dim); }
.listing--name-n { grid-template-columns: minmax(0, 1fr) auto; }
.listing--when-name-who { grid-template-columns: 6rem minmax(0, 1fr) auto; }
.listing--when-kind-name-who { grid-template-columns: 6rem auto minmax(0, 1fr) auto; }
:is(.listing--when-name-who, .listing--when-kind-name-who) > .listing-row > .listing-who { font-family: var(--font-mono); font-size: .72rem; font-weight: 400; color: var(--text-dim); }
/* The app catalogue's sale and cost rows (appcat, detail builder C): a tool with its price and how a
   bought call is delivered, then its doors (the old .mz-tool: the name, 150px, 180px, the doors, 22px
   apart), and a contract with its price, rake, budget and state (the old .dtl-status-row of cost.js). */
.listing--name-price-delivery-doors { grid-template-columns: minmax(0, 1fr) 150px 180px auto; gap: 0 22px; }
/* …drawn as the old .mz-tool drew it (appcat sections-d, parity): one rule under the whole row (the
   22px between the columns is the cells' own right padding, so the rule runs on), 14px above and
   under, everything at the row's top; the heavy rule over the list when it follows the chapter's
   lead (the old :first-of-type); the name 1rem, what the tool does in the lighter grey; the price and
   the delivery each a coral label 3px over its value (.mz-fact), the price bold, "in EXCHANGE" a
   green typewriter word after it, the binding a small grey typewriter line; the doors 16px apart; a
   reason the tool cannot be listed under the row in the warning colour (.od-blocked). */
.listing.listing--name-price-delivery-doors { grid-template-columns: minmax(0, 1fr) 172px 202px auto; gap: 0; }
.og-lead + .listing--name-price-delivery-doors { border-top: var(--shape-frame-heavy) solid var(--shape-rule-colour); }
.listing--name-price-delivery-doors > .listing-row > div:not(.list-below) { display: block; padding: 14px 22px 14px 0; align-content: start; }
.listing--name-price-delivery-doors > .listing-row > div.listing-doors { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 16px; padding-right: 0; }
.listing--name-price-delivery-doors > .listing-row:has(> .list-below) > div:not(.list-below) { padding-bottom: 0; }
.listing--name-price-delivery-doors > .listing-row > .list-below { padding: 12px 0 14px; border-bottom: 1px solid var(--border); font-size: .8rem; line-height: normal; color: var(--warn); }
.listing--name-price-delivery-doors > .listing-row > .listing-name { font-size: 1rem; font-weight: 800; line-height: normal; }
.listing--name-price-delivery-doors .listing-name > .list-desc { max-width: 60ch; margin: 3px 0 0; font-size: .88rem; font-weight: var(--font-poster-text-weight); line-height: 1.5; color: var(--text-muted); }
.listing--name-price-delivery-doors > .listing-row > div:is(:nth-child(2), :nth-child(3)) { font-size: .95rem; font-weight: 700; line-height: normal; color: var(--text); }
.listing--name-price-delivery-doors .poster-label--block { margin-bottom: 3px; font-size: .68rem; letter-spacing: .1em; line-height: normal; }
.listing--name-price-delivery-doors .tinted--fine { padding-left: 6px; font-family: var(--font-mono); font-size: .72rem; font-weight: 400; color: var(--success); }
.listing--name-price-delivery-doors .text-meta-sm { display: block; font-family: var(--font-mono); font-size: .75rem; font-weight: 400; color: var(--text-muted); overflow-wrap: anywhere; }
.listing--name-price-delivery-doors .listing-doors > .poster-action--small { font-size: .78rem; }
/* The row of doors under the list ("Add tool") stands 10px under its last rule. */
.listing--name-price-delivery-doors + .og-doors { margin-top: 10px; }
@media (max-width: 900px) {
  .listing.listing--name-price-delivery-doors { grid-template-columns: minmax(0, 1fr); }
  /* One column, 8px between the parts, the rule under the row's last part (.mz-tool at 900px). */
  .listing.listing--name-price-delivery-doors > .listing-row > div:not(.list-below) { padding: 0 0 8px; border-bottom: 0; }
  .listing.listing--name-price-delivery-doors > .listing-row > div:first-child { padding-top: 14px; }
  .listing.listing--name-price-delivery-doors > .listing-row > div.listing-doors { justify-content: flex-start; }
  .listing.listing--name-price-delivery-doors > .listing-row:not(:has(> .list-below)) > div.listing-doors { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .listing.listing--name-price-delivery-doors > .listing-row > .list-below { padding-top: 4px; }
}
.listing--name-price-rake-budget-state { grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 0 1.5rem; }
/* …drawn as the old cost.js drew it (appcat sections-d, parity): each contract its own wrapping line
   of facts, no rules, 10px between the facts and 8px under the line, their middles level; the
   capability first and widest (150px at least), its provider in the coral small capitals under it;
   each other fact a coral label 2px over its value (1.05rem bold), "(n left)" a coral label after the
   budget; the state (drawn by Note: a short typewriter state, or the chapter's grey line) as the old
   .dtl-sync chips. The cut is appcat's alone. */
.listing.listing--name-price-rake-budget-state { display: block; }
.listing--name-price-rake-budget-state > .listing-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.listing--name-price-rake-budget-state > .listing-row > div { display: block; padding: 0; border: 0; font-size: 1.05rem; font-weight: 700; line-height: normal; color: var(--text); }
.listing--name-price-rake-budget-state > .listing-row > .listing-name { flex: 1 1 0; min-width: 150px; font-size: 1.05rem; }
.listing--name-price-rake-budget-state .listing-name > small { margin-top: 2px; font-family: var(--font-body); font-size: .72rem; font-weight: 800; letter-spacing: var(--shape-tracking-label); text-transform: var(--shape-case-label); color: var(--accent); }
.listing--name-price-rake-budget-state .poster-label { font-size: .72rem; font-weight: 800; letter-spacing: var(--shape-tracking-label); line-height: normal; }
.listing--name-price-rake-budget-state .poster-label--block { margin-bottom: 2px; }@media (max-width: 860px) {
  .listing--name-price-rake-budget-state > .listing-row > div:where(:not(.listing-open)) { padding: 0; }
}

/* The app catalogue's rows (appcat, the shell): the number, the icon, the name with its line, what
   it does, its state, how often opened, the arrow (the old .cat-row grid: 36px 40px 5fr 7fr 170px
   60px 28px). Drawn with List index (list.css .list--index), which also carries its phone rules. */
.listing--n-mark-name-desc-state-n-arrow { grid-template-columns: 36px 40px minmax(0, 5fr) minmax(0, 7fr) 170px 60px 28px; }

@media (max-width: 860px) {
  .listing-row--head > div { display: none; }
  /* Stacked, the default: one column; a row's cells stack without a rule between them, and the rule
     falls after the last. A listing that keeps columns on a phone (.listing--cols) takes its cut's own
     narrow rules instead (they sit with the cut above). */
  .listing:where(:not(.listing--cols)) { grid-template-columns: minmax(0, 1fr); }
  .listing:where(:not(.listing--cols)) > .listing-row > div:where(:not(.listing-open)) { border-bottom: 0; padding-top: 0; padding-bottom: .15rem; }
  .listing:where(:not(.listing--cols)) > .listing-row > div:where(:not(.listing-open)):first-child { padding-top: .7rem; }
  .listing:where(:not(.listing--cols)) > .listing-row:not(.is-open) > div:last-child { padding-bottom: .7rem; border-bottom: 1px solid var(--border); }
  .listing:where(:not(.listing--cols)) > .listing-row > .listing-doors { justify-content: flex-start; padding-top: .1rem; flex-wrap: wrap; }
}