/* Raptool Check — the ten screens an operator can meet.
 *
 * ONE FILE decides how every question screen looks, in the operator app and in
 * the builder's phone preview alike. The block of --sc-* variables just below
 * is the design guideline: change a number there and all ten screens follow.
 * Colours come from shared/theme.css (so light and dark come for free); size,
 * shape and rhythm come from here.
 *
 * Each screen is picked by data-screen on .run-body:
 *   status    OK / Deviation buttons          (ok_fail)
 *   menu      pick one from a list            (dropdown)
 *   choice    pick one of a few cards         (radio)
 *   checkbox  tick everything that applies    (checkbox)
 *   value     enter a number                  (number)
 *   meter     enter a meter reading           (odometer)
 *   scan      scan or type a code             (scan)
 *   photo     take a photo                    (photo)
 *   text      write a note                    (text, comment)
 *   signature sign with a finger              (signature)
 *   parts     the parts that were used        (parts, v4.28)
 *   time      the time it took                (time, v4.28)
 * (A heading is not a screen of its own: it is the line above the questions.)
 *
 * Nothing here is keyed on anything but data-screen and the existing control
 * classes, so no markup has to change when a number does.
 */

:root {
  /* ----- rhythm and shape ------------------------------------------------ */
  --sc-gap:           12px;
  --sc-radius:        var(--radius-l);
  --sc-border-w:      2px;

  /* ----- colour roles (all from the theme) ------------------------------- */
  --sc-surface:       var(--surface);
  --sc-surface-press: var(--surface-2);
  --sc-border:        var(--border-2);
  --sc-ink:           var(--text);
  --sc-muted:         var(--text-2);
  --sc-faint:         var(--text-3);
  --sc-accent:        var(--accent);
  --sc-accent-soft:   var(--accent-soft);
  --sc-accent-ink:    var(--accent-ink);
  --sc-good:          var(--ok);
  --sc-good-soft:     var(--ok-soft);
  --sc-warn:          var(--warn);
  --sc-warn-soft:     var(--warn-soft);
  --sc-bad:           var(--bad);
  --sc-bad-soft:      var(--bad-soft);

  /* ----- type ------------------------------------------------------------ */
  --sc-title-size:    24px;
  --sc-title-weight:  700;
  --sc-title-track:   -0.02em;
  --sc-label-size:    17px;

  /* ----- the badge tile above every question ----------------------------- */
  --sc-tile:          52px;
  --sc-tile-radius:   16px;
  --sc-tile-bg:       var(--sc-accent-soft);
  --sc-tile-ink:      var(--sc-accent);

  /* ----- sizes of the controls ------------------------------------------- */
  --sc-status-h:      148px;     /* status: the two big buttons */
  --sc-row-h:         62px;      /* menu, checkbox rows */
  --sc-card-h:        104px;     /* choice cards */
  --sc-field-h:       84px;      /* value field */
  --sc-field-size:    42px;
  --sc-display-h:     96px;      /* meter display */
  --sc-display-size:  44px;
  --sc-display-bg:    #0e1620;
  --sc-display-ink:   #8dffc0;
  --sc-scan-h:        168px;     /* scan viewfinder */
  --sc-photo-h:       196px;
  --sc-note-h:        220px;
  --sc-sign-h:        250px;
}
:root[data-theme="dark"] {
  --sc-display-bg:    #05090e;
  --sc-display-ink:   #74f2b0;
}

/* ================================================================ common */

.run-body[data-screen] .run-q {
  font-size: var(--sc-title-size); font-weight: var(--sc-title-weight);
  letter-spacing: var(--sc-title-track);
}
.sc-badge {
  width: var(--sc-tile); height: var(--sc-tile); margin-top: 14px;
  border-radius: var(--sc-tile-radius);
  background: var(--sc-tile-bg); color: var(--sc-tile-ink);
  display: flex; align-items: center; justify-content: center;
}
.sc-badge svg, .sc-glyph svg { width: 28px; height: 28px; display: block; }
.sc-glyph { display: inline-flex; }
.sc-step { display: none; }   /* only styles that print a big step number show it */
/* v4.17.1: the type icon and the title share one line (every design), less empty space above */
.sc-titlerow { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.run .run-body .sc-titlerow > .sc-badge.sc-badge { flex: none; width: 52px; height: 52px; min-width: 0; margin: 0; padding: 0; }
.run .run-body .sc-titlerow > .sc-badge.sc-badge svg { width: 26px; height: 26px; }
.run .run-body[data-screen] .sc-titlerow > .run-q.run-q { margin-top: 0; min-width: 0; flex: 1; }
.run .sc-titlerow ~ .flex.wrap { margin-top: 12px; }
.run-body[data-screen] .run-control { margin-top: 22px; }

/* v4.19.0 — check point icon: a check point with its own icon shows it in the title
   row's tile instead of the screen type's glyph (QCard.badge). With a colour (--qi, set
   on the tile) the tile takes a soft tint of the colour mixed into the design's own card
   colour, and the icon the colour mixed a little towards the design's text colour, so it
   keeps its contrast on light and dark designs alike. Designs whose tile is a solid
   colour use the colour itself as the tile, with white or dark ink (--qi-ink). Without a
   colour the tile keeps the design's own colours. Each design's frame (border, shadow,
   shape) stays as it is. */
.run .sc-titlerow > .sc-badge.has-icon.has-qi {
  background: color-mix(in srgb, var(--qi) 16%, var(--surface, #ffffff));
  color: color-mix(in srgb, var(--qi) 72%, var(--text, #0e1620));
}
.run:is([data-style="return"],[data-style="galley"],[data-style="storefront"],[data-style="bedrock"],[data-style="roadline"],[data-style="contrast"]) .sc-titlerow > .sc-badge.has-icon.has-qi {
  background: var(--qi); color: var(--qi-ink);
}
.run .sc-titlerow > .sc-badge.has-icon svg { color: inherit; }
/* Signal prints the step number instead of a tile; with an icon, the icon stands before it */
.run[data-style="signal"] .sc-titlerow > .sc-badge.has-icon.sc-badge { width: auto; height: auto; display: flex; align-items: center; gap: 8px; background: transparent; }
.run[data-style="signal"] .sc-titlerow > .sc-badge.has-icon > svg { display: block; width: 40px; height: 40px; }
.run[data-style="signal"] .sc-titlerow > .sc-badge.has-icon.has-qi { color: var(--qi); }

/* =============================================================== 1 status */

.run-body[data-screen="status"] .okfail { gap: var(--sc-gap); }
.run-body[data-screen="status"] .okfail button {
  min-height: var(--sc-status-h); border-radius: var(--sc-radius);
  border-width: var(--sc-border-w); font-size: 20px; letter-spacing: -0.01em;
}
.run-body[data-screen="status"] .okfail button svg { width: 44px; height: 44px; }
.run-body[data-screen="status"] .okfail .of-ok  { background: var(--sc-good-soft); color: var(--sc-good); border-color: var(--sc-good); }
.run-body[data-screen="status"] .okfail .of-bad { background: var(--sc-warn-soft); color: var(--sc-warn); border-color: var(--sc-warn); }
.run-body[data-screen="status"] .okfail .of-ok.is-on  { background: var(--sc-good); color: #fff; }
.run-body[data-screen="status"] .okfail .of-bad.is-on { background: var(--sc-warn); color: #fff; }

/* ================================================================= 2 menu */

/* One rounded card, rows divided by hairlines, the tick on the right. */
.run-body[data-screen="menu"] .opt-list {
  gap: 0; border: var(--sc-border-w) solid var(--sc-border); border-radius: var(--sc-radius);
  background: var(--sc-surface); overflow: hidden;
}
.run-body[data-screen="menu"] .opt {
  flex-direction: row-reverse; min-height: var(--sc-row-h);
  border: 0; border-radius: 0; border-top: 1px solid var(--border);
  padding: 12px 18px; font-size: var(--sc-label-size); background: transparent;
}
.run-body[data-screen="menu"] .opt:first-child { border-top: 0; }
.run-body[data-screen="menu"] .opt-mark { border: 0; width: 26px; height: 26px; }
.run-body[data-screen="menu"] .opt.is-on {
  border-width: 0; border-top-width: 1px; padding: 12px 18px;
  background: var(--sc-accent-soft); color: var(--sc-accent);
}
.run-body[data-screen="menu"] .opt:first-child.is-on { border-top-width: 0; }
.run-body[data-screen="menu"] .opt.is-on .opt-mark { background: transparent; color: var(--sc-accent); }

/* ============================================================== 3 choice */

.run-body[data-screen="choice"] .opt-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-gap);
}
.run-body[data-screen="choice"] .opt {
  flex-direction: column; justify-content: center; text-align: center; gap: 10px;
  min-height: var(--sc-card-h); border-width: var(--sc-border-w); border-radius: var(--sc-radius);
  padding: 14px 10px; font-size: var(--sc-label-size);
}
.run-body[data-screen="choice"] .opt.is-on { padding: 14px 10px; }
.run-body[data-screen="choice"] .opt-text { flex: none; }
.run-body[data-screen="choice"] .opt-mark { width: 28px; height: 28px; }

/* ============================================================ 4 checkbox */

.run-body[data-screen="checkbox"] .opt-list { gap: 10px; }
.run-body[data-screen="checkbox"] .opt {
  min-height: var(--sc-row-h); border-width: var(--sc-border-w); border-radius: var(--sc-radius);
  font-size: var(--sc-label-size); padding: 12px 16px; gap: 14px;
}
.run-body[data-screen="checkbox"] .opt.is-on { padding: 12px 16px; }
.run-body[data-screen="checkbox"] .opt-mark { width: 30px; height: 30px; border-radius: 9px; }

/* ============================================================== 5 value */

.run-body[data-screen="value"] .big-num {
  min-height: var(--sc-field-h); font-size: var(--sc-field-size);
  border-width: var(--sc-border-w); border-radius: var(--sc-radius);
  background: var(--sc-surface);
}
.run-body[data-screen="value"] .num-unit { font-size: 20px; }
.run-body[data-screen="value"] .m-hint { margin-top: 10px; }

/* ============================================================== 6 meter */

/* A dark digital display, so a meter reading does not look like any other
   number: it is the number printed on the machine. */
.run-body[data-screen="meter"] .big-num {
  min-height: var(--sc-display-h); font-size: var(--sc-display-size);
  font-family: var(--mono); letter-spacing: .08em; font-weight: 600;
  background: var(--sc-display-bg); color: var(--sc-display-ink);
  border: var(--sc-border-w) solid var(--sc-display-bg); border-radius: var(--sc-radius);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.45);
}
.run-body[data-screen="meter"] .big-num::placeholder { color: var(--sc-display-ink); opacity: .35; }
.run-body[data-screen="meter"] .big-num:focus { border-color: var(--sc-accent); box-shadow: inset 0 2px 10px rgba(0,0,0,.45), 0 0 0 4px var(--sc-accent-soft); }
.run-body[data-screen="meter"] .num-unit { color: var(--sc-display-ink); opacity: .7; font-family: var(--mono); font-size: 18px; }
.run-body[data-screen="meter"] .m-hint { margin-top: 10px; }

/* =============================================================== 7 scan */

.scan { display: flex; flex-direction: column; gap: 12px; }
.scan-btn {
  position: relative; width: 100%; min-height: var(--sc-scan-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: var(--sc-border-w) dashed var(--sc-accent); border-radius: var(--sc-radius);
  background: var(--sc-accent-soft); color: var(--sc-accent);
  font: inherit; font-size: var(--sc-label-size); font-weight: 700; cursor: pointer;
}
.scan-btn:active { background: var(--sc-surface-press); }
/* The four corner brackets of a viewfinder. */
.scan-frame {
  position: relative; width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
}
.scan-frame .sc-glyph svg { width: 44px; height: 44px; }
.scan-frame::before, .scan-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 4px solid currentColor; border-radius: 14px;
  -webkit-mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat,
                linear-gradient(#000 0 0) top right / 22px 22px no-repeat,
                linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat,
                linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat;
          mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat,
                linear-gradient(#000 0 0) top right / 22px 22px no-repeat,
                linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat,
                linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat;
}
.scan-frame::after { display: none; }
.scan-note { text-align: center; font-size: 13.5px; color: var(--sc-muted); }
.scan-or {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-faint);
}
.scan-or::before, .scan-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.scan-input {
  width: 100%; min-height: 64px; padding: 10px 16px;
  border: var(--sc-border-w) solid var(--sc-border); border-radius: var(--sc-radius);
  background: var(--sc-surface); color: var(--sc-ink);
  font: inherit; font-family: var(--mono); font-size: 20px; font-weight: 600; text-align: center;
}
.scan-input:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 4px var(--sc-accent-soft); }
.scan-got {
  display: none; align-items: center; gap: 12px; padding: 12px 14px;
  border: var(--sc-border-w) solid var(--sc-good); border-radius: var(--sc-radius); background: var(--sc-good-soft);
}
.scan.has-code .scan-got { display: flex; }
.scan-got-mark {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sc-good); color: #fff;
}
.scan-got-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.scan-got-l { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-good); }
.scan-got-v { font-family: var(--mono); font-size: 17px; font-weight: 650; color: var(--sc-ink); overflow-wrap: anywhere; }
.scan-again { flex: none; min-height: 44px; }

/* The live camera. */
.scan-cam { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; }
.scan-video { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.scan-cam-aim {
  position: absolute; left: 50%; top: 42%; width: 70%; max-width: 320px; aspect-ratio: 1;
  transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,.9); border-radius: 22px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45);
}
.scan-cam-hint { position: absolute; left: 0; right: 0; top: calc(var(--safe-t, 0px) + 18px); text-align: center; color: #fff; font-weight: 650; font-size: 16px; padding: 0 20px; }
.scan-cam-x { position: absolute; left: 50%; bottom: calc(var(--safe-b, 0px) + 28px); transform: translateX(-50%); }

/* ============================================================== 8 photo */

.run-body[data-screen="photo"] .cam-btn {
  min-height: var(--sc-photo-h); gap: 12px; border-width: var(--sc-border-w);
  border-color: var(--sc-accent); border-radius: var(--sc-radius);
  background: var(--sc-accent-soft); color: var(--sc-accent); font-size: var(--sc-label-size);
}
.run-body[data-screen="photo"] .cam-btn svg { width: 48px; height: 48px; }

/* =============================================================== 9 text */

.run-body[data-screen="text"] .m-textarea {
  min-height: var(--sc-note-h) !important; font-size: var(--sc-label-size) !important;
  border-width: var(--sc-border-w); border-radius: var(--sc-radius); padding: 16px;
}

/* ========================================================== 10 signature */

/* A ruled line with an X, the way a paper form asks for it. */
.run-body[data-screen="signature"] .sig-pad {
  height: var(--sc-sign-h); border-width: var(--sc-border-w); border-radius: var(--sc-radius);
  background-image: linear-gradient(var(--border-2), var(--border-2));
  background-repeat: no-repeat; background-size: calc(100% - 48px) 2px; background-position: center 78%;
}
.run-body[data-screen="signature"] .sig-hint { font-size: 14px; margin-top: 10px; }

/* ========================================================= 12 parts used */

/* v4.28 — search (or scan) the parts that were used, a tap adds one; the added parts get
   big − / + buttons. Everything from the --sc-* tokens, so each design restyles it. */
.pu { display: flex; flex-direction: column; gap: 12px; }
.pu.is-inert { pointer-events: none; }
.pu-find { display: flex; gap: 8px; }
.pu-input {
  flex: 1; min-width: 0; min-height: 56px; padding: 10px 16px;
  border: var(--sc-border-w) solid var(--sc-border); border-radius: var(--sc-radius);
  background: var(--sc-surface); color: var(--sc-ink); font: inherit; font-size: var(--sc-label-size);
}
.pu-input:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 4px var(--sc-accent-soft); }
.pu-scan {
  flex: none; width: 60px; min-height: 56px; display: flex; align-items: center; justify-content: center;
  border: var(--sc-border-w) solid var(--sc-accent); border-radius: var(--sc-radius);
  background: var(--sc-accent-soft); color: var(--sc-accent); cursor: pointer;
}
.pu-scan .sc-glyph svg { width: 28px; height: 28px; display: block; }
.pu-scan:active { background: var(--sc-surface-press); }
.pu-msg:empty { display: none; }
.pu-msg { font-size: 14px; font-weight: 600; color: var(--sc-bad); }
.pu-results { display: flex; flex-direction: column; gap: 8px; }
.pu-results:empty { display: none; }
.pu-empty { font-size: 13.5px; color: var(--sc-muted); padding: 0 2px; }
.pu-res, .pu-row {
  display: flex; align-items: center; gap: 12px; min-height: var(--sc-row-h); padding: 8px 12px;
  border: var(--sc-border-w) solid var(--sc-border); border-radius: var(--sc-radius);
  background: var(--sc-surface); color: var(--sc-ink); font: inherit; text-align: left;
}
.pu-res { width: 100%; cursor: pointer; }
.pu-res:active { background: var(--sc-surface-press); }
.pu-thumb {
  flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--sc-accent-soft); border: 1px solid var(--sc-border);
}
.pu-thumb.is-icon { display: flex; align-items: center; justify-content: center; color: var(--sc-accent); }
.pu-thumb.is-icon svg { width: 22px; height: 22px; }
.pu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pu-name { font-size: var(--sc-label-size); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pu-art { font-size: 13px; color: var(--sc-muted); font-family: var(--mono); overflow-wrap: anywhere; }
.pu-plus {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--sc-accent); color: var(--sc-accent-ink);
}
.pu-added { display: flex; flex-direction: column; gap: 8px; }
.pu-added:empty { display: none; }
.pu-head {
  display: flex; align-items: center; gap: 8px; margin: 2px 2px 0;
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-good);
}
.pu-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sc-good); color: #fff; font-size: 12px; letter-spacing: 0;
}
.pu-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "th txt rm" ". qty qty";
  column-gap: 12px; row-gap: 8px; padding: 10px 6px 10px 12px;
  border-color: var(--sc-good); background: var(--sc-good-soft);
}
.pu-row > .pu-thumb { grid-area: th; }
.pu-row > .pu-txt { grid-area: txt; }
.pu-row > .pu-rm { grid-area: rm; align-self: start; }
.pu-qtybox { grid-area: qty; display: flex; align-items: center; gap: 6px; }
.pu-step {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border: var(--sc-border-w) solid var(--sc-border); border-radius: min(var(--sc-radius), 14px);
  background: var(--sc-surface); color: var(--sc-ink); cursor: pointer;
}
.pu-step:active { background: var(--sc-surface-press); }
.pu-step:disabled { opacity: .4; cursor: default; }
.pu-qty { min-width: 34px; text-align: center; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pu-rm {
  flex: none; width: 40px; height: 48px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--sc-muted); cursor: pointer;
}
.pu-note-l { display: flex; flex-direction: column; gap: 4px; }
.pu-note { min-height: 64px !important; font-size: 16px; border-width: var(--sc-border-w); border-radius: var(--sc-radius); }

/* ====================================================== 13 time consumed */

/* v4.28 — hours and minutes with big − / + buttons, the total, and quick picks. */
.tm { display: flex; flex-direction: column; gap: 12px; }
.tm.is-inert { pointer-events: none; }
.tm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-gap); }
.tm-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tm-lbl { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-muted); }
.tm-box {
  display: flex; flex-direction: column; align-items: stretch;
  border: var(--sc-border-w) solid var(--sc-border); border-radius: var(--sc-radius);
  background: var(--sc-surface); overflow: hidden;
}
.tm-step {
  min-height: 60px; display: flex; align-items: center; justify-content: center;
  border: 0; background: var(--sc-accent-soft); color: var(--sc-accent); cursor: pointer;
}
.tm-step:active { background: var(--sc-surface-press); }
.tm-step:disabled { opacity: .4; cursor: default; }
.tm-val {
  min-height: 72px; display: flex; align-items: center; justify-content: center;
  font-size: var(--sc-field-size); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sc-ink);
}
.tm-total {
  text-align: center; font-size: 22px; font-weight: 700; color: var(--sc-faint);
  padding: 10px; border-radius: var(--sc-radius); background: var(--sc-surface-press);
}
.tm.has-value .tm-total { color: var(--sc-good); background: var(--sc-good-soft); }
.tm-quick-l { margin-top: 2px; }
.tm-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tm-chip {
  min-height: 52px; padding: 6px 4px; border: var(--sc-border-w) solid var(--sc-border); border-radius: var(--sc-radius);
  background: var(--sc-surface); color: var(--sc-ink); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
}
.tm-chip.is-on { border-color: var(--sc-accent); background: var(--sc-accent); color: var(--sc-accent-ink); }
.tm-chip:active { background: var(--sc-surface-press); }

/* ================================================== the Checklist layout */

/* Every item of the checklist on one screen. One row per item with a big
   checkbox; the flag on the right reports a deviation. Sizes and colours come
   from the same --sc-* tokens as the ten screens, so a style restyles it too. */
.run-body[data-screen="list"] { padding-top: 10px; }
.ls { display: flex; flex-direction: column; gap: 18px; }
.ls-sec { display: flex; flex-direction: column; gap: 8px; }
.ls-cp {
  margin: 4px 2px 0; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sc-accent);
}
.ls-heading { margin: 6px 2px 0; font-size: 15px; font-weight: 650; color: var(--sc-muted); }
.ls-item {
  border: var(--sc-border-w) solid var(--sc-border); border-radius: var(--sc-radius);
  background: var(--sc-surface); overflow: hidden;
}
.ls-item.is-done { border-color: var(--sc-good); background: var(--sc-good-soft); }
.ls-item.is-dev  { border-color: var(--sc-warn); background: var(--sc-warn-soft); }
.ls-line { display: flex; align-items: stretch; }
.ls-main {
  flex: 1; min-width: 0; min-height: var(--sc-row-h); padding: 10px 14px;
  display: flex; align-items: center; gap: 14px; text-align: left;
  border: 0; background: transparent; color: var(--sc-ink); font: inherit; cursor: pointer;
}
.ls-main.is-static { cursor: default; }
.ls-box {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  border: 2px solid var(--sc-border); background: var(--sc-surface);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.ls-item.is-done .ls-box { background: var(--sc-good); border-color: var(--sc-good); }
.ls-item.is-dev  .ls-box { background: var(--sc-warn); border-color: var(--sc-warn); }
.ls-text { display: flex; flex-direction: column; min-width: 0; }
.ls-label { font-size: var(--sc-label-size); font-weight: 600; line-height: 1.25; }
.ls-hint  { margin-top: 2px; font-size: 13.5px; color: var(--sc-muted); }
.ls-flag {
  flex: none; width: 60px; border: 0; border-left: 1px solid var(--border);
  background: transparent; color: var(--sc-faint); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ls-flag.is-on { background: var(--sc-warn); color: #fff; border-left-color: var(--sc-warn); }
.ls-control { padding: 0 14px 14px; }
.ls-control .okfail { grid-template-columns: 1fr 1fr; }
.ls-guide, .ls-photos { padding: 0 14px 14px; }
.ls-note {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; cursor: pointer;
  border-top: 1px solid var(--sc-warn); background: var(--sc-warn-soft);
}
.ls-note-h { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-warn); }
.ls-note-c { font-size: 15px; font-weight: 650; color: var(--sc-ink); }
.ls-note-n { font-size: 13.5px; color: var(--sc-muted); white-space: pre-wrap; }

/* ============================================ v4.12 — a picture, full screen
   shared/image-zoom.js (ImageZoom): the checklist's and a group's start-screen
   picture, guidance photos, videos and image links open here. Dark backdrop,
   the picture fitted and zoomable, + / − and the arrows at the bottom, × at the
   top right. Outside .run, so it uses the app's own tokens, not the --sc-* ones. */
.iz {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4, 7, 11, .97);
  touch-action: none; user-select: none; -webkit-user-select: none;
  animation: iz-in .14s ease-out;
}
@keyframes iz-in { from { opacity: 0; } }
.iz-stage {
  position: absolute; inset: 0; overflow: hidden; touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
.iz-media {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; transform-origin: center center; will-change: transform;
  transition: transform .18s ease-out; -webkit-user-drag: none;
}
.iz-img { cursor: zoom-in; }
.iz.is-zoomed .iz-img { cursor: grab; }
.iz.is-zoomed .iz-img:active { cursor: grabbing; }
.iz-video { width: 100%; background: #000; }
.iz-missing {
  max-width: 78%; padding: 28px 22px; border: 1px dashed rgba(255,255,255,.28); border-radius: 14px;
  color: rgba(255,255,255,.75); font-size: 14px; text-align: center;
}
.iz-count {
  position: absolute; top: calc(var(--safe-t, 0px) + 18px); left: 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.75); pointer-events: none;
}
.iz-btn {
  display: flex; align-items: center; justify-content: center; flex: none; padding: 0;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.14); color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.iz-btn:hover { background: rgba(255,255,255,.22); }
.iz-btn:active { background: rgba(255,255,255,.34); }
.iz-btn:disabled { opacity: .32; cursor: default; }
.iz-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.iz-close { position: absolute; top: calc(var(--safe-t, 0px) + 10px); right: 12px; width: 52px; height: 52px; }
.iz-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 14px calc(var(--safe-b, 0px) + 16px);
  background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0));
}
.iz-cap { max-width: 100%; font-size: 15px; line-height: 1.35; color: #fff; text-align: center; overflow-wrap: anywhere; }
.iz-bar { display: flex; align-items: center; gap: 14px; }
.iz-nav { width: 52px; height: 52px; }

/* ---------------------------------------------------------------------------
 * v4.13 — picture fields: labelled pins over a checklist's picture
 * (shared/hotspots.js). Drawn in code over the picture, positioned in percent of
 * the picture, so they scale with it. The box (.hs-stage) is sized to the
 * picture's own shape (--ar, set when it loads) inside whatever holds it: the
 * start screen's big panel (.st-big-pic.hs-panel), the check screen's strip
 * (.hs-strip) or the builder's editor. The pin's colour is the run's colour theme
 * (--run-tint) or the design's accent; a done target turns it green, a deviation red.
 * Labels keep one small size whatever the design's text size.
 * ------------------------------------------------------------------------- */
.hs-stage {
  position: relative; aspect-ratio: var(--ar, 1.3333);
  --hs-bg: var(--run-tint, var(--sc-accent));
  --hs-ink: var(--run-tint-ink, var(--sc-accent-ink));
}
.hs-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* the start screen: the big panel takes the picture's shape (never taller than 4:3) */
.st-big-pic.hs-panel { aspect-ratio: var(--pa, 1.3333); }
.hs-panel .hs-stage {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100%, calc(100% * var(--ar, 1.3333) / var(--pa, 1.3333)));
}

/* the check screen: a strip of one height, the picture as wide as its shape says */
.hs-strip {
  --hs-strip-h: 160px;
  position: relative; height: var(--hs-strip-h); margin: 0 0 14px; overflow: hidden; isolation: isolate;
  border: var(--sc-border-w) solid var(--sc-border); border-radius: max(10px, min(var(--sc-radius), 18px));
  background: var(--surface-3); cursor: zoom-in;
}
.hs-strip:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 2px; }
.hs-strip .hs-stage {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100%, calc(var(--hs-strip-h) * var(--ar, 1.3333)));
}
.hs-strip .st-pic-min { width: 30px; height: 30px; top: 6px; right: 6px; }
.hs-strip-bar { margin: 0 0 14px; }

/* one pin: a pill with a dark dot (ringed in the pin's colour) on the side its point is on */
.hs-pin {
  --hs-s: 1; --hs-tx: -11px;
  position: absolute; z-index: 1; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  height: 24px; margin: 0; padding: 0 9px 0 2px; border: 0; border-radius: 12px;
  background: var(--hs-bg); color: var(--hs-ink);
  font: 700 12.5px/1 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; letter-spacing: .01em;
  white-space: nowrap; text-align: left; text-transform: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 0, 0, .18);
  transform: translate(var(--hs-tx), -50%) scale(var(--hs-s)); transform-origin: 11px 50%;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
button.hs-pin { cursor: pointer; }
.hs-pin.is-left { flex-direction: row-reverse; padding: 0 2px 0 9px; --hs-tx: calc(-100% + 11px); transform-origin: calc(100% - 11px) 50%; }
.hs-dot {
  flex: none; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
  background: radial-gradient(circle, var(--hs-bg) 0 3px, #15181d 3.6px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset;
}
.hs-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hs-n {
  flex: none; display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 8px;
  background: rgba(0, 0, 0, .2); font-size: 11px; font-variant-numeric: tabular-nums;
}
.hs-n .ic, .hs-n svg { width: 12px; height: 12px; }
.hs-pin.is-ok   { --hs-bg: var(--sc-good); --hs-ink: #fff; }
.hs-pin.is-dev  { --hs-bg: var(--sc-bad); --hs-ink: #fff; }
.hs-pin.is-off  { --hs-bg: var(--surface-3); --hs-ink: var(--text-3); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.hs-pin.is-cur  { --hs-s: 1.12; z-index: 3; box-shadow: 0 0 0 2px var(--sc-surface), 0 0 0 4px var(--hs-bg), 0 3px 10px rgba(0, 0, 0, .45); }
.hs-pin.is-dim  { opacity: .5; }
button.hs-pin:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
button.hs-pin:active { filter: brightness(.92); }
.hs-strip .hs-pin { height: 20px; font-size: 11px; padding-right: 7px; gap: 4px; }
.hs-strip .hs-pin.is-left { padding: 0 2px 0 7px; }
.hs-strip .hs-dot { width: 16px; height: 16px; }
.hs-strip .hs-pin { --hs-tx: -9px; transform-origin: 9px 50%; }
.hs-strip .hs-pin.is-left { --hs-tx: calc(-100% + 9px); transform-origin: calc(100% - 9px) 50%; }
.hs-strip .hs-n { height: 14px; font-size: 10px; padding: 0 4px; }
/* in the strip only the current pin keeps its words; the others shrink to their dot */
.hs-strip .hs-pin.is-dim { padding: 0 2px; gap: 0; }
.hs-strip .hs-pin.is-dim .hs-t, .hs-strip .hs-pin.is-dim .hs-n { display: none; }
.hs-strip .hs-pin.is-dim.is-left { padding: 0 2px; }
.hs-list-panel { margin-bottom: 12px; }

/* v4.14.0 — the check screen's top line: a small ‹ back to the menu, left of the group label.
   Drawn from each design's own back-button colours (--st-back-bg / --st-back-ink / --st-btn-r)
   where it has them, the app's surface and text colours otherwise. */
.run-top { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.run-top > .run-cp { min-width: 0; overflow-wrap: anywhere; }
.run-back {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; margin: 0 0 0 -2px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: min(var(--st-btn-r, 8px), 15px);
  background: var(--st-back-bg, var(--surface));
  color: var(--st-back-ink, var(--text-2));
  font: inherit; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.run-back svg { display: block; }
.run-back:active { filter: brightness(1.12); }
.run-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* v4.17.0 — a check point's description under its title: two lines, then an (i) that opens
   the whole text in the bottom sheet (QCard.qhint). The text keeps each design's own
   .run-qhint size and colour; the (i) takes the design's accent. Text that fits has no (i). */
.run-qhint-row { display: flex; align-items: flex-end; gap: 4px; }
.run-qhint-row > .run-qhint-clamp {
  flex: 1; min-width: 0; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.run-qhint-row > .run-qhint-info {
  width: 32px; height: 32px; margin: 0 -6px -6px 0; border-radius: 50%;
  color: var(--sc-accent, var(--accent)); background: transparent;
}
.run-qhint-row > .run-qhint-info:focus-visible { outline: 2px solid var(--sc-accent, var(--accent)); outline-offset: 1px; }
.run-qhint-row:not(.is-long) > .run-qhint-info { display: none; }