/* Daily Site Report wizard — friendly centered popup.
 *
 * The wizard is a modal, not a page section: one question at a time, everything
 * else dimmed away. The whole point is that a site engineer opening this sees a
 * single question and a Next button, and never a form.
 *
 * Brand: navy #1e3a5f, gold #c9a961 — same pair the printed report uses.
 */

/* ── Who carries the token set, and why it is TWO selectors ──────────────────
 *
 * Batch 12 addendum item 3. The type-ahead suggestion list is portalled to
 * <body> (it has to be — see the note above .dsrw-ta-list), which puts it
 * OUTSIDE .dsrw-backdrop. Custom properties inherit down the DOM tree, so a
 * list living at body level inherited none of these: every
 * `background: var(--dsrw-surface)` on it resolved to nothing, and an invalid
 * background computes to transparent. That is the see-through dropdown with
 * catalog rows printing through the Next button.
 *
 * So the list declares its own copy. Adding the selector here — rather than
 * duplicating the values — means the dark and black re-pointings in
 * arbah-appearance.css only need the same one-line selector change, and no
 * theme can ever have the tokens for the modal but not for its dropdown.
 * ──────────────────────────────────────────────────────────────────────────── */
.dsrw-backdrop,
.dsrw-ta-list {
  /* Local token set. The LIGHT values below are the wizard's original
     hard-coded hexes, unchanged — light mode paints exactly as before.
     Dark and Black re-point these same names in arbah-appearance.css, so
     the wizard follows the active theme without a second copy of its
     rules. */
  --dsrw-brand:#1e3a5f; --dsrw-brand-deep:#16304f;
  /* brand as TEXT/border vs brand as a SOLID FILL: identical in light,
     but they must diverge on a dark ground — navy text disappears while a
     navy button is still correct. --dsrw-on-brand is whatever reads on the fill. */
  --dsrw-brand-text:#1e3a5f; --dsrw-on-brand:#fff;
  --dsrw-gold:#c9a961; --dsrw-gold-ink:#92610a; --dsrw-gold-ink-2:#92720e;
  --dsrw-gold-border:#f3d9a4; --dsrw-gold-soft:#fdf4dd;
  --dsrw-gold-wash:#fffdf6; --dsrw-gold-wash-2:#fffdf7; --dsrw-gold-wash-3:#fffbef;
  --dsrw-surface:#fff; --dsrw-surface-2:#fcfdfe; --dsrw-card:#fbfcfe;
  --dsrw-sunken:#f8fafc; --dsrw-sunken-2:#f5f8fc; --dsrw-raised:#f1f5f9;
  --dsrw-track:#e9edf3;
  --dsrw-border-soft:#eef2f6; --dsrw-border-soft-2:#e2e9f2; --dsrw-border-hover:#e2e8f0;
  --dsrw-border-2:#e5e7eb; --dsrw-border:#dbe2ea; --dsrw-border-dash:#cbd5e1;
  --dsrw-ink:#0f172a; --dsrw-ink-strong:#334155; --dsrw-ink-muted:#475569;
  --dsrw-ink-soft:#64748b; --dsrw-ink-subtle:#94a3b8;
  --dsrw-ok:#15803d; --dsrw-ok-soft:#f0fdf4;
  --dsrw-danger:#b91c1c; --dsrw-danger-2:#dc2626; --dsrw-danger-soft:#fee2e2;
  --dsrw-scrim:rgba(15, 23, 42, 0.55);
  --dsrw-card-shadow:0 28px 70px rgba(15, 23, 42, 0.30), 0 3px 10px rgba(15, 23, 42, 0.10);
  --dsrw-focus-ring:rgba(30, 58, 95, 0.10);
  /* The one chips-above-an-input gap. Not themed — spacing is structure, not
     colour, so every appearance uses the same number. See .dsrw-chipfield. */
  --dsrw-chip-gap:10px;
}

/* LAYOUT, backdrop only. This split is load-bearing: the rule above is shared
   with .dsrw-ta-list so the portalled dropdown inherits the tokens, and if the
   backdrop's own geometry lived in the same block the dropdown would inherit
   `position: fixed; inset: 0`, the scrim background, the flex centring and the
   blur — a full-screen dimmed sheet instead of a 300px list. Tokens are shared;
   geometry is not. */
.dsrw-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--dsrw-scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: dsrw-fade 160ms ease-out;
}

@keyframes dsrw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dsrw-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.dsrw-card {
  width: 100%;
  max-width: 660px;
  max-height: min(90vh, 860px);
  display: flex;
  flex-direction: column;
  background: var(--dsrw-surface);
  border-radius: 22px;
  box-shadow: var(--dsrw-card-shadow);
  overflow: hidden;
  animation: dsrw-rise 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .dsrw-backdrop, .dsrw-card { animation: none; }
}

/* ---------- document viewer (the v16 report on screen) ---------- */
/* The document viewer should use the height it is given rather than shrinking
   to its iframe's min-height — a report is meant to be read, not peeked at
   through a letterbox. */
.dsrw-card--doc { max-width: 940px; height: min(92vh, 900px); }
.dsrw-doc-wrap {
  flex: 1;
  min-height: 0;
  background: var(--dsrw-raised);
  padding: 10px;
}
.dsrw-doc {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 1px solid var(--dsrw-border-2);
  border-radius: 8px;
  background: var(--dsrw-surface);
  display: block;
}
@media (max-width: 560px) {
  /* On a phone the A4 layout would need pinch-zoom; give it the full sheet and
     let the frame scroll instead. */
  .dsrw-doc-wrap { padding: 0; }
  .dsrw-doc { border-radius: 0; border-inline: none; }
}

/* ---------- header ---------- */
.dsrw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 0;
}
.dsrw-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dsrw-gold);
}
.dsrw-close {
  border: none;
  background: var(--dsrw-raised);
  color: var(--dsrw-ink-muted);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease;
}
.dsrw-close:hover { background: var(--dsrw-border-hover); color: var(--dsrw-ink); }

/* ---------- phase progress ---------- */
.dsrw-phases { padding: 12px 22px 4px; }
.dsrw-phase-track {
  display: flex;
  gap: 4px;
}
.dsrw-seg {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: var(--dsrw-track);
  overflow: hidden;
}
.dsrw-seg > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--dsrw-brand), var(--dsrw-gold));
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dsrw-seg.is-done > i { width: 100%; }
.dsrw-seg.is-current > i { width: 55%; }
.dsrw-phase-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  font-size: 12px;
  color: var(--dsrw-ink-soft);
}
.dsrw-phase-name { font-weight: 700; color: var(--dsrw-brand-text); }

/* ---------- body ---------- */
.dsrw-body {
  padding: 10px 22px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.dsrw-q {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--dsrw-ink);
  margin: 10px 0 4px;
  text-align: center;
}
.dsrw-sub {
  font-size: 14px;
  color: var(--dsrw-ink-soft);
  text-align: center;
  margin: 0 auto 18px;
  max-width: 46ch;
  line-height: 1.5;
}
.dsrw-field { margin-bottom: 14px; }
.dsrw-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--dsrw-ink-muted);
  margin-bottom: 6px;
}

.dsrw-input, .dsrw-textarea, .dsrw-select {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--dsrw-border);
  border-radius: 13px;
  font-size: 16px;           /* >=16px stops iOS zooming on focus */
  font-family: inherit;
  color: var(--dsrw-ink);
  background: var(--dsrw-surface);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.dsrw-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.dsrw-input:focus, .dsrw-textarea:focus, .dsrw-select:focus {
  outline: none;
  border-color: var(--dsrw-brand-text);
  box-shadow: 0 0 0 4px var(--dsrw-focus-ring);
}

/* ---------- the one-tap "nothing today" affordance ---------- */
.dsrw-nothing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 15px 18px;
  margin-bottom: 14px;
  border: 1.5px solid var(--dsrw-border);
  border-radius: 15px;
  background: var(--dsrw-sunken);
  color: var(--dsrw-ink-strong);
  font-size: 16px;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  transition: all 140ms ease;
}
.dsrw-nothing:hover { border-color: var(--dsrw-gold); background: var(--dsrw-gold-wash); }
.dsrw-nothing.is-on {
  border-color: var(--dsrw-ok);
  background: var(--dsrw-ok-soft);
  color: var(--dsrw-ok);
}
.dsrw-nothing .tick { font-size: 18px; }

/* ---------- entry cards inside a list step ---------- */
.dsrw-row {
  border: 1.5px solid var(--dsrw-border-soft);
  border-radius: 15px;
  padding: 13px;
  margin-bottom: 11px;
  background: var(--dsrw-card);
}
.dsrw-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dsrw-brand-text);
}
.dsrw-row-del {
  border: none;
  background: transparent;
  color: var(--dsrw-ink-subtle);
  cursor: pointer;
  font-size: 13px;
  padding: 3px 7px;
  border-radius: 7px;
}
.dsrw-row-del:hover { background: var(--dsrw-danger-soft); color: var(--dsrw-danger); }

.dsrw-add {
  width: 100%;
  padding: 12px;
  border: 1.5px dashed var(--dsrw-border-dash);
  border-radius: 13px;
  background: var(--dsrw-surface);
  color: var(--dsrw-brand-text);
  font-size: 15px;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  transition: all 140ms ease;
}
.dsrw-add:hover { border-color: var(--dsrw-brand-text); background: var(--dsrw-sunken); }

/* ---------- progress picker ---------- */
.dsrw-pct-readout {
  display: flex; align-items: baseline; justify-content: center;
  gap: 12px; margin-bottom: 10px;
}
.dsrw-pct-value { font-size: 40px; font-weight: 800; color: var(--dsrw-brand-text); line-height: 1; }
.dsrw-pct-since { font-size: 13px; color: var(--dsrw-ink-subtle); }

.dsrw-range {
  width: 100%;
  height: 34px;                 /* generous hit area, not a hairline */
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.dsrw-range::-webkit-slider-runnable-track {
  height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, var(--dsrw-brand), var(--dsrw-gold));
}
.dsrw-range::-moz-range-track {
  height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, var(--dsrw-brand), var(--dsrw-gold));
}
.dsrw-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -10px;
  border-radius: 50%; background: var(--dsrw-surface);
  border: 3px solid var(--dsrw-brand-text);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
  cursor: pointer;
}
.dsrw-range::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--dsrw-surface); border: 3px solid var(--dsrw-brand-text); cursor: pointer;
}

.dsrw-pct-marks {
  display: flex; gap: 7px; overflow-x: auto;
  padding: 12px 2px 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.dsrw-pct-mark {
  flex: 0 0 auto;
  min-width: 52px; min-height: 44px;    /* comfortable thumb target */
  border: 1.5px solid var(--dsrw-border); border-radius: 12px;
  background: var(--dsrw-surface); color: var(--dsrw-ink-strong);
  font-size: 15px; font-weight: 650; font-family: inherit;
  cursor: pointer; transition: all 120ms ease;
}
.dsrw-pct-mark:hover { border-color: var(--dsrw-gold); }
.dsrw-pct-mark.is-on { border-color: var(--dsrw-brand); background: var(--dsrw-brand); color: var(--dsrw-on-brand); }

/* ---------- catalog type-ahead ---------- */
.dsrw-ta { position: relative; }
.dsrw-input.is-offcatalog {
  border-color: var(--dsrw-gold);
  background: var(--dsrw-gold-wash);
}
.dsrw-ta-flag {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  inset-inline-end: 12px;
  font-size: 11px; font-weight: 700;
  color: var(--dsrw-gold-ink-2); background: var(--dsrw-gold-soft);
  padding: 3px 8px; border-radius: 99px;
  pointer-events: none;
}
/* The suggestion list is rendered into <body>, not into the wizard card.
   It has to be: the card is `overflow: hidden` and the body it sits in is
   `overflow-y: auto`, so an absolutely-positioned list was clipped by both —
   a 268px list showed about two rows and the wheel scrolled the step behind it.
   Position/size come from the input's rect at open time (see TypeAhead.js);
   only the appearance lives here. */
.dsrw-ta-list {
  position: fixed;
  z-index: 1300;              /* above .dsrw-backdrop (1200) */
  margin: 0; padding: 5px;
  list-style: none;
  /* Batch 12 addendum item 3. `background: var(--x)` with --x undefined is an
     INVALID declaration, and an invalid background computes to TRANSPARENT —
     which is exactly what happened here: the list is portalled to <body>, so it
     inherited none of the .dsrw-backdrop tokens and turned see-through, printing
     catalog rows through the Next button. The token resolves now because this
     selector carries its own copy of the set (see the note at the top of this
     file). No literal hex fallback: the wizard is token-driven by contract, and
     test/batch12-addendum.test.mjs asserts the list paints opaque in all four
     appearances, which is a stronger guarantee than a hard-coded colour.
     `isolation` keeps the stacking context its own. */
  background: var(--dsrw-surface);
  border: 1px solid var(--dsrw-border-2);
  isolation: isolate;
  border-radius: 13px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
  overflow-y: auto;
  overscroll-behavior: contain;   /* reaching the end must not scroll the step */
  -webkit-overflow-scrolling: touch;
}
/* Opening upward: the shadow should fall away from the input, not onto it. */
.dsrw-ta-list.is-up { box-shadow: 0 -14px 34px rgba(15, 23, 42, 0.16); }
.dsrw-ta-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
}
.dsrw-ta-item.is-hi { background: var(--dsrw-raised); }
.dsrw-ta-item { min-height: 44px; }        /* comfortable thumb target */
.dsrw-ta-head {
  padding: 7px 12px 5px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--dsrw-gold);
}
.dsrw-ta-nomatch {
  padding: 11px 12px;
  font-size: 13.5px; color: var(--dsrw-ink-soft); line-height: 1.45;
}
.dsrw-ta-primary { font-size: 15px; font-weight: 600; color: var(--dsrw-ink); }
.dsrw-ta-secondary { font-size: 12.5px; color: var(--dsrw-ink-subtle); }

/* ---------- tap chips ---------- */
.dsrw-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── The chips-above-an-input standard (Batch 12 addendum item 4) ────────────
 *
 * Every place in the wizard where tap-chips sit above the box they fill —
 * equipment and materials "what was it used for", the visitor outcome pills,
 * the quantity units, schedule chips — was a bare <div> with no spacing, so the
 * chips pressed straight against the input and the two read as one blob.
 *
 * ONE standard, expressed once as a token, so a future step cannot invent its
 * own. The value is deliberately smaller than `.dsrw-field`'s 14px bottom
 * margin: within a field the chips and their input must group together more
 * tightly than one field groups with the next, or the eye reads the chips as
 * belonging to the field above them.
 *
 *   between fields ............ 14px  (.dsrw-field)
 *   chips ↔ their input ....... 10px  (--dsrw-chip-gap)   ← this
 *   chip ↔ chip ................ 8px  (.dsrw-chips gap)
 *
 * `gap` on a flex column owns ALL the vertical spacing inside the wrapper, so
 * the children's own margins are zeroed below — two spacing systems stacked on
 * the same axis is how "consistent" quietly stops being true.
 * ──────────────────────────────────────────────────────────────────────────── */
.dsrw-chipfield {
  display: flex;
  flex-direction: column;
  gap: var(--dsrw-chip-gap);
}
.dsrw-chipfield > .dsrw-chips-head,
.dsrw-chipfield > .dsrw-qty-hint { margin: 0; }
.dsrw-chip {
  padding: 10px 15px;
  border: 1.5px solid var(--dsrw-border);
  border-radius: 99px;
  background: var(--dsrw-surface);
  color: var(--dsrw-ink-strong);
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 130ms ease;
}
.dsrw-chip:hover { border-color: var(--dsrw-gold); background: var(--dsrw-gold-wash); }
.dsrw-chip.is-on { border-color: var(--dsrw-brand); background: var(--dsrw-brand); color: var(--dsrw-on-brand); }

/* ---------- yes/no pills ---------- */
.dsrw-choices { display: flex; gap: 9px; flex-wrap: wrap; }
.dsrw-choice {
  flex: 1;
  min-width: 96px;
  padding: 13px 10px;
  border: 1.5px solid var(--dsrw-border);
  border-radius: 13px;
  background: var(--dsrw-surface);
  color: var(--dsrw-ink-strong);
  font-size: 15px;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  transition: all 130ms ease;
}
.dsrw-choice:hover { border-color: var(--dsrw-gold); }
.dsrw-choice.is-on {
  border-color: var(--dsrw-brand);
  background: var(--dsrw-brand);
  color: var(--dsrw-on-brand);
}

/* ---------- confirm-style autofilled value ---------- */
.dsrw-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  border-radius: 15px;
  background: var(--dsrw-sunken);
  border: 1.5px solid var(--dsrw-border-2);
  margin-bottom: 12px;
}
.dsrw-confirm-val { font-size: 19px; font-weight: 700; color: var(--dsrw-brand-text); }
.dsrw-confirm-hint { font-size: 12px; color: var(--dsrw-ink-subtle); margin-top: 2px; }
.dsrw-link {
  border: none; background: none; padding: 0;
  color: var(--dsrw-brand-text); font-size: 14px; font-weight: 650;
  text-decoration: underline; cursor: pointer; font-family: inherit;
}
.dsrw-note {
  font-size: 13px; color: var(--dsrw-ink-soft); line-height: 1.5;
  background: var(--dsrw-sunken); border: 1px solid var(--dsrw-border-soft);
  border-radius: 11px; padding: 10px 13px; margin-bottom: 12px;
}

/* ---------- quantity with units ---------- */
.dsrw-qty { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dsrw-qty-num { width: 104px; flex: none; }
.dsrw-qty-units { flex: 1 1 auto; min-width: 0; }
.dsrw-qty-hint { font-size: 12px; color: var(--dsrw-ink-subtle); margin: 6px 0 7px; }
/* A phone gets the number on its own line rather than a 60px-wide box. */
@media (max-width: 430px) {
  .dsrw-qty-num { width: 100%; }
  .dsrw-qty-units { flex-basis: 100%; }
}

/* A quiet heading over a row of chips fed from earlier answers. */
.dsrw-chips-head {
  font-size: 12px; font-weight: 650; color: var(--dsrw-ink-subtle);
  margin-bottom: 6px; letter-spacing: .01em;
}

/* ---------- total pill ---------- */
.dsrw-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 17px; border-radius: 14px;
  background: var(--dsrw-gold-soft); color: var(--dsrw-brand-text); font-weight: 700; font-size: 16px;
}

/* ---------- review ---------- */
.dsrw-review-sec {
  border: 1.5px solid var(--dsrw-border-soft); border-radius: 15px;
  padding: 13px 15px; margin-bottom: 10px; background: var(--dsrw-surface);
}
.dsrw-review-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 5px;
}
.dsrw-review-title { font-size: 14px; font-weight: 700; color: var(--dsrw-brand-text); }
.dsrw-review-val { font-size: 14px; color: var(--dsrw-ink-muted); line-height: 1.55; }
.dsrw-review-val.is-empty { color: var(--dsrw-ink-subtle); font-style: italic; }
.dsrw-review-alt { font-size: 12px; color: var(--dsrw-ink-subtle); }

/* ---------- incomplete-entry heads-up ----------
   A WARNING, never a block. Amber rather than red at the section level, because
   the worker may well have left it blank on purpose and the report sends either
   way; the dot itself is red so it is findable at a glance while scrolling. */
.dsrw-gap-count {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; margin-bottom: 12px;
  border: 1.5px solid var(--dsrw-gold-border); background: var(--dsrw-gold-wash-3); border-radius: 14px;
  color: var(--dsrw-gold-ink); font-size: 13.5px; font-weight: 650; line-height: 1.45;
}
.dsrw-gap-list { margin: 7px 0 0; padding: 0; list-style: none; }
.dsrw-gap {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; text-align: start;
  border: none; background: none; padding: 4px 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--dsrw-gold-ink); line-height: 1.45;
}
.dsrw-gap:hover .dsrw-gap-text { text-decoration: underline; }
.dsrw-gap-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dsrw-danger-2); transform: translateY(-1px);
}
.dsrw-review-sec.has-gap { border-color: var(--dsrw-gold-border); background: var(--dsrw-gold-wash-2); }
/* "Skipped" sits where the answer would have been, so it reads as the state of
   the section rather than as a note underneath it. */
.dsrw-review-skipped { font-size: 14px; font-weight: 650; padding: 2px 0; }

/* The "you got here from review" strip above the question. */
.dsrw-fromreview {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
  padding: 9px 13px; border-radius: 12px;
  background: var(--dsrw-sunken-2); border: 1px solid var(--dsrw-border-soft-2);
  font-size: 13px; color: var(--dsrw-brand-text);
}

/* ---------- footer ---------- */
.dsrw-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 22px;
  border-top: 1px solid var(--dsrw-border-soft); background: var(--dsrw-surface-2);
}
.dsrw-btn {
  padding: 12px 22px; border-radius: 13px;
  border: 1.5px solid var(--dsrw-border); background: var(--dsrw-surface); color: var(--dsrw-ink-strong);
  font-size: 15px; font-weight: 650; font-family: inherit; cursor: pointer;
  transition: all 130ms ease;
}
.dsrw-btn:hover:not(:disabled) { border-color: var(--dsrw-ink-subtle); }
.dsrw-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dsrw-btn-primary {
  border-color: var(--dsrw-brand);
  background: var(--dsrw-brand);
  color: var(--dsrw-on-brand);
  min-width: 132px;
}
.dsrw-btn-primary:hover:not(:disabled) { background: var(--dsrw-brand-deep); border-color: var(--dsrw-brand-deep); }
.dsrw-status { font-size: 12px; color: var(--dsrw-ink-subtle); text-align: center; flex: 1; }

/* ---------- done ---------- */
.dsrw-done { text-align: center; padding: 26px 10px 10px; }
.dsrw-done-mark {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--dsrw-ok-soft); color: var(--dsrw-ok);
  display: flex; align-items: center; justify-content: center;
  font-size: 31px; margin: 0 auto 14px;
}

/* ---------- photos grid ---------- */
.dsrw-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 13px; }
.dsrw-photo { border: 1.5px solid var(--dsrw-border-soft); border-radius: 14px; padding: 9px; background: var(--dsrw-card); }
.dsrw-photo-img {
  height: 104px; border-radius: 10px;
  background: var(--dsrw-raised); border: 1px dashed var(--dsrw-border-dash);
  background-size: cover; background-position: center;
}

@media (max-width: 560px) {
  .dsrw-backdrop { padding: 0; }
  .dsrw-card { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; }
  .dsrw-q { font-size: 20px; }
}