/* Объекты и главная: плитки, лента, цифры, газета. */
@media (pointer: coarse) {
    /* Тап-ціль під палець у рукавиці: 48 px на сенсорному екрані, незалежно від щільності. */
    :root, body[data-density="compact"], body[data-density="comfortable"], body[data-density="spacious"] { --tap-target: 3rem; --input-min-height: 2.75rem; }
}
@media (prefers-color-scheme: light) {
    /* Бетон замість крему: нейтральна сіра земля, білий аркуш. */
    :root:not([data-theme="dark"]) { --bg-base: #e5e5e2; --bg-elevated: #d9d9d5; --border: #c8c8c3; --text-secondary: #4a4a46; --text-muted: #5e5e59; --link: #1f4e79; --hazard-text: #b53a0f; --success-text: #3f6f4f; --primary: #c2410c; --success: #356140; --focus-ring: rgba(194, 65, 12, 0.3); --secondary: #b53a0f; --late: #b3261e; --plan: #8f8f89; }
    :root:not([data-theme="dark"]) .role-pill.is-active { color: var(--white); }
}
/* Q5 — home "lift": two viewport-height floors, root scroller snaps between
   them (scroll is a lift ride, not free). Floor content scrolls inside its
   floor; reaching an edge hands the gesture to the root, which snaps to the
   next floor. Footer keeps a snap point of its own (align: end) so it stays
   reachable below floor 02. JS (dashboard) persists + restores the floor. */
html:has(#fm-lift.lift--paged) {
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--fm-header-h, 3.75rem);
    scroll-behavior: smooth;
}
html:has(#fm-lift.lift--paged) .footer { scroll-snap-align: end; }
.lift--paged .lift-floor {
    height: calc(100vh - var(--fm-header-h, 3.75rem) - var(--fm-bottombar-h, 0rem));
    height: calc(100dvh - var(--fm-header-h, 3.75rem) - var(--fm-bottombar-h, 0rem));
    overflow-y: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* Верхний зазор под хедером: без него плитки прилипают к шапке (лого висит
       ниже свёрнутого ряда иконок, контент лез под шапку — «отступ сверху
       пропал»). Нужен зазор БОЛЬШЕ визуальной высоты шапки-оверлея. */
    padding-top: 1.75rem;
    padding-bottom: var(--space-lg);
}
/* Micrographic floor rail — fixed mono stops, right edge. */
.lift-rail {
    position: fixed;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    z-index: 60;
}
.lift-stop {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    line-height: 1;
    padding: 0.45rem 0.4rem;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-base) 85%, transparent);
    border: 0.0625rem solid var(--border);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
@media (min-width: 64em) {
    /* ── Лифт — телефонный паттерн. На широком экране он давал сразу два бага
       (Dmitriy, 10.08): «очень пусто с компа» — этаж 01 полупустой, а очередь
       переделок спрятана на этаже 02, который без свайпа не найти; и «колесико
       отбрасывает назад» — mandatory-снап затягивал прокрутку колеса обратно к
       началу этажа. Здесь этажи становятся КОЛОНКАМИ обычного потока: работа
       видна сразу, снапа нет, рельса не нужна. 64em, а не pointer-media:
       планшет в альбомной ориентации страдал теми же пустотами. */
    html:has(#fm-lift.lift--paged) { scroll-snap-type: none; }
    .lift--paged {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
        gap: var(--space-xl);
        align-items: start;
    }
    .lift--paged .lift-floor {
        height: auto;
        overflow: visible;
        scroll-snap-align: none;
        padding-top: 0;
    }
}
.site-grid {
    display: grid;
    /* Інтринзик-грід по Frain (RWD, гл.5 auto-fit/auto-fill): auto-fit
       СХЛОПУЄ порожні треки, а плитки розбирають вільне місце (1fr). Тож
       1 папка = на всю ширину (без порожньої правої комірки — старий
       «перекіс» від фіксованих 2 колонок), 2 = дві напівколонки, більше —
       рефлоу. minmax(9rem,1fr) тримає 2-up на телефоні. НЕ auto-fill —
       той лишає порожні колонки. */
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
/* Work-category section header above a grid (MEP / BUILD / …). */
.site-group-title {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-muted);
    margin: 0 0 var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 0.0625rem solid var(--border);
}
/* Q2 — folder tiles are icon-only (abstract categories), NOT photos. Drop the
   4:3 photo frame for a tighter zone + bigger, higher-contrast icon so it fills
   the tile instead of floating lost. Project (photo) tiles keep 4:3.
   position:relative anchors the project-count badge. */
/* Довга назва ламала ряд: «Budget miscalculation» переносилась на два рядки,
   з'їдала зону іконки і підпис ставав на 20 px вище сусідського (виміряно на
   575 px: смуга 56 px проти 36 px, іконка 104 px проти 120 px). Тепер підпис завжди
   заввишки у два рядки і притиснутий до низу, а зона іконки забирає решту —
   іконки і підписи в ряду стоять на одній лінії за будь-якої довжини назви.
   Третій рядок зрізається багатокрапкою, довге слово переноситься. */
.site-tile--folder .site-tile-img {
    position: relative;
    aspect-ratio: auto;
    min-height: 6.5rem;
    padding: var(--space-md) 0;
    color: var(--text-secondary);
    flex: 1 1 auto;
}
.site-tile--folder .site-tile-img svg {
    width: 4.5rem;
    height: 4.5rem;
    transition: color var(--dur-fast, var(--dur-fast)) var(--ease-out, ease);
}
/* Original brand artwork (site_category_icons values starting with "/"):
   raster line art with alpha — render at natural aspect, no tinting.
   Light theme: white lines would vanish, so invert via the same --logo-invert
   token the header logo uses; hue-rotate(180deg) rides along so the red
   square stays red instead of flipping to cyan. */
.site-tile--folder .folder-art {
    height: 6rem;
    width: auto;
    max-width: 85%;
    object-fit: contain;
    filter: invert(var(--logo-invert, 0)) hue-rotate(calc(var(--logo-invert, 0) * 180deg));
}
.site-tile--folder .site-tile-name {
    margin-top: auto;
    line-height: 1.25;
    min-height: calc(2.5em + 2 * var(--space-sm));
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.site-tile-count {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    background: var(--secondary);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
}
@media (min-width: 48em) {
    /* Frain: auto-fit (не auto-fill) — щоб плитки заповнювали ширину, а не
           лишали порожні колонки праворуч на широкому вьюпорті. */
    .site-grid { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
    /* Плитки ОБ'ЄКТІВ (не папок): auto-fill, інакше один-два об'єкти в папці
           розтягуються на всю ширину, а фото 4:3 виходить на екран заввишки
           (заявка «Budget miscalculation», 19.09.2026). Папки лишаються auto-fit. */
    .site-grid:not(:has(.site-tile--folder)) { grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }
}
.site-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 0.09375rem solid var(--border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
@media (hover: hover) {
    .site-tile:hover { border-color: var(--primary); transform: translateY(-0.125rem); box-shadow: none; }
}
.site-tile-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    width: 100%;
    background: var(--bg-base);
    color: var(--text-muted);
    overflow: hidden;
    text-decoration: none;
}
/* Skeleton shimmer — the "frame loads instantly, photo arrives on its own"
   (YouTube-style) feel. Sits behind the image; the image fades in over it.
   ONLY on tiles that actually carry an <img> (covers) — icon-only tiles
   (folders, pinned, empty) have no img, so the shimmer must not cover them. */
.site-tile-img:has(img:not(.folder-art))::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        var(--bg-base) 30%, var(--bg-elevated) 50%, var(--bg-base) 70%);
    background-size: 200% 100%;
    animation: fm-shimmer 1.4s ease-in-out infinite;
}
/* Brand folder artwork is inline-alpha line art, not a network cover — no
   skeleton, no fade gate; it just paints. */
@keyframes fm-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.site-tile-img img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Fade-in on load (JS adds .is-loaded). */
/* Плавное появление картинки. Страховка: если класс `is-loaded` по любой
   причине не доехал (панель пришла свопом, обработчик не навесился), через
   2 секунды снимок проявляется сам. Невидимое фото хуже, чем фото без
   анимации — Артьом 12.08: «фотки не подгружаются». */
.fm-fade { opacity: 0; transition: opacity 0.35s ease; animation: fm-fade-safety 0.35s ease 2s forwards; }
.fm-fade.is-loaded { opacity: 1; animation: none; }
@keyframes fm-fade-safety { to { opacity: 1; } }
.site-tile-empty {
    color: var(--text-muted);
    opacity: 0.4;
}
.site-tile-upload {
    cursor: pointer;
    flex-direction: column;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
}
.site-tile-edit {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    color: var(--text-primary);
    border: 0.0625rem solid rgba(255,255,255,0.15);
    cursor: pointer;
    /* Touch default: always visible (dimmed). A hover-reveal here made iOS
       treat the FIRST tap on a project tile as "apply :hover" (show this
       button) and only the second tap as a click — folder tiles have no edit
       button, hence "folders open in one tap, projects need two". */
    opacity: 0.65;
    transition: opacity 0.15s;
    z-index: 2;
}
.site-tile-name {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    border-top: 0.0625rem solid var(--border);
}
.site-tile--pinned {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    aspect-ratio: auto;
}
.site-tile--pinned .site-tile-img {
    aspect-ratio: auto;
    width: auto;
    height: auto;
    background: transparent;
    flex: 0 0 auto;
    color: var(--primary);
}
.site-tile--pinned .site-tile-name {
    padding: 0;
    border: none;
    font-size: var(--fs-xs);
}
.site-card {
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    padding: var(--space-md);
    position: relative;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.site-card > * { position: relative; z-index: 1; }
.site-card::before {
    content: "+";
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--border);
}
.site-name {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: 0;
}
/* ── Sites admin page (redesign 20.07) ─────────────────────────
   Responsive card grid + category chips + compact tool rows, in the
   dashboard's visual language. No accent left-border (AI-pattern) — the
   mono #id + category pills carry the signal. */
.site-admin-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}
.sc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding-left: 0.5rem;              /* clear the ::before "+" glyph */
}
.sc-title { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
/* Project-code pill (enerblock "P158" drawing-reference genre): the object
   id reads as a machined tag, not a muted "#12". Orange = brand accent. */
.sc-id {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    font-weight: 700;
    letter-spacing: 0;
    padding: 0.1rem 0.4rem;
    background: var(--accent);
    color: var(--bg-base);
    align-self: center;
    clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
}
.sc-cats { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.sc-cat {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    padding: 0.15rem 0.45rem;
    border: 0.0625rem solid var(--primary);
    color: var(--primary);
    white-space: nowrap;
}
.sc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
}
.sc-addr { color: var(--text-secondary); text-decoration: underline dotted; overflow-wrap: anywhere; word-break: break-word; }
.sc-dot.on { color: var(--success); font-weight: 600; }
.sc-panel { margin-top: var(--space-sm); }
.sc-tool {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-secondary);
    padding: 0.45rem 0.7rem;
    border: 0.0625rem solid var(--border);
    background: var(--bg-base);
    list-style: none;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sc-tool .icon { width: 0.9rem; height: 0.9rem; }
.sc-foot {
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 0.0625rem solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.btn-archive {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    background: none;
    border: 0;
    padding: 0.4rem 0.7rem;
    min-height: var(--tap-target);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-archive:hover { background: color-mix(in srgb, var(--secondary) 12%, transparent); color: var(--secondary); }
.prop-kind--create,
.btn-approve,
.fb-chip.is-ok { border-color: var(--success); color: var(--success); }
.prop-kind--update,
.btn-rework { border-color: var(--accent); color: var(--accent); }
.prop-kind--delete { border-color: var(--secondary); color: var(--secondary); }
.prop-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); }
.prop-why { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 0.35rem; font-style: italic; }
.prop-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.prop-act { display: flex; gap: 0.4rem; }
/* Расстановка — месяц целиком: страница снимает потолок .main (90rem) и берёт ширину окна. */
.wk-note,
.wizard-actions--stacked .wizard-btn-next,
.fm-ios-ok,
.sch-toolbar > form,
.rev-bar--single .btn,
.lf-tabs.seg-toggle,
.proc-table,
body:has(.pp--wide) .main { width: 100%; }
.wk-workers { width: 3rem; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.wk-chip {
    display: inline-block; padding: 0 0.3rem;
    font-family: var(--font-mono); font-size: var(--micro-size);
    background: var(--bg-elevated); color: var(--text-primary);
}
.site-tile--estimate-done { outline: 0.09375rem solid var(--success); outline-offset: -0.09375rem; }
/* Пустой экран списка объектов: блок на всю ширину, а не строка в ячейке
   сетки карточек (22.09.2026). Ширину текста держим в читаемых 42 символах
   и ставим по центру области, а не по центру первой колонки. */
.sc-blank { grid-column: 1 / -1; padding: var(--space-xl) 0 var(--space-2xl); text-align: center; }
.sc-blank-title { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-primary); }
.sc-blank-hint { margin: var(--space-xs) auto 0; max-width: 32rem; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; }
.site-tile--folder .folder-art { height: 5.5rem; }
:root[data-theme="light"] .role-pill.is-active,
.fm-tab.active,
.fm-tab:hover { color: var(--white); }
.sc-stat, .sc-dot { color: var(--text-secondary); }
/* Порожня папка: підказка «Об'єктів ще немає. Додати» не ріжеться клампом
   назви на дві лінії, назва папки лишається одним рядком. */
.site-tile--folder .site-tile-name:has(.site-tile-hint) { display: block; -webkit-line-clamp: unset; min-height: 0; }
/* ── Вигляд папки (folder_*): плитки з міні-таблицею напрямів або список,
   перемикач посиланнями, підсумок як штамп. Мова листа: рамки, без тіней. ── */
.fv-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 var(--space-sm); }
.fv-switch { display: inline-flex; border: 0.0625rem solid var(--text-primary); }
.fv-mini td { padding: 0.15rem 0; border-top: 0.0625rem dotted var(--border); }
.fv-mini td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.fv-cell { font-variant-numeric: tabular-nums; }
.fv-stats > div { padding: 0.5rem 0.75rem; background: var(--bg-base); min-width: 0; }
.fv-stats dt { font-size: var(--micro-size); color: var(--text-secondary); }
.fv-stats dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3, 1.125rem); font-variant-numeric: tabular-nums; }
@media (max-width: 47.99em) {
    .fv-cell::before { content: attr(data-label); color: var(--text-secondary); }
}
/* «Сьогодні» менеджера: заголовки-лічильники і реєстрові таблиці (26.09.2026). */
.td-sub { margin: -0.25rem 0 var(--space-md); color: var(--text-secondary); font-size: var(--fs-sm); }
.td-h { margin: var(--space-lg) 0 var(--space-xs); font-size: var(--fs-md); font-weight: 600; display: flex; align-items: baseline; gap: var(--space-sm); }
.td-h--hot { color: var(--hazard-text, var(--secondary)); }
.td-n { font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.td-site { width: 11rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.td-phase { color: var(--text-muted); font-size: var(--fs-xs); margin-left: 0.4rem; }
.td-who { width: 10rem; color: var(--text-secondary); }
.td-none { color: var(--hazard-text, var(--secondary)); }
.td-days { width: 11rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
@media (max-width: 47.99em) {
    .td-site { width: 6.5rem; max-width: 6.5rem; }
    .td-days { width: auto; }
}
/* «Мои задачи и подчинённых»: в строке форма прогресса, на телефоне объект уходит над задачей. */
@media (max-width: 47.99em) {
    .td-table:has(.tt-prog) tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-sm); }
    .td-table:has(.tt-prog) .td-site { grid-column: 1 / -1; width: auto; max-width: none; }
    .td-table:has(.tt-prog) .td-task { min-width: 0; }
}
/* Рамка-чертёж на широком экране: страница читается как лист с полями,
   разделы отбиты чертёжным штрихом. Карточных фонов здесь и так нет,
   поэтому только линии. На телефоне рамка съела бы ширину таблиц.
   Крючок через :has, потому что section_start общий для всех страниц. */
@media (min-width: 60em) {
    .section:has(> .td-sub) {
        border-inline: 0.0625rem solid var(--border);
        padding: 0 var(--space-lg) var(--space-lg);
    }
    .section:has(> .td-sub) .td-h {
        padding-top: var(--space-md);
        background: var(--rule-dash) top left / var(--rule-dash-size) no-repeat;
    }
}
.np a:hover { text-decoration: underline; text-decoration-thickness: 0.0625rem; text-underline-offset: 0.15em; color: var(--np-accent); }
.np-photo figcaption { font-size: var(--fs-xs); color: var(--np-muted); border-bottom: 0.0625rem solid var(--np-hair); padding: 0.3rem 0; }
.np-body p { margin: 0 0 0.8em; text-wrap: pretty; color: var(--np-body); }
.np-body p:first-child::first-letter { float: left; font-family: var(--np-display); font-weight: 900; font-size: 3.4em; line-height: 0.8; padding: 0.06em 0.08em 0 0; }
.np-nums div { border-bottom: 0.0625rem solid var(--np-hair); padding-bottom: 0.2rem; }
.np-nums dt { font-size: var(--fs-xs); color: var(--np-muted); }
.np-nums dd { margin: 0; font-family: var(--np-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.np-item p { margin: 0 0 0.4em; }
.np-table th { font-weight: 400; font-size: var(--fs-xs); color: var(--np-muted); }
.np-list li { break-inside: avoid; padding: 0.3rem 0; border-bottom: 0.0625rem solid var(--np-hair); overflow-wrap: anywhere; }
.np-editorial p { font-style: italic; font-size: var(--fs-lg); line-height: 1.45; margin: 0; max-width: 46rem; }
@media print {
    .np-sec, .np-item, .np-box { break-inside: avoid; }
    @page { size: A4; margin: 12mm; }
}
.bar--gantt .bar-fill[data-status="pending"] { --bar-color: var(--plan); }
.bar--gantt .bar-fill[data-status="delayed"],
.bar--gantt .bar-fill[data-status="overdue"] { --bar-color: var(--late); }
/* ── Скрытые объекты (15.10.2026) ─────────────────────────────
   Переключатель ссылками в языке .seg-toggle: активный сегмент — сплошная заливка.
   Скрытая карточка — пунктирная кромка и бирка «Скрыт», текст без прозрачности. */
.sc-vis { margin-bottom: var(--space-md); max-width: 100%; }
.sc-vis-n { font-style: normal; font-variant-numeric: tabular-nums; }