.cat-glyph { display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--g, none) center / contain no-repeat; mask: var(--g, none) center / contain no-repeat; }
.cat-glyph[data-glyph="search"] { --g: var(--glyph-search); } .cat-glyph[data-glyph="check"] { --g: var(--glyph-check); }
.cat-glyph[data-glyph="chev"] { --g: var(--glyph-chev); } .cat-glyph[data-glyph="back"] { --g: var(--glyph-back); } .cat-glyph[data-glyph="file"] { --g: var(--glyph-file); }
/* The views row: the board's chips, Match these cards dashed amber, the group switch and the find field. */
.cat-views { flex: none; display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 0 16px; border-bottom: 1px solid var(--hairline); background: var(--ground); }
.cat-chips { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-view { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 11px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm, 6px); font: 400 13px var(--sans); white-space: nowrap; cursor: pointer; text-decoration: none; }
.cat-view b { color: var(--muted); font: 500 12px var(--mono); }
.cat-view b:empty { display: none; }
.cat-view[aria-pressed="true"] { color: var(--emerald); font-weight: 600; background: var(--emerald-tint); border-color: var(--emerald-border); box-shadow: inset 0 -2px 0 var(--emerald); }
.cat-view[aria-pressed="true"] b { color: var(--emerald-body); }
.cat-view:focus-visible, .cat-seg button:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.cat-match { color: var(--amber); background: transparent; border-color: var(--amber-border); border-style: dashed; }
.cat-match b { color: var(--amber); font-weight: 600; }
.cat-sp { flex: 1; }
.cat-seg { flex: none; display: inline-flex; overflow: hidden; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm, 6px); }
.cat-seg button { min-height: 32px; padding: 6px 11px; color: var(--ink-2); background: transparent; border: 0; font: 400 13px var(--sans); white-space: nowrap; cursor: pointer; }
.cat-seg button + button { border-left: 1px solid var(--hairline); }
.cat-seg button[aria-pressed="true"] { color: var(--emerald); font-weight: 600; background: var(--selected); }
.cat-find { flex: none; display: flex; align-items: center; gap: 8px; width: 250px; min-height: 34px; padding: 0 10px; color: var(--muted); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm, 6px); }
.cat-find input { flex: 1; min-width: 0; height: 32px; padding: 0; color: var(--ink); background: transparent; border: 0; font: 400 13px var(--sans); outline: none; }
.cat-find:focus-within { border-color: var(--emerald-border); box-shadow: 0 0 0 2px var(--emerald-tint); }
body[data-page="catalog"] .app-body > main { padding: 4px 22px 18px; }
/* The status line keeps its room (the shell rule), so the list starts where the board puts it. */
.cat-list { display: flex; --outline-display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cat-panel { overflow: hidden; border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-1); }
.cat-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.cat-table th { height: 34px; padding: 6px 12px; color: var(--muted); background: var(--rail); border-bottom: 1px solid var(--hairline); font: 600 11px var(--sans); letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.cat-table th.r { text-align: right; }
.cat-table th.w-pr { width: 84px; }
.cat-table td { height: 36px; padding: 5px 12px; color: var(--ink-2); border-bottom: 1px solid var(--divider); font-size: 13px; vertical-align: middle; }
.cat-table tr > td:first-child { border-left: 2px solid transparent; }
.cat-table td.num { color: var(--ink); font: 500 13px var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cat-table td.num.q { color: var(--muted); }
.cat-table td.pr { width: 84px; color: var(--ink-2); font: 500 13px var(--mono); text-align: right; white-space: nowrap; }
.cat-table tr.rel td { height: 40px; background: var(--rail); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.cat-table tbody tr.rel:first-child td { border-top: 0; }
.cat-relh { display: flex; align-items: baseline; gap: 12px; }
.cat-relh b { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cat-relh span { color: var(--muted); font: 12px var(--mono); }
.cat-table tr.chd td { height: 46px; background: var(--surface); }
.cat-cardh { display: flex; align-items: center; gap: 14px; }
.cat-cardh .nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cat-cardh .nm b { color: var(--ink); font-size: 14px; font-weight: 600; }
.cat-cardh .nm b .no { margin-right: 6px; color: var(--quiet); font-family: var(--mono); font-weight: 500; }
.cat-cardh .nm span { color: var(--muted); font-size: 12px; }
.cat-cardh .r { display: flex; align-items: center; gap: 14px; margin-left: auto; color: var(--muted); font: 12px var(--mono); white-space: nowrap; }
.cat-cardh .r b { color: var(--ink); font: 500 13px var(--mono); }
.cat-bow { display: flex; align-items: flex-end; gap: 3px; }
.cat-bow i { display: block; width: 9px; height: 16px; background: var(--well); border: 1px solid var(--hairline); border-radius: 2px; }
.cat-bow i.h { background: var(--emerald); border-color: var(--emerald); }
.cat-bow i.s { background: transparent; border-color: var(--edge); border-style: dashed; }
.cat-bow i.cur { box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--emerald); }
.cat-table tr.par { cursor: pointer; }
.cat-table tr.par:hover td { background: var(--rail); }
.cat-table tr.par:focus-visible { outline: 2px solid var(--emerald); outline-offset: -2px; }
.cat-table td.par { padding-left: 30px; color: var(--ink); font-weight: 500; }
.cat-table tr.off td.par, .cat-table tr.off td.num { color: var(--muted); }
.cat-table tr.sel td, .cat-table tr.sel:hover td { background: var(--selected); }
.cat-table tr.sel > td:first-child { border-left-color: var(--emerald); }
.cat-cps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cat-cp { padding: 2px 7px; color: var(--ink); background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--radius-xs, 3px); font: 500 12px var(--mono); white-space: nowrap; }
.cat-cp.raw { color: var(--ink-2); background: transparent; border-color: var(--edge); border-style: dashed; }
.cat-cp.cons { color: var(--purple-body); border-color: var(--purple-border); }
.cat-sold { color: var(--muted); font: 12px var(--mono); }
.cat-dash { color: var(--muted); }
.cat-vrev { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cat-vrev .chip, .cat-desk .chip { height: auto; min-height: 20px; padding: 1px 6px; font-size: 10px; }
.cat-ph { display: none; }
.cat-ph-tot { display: none; }
.cat-note { margin: 0; color: var(--muted); font: 12px var(--mono); }
.cat-none { margin: 0; padding: 18px; color: var(--quiet); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md, 10px); font-size: 13px; }
.cat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 60vh; padding: 24px; color: var(--quiet); text-align: center; }
.cat-empty > b { color: var(--ink); font-size: 16px; font-weight: 600; }
.cat-empty > p { margin: 0; font-size: 14px; }
.cat-empty-ico { display: grid; place-items: center; width: 72px; height: 72px; color: var(--muted); background: var(--well); border-radius: 50%; }
.cat-empty-ico .cat-glyph { width: 30px; height: 30px; }
.cat-empty-acts { display: flex; gap: 8px; margin-top: 6px; }
/* The desk: the selected card, its facts, its copy, Look up a slab, then Open card and See it on pkid.cards. */
.cat-desk .dhead > span:first-child { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cat-desk .dhead .mono { font: 500 12px var(--mono); }
.cat-desk p { margin: 0; font-size: inherit; }
.cat-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: 12px; }
.cat-path a { color: var(--ink-2); text-decoration: none; }
.cat-path a:hover { text-decoration: underline; }
.cat-path .cat-glyph { width: 12px; height: 12px; }
.cat-desk .cat-idname { color: var(--ink); font-size: 19px; font-weight: 600; line-height: 24px; letter-spacing: -.015em; }
.cat-desk .cat-idpar { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 600; }
.cat-desk .cat-idsub { color: var(--quiet); font-size: 13px; }
.cat-desk .fact { padding: 8px 10px; border-radius: var(--radius-sm, 6px); }
.cat-desk .fact > span:first-child { font: 600 11px/14px var(--sans); }
.cat-desk .fact b { font: 500 14px/20px var(--mono); }
.cat-desk .fact .chip { align-self: flex-start; margin-top: 2px; }
.cat-copy-row { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--ink); text-decoration: none; }
.cat-copy-t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.cat-copy-t b { font-size: 14px; font-weight: 500; }
.cat-copy-t span { color: var(--muted); font-size: 12px; }
.cat-lbl { color: var(--muted); font: 600 12px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.cat-lookup { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.cat-lookup select, .cat-lookup input { min-height: 40px; padding: 0 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm, 6px); font-size: 14px; }
.cat-lookup input { font: 500 14px var(--mono); }
.cat-lookup input::placeholder { color: var(--muted); }
.cat-lookup-go { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; color: var(--ink); background: var(--raised); border: 1px solid var(--hairline); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-1); }
.cat-desk .cat-lookup-note { margin: 0; padding: 8px 10px; color: var(--amber-body); background: var(--amber-tint); border: 1px dashed var(--amber-border); border-radius: var(--radius-xs, 3px); font-size: 12.5px; }
.cat-lookup-note[data-tone="uncertain"] { color: var(--ink-2); background: var(--surface); border-style: solid; border-color: var(--hairline); }
.cat-found { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--emerald-tint); border: 1px solid var(--emerald-border); border-radius: var(--radius-xs, 3px); }
.cat-desk .cat-found p { color: var(--emerald-body); font-size: 13px; }
.cat-desk .dfoot .button { flex: 1; justify-content: center; }
@media (max-width: 1359px) and (min-width: 900px) {
  body[data-page="catalog"] .cat-find { width: 200px; }
}
@media (max-width: 899px) {
  /* The phone (design v11 PhCatalog): find first, the chips, one mono line, then each card as its own panel. */
  .cat-views { flex-wrap: wrap; gap: 8px; min-height: 0; padding: 12px 12px 6px; border-bottom: 0; }
  .cat-find { order: -1; flex: 1 1 100%; width: auto; min-height: 42px; font-size: 15px; }
  .cat-find input { font-size: 15px; }
  .cat-chips { flex: 1 1 100%; }
  .cat-view { min-height: 32px; padding: 5px 10px; }
  .cat-match, .cat-sp { display: none; }
  .cat-seg { display: none; }
  body[data-page="catalog"] .app-body > main { padding: 0 12px 16px; }
  .panel.cat-panel { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  /* Out of the shared phone table (a stack of labelled cards): this list draws its own panels. */
  .cat-table, .cat-table tbody { display: block; gap: 0; }
  .cat-table thead { display: none; }
  .cat-table tbody tr { display: flex; padding: 0; background: transparent; border: 0; }
  .cat-table tbody td { display: block; min-height: 0; }
  .cat-table tbody td::before { content: none !important; }
  .cat-table tr.rel td { display: block; width: 100%; height: auto; padding: 14px 0 8px; background: transparent; border: 0; }
  .cat-relh { justify-content: space-between; }
  .cat-table tr.chd td { display: block; width: 100%; height: auto; padding: 10px 14px; background: var(--rail); border: 1px solid var(--hairline); border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0; }
  .cat-cardh .r > :not(.cat-bow) { display: none; }
  .cat-bow i { width: 7px; height: 14px; }
  .cat-table tr.par { align-items: center; min-height: 48px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--hairline); border-top: 0; }
  .cat-table tr.par.end { border-radius: 0 0 var(--radius-md, 10px) var(--radius-md, 10px); }
  .cat-table tr.par > td { height: auto; padding: 0; border: 0; }
  .cat-table tr.par > td:not(.par):not(.val) { display: none; }
  .cat-table tr.par > td.par { flex: 1; min-width: 0; font-size: 14px; }
  .cat-table tr.par > td.val { flex: none; padding-left: 10px; font-size: 14px; }
  .cat-ph { display: inline; }
  .cat-ph-pr { margin-left: 6px; color: var(--quiet); font-family: var(--mono); font-size: 13px; font-weight: 500; }
  .cat-ph-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
  .cat-ph-meta .g { color: var(--ink-2); font-family: var(--mono); }
  .cat-table tr.sel td { background: transparent; }
  .cat-table tbody tr.par.sel { background: var(--surface); }
  .cat-table tr.sel > td:first-child { border-left-color: transparent; }
  .cat-desk-card, #desk-facts-sec, #desk-actions { display: none !important; }
  /* PhCatalog has no card panel: Look up a slab stands alone below the list, under its own label, with no card header. */
  .cat-desk .dhead { display: none; }
  #lookup-label[hidden] { display: block; }
  .cat-empty { min-height: 40vh; }
  /* The board's phone line under the chips: copies held, known to pkid, their value (the header's facts move here). */
  body[data-page="catalog"] #catalog-facts { display: none; }
  .cat-ph-tot { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: var(--muted); font: 12px var(--mono); }
  .cat-ph-tot b { color: var(--ink-2); font-weight: 500; }
  .cat-ph-tot b.cat-dash { color: var(--muted); font-weight: 400; }
  .cat-ph-tot[hidden] { display: none; }
}

body[data-page="catalog-item"] .app-body > main { padding: 4px 22px 18px; }
.ci-page { display: flex; --outline-display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ci-page h2, .ci-unlinked h2 { margin: 0; }
.ci-page p { margin: 0; }
.ci-hero { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-1); }
.ci-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--quiet); font-size: 13px; }
.ci-crumbs a, .ci-crumbs span.on { padding: 2px 8px; color: var(--ink-2); background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--radius-xs, 3px); text-decoration: none; }
.ci-crumbs .on { color: var(--emerald) !important; background: var(--emerald-tint) !important; border-color: var(--emerald-border) !important; font-weight: 600; }
.ci-crumbs .cat-glyph { width: 12px; height: 12px; color: var(--muted); }
.ci-top { display: flex; align-items: flex-start; gap: 16px; }
.ci-who { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.ci-nm { color: var(--ink); font-size: 26px; font-weight: 600; line-height: 32px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ci-nm .no { margin-right: 10px; color: var(--quiet); font-family: var(--mono); font-size: 22px; font-weight: 500; }
.ci-par { color: var(--ink-2); font-size: 17px; font-weight: 600; line-height: 22px; }
.ci-par .pr { margin-left: 8px; color: var(--quiet); font-family: var(--mono); font-weight: 500; }
.ci-sub { color: var(--quiet); font-size: 13px; }
.ci-pidbox { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ci-pidbox .chip { height: auto; min-height: 24px; padding: 3px 8px; font-size: 11px; }
.ci-pidbox .chip .cat-glyph { width: 14px; height: 14px; }
.ci-pid { color: var(--muted); font: 12px var(--mono); }
.ci-pid b { color: var(--ink-2); font-weight: 500; }
.ci-warn { padding: 8px 10px; color: var(--amber-body); background: var(--amber-tint); border: 1px solid var(--amber-border); border-radius: var(--radius-xs, 3px); font-size: 12.5px; }
.ci-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ci-tiles .fact, .ci-page .fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm, 6px); }
.ci-tiles .fact span { color: var(--muted); font: 600 11px/14px var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.ci-tiles .fact b { color: var(--ink); font: 500 14px/20px var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ci-tiles .fact b.q { color: var(--muted); }
.ci-panel { overflow: hidden; border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-1); }
.ci-phead { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 14px; border-bottom: 1px solid var(--hairline); }
.ci-phead h2 { color: var(--ink); font-size: 14px; font-weight: 600; }
.ci-phead .r { margin-left: auto; color: var(--muted); font: 500 12px var(--mono); text-align: right; }
.ci-tbox { overflow-x: auto; }
.ci-table { width: 100%; border-collapse: collapse; }
.ci-table th { height: 34px; padding: 6px 12px; color: var(--muted); background: var(--rail); border-bottom: 1px solid var(--hairline); font: 600 11px var(--sans); letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.ci-table th.r { text-align: right; }
.ci-table td { height: 40px; padding: 6px 12px; color: var(--ink-2); border-bottom: 1px solid var(--divider); font-size: 13px; vertical-align: middle; }
.ci-table tr:last-child td { border-bottom: 0; }
.ci-table tr > td:first-child { border-left: 2px solid transparent; }
.ci-table tr.hold > td:first-child { border-left-color: var(--amber-border); }
.ci-table tr.cons > td:first-child { border-left-color: var(--purple-border); }
.ci-table td.title { color: var(--ink); font-weight: 500; }
.ci-table td.title a { color: inherit; text-decoration: none; }
.ci-table td.title a:hover { text-decoration: underline; }
.ci-table td small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.ci-table td.id { color: var(--muted); font: 12px var(--mono); white-space: nowrap; }
.ci-table td.num { color: var(--ink); font: 500 13px var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ci-table tr.off td { color: var(--muted); }
.ci-table tr.off td.title, .ci-table tr.off td.num { color: var(--muted); }
.ci-table .chip { height: auto; min-height: 20px; padding: 1px 6px; font-size: 10px; }
.ci-page[data-cost-hidden] .ci-cost { display: none; }
.ci-note { padding: 10px 14px; color: var(--muted); font-size: 12.5px; }
.ci-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; align-items: start; }
.ci-pair:not(:has(> :not([hidden]))) { display: none; }
.ci-pair:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
.ci-chart { padding: 10px 14px 12px; }
.ci-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ci-chart text { fill: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.ci-chart .grid { stroke: var(--divider); }
.ci-chart .area { fill: var(--emerald-tint); opacity: .8; }
.ci-chart .line { fill: none; stroke: var(--emerald); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ci-chart .dot { fill: var(--surface); stroke: var(--emerald); stroke-width: 1.6; }
.ci-chart .dot.last { fill: var(--emerald); }
.ci-cfoot { display: flex; justify-content: space-between; padding: 0 14px 12px; color: var(--muted); font: 12px var(--mono); }
.ci-cfoot span:last-child { color: var(--ink-2); }
.ci-pop { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.ci-pop-note { margin: 0; padding: 10px 14px 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ci-gcol { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; border-right: 1px solid var(--divider); }
.ci-gcol:last-child { border-right: 0; }
.ci-gh { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink); font-size: 13px; font-weight: 600; }
.ci-gh span { color: var(--muted); font: 400 12px var(--mono); }
.ci-gbar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 8px; align-items: center; min-height: 20px; color: var(--ink-2); font: 12px var(--mono); }
.ci-gbar .tr { position: relative; height: 10px; overflow: hidden; background: var(--well); border-radius: 2px; }
.ci-gbar .tr i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--edge); border-radius: 2px; opacity: .55; }
.ci-gbar b { color: var(--ink); font-weight: 500; text-align: right; }
.ci-gbar.mine { color: var(--emerald); font-weight: 600; }
.ci-gbar.mine .tr i { background: var(--emerald); opacity: 1; }
.ci-gbar.mine b { color: var(--emerald); font-weight: 600; }
.ci-quiet { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.ci-hist { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; color: var(--quiet); font-size: 12px; line-height: 18px; }
.ci-hist .d, .ci-hist .id { color: var(--muted); font-family: var(--mono); }
.ci-tech summary { color: var(--muted); font-size: 11px; cursor: pointer; }
.ci-rainbow { gap: 0 !important; }
.ci-mini { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--ink-2); border-bottom: 1px solid var(--divider); font-size: 13px; text-decoration: none; }
.ci-mini:last-child { border-bottom: 0; }
.ci-mini .p { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.ci-mini .p em { margin-left: 6px; color: var(--quiet); font-family: var(--mono); font-size: 12px; font-style: normal; }
.ci-mini .g { color: var(--ink-2); font: 12px var(--mono); white-space: nowrap; }
.ci-mini .v { width: 84px; color: var(--ink); font: 500 12px var(--mono); text-align: right; white-space: nowrap; }
.ci-mini.off .p, .ci-mini.off .g { color: var(--muted); }
.ci-mini.cur { margin: 0 -14px; padding: 0 14px 0 12px; background: var(--selected); border-left: 2px solid var(--emerald); }
.ci-unlinked { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md, 10px); }
.ci-unlinked-acts { display: flex; gap: 8px; margin: 0; }
#item-actions .button { flex: 1; justify-content: center; }
@media (max-width: 1359px) {
  .ci-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  body[data-page="catalog-item"] .app-body > main { padding: 12px; }
  .ci-top { flex-direction: column; gap: 8px; }
  .ci-pidbox { align-items: flex-start; }
  .ci-nm { font-size: 22px; line-height: 28px; }
  .ci-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-pair { grid-template-columns: minmax(0, 1fr); }
  .ci-pop { grid-template-columns: minmax(0, 1fr); }
  .ci-gcol { border-right: 0; border-bottom: 1px solid var(--divider); }
  /* Each entry keeps its id under its own words (never nearer the next date): a tight line inside the entry, space between entries. */
  #identity-history { display: flex; flex-direction: column; gap: 10px; }
  .ci-hist { grid-template-columns: 96px minmax(0, 1fr); row-gap: 0; }
  .ci-hist .id { grid-column: 2; overflow-wrap: anywhere; }
  .ci-table td.ci-nostate { display: none; }
}