/* Resell Rocket
   Layout is deliberately narrow and touch-friendly: the research and inventory
   views need to work on a phone while standing in a thrift store. */

:root {
  /* Warm linen theme, drawn from the Bolo Hound medallion: linen canvas,
     walnut-tinted text, warm borders. White panels keep data readable. */
  --ink: #2b2115;
  --muted: #6b5a45;
  --line: #ded1bc;
  --bg: #efe7d8;
  --panel: #ffffff;
  --accent: #1f5fbf;
  --accent-strong: #17458c;
  --accent-tint: #eff6ff;
  --flame: #ea580c;
  --flame-strong: #c2410c;
  --flame-deep: #9a3412;
  --flame-tint: #fff7ed;
  --ok: #15803d;
  --bad: #b91c1c;
  --warn-bg: #fff8e1;
  --warn-line: #f0d38a;
  --warn-ink: #7a5b00;
  --prod-bg: #b91c1c;
  --sbx-bg: #374151;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* --- Environment banner --------------------------------------------------
   Full width, high contrast, always first in the document. Mistaking
   production for sandbox is the most expensive error this app can enable. */
.env-banner {
  padding: 8px 16px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-align: center;
  color: #fff;
  background: var(--sbx-bg);
}
.env-banner strong { letter-spacing: 0.08em; }
body.env-production .env-banner { background: var(--prod-bg); }

/* --- Header / nav ------------------------------------------------------- */
.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 10px 20px;
  /* Lighter linen than the page so the header reads as its own plane. */
  background: #f7f1e6;
  border-bottom: 1px solid var(--line);
}
.brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}
.app-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.app-header nav a {
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.94rem;
}
.app-header nav a:hover {
  background: var(--flame-tint);
  color: var(--flame);
}
.nav-active {
  background: var(--flame-tint);
  color: var(--flame);
  border-bottom: 3px solid var(--flame);
}

/* --- Skip link ---------------------------------------------------------
   First focusable element in the document. Off-screen until focused, then
   pinned top-left so a keyboard/screen-reader user can jump past the header
   (and the mobile tab bar) straight to the page content. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  background: var(--panel);
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* --- Mobile bottom tab bar ---------------------------------------------
   The desktop nav wraps its seven links into stacked rows on a phone and
   hides Search/Home behind the brand. Below 560px the desktop nav is hidden
   and this fixed bottom bar carries Search plus the four highest-frequency
   daily destinations - the store-floor pattern this app is built around.
   Hidden entirely on wider screens where the top nav is comfortable. */
.nav-mobile { display: none; }

@media (max-width: 560px) {
  .nav-desktop { display: none; }

  .nav-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    justify-content: space-around;
    gap: 2px;
    padding: 6px 4px;
    /* Clears the iOS home indicator so the last row of tabs is tappable. */
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: #f7f1e6;
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 8px rgba(72, 33, 2, 0.08);
  }
  .nav-mobile a {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 44px;
    min-height: 48px;
    padding: 4px 2px;
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
  }
  .nav-mobile a svg { display: block; }
  .nav-mobile-active {
    color: var(--flame);
    background: var(--flame-tint);
  }
  .nav-mobile a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -2px;
  }
  /* The fixed bar would otherwise cover the footer and the last of the page. */
  body { padding-bottom: 68px; }
}

/* --- Content ----------------------------------------------------------- */
main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 20px 56px;
}

h1 {
  margin: 0 0 10px;
  font-size: 1.5rem;
}

.lede {
  margin: 0 0 20px;
  color: var(--muted);
  max-width: 62ch;
}

.pending {
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.9rem;
}

.notice {
  max-width: 1400px;
  margin: 16px auto 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
}
.notice-warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
}
/* A notice rendered inside page content rather than in the app-level banner
   slot, which is what .notice's auto margins assume. */
.notice-inline {
  margin: 0 0 20px;
  max-width: none;
}
.notice-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 4px;
  vertical-align: middle;
}

/* --- Key/value table --------------------------------------------------- */
table.kv {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}
table.kv th,
table.kv td {
  min-width: 0;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
table.kv td code {
  white-space: normal;
  overflow-wrap: anywhere;
}
table.kv tr:last-child th,
table.kv tr:last-child td { border-bottom: 0; }
table.kv th {
  width: 34%;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.9rem;
}

code {
  font: 0.88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg);
}

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.pill-prod { background: var(--prod-bg); }
.pill-sbx { background: var(--sbx-bg); }

.ok { color: var(--ok); font-weight: 600; }
.bad { color: var(--bad); font-weight: 600; }
.muted { color: var(--muted); font-size: 0.9rem; }

.app-footer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 32px;
  color: var(--muted);
  font-size: 0.82rem;
}

/* --- Phone ------------------------------------------------------------- */
@media (max-width: 560px) {
  .app-header { padding: 12px 14px; }
  .app-header nav a { padding: 9px 10px; }
  main { padding: 20px 14px 44px; }
  table.kv th { width: 42%; }
}

/* --- Flash messages ---------------------------------------------------- */
.notice-ok {
  background: #ecfdf3;
  border: 1px solid #a7e0bd;
  color: #14532d;
}
.notice-err {
  background: #fef2f2;
  border: 1px solid #f0b4b4;
  color: #7f1d1d;
}

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 7px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--flame-strong); color: #fff; }
.btn-primary:hover { background: var(--flame-deep); }
.btn-secondary {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--bg); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: #911616; }

/* Large buttons for primary CTAs */
.btn-lg {
  padding: 14px 28px;
  font-size: 1.05rem;
  border-radius: 9px;
}

/* Outline danger for destructive actions like Disconnect */
.btn-outline-danger {
  background: transparent;
  color: var(--bad);
  border: 2px solid var(--bad);
}
.btn-outline-danger:hover {
  background: var(--bad);
  color: #fff;
}

/* eBay connection panel */
.connect-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  background: var(--panel);
  margin-bottom: 20px;
}
.connect-box h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.connect-box .muted {
  margin-bottom: 16px;
}
.connect-box.connected {
  border-color: var(--ok);
  background: #f0fdf4;
}

/* Ask The Hound: the mascot rides the button. */
.btn-hound {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-hound img {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Keyboard focus visibility */
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.btn-primary:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 3px var(--accent);
}

/* --- Marketplace "List" menu -------------------------------------------- */
.marketplace-menu {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.marketplace-menu summary {
  list-style: none;
  font-weight: 600;
}
.marketplace-menu summary::-webkit-details-marker { display: none; }
.marketplace-menu[open] summary { background: var(--bg); }
.marketplace-menu-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 230px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.marketplace-menu-list .btn { width: 100%; text-align: left; }
.marketplace-disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 560px) {
  .marketplace-menu-list { position: static; box-shadow: none; margin-top: 8px; }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.button-row form { margin: 0; }

/* --- Forms ------------------------------------------------------------- */
h2 {
  margin: 28px 0 8px;
  font-size: 1.12rem;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}
.stack label { font-weight: 600; font-size: 0.92rem; }
.stack textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: 0.88rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}

details {
  margin: 12px 0 20px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
details summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.scope-list {
  margin: 10px 0;
  padding-left: 20px;
  font-size: 0.9rem;
}
.scope-list li { margin-bottom: 3px; }

/* --- Business policies -------------------------------------------------- */
.policy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.policy-actions form { margin: 0; }
.policy-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 12px 0 18px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}
.policy-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.policy-card h3 {
  margin: 0 0 8px;
  font-size: 0.98rem;
}
.policy-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.policy-card li {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.policy-card li:first-child { border-top: 0; }
.policy-card li code { width: 100%; }
.pill-default {
  align-self: center;
  background: var(--ok);
  font-size: 0.65rem;
}
.policy-setup { margin-top: 20px; }
.default-policy-names {
  margin: 10px 0 18px;
  padding-left: 22px;
  font-size: 0.9rem;
}
.policy-form fieldset {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.policy-form legend {
  padding: 0 6px;
  font-weight: 700;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.form-grid input,
.form-grid select {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.92rem;
}
.check-row input { margin-top: 5px; }
.field-help {
  margin: 5px 0 0 24px;
  color: var(--muted);
  font-size: 0.85rem;
}
.confirm-row {
  margin: 4px 0 14px;
  font-weight: 600;
}
.policy-production-note { margin: 20px 0 0; }

@media (max-width: 700px) {
  .policy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .policy-actions .btn { width: 100%; }
  .policy-actions form { width: 100%; }
}

/* --- Inventory --------------------------------------------------------- */
.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.page-heading .lede { margin-bottom: 0; }
.page-heading > div { min-width: 0; }
.page-heading h1,
.page-heading .lede,
.page-heading code { overflow-wrap: anywhere; }
.page-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inventory-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) auto auto;
  align-items: end;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.inventory-filters label,
.inventory-form label,
.full-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.inventory-filters input,
.inventory-filters select,
.inventory-form input,
.inventory-form select,
.inventory-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.inventory-form textarea {
  min-height: 96px;
  resize: vertical;
}
.inventory-filters input:focus,
.inventory-filters select:focus,
.inventory-form input:focus,
.inventory-form select:focus,
.inventory-form textarea:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(31, 95, 191, 0.16);
}
.filter-clear {
  align-self: center;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
}

.inventory-table-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.inventory-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
/* Eight columns: Photo, SKU, Item, Status, Listing, Cost, Qty, Activity.
   Item gets the width; its title truncates like the orders table. */
.inventory-table th:nth-child(1) { width: 8%; }
.inventory-table th:nth-child(2) { width: 11%; }
.inventory-table th:nth-child(3) { width: 29%; }
.inventory-table th:nth-child(4) { width: 10%; }
.inventory-table th:nth-child(5) { width: 14%; }
.inventory-table th:nth-child(6) { width: 8%; }
.inventory-table th:nth-child(7) { width: 6%; }
.inventory-table th:nth-child(8) { width: 14%; }
.inventory-list-title {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-table th,
.inventory-table td {
  min-width: 0;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.inventory-table td code {
  white-space: normal;
  overflow-wrap: anywhere;
}
.inventory-table th {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.inventory-table tbody tr:last-child td { border-bottom: 0; }
.inventory-table a { color: var(--accent); }
.inventory-item-summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.inventory-item-copy { min-width: 0; }
.inventory-photo-thumb {
  display: block;
  width: 64px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef1f5;
  text-decoration: none;
}
.inventory-photo-thumb:focus-visible {
  outline: 3px solid rgba(31, 95, 191, 0.22);
  outline-offset: 2px;
}
.inventory-photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.inventory-photo-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  color: var(--muted) !important;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.item-title {
  display: block;
  color: var(--ink) !important;
  font-weight: 650;
  text-decoration: none;
}
.item-title:hover { text-decoration: underline; }
.inventory-photo-count {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.status-badge {
  display: inline-block;
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.status-listed,
.status-active,
.status-sold { background: #ecfdf3; color: #166534; }
.status-drafted,
.status-paused { background: #fefce8; color: #854d0e; }
.status-returned,
.status-scrapped { background: #fef2f2; color: #991b1b; }
.status-retired { background: #f1f5f9; color: #475569; }
/* Sold somewhere, still live elsewhere. Deliberately the loudest badge on the
   page: it is the only one that costs money to ignore. */
.status-delist {
  background: var(--bad);
  color: #fff;
}

.empty-state {
  padding: 34px 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: var(--panel);
  text-align: center;
}
.empty-state h2 { margin-top: 0; }
.empty-state p {
  max-width: 55ch;
  margin: 0 auto 18px;
  color: var(--muted);
}

.inventory-form fieldset {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.inventory-form legend {
  padding: 0 6px;
  font-weight: 700;
}
.inventory-form .span-2 { grid-column: 1 / -1; }
.form-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-help-inline {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
}
.field-error {
  color: var(--bad);
  font-size: 0.82rem;
  font-weight: 600;
}
.inventory-form [aria-invalid="true"] {
  border-color: var(--bad);
  background: #fffafa;
}
.form-error-summary {
  margin: 0 0 18px;
}
.form-error-summary ul { margin: 6px 0 0; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.detail-card,
.prose-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.detail-card h2,
.prose-card h2 { margin-top: 0; }
.detail-card dl { margin: 0; }
.detail-card dl div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.detail-card dl div:first-child { border-top: 0; }
.detail-card dt { color: var(--muted); font-size: 0.88rem; }
.detail-card dd { margin: 0; overflow-wrap: anywhere; }
.prose-card { margin-top: 14px; }
.prose-card p {
  margin-bottom: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .inventory-filters { grid-template-columns: 1fr 1fr; }
  .inventory-filters .btn { width: 100%; }
  .form-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .page-heading { flex-direction: column; }
  .page-heading > .btn,
  .page-actions,
  .page-actions .btn { width: 100%; }
  .page-actions .btn { text-align: center; }
  .inventory-filters { grid-template-columns: 1fr; }
  .inventory-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .inventory-table,
  .inventory-table tbody,
  .inventory-table tr,
  .inventory-table td { display: block; width: 100%; }
  .inventory-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .inventory-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    overflow: hidden;
  }
  .inventory-table td {
    display: grid;
    grid-template-columns: minmax(84px, 0.38fr) minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
  }
  .inventory-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .inventory-table tbody tr:last-child td:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }
  .inventory-table td:last-child { border-bottom: 0; }
  .inventory-list-title { white-space: normal; }
  .form-grid-four { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .form-actions,
  .form-actions .btn { width: 100%; }
  .form-actions .btn { text-align: center; }
}

/* --- Local inventory photos -------------------------------------------- */
.photo-manager {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.photo-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.photo-section-heading h2 { margin: 0 0 3px; }
.photo-section-heading p { margin: 0; }
.photo-count {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.photo-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 12px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px dashed #b7c2d1;
  border-radius: 8px;
  background: var(--bg);
}
.photo-upload label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.photo-upload input[type="file"] {
  width: 100%;
  min-height: 42px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.photo-upload input[type="file"]:focus,
.photo-order-row input:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(31, 95, 191, 0.16);
}
.span-full { grid-column: 1 / -1; }
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.photo-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}
.photo-card-primary { border-color: var(--accent); }
.photo-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef1f5;
}
.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.primary-marker {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.photo-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 11px 0;
  overflow-wrap: anywhere;
}
.photo-meta span { color: var(--muted); font-size: 0.78rem; }
.photo-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 11px 12px;
}
.photo-card-actions form { margin: 0; }
.btn-small { padding: 7px 10px; font-size: 0.82rem; }
.photo-remove {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.photo-remove summary {
  display: inline-block;
  color: var(--bad);
  font-size: 0.82rem;
}
.photo-remove form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 7px;
  background: #fef2f2;
}
.photo-confirm {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #7f1d1d;
  font-size: 0.82rem;
  font-weight: 600;
}
.photo-confirm input { margin-top: 4px; }
.photo-reorder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.photo-reorder h3 { margin: 0 0 2px; font-size: 0.98rem; }
.photo-reorder p { margin: 0; }
.photo-order-list {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.photo-order-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  font-size: 0.85rem;
}
.photo-order-row > span { overflow-wrap: anywhere; }
.photo-order-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.photo-order-row input[type="number"] {
  width: 64px;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.photo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 26px 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}
.photo-empty strong { color: var(--ink); }

@media (max-width: 760px) {
  .photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-order-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .photo-manager { padding: 14px; }
  .photo-upload,
  .photo-reorder { grid-template-columns: 1fr; }
  .photo-upload .btn,
  .photo-reorder .btn { width: 100%; }
  .photo-gallery { grid-template-columns: 1fr; }
  .photo-section-heading { align-items: center; }
  .photo-order-row { align-items: flex-end; }
}

/* --- Local listing drafts ---------------------------------------------- */
.listing-table th:nth-child(1) { width: 16%; }
.listing-table th:nth-child(2) { width: 27%; }
.listing-table th:nth-child(3) { width: 13%; }
.listing-table th:nth-child(4) { width: 12%; }
.listing-table th:nth-child(5) { width: 17%; }
.listing-table th:nth-child(6) { width: 15%; }
.listing-table .muted { display: block; margin-top: 2px; }

.readiness-badge,
.local-only-badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.readiness-incomplete {
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.readiness-complete {
  background: #ecfdf3;
  color: #166534;
}
.local-only-badge {
  background: #eef2f7;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.draft-source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.draft-source-card h2 { margin: 2px 0; }
.draft-source-card p { margin: 0; color: var(--muted); }
.draft-source-card a { flex: 0 0 auto; color: var(--accent); font-weight: 600; }

.local-save-note {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid #b9c7d8;
  border-radius: 8px;
  background: #f2f6fb;
  color: #29435f;
  font-size: 0.9rem;
}
.listing-form .local-save-note { margin-top: 0; }

.readiness-panel {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  background: #fffcf2;
}
.readiness-panel-complete {
  border-color: #a7e0bd;
  background: #f3fcf6;
}
.readiness-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.readiness-summary h2 { margin: 0 0 3px; }
.readiness-summary p { margin: 0; color: var(--muted); }
.readiness-score {
  flex: 0 0 auto;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 2px solid var(--warn-line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--warn-ink);
  font-size: 1.05rem;
  font-weight: 800;
}
.readiness-panel-complete .readiness-score {
  border-color: #70bd8d;
  color: #166534;
}
.readiness-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.readiness-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}
.readiness-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
}
.readiness-check-passed .readiness-icon { background: #dcfce7; color: #166534; }
.readiness-check-missing .readiness-icon { background: #fef3c7; color: #92400e; }
.readiness-list strong,
.readiness-list small { display: block; }
.readiness-list strong { font-size: 0.86rem; }
.readiness-list small { margin-top: 2px; color: var(--muted); font-size: 0.75rem; }

.listing-preview {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.listing-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.listing-preview-heading h2 { margin: 0; }
.listing-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 22px;
}
.preview-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.preview-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef1f5;
}
.preview-photo-primary { grid-column: 1 / -1; border-color: var(--accent); }
.preview-photo img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
}
.preview-photo-primary img { height: 360px; }
.preview-photo figcaption {
  padding: 6px 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}
.preview-no-photo {
  display: grid;
  min-height: 220px;
  place-items: center;
  margin-bottom: 8px;
  border: 1px dashed #b7c2d1;
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font-weight: 600;
}
.listing-preview-photos > .muted { margin-bottom: 0; }
.listing-preview-copy h3 {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
  font-size: 1.25rem;
}
.preview-price { margin: 0 0 14px; font-size: 1.45rem; font-weight: 750; }
.preview-facts { margin: 0; }
.preview-facts div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.preview-facts dt { color: var(--muted); font-size: 0.84rem; }
.preview-facts dd { margin: 0; overflow-wrap: anywhere; }
.preview-description { margin-top: 16px; }
.preview-description h4 { margin: 0 0 5px; }
.preview-description p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .draft-source-card { align-items: flex-start; flex-direction: column; }
  .readiness-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-preview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .readiness-summary { align-items: flex-start; }
  .readiness-score { width: 54px; height: 54px; }
  .readiness-list { grid-template-columns: 1fr; }
  .preview-photo-grid { grid-template-columns: 1fr; }
  .preview-photo-primary { grid-column: auto; }
  .preview-photo img,
  .preview-photo-primary img { height: 260px; }
}

/* --- Live eBay listings: glass cards ------------------------------------
   These mirror what a buyer actually sees, so the visual language is
   deliberately different from the local-data tables elsewhere: a soft,
   translucent "glass" card with a real product photo, rather than a plain
   key/value row. */
.listing-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.listing-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.listing-card:hover,
.listing-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.listing-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.listing-card-drift { border-color: rgba(217, 119, 6, 0.55); }
.listing-card-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(238, 241, 245, 0.6);
}
.listing-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.listing-card-photo-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.listing-card-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.listing-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px 14px;
}
.listing-card-title {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.listing-card-price {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}
.listing-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
  color: var(--muted);
  font-size: 0.76rem;
}
.listing-card-sku {
  margin-top: 2px;
}

@media (max-width: 560px) {
  .listing-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* --- Live listing detail page: styled to echo the real eBay item page -- */
.live-listing {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 26px;
  align-items: start;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.42));
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 32px rgba(16, 24, 40, 0.1);
}
.live-listing-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-listing-main-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(238, 241, 245, 0.7);
  border: 1px solid var(--line);
}
.live-listing-main-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.live-listing-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
}
.live-listing-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(238, 241, 245, 0.7);
}
.live-listing-info h1 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  line-height: 1.3;
}
.live-listing-price {
  margin: 0 0 10px;
  font-size: 1.9rem;
  font-weight: 800;
}
.live-listing-facts {
  margin: 14px 0;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
}
.live-listing-facts dl { margin: 0; }
.live-listing-facts div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.live-listing-facts div:first-child { border-top: 0; }
.live-listing-facts dt { color: var(--muted); font-size: 0.84rem; }
.live-listing-facts dd { margin: 0; overflow-wrap: anywhere; }
.live-listing-cta {
  display: block;
  margin-top: 4px;
}
.live-listing-description {
  margin-top: 22px;
  padding: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.live-listing-description h2 { margin-top: 0; }
.live-listing-ended {
  display: inline-block;
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  .live-listing { grid-template-columns: 1fr; padding: 16px; }
}


/* --- Research: pick an existing item via dropdown ----------------------- */
.research-select-card {
  margin: 4px 0 26px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.research-select-card h2 { margin: 0 0 12px; font-size: 1.05rem; }
.research-select-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 12px;
}
.research-select-form label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.research-select-form select {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.research-select-form select:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(31, 95, 191, 0.16);
}

@media (max-width: 560px) {
  .research-select-form { grid-template-columns: 1fr; }
  .research-select-form .btn { width: 100%; }
}

/* --- Inventory: glass cards ---------------------------------------------
   Same visual language as the eBay listing cards, so the two catalogs of
   "things you have" and "things eBay shows" read as one family. */
.inventory-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.inventory-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.inventory-card:hover,
.inventory-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.inventory-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.inventory-card-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(238, 241, 245, 0.6);
}
.inventory-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.inventory-card-photo-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.inventory-card-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.inventory-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px 14px;
}
.inventory-card-title {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.inventory-card-cost {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}
.inventory-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
  color: var(--muted);
  font-size: 0.76rem;
}
.inventory-card-sku {
  margin-top: 2px;
}

@media (max-width: 560px) {
  .inventory-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Clickable dashboard charts: the whole chart opens its data breakdown. */
.chart-link {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.chart-link:hover, .chart-link:focus-visible { background: var(--accent-tint); outline: 2px solid var(--accent); }

/* Listing draft creation: manual vs AI paths side by side. */
.draft-start { margin-bottom: 28px; }
.draft-start-grid { margin-top: 12px; }
.draft-start-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.draft-start-form select { width: 100%; padding: 8px; }
.draft-start-form .btn { align-self: flex-start; }

/* Orders: clickable rows and the financial breakdown dialog. */
.order-row { cursor: pointer; }
.order-row:hover, .order-row:focus-visible { background: var(--accent-tint); }
.order-item-title {
  display: block;
  font-weight: 600;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-item-sku { display: block; margin-top: 2px; }

.order-dialog {
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  padding: 24px;
  width: min(720px, 92vw);
  max-height: 88vh;
}
.order-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.order-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.order-dialog-head h2 { margin: 4px 0 0 0; font-size: 1.2rem; }
.order-dialog-profit {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  margin: 16px 0;
  font-size: 1.05rem;
}
.order-dialog-profit strong { font-size: 1.3rem; }
.order-profit-positive { background: #ecfdf3; color: #166534; }
.order-profit-negative { background: #fef2f2; color: #991b1b; }

/* Portrait phones: the 8-column orders table becomes stacked cards, same
   pattern as the inventory table. The data-label attributes are already in
   the markup; this is what reads them. */
@media (max-width: 700px) {
  .order-table,
  .order-table tbody,
  .order-table tr,
  .order-table td { display: block; width: 100%; }
  .order-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .order-table tr.order-row {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    overflow: hidden;
  }
  .order-table td {
    display: grid;
    grid-template-columns: minmax(84px, 0.38fr) minmax(0, 1fr);
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
  }
  .order-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .order-table td:last-child { border-bottom: 0; }
  .order-item-title { white-space: normal; max-width: none; }
}

/* Settings: AI instructions editor and section spacing. */
.settings-section { margin-bottom: 32px; }
.policy-form textarea {
  width: 100%;
  font: inherit;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  resize: vertical;
}

/* eBay activity line on inventory cards. */
.inventory-card-activity { color: var(--accent); font-weight: 600; }

/* Archive/delete lifecycle section. */
.lifecycle-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.lifecycle-form select { padding: 6px; }
.lifecycle-form .btn { align-self: flex-start; }
.lifecycle-danger { border: 1px solid #fecaca; }
.filter-archived-toggle { margin-left: auto; align-self: center; }

/* Home-search research: live progress and results. */
.research-progress { text-align: center; padding: 40px 24px; }
.progress-track {
  height: 14px;
  background: var(--line);
  border-radius: 7px;
  overflow: hidden;
  margin: 20px auto;
  max-width: 480px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--flame));
  border-radius: 7px;
  transition: width 0.6s ease;
}
.progress-note { font-size: 1.05rem; color: #334155; }
.search-photo-row { display: flex; gap: 10px; flex-wrap: wrap; }
.search-photo-thumb img {
  width: 110px; height: 110px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line);
}
.research-result { margin-top: 20px; }
.research-price-headline strong { font-size: 1.8rem; color: #166534; }
.research-price-reasoning {
  margin: 4px 0 16px;
  padding: 12px 14px;
  background: var(--flame-tint);
  border-left: 3px solid var(--flame);
  border-radius: 0 8px 8px 0;
  line-height: 1.55;
}
.research-sample-titles { margin-top: 10px; }
.research-sample-titles summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}
/* Craigslist copy-ready rows: value beside a copy button. */
.copy-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.copy-row:last-of-type { border-bottom: 0; }
.copy-row > div { min-width: 0; flex: 1; }
.copy-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 4px;
}
.copy-value {
  margin: 0;
  overflow-wrap: anywhere;
}
.copy-body {
  white-space: pre-wrap;
  font: inherit;
  max-height: 18em;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.photo-import-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.ref-image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.ref-image {
  display: block;
  width: 110px;
  height: 110px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.ref-image img { width: 100%; height: 100%; object-fit: contain; }

.comp-list { margin: 8px 0 0; padding-left: 18px; }
.comp-list li { margin-bottom: 6px; line-height: 1.45; }
.comp-price {
  display: inline-block;
  min-width: 4.5em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #166534;
}

.research-variations { margin: 6px 0 0; padding-left: 20px; }
.research-variations li { margin-bottom: 4px; }
.research-history {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.research-history p { line-height: 1.6; white-space: pre-line; }

/* Buy-or-skip decision: the two actions side by side, thumb-reachable. */
.research-decision {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.research-add-form { display: contents; }
@media (max-width: 560px) {
  .research-decision { flex-direction: column; }
  .research-decision .btn { width: 100%; text-align: center; }
  .research-add-form { display: block; width: 100%; }
  .research-add-form .btn { width: 100%; }
}

/* Saved searches: researched, undecided, one tap to resume. */
.saved-search-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.saved-search-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.saved-search-card:hover {
  border-color: var(--flame);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.12);
}
.saved-search-card > span:first-of-type {
  color: #166534;
  font-weight: 600;
}

/* Inventory list view and display toggle. */
.display-toggle { display: inline-flex; gap: 4px; align-self: center; }
.inventory-list-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px;
}
.order-link-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.order-link-form select { padding: 6px; max-width: 100%; }
.order-link-form .btn { align-self: flex-start; }

/* Facebook Marketplace draft pages. */
.fbm-form { max-width: 720px; }
.fbm-description { white-space: pre-wrap; }
.field-error { color: #991b1b; font-size: 0.9rem; display: block; margin-top: 4px; }
.copy-btn { margin-left: 8px; }

/* Cross-platform reconcile actions. */
.reconcile-actions { display: flex; gap: 8px; align-items: center; }
.reconcile-actions form { display: inline; }

/* Ask-AI insight blocks. */
.ai-insight-card { margin: 18px 0; border-left: 4px solid var(--flame); }
.ai-insight-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.ai-insight-actions {
  display: flex;
  gap: 8px;
}
.ai-insight-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.ai-insight-content {
  white-space: pre-wrap;
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  margin-top: 10px;
  line-height: 1.5;
}

/* Login pages and the nav account block. */
.login-wrap { display: flex; justify-content: center; padding: 48px 16px; }
.login-card { max-width: 420px; width: 100%; }

/* Sign-in splash: card on the left, product pitch on the right. */
.login-splash {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 16px 56px;
}
.login-medallion {
  display: block;
  margin: 0 auto 12px;
  filter: drop-shadow(0 4px 10px rgba(72, 33, 2, 0.3));
}

/* Stacked login fields: label above its own input, full-width controls.
   Shared with the reset/change password cards. */
.login-form label,
.login-card .policy-form label {
  display: block;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 0.92rem;
}
.login-form input[type="text"],
.login-form input[type="password"],
.login-card .policy-form input[type="text"],
.login-card .policy-form input[type="password"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.login-form input:focus-visible,
.login-card .policy-form input:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 1px;
  border-color: var(--flame);
}
.login-form .btn { width: 100%; margin-top: 6px; }
.login-help { margin-top: 16px; font-size: 0.85rem; }

.login-pitch { padding-top: 10px; }
.pitch-brand {
  font-size: 2.1rem;
  margin: 0 0 2px;
  letter-spacing: 0.02em;
}
.pitch-tagline {
  color: var(--flame-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.95rem;
  margin: 0 0 18px;
}
.pitch-lede {
  font-size: 1.06rem;
  line-height: 1.6;
  margin: 0 0 26px;
}
.pitch-features {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}
.pitch-features dt {
  font-weight: 700;
  margin-bottom: 4px;
}
.pitch-features dd {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .login-splash { grid-template-columns: 1fr; gap: 36px; padding-top: 24px; }
  .pitch-features { grid-template-columns: 1fr; }
}
.nav-account { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-account form { margin: 0; }

/* Admin user management action buttons. */
.user-admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.user-admin-actions form { margin: 0; }

/* Settings: left-nav sectioned layout. */
.settings-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.settings-nav {
  position: sticky;
  top: 16px;
  border-right: 1px solid var(--line);
  padding-right: 16px;
}
.settings-nav h1 { font-size: 1.4rem; margin: 0 0 14px 0; }
.settings-nav nav { display: flex; flex-direction: column; gap: 2px; }
.settings-nav-link {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: #334155;
  text-decoration: none;
  font-weight: 500;
}
.settings-nav-link:hover { background: #f1f5f9; }
.settings-nav-active {
  background: #e8eef7;
  color: #1d4ed8;
  font-weight: 600;
}
.settings-content { min-width: 0; }
@media (max-width: 820px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 12px 0;
  }
  .settings-nav nav { flex-direction: row; flex-wrap: wrap; }
}

/* Brand mark and the compact environment pill that replaced the banner. */
.brand { display: inline-flex; align-items: center; gap: 10px; }
/* The medallion is a transparent-background circle; no radius or crop needed. */
.brand-mark { display: block; filter: drop-shadow(0 1px 3px rgba(72, 33, 2, 0.3)); }
.env-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
}
.env-pill-prod { background: #b91c1c; color: #fff; }
.env-pill-sbx { background: #e2e8f0; color: #334155; }


/* Home page: search-first entry point.
   The linen bleeds edge to edge - no boxes inside boxes. The medallion,
   tagline, and a single floating search pill sit directly on the canvas. */
main.home-main {
  max-width: none;
  padding: 0;
}

.home-container {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  /* Matches the linen canvas of the Bolo Hound medallion so the artwork
     melts into the page. */
  background: linear-gradient(160deg, #ece3d4 0%, #dccab6 100%);
}

.search-content {
  text-align: center;
  max-width: 640px;
  width: 100%;
}

.search-logo {
  margin-bottom: 8px;
}

.search-banner {
  width: 100%;
  max-width: 400px;
  height: auto;
  /* Transparent PNG: drop-shadow follows the medallion's outline instead
     of drawing a square box around it. */
  filter: drop-shadow(0 10px 24px rgba(72, 33, 2, 0.35));
}

/* Keeps the page heading for screen readers while the banner carries it visually. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.search-subtitle {
  font-size: 1.05rem;
  /* Walnut brown from the medallion carving; reads richly on the linen. */
  color: #5b3212;
  margin: 18px 0 28px 0;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* One white pill floating on the linen - the only "box" on the page. */
.search-input-wrapper {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 12px 12px 12px 24px;
  margin-bottom: 22px;
  border: 1px solid rgba(91, 50, 18, 0.12);
  box-shadow: 0 6px 24px rgba(72, 33, 2, 0.16);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.search-input-wrapper:hover,
.search-input-wrapper:focus-within {
  border-color: var(--flame);
  box-shadow: 0 8px 30px rgba(72, 33, 2, 0.24);
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  padding: 10px 12px;
  color: var(--ink);
  outline: none;
}

.search-input::placeholder {
  color: var(--muted);
}

.search-icon {
  margin-right: 8px;
  color: var(--muted);
}

.photo-upload-label {
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  position: relative;
  color: var(--muted);
}

.photo-upload-label:hover {
  background: var(--flame);
  color: #fff;
}

.photo-upload-input {
  display: none;
}

.photo-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--bad);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
}

.search-photo-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--bad);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
}
/* Shown once photos are selected; [hidden] wins until the count updater
   reveals it, so the badge cannot flash on load. */
.search-photo-count.is-visible { display: flex; }

.search-actions {
  text-align: center;
}
  text-align: center;
}

.recent-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.action-link {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Walnut, matching the medallion carving; these sit on the linen. */
  color: #5b3212;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.2s;
}

.action-link:hover {
  background: rgba(91, 50, 18, 0.1);
}

@media (max-width: 768px) {
  .search-banner { max-width: 300px; }
  .search-input-wrapper { padding-left: 18px; }
  .recent-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
}


/* Money period picker */
.period-picker {
  display: flex;
  align-items: end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.period-picker label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.period-picker select,
.period-picker input[type="month"] {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
}

/* Dashboard KPI hero cards */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kpi-row { grid-template-columns: 1fr; }
}

.kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.kpi-card:hover {
  border-color: var(--flame);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.12);
}
.kpi-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--flame);
  line-height: 1.1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi-sub {
  font-size: 0.78rem;
  color: var(--muted);
}
.kpi-alert {
  border-color: var(--bad);
  background: #fff5f5;
}
.kpi-alert .kpi-value { color: var(--bad); }

/* --- Sourcing: areas and the BOLO watch list ---------------------------- */
/* Phone-first on purpose. The watch list is read one-handed in a store
   aisle, so the max buy price is the largest thing on each card and the
   filter row scrolls rather than wrapping into a tall block. */
.bolo-filters {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bolo-filter {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.bolo-filter:hover {
  border-color: var(--flame);
  color: var(--flame);
}
.bolo-filter-active {
  background: var(--flame-tint);
  border-color: var(--flame);
  color: var(--flame-deep);
}

.bolo-card .page-actions { margin-top: 14px; }
.bolo-buy {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: var(--muted);
}
.bolo-buy strong {
  display: inline-block;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--flame-strong);
}
.bolo-rationale {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--flame-tint);
  border-left: 3px solid var(--flame);
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 560px) {
  /* One card per row: two columns of a BOLO card would truncate the buy
     price, which is the only number that has to stay readable. */
  .bolo-card .page-actions .btn { width: auto; }
}

/* Browser-side photo downscaling feedback. Resizing two 20 MP photos takes a
   visible moment on a phone, so the wait has to be accounted for rather than
   looking like a frozen form. */
.photo-resize-status {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* --- Set / lot pricing breakdown --------------------------------------- */
/* A lot priced piece by piece. The per-piece numbers are the trustworthy
   ones, so they get a bordered block of their own rather than sitting in the
   same visual weight as the blended whole-lot median. */
.set-breakdown {
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--flame);
  border-radius: 0 10px 10px 0;
  background: var(--flame-tint);
}
.set-breakdown h3 { margin-top: 0; }
.set-breakdown-table { margin-bottom: 12px; background: var(--panel); }
.set-subtotal {
  margin: 0 0 6px;
  font-size: 1.02rem;
}
.set-subtotal strong { color: var(--flame-deep); }

/* --- Marketplace coverage on the item page ----------------------------- */
/* One row per marketplace, whether or not the item is on it. An absent
   marketplace is the actionable case, so it gets the primary button and a
   left edge that reads as "missing" rather than as an error. */
.marketplace-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.marketplace-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 0 12px 12px;
  border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
}
.marketplace-row:first-child { border-top: 0; }
.marketplace-row.marketplace-absent {
  border-left-color: var(--flame);
  background: var(--flame-tint);
}
.marketplace-row.marketplace-live { border-left-color: var(--ok); }
.marketplace-row.marketplace-expired { border-left-color: var(--bad); }

.marketplace-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 260px;
}
.marketplace-name { font-weight: 700; }
.marketplace-price { color: var(--muted); }
.marketplace-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.84rem;
}
.marketplace-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 560px) {
  /* Full-width buttons: this is the one control on the row worth tapping. */
  .marketplace-row-actions { margin-left: 0; width: 100%; }
  .marketplace-row-actions .btn { flex: 1 1 auto; }
}

/* --- AI draft offer on the listing form -------------------------------- */
/* Sits above a blank form, because arriving at an empty listing form and not
   knowing the AI could fill it is the whole problem this solves. */
.ai-draft-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--flame);
  border-radius: 0 10px 10px 0;
  background: var(--flame-tint);
}
.ai-draft-start > div { flex: 1 1 340px; min-width: 0; }
.ai-draft-start h2 { margin: 0 0 6px; }
.ai-draft-start p { margin: 0 0 6px; }
.ai-draft-start form { flex: 0 0 auto; }

@media (max-width: 560px) {
  .ai-draft-start form,
  .ai-draft-start .btn { width: 100%; justify-content: center; }
}

/* --- Sold price on inventory rows and cards ---------------------------- */
/* Green and bold because on a sold item this is the only money figure worth
   reading, and it has to be distinguishable at a glance from the cost basis
   shown in the same slot on everything else. */
.sold-price {
  font-weight: 700;
  color: var(--ok);
}
.inventory-card-sold { display: flex; align-items: baseline; gap: 8px; }
.sold-price-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Parcel estimate --------------------------------------------------- */
/* Carriers bill the greater of actual and dimensional weight, so a light
   bulky speaker cabinet costs like a heavy one. The billable figure gets the
   largest type on the block because it is the one a rate table is looked up
   on; everything else is supporting detail. */
.parcel-estimate {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 0 8px 8px 0;
  background: var(--bg);
}
.parcel-estimate.parcel-standard { border-left-color: var(--ok); }
.parcel-estimate.parcel-oversized { border-left-color: #854d0e; }
.parcel-estimate.parcel-unshippable { border-left-color: var(--bad); }

.parcel-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.parcel-weight {
  font-size: 1.35rem;
  font-weight: 700;
}
.parcel-weight-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.parcel-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 16px;
  margin: 0;
}
/* Two classes deep so it beats `.detail-card dl div`, which lays each row out
   as its own label/value grid. Nested inside these narrow columns that rule
   leaves no room for the value and wraps it one character per line. */
.parcel-estimate .parcel-facts > div {
  display: block;
  min-width: 0;
  padding: 0;
  border-top: 0;
  grid-template-columns: none;
}
.parcel-estimate .parcel-facts dt {
  color: var(--muted);
  font-size: 0.76rem;
}
.parcel-estimate .parcel-facts dd {
  margin: 0;
  font-weight: 600;
  /* The card's `overflow-wrap: anywhere` breaks figures mid-number. */
  overflow-wrap: normal;
  white-space: nowrap;
}

.parcel-warnings {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 0.86rem;
}
.parcel-warnings li { margin-bottom: 4px; }
.parcel-warnings li:last-child { margin-bottom: 0; }

.parcel-note,
.parcel-missing {
  margin: 10px 0 0;
  font-size: 0.82rem;
}

/* On the listing form, sitting under the buyer-shipping input it explains. */
.parcel-inline {
  margin-top: 14px;
  grid-column: 1 / -1;
}
.parcel-inline h3 {
  margin: 0;
  font-size: 0.9rem;
}

/* Matches .readiness-panel above it on the same page. */
.parcel-panel {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.parcel-panel h2 { margin: 0; }
.parcel-panel-flagged {
  border-color: var(--warn-line);
  background: #fffcf2;
}

/* --- Comp quality ------------------------------------------------------ */
/* The stored confidence string counts listings and ignores what they cost, so
   a scattered sample of thirty read "high". These grades weigh spread too, and
   the colours have to make "weak" unmissable without making it look broken -
   weak comps are a normal outcome for one-of-a-kind stock. */
.comp-grade {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.comp-grade-strong { background: #ecfdf3; color: #166534; }
.comp-grade-fair { background: #fefce8; color: #854d0e; }
.comp-grade-weak { background: #fef2f2; color: #991b1b; }

.comp-spread {
  margin-left: 4px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.comp-quality {
  margin: 10px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--line);
  border-radius: 0 8px 8px 0;
  background: var(--bg);
}
.comp-quality-strong { border-left-color: var(--ok); }
.comp-quality-fair { border-left-color: #854d0e; }
.comp-quality-weak { border-left-color: var(--bad); }

.comp-quality-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 0.9rem;
}
.comp-quality-caution {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

/* --- Unlinked listings ------------------------------------------------- */
/* A listing attached to no inventory item does not appear on that item's
   Marketplaces card, so the item reads as not listed on eBay while it is.
   Given prominence above the card grid because it is the one thing on this
   page that needs a decision. */
.unlinked-panel {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  background: #fffcf2;
}
.unlinked-panel h2 { margin: 0 0 4px; }
.unlinked-panel > p { margin: 0 0 12px; }

.unlinked-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.unlinked-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.unlinked-row:first-child { border-top: 0; }

.unlinked-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 320px;
}
.unlinked-row-main p { margin: 0; }
.unlinked-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
}
.unlinked-title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.unlinked-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
}
.unlinked-form select { max-width: 340px; }

@media (max-width: 560px) {
  .unlinked-form,
  .unlinked-form select,
  .unlinked-form .btn { width: 100%; }
}

/* --- Link an eBay listing by item number ------------------------------- */
/* Sits in the Marketplaces card, which is where an item wrongly reading "not
   listed on eBay" gets noticed. */
.link-ebay {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.link-ebay > summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
}
.link-ebay form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px;
  margin-top: 10px;
}
.link-ebay label {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
}
.link-ebay .span-full { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .link-ebay form { grid-template-columns: 1fr; }
}

/* Suggested item matches under an unlinked listing. */
.unlinked-suggestion {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.8rem;
}
.unlinked-evidence { opacity: 0.75; }

/* --- Category lookup and required item specifics ----------------------- */
/* The category ID used to be copied off eBay's website by hand. It also
   decides which item specifics eBay demands, so both live near the field. */
.category-lookup {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.category-options {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.category-options li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.category-options li:first-child { border-top: 0; }
.category-option-name { font-weight: 700; }
.category-option-path {
  flex: 1 1 100%;
  font-size: 0.8rem;
}

/* eBay's requirements for the chosen category, shown beside the specifics
   rows they have to be typed into. */
.aspects-required {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.aspects-required-flagged {
  border-color: var(--warn-line);
  background: #fffcf2;
}
.aspects-required h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
}
.aspects-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.88rem;
}
.aspects-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
}
.aspect-mark { width: 1em; font-weight: 700; }
.aspect-done .aspect-mark { color: var(--ok); }
.aspect-todo .aspect-mark { color: var(--bad); }
.aspects-required details { margin-top: 6px; font-size: 0.84rem; }

/* --- Dashboard sync health --------------------------------------------- */
/* Sits between the attention notice and the secondary chart analysis, so a
   reader sees how stale the numbers are before reading them. */
.sync-health {
  margin: 0 0 20px;
}

/* --- Fallback research search form ------------------------------------- */
/* The /research/search page is the no-JavaScript / error fallback for the
   home search. Styled with the shared .stack / .btn design system rather
   than the undefined Bootstrap classes it used to carry. */
.research-search-form {
  max-width: 640px;
}
.research-search-form input[type="text"],
.research-search-form input[type="file"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.research-search-form input:focus-visible {
  border-color: var(--accent);
  outline: 3px solid rgba(31, 95, 191, 0.16);
}

/* --- Reduced motion ----------------------------------------------------
   Honors the OS "reduce motion" setting: the card hover lift/translate and
   the progress-bar and skip-link transitions can trigger vestibular
   discomfort. Motion is removed, not the state change, so hover/focus still
   read as active. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .listing-card:hover,
  .listing-card:focus-visible,
  .inventory-card:hover,
  .inventory-card:focus-visible {
    transform: none;
  }
}

/* --- WI-09: work queues, bulk actions, and pagination --- */

.queue-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.queue-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--border, #d0d0d0);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: var(--surface, #fff);
}

.queue-tile:hover,
.queue-tile:focus-visible {
  border-color: var(--accent, #3062d0);
}

.queue-tile-count {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.queue-tile-active .queue-tile-count {
  color: var(--accent, #3062d0);
}

.queue-tile-label {
  font-weight: 600;
}

.queue-tile-desc {
  font-size: 0.85rem;
  color: var(--muted, #666);
}

.queue-toolbar,
.queue-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.queue-selected-count {
  font-weight: 600;
}

.queue-next-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.2rem;
}

.queue-next-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Pagination controls, shared by every paginated collection. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
}

.pagination-range {
  margin: 0;
  color: var(--muted, #666);
}

.pagination-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination .is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.pagination-gap {
  padding: 0 0.3rem;
  color: var(--muted, #666);
}

/* Screen-reader-only utility used by the queue select column header. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}