/* Refine round 5 — flows the owner designs, the one runner, evidence capture on phones. Every value is a token. */

/* Evidence capture: two photo buttons (camera · library) and the voice-note button, phone-sized. */
.capture-group{display:flex;flex-direction:column;gap:var(--space-8);margin-top:var(--space-8)}
.capture-group .row.wrap{gap:var(--space-8)}
.btn.capture{position:relative;min-height:44px;flex:1 1 140px;justify-content:center;cursor:pointer;overflow:hidden}
.btn.capture input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.btn.capture.disabled{opacity:.5;pointer-events:none}
.btn.capture.recording{background:var(--danger-solid);color:var(--text-on-highlight);border-color:var(--danger-solid)}
.btn.capture.recording .icon{color:currentColor}
.capture-status:empty{display:none}
.camera-hint{color:var(--text-muted)}
.stamps .list-item small{display:block;line-height:1.35}

/* Signature pad */
.sigpad{display:flex;flex-direction:column;gap:var(--space-8)}
.sigpad canvas{width:100%;max-width:600px;height:auto;aspect-ratio:600/220;border:1px dashed var(--border-strong);border-radius:var(--radius-md);background:var(--surface-card);touch-action:none}

/* The runner: step bar with the platform's next/previous, one step's controls at a time. */
.run-steps{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-4);overflow-x:auto;scrollbar-width:thin}
.run-steps li{flex:1 0 auto;min-height:44px;display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-8) var(--space-12);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--text-muted);font-size:var(--font-size-sm,.875rem);white-space:nowrap}
.run-steps li[data-done=true]{background:var(--surface-card);color:var(--text-body)}
.run-steps li[aria-current=step]{background:var(--surface-selected);color:var(--text-body);border-color:var(--surface-brand);font-weight:600}
.run-steps li button{all:unset;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:var(--space-4)}
.control{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-12);background:var(--surface-card);display:flex;flex-direction:column;gap:var(--space-8)}
.control>.control-head{display:flex;justify-content:space-between;gap:var(--space-8);align-items:flex-start;flex-wrap:wrap}
.control .control-help{color:var(--text-muted);font-size:var(--font-size-sm,.875rem)}
.control.instructions{background:var(--surface-sunken)}
.control .yn{display:flex;gap:var(--space-8)}
.control .yn label{flex:1 1 0;min-height:44px;display:flex;align-items:center;justify-content:center;gap:var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;background:var(--surface-card)}
.control .yn input{margin:0}
.control .yn label:has(input:checked){background:var(--surface-selected);border-color:var(--surface-brand);font-weight:600}
.control .photo-grid figure{margin:0}
.run-nav{display:flex;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap;margin-top:var(--space-16)}
.run-nav .btn{min-height:44px}

/* Template editor: the step bar, the controls list with up/down buttons that work on a phone. */
.editor{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.4fr);gap:var(--space-20)}
.editor .step-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.editor .step-list li{display:flex;align-items:center;gap:var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-card);padding:var(--space-4) var(--space-8);min-height:44px}
.editor .step-list li[aria-current=true]{border-color:var(--surface-brand);background:var(--surface-selected)}
.editor .step-list li .grow{cursor:pointer;min-height:36px;display:flex;align-items:center}
.editor .ctl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-8)}
.editor .ctl-list li{display:flex;gap:var(--space-8);align-items:flex-start;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);padding:var(--space-8) var(--space-12)}
.editor .ctl-list li .grow{min-width:0}
.editor .ctl-list li .grow strong{display:block;overflow-wrap:anywhere}
.editor .order{display:flex;flex-direction:column;gap:var(--space-4)}
.editor .order .btn,.editor .step-list .btn{min-width:44px;min-height:44px;padding:0;justify-content:center}
.editor .ctl-actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.editor .ctl-actions .btn{min-height:44px}

/* Business setup → Platform: the module list and the check results. */
.check-list .list-item{align-items:flex-start}
.check-list .chip{flex:0 0 auto}

/* Jobs on a phone: one card per job, no sideways scrolling (only the trade calendar may scroll sideways). */
@media (max-width:640px){
  .editor{grid-template-columns:1fr}
  .jobs-cards .table-wrap{overflow-x:visible}
  .jobs-cards table,.jobs-cards tbody,.jobs-cards tr,.jobs-cards td{display:block;width:100%}
  .jobs-cards thead{display:none}
  .jobs-cards tr{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);padding:var(--space-8) var(--space-12);margin-bottom:var(--space-8)}
  .jobs-cards td{border:0;padding:var(--space-4) 0;overflow-wrap:anywhere}
  .jobs-cards td::before{content:attr(data-label);display:block;font-size:var(--font-size-xs,.75rem);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
  .jobs-cards td[data-label=""]::before{display:none}
  .run-steps{flex-wrap:wrap}
  .run-steps li{flex:1 1 40%;white-space:normal}
  .control .yn{flex-direction:column}
}