/* Pile of Shame - a toy-shop wall, a walnut shelf and six cartridge colours. Light and dark share one set of tokens. */
:root {
  --bg: #f3f0fa; --panel: #fffefe; --ink: #1d1a2e; --muted: #5a5670; --line: #ddd6ec; --accent: #b0154f; --accent-ink: #ffffff; --chip: #ebe5f7;
  --c0: #148a85; --c1: #d9462f; --c2: #c98a06; --c3: #6a4bc4; --c4: #2f8a3e; --c5: #2a66b8; --cs: #9c98a8; --cr: #c9c4d4;
  --label: #fbf6e9; --label-ink: #24203a; --grip: rgba(0,0,0,.22); --stripe: rgba(255,255,255,.42); --badge: #1d1a2e; --badge-ink: #ffffff; --bow: #b0154f;
  --plank: #8a5a3b; --plank-edge: #b47f53; --plank-shadow: rgba(60,35,20,.18); --meter: #e4ddf0; --meter-fill: #148a85; --meter-over: #d9462f;
  --v-clearable-bg: #d7f0dc; --v-clearable: #17562a; --v-trim-bg: #fbe8c2; --v-trim: #6b4200; --v-avalanche-bg: #f9d9d9; --v-avalanche: #8a1c1c;
  --warn: #8f2a12; --bad: #a3141b; --ok: #1f5a26; --info: #3c3a8f;
}
:root[data-theme="dark"] {
  --bg: #14121d; --panel: #1d1a2a; --ink: #f0ebf8; --muted: #b3aec6; --line: #353049; --accent: #ff6fa5; --accent-ink: #2a0614; --chip: #2a2640;
  --c0: #23aca5; --c1: #f0664f; --c2: #e6a92a; --c3: #8a6ef0; --c4: #45ad55; --c5: #4b8be0; --cs: #6e6a7c; --cr: #4a4658;
  --label: #f2ecdf; --label-ink: #24203a; --grip: rgba(0,0,0,.32); --stripe: rgba(255,255,255,.30); --badge: #f0ebf8; --badge-ink: #1d1a2a; --bow: #ff6fa5;
  --plank: #6b4329; --plank-edge: #946039; --plank-shadow: rgba(0,0,0,.45); --meter: #2c2840; --meter-fill: #23aca5; --meter-over: #f0664f;
  --v-clearable-bg: #1c3a24; --v-clearable: #c4efcd; --v-trim-bg: #45330c; --v-trim: #ffe1a3; --v-avalanche-bg: #4a1c22; --v-avalanche: #ffd0d0;
  --warn: #ffb4a0; --bad: #ff9a9a; --ok: #b5e8bb; --info: #c9c7ff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; }
a { color: var(--accent); }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: .875rem; } .muted { color: var(--muted); } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.bar { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 3px solid var(--ink); background: var(--panel); flex-wrap: wrap; }
.back { text-decoration: none; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin-right: auto; white-space: nowrap; }
.brand strong { font-weight: 900; letter-spacing: -.01em; }
.logo { width: 30px; height: 30px; flex: none; }
.lg-cart { fill: var(--c1); stroke: var(--ink); stroke-width: 1.4; }
.lg-label { fill: var(--label); stroke: var(--ink); stroke-width: 1; }
.lg-grip { fill: var(--ink); opacity: .55; }
.session { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pill { font: inherit; font-size: .875rem; border: 2px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 5px 13px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.3; }
.pill:hover:not(:disabled) { border-color: var(--accent); }
.pill.solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.pill.solid:hover:not(:disabled) { color: var(--accent-ink); filter: brightness(1.07); }
.pill.ghost { cursor: default; background: transparent; }
.pill.tiny { padding: 3px 10px; font-size: .8rem; }
.pill.big { padding: 10px 22px; font-size: 1rem; box-shadow: 3px 3px 0 var(--ink); }
.pill.big:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pill:disabled { opacity: .5; cursor: not-allowed; }
main { max-width: 1080px; margin: 0 auto; padding: 8px 20px 40px; }
.hero { padding: 24px 0 8px; }
.kicker { font-size: .85rem; color: var(--muted); border-left: 4px solid var(--c2); padding-left: 10px; margin: 0 0 14px; max-width: 760px; }
h1 { font-family: "Arial Black", "Helvetica Neue", system-ui, sans-serif; font-weight: 900; font-size: clamp(2.2rem, 8vw, 3.6rem); margin: 0; line-height: 1.02; letter-spacing: -.02em; overflow-wrap: anywhere; text-shadow: 3px 3px 0 var(--chip); }
.h1b { display: block; font-size: 1.05rem; font-family: system-ui, sans-serif; color: var(--muted); font-weight: 500; margin-top: 10px; letter-spacing: 0; text-shadow: none; }
.lede { max-width: 720px; }
.samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { font: inherit; font-size: .85rem; border: 2px solid var(--line); background: var(--chip); color: var(--ink); border-radius: 999px; padding: 4px 13px; cursor: pointer; }
.chip.on { border-color: var(--accent); background: var(--panel); }
.panel { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 16px 0; min-width: 0; }
.two-col { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin: 16px 0; }
.two-col .panel { margin: 0; }
.ph { font-size: 1.15rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 900; }
.step-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--ink); color: var(--panel); font-size: .85rem; flex: none; font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.fgrid .wide { grid-column: 1 / -1; }
.lbl { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=number], input[type=date], textarea, select { width: 100%; font: inherit; font-size: .95rem; color: var(--ink); background: var(--bg); border: 2px solid var(--line); border-radius: 8px; padding: 7px 9px; min-width: 0; }
#fPile { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; line-height: 1.5; }
textarea { resize: vertical; }
textarea.drop { border-color: var(--accent); border-style: dashed; }
input:focus-visible, textarea:focus-visible, select:focus-visible, .pill:focus-visible, .chip:focus-visible, input[type=file]:focus-visible + .filebtn { outline: 2px solid var(--accent); outline-offset: 2px; }
.droprow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.filebtn { cursor: pointer; }
.note { border-left: 3px solid var(--c2); padding: 4px 10px; background: var(--chip); border-radius: 0 8px 8px 0; }

/* The shelf */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fact { background: var(--bg); border: 2px solid var(--line); border-radius: 10px; padding: 8px 12px; min-width: 0; }
.fact-k { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.fact b { font-family: ui-monospace, Menlo, monospace; font-size: .98rem; overflow-wrap: anywhere; }
.shelf-box { width: 100%; margin: 10px 0 4px; background: linear-gradient(var(--chip), var(--bg)); border-radius: 12px; padding: 6px 4px 0; }
.shelf-svg { width: 100%; height: auto; display: block; }
.shelf-empty { padding: 30px 10px; text-align: center; }
.plank { fill: var(--plank); } .plank-edge { fill: var(--plank-edge); } .plank-shadow { fill: var(--plank-shadow); }
.cart-body { stroke: rgba(0,0,0,.28); stroke-width: 1; }
.cart-body.c0 { fill: var(--c0); } .cart-body.c1 { fill: var(--c1); } .cart-body.c2 { fill: var(--c2); }
.cart-body.c3 { fill: var(--c3); } .cart-body.c4 { fill: var(--c4); } .cart-body.c5 { fill: var(--c5); }
.cart-body.cs { fill: var(--cs); } .cart-body.cr { fill: var(--cr); }
.cart.k-retire { opacity: .62; }
.cart.draft .cart-body { stroke-dasharray: 4 3; }
.stripe { fill: var(--stripe); }
.cart-grip { fill: var(--grip); }
.cart-label { fill: var(--label); }
.cart-title { fill: var(--label-ink); font: 700 11px system-ui, -apple-system, "Segoe UI", sans-serif; }
.cart-hours { fill: #ffffff; font: 700 11px ui-monospace, Menlo, monospace; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 2px; }
.cart-badge { fill: var(--badge); stroke: var(--panel); stroke-width: 2; }
.cart-badge-t { fill: var(--badge-ink); font: 800 11px ui-monospace, Menlo, monospace; }
.cart-bow { fill: var(--bow); }
.key-line { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.kl { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 14px; height: 18px; border-radius: 3px 3px 1px 1px; border: 1px solid rgba(0,0,0,.25); }
.kx-next { background: var(--c0); }
.kx-sample { background: repeating-linear-gradient(45deg, var(--c3) 0 3px, var(--stripe) 3px 6px), var(--c3); }
.kx-shelve { background: var(--cs); }
.kx-retire { background: var(--cr); opacity: .7; }
.meter { height: 14px; border-radius: 7px; background: var(--meter); border: 2px solid var(--line); overflow: hidden; margin-top: 6px; }
.meter-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--meter-fill) 0 14px, transparent 14px 16px); transition: width .4s; }
.meter-fill.over { background: var(--meter-over); }
.verdict-row { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; flex-wrap: wrap; }
.verdict-row p { margin: 2px 0; flex: 1 1 260px; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 6px; font-weight: 800; font-size: .85rem; background: var(--chip); color: var(--ink); white-space: nowrap; letter-spacing: .02em; }
.badge.v-clearable { background: var(--v-clearable-bg); color: var(--v-clearable); }
.badge.v-trim { background: var(--v-trim-bg); color: var(--v-trim); }
.badge.v-avalanche { background: var(--v-avalanche-bg); color: var(--v-avalanche); }

/* Ask, progress, result */
.runrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.gate { margin: 10px 0 0; }
.steps { list-style: none; padding: 0; margin: 8px 0; }
.step { padding: 3px 0; color: var(--muted); } .step.active { color: var(--ink); font-weight: 600; } .step.done { color: var(--ok); }
.step-ic { display: inline-block; width: 1.2em; font-family: ui-monospace, monospace; }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; background: var(--bg); padding: 10px; border-radius: 8px; max-height: 360px; overflow: auto; }
.res-kick { text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: 0; font-weight: 800; }
.result h2 { font-family: "Arial Black", system-ui, sans-serif; margin: 2px 0 6px; font-size: 1.5rem; overflow-wrap: anywhere; }
.result h3 { margin: 18px 0 8px; font-size: 1rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.slip { background: var(--bg); border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.slip h4 { margin: 4px 0; font-size: .9rem; }
.slip p { margin: 4px 0 10px; overflow-wrap: anywhere; }
.plain-list { margin: 4px 0; padding-left: 18px; } .plain-list li { margin: 4px 0; overflow-wrap: anywhere; }
.farewell { list-style: none; padding: 0; }
.tag-card { position: relative; background: var(--label); color: var(--label-ink); border-radius: 4px 10px 10px 4px; padding: 8px 12px 8px 22px; margin: 6px 0; display: flex; flex-direction: column; gap: 2px; }
.tag-card::before { content: ""; position: absolute; left: 7px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--label-ink); }
.tag-card .muted { color: #5a5670; }
.thanks { font-style: italic; }
td.none, li.none, p.none { color: var(--muted); font-style: italic; }
.tag-card.none, li.none.tag-card { background: none; }
.recon { margin: 0; padding-left: 18px; } .recon li.warn { color: var(--warn); } .recon li.bad { color: var(--bad); font-weight: 600; } .recon li.info { color: var(--info); }

/* Save slots */
.slots { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.slot { background: var(--bg); border: 2px solid var(--ink); border-radius: 6px; padding: 8px 12px 10px; box-shadow: 3px 3px 0 var(--line); min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.slot.k-sample { border-style: dashed; }
.slot.late { opacity: .72; }
.slot.none { border: 2px dashed var(--line); box-shadow: none; color: var(--muted); font-style: italic; }
.slot-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 700 .75rem ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.slot-no { color: var(--accent); }
.slot-wk { color: var(--muted); }
.slot-title { font-size: 1rem; overflow-wrap: anywhere; }
.slot-bar { height: 8px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--panel); overflow: hidden; }
.slot-fill { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--c0) 0 6px, transparent 6px 8px); }
.slot-meta { color: var(--muted); }
.slot-tip { margin: 2px 0 0; overflow-wrap: anywhere; }
.slot-done { align-self: flex-start; margin-top: 4px; }
.exports, .cardrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

/* Saved piles */
.saved { list-style: none; padding: 0; margin: 8px 0 0; }
.hrow { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; } .hinfo b { overflow-wrap: anywhere; }
.hbtns { display: flex; gap: 6px; }
.file-tab { width: 10px; align-self: stretch; border-radius: 3px; background: var(--line); flex: none; }
.file-tab.v-clearable { background: var(--c4); } .file-tab.v-trim { background: var(--c2); } .file-tab.v-avalanche { background: var(--c1); }
.foot { max-width: 1080px; margin: 0 auto; padding: 10px 20px 40px; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 20; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--panel); padding: 10px 14px; border-radius: 10px; font-size: .88rem; transition: opacity .5s; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.toast.err { background: var(--bad); color: var(--panel); }
.toast a { color: inherit; font-weight: 700; }
.toast.gone { opacity: 0; }

@media (max-width: 820px) { .two-col, .pair { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .bar { padding: 8px 14px; } main { padding: 4px 14px 32px; } .panel { padding: 14px; }
  .facts { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .back-t { display: none; }
  .hrow { flex-wrap: wrap; }
  .pill.big { width: 100%; text-align: center; }
}
@media print {
  body.print-slots .bar, body.print-slots main > *:not(.slotbox), body.print-slots .foot, body.print-slots .toasts, body.print-slots .exports, body.print-slots .slot-done { display: none !important; }
  body.print-slots .slotbox { border: 0; }
}