/* ═══════════════════════════════════════════════════════════════════════════
   НЕО — Components
   Примитивы интерфейса. Каждый компонент несёт hover, active и focus.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Кнопки ──────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 40px;
    padding: 0 var(--s-4);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: var(--tr-snug);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--d-fast) var(--e-out),
                border-color var(--d-fast) var(--e-out),
                color var(--d-fast) var(--e-out),
                transform var(--d-fast) var(--e-out);
}

.btn:active { transform: translateY(1px); }

.btn svg {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: currentColor;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--sh-1);
}
.btn-primary:hover { background: var(--accent-hi); }

.btn-secondary {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}
.btn-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
}
.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}

.btn-quiet {
    background: transparent;
    color: var(--text-muted);
    padding-inline: var(--s-2);
}
.btn-quiet:hover { color: var(--text); }

/* Текстовая третичная связь — снижает шум там, где две кнопки избыточны. */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--cat-text);
    font-size: var(--t-sm);
    font-weight: 500;
    border-bottom: 1px solid transparent;
}
.btn-link:hover { border-bottom-color: currentColor; }

.btn-sm { min-height: 32px; padding: 0 var(--s-3); font-size: var(--t-xs); }
.btn-icon { min-height: 40px; width: 40px; padding: 0; }
.btn-block { width: 100%; }

.btn[disabled],
.btn[aria-disabled='true'] {
    opacity: 0.45;
    pointer-events: none;
}

/* ── Поля ────────────────────────────────────────────────────────────── */

.field,
input[type='text'],
input[type='search'],
input[type='password'],
select {
    width: 100%;
    min-height: 42px;
    padding: 0 var(--s-4);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: var(--t-sm);
    transition: border-color var(--d-fast) var(--e-out),
                background var(--d-fast) var(--e-out);
}

input:hover, select:hover { border-color: var(--border-strong); }

input:focus-visible,
select:focus-visible {
    border-color: var(--accent);
    background: var(--surface);
    outline: 2px solid var(--accent-weak);
    outline-offset: 0;
}

select {
    appearance: none;
    padding-right: var(--s-8);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b939f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-4) center;
}

select option { background: var(--surface-2); color: var(--text); }

/* Поиск: иконка внутри, поле растягивается. */
.search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.search svg {
    position: absolute;
    left: var(--s-4);
    width: 16px;
    height: 16px;
    stroke: var(--text-faint);
    pointer-events: none;
}

.search input { padding-left: calc(var(--s-4) + 16px + var(--s-3)); }

/* ── Панель. Базовая поверхность для блоков контента. ─────────────────── */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    /* Световая грань сверху: один источник света, как у физической панели. */
    box-shadow: var(--sh-inset), var(--sh-2);
}

.panel-flush { padding: 0; overflow: hidden; }

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}

.panel-title {
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: var(--tr-snug);
    color: var(--text-strong);
}

.panel-note {
    font-size: var(--t-sm);
    color: var(--text-muted);
    max-width: var(--container-text);
}

/* Карточка с подсветкой границы под курсором. */
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: border-color var(--d-base) var(--e-out),
                background var(--d-base) var(--e-out),
                transform var(--d-base) var(--e-out);
}

.card:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

/* ── Бейджи. Квадратные, не пилюли — меньше «лендинга». ───────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 3px var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-accent { background: var(--accent-weak); border-color: var(--accent-line); color: var(--accent-text); }
.badge-ok     { background: var(--ok-weak);     border-color: rgba(79,148,105,.3);  color: var(--ok-text); }
.badge-warn   { background: var(--warn-weak);   border-color: rgba(191,139,65,.3);  color: var(--warn-text); }
.badge-danger { background: var(--danger-weak); border-color: rgba(192,91,82,.3);   color: var(--danger-text); }
.badge-cat    { background: var(--cat-weak);    border-color: var(--cat-line);      color: var(--cat-text); }

/* ── Чипы-фильтры ────────────────────────────────────────────────────── */

.chip-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--s-1);
}
.chip-row::-webkit-scrollbar { display: none; }

.chip-row-label {
    flex: none;
    font-size: var(--t-xs);
    color: var(--text-faint);
    margin-right: var(--s-1);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    flex: none;
    min-height: 32px;
    padding: 0 var(--s-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: var(--t-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--d-fast) var(--e-out);
}

.chip:hover { border-color: var(--border-strong); color: var(--text); }

.chip[aria-pressed='true'],
.chip.active {
    background: var(--cat-weak);
    border-color: var(--cat-line);
    color: var(--cat-text);
}

.chip-count {
    font-family: var(--font-mono);
    font-size: var(--t-2xs);
    color: var(--text-faint);
}

/* ── Метрика ─────────────────────────────────────────────────────────── */

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.metric {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-5);
    background: var(--surface);
}

.metric-val {
    font-family: var(--font-mono);
    font-size: var(--t-xl);
    font-weight: 500;
    letter-spacing: var(--tr-tight);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.metric-label {
    font-size: var(--t-xs);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

.metric-accent .metric-val { color: var(--cat-text); }

/* ── Полоса-шкала ────────────────────────────────────────────────────── */

.meter {
    height: 4px;
    border-radius: var(--r-full);
    background: var(--g-800);
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--dv-1);
    transform-origin: left center;
    transition: transform var(--d-slow) var(--e-out);
}

/* ── Таблица данных ──────────────────────────────────────────────────── */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
}

table.data th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--s-3) var(--s-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}

table.data td {
    padding: var(--s-4);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--text-muted);
}

table.data tbody tr { transition: background var(--d-fast) var(--e-out); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }

table.data .num { text-align: right; font-family: var(--font-mono); }
table.data .cell-strong { color: var(--text); font-weight: 500; }

/* ── Состояния ───────────────────────────────────────────────────────── */

.state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-16) var(--s-6);
    text-align: center;
}

.state svg {
    width: 32px;
    height: 32px;
    stroke: var(--g-600);
    margin-bottom: var(--s-1);
}

.state-title {
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--text);
}

.state-note {
    font-size: var(--t-sm);
    color: var(--text-muted);
    max-width: 40ch;
}

/* Скелет повторяет форму контента, а не крутится вхолостую. */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--surface-2);
    border-radius: var(--r-sm);
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
    animation: skeleton-sweep 1.4s infinite;
}

@keyframes skeleton-sweep { to { transform: translateX(100%); } }

.skeleton-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.skeleton-line { height: 10px; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }

/* ── Тост ────────────────────────────────────────────────────────────── */

.toast {
    position: fixed;
    bottom: calc(var(--dock-h) + var(--s-6));
    left: 50%;
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    background: var(--g-750);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    font-size: var(--t-sm);
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 769px) {
    .toast { bottom: var(--s-8); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Оверлеи: вход и карточка компании
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background: var(--bg);
    overflow: hidden;
}

/* Луч сверху. Единственный источник света на экране — от него же тень у бокса. */
.auth-overlay::before {
    content: '';
    position: absolute;
    top: -40vh;
    left: 50%;
    width: min(900px, 140vw);
    height: 90vh;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%,
                rgba(77, 142, 224, 0.18) 0%, transparent 70%);
}

/* Тонкая сетка на фоне — намёк на чертёж, а не декоративный шум. */
.auth-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(60% 50% at 50% 45%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(60% 50% at 50% 45%, #000 0%, transparent 100%);
}

.auth-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 340px;
    text-align: center;
}

.auth-icon {
    width: 30px;
    height: 30px;
    margin-bottom: var(--s-6);
    stroke: var(--accent);
    opacity: 0.85;
}

.auth-box h2 {
    font-size: var(--t-lg);
    font-weight: 600;
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
}

.auth-box > p {
    margin-bottom: var(--s-10);
    font-size: var(--t-sm);
    color: var(--text-muted);
}

/* Поле-подчёркивание: меньше рамок, больше воздуха. */
.auth-box input {
    margin-bottom: var(--s-5);
    min-height: 48px;
    padding-inline: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-strong);
    border-radius: 0;
    text-align: center;
    font-size: var(--t-md);
    letter-spacing: 0.22em;
    transition: border-color var(--d-base) var(--e-out),
                box-shadow var(--d-base) var(--e-out);
}

.auth-box input::placeholder { letter-spacing: 0.06em; }

.auth-box input:hover { border-color: var(--g-500); }

.auth-box input:focus-visible {
    outline: none;
    background: transparent;
    border-color: var(--accent);
    box-shadow: 0 12px 24px -20px var(--accent);
}

.auth-error {
    margin-top: var(--s-4);
    font-size: var(--t-sm);
    color: var(--danger-text);
}

/* Появление: каскадом сверху вниз, по порядку чтения. */
@media (prefers-reduced-motion: no-preference) {
    .auth-box > * { animation: auth-in 620ms var(--e-out) backwards; }
    .auth-box > :nth-child(1) { animation-delay: 40ms; }
    .auth-box > :nth-child(2) { animation-delay: 110ms; }
    .auth-box > :nth-child(3) { animation-delay: 170ms; }
    .auth-box > :nth-child(5) { animation-delay: 230ms; }
    .auth-box > :nth-child(6) { animation-delay: 290ms; }

    /* Отказ во входе — короткая тряска: понятнее, чем строчка текста. */
    .auth-box.is-denied { animation: auth-shake 380ms var(--e-inout); }
}

@keyframes auth-in {
    from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes auth-shake {
    0%, 100% { transform: translateX(0); }
    18%  { transform: translateX(-7px); }
    38%  { transform: translateX(6px); }
    58%  { transform: translateX(-4px); }
    78%  { transform: translateX(2px); }
}

/* Слайд-овер был бы уместнее, но профиль компании — плотный документ,
   и его удобнее читать в отдельном слое. */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: var(--gutter);
    background: rgba(6, 8, 12, 0.72);
    backdrop-filter: blur(6px);
}

.modal-card {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin-block: var(--s-10);
    padding: var(--s-8);
    background: var(--g-850);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-4);
    animation: modal-in var(--d-slow) var(--e-out);
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-close {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-muted);
    transition: all var(--d-fast) var(--e-out);
}

.modal-close:hover { background: var(--surface-hover); color: var(--text); }
.modal-close svg { width: 16px; height: 16px; stroke: currentColor; }

@media (max-width: 640px) {
    .modal-card { padding: var(--s-5); margin-block: var(--s-4); }
    .modal-close { top: var(--s-3); right: var(--s-3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Подсветка под курсором
   Граница карточки загорается там, где находится указатель. Координаты
   пишет JS в --mx/--my; всё остальное — композитные слои.
   ═══════════════════════════════════════════════════════════════════════════ */

.spotlight { position: relative; }

.spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--d-base) var(--e-out);
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
                color-mix(in srgb, var(--cat) 12%, transparent) 0%,
                transparent 62%);
}

.spotlight:hover::after { opacity: 1; }

/* Содержимое должно лежать поверх подсветки. */
.spotlight > * { position: relative; z-index: 1; }

@media (hover: none) {
    .spotlight::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .spotlight::after { transition: none; }
}

/* Флаг — отдельный флекс-элемент, иначе gap до него не доходит
   и эмодзи прилипает к названию страны. */
.chip-flag { flex: none; line-height: 1; }