/* ==========================================================================
   THE EBAY CONSOLE

   Loaded after office.css, which it borrows the frame, card, tally and table
   shapes from. Only the things this screen needs that the office one does not.

   `#ebay` is on office.css's root list — the `--o-*` and `--app-*` tokens are
   declared there and inherit downwards, so a root that is not on the list
   renders at the browser's own size on the browser's own white. That is a
   selector bug that looks exactly like a missing stylesheet, which is why it
   is written down in both files rather than one.

   --------------------------------------------------------------------------
   THE WORDS CARRY THE STATE. THE COLOUR AGREES WITH THEM.
   --------------------------------------------------------------------------

   Every band below is also a word in the row: "not costed" in the margin
   column, "Never synced" in the badge, an age in its own column. A screen read
   at speed on a phone, printed, screenshotted into a message, or read by
   somebody with a colour deficiency has to survive losing the hue entirely —
   and on this screen the thing the hue would be carrying is "these numbers are
   older than they look", which is the one thing nobody can afford to miss.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE SYNC BADGE — the first thing on the screen, because everything under it
   is conditional on what it says.
   -------------------------------------------------------------------------- */
.eby-badge {
  display: inline-block;
  margin: 0.35rem 0 0.6rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--o-pill);
  border: 1px solid var(--o-line);
  background: var(--o-inset);
  color: var(--app-mute);
  font-size: var(--step--1);
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Synced is the only state in which a number on this screen is a fact, so it
   is the only one that is green — the healthy state, not the accent. */
.eby-badge.is-ok {
  color: var(--o-ok);
  border-color: var(--o-ok-mark);
  background: var(--o-ok-bg);
}

/* Failed and running are different problems: one is stale data, the other is
   data that is about to change under the reader. Failed is the red state and
   the only one bordered, because only it needs a decision; running is amber,
   "look before you trust this". */
.eby-badge.is-failed {
  color: var(--o-bad);
  border-color: var(--o-bad-mark);
  background: var(--o-bad-bg);
}
.eby-badge.is-running { color: var(--o-warn-ink); }

/* Never, not connected, and cannot-tell are not failures — nothing has gone
   wrong, nothing has happened yet. Quiet and dashed: a gap in the record
   rather than an alarm. */
.eby-badge.is-never,
.eby-badge.is-unconfigured,
.eby-badge.is-unreadable {
  border-style: dashed;
  color: var(--app-mute);
}

/* --------------------------------------------------------------------------
   THE RUN LOG. Five rows at most — one says which state you are in, a few
   show whether it is a pattern or a blip.
   -------------------------------------------------------------------------- */
.eby-runs {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.eby-run {
  display: grid;
  grid-template-columns: 5.5rem 9rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: var(--o-inset);
  border: 1px solid var(--o-line);
  font-size: var(--step--1);
}

.eby-run b { font-weight: 750; text-transform: uppercase; letter-spacing: 0.02em; }
.eby-run span { color: var(--app-mute); font-weight: 600; }
.eby-run em {
  font-style: normal;
  color: var(--app-mute);
  /* The eBay error is printed verbatim — "invalid_grant" is the diagnosis —
     and it can be long. It wraps rather than being cut off, because a message
     truncated at the useful word is a message that was not printed. */
  overflow-wrap: anywhere;
}

/* A failed run keeps its message readable rather than muted: it is the row
   somebody came to this card to find. */
.eby-run.is-bad { border-color: rgb(var(--bad-rgb) / 0.45); }
.eby-run.is-bad em { color: var(--o-bad); }

@media (max-width: 40rem) {
  .eby-run { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

/* --------------------------------------------------------------------------
   THE TWO TABLES

   Built for hundreds of rows. The scroll is on the table's own wrapper rather
   than on the page, so a wide row on a phone does not push the whole layout
   sideways — the same `min-width: 0` problem .ofc-main solves for the office.
   -------------------------------------------------------------------------- */
.eby-table { display: block; overflow-x: auto; max-width: 100%; }
.eby-table thead, .eby-table tbody { display: table; width: 100%; }

.eby-table td, .eby-table th { vertical-align: baseline; }
.eby-table td.quiet  { color: var(--app-mute); font-weight: 600; }
.eby-table td.strong { font-weight: 750; }

/* The eBay link opens in a new tab: this screen is where somebody decides, and
   the listing is where they act. Losing the console to do it is a step back. */
.eby-table td a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.eby-table td a:hover { color: var(--o-accent); }

/* The SKU under the title, because two listings can share a title and the SKU
   is what tells them apart in the supplier's system. */
.eby-sku {
  display: block;
  margin-top: 0.15rem;
  color: var(--app-mute);
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   THE BANDS. Four for listings, three for orders, and each is a different KIND
   of problem rather than a different severity of one.
   -------------------------------------------------------------------------- */

/* Losing money: cost is known and the sale does not cover it. That is a
   loss already happening, so it is the red state: a red wash, a red rule on
   the left, and the margin cell says the negative number out loud. */
#eby-listings-body tr.is-losing { background: rgb(var(--bad-rgb) / 0.10); }
#eby-listings-body tr.is-losing td:first-child { box-shadow: inset 2px 0 0 var(--o-bad-mark); }
#eby-listings-body tr.is-losing td.num.strong { color: var(--o-bad); }

/* Unmeasured: no cost on file. DASHED, not warm — the same visual grammar the
   owner screen uses for a lien with no computable date. It is a gap in what we
   know, not a loss, and the two must not look like each other. */
#eby-listings-body tr.is-unmeasured td:first-child {
  box-shadow: inset 2px 0 0 var(--o-line-3);
}
#eby-listings-body tr.is-unmeasured td.num.quiet { font-style: italic; }

/* Earning and ended need no treatment; ended recedes because the decision it
   would invite has already been taken. */
#eby-listings-body tr.is-ended { opacity: 0.55; }

/* Orders. Band 0 is the defect risk — unshipped past the aging line — and it
   is the only row on this screen that gets worse while nobody looks at it, so
   it is the only one marked, in the overdue red. */
#eby-orders-body tr.is-rank0 { background: rgb(var(--bad-rgb) / 0.10); }
#eby-orders-body tr.is-rank0 td:first-child { box-shadow: inset 2px 0 0 var(--o-bad-mark); }
#eby-orders-body tr.is-rank0 td.strong { color: var(--o-bad); }
#eby-orders-body tr.is-rank1 td.strong { color: var(--app-text); }
#eby-orders-body tr.is-rank2 { opacity: 0.6; }
#eby-orders-body tr.is-rank2 td.strong { color: var(--app-mute); }

/* --------------------------------------------------------------------------
   THE LEDE. `is-clear` is office.css's; this only handles the case it does not
   have — a headline slot holding a dash because the number is not knowable.
   A dash must not read as an emphatic zero.
   -------------------------------------------------------------------------- */
#eby-lede:not(.is-clear) .ofc-lede__n:not(:empty) { font-variant-numeric: tabular-nums; }

/* ---- Phase VI: the Office's shell ------------------------------------------
   eBay is a channel of the Office, so it has the Office's rail and a header
   like every other page: its name and purpose, a hairline, the work below. */
#ebay .ofc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  min-height: 64px;
  margin: 0;
  padding: 0.75rem clamp(1rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--o-line-2);
}
#ebay .ofc-head h1 { margin: 0; font: 650 var(--o-t-xl)/1.15 var(--display); letter-spacing: -0.022em; }
#ebay .ofc-head > div:first-child p { margin: 0.2rem 0 0; font-size: var(--o-t-sm); font-weight: 450; color: var(--o-faint); }
#ebay .ofc-scroll { padding: 1.25rem clamp(1rem, 2.4vw, 2rem) 3rem; }
#ebay .ofc-grid > .ofc-card + .ofc-card { margin-top: 0.5rem; }
#ebay .eby-badge { border-radius: var(--o-r-sm); }
#ebay .eby-limits > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
#ebay .eby-limits > summary::-webkit-details-marker { display: none; }
#ebay .eby-limits > summary h2 { margin: 0; font-size: var(--o-t-md); color: var(--o-dim); font-weight: 600; }
#ebay .eby-limits > summary::after { content: '+'; color: var(--o-faint); }
#ebay .eby-limits[open] > summary::after { content: '−'; }
#ebay .eby-limits > summary:hover h2 { color: var(--o-text); }
#ebay .eby-limits[open] > .ofc-cannot { margin-top: 1rem; }