/* Мастер заполнения: шаги, колесо, чипы. */
.wizard-counter {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--tg-hint, var(--text-secondary));
    text-align: right;
}
.wizard-category {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0;
    color: var(--primary);
    margin-bottom: var(--space-sm);
    min-height: 1.125rem;
}
.wizard-question {
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.4;
    /* №158 */
    margin-bottom: var(--space-lg);
    min-height: 3rem;
}
@media (min-width: 48em) {
    .wizard-question { margin-bottom: var(--space-xl); min-height: 3.75rem; }
}
.wizard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* №159 */
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}
@media (min-width: 48em) {
    .wizard-actions { gap: var(--space-sm); }
}
.wizard-btn {
    /* №160 */
    padding: var(--space-sm) var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 700;
    border: 0;
    cursor: pointer;
    min-height: 3rem;
    letter-spacing: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}
@media (min-width: 48em) {
    .wizard-btn { padding: var(--space-md); font-size: var(--fs-md); }
}
/* YES = «прошёл» → success-зелёный; NO = hazard-оранжевый (--secondary).
   Було YES=primary + NO=secondary — два оранжевих, семантика губилась. */
.wizard-btn-yes {
    background: var(--success);
    color: var(--white);
}
.wizard-btn-no {
    background: var(--secondary);
    color: var(--white);
}
/* "Not applicable" is the quiet third option — a bare label, so it never
   competes with the two real answers. */
.wizard-btn-na {
    background: transparent;
    color: var(--text-secondary);
}
.wizard-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.5);
}
.wizard-req {
    color: var(--secondary);
    margin-right: 0.25rem;
    font-weight: 700;
}
.wizard-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 3rem;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    border: 0.0625rem dashed var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wizard-photo[data-required="1"] { border-color: var(--secondary); color: var(--secondary); }
.wizard-photo.is-done {
    border-style: solid;
    border-color: var(--success);
    color: var(--success);
    background: color-mix(in srgb, var(--success) 8%, transparent);
}
.wizard-photo.is-error {
    border-color: var(--secondary);
    color: var(--secondary);
    background: color-mix(in srgb, var(--secondary) 8%, transparent);
}
.wizard-photo-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
.wizard-photo-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wizard-photo-thumb .icon { width: 1.25rem; height: 1.25rem; }
.wizard-btn kbd {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    font-weight: 400;
    padding: 0.0625rem 0.3125rem;
    margin-left: 0.375rem;
    border: 0.0625rem solid rgba(255,255,255,0.3);
    opacity: 0.6;
    vertical-align: middle;
}
@media (hover: hover) and (pointer: fine) {
    .wizard-btn kbd { display: inline-block; }
}
.wizard-note {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    /* №164 */
    font-size: var(--fs-md);
    border: 0.09375rem solid var(--border);
    background: var(--bg-surface);
    color: var(--tg-text, var(--text-primary));
}
@media (min-width: 48em) {
    .wizard-note { font-size: var(--fs-sm); }
}
.wizard-note:focus,
.role-assign select:focus,
.sch-in:focus-visible,
.tsk-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.1875rem var(--focus-ring);
}
/* Ф3-ревʼю п.5б: `.wizard-actions` — grid 1fr 1fr 1fr для трьох кнопок
   yes/no/na. text/number/date/select кладуть лише два елементи (поле +
   «Далі»), і сітка стискала перше до третини ширини — довгий обраний
   варіант select обрізався («Трифазн…»). Модифікатор скидає сітку на
   звичайний блочний потік: поле на всю ширину, кнопка під ним. Новий
   селектор, `.wizard-actions` без нього лишається як був. */
.wizard-actions--stacked { display: block; }
/* Ф3 (foreman-budget-miscalculation.md): text/number/date/select-питання —
   одне поле + «Далі» замість YES/NO/N-A. Додатково до `.wizard-btn`/
   `.wizard-note`, жодного наявного селектора не чіпаємо. */
/* Форма завантаження документа. Кнопка-розкривач була смугою на всю
   ширину екрана (на десктопі — помаранчевий банер), хоча це звичайна дія. */
.wizard-value-row,
.doc-upload { margin-bottom: var(--space-md); }
.wizard-value {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    border: 0.09375rem solid var(--border);
    background: var(--bg-surface);
    color: var(--tg-text, var(--text-primary));
}
.wizard-value:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.1875rem var(--focus-ring);
}
.wizard-btn-next {
    width: 100%;
    background: var(--primary);
    color: var(--white);
}
/* «+ Додати пункт» — секція з allow_extra=1 (план, п.3). */
.wizard-extra { margin-top: var(--space-md); }
.wizard-extra-toggle {
    background: transparent;
    border: 0.0625rem dashed var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--micro-size, 0.625rem);
    letter-spacing: 0;
    padding: var(--space-sm) var(--space-md);
    width: 100%;
    cursor: pointer;
}
.wizard-extra-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    border: 0.0625rem solid var(--border);
}
.wizard-extra-form input, .wizard-extra-form select {
    padding: 0.45rem 0.55rem;
    border: 0.0625rem solid var(--border);
    background: var(--bg-base);
    color: var(--text-primary);
    font: inherit;
}
.wizard-extra-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.wizard-extra-chip {
    font-family: var(--font-mono);
    font-size: var(--micro-size, 0.625rem);
    padding: 0.2rem 0.5rem;
    border: 0.0625rem solid var(--success);
    color: var(--success);
}
.done-icon {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin: var(--space-xl) 0 var(--space-md);
}
.done-stats {
    display: flex;
    justify-content: center;
    /* №166 */
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}
@media (min-width: 48em) {
    .done-stats { gap: var(--space-xl); }
}
.done-val {
    display: block;
    font-family: var(--font-mono);
    /* №167 */
    font-size: var(--fs-2xl);
    font-weight: 700;
}
@media (min-width: 48em) {
    .done-val { font-size: var(--fs-3xl); }
}
.done-yes { color: var(--success); }
.done-no { color: var(--secondary); }
.done-lbl {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--tg-hint, var(--text-secondary));
    letter-spacing: 0;
    margin-top: var(--space-xs);
}
.role-assign select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    padding: 0.25rem var(--space-sm);
    padding-right: 1.25rem;
    background: var(--bg-surface);
    border: 0.09375rem solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    min-height: var(--tap-target);
    min-width: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2378716c'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    transition: border-color 0.15s ease;
}
@media (hover: hover) {
    .role-assign select:hover { border-color: var(--text-muted); }
}
@media (pointer: coarse) {
    .role-assign select { min-height: 2.5rem; font-size: var(--fs-xs); }
}
/* Horizontal wheel picker (workers count) — Apple-alarm mechanic on its side. */
.fm-wheel {
  position:relative; height:3.25rem; overflow:hidden;
  border:0.0625rem solid var(--border); background:var(--bg-surface);
}
.fm-wheel-track {
  display:flex; align-items:center; height:100%;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.fm-wheel:focus { outline:none; border-color:var(--accent); }
.fm-wheel:focus-visible { outline:none; border-color:var(--accent); box-shadow:inset 0 0 0 0.0625rem var(--accent); }
.fm-wheel-item {
  flex:0 0 3rem; scroll-snap-align:center;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--text-muted); font-family:var(--font-mono); font-size:var(--fs-md);
  transition:color 0.12s, transform 0.12s;
}
.fm-wheel-item.is-active { color:var(--accent); font-weight:700; transform:scale(1.3); }
/* Centre pill the numbers scroll under (the selected slot). */
.fm-wheel-pill {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:3rem; height:2.5rem; border:0.0625rem solid var(--accent);
  pointer-events:none; z-index:1;
}
/* Big unambiguous readout of the selected worker count + affordance hint. */
.fm-wheel-readout {
  display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.45rem;
}
.fm-wheel-readout-cap,
.rl-d {
  font-family:var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0; color:var(--text-secondary);
}
.fm-wheel-readout-num {
  font-family:var(--font-mono); font-size:var(--fs-3xl); font-weight:700; line-height:1;
  color:var(--primary); font-variant-numeric:tabular-nums;
}
.fm-wheel-hint {
  margin:0.4rem 0 0; font-family:var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0; color:var(--text-muted);
}
@media (max-width:37.5em) {
    body.dm-chat-open .dm-layout { height:100vh; height:100dvh; border:0; }
}
/* Hide noscript submit buttons when JS is active — HTMX handles autosave.
   The `noscript` element auto-hides when scripting is enabled. */
/* №199 — Tap-first chip groups for finite-value inputs (report forms, checklists).
   Each chip is a <button> inside a flex row; the active one gets solid fill.
   Under the hood a hidden radio syncs the value. */
.fm-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}
.fm-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;      /* ≥44 px touch target */
    min-width: 2.75rem;
    padding: 0.375rem 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
/* №200 — Preset row: chips + hidden free-input for "other" value.
   Layout: chips → "…" chip (reveals free-input) → trailing <input> */
.fm-chip-preset {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}
.fm-chip-preset .fm-chip--other[aria-pressed="true"] {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
}
.doc-pdf-btn { margin-bottom: var(--space-md); display: inline-flex; align-items: center; gap: 0.4em; }
@media (pointer: coarse) {
    /* ══════════════════════════════════════════════════════════════════
       APPLE-DESIGN PASS — WWDC "Designing Fluid Interfaces" + type craft.
       CSS-only; served with ?v=__ASSET__ (mtime), so edits go live with no
       rebuild. Every rule cites the skill section it serves.
       ══════════════════════════════════════════════════════════════════ */
    /* §12 — Sticky primary action on the report form.
       A long mobile form buried ОТПРАВИТЬ at the very bottom; the thumb had to
       scroll to reach the one action that matters. `position: sticky` (in-flow,
       NOT fixed) floats the action row above content while scrolling, then rests
       at its natural spot — so it never overlaps the fields the way a fixed bar
       would. Translucent glass (§12: content scrolls under floating chrome). */
    #report-app .form-actions {
      position: sticky;
      /* Sit ABOVE the fixed bottom tab bar, not under it. app.js measures the
         bar into --fm-bottombar-h; fallback = its real height incl. safe-area.
         (Bar hidden on desktop → app.js sets the var to 0 → rests at bottom.) */
      bottom: var(--fm-bottombar-h, calc(3.5rem + env(safe-area-inset-bottom, 0rem)));
      z-index: 40;
      margin-top: var(--space-lg);
      padding: var(--space-sm) 0;
      background: var(--bg-surface);
    }
    /* §12 — scroll-edge, not a hard divider: fade content INTO the bar with a
         gradient sitting just above it, instead of a 1 px line. */
    #report-app .form-actions::before {
      content: "";
      position: absolute;
      left: 0; right: 0;
      top: calc(-1 * var(--space-lg));
      height: var(--space-lg);
      pointer-events: none;
      background: linear-gradient(to top,
        color-mix(in srgb, var(--bg-surface) 82%, transparent), transparent);
    }
}
@media (prefers-reduced-transparency: reduce) {
    #report-app .form-actions {
      background: var(--bg-surface);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    #report-app .form-actions::before { display: none; }
}