/* amazon-returns: rules of this app only, on top of swcorp-tokens.css and swcorp.css.
   Pill cards and the horizontal stepper come from the old AmazonReturns Monitoring
   (amazon-returns/WebApp/static/css/app.css); Lookup from the removals scanner. */

.stepper { display: flex; flex-shrink: 0; padding: 2px 0 6px; }
.step {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* One connector per gap, owned by the step on its left: it starts at that
   icon's edge and ends at the next one's, at the vertical centre of both, so
   the line meets the icons instead of passing under them. One element rather
   than two halves, because a segment that fills has to fill in one sweep. */
.step::after {
  content: ''; position: absolute; top: 13px; height: 2px;
  left: calc(50% + 19px); width: calc(100% - 38px);
  background: var(--line); z-index: 0;
  transform-origin: left center;
}
.step:last-of-type::after { display: none; }  /* last-of-type: the steps' hover-tip <template>s come after them */
/* The segment leaving a finished stage is navy; the one leaving the stage
   that broke, or the one still running, is not -- the line must never run
   ahead of the work. */
.step.done::after { background: var(--navy); }
/* Where a run broke between stages: the line into that stage turns red and
   carries an X at its middle (the left edge of the stage); the stage is dashed red. */
.step:has(+ .step.stopped)::after, .step:has(+ template + .step.stopped)::after { background: var(--block); }
.step.stopped .step-icon { border: 2px dashed var(--block); background: var(--surface); color: var(--block); }
.step.stopped .step-name, .step.stopped .step-detail { color: var(--block); }
.step-break { position: absolute; left: 0; top: 14px; transform: translate(-50%, -50%); z-index: 1; width: 18px; height: 18px;
  border-radius: 50%; background: var(--block); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--surface); }
.step-break svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }

.step-icon {
  position: relative; z-index: 1;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 9px;
  border: 2px solid var(--line-mid);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s;
}
.step-icon svg {
  width: 15px; height: 15px; fill: none; stroke: var(--ink-3);
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.step.done   .step-icon { background: var(--navy); border-color: var(--navy); }
.step.failed .step-icon { background: var(--block);  border-color: var(--block); }
.step.done .step-icon svg, .step.failed .step-icon svg { stroke: var(--white); }
.step.alert .step-icon     { background: var(--warn-bg); border-color: var(--amber); }
.step.alert .step-icon svg { stroke: var(--amber-stroke); }
/* A stage still running carries the spinner and no glyph: a mark plus a
   spinner would say two different things about one stage. */
.step.loading .step-icon {
  border-radius: 50%;
  border-color: var(--line); border-top-color: var(--navy);
  animation: pill-spin .75s linear infinite;
}
.step.loading .step-icon svg { display: none; }
/* A stage that skipped stays visible -- the reader has to see that the
   stage exists -- but dashed and gray, because nothing is being reported. */
.step.waiting .step-icon { border-style: dashed; }

.step-name, .step-detail {
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step-name {
  margin-top: 7px;
  font-size: 11.5px; font-weight: 700; color: var(--navy); letter-spacing: .1px;
}
.step-detail {
  margin-top: 1px;
  font-size: 10.5px; font-weight: 500; color: var(--ink-3);
}
.step.failed .step-name, .step.failed .step-detail { color: var(--block); }
/* Run page: how long the step took, and its whole detail in the hover tip. */
.step-time { margin-top: 2px; font: 500 10.5px var(--mono); color: var(--ink-3); }
.step[data-tip-ref] { cursor: default; border-radius: var(--r-ctl); }
.step[data-tip-ref]:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.tip-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.tip-steps li { display: grid; gap: 1px; }
.tip-steps li.fail b { color: var(--block); }
.tip-steps span { font: 11.5px/1.45 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.step.alert  .step-detail { color: var(--amber-stroke); }
.step.waiting .step-name  { color: var(--ink-3); }

/* On a narrow screen four labels share the width of a phone, so the type
   comes down before the ellipsis starts eating whole words. */
@media (max-width: 480px) {
  .step-name   { font-size: 10.5px; }
  .step-detail { font-size: 9.5px; }
  .step::after { left: calc(50% + 17px); width: calc(100% - 34px); }
}

/* The walk-through, played once when a run opens: each step lands, then its
   line draws into the next one. It is not decoration -- it is the order the
   stages ran, which a row that appears all at once never shows. `--i` is the
   step's place in the walk, set in the markup; every step past the one the
   run reached carries the last index, so the sweep stops where the work did
   and what never ran arrives together behind it. */
.stepper.run-in .step {
  animation: step-in .3s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay: calc(var(--i, 0) * 170ms);
}
/* Separate from the step, and later: the line leaves an icon that has
   already landed. */
.stepper.run-in .step::after {
  animation: step-line .17s linear backwards;
  animation-delay: calc(var(--i, 0) * 170ms + 150ms);
}
@keyframes step-in {
  from { opacity: 0; transform: translateY(6px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes step-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="force"]) .stepper.run-in .step,
  :root:not([data-motion="force"]) .stepper.run-in .step::after { animation: none; }
}

/* ── Shared rows: a section's controls above its table ── */
.section-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; margin-bottom: 10px; }
.section-row .section-title { margin: 0; }
.section-row .grow { flex: 1; }
.grid td.msg { white-space: normal; min-width: 240px; color: var(--ink-2); }
/* A row with more to see ends in a boxed chevron (as SWCrawler's .row-open). */
th.open, td.open { width: 56px; text-align: center; }
.row-open { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink-3);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform var(--dur-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .row-open:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface-2); } }
.row-open:active { transform: scale(.95); }
.row-open:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.row-open .i { width: 14px; height: 14px; }
/* What Amazon reported for a document (Report): the key fields as tiles,
   the rest in two columns, so a report row fits without scrolling. */
.raw-dlg { position: relative; width: min(860px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 0; }
.raw-dlg[open] { display: flex; flex-direction: column; }
.raw-body { overflow: auto; padding: 18px 22px 18px; }
.raw-head { display: flex; align-items: flex-start; gap: 6px; padding-right: 36px; }
.raw-head > div { flex: 1; min-width: 0; }
.raw-head p { margin-top: 4px; font-size: 12.5px; }
.raw-icon { flex: none; position: relative; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  margin-top: -4px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform var(--dur-press) var(--ease-out); }
.raw-close { position: absolute; top: 14px; right: 14px; margin-top: 0; }
.raw-icon .i { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .raw-icon:hover { background: var(--surface-2); color: var(--ink); } }
.raw-icon:active { transform: scale(.95); }
.raw-icon:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* Copy: the two sheets turn into a check for a moment, then come back. */
.raw-copy .i { position: absolute; transition: opacity .16s ease, transform .2s var(--ease-out); }
.raw-copy .ic-done { opacity: 0; transform: scale(.5); color: var(--ok); }
.raw-copy.done .ic-copy { opacity: 0; transform: scale(.5); }
.raw-copy.done .ic-done { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .raw-copy .i { transition: opacity .16s ease; transform: none !important; } }
.raw-dlg dt { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.raw-dlg dd { color: var(--ink); overflow-wrap: anywhere; user-select: text; }
.raw-dlg dd > span { display: block; }   /* one line per distinct value */
.raw-dlg dd > .blank { color: var(--ink-3); font-style: italic; }
.raw-key { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 16px;
  border: 1px solid var(--line); border-radius: var(--r-box); background: var(--line); overflow: hidden; }
.raw-key > div { padding: 9px 12px; background: var(--surface-2); }
.raw-key.wide-first > div:first-child { grid-column: span 2; }
.raw-key dd { margin-top: 3px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.raw-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-top: 14px; }
.raw-kv > div { display: grid; grid-template-columns: 158px 1fr; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.45; }
.raw-kv dt { padding-top: 1px; }
@media (max-width: 720px) {
  .raw-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raw-key.wide-first > div:first-child { grid-column: 1 / -1; }
  .raw-kv { grid-template-columns: 1fr; }
}
/* A row that opens something (data-href, app.js): it says so on hover and focus. */
tr[data-href], tr[data-raw] { cursor: pointer; }
tr[data-raw]:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { tr[data-raw]:hover td { background: var(--surface-2); } }
/* Opened from the Report's Not Created chevron (#item-N): the item it points at. */
.fail-card:target { box-shadow: 0 0 0 2px var(--block); }
tr:target td { background: var(--block-bg); }
tr[data-href]:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { tr[data-href]:hover td { background: var(--surface-2); } }
tr[data-href][aria-selected="true"] td { background: var(--navy-50); }

.notice a { color: var(--navy); font-weight: 600; margin-left: 4px; }

/* Report: the table and its footer are one card; the footer holds the
   count and the calendar that picks the days (pattern of Ipaas Monitoring).
   The card fills the rest of the window, so a filter that leaves fewer rows
   does not pull the footer up with them. */
.main:has(> .table-card) > .spacer { display: none; }  /* else it splits the free height with the card */
.main > .table-card:has(+ .spacer) { margin-bottom: 28px; }  /* the gap .main > :last-child gave the spacer */
.table-card { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface); }
.table-card > .grid-wrap { flex: 1 1 auto; min-height: 0; border: 0; border-radius: var(--r-box) var(--r-box) 0 0;
  /* Gutter always kept: a filter that drops the scrollbar would widen the auto column. */
  scrollbar-gutter: stable; }
/* The vertical scrollbar starts under the sticky header (--thead-h, measured in
   app.js): its track has that much top margin, and the gutter beside the header
   is navy like it, so the header reaches the card's edge. No arrow buttons.
   Chrome ignores the ::-webkit-scrollbar rules while scrollbar-width/-color are
   set (swcorp.css sets them on .grid-wrap), so they are reset there; Firefox
   has no track margin and keeps the standard thin bar. */
.grid-wrap { background: linear-gradient(var(--navy) 0 var(--thead-h, 0px), transparent 0) no-repeat; }
@supports selector(::-webkit-scrollbar) {
  .grid-wrap { scrollbar-width: auto; scrollbar-color: auto; }
  .grid-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
  .grid-wrap::-webkit-scrollbar-track { background: transparent; }
  .grid-wrap::-webkit-scrollbar-track:vertical { margin-top: var(--thead-h, 0px); }
  .grid-wrap::-webkit-scrollbar-thumb { background: var(--line-mid); border: 2px solid transparent; border-radius: 6px; background-clip: padding-box; }
  .grid-wrap::-webkit-scrollbar-thumb:hover { background-color: var(--line-strong); }
  .grid-wrap::-webkit-scrollbar-button, .grid-wrap::-webkit-scrollbar-corner { display: none; background: transparent; }
}
.table-card > .empty { margin: auto; padding: 48px 0; }  /* centered in the card's free height; .empty's margin-top: 12px pinned it up */
.tfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 14px;
  border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-box) var(--r-box);
  font-size: 12px; color: var(--ink-3); flex-shrink: 0; }
.dpick { position: relative; }
.dp-btn { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: var(--r-ctl); background: var(--surface); color: var(--ink-3); font-size: 12px;
  transition: border-color .15s ease, transform var(--dur-press) var(--ease-out); }
.dp-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dp-btn span { font-family: var(--mono); color: var(--ink); }
.dp-btn.dp-icon { width: 28px; padding: 0; justify-content: center; }
.dp-btn:active { transform: scale(.97); }
.dp-btn[aria-expanded="true"] { border-color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .dp-btn:hover { border-color: var(--ink-3); } }
.dp-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.dp-pop { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: var(--z-overlay); width: 244px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: var(--shadow-pop);
  transform-origin: bottom right; animation: dp-in var(--dur-enter) var(--ease-out); }
.dp-pop[hidden] { display: none; }
@keyframes dp-in { from { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .dp-pop { animation: none; } }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-title { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.dp-nav { width: 26px; height: 26px; border-radius: var(--r-tag); color: var(--ink-2); font-size: 15px; }
.dp-nav:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .dp-nav:not(:disabled):hover { background: var(--surface-3); } }
.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow span { text-align: center; font-size: 11px; font-weight: 500; color: var(--ink-3); padding: 2px 0 4px; }
.dp-day { position: relative; height: 28px; border-radius: var(--r-tag); font-family: var(--mono); font-size: 12px;
  color: var(--ink); transition: transform 120ms var(--ease-out); }
.dp-day:disabled { color: var(--line-strong); opacity: .6; cursor: default; }
.dp-day.is-today:not(.is-cur) { box-shadow: inset 0 0 0 1px var(--line-strong); }
.dp-day.in-sel { background: var(--navy-50); border-radius: 0; }
.dp-day.is-cur { background: var(--navy); color: var(--white); }
.dp-day:not(:disabled):active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .dp-day:not(:disabled):not(.is-cur):hover { background: var(--surface-3); } }
.dp-day:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.dp-mark { position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--amber); }
.dp-day.is-cur .dp-mark { background: var(--white); }
.dp-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.dp-reset { flex: none; color: var(--navy); font-weight: 600; font-size: 11px; }
.toolbar:has(.range) { align-items: flex-end; }

/* .main has no bottom padding (family), so the last block sat on the window's
   edge, out of proportion with the 28px above the title. */
.main > :last-child { margin-bottom: 28px; }

.run-head { display: flex; align-items: flex-start; gap: 12px; }
.run-head .back { width: 36px; padding: 0; justify-content: center; flex: none; }
.stepper { margin: 4px 0 20px; }
.step-icon svg { stroke-width: 2.2; }
.step.alert .step-detail { color: var(--warn); }

.section-title { margin-top: 20px; }
/* .main scrolls and is a flex column, so with several tables each one shrank
   to a sliver. With more than one, they keep their height (long ones scroll
   inside) and .main scrolls the page. */
.main:has(> .grid-wrap ~ .grid-wrap) > .grid-wrap { flex-shrink: 0; max-height: 60vh; }
.view { animation: view-in 200ms var(--ease-out) both; }   /* every navigation: short, a nudge not a slide */
/* Reloading the same page (a day picked in the calendar): no slide in from a blank
   view; the browser cross-fades the old page into the new one instead. */
.same-view .view { animation: none; }
@view-transition { navigation: auto; }
/* A day picked, the new page on its way: what will change dims (after 120 ms, so a
   quick answer shows nothing), the calendar itself stays as it is. */
.readout, .src-pills, .table-card .grid-wrap, #recon-count { transition: opacity 200ms ease; }
.loading .readout, .loading .src-pills, .loading .table-card .grid-wrap, .loading #recon-count { opacity: .45; transition-delay: 120ms; }
.loading, .loading * { cursor: progress; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@keyframes view-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view { animation: fade 180ms ease both; } @keyframes fade { from { opacity: 0; } } }

/* Lookup: the removals scanner, read-only */
.page-title { font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.page-subtitle { font-size: 13px; line-height: 1.65; color: var(--ink-3); margin: 4px 0 0; text-wrap: pretty; }
.scan-head { width: 100%; margin-inline: auto; text-align: center; max-width: 720px; }
.scan-field { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 14px; margin-top: 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-box); background: var(--surface-2); color: var(--ink-3); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; text-align: left; }
.scan-field:focus-within { border-color: var(--navy); background: var(--surface); box-shadow: var(--ring); }
.scan-field > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scan-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 600 16px var(--font); color: var(--ink); }
.scan-field input::placeholder { color: var(--ink-3); font-weight: 400; }
.scan-go { flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--r-ctl); background: var(--navy); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .15s ease, transform var(--dur-press) var(--ease-out); }
.scan-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scan-go:active { transform: scale(.95); background: var(--navy-dark); }
.try { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.try .chip { font-family: var(--mono); font-size: 11.5px; }
.order { width: 100%; max-width: 720px; margin: 16px auto 0; display: flex; flex-direction: column; }
.order[hidden] { display: none; }
.scan-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 24px; color: var(--ink-3); font-size: 13px; line-height: 1.6; text-align: center; }
.scan-empty svg { width: 52px; height: 52px; fill: none; stroke: var(--line-mid); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.scan-empty .ink { color: var(--ink); }
.order-card { background: var(--navy); color: #fff; border-radius: var(--r-box); padding: 12px 14px 14px; }
.order-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.65); }
.order-number { font-size: 16px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.order-meta { margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.65); }
.items-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 8px; min-height: 32px; }
.items-title { font-size: 13px; font-weight: 700; color: var(--navy); margin: 0; }
.items-count { font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.order .notice { margin: 0 0 8px; }
.doc-row { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 9px 10px 9px 14px; margin-bottom: 6px; border: 1.5px solid var(--line); border-radius: var(--r-box); background: var(--surface); }
.item-info { flex: 1; min-width: 0; line-height: 1.3; }
.item-sku { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.item-sub { margin-top: 2px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.item-plan { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.item-plan:empty { display: none; }
.item-plan.open { color: var(--warn); font-size: 12px; }
.doc-row .btn .i { width: 13px; height: 13px; }
.howto { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.55; }
@media (max-width: 600px) { .doc-row { flex-wrap: wrap; } .doc-row .btn { width: 100%; justify-content: center; } }

/* Report */
.range { display: flex; gap: 10px; align-items: flex-end; }
.range .field { display: grid; gap: 2px; }
.range .field label { font-size: 10px; }
.range .field input { width: 120px; height: var(--h-ctl-sm); font-size: 13px; }

/* Monitoring */
.mon[hidden] { display: none; }
.toolbar { margin-top: 16px; }
.fail-card { border: 1.5px solid var(--line); border-left: 3px solid var(--block); border-radius: var(--r-box); padding: 12px 14px; display: grid; gap: 10px; }
.fail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.fail-head .muted { font-size: 12px; }
.payload { margin: 0; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); font: 12px/1.55 var(--mono); color: var(--ink-2); overflow-x: auto; white-space: pre; }
.foot[hidden] { display: none; }

/* Audit (taste + Emil), 28/10 */
/* Press feedback on every pressable element the family sheet does not already cover. */
.chip, .linkbtn, .tab, tr.pick { transition: transform var(--dur-press) var(--ease-out), background-color .15s ease, border-color .15s ease; }
.chip:active, .linkbtn:active, .tab:active { transform: scale(.97); }
/* Run rows are selectable: say so with the cursor and keyboard ring. */
tr.pick { cursor: pointer; }
tr.pick:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { tr.pick:not([aria-selected=true]):hover td { background: var(--surface-2); } }
/* Lookup answers a scan: no entrance, it must feel instant. The field confirms the scan instead. */
.scan-field.hit { border-color: var(--navy); box-shadow: var(--ring-strong); }
/* Attention rows: the link sits on the first line, not floating mid-card. */
.attn li .linkbtn { align-self: start; margin-top: 1px; }
/* Flow strip: the step that is done reads as done without a second color. */
.flow li.done .flow-n { color: var(--ok); }
/* A busy button takes no second click. */
.btn[aria-busy=true] { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .chip:active, .linkbtn:active, .tab:active { transform: none; } }

/* Header chip: say plainly when the app writes to a sandbox. */

/* Status pills as SWCrawler's Monitoring (web/static/css/style.css .pill): a dot
   and the word on a tint of its colour, no border, no icon. Over swcorp.css .badge. */
.badge { gap: 6px; padding: 2px 9px 2px 7px; font-size: 11px; font-weight: 500; line-height: 16px; border: 0; }
.badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge.off .badge-dot { background: var(--line-strong); }
.badge.run { background: var(--run-bg); color: var(--run-ink); }
.badge.run .badge-dot { background: var(--run); }

details summary { cursor: pointer; font-size: 12.5px; color: var(--navy); font-weight: 600; }
.fail-card { margin-bottom: 12px; }
a.doc { color: var(--navy); font-family: var(--mono); font-size: 12.5px; }
a.tab { text-decoration: none; }
.empty { margin-top: 12px; }

.btn.loading .i { border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: var(--white);
  animation: pill-spin .75s linear infinite; }
.btn.loading .i use { display: none; }
.btn.primary.loading:disabled { opacity: 1; background: var(--navy); color: var(--white); cursor: progress; }
.section-note { font-size: 12.5px; margin: -4px 0 10px; flex-shrink: 0; } .section-note b { color: var(--ink); }

/* Report: did the warehouse register what we created. One bar per source, its
   states in the family's status colours, each with its number written beside. */
/* The answer at the right of the title, as Ipaas's readout: tiles of a small
   label over a big number; the ones that are lists open their tab. */
.titlebar > .readout { margin-left: auto; align-self: center; }
.readout { display: flex; gap: 10px; flex-wrap: wrap; }
.ro { display: grid; gap: 3px; min-width: 112px; padding: 10px 16px 11px; text-align: left; border: 1px solid var(--line);
  border-radius: var(--r-box); background: var(--surface); font: inherit; color: inherit;
  transition: border-color .15s ease, background-color .15s ease, transform var(--dur-press) var(--ease-out); }
.ro-k, .ro-v, .ro-k .i { transition: color .15s ease; }
.ro-k { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ro-k .i { width: 13px; height: 13px; }
.ro-v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.ro.ok .ro-k .i { color: var(--ok); } .ro.warn .ro-k .i { color: var(--amber-stroke); } .ro.block .ro-k .i { color: var(--block); }
.ro.block.hot .ro-v { color: var(--block); }
.ro.warn.hot .ro-v { color: var(--warn); }
button.ro { cursor: pointer; }
button.ro:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { button.ro:hover { border-color: var(--ink-3); } }
button.ro:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* The list being shown: filled, so it reads apart from a source filter (outlined). */
button.ro[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); }
/* White on navy whatever the tile's own colour: amber or red on navy does not read. */
.readout button.ro[aria-pressed="true"] .ro-k, .readout button.ro[aria-pressed="true"] .ro-v,
.readout button.ro[aria-pressed="true"] .ro-k .i { color: var(--white); }
@media (hover: hover) and (pointer: fine) { button.ro[aria-pressed="true"]:hover { border-color: var(--navy); } }
@media (max-width: 600px) { .titlebar > .readout { margin-left: 0; width: 100%; } .ro { flex: 1 1 40%; min-width: 0; } }
/* Source pills (as SWCrawler's dashboard): a count over a thin bar of its states. */
.src-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; flex-shrink: 0; }
/* Name and detail on the left, the count big on the right with what it counts
   under it, the bar of states across the foot. */
.src-pill { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "sub value" "bar bar";
  column-gap: 16px; row-gap: 2px; align-items: start; padding: 12px 14px 12px 16px; text-align: left; border: 1px solid var(--line);
  border-radius: var(--r-box); background: var(--surface); font: inherit; color: inherit; min-width: 0;
  transition: border-color .15s ease, transform var(--dur-press) var(--ease-out); }
button.src-pill { cursor: pointer; }
button.src-pill:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { button.src-pill:not(:disabled):hover { border-color: var(--ink-3); } }
button.src-pill:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
button.src-pill[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--navy-50); }
button.src-pill:disabled { cursor: default; opacity: .7; }
.src-label { grid-area: label; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.src-value { grid-area: value; display: grid; justify-items: end; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.src-value small { font-size: 11.5px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--ink-3); margin-top: 3px; white-space: nowrap; }
.src-sub { grid-area: sub; align-self: end; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-bar { grid-area: bar; display: flex; gap: 2px; height: 4px; margin-top: 10px; }
.src-bar .seg { height: 100%; min-width: 3px; border-radius: 2px; }
.seg.none { flex-grow: 1; background: var(--line-soft); }
@media (max-width: 760px) { .src-pills { grid-template-columns: 1fr; } }
.seg.complete { background: var(--ok); } .seg.short { background: var(--amber); }
.seg.missing { background: var(--block); } .seg.waiting { background: var(--line-mid); }
.seg.deleted { background: var(--ink-3); }
.seg.credit { flex-grow: 1; background: var(--navy); opacity: .55; }
.seg.solved { background: var(--ok); opacity: .55; }
.seg.notcreated { background: repeating-linear-gradient(135deg, var(--block) 0 3px, var(--block-bg) 3px 6px); }
.nc-pill { display: inline-flex; border-radius: 999px; cursor: help; }
.nc-pill:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* Solve (Report): the Not Arrived / Deleted pill presses in on each click; five open the dialog. */
.solve-pill, .solved-pill { display: inline-flex; border-radius: 999px; cursor: pointer; user-select: none;
  transition: transform var(--dur-press) var(--ease-out); }
.solved-pill { cursor: default; }
.solve-pill:active { transform: scale(.96); }
.solve-pill:focus-visible, .solved-pill:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.badge.solved { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); opacity: .8; border-style: dashed; }
.solve-note { margin-top: 14px; }
.solve-note textarea { min-height: 88px; font: inherit; font-size: 13px; }
.pw-field { position: relative; margin-top: 14px; }
.pw-field input { padding-right: 40px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); margin: 0; }
.solve-error { min-height: 18px; margin-top: 6px !important; color: var(--block) !important; font-size: 12px !important; }
/* An FBA credit note: nothing for the warehouse, so neither good nor bad. */
.badge.credit { background: var(--navy-50); color: var(--navy); border-color: var(--line-mid); }
.badge.credit .badge-dot { background: var(--navy); }
/* Every column centred but Item: a list of SKUs reads from its start. */
.recon-docs td { text-align: center; }
table.grid.recon-docs .item { text-align: left; }
.recon-docs td.n { white-space: nowrap; }
.recon-docs td.mono { white-space: nowrap; }
.recon-empty { padding: 32px 0; }
/* Filters or the search left no row: the header stays, the message centres in the free height. */
.table-card:has(> .recon-empty:not([hidden])) > .grid-wrap { flex: 0 0 auto; }
/* Fixed layout (widths in each table's <colgroup>): a cell that does not fit
   ends in an ellipsis instead of widening its column. Narrow windows scroll. */
table.grid.fixed { table-layout: fixed; min-width: 960px; }
table.grid.fixed > tbody > tr > td { overflow: hidden; text-overflow: ellipsis; }
table.grid.fixed td.msg { min-width: 0; }
.run-items td { white-space: nowrap; }
.run-items td.msg { white-space: nowrap; text-align: left; }
.run-items .msg-t { display: block; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.more-n { font-family: var(--font); font-size: 11px; color: var(--ink-3); cursor: default; border-radius: var(--r-tag); padding: 0 3px; }
@media (hover: hover) and (pointer: fine) { .more-n:hover { background: var(--surface-3); color: var(--ink); } }
.more-n:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
/* Hover tip of the +N: every tracking of the document, one per line. */
.tip-trk { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-family: var(--mono); font-size: 12px; }

/* Report: what each source pill means, inside the family hover tip. */
.hover-tip .tip-title { display: block; font-size: 12.5px; color: var(--navy); margin-bottom: 4px; }
.hover-tip p { color: var(--ink-2); }
.hover-tip p + p { margin-top: 6px; }
/* Report footer: the calendar and the (i) of the Warehouse states, side by side. */
.tfoot-end { display: flex; align-items: center; gap: 6px; }
.info-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink-3); cursor: help; transition: border-color .15s ease, color .15s ease; }
.info-btn .i { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .info-btn:hover { border-color: var(--ink-3); color: var(--ink); } }
.info-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.tip-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
/* One list per colour: green, amber, red, grey; a hairline between them. */
.tip-legend + .tip-legend { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--surface-3); }
.tip-legend li { display: grid; gap: 3px; justify-items: start; }
.tip-legend span { color: var(--ink-3); font-size: 11.5px; line-height: 1.4; }
.tip-states { list-style: none; margin-top: 8px; display: grid; gap: 6px; }
.tip-states li { display: grid; grid-template-columns: 10px auto 1fr; column-gap: 7px; align-items: baseline; color: var(--ink); }
.tip-states .seg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; min-width: 0; align-self: center; }
.tip-states b { font-variant-numeric: tabular-nums; }
.tip-states span { grid-column: 2 / -1; color: var(--ink-3); font-size: 11.5px; }

/* Report: the table's filter pills, source then state. */
.recon-filters { flex-wrap: wrap; row-gap: 8px; }
.recon-filters .chip { background: var(--surface); font: inherit; font-size: 12.5px; cursor: pointer; }
.recon-filters .chip[hidden] { display: none; }
a.chip { text-decoration: none; }  /* Monitoring's views are links, drawn as Report's pills */
@media (hover: hover) and (pointer: fine) { .recon-filters .chip:not([aria-pressed="true"]):hover { border-color: var(--ink-3); } }
.recon-filters .chip:active { transform: scale(.97); }
.recon-filters .chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.chips-sep { width: 1px; height: 20px; background: var(--line); }

/* A click on the empty space of a control row (pills, chips, tiles) left a
   blinking text caret by the nearest word, as if it could be typed in: no
   text selection there, and no caret anywhere but in a field: on the whole
   page, the header (its title) and the menu too, not only in .content. */
.readout, .src-pills, .recon-filters .chips, .header, .side-menu { -webkit-user-select: none; user-select: none; }
body { caret-color: transparent; }
input, textarea, [contenteditable] { caret-color: auto; }

/* ---------------------------------------------------------------- To Fix
   A table of problems (as the Report's) and one dialog per problem that asks
   one question: pick or type the answer, one button. */
table.grid.fix-table th, .fix-table td { text-align: left; }
table.grid.fix-table th.n, .fix-table td.n { text-align: right; }
.fix-table .fix-status { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fix-val { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fix-val.mono { font-family: var(--mono); }
.titlebar:has(+ * .fix-table), .titlebar:has(~ .table-card .fix-table) { margin-bottom: 16px; }
.fix-table tbody tr { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .fix-table tbody tr:hover td { background: var(--surface-2); } }
.fix-table tbody tr:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.fix-table tbody tr:target td { background: var(--navy-50); }
.fix-late { color: var(--block); font-weight: 700; }
.fix-dlg { position: relative; width: min(620px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 0; }
.fix-dlg[open] { display: flex; flex-direction: column; }
.fix-body { overflow: auto; padding: 22px 24px 20px; display: grid; gap: 12px; }
.fix-body h3 { padding-right: 36px; font-size: 17px; }
.fix-body .fx-sub { margin-top: -6px; }
.fx-product { display: grid; gap: 3px; padding: 11px 14px; border-radius: var(--r-box); background: var(--surface-2); font-size: 13px; }
.fx-product span { font-size: 12px; color: var(--ink-3); }
.fix-body .notice { margin-top: 0; }
.notice.ok .i { color: var(--ok); }
.fix-body .fx-label { font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 0; }
.fx-picks { display: grid; gap: 6px; }
.fx-pick { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 12px; padding: 9px 12px; text-align: left;
  border: 1.5px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); cursor: pointer; font-size: 12.5px;
  transition: border-color .15s ease, background-color .15s ease, transform var(--dur-press) var(--ease-out); }
.fx-pick b { font-family: var(--mono); font-size: 12.5px; color: var(--navy); }
.fx-pick span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .fx-pick:hover { border-color: var(--ink-3); } }
.fx-pick:active { transform: scale(.98); }
.fx-pick[aria-pressed="true"] { border-color: var(--navy); background: var(--navy-50); }
.fx-pick:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.fx-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.fx-form .field { flex: 1; min-width: 200px; }
.fx-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-more { font-size: 12.5px; }
.fx-more summary { width: fit-content; color: var(--ink-3); cursor: pointer; }
.fx-more[open] summary { margin-bottom: 8px; }
.fx-more ul, .fx-list { display: grid; gap: 4px; list-style: none; padding: 0; margin: 0; }
.fx-more li, .fx-list li { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.fx-more .mono, .fx-list .mono { font-family: var(--mono); font-size: 12px; }
.fx-more .muted { margin-top: 6px; font-size: 11.5px; }
.fx-dismiss { border-top: 1px solid var(--line); padding-top: 10px; }
.fix-body .fx-msg { font-size: 12.5px; color: var(--ok); margin: 0; }
.fix-body .fx-msg.error { color: var(--block); }
.fx-msg:empty { display: none; }
.table-card > .fix-none { margin: auto; }
.table-card:has(> .fix-none:not([hidden])) > .grid-wrap { flex: 0 0 auto; }
.tfoot .btn.small { height: 28px; }
/* Our dropdown for a datalist (app.js, mouse only): the input's own width,
   filtered as one types, arrows and Enter to pick, the hint under each code. */
.combo-field { position: relative; }
.combo-list { position: fixed; z-index: var(--z-dialog); max-height: 248px; overflow: auto;
  margin: 0; padding: 4px; list-style: none; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface);
  box-shadow: var(--shadow-dialog); transform-origin: top center; animation: combo-in .14s var(--ease-out); }
.combo-list[hidden] { display: none; }
.combo-list li { display: grid; gap: 1px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.combo-list li b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.combo-list li span { font-size: 11.5px; color: var(--ink-3); }
.combo-list li[aria-selected="true"] { background: var(--navy-50); }
@media (hover: hover) and (pointer: fine) { .combo-list li:not(.combo-none):hover { background: var(--surface-2); } }
.combo-list.up { transform-origin: bottom center; animation-name: combo-up; }
@keyframes combo-up { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.combo-list li[aria-selected="true"] b { color: var(--navy); }
.combo-list .combo-none { cursor: default; font-size: 12px; color: var(--ink-3); }
@keyframes combo-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .combo-list { animation: none; } }

/* Touch: the small icon buttons and the five-click pills get a finger-size target. */
@media (pointer: coarse) {
  .row-open, .raw-icon { width: 40px; height: 40px; }
  .solve-pill, .solved-pill, .nc-pill { padding: 8px 4px; margin: -8px -4px; }
  .combo-list li { padding: 11px 12px; }
}

/* Phone: the cards above take the screen, so the table keeps its own height and the page scrolls
   (else the card shares the fixed height and shrinks to nothing). */
@media (max-width: 760px) { .table-card { flex: none; height: 70vh; min-height: 360px; } }

/* Tucked search at the end of its row: it opens to the left, so the icon is
   its last item and stays under the pointer (first, it slid away and left the
   field, with a text cursor, under it). Field, then the x, then the icon. */
.search.tuck { justify-content: flex-end; }
.search.tuck input { order: 1; }
.search.tuck .search-x { order: 2; margin-right: 0; }
.search.tuck .i { order: 3; }
.search.tuck .search-x .i { order: 0; }