/* FB Market Bot — shared styles. Order per docs/17 §11: tokens, base, shell,
   components, utilities, media queries. Class names match public/index.html
   so the planning page and the app pages read as one product. */

/* ---------- Tokens (docs/17 §5) ---------- */
:root{
  --bg-gradient:linear-gradient(135deg,#eef2f8 0%,#f6f8fb 100%);
  --color-surface:#ffffff; --color-surface-2:#f3f5f9; --color-surface-3:#eef1f5;
  --color-border:#e8ecf2; --color-text:#111418; --color-muted:#6b7280;
  --color-primary:#111418; --color-primary-hover:#000000;
  --color-accent:#2563eb; --color-accent-soft:#e8f0fe;
  --color-positive:#16a34a; --color-positive-text:#15803d; --color-bar:#22c55e;
  --color-negative:#dc2626; --color-negative-text:#b91c1c; --color-warning:#d97706;
  --pastel-green:#dcfce7; --pastel-green-text:#166534;
  --pastel-blue:#dbeafe; --pastel-blue-text:#1e40af;
  --pastel-purple:#ede9fe; --pastel-purple-text:#5b21b6;
  --pastel-amber:#fef3c7; --pastel-amber-text:#92400e;
  --pastel-red:#fee2e2; --pastel-red-text:#991b1b;
  --pastel-grey:#f3f4f6; --pastel-grey-text:#374151;
  /* --color-muted on --color-surface-2 is 4.43:1 — below AA for small text. This is
     the same grey one step darker (6.1:1 on surface-2), for muted copy that sits on
     a tinted panel rather than on white. */
  --color-muted-ink:#4b5563;
  /* OfferUp's brand green, and the ink of the mark drawn on it (symbol #i-offerup,
     public/listings.html). Every OfferUp button, chip and menu entry is themed from
     these two, so the channel's colour lives in exactly one place. */
  --ou-green:#00a55f; --ou-ink:#ffffff;
  --color-backdrop:rgba(17,20,24,.4);
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius-surface:24px; --radius-hero:20px; --radius-card:16px; --radius-inner:12px; --radius-sm:8px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow-float:0 12px 32px rgba(16,24,40,.14);
  /* A listing card is a raised surface, not a boxed one: no border, a wider and
     softer shadow, and a deeper one while the pointer is over it. */
  --radius-lc:20px;
  --shadow-lc:0 1px 2px rgba(16,24,40,.05),0 12px 28px -10px rgba(16,24,40,.16);
  --shadow-lc-hover:0 2px 6px rgba(16,24,40,.07),0 22px 46px -12px rgba(16,24,40,.22);
  --ring:0 0 0 3px rgba(37,99,235,.18);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
  --gutter:24px; --sidebar-w:220px; --topbar-h:64px; --transition:150ms ease;
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:#f6f8fb;-webkit-text-size-adjust:100%}
body{margin:0;padding:16px;min-height:100vh;background-color:#f6f8fb;background-image:var(--bg-gradient);background-attachment:fixed;color:var(--color-text);font:400 14px/1.5 var(--font-sans);font-variant-numeric:tabular-nums}
a{color:var(--color-accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:none;box-shadow:var(--ring)}
h1,h2,h3,h4,p{margin:0}
h1{font-size:24px;line-height:1.2;font-weight:700}
h2{font-size:18px;line-height:1.3;font-weight:700}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
code{font-family:var(--font-mono);font-size:12.5px;background:var(--color-surface-2);padding:1px 5px;border-radius:5px}
.muted{color:var(--color-muted)}
.small{font-size:12px}
.mono{font-family:var(--font-mono)}
.pos{color:var(--color-positive-text)}
.neg{color:var(--color-negative-text)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Shell (docs/17 §1–3) ---------- */
.surface{background:var(--color-surface);border-radius:var(--radius-surface);box-shadow:var(--shadow-card);min-height:calc(100vh - 32px);display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:var(--topbar-h) minmax(0,1fr);grid-template-areas:"side top" "side main"}

.side{grid-area:side;position:sticky;top:16px;align-self:start;height:calc(100vh - 32px);display:flex;flex-direction:column;border-right:1px solid var(--color-border);border-radius:var(--radius-surface) 0 0 var(--radius-surface);overflow:hidden auto;background:var(--color-surface)}
.brand{display:flex;align-items:center;gap:10px;height:var(--topbar-h);padding:0 20px;font-weight:700;font-size:16px;color:var(--color-text);flex:none;white-space:nowrap}
.brand:hover{text-decoration:none}
.mark{width:32px;height:32px;border-radius:50%;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none;letter-spacing:-.02em}
.nav{display:flex;flex-direction:column;padding:4px 0;flex:1 1 auto}
.nav a,.nav .soon{position:relative;display:flex;align-items:center;gap:8px;height:44px;margin:2px 8px;padding:0 10px;border-radius:var(--radius-inner);color:var(--color-text);font-weight:500;font-size:14px;transition:background var(--transition)}
.nav a .ic,.nav .soon .ic{color:var(--color-muted)}
.nav a:hover{background:var(--color-surface-2);text-decoration:none}
.nav .soon{color:var(--color-muted);cursor:default}
.nav a.on{background:var(--color-accent-soft);color:var(--color-accent);font-weight:600}
.nav a.on .ic{color:var(--color-accent)}
.nav a.on::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:3px;background:var(--color-accent);border-radius:0 3px 3px 0}
.nav .lb{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.nav .ph{flex:none;font-size:12px;font-weight:600;line-height:1;padding:2px 5px;margin-left:-2px;border-radius:var(--radius-pill);background:var(--pastel-grey);color:var(--color-muted)}
.nav .cnt{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--color-accent-soft);color:var(--color-accent);font-size:12px;font-weight:600;display:grid;place-items:center}
.nav .cnt.bad{background:var(--pastel-red);color:var(--pastel-red-text)}
.side-bottom{padding:16px;flex:none;display:flex;flex-direction:column;gap:14px}
.ap{display:block;background:var(--color-surface-2);border-radius:var(--radius-card);padding:14px 16px;color:var(--color-text);transition:background var(--transition)}
a.ap:hover{text-decoration:none;background:var(--color-surface-3)}
.ap .r1{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.ap .dot{width:8px;height:8px;border-radius:50%;background:var(--color-bar);flex:none}
.ap.warn .dot{background:var(--color-warning)}
.ap.off .dot{background:var(--color-muted)}
.ap .st{margin-left:auto;color:var(--color-positive-text)}
.ap.warn .st{color:var(--color-warning)}
.ap.off .st{color:var(--color-muted)}
.ap .r2{font-size:12px;color:var(--color-muted);margin-top:4px}
.help{display:flex;gap:10px;align-items:flex-start;padding:0 4px}
.help .ic{color:var(--color-muted);margin-top:1px}
.help b{display:block;font-size:13px;font-weight:600}
.help a{font-size:12px;font-weight:600}

.top{grid-area:top;display:flex;align-items:center;gap:16px;padding:0 var(--gutter);min-width:0;position:sticky;top:16px;background:var(--color-surface);border-radius:0 var(--radius-surface) 0 0;z-index:5}
.top .brand{display:none;padding:0;height:auto}
.search{flex:1 1 auto;max-width:480px;min-width:0;height:44px;display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:var(--radius-pill);background:var(--color-surface-2);color:var(--color-muted);transition:background var(--transition),box-shadow var(--transition)}
.search:focus-within{background:#fff;box-shadow:var(--ring)}
.search .ic{width:18px;height:18px}
.search input{flex:1 1 auto;min-width:0;border:0;background:transparent;font:inherit;font-size:14px;color:var(--color-text);outline:none;padding:0;box-shadow:none}
.search input::placeholder{color:var(--color-muted)}
.sp{flex:1 1 0}
.ibtn{width:40px;height:40px;border-radius:var(--radius-inner);display:grid;place-items:center;color:var(--color-text);position:relative;flex:none;transition:background var(--transition)}
.navbtn{display:none}
.ibtn:hover{background:var(--color-surface-2)}
.ibtn.sq{width:36px;height:36px;background:var(--color-surface-2)}
.ibtn.sq:hover{background:var(--color-surface-3)}
.ibtn .rd{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--color-negative);box-shadow:0 0 0 2px #fff}
.user{display:flex;align-items:center;gap:10px;font-weight:500;flex:none;color:var(--color-text);cursor:pointer;list-style:none;border-radius:var(--radius-inner);padding:4px 6px 4px 4px}
.user::-webkit-details-marker{display:none}
.user:hover{background:var(--color-surface-2)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--pastel-blue);color:var(--pastel-blue-text);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.user .ic{width:16px;height:16px;color:var(--color-muted)}
.umenu{position:relative;flex:none}
.umenu .menu{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-inner);box-shadow:var(--shadow-float);padding:6px;z-index:20}
.menu a,.menu button,.menu .soon{display:flex;align-items:center;gap:10px;width:100%;height:auto;min-height:40px;padding:6px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--color-text);text-align:left}
.menu a:hover,.menu button:hover{background:var(--color-surface-2);text-decoration:none}
.menu .soon{color:var(--color-muted);cursor:default}
.menu .soon:hover{background:transparent}
.menu .ic{color:var(--color-muted)}

/* Job pill (docs/17 §3, docs/13) */
.jobpill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--radius-pill);background:var(--color-accent-soft);color:var(--color-accent);font-size:13px;font-weight:600;white-space:nowrap;flex:none;max-width:320px}
.jobpill:hover{text-decoration:none}
.jobpill .jt{overflow:hidden;text-overflow:ellipsis}
.pdot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);flex:none;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.main{grid-area:main;padding:20px var(--gutter) var(--gutter);display:flex;flex-direction:column;gap:24px;min-width:0;max-width:1280px;width:100%}
.page-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-h .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Chips (docs/17 §4.6) ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.chip.g{background:var(--pastel-green);color:var(--pastel-green-text)}
.chip.b{background:var(--pastel-blue);color:var(--pastel-blue-text)}
.chip.a{background:var(--pastel-amber);color:var(--pastel-amber-text)}
.chip.p{background:var(--pastel-purple);color:var(--pastel-purple-text)}
.chip.r{background:var(--pastel-red);color:var(--pastel-red-text)}
.chip.n{background:var(--pastel-grey);color:var(--pastel-grey-text)}
.chip.s{background:var(--color-surface-2);color:var(--color-muted);font-weight:500}
.chip .pdot{width:6px;height:6px;background:currentColor}
.tone-g{background:var(--pastel-green);color:var(--pastel-green-text)}
.tone-b{background:var(--pastel-blue);color:var(--pastel-blue-text)}
.tone-p{background:var(--pastel-purple);color:var(--pastel-purple-text)}
.tone-a{background:var(--pastel-amber);color:var(--pastel-amber-text)}
.tone-r{background:var(--pastel-red);color:var(--pastel-red-text)}

/* ---------- Buttons (docs/17 §4.1) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 20px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;white-space:nowrap;transition:background var(--transition),transform var(--transition);border:0}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--color-primary);color:#fff}
.btn.pri:hover{background:var(--color-primary-hover)}
.btn.sec{background:#fff;border:1px solid var(--color-border);color:var(--color-text)}
.btn.sec:hover{background:var(--color-surface-2)}
.btn.danger{background:#fff;border:1px solid var(--color-border);color:var(--color-negative-text)}
.btn.danger:hover{background:var(--pastel-red)}
.btn.sm{height:36px;padding:0 14px;font-size:13px}
.btn.ghost{background:var(--color-surface-2);border-radius:var(--radius-inner);height:36px;padding:0 14px;font-size:13px}
.btn.ghost:hover{background:var(--color-surface-3)}
.btn.wide{width:100%}
.btn .ic{width:16px;height:16px}
a.btn:hover{text-decoration:none}
.btn.busy{position:relative;color:transparent!important}
.btn.busy::after{content:"";position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.btn.sec.busy::after,.btn.ghost.busy::after,.btn.danger.busy::after{border-color:rgba(17,20,24,.15);border-top-color:var(--color-text)}
@keyframes spin{to{transform:rotate(360deg)}}
.lnk{font-size:13px;font-weight:600;white-space:nowrap}

/* ---------- Cards, sections ---------- */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px;min-width:0}
.card.tight{padding:4px 8px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sec-h .tt{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sec-h h2{font-size:18px;font-weight:700}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.two .card{padding:24px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* KPI (docs/17 §4.4) */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.kpi{position:relative}
.kpi .l{font-size:12px;color:var(--color-muted);font-weight:500;padding-right:48px}
.kpi .v{font-size:26px;font-weight:700;line-height:1.1;margin-top:8px;white-space:nowrap}
.kpi .d{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:13px;font-weight:600;color:var(--color-positive-text);flex-wrap:wrap}
.kpi .d.neg{color:var(--color-negative-text)}
.kpi .d.flat{color:var(--color-muted)}
.kpi .d svg{width:80px;height:24px;max-width:100%;flex:none}
.kpi .d svg path{fill:none;stroke:var(--color-bar);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.badge .ic{width:18px;height:18px}

/* Listing cards (docs/17 §4.5) */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.lc{padding:14px;display:flex;flex-direction:column}
.lc .ph{position:relative;aspect-ratio:4/3;border-radius:var(--radius-inner);display:grid;place-items:center;background:var(--color-surface-2);color:var(--color-muted);overflow:hidden}
/* "Add photo" sits in the empty frame itself, where the missing photo is. The
   fallback box icon stays behind it as the backdrop, so the frame still reads
   as a photo slot rather than turning into a button. */
/* The duplicate banner's own Yes / No — tiny, inline, unmistakably two choices. */
.chip.dupe{gap:6px;max-width:100%;min-width:0}
.dupem{font-style:normal;font-weight:500;opacity:.75;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.dupe .dupetxt{display:inline-flex;align-items:center;gap:4px;border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0;flex:0 1 auto;min-width:0;overflow:hidden}
.chip.dupe .dupeact{flex:none}
.chip.dupe .dupeact{border:1px solid currentColor;background:none;color:inherit;font:inherit;font-size:10.5px;font-weight:700;
  border-radius:999px;padding:0 8px;line-height:1.6;cursor:pointer}
.chip.dupe .dupeact:hover{background:currentColor}
.chip.dupe .dupeact:hover{color:#fff;background:var(--color-danger,#b42318)}
.chip.dupe.a .dupeact:hover{background:#8a6116;border-color:#8a6116}

/* "PICK UP" — a ribbon across the photo's top-right corner while the lot is
   still sitting at the DiscountBros warehouse. Gone the moment the order says
   picked up. .ph has overflow:hidden, which is what clips it to the corner. */
.lc .ph .ribbon{position:absolute;top:18px;right:-34px;transform:rotate(45deg);z-index:2;
  width:140px;text-align:center;padding:5px 0;background:#dc2626;color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.55);box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none}

/* The editable title: renders exactly like the read-only one, plus a hint. */
.lc button.t.tbtn-edit{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;color:inherit;padding:0;cursor:text;border-radius:6px}
.lc button.t.tbtn-edit:hover{background:var(--color-surface-2)}

/* The condition, as a small tag on the price line — never a row of its own. */
.condtag{display:inline-block;width:max-content;justify-self:start;align-self:center;vertical-align:middle;margin-left:6px;padding:1px 6px;border-radius:5px;
  font-size:10px;font-weight:700;letter-spacing:.03em;line-height:1.5;
  background:var(--color-surface-2);color:var(--color-muted-ink,var(--color-muted))}
.condtag.new{background:var(--color-success-soft,#e8f6ef);color:var(--color-success,#12805c)}
.condtag.miss{background:var(--color-warn-soft,#fdf3dc);color:var(--color-warn-ink,#8a6116)}
/* the tag is a button now (click = pick a condition); keep the tag look */
/* font-family only: the `font` shorthand made the button inherit the price
   line's size and the tag ballooned — the 10px tag type comes from .condtag. */
button.condtag{font-family:inherit;border:0;cursor:pointer}
/* On very narrow two-up cards the footer cannot hold the Keep/Returned pair
   next to the Update button; the ⋯ menu still carries both actions. */
@media (max-width:600px){.lc .ft>[data-keep],.lc .ft>[data-forfeit]{display:none}}
button.condtag:hover{filter:brightness(.95)}
button.condtag:focus-visible{outline:2px solid var(--color-accent,#1f6feb);outline-offset:1px}

/* "$16 suggested" and the check that adopts it as the owner's price. */
.lc .p .pbtn .sughint{font-size:11px;font-weight:600;color:var(--color-accent);text-transform:none}
.lc .p .paccept,.lr .p .paccept{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:2px;border-radius:50%;border:1px solid var(--color-border);
  background:var(--color-surface);color:var(--color-success,#12805c);cursor:pointer;vertical-align:middle;transition:background var(--transition)}
.lc .p .paccept:hover,.lr .p .paccept:hover{background:var(--color-success,#12805c);color:#fff;border-color:transparent}
.lc .p .paccept .ic{width:14px;height:14px}

/* The photo strip in the post dialogs: a single scrollable row of tiles —
   what will actually be sent, editable in place. Scrolls sideways rather than
   wrapping, so ten photos never push the dialog's buttons off screen. */
.pstrip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.pstrip:empty{display:none}
.pstrip .ptile{position:relative;flex:none;width:86px;height:86px;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface-2);border:1px solid var(--color-border)}
.pstrip .ptile img{width:100%;height:100%;object-fit:cover;display:block}
.pstrip .ptile.cover{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.pstrip .pcov{position:absolute;left:0;bottom:0;right:0;background:var(--color-accent);color:#fff;font-size:10px;font-weight:700;text-align:center;padding:1px 0}
.pstrip .pact{position:absolute;top:3px;width:22px;height:22px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(17,20,24,.65);color:#fff;font-size:13px;line-height:1;cursor:pointer}
.pstrip .pact.del{right:3px}
.pstrip .pact.star{left:3px}
.pstrip .pact:hover{background:var(--color-accent)}
.pstrip .padd{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px dashed var(--color-border);color:var(--color-accent);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;background:var(--color-surface)}
.pstrip .padd:hover{background:var(--color-accent-soft)}
.pstrip .pmuted{color:var(--color-muted);font-size:12.5px;align-self:center}

/* Card photo arrows: paging through the panel's own copies of the photos. */
.lc .ph .pnav{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:0;
  display:grid;place-items:center;background:rgba(17,20,24,.55);color:#fff;font-size:16px;line-height:1;cursor:pointer;opacity:0;transition:opacity var(--transition)}
.lc .ph:hover .pnav,.lc .ph .pnav:focus-visible{opacity:1}
.lc .ph .pnav.pdel{top:6px;right:6px;transform:none;font-size:14px}
.lc .ph .pnav.pdel:hover{background:var(--color-danger,#b42318)}
.lc .ph .pnav.prev{left:6px}
.lc .ph .pnav.next{right:6px}
.lc .ph .pnav:hover{background:var(--color-accent)}
.lc .ph .pcnt{position:absolute;right:6px;bottom:6px;background:rgba(17,20,24,.65);color:#fff;font-size:10.5px;font-weight:600;border-radius:999px;padding:1px 7px;opacity:0;transition:opacity var(--transition)}
.lc .ph:hover .pcnt{opacity:1}

/* Icon-only channel chips: just the brand mark, words live in the tooltip. */
.chip.icononly{padding:0;width:28px;height:28px;justify-content:center;border-radius:50%}
.chip.icononly .fbmark,.chip.icononly .ndmark{width:18px;height:18px;font-size:12px}
.chip.icononly .oumark{width:18px;height:18px}
a.chip.icononly:hover{transform:scale(1.12)}

/* Facebook's mark on the "Listed ↗" chip — the same footprint as OfferUp's. */
.fb-chip .fbmark,.selbar .fbmark,.chb .fbmark,.runpick .fbmark{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:#1877f2;color:#fff;font-size:11px;font-weight:800;line-height:1;font-family:Georgia,serif;flex:none}
.more .menu .ndmark{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:5px;
  background:#8ed500;color:#1a2e05;font-size:11px;font-weight:800;line-height:1;margin-right:2px}

/* Nextdoor: same footprint as the OfferUp button beside it, told apart by the
   green rounded-square mark Nextdoor itself uses. */
.nd-btn .ndmark,.nd-chip .ndmark,.selbar .ndmark,.chb .ndmark,.runpick .ndmark{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:5px;
  background:#8ed500;color:#1a2e05;font-size:11px;font-weight:800;line-height:1;flex:none}
.nd-chip .ndmark{width:14px;height:14px;font-size:10px}
.nd-btn.nd-failed{color:var(--color-danger,#b42318)}
.lc .ph .phadd,.lr .ph .phadd{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:6px 12px;border-radius:999px;border:1px solid var(--color-border);
  background:var(--color-surface);color:var(--color-accent);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.10);transition:background var(--transition),color var(--transition)}
.lc .ph .phadd:hover,.lr .ph .phadd:hover{background:var(--color-accent);color:#fff;border-color:transparent}
.lc .ph .phadd .ic,.lr .ph .phadd .ic{width:15px;height:15px}
.lr .ph .phadd{bottom:2px;padding:3px 8px;font-size:11px;gap:4px}
.lr .ph .phadd span{display:none}
.lc .ph img{width:100%;height:100%;object-fit:cover;display:block}
.lc .ph .ic{width:56px;height:56px;stroke-width:1.25}
.lc .ph .chip{position:absolute;top:8px;left:8px}
.lc .t{font-size:15px;font-weight:600;line-height:1.35;min-height:2.7em;margin-top:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc .p{font-size:18px;font-weight:700;margin-top:4px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--color-surface-3)}
.stats .l{font-size:12px;color:var(--color-muted);font-weight:500}
.stats .l .sm{display:none}
.stats .n{font-size:14px;font-weight:700;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;line-height:1.3}
.stats .n i{font-style:normal;font-size:12px;font-weight:600;color:var(--color-positive-text)}
.stats .n .na{color:var(--color-muted);font-weight:500}
.lc .ft{display:flex;gap:8px;margin-top:0;padding-top:14px}
.lc .ft .btn{flex:1 1 auto;min-width:0;padding:0 8px}

/* Banners (docs/17 §4.9) */
.banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:var(--radius-inner);padding:12px 16px;font-weight:600;font-size:14px}
.banner.warn{background:var(--pastel-amber);border:1px solid #fde68a;color:var(--pastel-amber-text)}
.banner.danger{background:var(--pastel-red);border:1px solid #fecaca;color:var(--pastel-red-text)}
.banner.info{background:var(--pastel-blue);border:1px solid #bfdbfe;color:var(--pastel-blue-text)}
.banner.success{background:var(--pastel-green);border:1px solid #bbf7d0;color:var(--pastel-green-text)}
.banner .acts{display:flex;gap:8px;margin-left:auto;align-items:center;flex-wrap:wrap}
.banner .x{width:32px;height:32px;border-radius:var(--radius-sm);display:grid;place-items:center;color:inherit}
.banner .x:hover{background:rgba(17,20,24,.08)}

/* Progress (docs/17 §4.13, docs/13) */
.prog{display:flex;flex-direction:column;gap:8px;min-width:0}
.prog-track{height:8px;border-radius:4px;background:var(--color-surface-3);overflow:hidden;position:relative}
.prog-fill{height:100%;border-radius:4px;background:var(--color-accent);width:0;transition:width 300ms ease}
.prog.done .prog-fill{background:var(--color-bar)}
.prog.failed .prog-fill{background:var(--color-negative)}
.prog.stopped .prog-fill{background:var(--color-muted)}
.prog.indeterminate .prog-fill{width:100%;background:repeating-linear-gradient(-45deg,var(--color-accent) 0 10px,var(--color-accent-soft) 10px 20px);background-size:28px 8px;animation:stripes 1.2s linear infinite}
@keyframes stripes{to{background-position:28px 0}}
.prog-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--color-muted);flex-wrap:wrap}
.prog-row b{color:var(--color-text);font-weight:600}
.prog-cur{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}

/* Forms (docs/17 §4.11) */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field .lbl,label.lbl{font-size:12px;font-weight:600;color:var(--color-muted)}
.field .hint{font-size:12px;color:var(--color-muted)}
.field .ferr{font-size:12px;color:var(--color-negative-text)}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=date],select,textarea{width:100%;height:44px;border:1px solid var(--color-border);border-radius:var(--radius-inner);background:#fff;padding:0 14px;font:inherit;font-size:14px;color:var(--color-text);transition:border-color var(--transition),box-shadow var(--transition)}
textarea{height:auto;min-height:160px;padding:12px 14px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:var(--ring)}
input[aria-invalid=true],.field.invalid input{border-color:var(--color-negative)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.money{position:relative}
.money::before{content:"$";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--color-muted);font-weight:500}
.money input{padding-left:28px}
.seg{display:inline-flex;background:var(--color-surface-2);border-radius:var(--radius-inner);padding:3px;gap:2px}
.seg button,.seg label{height:36px;padding:0 14px;border-radius:9px;font-size:13px;font-weight:600;color:var(--color-muted);display:inline-flex;align-items:center;cursor:pointer}
.seg .on,.seg input:checked+span{background:#fff;color:var(--color-text);box-shadow:var(--shadow-card)}
.toggle{position:relative;width:44px;height:24px;border-radius:12px;background:#cbd5e1;transition:background var(--transition);flex:none;border:0}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--transition);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle[aria-checked=true]{background:var(--color-accent)}
.toggle[aria-checked=true]::after{transform:translateX(20px)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid .full{grid-column:1/-1}

/* Tables (docs/17 §4.10) */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:12px;color:var(--color-muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--color-border);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--color-surface-3);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#f8fafc}
.tbl tr.sel td{background:var(--color-accent-soft)}
.tbl .w{white-space:nowrap}
.tbl .num{text-align:right;white-space:nowrap}
.tbl .thumb{width:40px;height:40px;border-radius:var(--radius-sm);object-fit:cover;background:var(--color-surface-2);display:block}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Empty, skeleton, toast (docs/17 §4.15) */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 20px;color:var(--color-muted)}
.empty .ic{width:48px;height:48px;stroke-width:1.25}
.empty b{font-size:15px;font-weight:600;color:var(--color-text)}
.skel{background:var(--color-surface-3);border-radius:var(--radius-sm);position:relative;overflow:hidden;min-height:14px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 1.2s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.toast{position:fixed;right:24px;bottom:24px;z-index:100;background:var(--color-text);color:#fff;padding:12px 16px;border-radius:var(--radius-inner);box-shadow:var(--shadow-float);font-size:14px;font-weight:500;max-width:min(420px,calc(100vw - 32px));opacity:0;transform:translateY(8px);transition:opacity 200ms ease,transform 200ms ease;pointer-events:none}
.toast.show{opacity:1;transform:none;pointer-events:auto}

/* Modal (docs/17 §4.12) */
.backdrop{position:fixed;inset:0;background:var(--color-backdrop);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
/* Native <dialog class="modal"> reset — unconditional, so the status/condition/link
   pickers look right even before any confirmDialog has injected its copy. */
dialog.modal{border:0;margin:auto;width:calc(100% - 32px);color:var(--color-text)}
dialog.modal::backdrop{background:var(--color-backdrop)}
@media (max-width:640px){
  dialog.modal{margin:auto auto 0;width:100vw;max-width:none;border-radius:20px 20px 0 0;max-height:92dvh;overflow:auto;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}
.modal{background:#fff;border-radius:var(--radius-hero);padding:24px;width:100%;max-width:560px;box-shadow:var(--shadow-float);display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 32px);overflow:auto}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* ---------- Login (docs/12 S0) ---------- */
.login-page{display:grid;place-items:center;padding:16px}
.login-card{width:100%;max-width:400px;background:var(--color-surface);border-radius:var(--radius-surface);box-shadow:var(--shadow-float);padding:32px;display:flex;flex-direction:column;gap:20px}
.login-card .brand{height:auto;padding:0}
.login-card form{display:flex;flex-direction:column;gap:14px}
.login-card .err{font-size:13px;font-weight:600;color:var(--color-negative-text);min-height:1.2em}
.login-card .err:empty{display:none}

/* ---------- Media queries (docs/17 §7; breakpoints repeated on purpose) ---------- */
/* Tablet: 641–1023 */
@media (max-width:1023px){
  .main{--gutter:20px}
}
/* KPI, listing-card and bottom-row columns drop before the sidebar collapses (4-up needs ~1120px with the sidebar) */
@media (max-width:1119px){
  .kpis,.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .two,.grid-2{grid-template-columns:minmax(0,1fr);gap:16px}
}
/* Sidebar becomes a drawer: the top bar stays stuck to the viewport and the
   ☰ button (app.js renderShell) opens the nav as an overlay panel under it —
   the old static strip scrolled away with the page, which on a phone meant
   there was no menu at all once you scrolled (owner, 2026-09-25). */
@media (max-width:900px){
  body{padding:0}
  .surface{border-radius:0;box-shadow:none;min-height:100vh;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--topbar-h) minmax(0,1fr);grid-template-areas:"top" "main"}
  .navbtn{display:grid}
  .top{position:sticky;top:0;border-radius:0;border-bottom:1px solid var(--color-border);z-index:30}
  .top .brand{display:flex}
  .top .search{max-width:none}
  .side{display:none}
  body.nav-open{overflow:hidden}
  body.nav-open .side{display:flex;flex-direction:column;position:fixed;top:var(--topbar-h);left:0;right:0;z-index:29;height:auto;max-height:calc(100dvh - var(--topbar-h));border:0;border-bottom:1px solid var(--color-border);border-radius:0 0 var(--radius-card) var(--radius-card);box-shadow:var(--shadow-float);overflow:hidden auto;padding:8px 12px 14px;gap:12px;background:var(--color-surface);overscroll-behavior:contain}
  body.nav-open::before{content:'';position:fixed;inset:0;background:var(--color-backdrop);z-index:28}
  .side>.brand{display:none}
  .nav{display:flex;flex-direction:column;gap:2px;padding:0}
  .nav a,.nav .soon{height:44px;margin:0;padding:0 12px;gap:10px;font-size:14px}
  .nav a.on::before{display:none}
  .side-bottom{flex-direction:column;padding:0;gap:10px;margin-top:8px}
  .main{--gutter:20px;gap:20px}
  .jobpill .jt{max-width:160px}
}
/* Phone: < 640 */
@media (max-width:640px){
  .main{--gutter:16px;gap:16px;padding-top:16px}
  .surface{--topbar-h:56px}
  .top{height:56px;padding:0 16px;gap:10px}
  .top .search{flex:none;width:40px;height:40px;padding:0;justify-content:center;border-radius:50%;margin-left:auto;overflow:hidden}
  .top .search input{width:0;opacity:0;padding:0;min-width:0}
  /* tapping the magnifier focuses the input (it is the label's control), which expands it */
  .top .search:focus-within{flex:1 1 auto;width:auto;height:40px;padding:0 14px;justify-content:flex-start;border-radius:var(--radius-pill)}
  .top .search:focus-within input{width:100%;opacity:1}
  .sp{display:none}
  .user .hi,.user .ic{display:none}
  /* Brand and job pill are the only shrinkable items; bell + avatar stay on-screen.
     .brand clips until app.js wraps its text in .bt, which then ellipsizes. */
  .top .brand{flex:0 9 auto;min-width:0;overflow:hidden}
  .top .brand .bt{display:none}
  .jobpill{height:32px;padding:0 10px;font-size:12px;flex:0 1 auto;min-width:72px;max-width:none}
  .jobpill .jt{max-width:none;min-width:0;flex:1 1 auto}
  .card{padding:16px}
  .kpis,.cards{gap:12px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .kpi .v{font-size:22px}
  .badge{top:16px;right:16px;width:36px;height:36px}
  .kpi .d svg{width:64px}
  .lc{padding:12px}
  .lc .ph .ic{width:44px;height:44px}
  .stats .l .lg{display:none}
  .stats .l .sm{display:inline}
  .stats .n{flex-direction:column;align-items:flex-start;gap:0}
  body.nav-open .side{padding:8px 16px 16px}
  .two .card{padding:16px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .tbl-wrap .tbl{min-width:560px}
  .toast{right:16px;left:16px;bottom:16px;max-width:none}
  .modal{border-radius:20px 20px 0 0;align-self:flex-end}
  .backdrop{padding:0;align-items:flex-end}
  .login-page{padding:0;place-items:start center}
  .login-card{border-radius:0;box-shadow:none;min-height:100vh;max-width:none;justify-content:center;padding:24px}
  .prog-cur{max-width:100%}
}
@media (min-width:480px) and (max-width:640px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lc .ft{flex-wrap:wrap}
  .lc .ft .ouslot{flex:1 1 100%;order:5}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .pdot,.prog.indeterminate .prog-fill,.skel::after,.btn.busy::after{animation:none!important}
}

/* ---------- Appended: Listings + Jobs pages (docs/12 S2, S6 › Jobs) ---------- */
.page-h .tt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.sess{height:28px;padding:0 12px;font-size:12px;max-width:100%}
.sess span{overflow:hidden;text-overflow:ellipsis}
.seg button.on{background:#fff;color:var(--color-text);box-shadow:var(--shadow-card)}

/* Job panel: header row + progress + Stop (docs/17 §4.13) */
.jobpanel{display:flex;flex-direction:column;gap:12px;min-width:0}
.jp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.jp-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.jp-t b{font-size:15px;font-weight:600}
.jp-msg{font-size:13px;color:var(--color-text);overflow-wrap:anywhere}
.jp-msg.err{color:var(--color-negative-text);font-weight:600}
.jp-msg .hint{color:var(--color-muted);font-weight:400}
.jp-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.jp-note .ic{color:var(--color-warning);width:18px;height:18px}
.jobs-run{display:flex;flex-direction:column;gap:12px}
.jobs-run .empty{padding:24px 20px;gap:4px}
.jobs-run .empty .ic{width:32px;height:32px}
.log{background:#0f172a;color:#e2e8f0;border-radius:var(--radius-inner);padding:14px 16px;margin:0;font:12px/1.5 var(--font-mono);max-height:440px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.log:empty::before{content:"(empty log)";color:#94a3b8}
.tbl .res{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl button.lnk{color:var(--color-accent)}
.tbl button.lnk:hover{text-decoration:underline}

/* Listing cards: real photo, fallback, editable price, my-price tag, ⋯ menu */
.lc a.ph{color:var(--color-muted)}
.lc a.ph:hover{text-decoration:none}
.lc .ph .fallback{display:grid;place-items:center;width:100%;height:100%}
.lc .p{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:28px}
.lc .p .pbtn{font:inherit;font-weight:700;border-radius:6px;padding:0 4px;margin-left:-4px;line-height:28px;transition:background var(--transition)}
.lc .p .pbtn:hover{background:var(--color-surface-2)}
/* An unpriced listing: the control names itself instead of showing a dash that
   gives no hint it can be clicked. Same accent the "add what you paid" link
   uses, so the two money fields on a card read as one pair. */
.lc .p .pbtn.setprice,.lr .p .pbtn.setprice,.ltbl .p .pbtn.setprice{
  font-size:13px;font-weight:600;color:var(--color-accent);
  text-decoration:underline dotted;text-underline-offset:3px}
.lc .p .pbtn.setprice:hover,.lr .p .pbtn.setprice:hover,.ltbl .p .pbtn.setprice:hover{
  background:var(--color-accent-soft);text-decoration:none}
.myp{font-size:12px;font-weight:600;line-height:1;padding:3px 7px;border-radius:var(--radius-pill);background:var(--pastel-blue);color:var(--pastel-blue-text);white-space:nowrap}
.pedit{display:flex;align-items:center;gap:6px;width:100%;min-width:0}
.pedit .money{flex:1 1 auto;min-width:0}
.pedit input{height:36px;padding-left:24px;padding-right:8px;font-weight:700;font-size:15px;max-width:100%}
.pedit .money::before{left:10px}
.pedit .ibtn.sq{width:32px;height:32px}
.stats .n i.neg{color:var(--color-negative-text)}
.stats .n i.flat{color:var(--color-muted);font-weight:500}
.lc .ft{align-items:center}
.more{position:relative;flex:none}
.more>summary{list-style:none}
.more>summary::-webkit-details-marker{display:none}
.more[open]>summary{background:var(--color-surface-3)}
.more>.menu{position:absolute;right:0;bottom:calc(100% + 6px);min-width:232px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-inner);box-shadow:var(--shadow-float);padding:6px;z-index:45}
.menu .soon .chip{margin-left:auto}
/* A tall ⋯ menu scrolls inside itself (placeFixed/fitMenu, the phone sheet). Reaching its end must not
   carry on into a page scroll: that scroll closes the menu in Table view and on phones (review 2026-09-27). */
.more>.menu{overscroll-behavior:contain}
.lc .ft .ph-soon{font-size:11px;color:var(--color-muted)}
.cards .empty{grid-column:1/-1}
.cards .empty p{max-width:420px}
.lc.skl .ph{background:var(--color-surface-3)}

/* Phone: tighter card footer, price and menus (card columns come from the shell block: 1 below 480px, 2 at 480–640px) */
@media (max-width:640px){
  .lc .ft .btn{padding:0 6px}
  .lc .p .pbtn{font-size:16px}
  .more>.menu{min-width:180px}
  .tbl .res{max-width:200px}
}

/* Listing card: Facebook-sourced extras (round 3) */
.lc .p .was{color:var(--color-muted);font-weight:500;font-size:13px}
.lc .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.lc .meta .chip{display:inline-block;line-height:20px;height:20px;font-size:11px;padding:0 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.lc .meta .loc{font-size:12px;color:var(--color-muted)}
.lc .meta:empty{display:none}
/* Stats, not the footer, absorb the row slack so Views/Saves/Msgs and the Boost row line up across a
   grid row whatever the chip count. The 12px gap and the rule line move inside the box (padding 25 =
   12 gap + 1 line + 12) so a card with no slack keeps the same spacing as before. */
.lc .stats{margin-top:auto;border-top:0;padding-top:25px;position:relative}
.lc .stats::before{content:"";position:absolute;left:0;right:0;top:12px;height:1px;background:var(--color-surface-3)}

/* ---------- Appended: purchase price, sale and profit per listing card (docs/09) ---------- */
/* Money row under the price. Sold cards: Paid [$ input] · Sold for $X · on <date> [est.] · Profit $Y (or the amber
   "add what you paid" chip). Live cards: "Paid: $— add" or "Paid $X · expected profit $Z". Every control is 36px tall
   and the row wraps item by item, so it fits the 2-up card at 480–640px and the 1-up card below that. */
.lc .mrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px;font-size:13px;color:var(--color-muted);min-width:0}
.lc .mrow b{color:var(--color-text);font-weight:600}
.lc .mrow .lbl{font-weight:500;white-space:nowrap}
.lc .mrow .mfacts{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.lc .medit{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.lc .medit label{display:inline-flex;align-items:center;gap:6px;cursor:text}
.lc .medit .money{flex:none;width:96px}
.lc .medit .money::before{left:9px;font-size:13px}
.lc .medit input{height:36px;padding:0 8px 0 21px;font-size:14px;font-weight:600;border-radius:var(--radius-sm);-moz-appearance:textfield}
.lc .medit input::-webkit-outer-spin-button,.lc .medit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lc .medit input::placeholder{color:var(--color-muted);font-weight:500}
.lc .medit input[type=date]{width:150px;padding:0 8px;font-weight:500;font-size:13px}
.lc .medit .ibtn.sq{width:36px;height:36px}
.lc .mrow .mlink{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 6px;margin:-4px -6px;border-radius:var(--radius-sm);font:inherit;font-size:13px;color:var(--color-muted);text-decoration:underline dotted;text-underline-offset:3px;white-space:nowrap;transition:background var(--transition),color var(--transition)}
.lc .mrow .mlink:hover{background:var(--color-surface-2);color:var(--color-text)}
.lc .mrow .mlink.add{color:var(--color-accent);font-weight:600}
.lc .mrow .est{font-style:normal;font-size:11px;font-weight:600;line-height:1;padding:3px 6px;border-radius:var(--radius-pill);background:var(--pastel-amber);color:var(--pastel-amber-text)}
.lc .mrow .profit{font-weight:600;white-space:nowrap}
.lc .mrow .expect{white-space:nowrap}
.lc .mrow .profit.pos,.lc .mrow .profit.pos b,.lc .mrow .expect b.pos{color:var(--color-positive-text)}
.lc .mrow .profit.neg,.lc .mrow .profit.neg b,.lc .mrow .expect b.neg{color:var(--color-negative-text)}
.lc .mrow .addpaid{display:inline-flex;align-items:center;min-height:36px;padding:0;margin:-4px 0}
.lc .mrow .addpaid .chip{cursor:pointer;transition:background var(--transition)}
.lc .mrow .addpaid:hover .chip{background:#fde68a}
.cost-banner .ic{width:18px;height:18px;flex:none}
.cost-banner>span{min-width:0;flex:1 1 200px}
.cost-banner .acts .btn.sm{height:36px}
@media (max-width:640px){
  .lc .mrow{gap:4px 8px}
  .lc .medit .money{width:88px}
  .lc .medit input[type=date]{width:140px}
  .cost-banner{padding:10px 12px;font-size:13px}
}

/* ---------- Appended: Listings toolbar, Compact + Table views, Views buttons, tips chips, outcome UI ---------- */
/* Toolbar: status tabs left; Sort select, asc/desc toggle and the Cards/Compact/Table switcher right. Wraps on phone. */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;flex-wrap:wrap}
.toolbar .tb-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.sortctl{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--color-muted);white-space:nowrap}
.sortctl select{height:36px;width:auto;padding:0 32px 0 12px;font-size:13px;font-weight:600;border-radius:var(--radius-inner);background-position:right 10px center;color:var(--color-text)}
.ibtn.sq.order{font-size:16px;font-weight:700;line-height:1}
.view-seg button{padding:0 12px}
/* Every Views number opens the stats modal */
.vbtn{font:inherit;font-weight:700;color:var(--color-accent);text-decoration:underline dotted;text-underline-offset:3px;border-radius:6px;padding:0 4px;margin:0 -4px;line-height:1.3;transition:background var(--transition)}
.vbtn:hover{background:var(--color-accent-soft)}
/* Tips chip → AI Assistant */
.chip.tips{cursor:pointer;transition:background var(--transition)}
a.chip.tips:hover{text-decoration:none;background:#fde68a}
.tipslot:empty{display:none}
.lc .ft .tipslot{flex:none;display:inline-flex}
.lc .ft .tipslot .chip{height:36px;padding:0 10px}
/* Toast with one action (Undo) */
.toast .tbtn{margin-left:12px;color:#93c5fd;font-weight:700;text-decoration:underline;text-underline-offset:3px;font:inherit;font-weight:700}
.toast .tbtn:hover{color:#bfdbfe}
/* Confirm modal */
.modal.cfm h2{font-size:18px}
.modal.cfm p{color:var(--color-muted);line-height:1.5}
.modal.cfm p b{color:var(--color-text);font-weight:600}

/* Compact view: one line per listing (56 px thumb · title · status · price · paid/profit · views · msgs · tips · ⋯), 12–14 px */
.lrows{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.lr{display:flex;align-items:center;gap:12px;padding:6px 12px;min-height:68px;border-bottom:1px solid var(--color-surface-3);font-size:13px;min-width:0}
.lr:first-child{border-radius:var(--radius-card) var(--radius-card) 0 0}
.lr:last-child{border-bottom:0;border-radius:0 0 var(--radius-card) var(--radius-card)}
.lr:hover{background:#f8fafc}
.lr .th,.ltbl .th{position:relative;flex:none;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface-2);color:var(--color-muted);display:grid;place-items:center}
.lr .th{width:56px;height:56px}
.lr .th img,.ltbl .th img{width:100%;height:100%;object-fit:cover;display:block}
.lr .th .ic{width:24px;height:24px;stroke-width:1.25}
.lr .th .fallback,.ltbl .th .fallback{display:grid;place-items:center;width:100%;height:100%}
a.th:hover{text-decoration:none}
.lr .t{flex:1 1 180px;min-width:0}
.lr .ttl{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text)}
a.ttl:hover{text-decoration:none;color:var(--color-accent)}
.lr .sub{font-size:12px;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;display:flex;align-items:center;gap:6px}
.lr .sub .chip{height:18px;font-size:11px;padding:0 7px}
.lr .r2{display:contents}
.lr>.r2>.chip{flex:none;min-width:64px;justify-content:center}
.lr .p{flex:none;min-width:64px;display:flex;justify-content:flex-end;align-items:center;gap:6px;font-size:14px;font-weight:700;flex-wrap:wrap}
.lr .p .pbtn,.ltbl .p .pbtn{font:inherit;font-weight:700;border-radius:6px;padding:0 4px;line-height:28px;transition:background var(--transition)}
.lr .p .pbtn:hover,.ltbl .p .pbtn:hover{background:var(--color-surface-2)}
.lr .p .was,.ltbl .p .was{color:var(--color-muted);font-weight:500;font-size:12px}
.lr .mrow{flex:0 1 auto;min-width:168px;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;color:var(--color-muted);font-size:12px}
.lr .mrow b,.ltbl .mrow b,.ltbl .mfacts b{color:var(--color-text);font-weight:600}
.lr .cnt{flex:none;min-width:52px;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.lr .cnt .l{font-size:11px;color:var(--color-muted);font-weight:500}
.lr .cnt .n{font-size:14px;font-weight:700;display:flex;align-items:baseline;gap:4px}
.lr .cnt .n i,.ltbl .stat i{font-style:normal;font-size:11px;font-weight:600;color:var(--color-positive-text)}
.lr .cnt .n i.neg,.ltbl .stat i.neg{color:var(--color-negative-text)}
.lr .cnt .n i.flat,.ltbl .stat i.flat{color:var(--color-muted);font-weight:500}
.lr .na,.ltbl .na{color:var(--color-muted);font-weight:500}
.lr .tipslot{flex:none}
.lr .more{flex:none}
.lr .more>.menu{bottom:auto;top:calc(100% + 6px)}
.lr.skl .th{background:var(--color-surface-3)}
/* Money editors and links inside compact rows and table cells (same look as the cards', 32 px tall) */
.lr .medit,.ltbl .medit{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.lr .medit label,.ltbl .medit label{display:inline-flex;align-items:center;gap:6px;cursor:text}
.lr .medit .lbl,.ltbl .medit .lbl{font-size:12px;font-weight:500;color:var(--color-muted);white-space:nowrap}
.lr .medit .money,.ltbl .medit .money{flex:none;width:88px}
.lr .medit .money::before,.ltbl .medit .money::before{left:9px;font-size:13px}
.lr .medit input,.ltbl .medit input{height:32px;padding:0 8px 0 21px;font-size:13px;font-weight:600;border-radius:var(--radius-sm);-moz-appearance:textfield}
.lr .medit input::-webkit-outer-spin-button,.lr .medit input::-webkit-inner-spin-button,.ltbl .medit input::-webkit-outer-spin-button,.ltbl .medit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lr .medit input::placeholder,.ltbl .medit input::placeholder{color:var(--color-muted);font-weight:500}
.lr .medit input[type=date],.ltbl .medit input[type=date]{width:140px;padding:0 8px;font-weight:500;font-size:12px}
.lr .medit .ibtn.sq,.ltbl .medit .ibtn.sq,.lr .pedit .ibtn.sq,.ltbl .pedit .ibtn.sq{width:32px;height:32px}
.lr .mlink,.ltbl .mlink{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 4px;margin:0 -4px;border-radius:var(--radius-sm);font:inherit;font-size:12px;color:var(--color-muted);text-decoration:underline dotted;text-underline-offset:3px;white-space:nowrap;transition:background var(--transition),color var(--transition)}
.lr .mlink:hover,.ltbl .mlink:hover{background:var(--color-surface-2);color:var(--color-text)}
.lr .mlink.add,.ltbl .mlink.add{color:var(--color-accent);font-weight:600}
.lr .profit,.ltbl .profit,.lr .expect,.ltbl .expect{font-weight:600;white-space:nowrap}
.lr .profit.pos,.lr .profit.pos b,.ltbl .profit.pos,.ltbl .profit.pos b,.lr .expect b.pos,.ltbl .expect b.pos{color:var(--color-positive-text)}
.lr .profit.neg,.lr .profit.neg b,.ltbl .profit.neg,.ltbl .profit.neg b,.lr .expect b.neg,.ltbl .expect b.neg{color:var(--color-negative-text)}
.lr .est,.ltbl .est{font-style:normal;font-size:10px;font-weight:600;line-height:1;padding:2px 5px;border-radius:var(--radius-pill);background:var(--pastel-amber);color:var(--pastel-amber-text)}
.lr .addpaid,.ltbl .addpaid{display:inline-flex;align-items:center;min-height:28px}
.lr .addpaid .chip,.ltbl .addpaid .chip{cursor:pointer}
.lr .pedit,.ltbl .pedit{width:auto;display:inline-flex}
.lr .pedit .money,.ltbl .pedit .money{width:88px;flex:none}
.lr .pedit input,.ltbl .pedit input{height:32px;font-size:14px;padding-left:22px}

/* Table view: sticky header inside its own scrolling wrap; the page never scrolls sideways */
.ltw-host{min-width:0;max-width:100%}
.ltw{max-width:100%;min-width:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:auto;max-height:calc(100vh - 220px);min-height:240px}
.ltbl{min-width:1180px;font-size:13px;border-collapse:separate;border-spacing:0}
.ltbl thead th{position:sticky;top:0;z-index:2;background:var(--color-surface);border-bottom:0;box-shadow:inset 0 -1px 0 var(--color-border);padding:10px 10px;text-align:left}
.ltbl thead th.num{text-align:right}
.ltbl th button{font:inherit;font-size:12px;font-weight:600;color:var(--color-muted);display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:2px 4px;margin:-2px -4px;white-space:nowrap;transition:background var(--transition),color var(--transition)}
.ltbl th button:hover{background:var(--color-surface-2);color:var(--color-text)}
.ltbl th[aria-sort] button{color:var(--color-accent)}
.ltbl th .arr{font-size:11px;color:var(--color-muted);opacity:.6}
.ltbl th .arr.on{color:var(--color-accent);opacity:1}
.ltbl td{padding:8px 10px;vertical-align:middle;height:56px;border-bottom:1px solid var(--color-surface-3)}
.ltbl tbody tr:last-child td{border-bottom:0}
.ltbl tbody tr:hover{background:#f8fafc}
.ltbl .th{width:40px;height:40px}
.ltbl .th .ic{width:18px;height:18px}
.ltbl td.ttl{max-width:320px;min-width:200px}
.ltbl .ttl a,.ltbl .ttl .nm{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text);font-size:13px}
.ltbl .ttl a:hover{text-decoration:none;color:var(--color-accent)}
.ltbl .ttl .sub{font-size:11px;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ltbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ltbl .p{display:inline-flex;align-items:center;gap:6px;font-weight:700;justify-content:flex-end;flex-wrap:wrap}
.ltbl .p .myp{font-size:11px}
.ltbl .mrow{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ltbl .mfacts{display:inline-flex;flex-direction:column;align-items:flex-end;gap:0;line-height:1.3}
.ltbl .mfacts .mlink{min-height:22px}
.ltbl td.act{width:52px;padding-right:12px}
.ltbl .more>.menu{bottom:auto;top:calc(100% + 6px)}
.ltbl .chip{vertical-align:middle}
.ltbl .tipslot .chip{height:22px}
.ltbl td.w{white-space:nowrap}

/* Phone: compact rows wrap into two lines (thumb · title · ⋯ / chip · price · money · counts) */
@media (max-width:640px){
  .toolbar .tb-r{margin-left:0;width:100%;justify-content:space-between}
  .sortctl{flex:1 1 auto}
  .sortctl select{flex:1 1 auto;min-width:0}
  .view-seg button{padding:0 10px;font-size:12px}
  .lr{display:grid;grid-template-columns:auto 56px minmax(0,1fr) 36px;grid-template-areas:"sel th t more" "r2 r2 r2 r2";align-items:center;gap:8px 10px;padding:10px 12px}
  .lr .selbox{grid-area:sel}
  .lr .th{grid-area:th}
  .lr .t{grid-area:t;min-width:0}
  .lr .more{grid-area:more;justify-self:end}
  .lr .r2{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0;grid-area:r2}
  .lr .r2 .mrow{flex:1 1 100%;order:9}
  .lr>.r2>.chip{min-width:0}
  .lr .p{min-width:0;justify-content:flex-start}
  .lr .mrow{min-width:0}
  .lr .cnt{flex-direction:row;align-items:baseline;gap:4px;min-width:0}
  .lr .cnt .l{font-size:11px}
  /* contain:paint keeps the last column's paint overflow inside the scroller: without it the
     document itself is 1479px wide at 390px and the page pans sideways into empty space.
     It also makes .ltw the containing block for position:fixed, so the row ⋯ menu must not be
     placed with viewport coords here — it falls back to the absolute placement below. */
  .ltw{max-height:none;border-radius:var(--radius-inner);contain:paint}
  .ltw .more>.menu{position:absolute!important;left:auto!important;right:0!important;top:calc(100% + 6px)!important;bottom:auto!important}
  .ltw tbody tr:nth-last-child(-n+2) .more>.menu{top:auto!important;bottom:calc(100% + 6px)!important}
  .ltbl thead th{position:static}
  .ltbl th.w,.ltbl td.w{display:none}
  .ltbl{min-width:720px}
}
/* Compact sub-line: chips first (never clipped), then the text, which truncates */
.lr .sub .chip{flex:none}
.lr .sub .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Phone: six status tabs no longer fit in 390 px — the segment scrolls sideways under its own mask (docs/12 S6 pattern) */
@media (max-width:640px){
  /* the ⋯ menu is an action sheet on phones (placeFixed) — above the selection bar */
  .more>.menu{max-width:calc(100vw - 16px);max-height:70dvh;overflow:auto;z-index:60;border-radius:14px}
  .more>.menu button,.more>.menu a{min-height:44px}
  .pstrip .pact{width:30px;height:30px}
  .pstrip{padding-bottom:10px}
  /* while searching, the bar is the search field: brand, pill and bell step aside */
  body.search-open .top .brand,body.search-open .jobpill,body.search-open .top>.ibtn[aria-label="Alerts"]{display:none}
  body.search-open .top .search{flex:1 1 auto;width:auto;height:40px;padding:0 14px;justify-content:flex-start;border-radius:var(--radius-pill)}
  body.search-open .top .search input{width:100%;opacity:1}
  .toolbar #filter.seg{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .toolbar #filter.seg::-webkit-scrollbar{display:none}
  .toolbar #filter.seg button{flex:none;white-space:nowrap}
}

/* ---------- Appended: OfferUp channel — card action, state chips, post dialog ---------- */
/* OfferUp is marked by one small orange dot on the neutral chip/ghost styles above: no
   logo, no brand-coloured surface, so the card keeps the product's own palette. */
.oudot{width:8px;height:8px;border-radius:50%;background:#f7562a;flex:none;box-shadow:0 0 0 2px rgba(247,86,42,.18)}
/* The OfferUp mark replaces the words "on OfferUp" in buttons and chips so the
   action row fits on one line. It is a filled icon: undo .ic's stroke rules. */
.oumark{width:16px;height:16px;flex:none;fill:initial;stroke:none}
.ou-chip .oumark{width:15px;height:15px}
.ou-btn .lb,.ou-chip .lb{white-space:nowrap}
.ouslot{display:inline-flex;align-items:center;min-width:0;max-width:100%}
.ouslot:empty{display:none}
.ou-chip{max-width:100%;gap:6px}
.ou-chip .lb{overflow:hidden;text-overflow:ellipsis}
a.ou-chip:hover{text-decoration:none;filter:brightness(.97)}
button.ou-chip{cursor:pointer}
.ou-btn{gap:6px}
.ou-btn .lb{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Card footer: Boost stretches, the OfferUp action keeps its label intact next to it.
   Four cards to a row leave ~197px for Boost + OfferUp + tips + ⋯, which is ~60px short,
   so the footer wraps instead of ellipsizing the labels: Boost and OfferUp share the first
   line, anything left over drops to a second one with ⋯ still at the right edge. */
/* One line, always: the action row is Boost (icon), the OfferUp control, the
   tips count and ⋯. Wrapping it was what pushed ⋯ onto a second row. */
.lc .ft{flex-wrap:nowrap;align-items:center;gap:6px}
.lc .ft .icob{flex:0 0 auto;width:36px;padding:0;display:grid;place-items:center}
.lc .ft .icob .ic{width:17px;height:17px}
.lc .ft .tipslot .chip{padding:0 8px;font-size:12px;gap:4px;font-weight:700}
.lc .ft .tipslot .chip .ic{width:14px;height:14px}
.lc .ft>.more{margin-left:auto}
.lc .ft .ouslot{flex:0 0 auto;min-width:0}
.lc .ft .ou-btn{flex:1 1 auto;white-space:nowrap;padding:0 10px;min-width:0}
.lc .ft .ou-chip{height:36px;padding:0 9px;flex:1 1 auto;min-width:0;justify-content:center}
/* The plain OfferUp mark stays a round icon like f / N / M / cl: the rule above
   is for the chip's wider text states, and on a phone it stretched the icon
   into a full-width pill (2026-09-28). */
.lc .ft .ou-chip.icononly{flex:none;width:28px;height:28px;padding:0}
/* …and no round mark is squeezed narrower than it is tall (the f mark measured 18×28 on a phone). */
.lc .ft .chip.icononly{flex:none}
/* On a phone the OfferUp slot takes a whole line for its wide states (posting,
   failed, "link not captured"); holding only the round mark it must not grow,
   or it pushes the N / M / cl marks to the far right (2026-09-28). */
.lc .ft .ouslot:not(:has(.ou-stack, .ou-btn, .ou-chip.wrap)){flex:none;order:0}
.lr .ouslot{flex:none}
/* ⋯ menu entry: the dot sits in the icon column so the labels line up. The OfferUp
   entries sit in their own slot so the channel state can redraw them in place. */
.menu .oui{width:20px;display:grid;place-items:center;flex:none}
.menu .oumenu{display:block}

/* Card state: one control per card. A live listing shows a link chip, a running one a
   dead button with the job's own bar, a failed one the red chip plus "Try again". */
.ou-stack{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;max-width:100%}
/* Mid-post strip: one line that shrinks instead of wrapping over the counters. */
.ou-stack.posting{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}
.ou-stack.posting .oubar{flex:0 1 72px;min-width:28px}
.ou-stack.posting .ousmall{overflow:hidden;text-overflow:ellipsis}
/* "On OfferUp (link not captured)" is a long label and four cards to a row leave it
   ~130px: it wraps rather than ellipsizing away the very words that matter. */
.ou-chip.wrap{white-space:normal;height:auto;min-height:28px;line-height:1.3;padding:5px 10px;text-align:left}
.ou-chip.wrap .lb{overflow:visible;text-overflow:clip;white-space:normal}
.lc .ft .ou-chip.wrap{height:auto}
.ou-chip .ext{font-size:11px;opacity:.75;flex:none}
.ou-find{font:inherit;font-size:12px;font-weight:600;color:var(--color-accent);cursor:pointer}
.ou-find:hover{text-decoration:underline}
.oubar{display:block;width:72px;height:4px;border-radius:var(--radius-pill);background:var(--color-surface-3);overflow:hidden;flex:none}
.oubar-f{display:block;height:100%;background:var(--color-bar);border-radius:inherit;transition:width var(--transition)}
.oubar.ind .oubar-f{animation:oupulse 1.2s ease-in-out infinite}
@keyframes oupulse{0%,100%{opacity:.35}50%{opacity:1}}
.ousmall{font-size:11px;color:var(--color-muted);white-space:nowrap}

/* The OfferUp dialog (docs/17 §4.12). Sections top to bottom: what this listing is and
   whether the session is good, its current state, what a run would send, what the last
   run did, the running job, then the two buttons — or the inline confirm step. */
dialog.oud{border:0;margin:auto;padding:24px;width:calc(100% - 32px);max-width:560px;color:var(--color-text);gap:14px}
dialog.oud:not([open]){display:none} /* .modal is display:flex, which would beat the UA's closed-dialog rule */
dialog.oud::backdrop{background:var(--color-backdrop)}
dialog.oud h2{font-size:20px}
dialog.oud h3{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted)}
dialog.oud p{font-size:14px;line-height:1.5}
dialog.oud .oud-l{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--radius-inner);background:var(--color-surface-2)}
dialog.oud .oud-l .ttl{font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
dialog.oud .oud-l .facts{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-size:13px;color:var(--color-muted)}
dialog.oud .oud-l .facts b{color:var(--color-text);font-weight:700}
dialog.oud .oud-l .facts .ph{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Session line: the owner should never have to guess which account a run would use */
dialog.oud .sessl{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--color-muted);line-height:1.4;overflow-wrap:anywhere}
dialog.oud .sessl.ok{color:var(--color-positive-text)}
dialog.oud .sessl.warn{color:var(--pastel-amber-text)}
dialog.oud .sessl .ic{width:14px;height:14px;flex:none}
dialog.oud .sessl code{font-family:var(--font-mono);font-size:11px;background:var(--color-surface-3);border-radius:var(--radius-sm);padding:1px 5px}
dialog.oud .oud-sec{display:flex;flex-direction:column;gap:8px}

/* "What will be posted": one row per field the job will send. */
dialog.oud .oud-dl{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-inner);overflow:hidden}
dialog.oud .oud-dl .pr{display:flex;gap:12px;align-items:baseline;padding:8px 12px;font-size:13px;border-top:1px solid var(--color-border)}
dialog.oud .oud-dl .pr:first-child{border-top:0}
dialog.oud .oud-dl dt{flex:0 0 92px;color:var(--color-muted);font-weight:600}
dialog.oud .oud-dl dd{margin:0;min-width:0;font-weight:600;overflow-wrap:anywhere}
dialog.oud .oud-dl dd.muted{font-weight:400;color:var(--color-muted)}
/* The description can run long (src/seo.js appends prose); it scrolls inside its own row so it never pushes the two buttons off the sheet. */
dialog.oud .oud-dl dd.desc{font-weight:400;white-space:pre-wrap;line-height:1.45;max-height:7.5em;overflow:auto;overscroll-behavior:contain}

/* "Last run": outcome line, the error if there was one, and the screenshot thumbnail. */
dialog.oud .oud-last{display:flex;flex-direction:column;gap:8px;font-size:13px}
dialog.oud .oud-last .ln{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--color-muted)}
dialog.oud .oud-last .when{margin-left:auto;font-size:12px}
dialog.oud .oud-last .err,dialog.oud .oud-last .note{padding:8px 10px;border-radius:var(--radius-inner);font-size:12px;line-height:1.45;overflow-wrap:anywhere}
dialog.oud .oud-last .err{background:var(--pastel-red);color:var(--pastel-red-text)}
/* a run that worked can still leave a note; amber, not the red of a failure */
dialog.oud .oud-last .note{background:var(--pastel-amber);color:var(--pastel-amber-text)}
dialog.oud .oud-last .shot{display:block;border:1px solid var(--color-border);border-radius:var(--radius-inner);overflow:hidden;background:var(--color-surface-2)}
dialog.oud .oud-last .shot:hover{border-color:var(--color-accent)}
/* a fixed height, so the thumbnail loading does not shift everything under it */
dialog.oud .oud-last .shot img{display:block;width:100%;height:180px;object-fit:cover;object-position:top;background:var(--color-surface-3)}
dialog.oud .oud-last .shot .cap{display:block;padding:6px 10px;font-size:11px;color:var(--color-muted)}

dialog.oud .lnkb{font:inherit;font-size:13px;font-weight:600;color:var(--color-accent);cursor:pointer;text-align:left}
dialog.oud .lnkb:hover{text-decoration:underline}
dialog.oud .lnkb:disabled{color:var(--color-muted);text-decoration:none}
dialog.oud .oud-msg{font-size:13px;line-height:1.5;padding:10px 12px;border-radius:var(--radius-inner);background:var(--color-surface-2);overflow-wrap:anywhere}
dialog.oud .oud-msg.err{background:var(--pastel-red);color:var(--pastel-red-text);font-weight:600}
dialog.oud .oud-msg.ok{background:var(--pastel-green);color:var(--pastel-green-text);font-weight:600}
dialog.oud .oud-msg .hint{display:block;margin-top:4px;font-weight:400;color:inherit;opacity:.85}
dialog.oud .oud-state{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--color-muted)}
/* a state note is a whole sentence: let it wrap instead of running off the sheet */
dialog.oud .oud-state .chip{max-width:100%;height:auto;min-height:22px;padding:4px 10px;white-space:normal;line-height:1.35;text-align:left}
dialog.oud .oud-why{font-size:12px;color:var(--color-muted);line-height:1.45}
dialog.oud .jobpanel{background:var(--color-surface-2);border-radius:var(--radius-inner);padding:12px 14px}

/* The confirm step lives inside the dialog: the publish click opens this, and only
   "Yes, publish" sends the request. It replaces the two buttons while it is up. */
dialog.oud .oud-confirm{display:flex;flex-direction:column;gap:12px;background:var(--pastel-amber);color:var(--pastel-amber-text)}
dialog.oud .oud-confirm p{margin:0;font-size:13px;line-height:1.5}
dialog.oud .oud-confirm .acts{justify-content:flex-end}
dialog.oud .oud-confirm .btn.sec{background:transparent;border-color:currentColor;color:inherit}

/* A tall screenshot or a long error can push the dialog past the screen. The two
   buttons — and the confirm step that replaces them — stay pinned to the bottom
   edge instead, so the decision is never hidden below a scroll. */
dialog.oud .oud-foot{position:sticky;bottom:-24px;z-index:1;display:flex;flex-direction:column;gap:10px;
  margin:auto -24px -24px;padding:12px 24px 24px;background:var(--color-surface);border-top:1px solid var(--color-border)}
dialog.oud .oud-confirm{padding:12px 14px;border-radius:var(--radius-inner)}

/* Phone: the dialog becomes a full-screen sheet; every button is at least 36px tall */
@media (max-width:640px){
  dialog.oud{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;border-radius:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));gap:14px}
  dialog.oud h2{font-size:18px}
  dialog.oud .oud-foot{bottom:calc(-16px - env(safe-area-inset-bottom));margin:auto -16px calc(-16px - env(safe-area-inset-bottom));padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
  dialog.oud .acts{flex-direction:column-reverse;align-items:stretch}
  dialog.oud .acts .btn{width:100%;height:44px}
  dialog.oud .oud-why{text-align:center}
  dialog.oud .oud-dl dt{flex-basis:80px}
  dialog.oud .oud-last .when{margin-left:0}
  .lc .ft .ou-btn{padding:0 8px}
  /* A card is one column wide here: the OfferUp control gets its own line rather
     than squeezing "On OfferUp (link not captured)" into a shared row. */
  .lc .ft .ouslot{flex:1 1 100%}
  .ou-stack{width:100%}
}

/* ---------- Appended: multi-select + the OfferUp batch dialog ----------
   A batch publish puts up to 25 listings live on a public marketplace at once,
   so nothing here may be ambiguous: the checkbox is its own 36px target that
   opens no editor, the bar names the count in words, and the only control that
   can publish says so and then asks again. */

/* The checkbox. 20px box inside a 36px hit area, wherever it sits. */
.selbox{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;cursor:pointer;border-radius:var(--radius-sm);margin:0}
.selbox input{width:20px;height:20px;margin:0;cursor:pointer;accent-color:var(--color-accent);flex:none}
.selbox:hover{background:var(--color-surface-2)}

/* Cards: top-left over the photo, on its own layer above the photo link. */
.lc{position:relative}
.lc .selbox{position:absolute;top:18px;left:18px;z-index:3;background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(16,24,40,.25)}
.lc .selbox:hover{background:#fff}
/* The status chip sits at the same corner: move it clear of the checkbox — but
   only on a card that HAS one. The dashboard draws the same .lc cards without
   selection, and there the chip must stay where it has always been. */
.lc:has(>.selbox) .ph .chip{left:56px}
.lc.sel{box-shadow:var(--shadow-card),0 0 0 2px var(--color-accent)}

/* Compact rows and the table: a leading cell, so nothing else shifts. */
.lr .selbox{margin-left:-6px}
.lr.sel{background:var(--color-accent-soft)}
.ltbl th.selcol,.ltbl td.selcol{width:44px;padding-left:8px;padding-right:0}
.ltbl tr.sel td{background:var(--color-accent-soft)}

/* Toolbar "select all": a checkbox that covers the visible tab only. */
.selall{display:inline-flex;align-items:center;gap:6px;height:36px;margin-right:auto;padding:0 10px 0 4px;border-radius:var(--radius-inner);background:var(--color-surface-2);font-size:13px;font-weight:600;color:var(--color-text);cursor:pointer;white-space:nowrap}
.selall:hover{background:var(--color-surface-3)}
.selall .selbox{background:transparent}
.selall .selbox:hover{background:transparent}

/* The bar. Sticky at the bottom on every width; the grid is padded while it is
   open so it can never cover the last card. */
.selbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -6px 24px rgba(16,24,40,.12);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.selbar .in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.selbar .n{font-size:14px;font-weight:700;white-space:nowrap}
.selbar .n .sub{font-weight:500;color:var(--color-muted)}
.selbar .sp{flex:1 1 0;min-width:0}
.selbar .btn{flex:none}
body.selbar-on .main{padding-bottom:calc(var(--selbar-h,92px) + 12px)}
/* A toast sits above the selection bar, never on its buttons (2026-09-27,
   review: "Selected 30" covered Update and Post for six seconds on a phone). */
body.selbar-on .toast{bottom:calc(var(--selbar-h,92px) + 12px)}

/* The bar spans the whole window, sidebar column included, so shorten the
   sticky sidebar by the bar height too — otherwise its bottom card (and the
   help link in it) sits under the bar with no way to scroll to it. Only at
   the widths where .side is that full-height column; it goes static at 900px. */
@media (min-width:901px){body.selbar-on .side{height:calc(100vh - 32px - var(--selbar-h,80px))}}

/* A batch running while the dialog is closed keeps its own line in the bar. */
.selbar.running .in{gap:8px}
.selbar .runl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;min-width:0}
.selbar .runl .jt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- The batch dialog ---------- */
#oub-dialog{border:0;margin:auto;padding:24px;width:calc(100% - 32px);max-width:600px;color:var(--color-text);gap:14px}
#oub-dialog:not([open]){display:none}
#oub-dialog::backdrop{background:var(--color-backdrop)}
#oub-dialog h2{font-size:20px}
#oub-dialog h3{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted)}
#oub-dialog p{font-size:14px;line-height:1.5}
#oub-dialog .oub-sec{display:flex;flex-direction:column;gap:8px}
#oub-dialog .oub-sum{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--radius-inner);background:var(--color-surface-2)}
#oub-dialog .oub-sum .hd{font-size:15px;font-weight:700;line-height:1.35}
#oub-dialog .oub-sum .sub{font-size:13px;color:#4b5563;line-height:1.45}
#oub-dialog .oub-note{font-size:13px;line-height:1.5;padding:10px 12px;border-radius:var(--radius-inner);background:var(--pastel-amber);color:var(--pastel-amber-text);font-weight:600}
#oub-dialog .oub-note.plain{background:var(--color-surface-2);color:var(--color-muted);font-weight:500}
#oub-dialog .oub-eta{font-size:13px;color:var(--color-muted);line-height:1.45}
#oub-dialog details.oub-skip{border:1px solid var(--color-border);border-radius:var(--radius-inner);padding:8px 12px}
#oub-dialog details.oub-skip>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--color-text);list-style:none}
#oub-dialog details.oub-skip>summary::-webkit-details-marker{display:none}
#oub-dialog details.oub-skip>summary::after{content:" — show";color:var(--color-muted);font-weight:500}
#oub-dialog details.oub-skip[open]>summary::after{content:" — hide"}
#oub-dialog .oub-list{display:flex;flex-direction:column;margin-top:8px;max-height:220px;overflow:auto;overscroll-behavior:contain}
#oub-dialog .oub-list .it{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--color-surface-3);font-size:13px}
#oub-dialog .oub-list .it:first-child{border-top:0}
#oub-dialog .oub-list .it .nm{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
#oub-dialog .oub-list .it .why{flex:none;color:var(--color-muted);font-size:12px;text-align:right}
#oub-dialog .oub-list .it .why.ok{color:var(--color-positive-text);font-weight:600}
#oub-dialog .oub-list .it .why.bad{color:var(--color-negative-text);font-weight:600}
#oub-dialog .oub-msg{font-size:13px;line-height:1.5;padding:10px 12px;border-radius:var(--radius-inner);background:var(--color-surface-2);overflow-wrap:anywhere}
#oub-dialog .oub-msg.err{background:var(--pastel-red);color:var(--pastel-red-text);font-weight:600}
#oub-dialog .oub-msg.ok{background:var(--pastel-green);color:var(--pastel-green-text);font-weight:600}
#oub-dialog .oub-msg .hint{display:block;margin-top:4px;font-weight:400;opacity:.85}
#oub-dialog .jobpanel{background:var(--color-surface-2);border-radius:var(--radius-inner);padding:12px 14px}
#oub-dialog .oub-foot{position:sticky;bottom:-24px;z-index:1;display:flex;flex-direction:column;gap:10px;
  margin:auto -24px -24px;padding:12px 24px 24px;background:var(--color-surface);border-top:1px solid var(--color-border)}
#oub-dialog .oub-why{font-size:12px;color:var(--color-muted);line-height:1.45}
#oub-dialog .oub-confirm{display:flex;flex-direction:column;gap:12px;padding:12px 14px;border-radius:var(--radius-inner);background:var(--pastel-amber);color:var(--pastel-amber-text)}
#oub-dialog .oub-confirm p{margin:0;font-size:13px;line-height:1.5}
#oub-dialog .oub-confirm .acts{justify-content:flex-end}
#oub-dialog .oub-confirm .btn.sec{background:transparent;border-color:currentColor;color:inherit}
#oub-dialog .oub-done{display:flex;flex-wrap:wrap;gap:6px 8px}

/* Phone: full-width sheets, 36px targets, no sideways scroll at 390px */
@media (max-width:640px){
  #oub-dialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;border-radius:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));gap:14px}
  #oub-dialog h2{font-size:18px}
  #oub-dialog .oub-foot{bottom:calc(-16px - env(safe-area-inset-bottom));margin:auto -16px calc(-16px - env(safe-area-inset-bottom));padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
  #oub-dialog .acts{flex-direction:column-reverse;align-items:stretch}
  #oub-dialog .acts .btn{width:100%;height:44px}
  #oub-dialog .oub-list .it{flex-direction:column;gap:2px}
  #oub-dialog .oub-list .it .why{text-align:left}
  .lc .selbox{top:16px;left:16px}
  .lc:has(>.selbox) .ph .chip{left:54px}
}

/* dashboard P&L dialog — one short line per sold item */
.card.kpi.clickable{cursor:pointer}
.card.kpi.clickable:hover{box-shadow:0 0 0 2px var(--color-accent-soft,#dbe9ff)}
.card.kpi.clickable:focus-visible{outline:2px solid var(--color-accent,#1f6feb);outline-offset:2px}
dialog.modal.pnl{width:min(640px,94vw)}
.pnl-wrap{max-height:min(56vh,480px);overflow:auto;border:1px solid var(--color-border);border-radius:8px}
.pnl-table{width:100%;border-collapse:collapse;font-size:13px}
.pnl-table th{position:sticky;top:0;background:var(--color-surface-2);text-align:left;font-size:11px;
  text-transform:uppercase;letter-spacing:.03em;color:var(--color-muted);padding:7px 10px}
.pnl-table td{padding:6px 10px;border-top:1px solid var(--color-border)}
.pnl-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pnl-table td.ttl{max-width:0;width:60%}
.pnl-table .t1{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl-table .d{font-size:11px;color:var(--color-muted)}
.pnl-table .neg{color:var(--color-danger,#b3261e)}
.pnl-table .na{color:var(--color-muted)}
.pnl-table tfoot td{border-top:2px solid var(--color-border);font-weight:700;background:var(--color-surface-2)}
.pnl-note{font-size:12px;color:var(--color-muted);margin:8px 2px 0}

/* ---------- Phone dialogs: the channel and batch dialogs become bottom sheets ---------- */
@media (max-width:640px){
  dialog.oud,#oub-dialog{width:100vw;max-width:none;margin:auto 0 0;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:92dvh;overflow:auto}
  dialog.oud h2,#oub-dialog h2{font-size:18px;padding-right:36px}
  /* button rows inside the sheets wrap instead of overflowing */
  dialog.oud .acts,#oub-dialog .acts{flex-wrap:wrap;gap:8px}
  dialog.oud .acts .btn,#oub-dialog .acts .btn{flex:1 1 auto;justify-content:center}
}


/* Touch screens have no hover: the photo arrows, counter and the tile x are
   always visible there, sized for thumbs, above the PICK UP ribbon (z 2). */
@media (hover:none){
  .lc .ph .pnav,.lc .ph .pcnt{opacity:1}
  .lc .ph .pnav{width:34px;height:34px;z-index:3}
}

/* Photo manager (listings: the camera icon / ⋯ → Photos) and the
   "photos from a product link" prompt. */
dialog.pmgr{max-width:760px}
.pmgr h2,.plink h2{font-size:18px}
.pmgr .pm-sub{color:var(--color-muted);font-size:13px;margin-top:-12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmgr .pm-hint{font-size:12.5px;color:var(--color-muted);margin-top:-6px}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.pm-tile{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface-2);border:1px solid var(--color-border);cursor:grab;user-select:none;-webkit-user-select:none}
.pm-tile img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pm-tile.cover{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.pm-tile.dragging{opacity:.35}
.pm-tile.over{outline:2px dashed var(--color-accent);outline-offset:2px}
.pm-cov,.pm-n{position:absolute;left:6px;top:6px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;pointer-events:none}
.pm-cov{background:var(--color-accent)}
.pm-x{position:absolute;right:6px;top:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.62);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center}
.pm-x:hover{background:var(--color-negative)}
.pm-mv{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:6px;padding:8px 6px 6px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.pm-mv button{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:#111;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center}
.pm-mv button:disabled{opacity:.35;cursor:default}
.pm-mv button:not(:disabled):hover{background:var(--color-accent);color:#fff}
@media (hover:hover){.pm-mv,.pm-x{opacity:0;transition:opacity .15s}.pm-tile:hover .pm-mv,.pm-tile:hover .pm-x,.pm-tile:focus-within .pm-mv,.pm-tile:focus-within .pm-x{opacity:1}}
button.pm-tile.pm-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--color-accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;border-style:dashed;background:var(--color-surface)}
button.pm-tile.pm-add:hover{background:var(--color-accent-soft)}
.pm-add svg{width:24px;height:24px}
.pm-src{display:flex;flex-wrap:wrap;gap:8px}
.pm-src .btn{display:inline-flex;align-items:center;gap:6px}
.pm-src .btn svg{width:15px;height:15px}
.pm-jobhd{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;margin-bottom:6px}
.plink .pl-note{background:var(--color-warn-soft,#fdf3dc);color:var(--color-warn-ink,#8a6116);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px}
.plink .pl-sub{margin-top:-4px}
.plink .pl-form{display:flex;flex-direction:column;gap:10px}
.plink .pl-err{color:var(--color-negative-text,var(--color-negative));font-size:13px}
.plink .pl-help{font-size:12.5px;color:var(--color-muted);line-height:1.5}
.plink .pl-help a{color:var(--color-accent);font-weight:600}

/* Mercari (assist mode): the mark, the card chip and the "Sell on Mercari"
   dialog. Purple rounded square, same footprint as Nextdoor's green one. */
.mcmark{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:5px;background:#5356ee;color:#fff;font-size:11px;font-weight:800;line-height:1;flex:none}
.more .menu .mcmark{margin-right:2px}
.chip.icononly .mcmark{width:18px;height:18px;font-size:12px}
dialog.mcd{max-width:720px}
.mcd h2{font-size:18px;display:flex;align-items:center;gap:8px}
.mcd h2 .mcmark{width:22px;height:22px;font-size:14px;border-radius:6px}
.mcd .mc-sub{color:var(--color-muted);font-size:13px;margin-top:-12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcd .mc-live{background:var(--color-success-soft,#e8f7ee);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px}
.mcd .mc-live a{color:var(--color-accent);font-weight:600}
.mcd .mc-block{background:#fdecea;color:var(--color-negative-text,#b42318);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;line-height:1.5}
.mcd .mc-warn{background:var(--color-warn-soft,#fdf3dc);color:var(--color-warn-ink,#8a6116);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;line-height:1.5}
.mcd .mc-block ul,.mcd .mc-warn ul{margin:4px 0 0;padding-left:18px}
.mcd .mc-step{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--color-border);padding-top:14px}
.mcd .mc-step>h3{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.mcd .mc-step>h3 .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--color-surface-2);font-size:12px}
.mcd .mc-note{font-size:12.5px;color:var(--color-muted);line-height:1.5}
.mcd .mc-field{display:grid;grid-template-columns:110px 1fr auto;gap:8px 10px;align-items:start}
.mcd .mc-field .k{font-size:12.5px;color:var(--color-muted);padding-top:7px}
.mcd .mc-field .k small{display:block;font-size:11px}
.mcd .mc-field .v{font-size:14px;line-height:1.45;padding:6px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);word-break:break-word;min-height:34px}
.mcd .mc-field .v.desc{white-space:pre-wrap;max-height:220px;overflow:auto;font-size:13px}
.mcd .mc-field .v small{color:var(--color-muted)}
.mcd .mc-copy{height:34px;min-width:72px}
.mcd .mc-photos{display:flex;flex-wrap:wrap;gap:8px}
.mcd .mc-ph{position:relative;width:84px;height:84px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface-2);display:block}
.mcd .mc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.mcd .mc-ph .o{position:absolute;left:4px;top:4px;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff}
.mcd .mc-ph.stock{outline:2px solid #e8a317;outline-offset:-2px}
.mcd .mc-ph.stock::after{content:'Not yours';position:absolute;left:0;right:0;bottom:0;background:rgba(232,163,23,.92);color:#231a00;font-size:10px;font-weight:700;text-align:center;padding:1px 0}
.mcd .mc-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mcd .mc-row input[type=url]{flex:1 1 260px;height:40px}
.mcd .mc-err{color:var(--color-negative-text,var(--color-negative));font-size:13px}
@media (max-width:640px){.mcd .mc-field{grid-template-columns:1fr auto}.mcd .mc-field .k{grid-column:1 / -1;padding-top:0}}
.lc .ft .mcslot:empty{display:none}
.menu .mcmenu{display:block}
.menu .ndmenu{display:block}

/* Update a live listing in place (listings: ⋯ → Update on Facebook/OfferUp/
   Nextdoor, and the photo manager's "Put these photos on the live listings?"). */
.more .menu .fbmark,.cud .fbmark{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#1877f2;color:#fff;font-size:11px;font-weight:800;line-height:1;font-family:Georgia,serif;flex:none}
.more .menu .fbmark{margin-right:2px}
.cud .ndmark{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:5px;background:#8ed500;color:#1a2e05;font-size:11px;font-weight:800;line-height:1;flex:none}
dialog.cud{max-width:640px}
.cud h2{font-size:18px;display:flex;align-items:center;gap:8px}
.cud h2 .fbmark,.cud h2 .ndmark,.cud h2 .mcmark{width:22px;height:22px;font-size:14px}
.cud h2 .oumark{width:22px;height:22px}
.cud .cu-sub{color:var(--color-muted);font-size:13px;margin-top:-12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cud .cu-live{background:var(--color-success-soft,#e8f7ee);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px}
.cud a{color:var(--color-accent);font-weight:600}
.cud .cu-block{background:#fdecea;color:var(--color-negative-text,#b42318);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px}
.cud .cu-note{font-size:12.5px;color:var(--color-muted);line-height:1.5}
.cud .cu-note b{color:var(--color-text);font-weight:600}
.cud .cu-parts,.cud .cu-chs,.cud .cu-jobs{display:flex;flex-direction:column;gap:8px}
.cud .cu-jobs:empty{display:none}
.cud .cu-part{display:grid;grid-template-columns:20px 92px minmax(0,1fr);gap:2px 8px;align-items:start;font-size:14px;line-height:1.4;cursor:pointer}
.cud .cu-part input,.cud .cu-ch input{width:18px;height:18px;margin:1px 0 0}
.cud .cu-part .k,.cud .cu-ch .k{font-weight:600}
.cud .cu-part .v,.cud .cu-ch .v{color:var(--color-muted);font-size:13px;overflow-wrap:anywhere}
.cud .off{cursor:default}
.cud .off .k,.cud .off .v{opacity:.65}
.cud .cu-strip{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 4px 28px}
.cud .cu-strip:first-child,.cud .cu-note+.cu-strip{margin-left:0}
.cud .cu-ph{position:relative;width:60px;height:60px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface-2);flex:none}
.cud .cu-ph.cover{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.cud .cu-ph img{width:100%;height:100%;object-fit:cover;display:block}
.cud .cu-ph .o{position:absolute;left:3px;top:3px;font-size:10px;font-weight:700;padding:1px 5px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff}
.cud .cu-ph.cover .o{background:var(--color-accent)}
.cud .cu-ch{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:14px}
.cud .cu-ch label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.cud .cu-ch.off label{cursor:default}
.cud .cu-ch a{margin-left:auto;font-size:13px}
.cud .cu-ch.manual{align-items:flex-start;flex-wrap:nowrap}
.cud .cu-ch.manual .v b{color:var(--color-text)}
.cud .cu-run{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:10px 12px}
.cud .cu-run .pm-jobhd>span{display:inline-flex;align-items:center;gap:6px}
/* where the save is: "Saving on …" (Stop still works), then "Saved on … — waiting for it to confirm" */
.cud .cu-run .cu-stage{margin:-2px 0 6px;color:var(--color-text);font-weight:600}
.cud .cu-res{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5;border-radius:var(--radius-sm);padding:8px 12px;overflow-wrap:anywhere}
.cud .cu-res.ok{background:var(--color-success-soft,#e8f7ee)}
.cud .cu-res.bad{background:#fdecea;color:var(--color-negative-text,#b42318)}
.cud .cu-res>svg,.cud .cu-res>span.fbmark,.cud .cu-res>span.ndmark{margin-top:2px}
@media (max-width:640px){.cud .cu-part{grid-template-columns:20px minmax(0,1fr)}.cud .cu-part .v{grid-column:2}.cud .cu-strip{margin-left:0}}

/* ---------- Craigslist (2026-09-27, docs/20-craigslist.md) ----------
   The mark, the card chip, the ⋯ entries, the Craigslist dialog and the batch
   dialog. Craigslist's own purple, on a CIRCLE — Mercari's purple-blue mark is
   a rounded square, and the two sit side by side on a card, so shape and hue
   both tell them apart. */
:root{--cl-purple:#7b2a8f;--cl-ink:#ffffff}
.clmark{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--cl-purple);color:var(--cl-ink);font-size:9.5px;font-weight:800;letter-spacing:-.03em;line-height:1;flex:none;font-family:var(--font-sans)}
.more .menu .clmark{margin-right:2px}
.menu .clmenu{display:block}
.chip.icononly .clmark{width:18px;height:18px;font-size:10px}
.cl-chip{position:relative;cursor:pointer}
a.cl-chip:hover{text-decoration:none}
/* posting/queued: a ring turns around the mark (no ring when motion is reduced) */
.cl-chip.spin::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;border-top-color:var(--pastel-blue-text);border-right-color:var(--pastel-blue-text);animation:clspin 1s linear infinite}
@keyframes clspin{to{transform:rotate(360deg)}}
/* live, with the "a second copy may be up" warning: an amber dot on the chip */
.cl-chip.warn::after{content:'';position:absolute;right:-2px;top:-2px;width:10px;height:10px;border-radius:50%;background:var(--color-warning);border:2px solid var(--color-surface)}
@media (prefers-reduced-motion:reduce){.cl-chip.spin::after{animation:none;border-color:var(--pastel-blue-text)}}
.lc .ft .clslot:empty,.lr .clslot:empty{display:none}
.clslot{display:inline-flex;align-items:center;flex:none}
.ltbl .clslot{vertical-align:middle}

/* The Craigslist dialog: the Mercari dialog's layout (same widths, same blocks),
   plus the job box, the settings row and a pinned footer. */
dialog.cld,dialog.clb,dialog.chb{max-width:720px}
.cld>*,.clb>*,.chb>*{flex:none}
/* an empty job box must not add a gap of its own */
.cld [data-cl-jobbox]:empty,.clb [data-clb-jobbox]:empty,.chb [data-clb-jobbox]:empty{display:none}
.cld h2,.clb h2,.chb h2{font-size:18px;display:flex;align-items:center;gap:8px}
.cld h2 .clmark,.clb h2 .clmark,.chb h2 .clmark{width:22px;height:22px;font-size:12px}
.cld .cl-sub,.clb .cl-sub,.chb .cl-sub{color:var(--color-muted);font-size:13px;margin-top:-12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cld .cl-live,.cld .cl-block,.cld .cl-warn,.cld .cl-info,.cld .cl-tos,.clb .cl-block,.clb .cl-warn,.clb .cl-info,.clb .cl-tos,.chb .cl-block,.chb .cl-warn,.chb .cl-info,.chb .cl-tos{border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;line-height:1.5;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:8px}
.cld .cl-live{background:var(--color-success-soft,#e8f7ee)}
.cld .cl-block,.clb .cl-block,.chb .cl-block{background:#fdecea;color:var(--color-negative-text,#b42318)}
.cld .cl-warn,.clb .cl-warn,.cld .cl-tos,.clb .cl-tos,.chb .cl-warn,.chb .cl-tos{background:var(--color-warn-soft,#fdf3dc);color:var(--color-warn-ink,#8a6116)}
.cld .cl-info,.clb .cl-info,.chb .cl-info{background:var(--color-surface-2);color:var(--color-muted-ink)}
.cld .cl-live a,.cld .cl-info a,.clb .cl-info a,.cld .cl-sec a,.clb .cl-sec a,.chb .cl-info a,.chb .cl-sec a{color:var(--color-accent);font-weight:600}
.cld ul,.clb ul,.chb ul{margin:0;padding-left:18px}
.cld code,.clb code,.chb code{font-family:var(--font-mono);font-size:11.5px;background:rgba(0,0,0,.06);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.cld .cl-sec,.clb .cl-sec,.chb .cl-sec{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--color-border);padding-top:14px}
.cld .cl-sec>h3,.clb .cl-sec>h3,.chb .cl-sec>h3{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.cld .cl-note,.clb .cl-note,.chb .cl-note{font-size:12.5px;color:var(--color-muted);line-height:1.5}
.cld .cl-note b,.clb .cl-note b,.chb .cl-note b{color:var(--color-text);font-weight:600}
.cld .cl-field{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px 10px;align-items:start}
.cld .cl-field .k{font-size:12.5px;color:var(--color-muted);padding-top:7px}
.cld .cl-field .k small{display:block;font-size:11px}
.cld .cl-field .v{font-size:14px;line-height:1.45;padding:6px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);overflow-wrap:anywhere;min-height:34px;min-width:0}
.cld .cl-field .v small{color:var(--color-muted)}
.cld .cl-field .v.desc{white-space:pre-wrap;max-height:220px;overflow:auto;font-size:13px;overscroll-behavior:contain}
.cld .cl-field select{width:100%;min-width:0;height:36px;margin-top:6px}
.cld .cl-copy{height:34px;min-width:72px}
.cld .cl-photos{display:flex;flex-wrap:wrap;gap:8px}
.cld .cl-ph{position:relative;width:76px;height:76px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface-2);display:block;flex:none}
.cld .cl-ph.cover{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.cld .cl-ph img{width:100%;height:100%;object-fit:cover;display:block}
.cld .cl-ph .o{position:absolute;left:4px;top:4px;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff}
.cld .cl-ph.cover .o{background:var(--color-accent)}
.cld .cl-ph.stock{outline:2px solid #e8a317;outline-offset:-2px}
.cld .cl-ph.stock::after{content:'Not yours';position:absolute;left:0;right:0;bottom:0;background:rgba(232,163,23,.92);color:#231a00;font-size:10px;font-weight:700;text-align:center;padding:1px 0}
.cld .cl-row,.clb .cl-row,.chb .cl-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:0}
.cld .cl-row input[type=url]{flex:1 1 240px;min-width:0;height:40px}
.cld .cl-cap input,.clb .cl-cap input,.chb .cl-cap input{width:64px;height:36px;text-align:center}
.cld .cl-cap label,.clb .cl-cap label,.chb .cl-cap label{font-size:13px;font-weight:600}
.cld .cl-err,.clb .cl-err,.chb .cl-err{color:var(--color-negative-text,var(--color-negative));font-size:13px}
.cld .cl-ok,.clb .cl-ok,.chb .cl-ok{color:var(--color-positive-text);font-size:12.5px;font-weight:600}
.cld .cl-check,.clb .cl-check,.chb .cl-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;font-weight:600;cursor:pointer;color:inherit}
.cld .cl-check input,.clb .cl-check input,.chb .cl-check input{width:18px;height:18px;margin:1px 0 0;flex:none}
.cld .cl-run,.clb .cl-run,.chb .cl-run{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:10px 12px}
.cld .cl-run .pm-jobhd>span,.clb .cl-run .pm-jobhd>span,.chb .cl-run .pm-jobhd>span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.cld .cl-nostop,.clb .cl-nostop,.chb .cl-nostop{font-weight:600;color:var(--color-warn-ink,#8a6116);text-align:right}
/* 2026-09-27 review: this listing's "publish" inside a batch; the Jobs page's
   note where Stop would be; "Not on Craigslist" greyed out until 30 min after the click. */
.cld .cl-nostop-item{font-weight:600;color:var(--color-warn-ink,#8a6116);margin-top:6px}
.jp-nostop{font-weight:600;color:var(--color-warn-ink,#8a6116)}
.menu button:disabled:hover{background:transparent}
.menu .clmenu button small{margin-left:auto;padding-left:8px;font-size:11.5px;font-weight:500;color:var(--color-muted);white-space:nowrap}
.cld .cl-res,.clb .cl-res,.chb .cl-res{font-size:13px;line-height:1.5;border-radius:var(--radius-sm);padding:8px 12px;overflow-wrap:anywhere}
.cld .cl-res.ok,.clb .cl-res.ok,.chb .cl-res.ok{background:var(--color-success-soft,#e8f7ee)}
.cld .cl-res.bad,.clb .cl-res.bad,.chb .cl-res.bad{background:#fdecea;color:var(--color-negative-text,#b42318)}
.cld .cl-res a,.clb .cl-res a,.chb .cl-res a{color:var(--color-accent);font-weight:600}
.cld .cl-why,.clb .cl-why,.chb .cl-why{font-size:12px;color:var(--color-muted);line-height:1.45}
.cld .lnkb,.clb .lnkb,.chb .lnkb{font:inherit;font-size:13px;font-weight:600;color:var(--color-accent);cursor:pointer;text-align:left}
.cld .lnkb:hover,.clb .lnkb:hover,.chb .lnkb:hover{text-decoration:underline}
.cld .lnkb:disabled,.clb .lnkb:disabled,.chb .lnkb:disabled{color:var(--color-muted);text-decoration:none;cursor:default}
/* The decision stays pinned to the bottom edge however tall the dialog grows (the OfferUp dialog's rule). */
.cld .cl-foot,.clb .cl-foot,.chb .cl-foot{position:sticky;bottom:-24px;z-index:1;display:flex;flex-direction:column;gap:8px;margin:auto -24px -24px;padding:12px 24px 24px;background:var(--color-surface);border-top:1px solid var(--color-border)}
.clb .cl-seg,.chb .cl-seg{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:var(--color-surface-2);align-self:flex-start;flex-wrap:wrap}
.clb .cl-seg button,.chb .cl-seg button{height:32px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--color-muted)}
.clb .cl-seg button[aria-pressed=true],.chb .cl-seg button[aria-pressed=true]{background:var(--color-surface);color:var(--color-text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.clb .cl-items,.chb .cl-items{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.4}
.clb .cl-item,.chb .cl-item{display:flex;gap:8px;align-items:baseline;min-width:0}
.clb .cl-item .t,.chb .cl-item .t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.clb .cl-item .m,.chb .cl-item .m{flex:none;color:var(--color-muted);font-size:12px;white-space:nowrap}
.clb details>summary,.chb details>summary{cursor:pointer;font-size:13px;font-weight:600}
@media (max-width:640px){
  .cld .cl-field{grid-template-columns:minmax(0,1fr) auto}
  .cld .cl-field .k{grid-column:1 / -1;padding-top:0}
  .cld .cl-foot,.clb .cl-foot,.chb .cl-foot{bottom:calc(-16px - env(safe-area-inset-bottom));margin:auto -24px calc(-16px - env(safe-area-inset-bottom));padding:12px 24px calc(16px + env(safe-area-inset-bottom))}
  /* two short rows, not three 44px stripes: the sheet keeps room for what it says */
  .cld .cl-foot .acts,.clb .cl-foot .acts,.chb .cl-foot .acts{flex-wrap:wrap}
  .cld .cl-foot .acts .btn,.clb .cl-foot .acts .btn,.chb .cl-foot .acts .btn{flex:1 1 auto;height:42px;padding:0 14px}
  .clb .cl-item,.chb .cl-item{flex-wrap:wrap}
}


/* ---------- The selection bar as the main poster (2026-09-27) ----------
   [runs] N selected … [Update ●●●] [Post to …]×5 [Clear]. Desktop: one row
   that wraps; the buttons a little lower than the page's so six fit beside
   the count at 1366. Phone: the count and Clear on the first line, the
   buttons on a second one that scrolls inside itself (never the page), with
   a fade at its right edge while more wait beyond it. */
.selbar{box-sizing:border-box;max-width:100vw;overflow:hidden}
.selbar .in{max-width:none}
.selbar .runs{flex:1 1 100%;display:flex;flex-direction:column;gap:6px;min-width:0}
.selbar .runs[hidden]{display:none}
.selbar .runl .btn{flex:none;margin-left:auto}
.selbar .runl .jt{min-width:0;flex:0 1 auto}
.selbar .acts{display:flex;flex-wrap:wrap;gap:8px;min-width:0;align-items:center}
.selbar .acts[hidden],.selbar .clr[hidden],.selbar .n[hidden]{display:none}
.selbar .acts .btn{height:40px;padding:0 14px;font-size:13.5px}
.selbar .acts .btn .mk{display:inline-flex;align-items:center;gap:3px}
.selbar .acts .btn .ct{font-weight:600;opacity:.9}
.selbar .acts .btn .hand{display:inline-flex;opacity:.82}
.selbar .acts .btn.pri .fbmark,.selbar .acts .btn.pri .ndmark,.selbar .acts .btn.pri .mcmark,.selbar .acts .btn.pri .clmark,.selbar .acts .btn.pri svg.ebmark{box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.selbar .acts .btn.pri .oumark{background:#fff;border-radius:50%}
.selbar .n{cursor:default}
@media (max-width:640px){
  .selbar{padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
  .selbar .in{gap:8px}
  .selbar .sp{display:none}
  .selbar .runs{order:0}
  .selbar .n{order:0;flex:1 1 auto;width:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  .selbar .clr{order:1;flex:none}
  .selbar .acts{order:2;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .selbar .acts::-webkit-scrollbar{display:none}
  .selbar .acts .btn{flex:none;min-height:40px;scroll-snap-align:start}
  .selbar .acts.fade-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
  .selbar .acts>.muted{white-space:normal}
  .selbar .runl .jt{white-space:nowrap}
}
/* Phone, several runs: one line, one Progress button, then this pick. */
dialog.runpick{max-width:520px}
.runpick .runpick-list{display:flex;flex-direction:column;gap:10px}
.runpick .runl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;flex-wrap:wrap}
.runpick .runl .btn{margin-left:auto}

/* The marketplace icons under a listing (f, OfferUp, N, M, cl): cards give
   them a row of their own, compact rows and the table a group. */
.chicons{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0;max-width:100%}
.chicons .chip.icononly{width:26px;height:26px}
.chicons .ouslot:empty,.chicons .ndslot:empty,.chicons .mcslot:empty,.chicons .clslot:empty{display:none}
.chicons .ouslot,.chicons .ndslot,.chicons .mcslot{display:inline-flex;align-items:center;min-width:0}
.chicons .nd-btn,.chicons .ou-btn{height:28px;padding:0 10px;font-size:12px}
.chicons .ou-stack .chip.icononly{width:26px;height:26px}
.lc .chrow{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:10px;min-width:0}
.lc .chrow:not(:has(a,button)){display:none}
.lr .chicons{flex:0 1 auto}
.ltbl td.chcell{white-space:nowrap}
.ltbl td.chcell .chicons{flex-wrap:nowrap;vertical-align:middle}
.ltbl td.chcell .tipslot{margin-left:4px;vertical-align:middle}
button.ou-stack.posting{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.mc-chip{position:relative}
button.mc-chip{border:0;cursor:pointer;font:inherit}
.mc-chip.spin::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;border-top-color:var(--pastel-blue-text);border-right-color:var(--pastel-blue-text);animation:clspin 1s linear infinite}
@media (prefers-reduced-motion:reduce){.mc-chip.spin::after{animation:none;border-color:var(--pastel-blue-text)}}

/* The status chip is the hand-set status control: a button that keeps the chip's look. */
button.stbtn{border:0;font-family:inherit;cursor:pointer}
button.stbtn:hover{filter:brightness(.95)}
button.stbtn:focus-visible{outline:2px solid var(--color-accent,#1f6feb);outline-offset:1px}
.lc .ph .stbtn{z-index:1}
/* The photo's link to Facebook sits under the status button, not around it. */
.lc .ph .phl{position:absolute;inset:0;display:grid;place-items:center;color:var(--color-muted)}
.lc .ph .phl:hover{text-decoration:none}

/* The bar's Update dialog: the parts to send, a line (one listing) or a grid
   (several) of marketplaces, the runs, and the footer with its confirm. */
dialog.cud.cud-bar{max-width:720px}
.cud-bar>*{flex:none}
.cud .bu-parts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:14px}
.cud .bu-parts .k{font-weight:700}
.cud .bu-parts label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.cud .bu-parts input{width:18px;height:18px;margin:0}
.cud .bu-vals{display:flex;flex-direction:column;gap:6px}
.cud .bu-vals .cu-part{grid-template-columns:92px minmax(0,1fr);cursor:default}
.cud .bu-vals .cu-strip{margin-left:0}
.cud .bu-state{flex:1 1 auto}
.cud .bu-wrap{max-height:min(44vh,420px);overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-sm);overscroll-behavior:contain}
.cud .bu-tbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.cud .bu-tbl th{position:sticky;top:0;z-index:1;background:var(--color-surface-2);padding:6px 4px;text-align:center;width:48px}
.cud .bu-tbl th:first-child{text-align:left;padding-left:10px;width:auto;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--color-muted)}
.cud .bu-tbl td{border-top:1px solid var(--color-border);padding:6px 4px;vertical-align:middle}
.cud .bu-tbl .bu-t{padding-left:10px;min-width:0}
.cud .bu-tbl .bu-t .t1{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cud .bu-tbl .bu-t .pr{font-size:12px;color:var(--color-muted)}
.cud .bu-tbl .bu-c{text-align:center}
.cud .bu-tbl .bu-c input{width:18px;height:18px;margin:0}
.cud .bu-tbl .bu-c.run{background:var(--pastel-blue,#e8f0fe)}
.cud .bu-tbl .bu-c.ok{background:var(--color-success-soft,#e8f7ee)}
.cud .bu-tbl .bu-c.bad{background:#fdecea}
.cud .bu-na{color:var(--color-muted)}
.cud .bu-manual .t1{color:var(--color-muted)}
.cud .bu-manual .lnkb{font:inherit;font-weight:600;color:var(--color-accent);cursor:pointer}
.cud .bu-head:empty,.cud .bu-jobs:empty{display:none}
.cud .bu-foot{position:sticky;bottom:-24px;z-index:2;display:flex;flex-direction:column;gap:8px;margin:auto -24px -24px;padding:12px 24px 24px;background:var(--color-surface);border-top:1px solid var(--color-border)}
.cud .bu-why:empty{display:none}
/* The listings that wait for the next Update, folded past three (2026-09-27,
   review round 2) — the OfferUp batch's "— show / — hide" summary. */
.cud .bu-over p{margin:0}
.cud details.bu-wait{margin-top:6px}
.cud details.bu-wait>summary{cursor:pointer;font-weight:600;color:var(--color-text);list-style:none;display:inline-flex;align-items:center;min-height:32px}
.cud details.bu-wait>summary::-webkit-details-marker{display:none}
.cud details.bu-wait>summary::after{content:"\00a0— show";color:var(--color-muted);font-weight:500}
.cud details.bu-wait[open]>summary::after{content:"\00a0— hide"}
.cud .bu-wait-list{margin:4px 0 0;padding:0 0 0 22px;max-height:180px;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere}
.cud .bu-wait-list li{padding:2px 0}
.cud .cu-confirm{display:flex;flex-direction:column;gap:12px;padding:12px 14px;border-radius:var(--radius-inner);background:var(--pastel-amber);color:var(--pastel-amber-text)}
.cud .cu-confirm p{margin:0;font-size:13px;line-height:1.5}
.cud .cu-confirm .acts{justify-content:flex-start}
.cud .cu-confirm .btn.sec{background:transparent;border-color:currentColor;color:inherit}
/* The status picker's confirm for Sold / Removed / leaving Sold (2026-09-27). */
.stpick .st-confirm{display:flex;flex-direction:column;gap:12px;padding:12px 14px;border-radius:var(--radius-inner);background:var(--pastel-amber);color:var(--pastel-amber-text)}
.stpick .st-confirm p{margin:0;font-size:13px;line-height:1.5}
.stpick .st-confirm .btn.sec{background:transparent;border-color:currentColor;color:inherit}
@media (max-width:640px){
  .cud .bu-foot{bottom:calc(-16px - env(safe-area-inset-bottom));margin:auto -24px calc(-16px - env(safe-area-inset-bottom));padding:12px 24px calc(16px + env(safe-area-inset-bottom))}
  .cud .bu-foot .acts{flex-wrap:wrap}
  /* A long label ("Update on Facebook, OfferUp and Nextdoor…") wraps inside
     its button rather than running off the left edge (2026-09-27, review). */
  .cud .bu-foot .acts .btn{flex:1 1 auto;min-width:0;max-width:100%;height:auto;min-height:42px;padding:8px 14px;white-space:normal;text-align:center;line-height:1.25}
  .cud .bu-tbl th,.cud .bu-tbl th:first-child{font-size:10px}
  .cud .bu-tbl th{width:40px}
}
/* The Post-to dialog's Mercari runs, one line each. */
.chb .mcq-rows{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.chb .mcq-row{border-top:1px solid var(--color-surface-3);padding-top:6px}
.chb .mcq-row .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chb .chb-run .jobpanel{background:var(--color-surface-2);border-radius:var(--radius-inner);padding:12px 14px}
.chb h2 .fbmark,.chb h2 .ndmark,.chb h2 .mcmark{width:22px;height:22px;font-size:14px}
.chb h2 .oumark{width:22px;height:22px}

/* ---------- Listing score, Fix and the listing autopilot (2026-09-28, docs/21-optimizer.md) ----------
   The owner asked for a score "on top right corner … in format 30% or 80%" on
   every listing and "a fix button next to condition". New classes only: the
   badge (.seo-badge), the Fix button (.fixbtn), the Fix dialog (.fixdlg, .fx-*)
   and the Automation page's autopilot card (.ap-*). Moving the photo's own
   overlays out of the badge's corner is done in public/listings.html, which
   owns those cards. Colours are the tokens the condition chip already uses. */
.seo-badge{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:24px;padding:0 8px;border-radius:999px;
  font:inherit;font-size:12px;font-weight:800;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap;
  border:1px solid transparent;box-shadow:0 1px 3px rgba(16,24,40,.22);vertical-align:middle}
button.seo-badge{cursor:pointer}
button.seo-badge:hover{filter:brightness(.96)}
button.seo-badge:focus-visible{outline:2px solid var(--color-accent,#1f6feb);outline-offset:2px}
.seo-lo{background:var(--color-danger-soft,#fdecea);color:var(--color-danger,#b42318);border-color:#f1b8b0}
.seo-mid{background:var(--color-warn-soft,#fdf3dc);color:var(--color-warn-ink,#8a6116);border-color:#ecd49c}
.seo-hi{background:var(--color-success-soft,#e8f6ef);color:var(--color-success,#12805c);border-color:#aedcc4}
.seo-off{background:var(--color-surface-2);color:var(--color-muted-ink,#4b5563);border-color:var(--color-border)}
.seo-badge.sm{height:22px;min-width:38px;padding:0 6px;font-size:11.5px;box-shadow:none}
/* Cards: the photo's top-right corner, mirroring the checkbox top-left. */
.lc>.seo-badge{position:absolute;top:18px;right:18px;z-index:4}
/* Compact rows: top-right of the title block, left of the ⋯. */
.lr .t>.seo-badge{float:right;margin:0 0 2px 8px}
.ltbl td.seo-td{white-space:nowrap}

.fixbtn{display:inline-flex;align-items:center;gap:4px;margin-left:6px;min-height:22px;padding:1px 8px;border-radius:5px;border:1px solid var(--color-accent-soft);
  font-family:inherit;font-size:10.5px;font-weight:700;line-height:1.5;letter-spacing:.02em;vertical-align:middle;cursor:pointer;
  background:var(--color-accent-soft);color:var(--color-accent);white-space:nowrap;transition:background var(--transition)}
.fixbtn:hover{background:#d6e4fd}
.fixbtn:focus-visible{outline:2px solid var(--color-accent,#1f6feb);outline-offset:1px}
.fixbtn .ic{width:11px;height:11px;stroke-width:3}
.fixbtn.wait::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-warning,#d97706);flex:none}
.fixbtn.wait{background:var(--color-warn-soft,#fdf3dc);border-color:#ecd49c;color:var(--color-warn-ink,#8a6116)}
.fixbtn.ok{background:var(--color-success-soft,#e8f6ef);border-color:#aedcc4;color:var(--color-success,#12805c)}
.fixbtn.mute{background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-muted-ink,#4b5563)}
.fixbtn.wait:hover,.fixbtn.ok:hover,.fixbtn.mute:hover{filter:brightness(.96)}

/* The Fix dialog: before → after, what changed, price, photos, score rows. */
dialog.fixdlg{width:min(760px,calc(100vw - 16px));max-width:none;max-height:calc(100dvh - 16px);overflow:auto;gap:14px}
.fixdlg h2{font-size:18px;font-weight:700;margin:0}
.fixdlg h3{font-size:14px;font-weight:700;margin:0}
.fixdlg .fx-id{font-weight:500;font-size:14px}
.fixdlg .fx-h{display:flex;flex-direction:column;gap:6px;min-width:0}
.fixdlg .fx-sub{margin:0;color:var(--color-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fixdlg .fx-score{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600}
.fixdlg .fx-how{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--color-muted-ink,#4b5563)}
.fixdlg .fx-state{border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;line-height:1.5;background:var(--color-surface-2)}
.fixdlg .fx-state+.fx-state{margin-top:8px}
.fixdlg .fx-state.ok{background:var(--color-success-soft,#e8f6ef)}
.fixdlg .fx-state.wait{background:var(--color-warn-soft,#fdf3dc);color:var(--color-warn-ink,#8a6116)}
.fixdlg .fx-upd{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fixdlg .fx-err{margin:0;padding:8px 12px;border-radius:var(--radius-sm);background:#fdecea;color:var(--color-negative-text,#b42318);font-size:13px;font-weight:600}
.fixdlg .fx-err[hidden]{display:none}
.fixdlg .fx-sec{display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:12px;border-top:1px solid var(--color-border)}
.fixdlg .fx-h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fixdlg .fx-lbl{font-size:12px;font-weight:600;color:var(--color-muted-ink,#4b5563)}
.fixdlg .fx-old{font-size:13px;color:var(--color-muted);overflow-wrap:anywhere}
.fixdlg textarea{width:100%;min-width:0;font:inherit;font-size:14px;line-height:1.5;padding:8px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);resize:vertical}
.fixdlg textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:var(--ring)}
/* the shared textarea rule sets min-height:160px; the title box is two lines */
.fixdlg textarea.fx-ti{min-height:0;height:auto}
.fixdlg textarea.fx-de{min-height:220px;height:auto}
.fixdlg .fx-cnt{align-self:flex-end;font-size:12px;color:var(--color-muted);font-variant-numeric:tabular-nums}
.fixdlg .fx-cnt.over{color:var(--color-negative-text,#b42318);font-weight:700}
.fixdlg .fx-ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.fixdlg .fx-b,.fixdlg .fx-a{display:flex;flex-direction:column;gap:4px;min-width:0}
.fixdlg .fx-pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5;color:var(--color-muted-ink,#4b5563);background:var(--color-surface-2);border-radius:var(--radius-sm);padding:8px 10px;max-height:300px;overflow:auto;flex:1 1 auto}
.fixdlg .fx-togb{display:none;margin-left:auto}
.fixdlg .fx-list{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
.fixdlg .fx-warn{background:var(--color-warn-soft,#fdf3dc);color:var(--color-warn-ink,#8a6116);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;line-height:1.5}
.fixdlg .fx-warn p{margin:0}
.fixdlg .fx-warn p+p{margin-top:4px}
.fixdlg .fx-rm summary{cursor:pointer;font-size:13px;font-weight:600}
.fixdlg .fx-rmg{margin-top:8px}
.fixdlg .fx-rmh{font-size:12px;font-weight:700;color:var(--color-muted-ink,#4b5563)}
.fixdlg .fx-rml{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:12.5px;line-height:1.45}
.fixdlg .fx-rmt{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;color:var(--color-muted)}
.fixdlg .fx-rml .btn{flex:none;height:28px;padding:0 10px;font-size:12px}
.fixdlg .fx-note{margin:0;font-size:12.5px;color:var(--color-muted)}
.fixdlg .fx-prices{display:flex;flex-direction:column;gap:6px}
.fixdlg .fx-price{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.fixdlg .fx-price>span{flex:1 1 200px;min-width:0}
.fixdlg .fx-w{color:var(--color-negative-text,#b42318);font-weight:700}
.fixdlg .fx-phs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.fixdlg .fx-ph{position:relative;flex:none;width:84px;height:84px;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface-2);border:1px solid var(--color-border)}
.fixdlg .fx-ph img{width:100%;height:100%;object-fit:cover;display:block}
.fixdlg .fx-ph.cover{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.fixdlg .fx-ph.sug{border-color:var(--color-success,#12805c);box-shadow:0 0 0 1px var(--color-success,#12805c)}
.fixdlg .fx-phl{position:absolute;left:0;right:0;bottom:0;background:var(--color-accent);color:#fff;font-size:10px;font-weight:700;text-align:center;padding:1px 0}
.fixdlg .fx-phb{position:absolute;left:4px;right:4px;bottom:4px;border:0;border-radius:6px;background:var(--color-success,#12805c);color:#fff;font:inherit;font-size:10.5px;font-weight:700;padding:3px 0;cursor:pointer}
.fixdlg .fx-cc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fixdlg .fx-grp{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}
.fixdlg .fx-grp+.fx-grp{margin-top:8px}
.fixdlg .fx-grh{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;background:var(--color-surface-2);font-size:13px}
.fixdlg .fx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:6px 10px;font-size:13px;border-top:1px solid var(--color-surface-3)}
.fixdlg .fx-row .fx-rp{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.fixdlg .fx-row .fx-ra{grid-column:1 / -1;font-size:12.5px;color:var(--color-muted-ink,#4b5563);line-height:1.45}
.fixdlg .fx-row.lost .fx-rp{color:var(--color-warn-ink,#8a6116)}
.fixdlg .fx-row.na{color:var(--color-muted)}
.fixdlg .fx-row.na .fx-rp{font-weight:500}
.fixdlg .fx-acts{position:sticky;bottom:-24px;z-index:2;margin:auto -24px -24px;padding:12px 24px 16px;background:var(--color-surface);border-top:1px solid var(--color-border);align-items:center}
.fixdlg .fx-auto{display:inline-flex;align-items:center;gap:8px;margin-right:auto;font-size:13px;font-weight:600;cursor:pointer;min-height:36px}
.fixdlg .fx-auto input{width:18px;height:18px;margin:0;accent-color:var(--color-accent)}
.fixdlg .fx-load{display:flex;flex-direction:column}
@media (max-width:719px){
  .fixdlg .fx-ba{grid-template-columns:minmax(0,1fr)}
  .fixdlg .fx-ba .fx-b{display:none}
  .fixdlg .fx-ba.show-b .fx-b{display:flex}
  .fixdlg .fx-togb{display:inline-flex}
}
@media (max-width:640px){
  dialog.fixdlg{width:100vw;max-height:92dvh}
  .fixdlg textarea{font-size:16px}
  .fixdlg .fx-acts{bottom:calc(-16px - env(safe-area-inset-bottom));margin:auto -24px calc(-16px - env(safe-area-inset-bottom));padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
  .fixdlg .fx-acts .fx-auto{flex:1 1 100%}
  .fixdlg .fx-acts .btn{flex:1 1 auto;height:42px;padding:0 12px}
  .fixbtn{min-height:28px;padding:2px 9px}
  .seo-badge{height:26px}
  .seo-badge.sm{height:24px}
  .lc>.seo-badge{top:16px;right:16px}
}

/* Automation › the listing autopilot card (public/jobs.html). */
.ap-card{display:flex;flex-direction:column;gap:10px}
.ap-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ap-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-tt h2{font-size:18px;font-weight:700;margin:0}
.ap-sw{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;cursor:pointer;min-height:44px}
.ap-sw input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:44px;height:26px;margin:0;border-radius:999px;background:var(--color-surface-3);border:1px solid var(--color-border);cursor:pointer;transition:background var(--transition)}
.ap-sw input::before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.3);transition:transform var(--transition)}
.ap-sw input:checked{background:var(--color-positive,#16a34a);border-color:var(--color-positive,#16a34a)}
.ap-sw input:checked::before{transform:translateX(18px)}
.ap-sw input:focus-visible{outline:2px solid var(--color-accent,#1f6feb);outline-offset:2px}
.ap-sw input:disabled{opacity:.6;cursor:default}
.ap-line{margin:0;font-size:13px;line-height:1.5;color:var(--color-muted-ink,#4b5563);overflow-wrap:anywhere}
.ap-line b{color:var(--color-text)}
.ap-line .ap-warn{color:var(--color-warn-ink,#8a6116);font-weight:600}
.ap-line .btn{height:28px;padding:0 10px;font-size:12px;margin-left:4px}
.ap-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px}
.ap-acts{display:flex;gap:8px;flex-wrap:wrap}
.ap-card details>summary{cursor:pointer;font-size:14px;font-weight:600;min-height:32px;display:flex;align-items:center}
.ap-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 16px;margin-top:8px}
.ap-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--color-muted-ink,#4b5563);min-width:0}
.ap-form input[type=text],.ap-form select{height:36px;font:inherit;font-size:14px;padding:0 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);min-width:0;width:100%}
.ap-form .ap-two{display:flex;align-items:center;gap:6px}
.ap-form .ap-two input{width:64px;flex:none}
.ap-form .ap-chk{flex-direction:row;align-items:center;gap:8px;grid-column:1 / -1}
.ap-form .ap-chk input{width:18px;height:18px;margin:0;accent-color:var(--color-accent)}
.ap-form .ap-wide{grid-column:1 / -1}
.ap-form .ap-save{grid-column:1 / -1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ap-msg{font-size:13px;font-weight:600}
.ap-msg.bad{color:var(--color-negative-text,#b42318)}
.ap-msg.ok{color:var(--color-positive-text,#15803d)}
.ap-rows{display:flex;flex-direction:column;margin-top:6px}
.ap-row{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--color-surface-3);font-size:13px}
.ap-row .ap-when{flex:none;width:72px;color:var(--color-muted);font-size:12px}
.ap-row .ap-what{flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.ap-row .ap-sc{flex:none;display:inline-flex;align-items:center;gap:4px}
.ap-row .ap-by{flex:none;font-size:12px;color:var(--color-muted)}
.ap-row .btn{height:30px;padding:0 10px;font-size:12px}
.ap-empty{margin:6px 0 0;font-size:13px;color:var(--color-muted)}
@media (max-width:640px){
  .ap-row .ap-when{width:auto}
  .ap-form{grid-template-columns:minmax(0,1fr)}
}
/* The condition chip + Fix button pair on the price line (wraps as one). */
.condfix{display:inline-flex;align-items:center;flex:none;white-space:nowrap}

/* ---------- eBay (assist mode, docs/22-ebay.md): the striped shopping bag ---------- */
svg.ebmark{width:16px;height:16px;border-radius:5px;flex:none;display:block}
.more .menu svg.ebmark{margin-right:2px}
.chip.icononly svg.ebmark{width:18px;height:18px}
.mcd h2 svg.ebmark,.cud h2 svg.ebmark,.chb h2 svg.ebmark{width:22px;height:22px;border-radius:6px}
.ebslot:empty,.ebmenu:empty{display:none}

/* ---------- Post-to-Facebook dialog: the see-and-edit panel ---------- */
.chb-edit{margin:4px 0 10px;border:1px solid var(--color-border);border-radius:var(--radius-inner);background:var(--color-surface-2)}
.chb-edit>summary{cursor:pointer;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--color-muted);list-style:none}
.chb-edit>summary::-webkit-details-marker{display:none}
.chb-edit>summary::before{content:'▸ ';color:var(--color-muted)}
.chb-edit[open]>summary::before{content:'▾ '}
.chb-ebody{padding:4px 12px 12px;display:flex;flex-direction:column;gap:10px}
.chb-f{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--color-muted)}
.chb-f small{font-weight:500}
.chb-f select,.chb-f input,.chb-f textarea{font:inherit;font-size:13.5px;font-weight:400;color:var(--color-text);border:1px solid var(--color-border);border-radius:8px;padding:8px 10px;background:var(--color-surface);width:100%;resize:vertical}
.chb-eacts{display:flex;align-items:center;gap:10px}

/* ★ styled-cover button on cards: a gold sparkle glyph in the standard 36px square */
.ibtn.sq[data-thumbstar]{font-size:19px;line-height:1;color:#b8860b}
.ibtn.sq[data-thumbstar]:disabled{opacity:.45;cursor:default}

/* Fix dialog, simplified (owner 2026-10-01: "huge … very crowded … make it
   more useful"): the text boxes first, one column, a to-do list of what still
   costs points with one action each, and the photos and the full score table
   folded away. */
.fixdlg .fx-ba{grid-template-columns:minmax(0,1fr)}
.fixdlg .fx-ba .fx-b{display:none}
.fixdlg .fx-ba.show-b .fx-b{display:flex}
.fixdlg .fx-togb{display:inline-flex;margin-left:auto}
.fixdlg textarea.fx-de{min-height:170px}
.fixdlg .fx-text .fx-h3{justify-content:space-between}
.fixdlg .fx-text .fx-cnt{align-self:auto}
.fixdlg .fx-todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}
.fixdlg .fx-todo-i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:8px 10px;font-size:13px}
.fixdlg .fx-todo-i+.fx-todo-i{border-top:1px solid var(--color-surface-3)}
.fixdlg .fx-tp{min-width:32px;text-align:center;font-weight:700;font-size:12px;border-radius:999px;padding:1px 6px;background:var(--color-warn-soft,#fdf3dc);color:var(--color-warn-ink,#8a6116)}
.fixdlg .fx-tm .fx-ra{font-size:12.5px;color:var(--color-muted-ink,#4b5563);line-height:1.45;margin-top:1px}
.fixdlg .fx-ta{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fixdlg .fx-ta .btn{height:30px;padding:0 10px;font-size:12px;white-space:nowrap}
.fixdlg .fx-more{border-top:1px solid var(--color-border);padding-top:10px}
.fixdlg .fx-more>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--color-muted-ink,#4b5563)}
.fixdlg .fx-more[open]>summary{margin-bottom:8px}
.fixdlg .fx-more .fx-sec{border-top:0;padding-top:0}
.fixdlg .fx-more .fx-sec>h3{display:none}
@media (max-width:640px){
  .fixdlg .fx-todo-i{grid-template-columns:auto minmax(0,1fr)}
  .fixdlg .fx-ta{grid-column:1 / -1;justify-content:flex-start}
}

/* Fix dialog v3 (owner 2026-10-02: "too big and too overwhelming … make it
   smaller, professional and user friendly"): 620 px, one header line, one
   status line, compact boxes, three to-dos, one Details fold, one button. */
dialog.fixdlg{width:min(620px,calc(100vw - 16px));gap:12px;padding:20px 22px}
.fixdlg .fx-h{gap:2px}
.fixdlg .fx-hl{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fixdlg h2{font-size:17px}
.fixdlg .fx-sub{font-size:12.5px}
.fixdlg .fx-score{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.fixdlg .fx-arr{color:var(--color-muted);font-weight:700}
.fixdlg .fx-status{border-radius:var(--radius-sm);padding:8px 12px;font-size:12.8px;line-height:1.45;background:var(--color-surface-2);color:var(--color-muted-ink,#4b5563)}
.fixdlg .fx-status.wait{background:var(--color-warn-soft,#fdf3dc);color:var(--color-warn-ink,#8a6116)}
.fixdlg .fx-status.ok{background:var(--color-success-soft,#e8f6ef);color:var(--color-positive-text,#0b6b45)}
.fixdlg .fx-status.run{display:flex;flex-direction:column;gap:4px;background:var(--color-surface-2)}
.fixdlg .fx-run{display:flex;align-items:baseline;gap:8px;font-size:12.8px}
.fixdlg .fx-run b{min-width:72px}
.fixdlg .fx-run span{flex:1 1 auto;min-width:0;color:var(--color-muted-ink,#4b5563);overflow-wrap:anywhere}
.fixdlg .fx-run.ok span{color:var(--color-positive-text,#0b6b45);font-weight:600}
.fixdlg .fx-run.bad span{color:var(--color-negative-text,#b42318)}
.fixdlg .fx-text{display:flex;flex-direction:column;gap:6px}
.fixdlg input.fx-ti{width:100%;min-width:0;height:38px;font:inherit;font-size:14px;padding:0 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text)}
.fixdlg input.fx-ti:focus{outline:none;border-color:var(--color-accent);box-shadow:var(--ring)}
.fixdlg textarea.fx-de{min-height:120px;max-height:32vh;font-size:13.5px}
.fixdlg .fx-text .fx-cnt{font-size:11.5px}
.fixdlg .fx-todo{border-radius:var(--radius-sm)}
.fixdlg .fx-todo-i{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:6px 10px;gap:2px 10px}
.fixdlg .fx-tm{display:flex;flex-direction:column;min-width:0}
.fixdlg .fx-tm b{font-size:13px;font-weight:600}
.fixdlg .fx-tm .fx-ra{display:block;margin:0;font-size:12px;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fixdlg .fx-tp{min-width:28px;font-size:11.5px}
.fixdlg .fx-ta .btn{height:28px;padding:0 10px;font-size:12px}
.fixdlg .fx-alldone{margin:0}
.fixdlg .fx-more{border-top:1px solid var(--color-border);padding-top:8px}
.fixdlg .fx-more>summary{font-size:12.8px}
.fixdlg .fx-sub2{margin-top:10px}
.fixdlg .fx-sub2 .fx-sec{border-top:0;padding-top:0}
.fixdlg .fx-sub2 .fx-sec>h3{display:block;font-size:12.5px;color:var(--color-muted-ink,#4b5563)}
.fixdlg .fx-auto{min-height:28px;font-size:12.8px;font-weight:500;margin-right:0}
.fixdlg .lnkb.danger{color:var(--color-negative-text,#b42318)}
.fixdlg .fx-acts{justify-content:flex-end;gap:8px;padding:12px 22px 14px;margin:auto -22px -20px;bottom:-20px}
@media (max-width:640px){
  dialog.fixdlg{padding:16px}
  .fixdlg .fx-acts{margin:auto -16px -16px;padding:12px 16px;bottom:-16px}
  .fixdlg .fx-todo-i{grid-template-columns:auto minmax(0,1fr)}
}
.fixdlg .fx-h3{justify-content:space-between}
.fixdlg .lnkb{background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--color-accent);cursor:pointer}
.fixdlg .lnkb:hover{text-decoration:underline}
.fixdlg .lnkb.danger{color:var(--color-negative-text,#b42318)}

/* ---------- Sign in inside the panel (2026-10-02, src/sign-in.js) ----------
   The marketplace's sign-in page, live from the server's own browser: the
   owner clicks, types and scrolls on the picture, from any browser or phone.
   The picture is as large as the screen allows (the page is 1000×720) and the
   dialog stays compact around it: one intro line, an address bar, the picture,
   a type box for phones, one status line, two buttons. */
/* Width from the height left for the picture (1000:720) after ~270 px of
   title, bar, type row and footer — so it fits a laptop screen unscrolled;
   below 520 px wide the dialog scrolls instead of shrinking the page further. */
dialog.sid{width:min(1048px,calc(100vw - 32px));max-width:none;padding:18px 22px;gap:10px}
@supports (height:100dvh){
  dialog.sid{width:min(1048px,calc(100vw - 32px),max(520px,calc((100dvh - 304px) * 1.389 + 46px)))}
}
dialog.sid:not([open]){display:none}
dialog.sid h2{display:flex;align-items:center;gap:8px;font-size:18px;line-height:1.3}
dialog.sid h2 .oumark{width:22px;height:22px}
dialog.sid h2 .mcmark{width:22px;height:22px;font-size:13px;border-radius:6px}
dialog.sid .sid-intro{margin-top:-6px;font-size:13px;line-height:1.45;color:var(--color-muted-ink)}
dialog.sid .sid-view{flex:none;border:1px solid var(--color-border);border-radius:var(--radius-inner);overflow:hidden;background:var(--color-surface-2);transition:border-color var(--transition),box-shadow var(--transition)}
dialog.sid[data-phase="live"] .sid-view.kbd{border-color:var(--color-accent);box-shadow:var(--ring)}
dialog.sid .sid-bar{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-bottom:1px solid var(--color-border);font-size:12px;color:var(--color-muted-ink)}
dialog.sid .sid-url{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11.5px}
dialog.sid .sid-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.sid .sid-url .ic{width:12px;height:12px;stroke-width:2.2;color:var(--color-positive-text)}
dialog.sid .sid-xwin{flex:none;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:var(--radius-pill);background:var(--color-surface);border:1px solid var(--color-border);font-size:11.5px;font-weight:600;color:var(--color-text)}
dialog.sid .sid-xwin:hover{background:var(--color-surface-3)}
dialog.sid .sid-xwin .ic{width:12px;height:12px;stroke-width:2.2}
dialog.sid .sid-xwin[hidden]{display:none}
dialog.sid .sid-kbd{display:none;flex:none;font-size:11.5px;font-weight:600;color:var(--color-accent)}
dialog.sid[data-phase="live"] .sid-view.kbd .sid-kbd{display:inline}
dialog.sid .sid-live{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600}
dialog.sid .sid-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-muted)}
dialog.sid .sid-live.on::before{background:var(--color-positive);box-shadow:0 0 0 3px rgba(22,163,74,.16)}
dialog.sid .sid-live.warn{color:var(--pastel-amber-text)}
dialog.sid .sid-live.warn::before{background:var(--color-warning)}
dialog.sid .sid-pic{position:relative;aspect-ratio:1000/720;background:#fff;outline:none;overflow:hidden;touch-action:pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
dialog.sid .sid-pic img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
dialog.sid .sid-pic img[hidden]{display:none}
dialog.sid .sid-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--color-muted-ink);background:rgba(243,245,249,.94)}
dialog.sid .sid-ph[hidden]{display:none}
dialog.sid .sid-ph>span:last-child{max-width:440px}
dialog.sid .sid-ph .ic{width:28px;height:28px;color:var(--pastel-amber-text)}
dialog.sid .sid-spin{display:inline-block;flex:none;width:22px;height:22px;border:2px solid rgba(17,20,24,.12);border-top-color:var(--color-text);border-radius:50%;animation:spin .8s linear infinite}
/* where a click landed, for a moment */
dialog.sid .sid-tap{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:2px solid var(--color-accent);background:rgba(37,99,235,.16);pointer-events:none;animation:sidtap .6s ease-out forwards}
@keyframes sidtap{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}}
dialog.sid .sid-type{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
dialog.sid .sid-type input{flex:1 1 200px;width:auto;min-width:0;height:36px;font-size:14px}
dialog.sid .sid-keys{display:inline-flex;gap:6px}
dialog.sid .sid-keys .btn{min-width:44px;padding:0 12px}
dialog.sid[data-phase="restart"] .sid-type,dialog.sid[data-phase="error"] .sid-type,dialog.sid[data-phase="ended"] .sid-type{display:none}
/* Footer: the status line beside the two buttons, pinned to the bottom edge. */
dialog.sid .sid-foot{position:sticky;bottom:-18px;z-index:1;display:flex;align-items:center;gap:14px;margin:2px -22px -18px;padding:12px 22px 16px;background:var(--color-surface);border-top:1px solid var(--color-border)}
dialog.sid .sid-acts{flex:none;display:flex;gap:8px;margin-left:auto}
dialog.sid .sid-acts .btn.pri{min-width:140px}
dialog.sid .sid-st{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;font-size:12.8px;line-height:1.45;color:var(--color-muted-ink);overflow-wrap:anywhere}
dialog.sid .sid-st[hidden]{display:none}
dialog.sid .sid-st .ic{width:16px;height:16px;flex:none}
dialog.sid .sid-st .sid-spin{width:14px;height:14px}
dialog.sid .sid-st.ok,dialog.sid .sid-st.warn,dialog.sid .sid-st.err{padding:7px 10px;border-radius:var(--radius-sm)}
dialog.sid .sid-st.ok{background:var(--pastel-green);color:var(--pastel-green-text);font-weight:600}
dialog.sid .sid-st.warn{background:var(--pastel-amber);color:var(--pastel-amber-text)}
dialog.sid .sid-st.err{background:var(--pastel-red);color:var(--pastel-red-text)}
dialog.sid .sid-st .sub{font-weight:400;opacity:.9}
/* Review fixes (2026-10-02). Plain http that is not this machine, on a server
   that does not say yet: one amber line under the intro. */
dialog.sid .sid-warn{display:flex;align-items:flex-start;gap:8px;margin-top:-4px;padding:7px 10px;border-radius:var(--radius-sm);background:var(--pastel-amber);color:var(--pastel-amber-text);font-size:12.8px;line-height:1.45}
dialog.sid .sid-warn[hidden]{display:none}
dialog.sid .sid-warn .ic{width:16px;height:16px;flex:none;margin-top:1px}
/* that line costs ~42 px of height: the picture gives them back, so a laptop still fits unscrolled */
@media (min-width:641px){@supports (height:100dvh){
  dialog.sid:has(.sid-warn:not([hidden])){width:min(1048px,calc(100vw - 32px),max(520px,calc((100dvh - 346px) * 1.389 + 46px)))}
}}
/* Not on this connection: no type row; the footer carries the way to https. */
dialog.sid[data-phase="https"] .sid-type{display:none}
/* Zoom (phones): the page at 2.5× inside the frame, moved around with a finger. */
dialog.sid .sid-zoom{display:none;flex:none;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-pill);background:var(--color-surface);border:1px solid var(--color-border);font-size:11.5px;font-weight:600;color:var(--color-text)}
dialog.sid .sid-zoom[aria-pressed="true"]{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
dialog.sid[data-phase="live"] .sid-zoom{display:inline-flex}
@media (min-width:761px) and (pointer:fine){dialog.sid[data-phase="live"] .sid-zoom{display:none}}
dialog.sid .sid-pic.zoom{overflow:auto;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain}
dialog.sid .sid-pic.zoom img{width:250%;max-width:none;height:auto}
/* Show / Hide beside the Type here box (a password box). */
dialog.sid .sid-type .sid-eye{min-width:64px}
/* "Open the secure panel" may wrap on a phone's half-width button rather than be cut. */
dialog.sid .sid-acts a.btn{white-space:normal;text-align:center;line-height:1.2;height:auto;min-height:44px;padding-top:6px;padding-bottom:6px}
/* "Sign in again" beside "Signed in to OfferUp" (the line can be older than the session). */
dialog.oud .sessl.ok + .lnkb[data-signin]{font-size:12px;margin-left:4px;vertical-align:middle;line-height:1.4}
/* the sign-in button where it sits inside a sentence */
.mcd .mc-note .btn[data-signin]{height:30px;padding:0 12px;font-size:12.5px;margin-left:2px;vertical-align:middle}
.mcd .mc-note .lnkb[data-signin]{font-size:12.5px;font-weight:600;color:var(--color-accent)}
.mcd .mc-note .lnkb[data-signin]:hover{text-decoration:underline}
.chb .cl-block .btn[data-signin]{align-self:flex-start}
@media (hover:none){dialog.sid[data-phase] .sid-view.kbd .sid-kbd{display:none}}
@media (max-width:640px){
  dialog.sid{width:100vw;padding:14px 14px calc(12px + env(safe-area-inset-bottom));gap:10px}
  dialog.sid h2{font-size:17px}
  dialog.sid .sid-intro{font-size:12.5px}
  dialog.sid .sid-type input{flex-basis:100%}
  dialog.sid .sid-type>.btn{flex:1 1 auto}
  dialog.sid .sid-foot{flex-direction:column;align-items:stretch;gap:10px;bottom:calc(-12px - env(safe-area-inset-bottom));margin:2px -14px calc(-12px - env(safe-area-inset-bottom));padding:10px 14px calc(12px + env(safe-area-inset-bottom))}
  dialog.sid .sid-acts{margin-left:0}
  dialog.sid .sid-acts .btn{flex:1 1 0;min-width:0}
}
@media (prefers-reduced-motion:reduce){dialog.sid .sid-spin,dialog.sid .sid-tap{animation:none}}