/* ---- 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;}
/* A thumb, not a mouse (QA audit 2026-09-17). Four controls on this screen sat
   under the app's own --tap. Each selector below is written to WIN, which is
   the whole trick:
     .reqlist .item .h button.small is (0,4,1) and ties line 57, so it must sit
       AFTER it; app-ui.css:198 is only (0,2,1) and never reached it at all.
     .reqcount button.small carries the extra class on purpose: ".reqcount
       button" is (0,1,1), and skin.css:98 already puts button.small at 40px on
       the same (0,1,1) from a LATER sheet, so the bare form would lose on
       order and this rule would do nothing.
     .reqrow .dates input is (0,2,1) and ties line 53, so it too must sit after
       it. No other sheet gives an input a coarse height.
     .reqstatus button.seg is (0,2,1) and ties line 45. The bare button.seg
       rule in app-ui.css is (0,1,1) and cannot lift these back up. */
@media (pointer:coarse){
  .reqlist .item .h button.small{min-height:var(--tap);}
  .reqcount button.small{min-height:var(--tap);}
  .reqrow .dates input{min-height:var(--tap);}
  .reqstatus button.seg{min-height:var(--tap);}
}
@media (max-width:560px){
  .reqrow{grid-template-columns:1fr; gap:6px;}
  .reqstatus{flex-wrap:wrap;}
  .reqstatus button.seg{flex:1 1 30%;}
}