/* The return window (assets/return-window.js), projects/returns-item-by-item step 2.
   Its own file, beside the script, so styles.css (shared core, loaded by every page) is not touched.
   Colours are styles.css's tokens only, so the window follows whatever theme the page is in.
   Per item: the photo on the left, the engineer's picks and comment under it, the two buttons, then History. */

body.rw-open { overflow: hidden; }

.rw-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: var(--bg);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.rw-overlay[hidden] { display: none; }

.rw-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  background: var(--brand-dark); color: #fff;
  box-shadow: var(--shadow-header);
}
.rw-head h2 { margin: 0; font-size: 1.05rem; color: #fff; }
.rw-head .rw-sub { font-size: 0.82rem; opacity: 0.85; margin-top: 2px; }
.rw-head .rw-close { flex: none; width: auto; padding: 0.5rem 0.9rem; }

.rw-body { max-width: 720px; margin: 0 auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.rw-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-tools .rw-original { text-decoration: none; }

.rw-notice {
  margin: 0; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--card); border: 1px solid var(--border); color: var(--text);
}
.rw-notice-off, .rw-notice-offline { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.rw-notice-offline-copy { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }
.rw-notice-error { background: var(--error-bg); border-color: var(--error-border); color: var(--error); }
.rw-notice-done { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }

.rw-summary { margin: 0; font-weight: 600; color: var(--text-strong); }

.rw-return-note {
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--error-accent);
  border-radius: var(--radius-md); padding: 10px 12px;
}
.rw-return-note-by { font-size: 0.8rem; color: var(--text-muted); }
.rw-return-note p { margin: 4px 0 0; white-space: pre-wrap; }

.rw-item {
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--error-accent);
  border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 10px;
}
.rw-item[data-place="awaiting_review"], .rw-item[data-place="queued"] { border-left-color: var(--info-accent); }
.rw-item-muted { border-left-color: var(--border); box-shadow: none; background: var(--bg); padding: 8px 12px; }
.rw-muted-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-muted); }
.rw-item-muted .rw-item-label { font-weight: 600; }

.rw-item-top { display: flex; gap: 12px; align-items: flex-start; }
/* The engineer's photo keeps its own shape (inspection-qc-release-updates step 2, Josh 10-15: "Both show at their own
   shape"): a fixed width, the height the photo's own, never cropped to a square. */
.rw-photo {
  flex: none; width: 132px; min-height: 72px; border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
}
.rw-photo img { width: 100%; height: auto; max-height: 220px; object-fit: contain; display: block; }
.rw-photo-none { font-size: 0.78rem; color: var(--text-muted); text-align: center; padding: 6px; }
.rw-item-head { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rw-item-label { margin: 0; font-size: 1rem; color: var(--text-strong); overflow-wrap: anywhere; }
.rw-by { font-size: 0.8rem; color: var(--text-muted); }

.rw-pill {
  display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.rw-pill-tech { color: var(--error); background: var(--error-bg); border-color: var(--error-border); }
.rw-pill-review, .rw-pill-send { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.rw-pill-muted { color: var(--text-muted); background: var(--card); border-color: var(--border); }

.rw-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rw-reasons li {
  font-size: 0.8rem; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border);
}
.rw-comment { margin: 0; white-space: pre-wrap; color: var(--text); }
.rw-queued { margin: 0; color: var(--info); font-size: 0.88rem; }
.rw-error { margin: 0; color: var(--error); font-size: 0.88rem; }

.rw-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-actions .btn { flex: 1 1 auto; }
.rw-actions-wrap { display: flex; flex-direction: column; gap: 10px; }

.rw-form {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--border-soft); padding-top: 10px;
}
.rw-field { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rw-field legend, .rw-field label, .rw-label { font-weight: 600; font-size: 0.88rem; color: var(--text-strong); padding: 0; }
.rw-field textarea, .rw-field select, .rw-field input[type="text"] {
  width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--text);
}
.rw-choices { display: flex; flex-wrap: wrap; gap: 8px; }
/* What Did You Do? is four answers: two by two on a phone. */
.rw-choices[data-q="action"] .rw-choice { flex: 1 1 calc(50% - 4px); }
.rw-choice {
  flex: 1; font: inherit; font-weight: 700; padding: 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer;
}
.rw-choice-on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* The new photos: the shared photo box (photo-box.css), its boxes on their own line under the label, and every photo at
   its own shape. A filled box takes the photo's width at a fixed height, never wider than the card; an empty box and
   the + keep the box's square. Scoped to the window, so Install QC's boxes are unchanged. */
.rw-photos { min-width: 0; }
.rw-photos .ps-row { margin: 0; }
.rw-photos .pb-boxes { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.rw-photos .pb-box.filled { width: auto; height: auto; min-width: 0; max-width: 100%; }
.rw-photos .pb-box.filled .photo-thumb { position: relative; inset: auto; max-width: 100%; }
.rw-photos .pb-box.filled .photo-thumb img { width: auto; height: 6.5rem; max-width: 100%; object-fit: contain; }
.rw-photo-status:empty { display: none; }
.rw-photo-status[data-kind="warn"] { color: var(--warn); }

/* The work question's findings: the checklist's own card, inside the window's width. */
.rw-findings-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rw-findings .repair { margin-bottom: 8px; padding: 12px; min-width: 0; }
.rw-findings .repair input, .rw-findings .repair select, .rw-findings .repair textarea { max-width: 100%; box-sizing: border-box; }
.rw-add-finding { align-self: flex-start; width: auto; }
.rw-ev-finding { color: var(--text-strong); }
.rw-hint { margin: 0; font-size: 0.8rem; color: var(--text-muted); }

.rw-history summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--brand); }
.rw-history ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rw-ev { padding: 6px 8px; border-radius: var(--radius-sm); background: var(--bg); font-size: 0.85rem; }
.rw-ev-engineer { border-left: 3px solid var(--warn-accent); }
.rw-ev-crew { border-left: 3px solid var(--info-accent); }
.rw-ev-head { color: var(--text-muted); }
.rw-ev-head strong { color: var(--text-strong); }
.rw-ev-body { margin-top: 2px; white-space: pre-wrap; color: var(--text); }
.rw-ev-photos { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.rw-ev-photos figure { margin: 0; }
.rw-ev-photos img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--radius-sm); display: block; }
.rw-ev-photos figcaption { font-size: 0.72rem; color: var(--text-muted); }

@media (max-width: 380px) {
  .rw-photo { width: 104px; }
}

/* Laid in a record's Action Needed section (assets/record-sections.js) instead of over the page: the Annual's /inspect
   (step 5) and an Install QC's record on /qc-installations (step 6b) both put it there, so the rule lives here, once. */
.rs-body .rw-overlay { position: static; inset: auto; z-index: auto; overflow: visible; background: none; padding-bottom: 0; }
.rs-body .rw-head { position: static; padding: 0 0 8px; background: none; color: var(--text-strong); box-shadow: none; }
.rs-body .rw-head h2 { color: var(--text-strong); }
.rs-body .rw-head .rw-sub { color: var(--text-muted); opacity: 1; }
.rs-body .rw-head .rw-close { display: none; }
.rs-body .rw-body { padding: 0; max-width: none; }