/* Ящик автоматики (apps/studio/cabinet.js): смуга кроків і один крок ліворуч, розкладка й
   перевірки праворуч, липко. На вузькому — кроки першими, розкладка згорткою під ними,
   зведення перевірок смугою над формою. Токени — з ядра, власних немає. Широких таблиць
   немає: рядки — картки, що переносяться, тож гортати вбік не доводиться (п. 7 CLAUDE.md).
   Наведення — лише для миші (@media hover), натиск — :active для всіх. */

.cab-hero { margin-bottom: 18px; }
/* Шапка центрована (.hero ядра) — рядок майстра під нею теж. */
.cab-hero-act { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; margin: 10px 0 0; text-align: center; }
.cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 40%); gap: 24px; align-items: start; }
.cab-main { display: grid; gap: 14px; min-width: 0; container: cab-main / inline-size; }
.cab-side { position: sticky; top: 12px; display: grid; gap: 14px; min-width: 0; }
.cab button, .cab [role="button"], #cab-pop button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ── Смуга кроків: назва й підсумок кроку одним рядком ─────────────────── */
.cab-nav ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cab-go { width: 100%; height: 100%; display: flex; gap: 8px; align-items: flex-start; text-align: left; font: inherit; padding: 10px; min-height: 44px;
  border: 1px solid rgba(var(--green-rgb), .14); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color var(--transition), background var(--transition); user-select: none; }
.cab-go-t { display: grid; gap: 2px; min-width: 0; }
.cab-go b { font-size: var(--fs-small); color: var(--green); line-height: 1.25; }
.cab-go small { font-size: var(--fs-caption); color: var(--hint); line-height: 1.3; overflow-wrap: anywhere; }
.cab-go[aria-current="step"] { border-color: var(--green); background: rgba(var(--green-rgb), .06); box-shadow: inset 0 -3px 0 var(--green); }
.cab-go:active { background: rgba(var(--green-rgb), .08); }
.cab-go:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cab-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--surface); font-size: .85rem; font-weight: 600; flex: none; position: relative; }
.cab-go .cab-n { background: rgba(var(--green-rgb), .12); color: var(--green); }
.cab-go[aria-current="step"] .cab-n { background: var(--green); color: var(--surface); }
/* Крок, де є що виправити: точка на номері (і слово — в aria-label кнопки). */
.cab-n.is-warn::after, .cab-n.is-danger::after { content: ''; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--surface); }
.cab-n.is-warn::after { background: var(--gold); }
.cab-n.is-danger::after { background: var(--danger); }

/* Зведення перевірок над формою — лише там, де перевірки не стоять поруч. */
.cab-alert { display: none; }

/* ── Крок ─────────────────────────────────────────────────────────────── */
.cab-step { background: var(--surface); border: 1px solid rgba(var(--green-rgb), .14); border-radius: var(--radius-md); padding: 18px 20px; }
.cab-step > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.2rem; color: var(--green); }
.cab-step > h2:focus { outline: none; }
.cab-step > h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.cab-step h3 { margin: 22px 0 8px; font-size: 1rem; color: var(--green); }
.cab-step h3 small { font-weight: 400; color: var(--hint); font-size: var(--fs-small); margin-left: 6px; }
.cab-lead { margin: 4px 0 14px; color: var(--text); max-width: 68ch; text-wrap: pretty; }
.cab-hint { margin: 6px 0 12px; color: var(--hint); font-size: var(--fs-small); max-width: 68ch; text-wrap: pretty; }
.cab-empty { margin: 4px 0 10px; padding: 12px; border: 1px dashed rgba(var(--green-rgb), .25); border-radius: var(--radius-sm); color: var(--hint); }
.cab-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(var(--green-rgb), .1); }
.cab-foot .btn, .cab-actions .btn, .cab .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

.cab-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 6px 0 10px; }
.cab-f { display: grid; gap: 4px; font-size: var(--fs-small); color: var(--hint); min-width: 0; }
.cab-f input, .cab-f select { font: inherit; font-size: 1rem; color: var(--text); padding: 8px 10px; min-height: 44px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.cab-f input:focus-visible, .cab-f select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cab-f-title { flex: 1 1 180px; }
.cab-f-num input, .cab-f-num select { width: 6.5em; }
/* Одиниця — біля числа, усередині рамки поля. */
.cab-u { display: inline-flex; align-items: center; gap: 6px; }
.cab-u > span { color: var(--hint); font-size: var(--fs-small); white-space: nowrap; }
.cab-chk { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-size: var(--fs-small); color: var(--text); }
.cab-chk input, .cab-seg input, .cab-card input, .cab-alt-o input { width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.cab-confirm { margin-top: 14px; padding: 6px 12px; border-radius: var(--radius-sm); background: rgba(var(--gold-rgb), .12); font-size: 1rem; }
.cab-seg { display: flex; flex-wrap: wrap; gap: 4px 16px; border: 0; padding: 0; margin: 0; min-width: 0; }
.cab-seg legend { font-size: var(--fs-small); color: var(--hint); padding: 0; margin-bottom: 2px; width: 100%; }
.cab-seg label { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.cab-seg:focus { outline: none; }
/* Сценарії апарата — значки, не кнопки вибору (I-0146): у шафі з апарата їх лише бачать. */
.cab-scs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cab-sc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border: 1px solid rgba(var(--green-rgb), .2); border-radius: var(--radius-pill);
  background: rgba(var(--green-rgb), .05); color: var(--text); font-size: var(--fs-small); font-weight: 600; }
.cab-sc .ico { width: 18px; height: 18px; color: var(--green); }
.cab-shields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.cab-shields .cab-hint { flex-basis: 100%; margin: 0; }
.cab-tag { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); background: rgba(var(--gold-rgb), .18); color: var(--text); font-size: var(--fs-caption); font-weight: 500; }
.cab-code { display: inline-block; padding: 0 5px; border-radius: 4px; background: rgba(var(--green-rgb), .07); color: var(--hint); font-size: var(--fs-caption); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.cab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cab-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; min-height: 44px; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-control); background: var(--surface); color: var(--green); cursor: pointer; transition: background var(--transition), color var(--transition); user-select: none; }
.cab-chip[aria-pressed="true"] { background: var(--green); color: var(--surface); }
.cab-chip:active { transform: scale(.98); }
.cab-chip:focus-visible, .cab-x:focus-visible, .cab-thumb:focus-visible, .cab-fix:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* «Детальніше»: підсумок того, що сховано, — у тому самому рядку. */
.cab-more { margin: 8px 0 4px; border-radius: var(--radius-sm); }
.cab-more > summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--green); font-size: var(--fs-small); font-weight: 600; list-style: none; user-select: none; }
.cab-more > summary::-webkit-details-marker { display: none; }
.cab-more > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--transition); margin: 0 4px 0 2px; }
.cab-more[open] > summary::before { transform: rotate(45deg); }
.cab-more > summary small { color: var(--hint); font-weight: 400; }
.cab-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cab-more-b { padding: 4px 0 6px 18px; }

/* ── Крок 1: ємності ──────────────────────────────────────────────────── */
.cab-point { margin: 0 0 12px; padding: 10px 14px 12px; border: 1px solid rgba(var(--green-rgb), .14); border-radius: var(--radius-sm); min-width: 0; }
.cab-point > legend { padding: 0 6px; font-weight: 600; color: var(--green); }
.cab-point > .cab-seg { margin: 4px 0 6px; }

/* ── Крок 2: навантаження ─────────────────────────────────────────────── */
.cab-group + .cab-group { margin-top: 8px; }
.cab-loads, .cab-mods, .cab-encs, .cab-list, .cab-cs, .cab-kb, .cab-alts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.cab-load { padding: 10px 12px 4px; border-radius: var(--radius-sm); background: rgba(var(--green-rgb), .035); }
.cab-load-main { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.cab-load-main .cab-f-title { flex: 1 1 160px; }
.cab-load-end { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; min-height: 44px; }
.cab-load > .cab-tag { margin-top: 6px; }
.cab-x { display: inline-grid; place-items: center; font: inherit; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--hint); cursor: pointer; }
.cab-x:active { background: rgba(var(--danger-rgb), .12); }

/* ── Крок 3–5: модулі, картки, перелік ────────────────────────────────── */
.cab-thumb { flex: none; display: inline-grid; place-items: center; width: var(--px, 48px); height: var(--px, 48px); padding: 0; border: 1px solid rgba(var(--green-rgb), .14); border-radius: var(--radius-sm);
  background: #fff; overflow: hidden; cursor: zoom-in; }
.cab-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cab-thumb:active { transform: scale(.97); }
.cab-thumb-none { display: inline-grid; place-items: center; width: 100%; height: 100%; color: rgba(var(--green-rgb), .35); background: rgba(var(--green-rgb), .04); }
.cab-thumb-none .ico { width: 45%; height: 45%; }
.cab-thumb.cab-thumb-none { cursor: default; }

.cab-mod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(var(--green-rgb), .035); scroll-margin: 80px; }
.cab-mod:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.cab-mod-t { display: grid; gap: 2px; min-width: 0; }
.cab-mod-t b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.cab-mod-t small { color: var(--hint); font-size: var(--fs-small); }
.cab-mod-role { font-size: var(--fs-small); color: var(--green); margin: 0; }
.cab-mod-x, .cab-mod > .cab-more { grid-column: 2 / -1; }
.cab-mod-x { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: flex-end; }
.cab-mod.is-missing { background: rgba(var(--danger-rgb), .06); }
.cab-mod-group { margin: 16px 0 8px; font-size: var(--fs-small); color: var(--hint); font-weight: 600; }
.cab-alt-h { margin: 4px 0; font-size: var(--fs-caption); color: var(--hint); }
.cab-alts { gap: 4px; margin-bottom: 8px; }
.cab-alt-o { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-small); }
.cab-alt-o img, .cab-alt-o .cab-thumb-none { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid rgba(var(--green-rgb), .1); }
.cab-alt-o:has(input:checked) { background: rgba(var(--green-rgb), .07); }
.cab-alt-o.is-no small { color: #7a5d00; }

.cab-cards { display: grid; gap: 8px; }
.cab-card { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(var(--green-rgb), .12); background: var(--surface); }
.cab-card > label { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; min-height: 44px; cursor: pointer; }
.cab-card small { color: var(--hint); font-size: var(--fs-small); }
.cab-card:has(input:checked) { border-color: var(--green); background: rgba(var(--green-rgb), .05); }
.cab-card.is-no { color: var(--hint); }
.cab-why { color: var(--text); }
.cab-encs:focus { outline: none; }

.cab-ports { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.cab-ports div { padding: 6px 12px; border-radius: var(--radius-sm); background: rgba(var(--green-rgb), .05); }
.cab-ports dt { font-size: var(--fs-caption); color: var(--hint); }
.cab-ports dd { margin: 0; font-variant-numeric: tabular-nums; }
.cab-ports .is-over { background: rgba(var(--gold-rgb), .2); }

/* Місця під E2.1b-2: розділи без логіки — щоб було видно, куди це ляже. */
.cab-later { margin-top: 14px; padding: 10px 14px; border: 1px dashed rgba(var(--green-rgb), .22); border-radius: var(--radius-sm); }
.cab-later h3 { margin: 0 0 4px; font-size: var(--fs-small); color: var(--hint); }
.cab-later p { margin: 0; font-size: var(--fs-small); color: var(--hint); }

/* Статус — завжди значок і слово, не лише колір. */
.cab-st { display: inline-flex; gap: 4px; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.cab-st-ok { background: rgba(var(--green-rgb), .1); color: var(--green); }
.cab-st-warn { background: rgba(var(--gold-rgb), .28); color: #5c4700; }
.cab-st-danger { background: rgba(var(--danger-rgb), .12); color: #a31d2a; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Розкладка й перевірки ────────────────────────────────────────────── */
.cab-sheet-box, .cab-sum { background: var(--surface); border: 1px solid rgba(var(--green-rgb), .14); border-radius: var(--radius-md); padding: 14px; }
.cab-sheet-box > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; color: var(--green); font-weight: 600; list-style: none; user-select: none; }
.cab-sheet-box > summary::-webkit-details-marker { display: none; }
.cab-sheet-box > summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--transition); }
.cab-sheet-box[open] > summary::before { transform: rotate(45deg); }
.cab-sheet-box > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 981px) { .cab-sheet-box > summary { pointer-events: none; } .cab-sheet-box > summary::before { display: none; } }
.cab-fig { margin: 0; }
.cab-fig svg { width: 100%; height: auto; display: block; font-family: var(--font); }
.cab-fig figcaption { margin: 6px 0 0; font-size: var(--fs-caption); }
.cab-plate { fill: rgba(var(--green-rgb), .03); stroke: rgba(var(--green-rgb), .5); stroke-width: 1.5; }
.cab-plate.is-virtual { stroke-dasharray: 6 4; }
.cab-need { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 3; }
.cab-duct { fill: rgba(var(--green-rgb), .06); }
.cab-rail { fill: #c9ccd0; }
.cab-stop { fill: #8a9097; }
.cab-m { cursor: zoom-in; }
.cab-m rect { stroke: rgba(0, 0, 0, .35); stroke-width: .6; transition: stroke var(--transition); }
.cab-m text { fill: var(--text); font-weight: 600; pointer-events: none; }
.cab-m-ok rect { fill: #eef3ef; }
.cab-m-warn rect { fill: #f6ebc4; }
.cab-m-danger rect { fill: #f6d5d8; }
.cab-m.is-guess rect { stroke-dasharray: 3 2; stroke-width: 1; }
.cab-m:focus { outline: none; }
.cab-m:focus-visible rect, .cab-m[aria-expanded="true"] rect { stroke: var(--green); stroke-width: 2; }
.cab-dim { fill: var(--hint); }

.cab-sum:focus { outline: none; }
.cab-sum-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.05rem; color: var(--green); }
.cab-counts { margin: 0 0 10px; font-size: var(--fs-small); color: var(--hint); font-variant-numeric: tabular-nums; }
.cab-c { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--fs-small); line-height: 1.45; }
.cab-c b { color: var(--green); }
.cab-c-acts { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 4px; }
.cab-c-acts:empty { display: none; }
.cab-fix { font: inherit; font-weight: 600; min-height: 32px; padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--green); background: var(--surface); color: var(--green); cursor: pointer; }
.cab-fix:active { background: rgba(var(--green-rgb), .1); }

.cab-scope { padding: 12px 14px; margin: 12px 0; background: rgba(var(--gold-rgb), .14); border-radius: var(--radius-sm); }

/* ── Апарати шафи (I-0143, A4): смуги над кроками, вибір на кроці 1 ──────── */
.cab-ap { display: grid; gap: 8px; }
.cab-ap[hidden] { display: none; }
.cab-ap > p { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(var(--green-rgb), .06); text-wrap: pretty; }
.cab-ap .cab-ap-new, .cab-ap .cab-ap-pend { background: rgba(var(--gold-rgb), .14); }
.cab-ap .cab-ap-gone { background: rgba(var(--danger-rgb), .08); }
.cab-ap-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cab-ap-list, .cab-ap-pts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.cab-ap-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between;
  padding: 2px 12px; border: 1px solid rgba(var(--green-rgb), .14); border-radius: var(--radius-sm); background: var(--surface); }
.cab-ap-list .cab-chk span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.cab-ap-list small, .cab-ap-pts small { color: var(--hint); font-size: var(--fs-caption); }
.cab-ap-pts li { padding: 8px 12px; border-left: 3px solid rgba(var(--green-rgb), .3); background: rgba(var(--green-rgb), .04); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cab-list-groups { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.cab-list-group h4 { margin: 0 0 6px; font-size: var(--fs-small); color: var(--hint); }
.cab-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.cab-list li.is-missing { color: var(--danger); }
.cab-list-qty { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cab-kb { display: grid; gap: 6px; }
.cab-check { padding-left: 1.3em; display: grid; gap: 4px; max-width: 70ch; }
.cab-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.cab-note:empty { display: none; }
.cab-share { display: flex; flex-wrap: wrap; gap: 8px; }
.cab-share input { flex: 1 1 260px; min-height: 44px; padding: 8px 10px; font: inherit; font-size: 1rem; border: 1px solid var(--border-control); border-radius: var(--radius-sm); }

/* ── Картка модуля ────────────────────────────────────────────────────── */
.cab-pop { position: fixed; z-index: 50; width: 280px; padding: 14px; border-radius: var(--radius-md); background: var(--surface);
  border: 1px solid rgba(var(--green-rgb), .16); box-shadow: var(--elev-4); font-size: var(--fs-small);
  animation: cab-pop-in 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.cab-pop:focus { outline: none; }
.cab-pop:focus-visible { outline: 2px solid var(--focus); }
.cab-pop-x { position: absolute; top: 4px; right: 4px; }
.cab-pop-ph { display: grid; place-items: center; height: 160px; margin: 0 0 10px; border-radius: var(--radius-sm); background: #fff; border: 1px solid rgba(var(--green-rgb), .08); overflow: hidden; color: var(--hint); }
.cab-pop-ph img { width: 100%; height: 100%; object-fit: contain; }
.cab-pop-ph .cab-thumb-none { width: 64px; height: 64px; border-radius: 50%; }
.cab-pop .cab-mod-role { margin: 0 0 2px; }
.cab-pop-t { margin: 0 0 8px; color: var(--text); padding-right: 24px; }
.cab-pop-f { display: grid; gap: 3px; margin: 0 0 8px; }
.cab-pop-f div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.cab-pop-f dt { color: var(--hint); }
.cab-pop-f dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cab-pop.is-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: var(--radius-md) var(--radius-md) 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); animation-name: cab-sheet-in; }
.cab-pop.is-sheet .cab-pop-ph { height: 140px; }
@keyframes cab-pop-in { from { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes cab-sheet-in { from { transform: translateY(24px); opacity: 0; } }

@media (hover: hover) and (pointer: fine) {
  .cab-go:hover { border-color: rgba(var(--green-rgb), .4); }
  .cab-x:hover { background: rgba(var(--danger-rgb), .08); color: var(--danger); }
  .cab-thumb:hover { border-color: var(--green); }
  .cab-m:hover rect { stroke: var(--green); stroke-width: 1.4; }
  .cab-alt-o:hover { background: rgba(var(--green-rgb), .05); }
  .cab-fix:hover { background: rgba(var(--green-rgb), .06); }
  .cab-card:hover { border-color: rgba(var(--green-rgb), .35); }
}

/* ── Вузький екран: кроки першими, перевірки смугою над формою ───────── */
@media (max-width: 980px) {
  .cab { grid-template-columns: minmax(0, 1fr); }
  .cab-side { position: static; }
  .cab-alert { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 14px; min-height: 44px; border-radius: var(--radius-sm);
    background: rgba(var(--gold-rgb), .16); color: var(--text); text-decoration: none; font-size: var(--fs-small); font-weight: 600; }
  .cab-alert[hidden] { display: none; }
  .cab-alert-go { margin-left: auto; color: var(--green); display: inline-flex; align-items: center; gap: 4px; }
  .cab-sum { scroll-margin-top: 12px; }
}
@container cab-main (max-width: 640px) {
  /* Смуга кроків — лише номери; назва кроку — у заголовку самого кроку. */
  .cab-nav ol { gap: 8px; }
  .cab-go { justify-content: center; padding: 8px 4px; }
  .cab-go-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 560px) {
  .cab-step { padding: 16px 12px; }
  .cab-load-main .cab-f-title { flex-basis: 100%; }
  .cab-load-main .cab-f:not(.cab-f-title):not(.cab-f-num) { flex: 1 1 140px; }
  .cab-mod { grid-template-columns: auto minmax(0, 1fr); }
  .cab-mod > .cab-st { grid-column: 2; justify-self: start; }
  .cab-mod-x, .cab-mod > .cab-more { grid-column: 1 / -1; }
  .cab-more-b { padding-left: 4px; }
  .cab-actions .btn, .cab-foot .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cab-chip, .cab-go, .cab-more > summary::before, .cab-m rect { transition: none; }
  .cab-pop { animation: none; }
}