/* The prisoner sheet (prisonerSheet.js), shared by the field console and the admin player card.
   Colours come from each surface's own tokens, with fallbacks, so it reads native on both.
   Dense on purpose, the way the game's own inventory is: compact tiles, hairline rules,
   uppercase micro-labels, the brand accent only on what can be pressed. */
.psh {
  --psh-acc: var(--amber, var(--accent, #d9a441));
  --psh-bg: var(--inset, #0e1013);
  --psh-cell: var(--panel, #15181c);
  --psh-line: var(--line, #2a2f36);
  --psh-text: var(--text, #e4e6e8);
  --psh-muted: var(--muted, #9aa3ad);
  --psh-ok: #4fbf7a;
  --psh-warn: #e0a13a;
  --psh-bad: #e5534b;
  --psh-cs: 2.9rem;
  --psh-gs: 2.75rem; /* one cell of a sized grid; a grid wider than its card scrolls inside it */
  color: var(--psh-text);
  display: flex; flex-direction: column; gap: 0.6rem;
  min-width: 0;
}
.psh-muted { color: var(--psh-muted); }
.psh-note { margin: 0.3rem 0; font-size: 0.82rem; }
.psh-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--psh-line); font-size: 0.82rem; }
.psh-kicker, .psh-h, .psh-slot-l {
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6rem; color: var(--psh-muted); font-weight: 600;
}
.psh-kicker { color: var(--psh-acc); }
.psh-name { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.psh-state { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.78rem; }
.psh-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.05rem 0.45rem; border: 1px solid var(--psh-line); border-radius: 3px; font-size: 0.7rem; color: var(--psh-text); }
.psh-live { border-color: var(--psh-ok); }
.psh-dead { border-color: var(--psh-bad); color: var(--psh-bad); }
.psh-unkb { color: var(--psh-muted); }
.psh-h { margin: 0 0 0.4rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--psh-line); }
.psh-col .psh-h + * + .psh-h, .psh-body + .psh-h { margin-top: 0.7rem; }

/* Readings: one card per figure, the way the game's own health screen lists them: a glyph, the
   figure with its unit, its name, and a bar where the range is known. Dimmed when the save answered
   a reading the bridge could not, on an otherwise live sheet; the sheet says so once, above them. */
.psh .ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: -0.14em; }
.psh-h .ico { color: var(--psh-acc); margin-right: 0.15rem; font-size: 0.8rem; }
.psh-readings { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.psh-readings > .psh-h { margin-bottom: 0; }
.psh-src { margin: 0; font-size: 0.72rem; }
.psh-vitals, .psh-ids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); gap: 0.35rem; }
.psh-vital, .psh-idc {
  position: relative; background: var(--psh-bg); border: 1px solid var(--psh-line); border-radius: 4px;
  padding: 0.4rem 0.5rem 0.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.5rem; align-items: center; min-width: 0;
}
.psh-rd-ic { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: 1rem;
  color: var(--psh-acc); background: color-mix(in srgb, var(--psh-acc) 12%, transparent); }
.psh-idc-ic { font-size: 1.1rem; color: var(--psh-acc); width: 1.3rem; }
.psh-rd-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.psh-vital-v, .psh-idc-v { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psh-u { font-size: 0.7rem; font-weight: 600; color: var(--psh-muted); }
.psh-vital-l { overflow-wrap: anywhere; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6rem; color: var(--psh-muted); font-weight: 600; }
.psh-rd-bar { grid-column: 1 / -1; display: block; height: 3px; margin-top: 0.4rem; background: var(--psh-line); border-radius: 2px; overflow: hidden; }
.psh-rd-bar i { display: block; height: 100%; background: currentColor; }
.psh-rd-bar.psh-ok { color: var(--psh-ok); } .psh-rd-bar.psh-warn { color: var(--psh-warn); }
.psh-rd-bar.psh-bad { color: var(--psh-bad); } .psh-rd-bar.psh-acc { color: var(--psh-acc); }
.psh-v-ok .psh-rd-ic { color: var(--psh-ok); background: color-mix(in srgb, var(--psh-ok) 13%, transparent); }
.psh-v-warn { border-color: color-mix(in srgb, var(--psh-warn) 55%, var(--psh-line)); }
.psh-v-warn .psh-vital-v, .psh-v-warn .psh-rd-ic { color: var(--psh-warn); }
.psh-v-warn .psh-rd-ic { background: color-mix(in srgb, var(--psh-warn) 14%, transparent); }
.psh-v-bad { border-color: color-mix(in srgb, var(--psh-bad) 55%, var(--psh-line)); }
.psh-v-bad .psh-vital-v, .psh-v-bad .psh-rd-ic { color: var(--psh-bad); }
.psh-v-bad .psh-rd-ic { background: color-mix(in srgb, var(--psh-bad) 14%, transparent); }
.psh-v-saved { opacity: 0.62; border-style: dashed; }
.psh-ids .psh-idc { padding: 0.35rem 0.5rem; }

.psh-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0.6rem; align-items: start; }
.psh-col { background: var(--psh-cell); border: 1px solid var(--psh-line); border-radius: 4px; padding: 0.5rem; min-width: 0; }

/* Equipment: weapons as wide rows, wearables as small tiles. */
.psh-wides { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.4rem; }
.psh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 4.4rem), 1fr)); gap: 0.3rem; }
.psh-slot { position: relative; background: var(--psh-bg); border: 1px solid var(--psh-line); border-radius: 3px; padding: 0.25rem 0.35rem; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 0.45rem; align-items: center; min-width: 0; }
.psh-slot[data-code] { cursor: pointer; }
.psh-slot[data-code]:hover, .psh-cell[data-code]:hover, .psh-slot[data-code]:focus-visible, .psh-cell[data-code]:focus-visible { border-color: var(--psh-acc); outline: none; }
.psh-slot-pic { grid-row: 1 / span 3; width: 4.2rem; height: 2.4rem; object-fit: contain; }
.psh-slot-n { font-size: 0.8rem; font-weight: 700; overflow-wrap: anywhere; }
.psh-slot-p { position: absolute; top: 0.2rem; right: 0.35rem; font-size: 0.62rem; font-variant-numeric: tabular-nums; }
.psh-tiles .psh-slot { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center; padding: 0.2rem; }
.psh-tiles .psh-slot-pic { grid-row: auto; width: 2.1rem; height: 2.1rem; }
.psh-tiles .psh-slot-l { order: -1; }
.psh-tiles .psh-slot-n { font-size: 0.68rem; line-height: 1.15; }
.psh-emptyslot { opacity: 0.55; border-style: dashed; }
.psh-noimg { display: block; border: 1px dashed var(--psh-line); border-radius: 2px; }
.psh-att { display: flex; flex-wrap: wrap; gap: 0.15rem; grid-column: 2; }
.psh-att-i { position: relative; display: inline-flex; border: 1px solid var(--psh-line); border-radius: 2px; background: var(--psh-cell); }
.psh-att-i[data-code]:hover, .psh-att-i[data-code]:focus-visible { border-color: var(--psh-acc); outline: none; }
.psh-att-pic { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.psh-att-i b { position: absolute; right: 1px; bottom: 0; font-size: 0.5rem; line-height: 1; }

.psh-dur { display: block; height: 2px; background: var(--psh-line); border-radius: 1px; overflow: hidden; grid-column: 1 / -1; margin-top: 0.2rem; width: 100%; }
.psh-dur i { display: block; height: 100%; background: currentColor; }
.psh-dur.psh-ok, .psh-cell-d.psh-ok { color: var(--psh-ok); }
.psh-dur.psh-warn, .psh-cell-d.psh-warn { color: var(--psh-warn); }
.psh-dur.psh-bad, .psh-cell-d.psh-bad { color: var(--psh-bad); }
.psh-dot { display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; margin-right: 0.25rem; background: var(--psh-muted); vertical-align: middle; flex: 0 0 auto; }
.psh-dot.psh-ok { background: var(--psh-ok); }
.psh-dot.psh-warn { background: var(--psh-warn); }
.psh-dot.psh-bad { background: var(--psh-bad); }

/* Body: the silhouette, then each part as a label, its figure and a bar under both. */
.psh-body { display: flex; gap: 0.7rem; align-items: flex-start; flex-wrap: wrap; }
.psh-fig { width: 4.6rem; height: auto; flex: 0 0 auto; }
.psh-fig .psh-ok { fill: var(--psh-ok); } .psh-fig .psh-warn { fill: var(--psh-warn); }
.psh-fig .psh-bad { fill: var(--psh-bad); } .psh-fig .psh-unk { fill: var(--psh-line); }
/* No per-part health: the figure grows to centre stage and carries one marker per wounded part. */
.psh-fig-big { width: 8.5rem; flex: 0 0 8.5rem; margin: 0.2rem auto 0.4rem; }
.psh-fig .psh-mk circle { stroke: var(--psh-bg); stroke-width: 1.2; }
.psh-fig .psh-mk-bad circle { fill: var(--psh-bad); } .psh-fig .psh-mk-warn circle { fill: var(--psh-warn); } .psh-fig .psh-mk-ok circle { fill: var(--psh-ok); }
.psh-fig .psh-mk text { font-size: 7px; font-weight: 700; text-anchor: middle; fill: #000; }
.psh-fig-note { flex-basis: 100%; text-align: center; margin: 0; }
/* No reading at all: the figure is still drawn, in one even neutral tone, with its caption under it. */
.psh-fig .psh-even { fill: color-mix(in srgb, var(--psh-ok) 38%, var(--psh-line)); }
.psh-body-whole { flex-direction: column; align-items: center; }
.psh-fig-cap { margin: 0; font-size: 0.78rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.psh-parts, .psh-fx { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 8rem; min-width: 0; font-size: 0.78rem; }
.psh-parts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.4rem; align-items: baseline; }
.psh-parts li > span:first-child { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6rem; color: var(--psh-muted); font-weight: 600; }
.psh-parts .psh-dur { grid-column: 1 / -1; grid-row: 2; margin-top: 0.1rem; height: 3px; }
.psh-parts b, .psh-fx b { text-align: right; font-variant-numeric: tabular-nums; }
.psh-fx li { display: flex; gap: 0.3rem; align-items: flex-start; }
.psh-fx .psh-dot { margin-top: 0.3rem; }
.psh-fx-t { display: flex; flex-direction: column; min-width: 0; }
.psh-fx-n { font-weight: 700; overflow-wrap: anywhere; }
.psh-fx-s { font-size: 0.72rem; }
.psh-fx li b { margin-left: auto; }
/* The game's own figure out of its own ceiling (Thirst 1.9 / 3): a short bar and the two numbers. */
.psh-fx-v { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; min-width: 3.4rem; flex: 0 0 auto; }
.psh-fx-v b { margin-left: 0; white-space: nowrap; }
.psh-fx .psh-sev { width: 3.4rem; height: 3px; margin-top: 0.35rem; }
/* "Quick slots as saved at last logout", "Contents as of the last save". */
.psh-qh { margin-top: 0.7rem; }
.psh-from { margin-top: 0; }

/* Containers: a header with what it is and how full, then the game's own grid. */
.psh-cont + .psh-cont { margin-top: 0.5rem; }
.psh-cont { border: 1px solid var(--psh-line); border-radius: 3px; background: var(--psh-bg); padding: 0.3rem; }
.psh-cont-h { display: flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--psh-line); margin-bottom: 0.3rem; min-width: 0; }
.psh-cont-h[data-code] { cursor: pointer; }
.psh-cont-h[data-code]:hover, .psh-cont-h[data-code]:focus-visible { border-bottom-color: var(--psh-acc); outline: none; }
.psh-cont-h[data-code]:hover .psh-cont-n, .psh-cont-h[data-code]:focus-visible .psh-cont-n { color: var(--psh-acc); }
.psh-cont-pic { width: 1.7rem; height: 1.7rem; object-fit: contain; flex: 0 0 auto; }
.psh-cont-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.psh-cont-n { font-weight: 700; font-size: 0.8rem; overflow-wrap: anywhere; }
.psh-cont-m { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.68rem; color: var(--psh-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.psh-cap { color: var(--psh-text); font-size: 0.74rem; }
.psh-gridwrap { overflow-x: auto; max-width: 100%; container-type: inline-size; }
.psh-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--psh-cs), 1fr)); grid-auto-rows: var(--psh-cs); grid-auto-flow: row dense; gap: 1px; }
.psh-inv.psh-fixed {
  /* A cell shrinks until the whole width fits the card, and stops at 44px, a fingertip on a phone: below that the grid scrolls inside its card. */
  --psh-c: max(44px, min(var(--psh-gs), calc((100cqi - 2px - var(--psh-cols) * 1px) / var(--psh-cols))));
  grid-template-columns: repeat(var(--psh-cols), var(--psh-c)); width: max-content; background: var(--psh-line); border: 1px solid var(--psh-line); }
.psh-ecell { display: block; background: var(--psh-bg); }
.psh-cell { position: relative; background: color-mix(in srgb, var(--psh-cell) 70%, var(--psh-bg)); border: 1px solid var(--psh-line); min-width: 0; overflow: hidden; }
.psh-fixed .psh-cell { border-color: transparent; }
.psh-cell[data-code] { cursor: pointer; }
.psh-cell-pic { position: absolute; inset: 0.2rem 0.2rem 0.45rem; width: calc(100% - 0.4rem); height: calc(100% - 0.65rem); object-fit: contain; }
.psh-cell-n { position: absolute; right: 2px; bottom: 3px; font-size: 0.6rem; font-weight: 700; color: var(--psh-text); text-shadow: 0 0 2px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; }
.psh-cell-d { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--psh-line); }
.psh-cell-d i { display: block; height: 100%; background: currentColor; }
.psh-isdead .psh-name { text-decoration: line-through; text-decoration-color: var(--psh-bad); }
.psh-nested { margin-left: 0.7rem; border-left: 2px solid var(--psh-acc); }

/* Wide enough for three columns: give the containers the room a full backpack row needs, the way
   the game's own inventory gives its right-hand panel the most space. */
.psh { container-type: inline-size; }
@container (min-width: 56rem) {
  .psh-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(min(100%, 25rem), 1.25fr); }
  /* The game's own right-hand panel scrolls rather than pushing the page: the containers do too. */
  .psh-col-cont { max-height: 56rem; overflow-y: auto; scrollbar-width: thin; }
}

/* A caption with its glyph: the word is what the game calls the place, the glyph where it is. */
.psh-slot-l { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; }
.psh-slot-l > span { overflow-wrap: anywhere; }
.psh-cap-ic { font-size: 0.78rem; color: var(--psh-acc); }
.psh-h { display: flex; align-items: center; gap: 0.3rem; }

/* Wounds, conditions and symptoms, each its own group with its glyph and how many. */
.psh-fxg + .psh-fxg { margin-top: 0.55rem; }
.psh-fxg-h { margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--psh-text); }
.psh-fxg-h .ico { color: var(--psh-acc); font-size: 0.85rem; }
.psh-fxg-h b { margin-left: auto; color: var(--psh-muted); font-variant-numeric: tabular-nums; }
.psh-fx li { padding: 0.3rem 0.4rem; background: var(--psh-bg); border: 1px solid var(--psh-line); border-radius: 3px; align-items: center; }
.psh-fx .psh-dot { margin-top: 0; }
.psh-fx-v { flex-direction: row; align-items: center; gap: 0.4rem; }
.psh-fx .psh-sev { margin-top: 0; width: 3rem; }
.psh-fxg-h b { font-weight: 700; }
/* In a narrow tile the glyph sits above its word, so a word like "Underwear" keeps the whole width. */
.psh-tiles .psh-slot-l { flex-direction: column; gap: 0.1rem; }
.psh-tiles .psh-slot-l > span { overflow-wrap: normal; }
/* Two readings a row on a phone: a smaller glyph disc leaves the figure its width. */
@container (max-width: 20rem) {
  .psh-vital, .psh-idc { column-gap: 0.35rem; padding: 0.35rem 0.4rem 0.45rem; }
  .psh-rd-ic { width: 1.5rem; height: 1.5rem; font-size: 0.85rem; }
  .psh-vital-v, .psh-idc-v { font-size: 0.9rem; }
}
/* The glyph and the figure share the first row; the name takes the card's whole width under them,
   so a long word ("temperature", "Hauttemperatur") never has to share a line with the glyph. */
.psh-vital .psh-rd-t, .psh-idc .psh-rd-t { display: contents; }
.psh-vital-v, .psh-idc-v { grid-column: 2; }
.psh-vital .psh-vital-l, .psh-idc .psh-vital-l { grid-column: 1 / -1; margin-top: 0.25rem; overflow-wrap: normal; letter-spacing: 0.04em; }
/* Money and fame are long figures: their cards are wider, and a figure is never cut short. */
.psh-ids { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.psh-idc-v { overflow: visible; text-overflow: clip; }
@container (max-width: 20rem) { .psh-ids { grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); } }
/* A figure is never cut short with an ellipsis: the figure and its unit stay together, and what
   follows them (a maximum) wraps under them when the card is narrow. */
.psh-vital-v { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
.psh-nw { white-space: nowrap; }

/* ── THE TWO WINDOWS A MARKER CARD OPENS: Body Status and Worn & Carried ────────────────────────
   Each is one half of the sheet (`opts.view`), so the grid holds two sections rather than three. */
.psh-sub { display: flex; align-items: center; gap: 0.3rem; margin: 0.15rem 0 0.35rem; font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--psh-muted); }
.psh-sub .ico { color: var(--psh-acc); font-size: 0.8rem; }
.psh-wides + .psh-sub { margin-top: 0.6rem; }
.psh-carry { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
@container (min-width: 56rem) {
  .psh-view-body .psh-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .psh-view-gear .psh-cols { grid-template-columns: minmax(0, 1fr) minmax(min(100%, 25rem), 1.35fr); }
}
/* The window's title: whose body or whose belongings, with the face or the plate the card wore. */
.pw-head { display: flex; align-items: center; gap: 0.7rem; margin: 0 2rem 0.8rem 0; min-width: 0; }
.pw-face { width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: 0 0 auto; overflow: hidden; display: inline-grid; place-items: center;
  background: var(--inset, #0e1013); border: 1px solid var(--line, #2a2f36); color: var(--amber, #d9a441); }
.pw-face img { width: 100%; height: 100%; object-fit: cover; }
.pw-face .ico { width: 1.3rem; height: 1.3rem; }
.pw-t { display: flex; flex-direction: column; min-width: 0; }
.pw-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.64rem; font-weight: 700; color: var(--amber, #d9a441); }
.pw-name { font-size: 1.1rem; font-weight: 700; color: var(--text, #e4e6e8); overflow-wrap: anywhere; }
/* A THING's window (contents, parts, logs) wears the plate its card wore: square, not a face. */
.pw-face.pw-face-thing { border-radius: 6px; width: 3rem; height: 3rem; }
.pw-face-thing .mp-ico { width: 100%; height: 100%; border: 0; margin: 0; border-radius: 0; display: grid; place-items: center; }
.pw-face-thing .mp-ico img { width: 100%; height: 100%; object-fit: contain; }
.pw-face-thing .mp-ico-fb { display: none; }
.pw-face-thing .mp-ico .ico { width: 1.4rem; height: 1.4rem; }
/* The panel a window draws a list into is never the card's collapsed box. */
.pw .pw-panel[hidden] { display: block; }
.pw .mp-contents.pw-panel { margin: 0; padding: 0; border: 0; max-height: none; }
/* A part's tile is one press to its record. */
.mp-c-tile[data-code] { cursor: pointer; }
.mp-c-tile[data-code]:hover, .mp-c-tile[data-code]:focus-visible { border-color: var(--line-amber, var(--amber, #d9a441)); outline: none; }

/* ── WHAT A VEHICLE, A CHEST, A WARDROBE OR A BAG HOLDS (`PrisonerSheet.listCell`) ──────────────
   READABLE ROWS by default: the picture, the name (two lines at most), how many, the weight and the
   condition as a figure with a short bar. One column on a phone, two where the window is wide. The
   compact grid of cells (`.is-grid`) is the same markup drawn as squares, for an owner who picks it.
   Shared by both maps and by Worn & Carried. */
.mp-c-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 4px; padding: 0.3rem 0 0.4rem; }
.mp-c-cell {
  position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.6rem; row-gap: 0.15rem;
  align-items: center; min-width: 0; min-height: 3.1rem; padding: 0.35rem 0.55rem 0.35rem 0.4rem; margin: 0; cursor: pointer; text-align: left;
  background: var(--inset, #0e1013); border: 1px solid var(--line, #2a2f36); border-radius: 5px; color: var(--text, #e4e6e8);
  font: inherit; font-size: 0.82rem; line-height: 1.2;
  --hov-bg: var(--inset, #0e1013); --hov-fg: var(--text, #e4e6e8); --hov-line: var(--line-amber, #d9a441);
}
.mp-c-cell:hover, .mp-c-cell:focus-visible { border-color: var(--line-amber, var(--amber, #d9a441)); background: var(--inset, #0e1013); color: var(--text, #e4e6e8); outline: none; }
.mp-i-pic { grid-column: 1; grid-row: 1 / span 2; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: var(--panel-2, #15181d); border-radius: 4px; overflow: hidden; }
.mp-i-pic img { width: 100%; height: 100%; object-fit: contain; }
.mp-i-pic .mp-c-ph { width: 1rem; height: 1rem; color: var(--muted, #9aa3ad); }
.mp-i-n { grid-column: 2; font-weight: 600; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: break-word; }
.mp-i-m { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.6rem; row-gap: 0.1rem; color: var(--muted, #9aa3ad); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.mp-i-m:empty { display: none; }
.mp-c-cn { font-weight: 700; color: var(--text, #e4e6e8); }
.mp-i-dur { display: inline-flex; align-items: center; gap: 0.3rem; }
.mp-i-dur b { font-weight: 700; }
.mp-i-dur.psh-ok b { color: #4fbf7a; } .mp-i-dur.psh-warn b { color: #e0a13a; } .mp-i-dur.psh-bad b { color: #e5534b; }
.mp-c-cd { position: relative; display: inline-block; width: 2.4rem; height: 4px; border-radius: 2px; background: var(--line, #2a2f36); overflow: hidden; }
.mp-c-cd i { display: block; height: 100%; background: currentColor; }
.mp-c-cd.psh-ok { color: #4fbf7a; } .mp-c-cd.psh-warn { color: #e0a13a; } .mp-c-cd.psh-bad { color: #e5534b; }

/* The compact grid, when the reader picks it: squares, the picture, the count in the corner and the
   condition along the foot; the name stays the tooltip and the accessible name. */
.mp-c-cells.is-grid { grid-template-columns: repeat(auto-fill, minmax(2.9rem, 1fr)); gap: 3px; }
.mp-c-cells.is-grid > .mp-c-cell { display: block; aspect-ratio: 1; min-height: 44px; padding: 0; overflow: hidden; border-radius: 3px; }
.mp-c-cells.is-grid .mp-i-pic { position: absolute; inset: 0.2rem 0.2rem 0.4rem; width: auto; height: auto; background: transparent; }
.mp-c-cells.is-grid .mp-i-n, .mp-c-cells.is-grid .mp-i-kg, .mp-c-cells.is-grid .mp-i-dur b { display: none; }
.mp-c-cells.is-grid .mp-i-m { position: static; }
.mp-c-cells.is-grid .mp-c-cn { position: absolute; right: 2px; bottom: 4px; font-size: 0.6rem; line-height: 1; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.mp-c-cells.is-grid .mp-c-cd { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 2px; border-radius: 0; }

/* The list's own toggle between rows and cells. */
.mp-c-modes { display: inline-flex; gap: 2px; margin-left: auto; }
.mp-c-mode { display: inline-grid; place-items: center; width: 2rem; height: 1.8rem; min-height: 0; padding: 0; margin: 0; border: 1px solid var(--line, #2a2f36); border-radius: 4px;
  background: transparent; color: var(--muted, #9aa3ad); cursor: pointer; --hov-bg: transparent; --hov-fg: var(--amber-hi, #ffb347); --hov-line: var(--line-amber, #d9a441); }
.mp-c-mode .ico { width: 14px; height: 14px; }
.mp-c-mode:hover { background: var(--hov-bg); border-color: var(--hov-line); color: var(--hov-fg); }
.mp-c-mode.on { color: var(--amber-hi, #ffb347); border-color: var(--line-amber, #d9a441); --hov-fg: var(--amber-hi, #ffb347); }
.mp-c-mode.on:hover { color: var(--hov-fg); }

/* A BOX INSIDE A BOX is a full-width group header: its picture, its name, and under the name how many
   things, used/total cells and the weight inside. What it holds goes under it, indented, as the same
   rows. */
.pw .mp-c-open, .map-popover .mp-c-open { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.6rem; row-gap: 0.1rem;
  align-items: center; width: 100%; min-height: 3.2rem; padding: 0.4rem 0.55rem 0.4rem 0.4rem; text-align: left; }
.pw .mp-c-open > .mp-c-img, .map-popover .mp-c-open > .mp-c-img { grid-column: 1; grid-row: 1 / span 2; width: 2.6rem; height: 2.6rem; }
.pw .mp-c-open > .mp-c-name, .map-popover .mp-c-open > .mp-c-name { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 0.86rem; overflow-wrap: break-word; }
.pw .mp-c-open > .mp-c-bm, .map-popover .mp-c-open > .mp-c-bm { grid-column: 2; grid-row: 2; color: var(--muted, #9aa3ad); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.pw .mp-c-open > .hpd-w, .map-popover .mp-c-open > .hpd-w { grid-column: 3; grid-row: 1; justify-self: end; }
.pw .mp-c-open > .mp-c-n, .pw .mp-c-open > .mp-c-boxn, .map-popover .mp-c-open > .mp-c-n, .map-popover .mp-c-open > .mp-c-boxn { display: none; }
.pw .mp-c-open > .mp-c-chev, .map-popover .mp-c-open > .mp-c-chev { grid-column: 3; grid-row: 2; justify-self: end; }
.pw .mp-c-sub, .map-popover .mp-c-sub { margin: 0.15rem 0 0.45rem 1.1rem; padding-left: 0.6rem; border-left: 2px solid var(--line-amber, #d9a441); }
/* A vehicle's parts as tiles: the picture, the part's own name under it and its condition. */
.mp-c-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.2rem), 1fr)); gap: 3px; padding: 0.3rem 0.1rem 0.4rem; }
.mp-c-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; padding: 0.3rem 0.3rem 0.35rem;
  background: var(--inset, #0e1013); border: 1px solid var(--line, #2a2f36); border-radius: 3px; text-align: center; }
.mp-c-tile .mp-c-img { width: 2.2rem; height: 2.2rem; }
.mp-c-tile .mp-c-name { font-size: 0.7rem; line-height: 1.2; min-width: 0; width: 100%; flex: none; }
.mp-c-tile .mp-c-tfoot { display: flex; align-items: center; justify-content: center; gap: 0.2rem; min-height: 1.2rem; }
/* A phone's card window gives a box row's name the width: the condition stays as its dot, with the
   figure in the dot's tooltip, so a long name keeps to two lines. */
@media (max-width: 420px) {
  .pw .mp-c-row .hpd-n { display: none; }
  .pw .mp-c-row .mp-c-chev { display: none; }
}
/* Worn & Carried draws each bag as readable rows by default and as the game's grid when the reader
   picks the compact view; both are in the markup and the sheet's class decides. */
.psh:not(.psh-mode-grid) .psh-gridwrap { display: none; }
.psh.psh-mode-grid .psh-asrows { display: none; }
.psh-cont-bar { display: flex; justify-content: flex-end; margin: -0.2rem 0 0.3rem; }
/* The figure in the game's own manner: filled regions with a thin dark seam between the parts. */
.psh-fig .psh-fp { stroke: var(--psh-bg, #0e1013); stroke-width: 0.9; stroke-linejoin: round; }
.psh-fig .psh-ok.psh-fp, .psh-fig ellipse.psh-ok { fill: color-mix(in srgb, var(--psh-ok) 72%, #0e1013); }
.psh-fig .psh-warn.psh-fp, .psh-fig ellipse.psh-warn { fill: color-mix(in srgb, var(--psh-warn) 78%, #0e1013); }
.psh-fig .psh-bad.psh-fp, .psh-fig ellipse.psh-bad { fill: color-mix(in srgb, var(--psh-bad) 80%, #0e1013); }
.psh-fig .psh-body-whole .psh-fig, .psh-fig-big { width: 9.5rem; flex: 0 0 9.5rem; }
/* Conditions read from the save while the player is away: greyed, under the line that says when. */
.psh-fx-saved { opacity: 0.6; }
@media (max-width: 760px) {
  .mp-c-mode { min-width: 44px; min-height: 44px; }
}
/* A list's heading in the window wraps as whole pieces: the count never breaks inside itself. */
.pw .mp-c-head { flex-wrap: wrap; row-gap: 0.35rem; }
.pw .mp-c-head .mp-c-count { white-space: nowrap; }
/* A box's name keeps to two lines like every row's; the rest of it is in the tooltip. */
.pw .mp-c-open > .mp-c-name, .map-popover .mp-c-open > .mp-c-name { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }