/* ---- report routing (D25) — styles owned by mod/report.js, queue.js, myrequests.js ---- */

/* Machine / Building / Other on the report form. Same look as the search
   segments, but sized for a thumb: this is the one choice on the form that
   cannot be defaulted, so it must not be missable. */
.catpick{display:flex; gap:8px; margin-top:4px;}
.catpick button.seg{flex:1; min-height:50px; font-size:14.5px; border-radius:var(--r-md);}

/* Category pill on queue and My Requests cards. Neutral on purpose — the
   coloured pill next to it is the status, and two colours would fight. */
.pill.cat{color:var(--text); border-style:dashed;}

/* The queue's cards wrap their pills on a narrow phone rather than overflow. */
.item .h{flex-wrap:wrap;}

/* ---- Safety related (D71) — owner, 2026-09-04: "a check mark on a seperate
   spot that says safety related, so it gives it a high priority level and
   also will in the work queue". The check mark is its own row on the three
   forms; the card says SAFETY in words with a heavy edge — the word and
   the weight carry it in greyscale (rule 8), the colour only helps. */
.safetyrow{margin-top:12px; border:1.5px solid var(--line); border-radius:var(--r-md); padding:10px 12px !important;}
.safetyrow input{width:22px; height:22px;}
.safetyrow b{font-weight:700;}
.pill.safety{color:var(--bad); border:2px solid var(--bad); font-weight:800; letter-spacing:.04em;}
.item.safety{border-left:6px solid var(--bad);}
html[data-theme="light"] .pill.safety{color:var(--bad); border-color:var(--bad);}

/* ---- the reporter's marked spot (owner, 2026-09-02) ----
   On the report form: the "spot marked" row with Change / Remove. On queue
   and My Requests cards: a tappable pill that opens the map centred there. */
.spotrow{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
.spotrow .spacer{flex:1;}
.pill.spot{cursor:pointer; border-style:dashed; color:var(--text);}
.pill.spot:hover{border-color:var(--accent); color:var(--accent);}

/* ---- Requests (D70) — owner, 2026-09-04: "too much on one page and not
   evenly spaced". One bar: the search and a Filters button. One row of
   status chips, spread evenly. Everything else folds away under Filters, in
   labelled rows with the same gap. The count line carries Clear. ---- */
.reqbar{display:flex; gap:10px;}
.reqbar input{flex:1; min-width:0;}
.reqbar button{width:auto; flex:none; padding:0 16px; white-space:nowrap;}
.reqbar button.on{color:var(--accent); border-color:var(--accent-line); background:var(--accent-dim);}
.reqstatus{display:flex; gap:8px; margin:10px 0 0;}
.reqstatus button.seg{flex:1; min-height:36px; font-size:13px; padding:5px 8px;}
.reqmore{display:none; margin-top:10px; padding:4px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel);}
.reqmore.open{display:block;}
.reqrow{display:grid; grid-template-columns:84px 1fr; align-items:center; gap:10px; padding:10px 0;}
.reqrow + .reqrow{border-top:1px solid var(--line);}
.reqrow > label{margin:0; font-size:12.5px; color:var(--muted);}
.reqrow .segs{margin:0; gap:8px;}
.reqrow .dates{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.reqrow .dates input{width:auto; flex:none; min-height:36px; padding:4px 10px; font-size:13px;}
.reqrow .dates span{font-size:12.5px; color:var(--muted);}
.reqcount{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0 4px; font-size:12.5px; color:var(--muted);}
.reqcount button{width:auto; flex:none; min-height:30px; padding:4px 11px; font-size:12.5px;}
.reqlist .item .h button.small{width:auto; flex:none; min-height:30px; padding:4px 11px; font-size:12.5px;}
.reqlist .item .m + .m{margin-top:4px;}
@media (max-width:560px){
  .reqrow{grid-template-columns:1fr; gap:6px;}
  .reqstatus{flex-wrap:wrap;}
  .reqstatus button.seg{flex:1 1 30%;}
}