/* =====================================================================
   Distribot — the shop window's WTB board, demand card, the single-shot
   form and the confirm-arrival page (RWD-LRD-0089..0103), plus the gated
   review queue's two rules. Ported from the verified Claude Design handoff
   (docs/design/distribot/2026-09-05-shop-window-handoff/
   ShopWindow-WTB.dc.html) under PORTING.md S1–S12: @container → @media
   one for one; the demand card keeps the `dw-listing__facts` <dl> idiom
   (S10); the select carries `dw-wtbForm__select`, the checkbox wrapper is
   the `dw-wtbForm__check` label (S4); the error reds are tokens
   (--dw-danger / --dw-status-failed / the error strip), never literals
   (RWD-LRD-0092); the undeclared --dw-h4 read is gone (F12). Loads AFTER
   landing.css + board.css (tokens, nav, buttons, the shared head idiom).
   ===================================================================== */

/* ---------- Demand grid + card — the trade card's hierarchy, budget first ---------- */

.dw-wtb { padding: 0; }
.dw-wtb__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
@media (max-width: 719px) { .dw-wtb__grid { grid-template-columns: 1fr; gap: 14px; } }
@media (min-width: 720px) and (max-width: 1079px) { .dw-wtb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dw-demand { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; background: var(--dw-surface); border: 1px solid var(--dw-line); border-radius: var(--dw-radius-card); box-shadow: var(--dw-shadow-soft); }
.dw-demand__budget { display: block; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--dw-ink); overflow-wrap: anywhere; }
.dw-demand__budgetNote { display: block; margin-top: 3px; font-size: 13px; font-family: var(--dw-font-mono); color: var(--dw-muted); }
.dw-demand__deliverable { margin: 0; font-size: var(--dw-h3); line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--dw-ink); overflow-wrap: anywhere; }
.dw-demand__scope { margin: -4px 0 0; font-size: 15px; line-height: 1.5; color: var(--dw-ink-soft); text-wrap: pretty; }
/* The facts <dl> — demand cards only (S10): the buyer's given facts. */
.dw-listing__facts { margin: 0; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 6px 12px; font-size: 14px; }
.dw-listing__fact { display: contents; }
.dw-listing__fact dt { color: var(--dw-meta-ink); }
.dw-listing__fact dd { margin: 0; color: var(--dw-ink); font-weight: 600; overflow-wrap: anywhere; }
/* The public host's exit (RWD-LRD-0095) sits where the respond affordance would. */
.dw-demand > .dw-btn { margin-top: auto; align-self: flex-start; }

/* ---------- Respond affordance (RWD-PLAN-0007 T6) — the gated / single-origin card ---------- */

.dw-demand__respond { margin-top: auto; border: 1px solid var(--dw-line); border-radius: var(--dw-radius-control); background: var(--dw-surface); }
.dw-demand__respond summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 16px; border-radius: var(--dw-radius-pill); font-size: 14px; font-weight: 700; color: var(--dw-ink-soft); }
.dw-demand__respond summary::-webkit-details-marker { display: none; }
.dw-demand__respond summary:hover { color: var(--dw-primary); background: var(--dw-surface-low); }
.dw-demand__respond summary:focus-visible { outline: 2px solid var(--dw-primary); outline-offset: 2px; }
.dw-demand__respond[open] summary { border-bottom: 1px solid var(--dw-line); border-radius: var(--dw-radius-control) var(--dw-radius-control) 0 0; }
.dw-demand__respondBody { padding: 12px; }
.dw-demand__respondBody p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--dw-ink-soft); }
.dw-demand__respondBody pre { margin: 0; padding: 12px; border-radius: var(--dw-radius-control); background: var(--dw-sunken); border: 1px solid var(--dw-line); font-family: var(--dw-font-mono); font-size: 12px; line-height: 1.6; color: var(--dw-ink); overflow: auto; }

/* ---------- The review queue (gated, RWD-LRD-0079) ---------- */

.dw-demand--review { border-left: 4px solid var(--dw-primary); }
.dw-demand__decide { display: flex; gap: 12px; margin-top: 8px; }

/* ---------- The single-shot form ---------- */

.dw-wtbForm { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--dw-line); }
.dw-wtbForm__form { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px 20px; max-width: 920px; }
.dw-wtbForm__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dw-wtbForm__field--wide { grid-column: 1 / -1; }
.dw-wtbForm__label { font-size: 14px; font-weight: 700; color: var(--dw-ink); }
.dw-wtbForm__req { color: var(--dw-danger); margin-left: 3px; }
.dw-wtbForm__input, .dw-wtbForm__textarea, .dw-wtbForm__select { width: 100%; min-height: 46px; padding: 11px 13px; border-radius: var(--dw-radius-control); border: 1px solid var(--dw-line); background: var(--dw-surface); color: var(--dw-ink); font-size: 16px; }
.dw-wtbForm__textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.dw-wtbForm__input::placeholder, .dw-wtbForm__textarea::placeholder { color: var(--dw-muted); }
.dw-wtbForm__input:hover, .dw-wtbForm__textarea:hover, .dw-wtbForm__select:hover { border-color: var(--outline); }
.dw-wtbForm__input:focus-visible, .dw-wtbForm__textarea:focus-visible, .dw-wtbForm__select:focus-visible { outline: 2px solid var(--dw-primary); outline-offset: 1px; border-color: var(--dw-primary); }
.dw-wtbForm__input:disabled, .dw-wtbForm__textarea:disabled, .dw-wtbForm__select:disabled { background: var(--dw-surface-low); color: var(--dw-ink-soft); }
/* Invalid: the solid --dw-danger border carries the signal, the ring is the halo. */
.dw-wtbForm__input--invalid { border-color: var(--dw-danger); box-shadow: 0 0 0 3px var(--dw-danger-ring); }
.dw-wtbForm__input--invalid:focus-visible { outline-color: var(--dw-danger); }
.dw-wtbForm__check { display: flex; align-items: flex-start; gap: 10px; min-height: 46px; padding: 10px 13px; border-radius: var(--dw-radius-control); border: 1px solid var(--dw-line); background: var(--dw-surface); font-size: 15px; line-height: 1.45; color: var(--dw-ink-soft); }
.dw-wtbForm__check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--dw-primary); }
.dw-wtbForm__help { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--dw-meta-ink); }
.dw-wtbForm__error { margin: 0; display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--dw-danger); font-weight: 600; }
.dw-wtbForm__error::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dw-status-failed); flex: none; margin-top: 6px; }
.dw-wtbForm__error--form { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--dw-radius-control); background: var(--dw-error-strip-bg); border: 1px solid var(--dw-error-strip-line); color: var(--dw-error-strip-ink); font-size: 15px; line-height: 1.5; font-weight: 600; }
.dw-wtbForm__error--form::before { display: none; }
.dw-wtbForm__glyph { flex: none; margin-top: 2px; }
.dw-wtbForm__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.dw-wtbForm__note { margin: 0; flex: 1; min-width: 240px; font-size: 14px; line-height: 1.5; color: var(--dw-ink-soft); }
.dw-wtbForm__note b { color: var(--dw-ink); }
.dw-wtbForm__success { max-width: 720px; padding: 28px 30px; background: var(--dw-surface); border: 1px solid var(--dw-line); border-radius: var(--dw-radius-card); box-shadow: var(--dw-shadow-soft); display: flex; flex-direction: column; gap: 12px; }
.dw-wtbForm__successPill { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--dw-radius-pill); font-size: var(--dw-meta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--dw-primary-soft); color: var(--dw-pill-ok-ink); }
.dw-wtbForm__successPill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dw-wtbForm__success h3 { margin: 0; font-size: var(--dw-h3); font-weight: 700; color: var(--dw-ink); }
.dw-wtbForm__success p { margin: 0; font-size: var(--dw-body); line-height: 1.55; color: var(--dw-ink-soft); }
.dw-wtbForm__success b { color: var(--dw-ink); font-weight: 700; }
@media (max-width: 719px) {
  .dw-wtbForm { margin-top: 40px; padding-top: 32px; }
  .dw-wtbForm__form { grid-template-columns: 1fr; gap: 16px; }
  .dw-wtbForm__actions .dw-btn { width: 100%; }
  .dw-wtbForm__success { padding: 20px; }
}

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

.dw-wtbConfirm { max-width: 640px; margin: 0 auto; padding: 56px var(--dw-gutter) 72px; }
.dw-wtbConfirm__card { padding: 26px 28px; background: var(--dw-surface); border: 1px solid var(--dw-line); border-radius: var(--dw-radius-card); box-shadow: var(--dw-shadow-soft); display: flex; flex-direction: column; gap: 12px; }
.dw-wtbConfirm__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--dw-radius-pill); font-size: var(--dw-meta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dw-wtbConfirm__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dw-wtbConfirm__pill--ok { background: var(--dw-primary-soft); color: var(--dw-pill-ok-ink); }
.dw-wtbConfirm__pill--used { background: var(--dw-surface-low); color: var(--dw-ink-soft); }
.dw-wtbConfirm__pill--expired { background: var(--dw-stone-weak); color: var(--dw-pill-warn-ink); }
.dw-wtbConfirm__card p { margin: 0; font-size: var(--dw-body); line-height: 1.55; color: var(--dw-ink-soft); text-wrap: pretty; }
.dw-wtbConfirm__card b { color: var(--dw-ink); font-weight: 700; }
.dw-wtbConfirm__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 719px) {
  .dw-wtbConfirm { padding-top: 28px; }
  .dw-wtbConfirm__card { padding: 20px; }
}