/* ==================================================================
   Listing Transfer
   Black tie. Bodoni and Futura-era geometry, double rules, letterspaced
   caps, hard corners.

   The previous design used teal for a dry run and amber for a live run.
   Monochrome removes hue as a channel, so that warning is rebuilt from
   inversion instead: in live mode the whole rail flips to black. It is
   louder than the colour ever was, and it still works for anyone who
   cannot distinguish teal from amber in the first place.
   ================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,600;6..96,700&family=IBM+Plex+Mono:wght@400;500&family=Jost:wght@300;400;500;600&display=swap");

:root {
  --ink:      #0b0b0c;
  --ink-2:    #2e2e30;
  --grey:     #6b6b6e;
  --grey-2:   #9a9a9d;
  --hair:     #d6d4ce;
  --hair-2:   #e8e6e0;
  --paper:    #f5f3ee;
  --card:     #ffffff;

  --display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --ui:      "Jost", "Century Gothic", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gap: 1.5rem;

  /* Hazard hatching. In a monochrome system this is the only "alarm"
     texture available, so it is reserved strictly for failures. */
  --hatch: repeating-linear-gradient(
    -45deg, var(--ink) 0 3px, transparent 3px 7px
  );
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 var(--gap) 5rem;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.65 var(--ui);
  -webkit-font-smoothing: antialiased;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-hidden { display: none !important; }

/* ---------- Masthead: the playbill ------------------------------ */

.masthead {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.5rem;
  padding: 2.25rem 0 1.1rem;
  border-bottom: 4px double var(--ink);
  margin-bottom: var(--gap);
  text-align: center;
}
.masthead__mark { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.masthead__title {
  font: 700 2.15rem/1 var(--display);
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums;
}
.masthead__sub {
  position: relative;
  display: flex; align-items: center; gap: 0.7rem;
  font: 500 0.68rem/1 var(--ui);
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--grey);
}
.masthead__sub::before, .masthead__sub::after {
  content: '◆'; font-size: 0.5rem; color: var(--ink);
}
.envtag {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--ink);
  font: 500 0.64rem/1.4 var(--ui);
  letter-spacing: 0.28em; text-transform: uppercase;
}
.envtag[data-env="PRODUCTION"] { background: var(--ink); color: var(--paper); }

/* ---------- The rail -------------------------------------------- */

.rail {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  border: 1px solid var(--ink);
  background: var(--card);
  margin-bottom: var(--gap);
  transition: background 220ms ease, color 220ms ease;
}

.terminal { padding: 1.4rem 1.5rem; min-width: 0; }
.terminal__label {
  margin: 0 0 0.7rem;
  font: 500 0.62rem/1 var(--ui);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--grey);
}
.terminal__name {
  margin: 0 0 0.35rem;
  font: 600 1.3rem/1.25 var(--display);
  letter-spacing: 0.01em;
  word-break: break-word;
}
.terminal__meta { margin: 0 0 1.15rem; font-size: 0.83rem; color: var(--ink-2); }
.terminal__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.rail__route {
  display: flex; align-items: center; justify-content: center; gap: 0.2rem;
  padding: 0 1.3rem;
  border-left: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
}
.chev { font: 300 1.6rem/1 var(--ui); color: var(--grey-2); }
.rail.is-running .chev { animation: strut 1.05s ease-in-out infinite; }
.rail.is-running .chev:nth-child(2) { animation-delay: 0.14s; }
.rail.is-running .chev:nth-child(3) { animation-delay: 0.28s; }
@keyframes strut {
  0%, 100% { opacity: 0.35; transform: translateX(0); }
  45%      { opacity: 1;    transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .rail.is-running .chev { animation: none; opacity: 1; }
}

/* Curtain up. Live mode inverts the whole rail. */
.rail.is-live { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rail.is-live .terminal__label { color: var(--grey-2); }
.rail.is-live .terminal__meta  { color: var(--hair); }
.rail.is-live .rail__route { border-color: rgba(255,255,255,0.22); }
.rail.is-live .chev { color: var(--paper); }
.rail.is-live .btn { border-color: var(--paper); color: var(--paper); background: transparent; }
.rail.is-live .btn:hover { background: var(--paper); color: var(--ink); }
.rail.is-live .btn--solid { background: var(--paper); color: var(--ink); }

/* ---------- Notice ---------------------------------------------- */

.notice {
  margin: 0 0 var(--gap);
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--ink);
  border-left-width: 6px;
  background: var(--card);
  font-size: 0.89rem;
}
.notice[data-tone="ok"] { border-left-style: double; border-left-width: 8px; }

/* ---------- Progress -------------------------------------------- */

.meter {
  border: 1px solid var(--ink);
  background: var(--card);
  padding: 1.1rem 1.35rem 1.2rem;
  margin-bottom: var(--gap);
}
.meter__track { height: 10px; border: 1px solid var(--ink); background: var(--card); }
.meter__fill {
  height: 100%; width: 0;
  background: var(--ink);
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.meter__stats {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  margin-top: 0.85rem;
  font: 500 0.68rem/1 var(--ui);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--grey);
}
.meter__tallies { display: flex; gap: 1.15rem; flex-wrap: wrap; }
.tallymark b {
  font: 600 0.95rem/1 var(--display);
  letter-spacing: 0; color: var(--ink);
  margin-right: 0.15rem;
}
@media (prefers-reduced-motion: reduce) { .meter__fill { transition: none; } }

/* ---------- Layout ---------------------------------------------- */

.workspace {
  display: grid;
  grid-template-columns: 19.5rem minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
  margin-bottom: var(--gap);
}

.panel { border: 1px solid var(--ink); background: var(--card); }
.panel__head {
  margin: 0;
  font: 500 0.66rem/1 var(--ui);
  letter-spacing: 0.32em; text-transform: uppercase;
}
.panel__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.85rem; flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-bottom: 3px double var(--ink);
}
.panel__tools { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.panel--setup > .panel__head { padding: 1rem 1.25rem; border-bottom: 3px double var(--ink); }

.tally {
  font: 500 0.66rem/1 var(--ui);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey);
}

/* ---------- Fields ---------------------------------------------- */

.field { margin: 0; padding: 1.25rem; border: 0; border-bottom: 1px solid var(--hair); }
.field__label {
  padding: 0;
  font: 500 0.62rem/1 var(--ui);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--grey);
}
.field__hint { margin: 0.6rem 0 0.9rem; font-size: 0.79rem; line-height: 1.6; color: var(--ink-2); }

.modeswitch { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0.85rem; }
.modeswitch button {
  padding: 0.65rem 0.5rem;
  border: 1px solid var(--ink);
  background: var(--card);
  font: 500 0.66rem/1.3 var(--ui);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--grey);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.modeswitch button + button { border-left: 0; }
.modeswitch button:hover { color: var(--ink); }
.modeswitch button.is-on { background: var(--ink); color: var(--paper); }

.select, .input { display: block; margin-bottom: 0.85rem; }
.select span, .input span {
  display: block; margin-bottom: 0.4rem;
  font: 500 0.62rem/1 var(--ui);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey);
}
.select select, .input input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--hair);
  border-bottom-color: var(--ink);
  background: var(--card);
  font: 400 0.87rem/1.4 var(--ui);
  color: var(--ink);
}
.select select:focus, .input input:focus { outline: none; border-color: var(--ink); }
.select select:disabled, .input input:disabled { background: var(--paper); color: var(--grey-2); }

.check {
  display: flex; gap: 0.65rem; align-items: flex-start;
  margin-top: 0.75rem;
  font-size: 0.84rem; line-height: 1.55;
  cursor: pointer;
}
.check input { margin-top: 0.25rem; accent-color: var(--ink); width: 0.95rem; height: 0.95rem; }
.check em { font-style: normal; color: var(--grey); }

.launch { padding: 1.25rem; }
.launch__note { margin: 0.85rem 0 0; font-size: 0.78rem; line-height: 1.6; color: var(--grey); }

/* ---------- Buttons --------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ink);
  background: transparent;
  font: 500 0.66rem/1.4 var(--ui);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--ink); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--card); color: var(--ink); }
.btn--quiet { border-color: var(--hair); color: var(--grey); letter-spacing: 0.14em; }
.btn--quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--danger { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--go {
  display: flex; width: 100%;
  padding: 1rem;
  border: 1px solid var(--ink);
  background: var(--card);
  font-size: 0.72rem; letter-spacing: 0.28em;
}
.btn--go:hover { background: var(--ink); color: var(--paper); }
/* Solid black plus a hazard rule: the loudest statement available here. */
.btn--go[data-mode="live"] {
  background: var(--ink); color: var(--paper);
  border-top: 5px solid transparent;
  border-image: var(--hatch) 5;
}
.btn--go[data-mode="live"]:hover { background: var(--ink-2); }
.btn--go:disabled:hover { background: var(--card); color: var(--ink); }
.btn--go[data-mode="live"]:disabled:hover { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Listing rows ---------------------------------------- */

.listwrap { padding: 0; }

.card {
  display: grid;
  grid-template-columns: auto 54px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--hair-2);
  cursor: pointer;
  transition: background 130ms ease;
}
.card:last-child { border-bottom: 0; }
.card:hover { background: var(--paper); }
.card.is-picked { background: var(--paper); box-shadow: inset 4px 0 0 var(--ink); }
.card input[type="checkbox"] { accent-color: var(--ink); width: 1rem; height: 1rem; cursor: pointer; }

.thumb {
  width: 54px; height: 54px; object-fit: cover;
  border: 1px solid var(--ink);
  background: var(--paper);
  display: block;
  /* Monochrome throughout, including seller photography. */
  filter: grayscale(1) contrast(1.06);
}
.thumb--none { display: grid; place-items: center; font-size: 0.7rem; color: var(--grey-2); }

.card__body { min-width: 0; }
.rowtitle {
  display: block;
  font: 600 1rem/1.35 var(--display);
  margin-bottom: 0.2rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rowmeta {
  display: block;
  font: 400 0.72rem/1.4 var(--mono);
  letter-spacing: 0.02em;
  color: var(--grey);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge {
  display: inline-block; margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--hair);
  font: 500 0.6rem/1.6 var(--ui);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey);
  vertical-align: 0.15em;
}

.card__figures { text-align: right; white-space: nowrap; }
.card__price { display: block; font: 600 1.05rem/1.25 var(--display); }
.card__qty {
  display: block;
  font: 500 0.6rem/1.5 var(--ui);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey);
}

/* Status without colour: fill, outline, rule weight and hatching. */
.stamp {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--ink);
  font: 500 0.6rem/1.3 var(--ui);
  letter-spacing: 0.22em; text-transform: uppercase;
  white-space: nowrap;
}
.stamp[data-status="copied"]   { background: var(--ink); color: var(--paper); }
.stamp[data-status="verified"] { border-style: double; border-width: 3px; }
.stamp[data-status="skipped"]  { border-color: var(--hair); color: var(--grey-2); }
.stamp[data-status="working"]  { border-style: dashed; color: var(--ink-2); }
.stamp[data-status="prior"]    { border-style: dotted; border-color: var(--grey-2); color: var(--grey-2); }
.stamp[data-status="failed"] {
  background: var(--ink); color: var(--paper);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-image: var(--hatch) 4;
}

/* ---------- States ----------------------------------------------- */

.empty { padding: 4rem 1.5rem; text-align: center; }
.empty strong {
  display: block; margin-bottom: 0.6rem;
  font: 600 1.35rem/1.25 var(--display);
}
.empty span { font-size: 0.86rem; color: var(--grey); }

.skeleton {
  display: grid;
  grid-template-columns: auto 54px minmax(0, 1fr) auto;
  align-items: center; gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--hair-2);
}
.bar {
  background: linear-gradient(90deg, var(--hair-2) 0%, var(--hair) 50%, var(--hair-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  height: 0.7rem;
}
.bar--box { height: 54px; width: 54px; }
.bar--check { height: 1rem; width: 1rem; }
.bar--wide { width: 60%; }
.bar--thin { width: 32%; height: 0.55rem; margin-top: 0.45rem; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bar { animation: none; } }

.pager {
  display: flex; align-items: center; justify-content: center; gap: 1.15rem;
  padding: 0.9rem;
  border-top: 3px double var(--ink);
  font: 500 0.66rem/1 var(--ui);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey);
}

/* ---------- Log --------------------------------------------------- */

.log {
  margin: 0; padding: 1.15rem 1.35rem;
  max-height: 17rem; overflow-y: auto;
  background: var(--ink);
  color: var(--hair);
  font: 400 0.77rem/1.8 var(--mono);
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- Confirm ------------------------------------------------ */

.confirm {
  max-width: 27rem; padding: 2rem;
  border: 1px solid var(--ink);
  border-top: 8px double var(--ink);
  background: var(--card);
  color: var(--ink);
  text-align: center;
}
.confirm::backdrop { background: rgba(11, 11, 12, 0.72); }
.confirm h3 { margin: 0 0 0.9rem; font: 700 1.6rem/1.2 var(--display); }
.confirm p { margin: 0 0 0.8rem; font-size: 0.89rem; }
.confirm__warn {
  padding: 0.9rem 1rem;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-image: var(--hatch) 4;
  font-size: 0.85rem;
}
.confirm__actions { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }

/* ---------- Narrow -------------------------------------------------- */

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr; }
  .rail__route {
    border-left: 0; border-right: 0;
    border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
    padding: 0.4rem; transform: rotate(90deg) scale(0.8);
  }
}

@media (max-width: 560px) {
  body { padding: 0 1rem 4rem; }
  .masthead__title { font-size: 1.6rem; }
  .masthead__sub { letter-spacing: 0.25em; font-size: 0.6rem; }
  .card { grid-template-columns: auto 44px minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.85rem 1rem; }
  .card__figures { display: none; }
  .thumb { width: 44px; height: 44px; }
}