/* ─── 25 Oct 2026 — THE GAME-MOD PAGES (src/GameModPages.jsx) ──────────────────────────────────────────────────
   Hugo approved the game-mod menu: the mod overview (the Overview's centre panel in a game-mod project), Model review,
   Mod build, Game data, Tools, the Civ plan placeholder; the 3D viewer and the Pipeline board are at the end of this
   file (part 3). Inside the standard .view-page (and,
   on the Overview, the standard .shots-panel.glass, so the content-tone switch and every skin apply as they do to the
   shot list). Buttons are the page pill (.media-expand-pill), inputs the app input (.np-input).
   FIXED LAYOUT (invariant #20): every list sits in a box of a fixed height that scrolls inside itself; the overview's
   tiles, status row and meters have fixed heights, so data arriving moves nothing below them.
   Colours are tokens only (invariant #28); nothing here is a skin rule. */

.view-page.gm-page { gap: 12px; color: var(--ink); }
.gm-page .media-expand-pill,
.gm-ov .media-expand-pill { margin-top: 0; font-family: inherit; white-space: nowrap; }
.gm-page .media-expand-pill:disabled,
.gm-ov .media-expand-pill:disabled { opacity: 0.5; cursor: default; }

/* a card: an eyebrow line (fixed height) and its body */
.gm-card {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--mix-light) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  min-width: 0;
}
.gm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 26px; min-width: 0; }
.gm-eyebrow {
  flex: none;
  height: 16px;
  line-height: 16px;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-12);
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.gm-card-aside { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-12); color: var(--ink-muted); }
.gm-card-aside > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-line { font-size: var(--fs-13); line-height: 1.5; color: var(--ink); }
/* a line whose sentence changes as data arrives (Model review's head line): a fixed two-line box, clamped, so the
   grid below never moves (invariant #20); five lines on the phone, where the same sentence wraps more */
.gm-line.is-fixed { height: calc(2 * 1.5em); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body[data-ui-tier="s"] .gm-line.is-fixed { height: calc(5 * 1.5em); -webkit-line-clamp: 5; }
.gm-page .is-muted,
.gm-ov .is-muted { color: var(--ink-muted); }
.gm-note { padding: 18px 12px; text-align: center; font-size: var(--fs-13); color: var(--ink-muted); }
.gm-links { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-mono { font-family: var(--font-mono); font-size: var(--fs-12); }
.gm-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-13); line-height: 1.5; color: var(--ink); }

/* boxes that scroll inside themselves */
.gm-scroll { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink-muted) 40%, transparent) transparent; }
.gm-list-box { height: 260px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--mix-light) 14%, transparent); }
.gm-list-box.is-tall { height: 420px; }

/* list rows (Game data, Mod build) */
.gm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  box-sizing: border-box;
  padding: 6px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 35%, transparent);
  font-size: var(--fs-13);
  color: var(--ink);
}
button.gm-row {
  width: 100%;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font: inherit;
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
}
button.gm-row:hover { background: color-mix(in srgb, var(--leaf) 10%, transparent); }
.gm-row-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gm-row-sub { color: var(--ink-muted); font-size: var(--fs-12); }
.gm-row-side { flex: none; text-align: right; font-size: var(--fs-12); }

/* breadcrumbs, filters, the inline path editor. The crumb trail and the filter row are ONE line of a fixed height
   that scrolls sideways (like the Pipeline board's .pb-chips): chips arriving with the data, or a deeper folder, never
   wrap to a second row and move what is below (invariant #20). */
.gm-crumbs,
.gm-filter-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  height: 30px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.gm-crumbs .media-expand-pill,
.gm-filter-row .media-expand-pill { flex: none; }
.gm-filter-gap { flex: 1 1 12px; }
.gm-edit-row { display: flex; align-items: center; gap: 8px; height: 34px; }
.gm-input { flex: 1 1 auto; min-width: 0; height: 32px; box-sizing: border-box; padding: 6px 10px; font-size: var(--fs-13); }
.gm-edit-msg { flex: 0 1 280px; min-width: 0; height: 16px; line-height: 16px; font-size: var(--fs-12); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the phone: the field and its buttons on the first line, the message (always there, 16px) on its own line, so the
   row is one fixed height and the field keeps its room */
body[data-ui-tier="s"] .gm-edit-row { flex-wrap: wrap; height: auto; row-gap: 4px; }
body[data-ui-tier="s"] .gm-edit-row .gm-input { flex: 1 1 0; }
body[data-ui-tier="s"] .gm-edit-row .media-expand-pill { flex: none; }
body[data-ui-tier="s"] .gm-edit-msg { flex: 0 0 100%; }

/* ── Model review ── */
.gm-model-grid-wrap { flex: 1 1 auto; min-height: 380px; }
.gm-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 2px; }
.gm-model {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--mix-light) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 50%, transparent);
}
/* the viewer slot: one fixed shape, whatever renders in it (window.ModelViewer3D or the file's name) */
.gm-model-view { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.gm-model-view > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm-model-ph { display: flex; align-items: center; justify-content: center; }
.gm-model-ext {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-08);
  color: var(--ink-muted);
}
.gm-model-name { height: 16px; line-height: 16px; font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-model-where { height: 14px; line-height: 14px; font-size: var(--fs-11); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Tools ── */
.gm-tools { flex: 1 1 auto; min-height: 300px; display: flex; flex-direction: column; gap: 10px; }
.gm-names { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; height: 96px; overflow-y: auto; }
.gm-name {
  height: 24px;
  box-sizing: border-box;
  line-height: 16px;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--mix-light) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  font-size: var(--fs-12);
  color: var(--ink);
  white-space: nowrap;
}
.gm-name.is-folder { font-weight: var(--fw-semi); }
.gm-name.is-empty { color: var(--ink-muted); }

/* ── the mod overview (the Overview's centre panel; .shots-panel.glass gives the panel itself) ── */
.gm-ov { gap: 12px; overflow-y: auto; color: var(--ink); }
.gm-ov-head { display: flex; align-items: baseline; gap: 14px; height: 18px; min-width: 0; }
.gm-ov-sub { min-width: 0; font-size: var(--fs-12); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gm-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 88px;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--mix-light) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  min-width: 0;
}
.gm-tile.is-focus { border-color: color-mix(in srgb, var(--leaf) 60%, transparent); }
.gm-tile-n { font-size: var(--fs-24); font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.gm-tile-label { font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-tile-sub { font-size: var(--fs-11); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-status-row { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; height: 54px; overflow: hidden; }
.gm-chip {
  height: 24px;
  box-sizing: border-box;
  line-height: 16px;
  padding: 3px 10px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--mix-light) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 50%, transparent);
  font-size: var(--fs-12);
  color: var(--ink);
  white-space: nowrap;
}
.gm-chip b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.gm-chip.is-dropped { color: var(--ink-muted); border-style: dashed; }
.gm-chip.is-empty { color: var(--ink-muted); }
.gm-meters { display: flex; flex-direction: column; gap: 8px; }
.gm-meter { display: grid; grid-template-columns: 140px minmax(0, 1fr) 80px; align-items: center; gap: 12px; height: 18px; }
.gm-meter-label { font-size: var(--fs-12); color: var(--ink); white-space: nowrap; }
.gm-meter-bar { height: 6px; border-radius: var(--r-round); overflow: hidden; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.gm-meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--leaf); transition: width 300ms ease; }
.gm-meter-fill.is-model { background: var(--amber); }
.gm-meter-fill.is-game { background: var(--ok); }
.gm-meter-n { font-size: var(--fs-12); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); }

/* ─── 25 Oct 2026 (part 3) — THE 3D VIEWER (src/ModelViewer3D.jsx) ─────────────────────────────────────────────────
   It fills the box its parent gives it (a Model review tile, the asset window's main picture, the Pipeline board's
   panel). The loading line, errors, the file picker and the toolbar all sit OVER the model, so no state moves
   anything (invariant #20). Google <model-viewer> draws the model; its own progress bar is hidden (ours shows). */
.mv3d { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: inherit; color: var(--ink); }
.mv3d-stage {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--mix-light) 72%, transparent), color-mix(in srgb, var(--ink) 14%, transparent));
}
.mv3d-stage > model-viewer {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  --poster-color: transparent;
  --progress-bar-color: transparent;
}
.mv3d-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
  font-size: var(--fs-12);
  line-height: 1.45;
  color: var(--ink-muted);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.mv3d-status.is-on { opacity: 1; }
.mv3d-status.is-on .mv3d-btn { pointer-events: auto; }
.mv3d-meter { display: block; width: 160px; height: 4px; border-radius: var(--r-round); overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.mv3d-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--leaf); transition: width 200ms ease; }
.mv3d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 26px;
  box-sizing: border-box;
  padding: 0 11px;
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, var(--card-border) 65%, transparent);
  background: color-mix(in srgb, var(--mix-light) 82%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-06);
  white-space: nowrap;
  cursor: pointer;
}
.mv3d-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--leaf) 70%, transparent); }
.mv3d-btn.is-on { background: color-mix(in srgb, var(--leaf) 24%, var(--mix-light)); border-color: color-mix(in srgb, var(--leaf) 55%, transparent); }
.mv3d-btn:disabled { opacity: 0.45; cursor: default; }
.mv3d-btn.is-load { height: 30px; padding: 0 14px; font-size: var(--fs-12); }
.mv3d-top { position: absolute; left: 8px; right: 8px; top: 8px; height: 30px; display: flex; align-items: center; pointer-events: none; }
.mv3d-select { pointer-events: auto; height: 28px; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 2px 8px; font-size: var(--fs-11); }
.mv3d-bar { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 30px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.mv3d-bar > * { pointer-events: auto; }
.mv3d-msg {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  line-height: 26px;
  padding: 0 10px;
  border-radius: var(--r-round);
  font-size: var(--fs-11);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: color-mix(in srgb, var(--mix-light) 62%, transparent);
}
.mv3d-msg:empty { background: transparent; pointer-events: none; }
.mv3d.is-compact .mv3d-btn { height: 24px; padding: 0 9px; }
.mv3d.is-compact .mv3d-btn.is-load { height: 26px; font-size: var(--fs-11); }
.mv3d-mini { position: absolute; right: 6px; bottom: 6px; width: 26px; padding: 0; }

/* the asset window (src/Views.jsx AssetItemModal): the "3D" tile on the strip, and the model over the main picture's
   own box (the picture stays underneath, so the window keeps its size) */
.char-gallery-thumb.char-gallery-thumb--3d {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  background: color-mix(in srgb, var(--mix-light) 55%, transparent);
  color: var(--ink);
  cursor: pointer;
}
.char-gallery-thumb.char-gallery-thumb--3d.is-active { border-color: var(--leaf); background: color-mix(in srgb, var(--leaf) 16%, var(--mix-light)); }
.char-gallery-3d-label { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-08); line-height: 1; }
.char-gallery-3d-n { font-size: var(--fs-9); color: var(--ink-muted); line-height: 1; font-variant-numeric: tabular-nums; }
/* opaque, so the concept picture under it never shows through the model's see-through stage */
.char-3d-layer { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; background: var(--panel-raised); }
.char-3d-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center;
  font-size: var(--fs-12); color: var(--ink-muted); background: color-mix(in srgb, var(--mix-light) 70%, transparent); }

/* ─── 25 Oct 2026 (part 3) — THE PIPELINE BOARD (src/PipelineBoard.jsx) ─────────────────────────────────────────────
   Fixed layout: two chip rows of fixed height that scroll sideways, a table that scrolls inside its own box, and the
   viewer panel beside it that is always there (a placeholder until a 3D cell is clicked). */
.pb-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; height: 30px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.pb-chips .media-expand-pill { flex: none; }
.pb-chip-n { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: 0.7; }
.pb-chip-line { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pb-chip-line > .pb-chips:first-child { flex: none; }
.pb-chip-line > .pb-chips:last-child { flex: 1 1 auto; }
.pb-lead { height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pb-body { flex: 1 1 auto; min-height: 480px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 34%); gap: 12px; }
.pb-table {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: color-mix(in srgb, var(--mix-light) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
}
/* the header row lives inside this box (sticky), so a narrow window scrolls header and rows sideways together */
.pb-rows { flex: 1 1 auto; min-height: 0; overflow-x: auto; }
.pb-row {
  display: grid;
  min-width: 740px;
  grid-template-columns: 56px minmax(150px, 1.7fr) 92px repeat(5, minmax(72px, 1fr));
  align-items: center;
  gap: 8px;
  height: 52px;
  box-sizing: border-box;
  padding: 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 32%, transparent);
  font-size: var(--fs-12);
  color: var(--ink);
}
.pb-row.pb-head {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 34px;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--panel-raised) 94%, transparent);
  backdrop-filter: blur(6px);
}
.pb-row.is-open { background: color-mix(in srgb, var(--leaf) 9%, transparent); }
.pb-row.is-dropped .pb-thumb,
.pb-row.is-dropped .pb-name b,
.pb-row.is-dropped .pb-cell { opacity: 0.55; }
.pb-thumb {
  width: 52px;
  height: 39px;
  border-radius: var(--r-xs);
  background-color: color-mix(in srgb, var(--ink) 8%, transparent);
  background-size: cover;
  background-position: center;
}
.pb-name { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.pb-name-top { display: flex; align-items: center; gap: 6px; min-width: 0; height: 18px; }
.pb-name-top b { font-weight: var(--fw-semi); font-size: var(--fs-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-sub { height: 14px; line-height: 14px; font-size: var(--fs-11); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-tag {
  flex: none;
  height: 16px;
  line-height: 14px;
  box-sizing: border-box;
  padding: 0 6px;
  border-radius: var(--r-round);
  border: 1px solid var(--st-pending);
  background: var(--pill-bg);
  color: var(--st-pending-ink);
  font-size: var(--fs-9);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
}
.pb-status {
  display: inline-block;
  max-width: 100%;
  height: 22px;
  line-height: 20px;
  box-sizing: border-box;
  padding: 0 8px;
  border-radius: var(--r-round);
  border: 1px solid var(--st-first-pass);
  color: var(--st-first-pass-ink);
  background: var(--pill-bg);
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-status.is-wip { border-color: var(--st-wip); color: var(--st-wip-ink); }
.pb-status.is-retake { border-color: var(--st-retake); color: var(--st-retake-ink); }
.pb-status.is-approved { border-color: var(--ok); color: var(--ink); }
.pb-status.is-folder { border-style: dashed; border-color: var(--st-pending); color: var(--st-pending-ink); }
.pb-cell { display: flex; align-items: center; gap: 5px; min-width: 0; height: 30px; white-space: nowrap; overflow: hidden; }
.pb-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; }
.pb-cell.is-done .pb-mark { color: var(--ok); }
.pb-dot { display: block; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--warn); }
.pb-main { font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.pb-extra { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-11); color: var(--ink-muted); }
.pb-cell.is-todo .pb-main,
.pb-cell.is-unknown .pb-main { font-weight: var(--fw-med); color: var(--ink-muted); }
.pb-cell-btn {
  box-sizing: border-box;
  margin: 0 -8px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  background: color-mix(in srgb, var(--mix-light) 40%, transparent);
  font: inherit;
  font-size: var(--fs-12);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.pb-cell-btn:hover { border-color: color-mix(in srgb, var(--leaf) 70%, transparent); }
.pb-cell-btn.is-open { border-color: var(--leaf); background: color-mix(in srgb, var(--leaf) 18%, var(--mix-light)); }

.pb-viewer.gm-card { min-height: 0; min-width: 0; }
.pb-viewer .gm-card-aside .media-expand-pill { flex: none; }
.pb-viewer-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.pb-viewer-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; }
.pb-viewer-foot { flex: none; display: flex; align-items: center; gap: 12px; height: 72px; min-width: 0; }
.pb-concept {
  flex: none;
  width: 96px;
  height: 72px;
  border-radius: var(--r-sm);
  background-color: color-mix(in srgb, var(--ink) 8%, transparent);
  background-size: cover;
  background-position: center;
}
.pb-foot-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: var(--fs-12); color: var(--ink-muted); }
.pb-foot-text > * { height: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-foot-text b { color: var(--ink); font-weight: var(--fw-semi); }
@media (max-width: 1100px) {
  .pb-body { flex: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: 480px 440px; }
}