/* WX Support - the look of the "Report a problem" form wxsupport.js draws
   (support requests, owner decision 6 Oct 2026). Loaded beside theme.css in
   two hosts - the Device Manager and the client area's Support page - so
   every rule here sits under its own .wxsup scope and every colour is a theme
   token: both hosts show the form in the same clothes, light or dark.
   Nothing is fetched from anywhere: no font, no picture, no outside address.

   The scrim is NOT the theme's reserved .modal-bg: the Device Manager's own
   keyboard handler stands down whenever a .modal-bg is on the page, and this
   dialog answers Escape itself. */

.wxsup-scrim{position:fixed;inset:0;z-index:var(--z-aipanel);display:flex;
  align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto}
.wxsup-scrim::before{content:"";position:fixed;inset:0;background:var(--text);opacity:.55}

.wxsup-scrim .wxsup{position:relative;width:620px;max-width:100%;background:var(--surface);
  color:var(--text);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--elev-3);font-family:var(--sans);font-size:var(--fs-3);
  display:flex;flex-direction:column;min-width:0}

.wxsup-scrim .wxsup-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--masthead);
  color:var(--masthead-txt);border-radius:var(--radius) var(--radius) 0 0}
.wxsup-scrim .wxsup-title{margin:0;font-size:var(--fs-4);font-weight:600}
.wxsup-scrim .wxsup-x{appearance:none;background:none;border:0;color:inherit;cursor:pointer;
  font:inherit;font-size:20px;line-height:1;padding:2px 6px;opacity:.85}
.wxsup-scrim .wxsup-x:hover{opacity:1}

.wxsup-scrim .wxsup-form,.wxsup-scrim .wxsup-done{display:flex;flex-direction:column;
  gap:var(--sp-3);padding:var(--sp-4)}
.wxsup-scrim .wxsup-form[hidden],.wxsup-scrim .wxsup-done[hidden],
.wxsup-scrim [hidden]{display:none}
.wxsup-scrim .wxsup-job{margin:0;color:var(--text-mid);max-width:70ch}

.wxsup-scrim .wxsup-context{display:grid;grid-template-columns:max-content minmax(0,1fr);
  gap:var(--sp-1) var(--sp-3);margin:0;padding:var(--sp-2) var(--sp-3);
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
  font-size:var(--fs-2)}
.wxsup-scrim .wxsup-context dt{color:var(--text-dim);font-weight:600}
.wxsup-scrim .wxsup-context dd{margin:0;overflow-wrap:anywhere}

.wxsup-scrim .wxsup-field{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.wxsup-scrim .wxsup-field label,.wxsup-scrim legend{font-size:var(--fs-2);font-weight:600;
  color:var(--text-mid)}
.wxsup-scrim input[type=text],.wxsup-scrim input[type=email],.wxsup-scrim input[type=tel],
.wxsup-scrim textarea{font-family:var(--sans);font-size:var(--fs-3);padding:7px 10px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  color:var(--text);min-width:0;width:100%;box-sizing:border-box}
.wxsup-scrim textarea{resize:vertical;min-height:96px;line-height:1.45}
.wxsup-scrim input:focus-visible,.wxsup-scrim textarea:focus-visible,
.wxsup-scrim button:focus-visible,.wxsup-scrim summary:focus-visible,
.wxsup-scrim a:focus-visible{outline:2px solid var(--wx);outline-offset:1px}
.wxsup-scrim .wxsup-hint{margin:0;font-size:var(--fs-2);color:var(--text-dim)}

.wxsup-scrim fieldset{margin:0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);
  border-radius:var(--radius);min-width:0}
.wxsup-scrim .wxsup-urgency{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.wxsup-scrim .wxsup-radio,.wxsup-scrim .wxsup-check{display:inline-flex;align-items:center;
  gap:var(--sp-1);cursor:pointer;min-height:28px}
.wxsup-scrim .wxsup-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-2)}
.wxsup-scrim .wxsup-contact legend{grid-column:1 / -1}

.wxsup-scrim .wxsup-shot-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.wxsup-scrim .wxsup-shot-name{font-size:var(--fs-2);color:var(--text-mid);overflow-wrap:anywhere}

.wxsup-scrim .wxsup-help{border-left:3px solid var(--wx);background:var(--surface2);
  padding:var(--sp-2) var(--sp-3)}
.wxsup-scrim .wxsup-help-lead{margin:0 0 var(--sp-1);font-size:var(--fs-2);color:var(--text-mid)}
.wxsup-scrim .wxsup-help-list{list-style:none;margin:0;padding:0}
.wxsup-scrim .wxsup-help-list li{padding:var(--sp-1) 0}
.wxsup-scrim .wxsup-help-hit{font:inherit;font-weight:600;color:var(--navy);background:none;
  border:0;padding:0;cursor:pointer;text-align:left}
.wxsup-scrim .wxsup-help-hit:hover{text-decoration:underline}
.wxsup-scrim .wxsup-help-snippet{margin:2px 0 0;font-size:var(--fs-2);color:var(--text-mid)}

.wxsup-scrim .wxsup-diag{display:flex;flex-direction:column;gap:var(--sp-1)}
.wxsup-scrim .wxsup-diag-out{border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface2);padding:var(--sp-2) var(--sp-3)}
.wxsup-scrim .wxsup-diag-list{margin:var(--sp-1) 0;padding-left:var(--sp-4);font-size:var(--fs-2)}

.wxsup-scrim .wxsup-note{margin:0;font-size:var(--fs-2);color:var(--text-mid);
  border-left:3px solid var(--st-warn);padding:var(--sp-1) var(--sp-3);background:var(--surface2)}
.wxsup-scrim .wxsup-status{margin:0;font-size:var(--fs-2);color:var(--text-mid)}
.wxsup-scrim .wxsup-status:empty{display:none}
.wxsup-scrim .wxsup-error{color:var(--text);border-left:3px solid var(--st-fault);
  padding-left:var(--sp-2)}

.wxsup-scrim .wxsup-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap}
.wxsup-scrim .wxsup-done-line{margin:0;font-size:var(--fs-4);color:var(--text-bright)}
.wxsup-scrim .wxsup-link{color:var(--navy);font-weight:600}

.wxsup-scrim .wxsup-outbox{border-top:1px solid var(--border);padding:var(--sp-2) var(--sp-4) var(--sp-3);
  font-size:var(--fs-2)}
.wxsup-scrim .wxsup-outbox summary{cursor:pointer;color:var(--text-mid);font-weight:600}
.wxsup-scrim .wxsup-out-list{list-style:none;margin:var(--sp-2) 0 0;padding:0}
.wxsup-scrim .wxsup-out-row{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);
  padding:var(--sp-1) 0;border-top:1px solid var(--border)}
.wxsup-scrim .wxsup-out-row:first-child{border-top:0}
.wxsup-scrim .wxsup-out-subject{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.wxsup-scrim .wxsup-out-state{color:var(--text-dim)}
.wxsup-scrim .wxsup-st-failed{color:var(--text);font-weight:600}

@media(max-width:640px){
  .wxsup-scrim{padding:8px}
  .wxsup-scrim .wxsup-contact{grid-template-columns:minmax(0,1fr)}
  .wxsup-scrim .wxsup-form,.wxsup-scrim .wxsup-done{padding:var(--sp-3)}
  .wxsup-scrim .wxsup-actions .btn{flex:1 1 auto;min-height:40px}
}
@media(pointer:coarse){
  .wxsup-scrim .wxsup-radio,.wxsup-scrim .wxsup-check{min-height:40px}
}