/* Экран «Траты мимо бюджетов» (public/features/budget-linking-screen.js).
   Отдельный файл: style.css уже в бюджете размера (scripts/file-size-budget.json).
   Чекбокс не нативный: кнопка role="checkbox" с рисованной галочкой — в стиле остальных
   элементов управления проекта (AGENTS.md, «Интерфейс: элементы управления»). Выбор бюджета —
   ui-select, как в редакторе раскладки. Рассчитано на 320 px: название и сумма переносятся
   по строкам, сумма не режется. */

.bl-note{margin:0;color:var(--ok);font-size:.86rem}
.bl-empty{margin:0;color:var(--ok)}
.bl-more{margin:0;font-size:.8rem}

/* Группа — один бюджет: название слева, «осталось A → B» справа; на 320 px подпись уходит под название, сумма не режется. */
.bl-group{display:grid;gap:6px;margin-top:16px}
.bl-group-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:0;font-size:.95rem}
.bl-group-name{min-width:0;overflow-wrap:anywhere}
.bl-group-left{color:var(--muted);font:600 .76rem 'DM Mono','Manrope',ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.bl-group-note{margin:0;color:var(--muted);font-size:.78rem}
.bl-list{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bl-row{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:0 4px;min-width:0;padding:10px 12px 12px 4px;border-top:1px solid var(--line)}
.bl-row:first-child{border-top:0}
.bl-row.is-on{background:var(--tap-bg)}

/* Область нажатия 40x40, сам квадрат меньше. Выбрано — залитый квадрат с галочкой, а не только цвет. */
.bl-check{display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer}
.bl-check:hover{background:var(--tap-bg-hover)}
.bl-check:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bl-box{position:relative;width:22px;height:22px;border:1.5px solid var(--tap-border);border-radius:5px;background:var(--paper);transition:background .15s,border-color .15s}
.bl-check[aria-checked="true"] .bl-box{border-color:var(--accent);background:var(--accent)}
.bl-check[aria-checked="true"] .bl-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}

.bl-body{display:grid;gap:3px;min-width:0;padding-top:8px}
.bl-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.bl-title{min-width:0;font-size:.92rem;overflow-wrap:anywhere}
.bl-sum{font:600 .86rem 'DM Mono','Manrope',ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.bl-meta,.bl-target,.bl-reason,.bl-cross,.bl-close{margin:0;min-width:0;overflow-wrap:anywhere}
/* Итог строки — сколько она закроет; «не закроет» — предупреждение, а не ошибка. */
.bl-close{color:var(--ok);font:600 .8rem 'DM Mono','Manrope',ui-sans-serif,system-ui,sans-serif}
.bl-close.is-none{color:var(--warn);font:500 .78rem Manrope,Arial,sans-serif}
.bl-meta{color:var(--muted);font-size:.76rem}
.bl-target{font-size:.86rem}
.bl-reason{color:var(--muted);font-size:.78rem}
.bl-cross{color:var(--warn);font-size:.78rem}
/* Чужая приватная трата: её привязка видна только тем, кто её видит, — подпись объясняет, почему она не отмечена заранее. */
.bl-private{margin:0;color:var(--muted);font-size:.78rem;font-style:italic}
/* «проверьте» — состояние, а не ошибка: пунктирная метка, как «не закрывает бюджет» в редакторе раскладки. */
.bl-tag{display:inline-block;padding:1px 8px;border:1px dashed var(--line);border-radius:99px;color:var(--muted);font-size:.68rem;font-weight:600;white-space:nowrap}

.bl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px}
.bl-actions .ui-select{flex:1 1 180px;width:auto;min-width:0}
.bl-skip,.bl-ignore{flex:0 0 auto;min-height:36px;white-space:normal;text-align:left}
.bl-restore{justify-self:start;min-height:36px}

/* «Привязать выбранные» всегда под рукой: список длинный, а кнопка одна. */
.bl-foot{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
.bl-apply{display:grid;gap:2px;width:100%;min-height:48px;padding-block:8px}
.bl-apply small{font:500 .74rem 'DM Mono','Manrope',ui-sans-serif,system-ui,sans-serif;opacity:.9;overflow-wrap:anywhere}
/* Участнику: сколько человек почувствуют привязку в «Мне ещё оплатить» — над кнопкой, рядом с тем, что нажимается. */
.bl-warn{margin:0 0 8px;padding:8px 10px;border:1px solid #c3a18f;border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));border-left:3px solid var(--warn);border-radius:8px;background:#efe8df;background:color-mix(in srgb,var(--warn) 6%,var(--paper));font-size:.82rem;line-height:1.4;overflow-wrap:anywhere}
.bl-apply:disabled{opacity:.45;cursor:default}
.bl-apply:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Строка «нужен выбор»: бюджета у неё ещё нет, отметить её нельзя, пока человек его не выберет. */
.bl-check.is-disabled{opacity:.4;cursor:default}
.bl-pick{color:var(--muted);font-weight:500}

/* ---- Карточка «Бюджет поездки» на Обзоре (public/features/budget-top.js) ---- */
/* Сумма не переносится внутри себя: «37 824 ₽» либо целиком в строке, либо целиком на следующей. */
.bl-money{white-space:nowrap}
.budget-top-name small{display:block;color:var(--muted);font-size:.74rem;line-height:1.3}
.budget-top-personal{padding-bottom:11px}
/* Предупреждение — состояние, а не ошибка: рамка и полоса слева, текст обычного цвета, нажатие ведёт на экран разбора. */
.budget-top-warning{display:grid;gap:3px;width:100%;min-height:56px;margin:10px 0 2px;padding:10px 12px;border:1px solid #c3a18f;border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));border-left:3px solid var(--warn);border-radius:8px;background:#efe8df;background:color-mix(in srgb,var(--warn) 6%,var(--paper));color:var(--ink);text-align:left;font:inherit}
.budget-top-warning b{font-size:.88rem;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.budget-top-warning small{color:var(--muted);font-size:.76rem;line-height:1.4;overflow-wrap:anywhere}
.budget-top-warning u{color:var(--accent);text-decoration:none;white-space:nowrap}
.budget-top-warning:hover,.budget-top-warning:focus-visible{background:#ebdfd5;background:color-mix(in srgb,var(--warn) 11%,var(--paper));outline:none}
.budget-top-warning:focus-visible{outline:2px solid var(--accent);outline-offset:2px}