.board-pad { display: flex; --outline-display: flex; flex-direction: column; gap: 14px; }
.board-grid:not(:has(> :not([hidden]))) { display: none; }
.board-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px; min-width: 0; }
.panel .phead { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-bottom: 1px solid var(--hairline); }
.panel .phead h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.panel .phead .r, .panel .phead > a:last-child { margin-left: auto; font-size: 12px; }
.panel .phead .r { color: var(--muted); }
.panel .pbody { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; }
.panel.edge-am { border-left: 2px solid var(--amber); } .panel.edge-pu { border-left: 2px solid var(--purple); }
.panel.edge-st { border-left: 2px solid var(--edge-structure); } .panel.edge-em { border-left: 2px solid var(--emerald); }
.panel .item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--divider); }
.panel .item:last-child { border-bottom: 0; }
.panel .item .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.panel .item .t b { font-weight: 500; color: var(--ink); }
.panel .item .t span { font-size: 12px; color: var(--muted); }
.panel .item .when { width: 56px; flex: none; color: var(--muted); font: 12px var(--mono); }
.panel .note-pad { padding: 0 14px 12px; }
.panel .none-line { margin: 0; padding: 12px 14px; color: var(--muted); font-size: 12.5px; }
.panel .note { margin: 0; color: var(--muted); font-size: 11.5px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 2px; border: 1px solid; font: 600 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.chip.ok { color: var(--emerald); border-color: var(--emerald-border); background: var(--emerald-tint); }
.chip.warn { color: var(--amber); border-color: var(--amber-border); background: var(--amber-tint); }
.chip.party { color: var(--purple); border-color: var(--purple-border); background: var(--purple-tint); }
.chip.plain { color: var(--quiet); border-color: var(--edge-structure); background: var(--surface); }
.chip.bad { color: var(--red); border-color: var(--red-border); background: var(--red-tint); }
.panel .tbox { overflow-x: auto; }
.panel table.t { width: 100%; border-collapse: collapse; }
.panel table.t th { height: 30px; padding: 0 10px; text-align: left; font: 600 10.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.panel table.t th.r { text-align: right; }
.panel table.t td { padding: 6px 10px; border-bottom: 1px solid var(--divider); color: var(--ink-2); vertical-align: middle; }
.panel table.t td.title { color: var(--ink); font-weight: 500; }
.panel table.t td small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.panel table.t td.num { font: 12.5px var(--mono); text-align: right; white-space: nowrap; }
.panel .facts2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
/* The card's "What it's going for now" arrives from pkid after the card shows: its body keeps the room of its two facts and the note
   (a fact of two lines and the note at its longest, three lines with "eBay had more listings"), so the answer moves nothing below it. */
#card-going .pbody { min-height: 148px; box-sizing: border-box; }
.panel .fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 9px; background: var(--rail); border: 1px solid var(--hairline); border-radius: var(--radius-well, 3px); }
.panel .fact span { color: var(--muted); font: 600 10px var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.panel .fact b { color: var(--ink); font: 500 13px var(--mono); overflow-wrap: anywhere; }
.panel .fact b.am { color: var(--amber); } .panel .fact b.em { color: var(--emerald); }
.panel .water { background: var(--rail); border: 1px solid var(--hairline); border-radius: 3px; }
.panel .water > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; padding: 0 10px; color: var(--ink-2); border-bottom: 1px solid var(--divider); }
.panel .water > div b { color: var(--ink); font: 500 12.5px var(--mono); }
.panel .water > div.tot { min-height: 32px; color: var(--ink); font-weight: 600; border-bottom: 0; }
.panel .refusal, .refusal-note { border: 1px dashed var(--amber-border); background: var(--amber-tint); border-radius: 3px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; color: var(--amber-body); font-size: 12.5px; }
.refusal-note b { color: var(--amber); font-weight: 600; }
.button.blocked { background: transparent; border: 1px dashed var(--amber-border); color: var(--amber-body); }