/* Request rollup — the compact multi-source "waiting on you" block on My
 * Devices (js/request-rollup.js). Reuses `.reqcard`/`.reqhead`/`.reqtext`/
 * `.reqeyebrow`/`.reqactions`/`.reqdecisions`/`.pill` from app.css so a row
 * here looks like the same kind of thing as a row on the full Requests
 * screen; only the additions specific to this compact, mixed-kind list live
 * here.
 */

#requestRollupMount > .rollup-card { margin: 0 0 14px; }

#requestRollupMount .rollup-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

#requestRollupMount .rollup-row { margin: 0; }

/* THE KIND BADGE IS NEUTRAL ON PURPOSE. UI-DIRECTION-2026-08-22 §4 reserves
 * cyan/mint/amber/coral for real state (trusted, healthy, waiting,
 * destructive); "this row is a Website ask" is not state, so it stays the
 * same undyed pill every other label-only tag on this page uses. */
#requestRollupMount .rollup-kindpill {
  margin-bottom: 6px;
}

#requestRollupMount .rollup-noaction {
  margin: 8px 0 0;
}

#requestRollupMount .rollup-source-err {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* The free-text help-ask reply. `.inp` already sets the 16px floor that
 * keeps iOS Safari from zooming the page on focus; this only sets the
 * compact-block rhythm around it. */
#requestRollupMount .rollup-reply > textarea.inp {
  display: block;
  width: 100%;
  min-height: 46px;
  max-height: 160px;
  margin-bottom: 8px;
}

@media (max-width: 699px) {
  #requestRollupMount .rollup-row .reqactions {
    flex-direction: column;
    align-items: stretch;
  }

  #requestRollupMount .rollup-row .reqactions > .iconbtn,
  #requestRollupMount .rollup-row .reqactions > .ghost {
    min-height: 44px;
    width: 100%;
  }
}