/* Формы: мастер, чипы, колесо, кнопки, загрузка, правила. */
.rules-hint {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0;
    margin-bottom: var(--space-lg);
    max-width: 80ch;
    line-height: 1.6;
}
.rules-grid {
    display: block;
    margin-bottom: var(--space-2xl);
    background: transparent;
    border-top: 0.0625rem solid var(--border);
    border-bottom: 0.0625rem solid var(--border);
}
.rules-head,
.rule-row {
    display: grid;
    grid-template-columns: var(--grid-cols,
        minmax(10rem, 1.2fr) minmax(10rem, 1fr) minmax(9rem, auto)
        minmax(12rem, 2fr)   minmax(12rem, 2fr) auto auto auto);
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 0.0625rem solid var(--border);
}
.rules-head {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    padding: var(--space-sm) 0;
    border-bottom-color: var(--text-muted);
}
.rule-row:hover { background: color-mix(in srgb, var(--primary) 3%, transparent); }
.rule-row .form-input,
.rule-row .form-select {
    background: transparent;
    border: 0;
    border-bottom: 0.0625rem solid transparent;
    padding: 0.25rem 0.125rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-primary);
    border-radius: 0;
    transition: border-color 0.15s ease;
}
.rule-row .form-input:hover,
.rule-row .form-select:hover { border-bottom-color: var(--border); }
.rule-row .form-input:focus,
.rule-row .form-select:focus {
    outline: none;
    border-bottom-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.rule-row .form-input::placeholder { color: var(--text-muted); opacity: 0.7; }
.rule-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
}
.rule-row .btn-sm {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    padding: 0.25rem 0.5rem;
    min-height: 1.5rem;
}
.btn-link-danger {
    background: none;
    border: 0;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    cursor: pointer;
}
.btn-link-danger:hover { color: var(--secondary); }
.rule-row-new {
    background: color-mix(in srgb, var(--bg-elevated) 50%, transparent);
}
.rules-add-title {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    margin: var(--space-2xl) 0 var(--space-md);
}
.rule-add-form { max-width: 44rem; }
@media (max-width: 60em) {
    .rules-head { display: none; }
    .rule-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: var(--space-md) 0;
    }
    .i18n-cell { grid-template-columns: 1fr; }
}
.fm-board {
    display: grid;
    grid-template-columns: repeat(var(--fm-cols), 1fr);
    gap: var(--fm-gutter);
    margin-bottom: var(--space-xl);
}
.fm-board-col,
.po-layout > .po-timeline { grid-column: span var(--fm-cols); }
@media (min-width: 37.5em) {
    .fm-board-col { grid-column: span 6; }
}
@media (min-width: 60em) {
    .fm-board-col { grid-column: span 3; }
}
.fm-board-col-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.375rem 0.625rem;
    border-bottom: 0.0625rem solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}
.fm-board-col-title { color: var(--text-primary); }
.fm-board-col-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* (.zone-code поглощён на 100% правилом-бабблом ниже — дубль удалён, task-044.
   Типографика .zone-completion слита в правило рядом с его ::before.) */
.fm-board-col-list,
.comment-thread,
.zone-tasks,
.assignment-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.fm-board-card {
    --accent-color: var(--text-muted);
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    /* Card already sits inside its status column — the coloured top-rail was a
       redundant status accent edge (no_left_border_accent). Uniform border. */
    padding: var(--space-sm);
    position: relative;
}
.fm-board-card-title {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    line-height: 1.35;
    color: var(--text-primary);
}
.fm-board-card-body {
    margin-top: 0.25rem;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}
.fm-board-card-foot {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
    flex-wrap: wrap;
}
.fm-board-card-meta {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-board-card-move { display: inline; margin: 0; }
.fm-board-btn {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 0.125rem 0.375rem;
    min-height: 1.375rem;
    cursor: pointer;
}
.fm-board-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.fm-board-empty {
    padding: var(--space-sm);
    color: var(--text-muted);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
}
.btn.btn-icon {
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    list-style: none;
    cursor: pointer;
}
summary.btn {
    display: list-item;
    list-style: none;
    text-align: center;
    line-height: 1.2;
    /* №149 */
    cursor: pointer;
}
summary.doc-upload__toggle {
    display: inline-block;
    width: auto;
    min-width: 14rem;
    max-width: 100%;
}
summary.btn-icon {
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    display: list-item;
    text-align: center;
    line-height: 2.75rem;
    box-sizing: border-box;
    list-style: none;
    cursor: pointer;
}
.btn.btn-icon svg,
summary.btn-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
    /* №150 */
    pointer-events: none;
}
summary.btn-icon::-webkit-details-marker { display: none; }
summary.btn-icon::marker { content: ""; }
@media (pointer: coarse) {
    .form-check input[type="checkbox"] { width: 1.375rem; height: 1.375rem; }
    .toggle input { width: 2.75rem; height: 1.5rem; }
}
/* `summary` в UA-стилях — `display: list-item`, и он перебивал `inline-flex`
   у `.btn`: раскрывашка, одетая кнопкой, растягивалась во всю ширину колонки
   (замер на /sites: 1353×44 при подписи в шесть букв), а плюс с подписью
   уезжал от центра (Артём, 22.09.2026, скриншот «огромная кнопка добавить»).
   Тот же дефект уже лечили точечно у кнопок приёмки отчёта (pages.css,
   `.rev-actions .inspector-action > summary`) — лечим один раз у примитива,
   иначе третья такая кнопка сломается снова. */
summary.btn { display: inline-flex; width: auto; list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    /* Two kinds of button, no third: a SOLID BLOCK for the main action, a BARE
       LABEL for everything else. The outlined middle state is what made the UI
       look cheap, and an outlined box beside the phone's rounded screen corner
       always reads as chipped. Variants below set a background or a colour —
       none of them bring back a border. */
    border: 0;
    cursor: pointer;
    min-height: 2.75rem; /* №169 */
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* Bare `.btn` <button>s inherited the UA push-button look on iOS
       (solid blue fill, unreadable text — Alex 17.07). Kill the UA
       appearance and give the base class an explicit surface. */
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
}
/* Solid block — the one main action on a screen. */
.btn-primary,
.ai-row .ai-icon:first-child {
    background: var(--primary);
    color: var(--white);
}
/* Bare label. Sat on a surface fill with a border before; next to a filled
   primary it now reads as clearly secondary without drawing a box. */
.btn-secondary {
    background: transparent;
    color: var(--text-primary);
}
.btn-secondary:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
/* Деструктив: палітра свідомо без червоного («construction = orange»), тож
   суцільний оранж робив «Видалити» схожим на primary-CTA. Лишається підпис
   кольором hazard, заливка тільки на hover. */
.btn-danger {
    background: transparent;
    color: var(--secondary);
}
.btn-danger:hover {
    background: var(--secondary);
    color: var(--white);
}
/* Review verdicts on the task page — colour in the label, palette-native. */
.btn-accept { color: var(--success); }
.btn-reject { color: var(--secondary); }
.btn-accept:hover { background: color-mix(in srgb, var(--success) 14%, transparent); }
.btn-reject:hover { background: color-mix(in srgb, var(--secondary) 14%, transparent); }
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn:active:not(:disabled) { transform: scale(0.96); transition-duration: var(--dur-fast); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 0.1875rem var(--focus-ring); }
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
@media (hover: hover) {
    .btn-primary:hover { background: var(--primary-dim); border-color: var(--primary-dim); }
    .btn-secondary:hover { background: var(--bg-elevated); }
    .upload-zone:hover { border-color: var(--primary); color: var(--primary); }
}
.upload-zone {
    border: 0.125rem dashed var(--border);
    padding: var(--space-xl);
    text-align: center;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    transition: border-color 0.15s;
}
.upload-zone input[type="file"] { display: none; }
.upload-preview {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
}
.chip-island {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 62.4375rem;
    background: var(--bg-elevated);
    border: 0.0625rem solid var(--border);
    box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.3);
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0rem) + 1rem);
    transform: translateX(-50%);
    z-index: 40;
    max-width: calc(100% - 1.5rem);
    overflow-x: auto;
    scrollbar-width: none;
}
.chip-island::-webkit-scrollbar { display: none; }
.chip-island-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    min-height: var(--tap-target);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    border: 0;
    /* Пилюля запрещена (DESIGN.md, раздел 8, пункт 3). */
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.chip-island-btn:hover { color: var(--text-primary); }
.chip-island-btn[data-active="true"] {
    background: var(--primary);
    color: var(--bg-base);
}
@media (min-width: 48em) {
    .chip-island {
        position: static;
        transform: none;
        left: auto;
        bottom: auto;
        max-width: none;
        box-shadow: none;
        backdrop-filter: none;
        margin-bottom: var(--space-md);
        padding: 0;
        background: transparent;
        border: 0;
    }
    .chip-island-btn {
        border: 0.0625rem solid var(--border);
        background: var(--bg-surface);
    }
}
.chip-scroll {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
    scrollbar-width: none;
}
.chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    min-height: var(--tap-target);
    padding: 0.375rem 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    font-weight: 600;
    letter-spacing: 0;
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    scroll-snap-align: start;
    transition: all var(--dur-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}
.chip:hover,
.fm-chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
.chip[data-active="true"],
.chip.active,
.fm-chip[aria-pressed="true"],
.fm-chip.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.chip-select, .chip-date {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    padding: 0.375rem 0.5rem;
    min-height: var(--tap-target);
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    appearance: none;
    -webkit-appearance: none;
    white-space: nowrap;
    scroll-snap-align: start;
    flex-shrink: 0;
}
.chip-select {
    padding-right: 1.25rem;
    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;
}
/* `input.` не просто `.chip-date`: голый класс (0,1,0) проигрывает
   `input[type="date"]{width:100%}` (0,1,1) из primitives — поле распирало
   на всю строку и второй датчик уезжал за экран (скрин Артьома 12.08). */
input.chip-date { width: 8.5rem; flex: 0 0 auto; }
/* Фильтры галереи: форма из полей, не лента чипов. Телефон: объект на всю ширину,
   две даты двумя равными столбцами; от 48em всё в одну строку (Frain гл.5, minmax). */
.chip-scroll--filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    overflow: visible;
    scroll-snap-type: none;
}
.chip-scroll--filters .chip-select { grid-column: 1 / -1; }
.chip-scroll--filters .chip-select,
.chip-scroll--filters input.chip-date { width: 100%; min-width: 0; box-sizing: border-box; }
@media (min-width: 48em) {
    .chip-scroll--filters {
        grid-template-columns: minmax(0, 16rem) repeat(2, minmax(0, 9rem));
        justify-content: start;
    }
    .chip-scroll--filters .chip-select { grid-column: auto; }
}
.chip-select:focus-visible, .chip-date:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 0.1875rem var(--focus-ring); }
.chip .site-label { font-weight: 400; opacity: .6; text-transform: none; letter-spacing: 0; margin-left: 0.25rem; }
.btn-inline {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    letter-spacing: 0;
    transition: all var(--dur-fast) var(--ease-out);
}
.btn-inline--ok:hover { background: var(--success); color: var(--white); }
/* Лента галереї: дні друг під другом на всю ширину (раніше це був .photo-grid, і
   секція дня займала одну його колонку). Відступ знизу — під нижню панель. */
.gal-feed { padding-bottom: 2rem; }
.gal-upload-pick { position: relative; overflow: hidden; cursor: pointer; }
.gal-upload-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: var(--fs-md); }
.site-card .btn { margin-top: var(--space-sm); font-size: var(--fs-xs); padding: var(--space-sm) var(--space-md); min-height: 2.75rem; }
@media (max-width:30em) {
    .fm-install-actions .btn { flex:1; }
}
/* ─── Profile: обліковий запис, звичайний лист налаштувань ─── */
.pf { max-width: 40rem; }
/* avatar with corner crosshairs (square = industrial) */
.pf-id-avatar-wrap { position: relative; flex-shrink: 0; width: 6rem; height: 6rem; }
.pf-id-avatar { width: 6rem; height: 6rem; object-fit: cover; border: 0.0625rem solid var(--border);
  background: var(--bg-surface); border-radius: 0.125rem; display: block; }
.pf-id-avatar--ph { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.pf-id-avatar--ph svg { width: 44%; height: 44%; }
.pf-id-cam { position: absolute; bottom: -0.4375rem; right: -0.4375rem; width: 1.625rem; height: 1.625rem; display: flex; align-items: center; justify-content: center;
  background: var(--bg-base); border: 0.0625rem solid var(--border); border-radius: 0.125rem; color: var(--text-secondary); cursor: pointer; z-index: 2; }
.pf-id-cam:hover { color: var(--primary); border-color: var(--primary); }
.pf-id-meta { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; }
.pf-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.6rem; padding-bottom: 1.1rem; border-bottom: 0.0625rem solid var(--border); }
.pf-id-name { margin: 0; font-family: var(--font-display); font-size: var(--fs-2, 1.375rem); font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.pf-id-role { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0; color: var(--text-secondary); }
.pf-id-readout { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-sec { margin-bottom: 1.6rem; }
.pf-sec-h { margin: 0 0 0.85rem; }
/* editable fields */
.pf-form { display: flex; flex-direction: column; gap: 0.85rem; }
.pf-field { display: flex; flex-direction: column; gap: 0.32rem; }
.pf-field-k { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0; color: var(--text-muted); }
.pf-input { width: 100%; background: var(--bg-surface); border: 0.0625rem solid var(--border); border-radius: 0.125rem;
  padding: 0.62rem 0.7rem; color: var(--text-primary); font-size: var(--fs-sm); }
.pf-input:focus,
.chat-reply-input:focus,
.wk-select:focus,
.wk-input:focus { outline: none; border-color: var(--primary); }
.pf-save { align-self: flex-start; margin-top: 0.2rem; }
/* tabular spec rows with dotted leaders */
.pf-rows { margin: 0; border: 0.0625rem solid var(--border); border-radius: 0.125rem; }
.pf-row { display: flex; align-items: baseline; padding: 0.6rem 0.8rem; border-bottom: 0.0625rem solid var(--border); }
.pf-row:last-child { border-bottom: 0; }
.pf-row dt { flex: 1; display: flex; align-items: baseline; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0; color: var(--text-muted); white-space: nowrap; }
.pf-row dt::after { content: ""; flex: 1; margin: 0 0.6rem 0.28em; border-bottom: 0.0625rem dotted color-mix(in srgb, var(--border) 85%, transparent); }
.pf-row dd { flex-shrink: 0; margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-primary); text-align: right; }
.pf-action { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.pf-toggle { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.pf-hint { display: block; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.4; margin: 0.2rem 0 0.7rem; }
.pf-install { display: inline-flex; margin-top: var(--space-md); }
/* ── Profile SECURITY: enrolled status + ghost "add another" ── */
.pf-status { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0; color: var(--text-secondary); }
.pf-addmore { background: transparent; border: 0.0625rem solid var(--border); color: var(--text-secondary);
  padding: 0.4rem 0.75rem; font-size: var(--fs-xs); }
.chat-orig summary {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
}
/* счётчики = «список», прячем */
.dm-chat .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    flex-direction: column-reverse;
    border: 0;
    background: transparent;
    overflow-y: auto;
    padding: var(--space-sm);
    gap: var(--space-sm);
}
/* Бабблы = той самий концепт, що AI-чат/личка (.ac-*): тональна заливка,
   БЕЗ рамки-коробки (kill nested-box AI-tell), острые углы (DS). Свои справа
   (primary tint), чужие слева (elevated). Мета-рядок = «шапка» баббла. */
.dm-chat .chat-msg {
    border: 0;
    background: var(--bg-elevated);
    color: var(--text-primary);
    max-width: 88%;
    padding: 0.5rem 0.72rem;
    align-self: flex-start;
    transition: none;
    animation: ac-bubble-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.dm-chat .chat-msg--fm { background: color-mix(in srgb, var(--primary) 7%, var(--bg-elevated)); }
.dm-chat .chat-msg--mine {
    align-self: flex-end;
    margin-left: 0;
    background: color-mix(in srgb, var(--primary) 15%, var(--bg-surface));
}
.dm-chat .chat-reply { margin-top: 0; padding: var(--space-xs) var(--space-sm) max(var(--space-xs), env(safe-area-inset-bottom)); }
/* Специфичность (0,2,0) — иначе `.dm-chat .chat-messages{column-reverse}`
   перебивает и ответы помощника садятся НАД вопросом. history — oldest-first,
   поэтому именно column (не reverse); скролл к низу делает inline-скрипт. */
.dm-chat .asst-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; flex-direction: column; }
.dm-input-wrap .chat-attach { min-height: 2.75rem; width: 2.75rem; flex-shrink: 0; }
/* Пузырь заметки прижимался вправо через `margin-left:auto`, а в колоночном
   флексе авто-отступ ещё и СЖИМАЕТ элемент по содержимому: текст переносился
   по букве в столбик шириной с миниатюру (скрин Артьома 12.08). Прижимаем
   через align-self и задаём вилку ширины, как в остальных чатах. */
.notes-thread .chat-msg {
    align-self: flex-end;
    margin-left: 0;
    width: fit-content;
    min-width: min(60%, 14rem);
    max-width: min(86%, 32rem);
}
.assignee-opt input { width: 1.1rem; height: 1.1rem; flex-shrink: 0; accent-color: var(--accent); }
.ghost-row { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.6rem; align-items: center; padding: 0.5rem 0.6rem; border: 0.0625rem solid var(--border); background: var(--bg-surface); }
.ghost-head { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; }
.ghost-src { font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0; color: var(--text-muted); border: 0.0625rem solid var(--border); padding: 0 0.25rem; flex-shrink: 0; }
.ghost-label,
.hc-label { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ghost-marks { display: inline-flex; flex-wrap: wrap; gap: 0.0625rem; }
.ghost-mark { min-width: 2rem; height: 2rem; padding: 0 0.5rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; line-height: 1; border: 0.0625rem solid var(--border); background: var(--bg-base); color: var(--text-muted); cursor: pointer; }
.ghost-mark.m-done[aria-pressed="true"] { background: var(--success); color: var(--white); border-color: var(--success); }
.ghost-mark.m-partial[aria-pressed="true"] { background: var(--warning); color: var(--white); border-color: var(--warning); }
.ghost-mark.m-miss[aria-pressed="true"] { background: var(--secondary); color: var(--white); border-color: var(--secondary); }
.ghost-note { grid-column: 1 / -1; margin-top: 0.15rem; }
/* Plan review on the report-detail page (read-only checklist). */
/* Задачи графика на отчёте: фаза · название · процент, полоса, факт дня. */
.plan-review,
.linked-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.0625rem; }
.nav-more > summary { list-style: none; cursor: pointer; }
.nav-more > summary::-webkit-details-marker { display: none; }
@media (min-width: 60.001em) {
    /* 30.09 (Артём: «сетка поплыла»): кожен рядок був окремою сіткою, і треки `auto` кожен рядок
       рахував сам — у шапці порожньо, у рядках кнопки й прапорці, колонки розходились. Треки
       задає таблиця, рядки беруть їх через subgrid — одна сітка на всю таблицю. Лише від 60em:
       нижче рядок і так складається в одну колонку. */
    .rules-grid { display: grid; grid-template-columns: var(--grid-cols, minmax(10rem, 1.2fr) minmax(10rem, 1fr) minmax(9rem, auto) minmax(12rem, 2fr) minmax(12rem, 2fr) auto auto auto); column-gap: var(--space-md); }
    .rules-head, .rule-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.fm-gate-go { min-height: 2.75rem; white-space: nowrap; }
.fm-gate-x { min-width: 2.75rem; min-height: 2.75rem; background: none; border: 0; color: var(--text-secondary); font-size: var(--fs-lg); cursor: pointer; }