/* Hero instrument for /electronics-sourcing: an example request list that builds itself (Oct 17 2026).
   Markup from site/scripts/request_demo.py, behaviour in request-demo.js. Every selector is prefixed .rqd-.
   The markup is the finished list; the script clears it and types it back in. */

.rqd-demo{
  --rqd-ink:#11141b; --rqd-accent:#e2451a; --rqd-paper:#ffffff; --rqd-tint:#f1efec; --rqd-line:#d5d1cc;
  --rqd-soft:#4d5058;
  --rqd-mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --rqd-sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rqd-display:'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
  --rqd-pad:1.25rem;
  container-type:inline-size;
  box-sizing:border-box; width:100%; max-width:560px;
  background:var(--rqd-paper); color:var(--rqd-ink);
  border:3px solid var(--rqd-accent); border-radius:0;
  font-family:var(--rqd-sans); font-size:1rem; line-height:1.4; text-align:left;
}
.rqd-demo *, .rqd-demo *::before, .rqd-demo *::after{ box-sizing:border-box; margin:0; padding:0; border-radius:0; }

/* Head band: the label that keeps it from reading as a live order, and the replay control. */
.rqd-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:2.75rem; padding:0 var(--rqd-pad); background:var(--rqd-tint);
}
.rqd-label, .rqd-replay, .rqd-cols, .rqd-k{
  font-family:var(--rqd-mono); font-weight:600; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
}
.rqd-label{ color:var(--rqd-ink); }
.rqd-replay{
  appearance:none; background:none; border:0; cursor:pointer; color:var(--rqd-ink);
  padding:.5rem 0; line-height:1;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px;
}
.rqd-replay[hidden]{ display:none; }
.rqd-replay:hover{ color:var(--rqd-accent); }
.rqd-replay:focus-visible, .rqd-btn:focus-visible{ outline:3px solid var(--rqd-accent); outline-offset:3px; }

/* Grid shared by the column heads and every line. */
.rqd-cols, .rqd-line{
  display:grid; column-gap:.75rem;
  grid-template-columns:minmax(0,1fr) 4.25rem 5.25rem 5.75rem;
  padding:0 var(--rqd-pad);
}
.rqd-cols{ color:var(--rqd-soft); padding-top:.85rem; padding-bottom:.55rem; border-bottom:3px solid var(--rqd-ink); }

.rqd-list{ list-style:none; }
.rqd-line{
  grid-template-areas:"mpn qty date status" "meta meta meta meta";
  align-items:center; row-gap:.2rem; padding-top:.8rem; padding-bottom:.8rem;
}
.rqd-line + .rqd-line{ border-top:3px solid var(--rqd-line); }
.rqd-mpn{ grid-area:mpn; } .rqd-qty{ grid-area:qty; } .rqd-date{ grid-area:date; } .rqd-status{ grid-area:status; }
.rqd-meta{ grid-area:meta; }

.rqd-cell{ position:relative; min-width:0; line-height:1.5rem; white-space:nowrap; }
.rqd-v{ font-family:var(--rqd-mono); font-weight:500; font-size:.9rem; }
.rqd-mpn .rqd-v{ font-weight:600; font-size:.95rem; letter-spacing:.01em; white-space:normal; overflow-wrap:anywhere; }

/* Column labels inside each cell: read aloud always, shown only when the columns stack. */
.rqd-k{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.rqd-chip{
  display:inline-block; height:1.5rem; line-height:1.5rem; padding:0 .55rem; vertical-align:middle;
  background:var(--rqd-accent); color:#11141b;
  font-family:var(--rqd-mono); font-weight:600; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
}
.rqd-meta{ font-size:.8rem; color:var(--rqd-soft); }

/* Footer row. */
.rqd-foot{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem 1rem;
  padding:1rem var(--rqd-pad); background:var(--rqd-tint); border-top:3px solid var(--rqd-ink);
}
.rqd-figure{ font-family:var(--rqd-display); font-weight:800; font-size:1.3rem; line-height:1.15; letter-spacing:-.01em; }
.rqd-btn, .rqd-btn:visited{
  display:inline-block; padding:.75rem 1.1rem; background:var(--rqd-ink); color:#fff;
  font-family:var(--rqd-sans); font-weight:600; font-size:.92rem; line-height:1.2; text-decoration:none;
  border:3px solid var(--rqd-ink);
}
.rqd-btn:hover{ background:var(--rqd-accent); border-color:var(--rqd-accent); color:#fff; }

/* Narrow: the columns stack. Part number and status on the first row, quantity and target on the second. */
@container (max-width: 31rem){
  .rqd-demo{ --rqd-pad:.9rem; }
  .rqd-cols{ display:none; }
  .rqd-list{ border-top:3px solid var(--rqd-ink); }
  .rqd-line{
    grid-template-columns:5rem minmax(0,1fr) auto;
    grid-template-areas:"mpn mpn status" "qty date date" "meta meta meta";
    column-gap:1rem; row-gap:.15rem;
  }
  .rqd-status{ justify-self:end; }
  .rqd-qty .rqd-k, .rqd-date .rqd-k{
    position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none;
    margin-right:.45em; color:var(--rqd-soft);
  }
  .rqd-foot{ flex-direction:column; align-items:stretch; }
  .rqd-btn{ text-align:center; }
}

/* States the script sets. The block keeps its finished size throughout, so nothing below it moves. */
.rqd-wait .rqd-status, .rqd-wait .rqd-meta, .rqd-foot.rqd-wait{ visibility:hidden; }
.rqd-in .rqd-chip{ animation:rqd-pop .22s cubic-bezier(.2,.9,.3,1.3) both; }
.rqd-in .rqd-meta{ animation:rqd-rise .28s ease-out both; }
.rqd-foot.rqd-in{ animation:rqd-rise .3s ease-out both; }
.rqd-caret::after{
  content:""; display:inline-block; width:.55em; height:1.05em; margin-left:.08em; vertical-align:-.17em;
  background:var(--rqd-accent); animation:rqd-blink .7s steps(1) infinite;
}

/* Before the script takes the block over, the list waits a moment so the finished state does not flash and clear.
   If the script never arrives, the finished list shows after 1.5 s. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
  .rqd-demo:not(.rqd-live) .rqd-list, .rqd-demo:not(.rqd-live) .rqd-foot{
    visibility:hidden; animation:rqd-failsafe 0s 1.5s forwards;
  }
}

@media (prefers-reduced-motion: reduce){
  .rqd-demo *, .rqd-demo *::before, .rqd-demo *::after{ animation:none !important; transition:none !important; }
}

@keyframes rqd-pop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@keyframes rqd-rise{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes rqd-blink{ 50%{ opacity:0; } }
@keyframes rqd-failsafe{ to{ visibility:visible; } }