/* English comments are mandatory. */
/* Vestohod-specific pieces on top of the design system: status colours the templates and tests
   rely on (`ok` / `warn` / `bad` / `muted`), tags and filter chips, key-value lists, code boxes,
   the URL table cells, legacy form classes and inline forms. */

/* --- Text utilities and status colours (class names are asserted by tests: keep them) --- */
.muted { color: var(--text-muted); }
.small { font-size: var(--font-size-sm); }
.nowrap { white-space: nowrap; }
.ok { color: var(--success); font-weight: 600; }
.warn { color: var(--warning); font-weight: 600; }
.bad { color: var(--danger); font-weight: 600; }
.error { color: var(--danger); font-size: var(--font-size-sm); margin: 0 0 var(--space-3); }
p.error { color: var(--danger); }
.danger-link { color: var(--danger) !important; }
.icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }

/* State badge on the URL table and the URL page: a dot before the word, the two never split across lines. */
td .ok, td .warn, td .bad, dd .ok, dd .warn, dd .bad { white-space: nowrap; }
td .ok::before, td .warn::before, td .bad::before, dd .ok::before, dd .warn::before, dd .bad::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    vertical-align: 1px;
}

/* --- Tags (archive, sitemap, hub…) --- */
.tag {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--bg-hover);
    color: var(--text-secondary);
    white-space: nowrap;
    vertical-align: 1px;
}
.tag.bad { background: var(--danger-bg); color: var(--danger-text); font-weight: 600; }

/* --- Filter chips --- */
.filters { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-4); }
.filters-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.filters input[type="search"] { width: 220px; }
.filters select { width: auto; }
.filters label { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.chips .sep { color: var(--border); margin: 0 var(--space-1); }

/* --- Inline forms and text buttons --- */
.inline { display: inline; }
.inline-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.link {
    padding: 0;
    font: inherit;
    color: var(--accent);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition);
}
.link:hover { color: var(--accent-hover); text-decoration: underline; }

/* --- Stacked forms (the cabinet's `.form`) --- */
.form { max-width: 480px; }
.form-wide { max-width: 760px; }
.form label { margin-bottom: var(--space-3); }
.form label input, .form label textarea, .form label select { margin-top: var(--space-1); }
.form .row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.form .row label { flex: 1; min-width: 120px; }
.form .btn { margin-top: var(--space-1); }
.form .form-hint, .form p.muted.small { margin-top: var(--space-3); }
.form-check-label { display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary); font-weight: 400; cursor: pointer; }

/* --- Key-value lists (snapshot, index state, admin) --- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); align-items: baseline; }
.kv dt { color: var(--text-muted); font-size: var(--font-size-sm); white-space: nowrap; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv dd.bad { color: var(--danger); font-weight: 600; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: var(--space-1); } .kv dd { margin-bottom: var(--space-2); } }

/* --- Code box (Telegram codes, payment details) --- */
.code-box {
    font-family: var(--font-mono);
    font-size: var(--font-size-md);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-hover);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    display: inline-block;
    user-select: all;
    color: var(--text-primary);
}
.payment-box {
    padding: var(--space-4) var(--space-5);
    background: var(--accent-subtle);
    border: 1px solid var(--accent-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.payment-box p { color: var(--text-primary); }
.payment-box .code { font-family: var(--font-mono); font-weight: 700; font-size: var(--font-size-md); }

/* --- URL tables --- */
.data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table th.num { text-align: right; }
.data-table .actions { white-space: nowrap; text-align: right; }
.data-table .url-cell { overflow-wrap: anywhere; min-width: 240px; }
.data-table .url-cell a { color: var(--text-primary); font-weight: 500; }
.data-table .url-cell a:hover { color: var(--accent); }
.data-table tr.archived td { color: var(--text-muted); }
.data-table tr.archived .url-cell a { color: var(--text-muted); font-weight: 400; }
.data-table .actions .link { font-size: var(--font-size-sm); margin-left: var(--space-2); }
.data-table td.muted { color: var(--text-muted); }
.data-table td.small { font-size: var(--font-size-sm); }
.table-note { padding: var(--space-3) var(--space-5); color: var(--text-muted); font-size: var(--font-size-sm); border-top: 1px solid var(--border-subtle); }
.table-empty { padding: var(--space-6) var(--space-5); color: var(--text-muted); }

/* --- Masks list --- */
.masks { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.masks li { display: flex; align-items: center; gap: var(--space-3); margin: 0; }

/* --- Page titles --- */
.url-title { font-size: var(--font-size-xl); overflow-wrap: anywhere; }
.url-title .tag { vertical-align: middle; }
.scheme-badge { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 400; vertical-align: middle; }
.back-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--space-3); }
.back-link:hover { color: var(--accent); }

/* --- Details (invalid lines after adding URLs) --- */
details.invalid-lines { margin-bottom: var(--space-4); font-size: var(--font-size-sm); color: var(--text-secondary); }
details.invalid-lines ul { margin-top: var(--space-2); }

/* --- Section grid on the site page --- */
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); align-items: start; }
.two-col .card { margin-bottom: 0; }
.two-col .card-danger { grid-column: 1 / -1; }

/* --- Long-text pages: the offer, the privacy policy, the help --- */
.prose { max-width: 800px; }
.prose h1 { font-size: var(--font-size-2xl); margin-bottom: var(--space-2); }
.prose h2 { font-size: var(--font-size-lg); margin: var(--space-8) 0 var(--space-3); }
.prose p, .prose li { color: var(--text-secondary); font-size: var(--font-size-md); line-height: 1.65; }
.prose p { margin-bottom: var(--space-3); }
.prose ul, .prose ol { margin: 0 0 var(--space-4) var(--space-2); }
.prose li { margin-bottom: var(--space-2); }
.prose b { color: var(--text-primary); }
.prose code { font-size: 0.85em; }
.prose-meta { color: var(--text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-6); }
.prose-lead { font-size: var(--font-size-lg); color: var(--text-secondary); }
.prose-toc { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--space-6); line-height: 2; }
.auth-consent { text-align: center; margin-top: var(--space-4); }
.landing-footer { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
.landing-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }

/* --- Cards that double as auth cards inside the app shell (verify notice, error page) --- */
.shell-app .auth-card { margin: 0 auto; box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle); }
.empty-state-icon.ok { color: var(--success); opacity: 1; }

/* --- The cookie notice (_cookie_notice.html): bottom-left, above everything, closed by app.js --- */
#cookie-notice { position: fixed; left: 20px; bottom: 20px; z-index: 9999; display: flex; align-items: flex-end; gap: 12px; width: 360px; max-width: calc(100vw - 40px); padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); }
#cookie-notice p { flex: 1; margin: 0; }
#cookie-notice a { color: var(--accent); text-decoration: none; }
#cookie-notice a:hover { text-decoration: underline; }
#cookie-notice button { flex: none; padding: 6px 14px; font: inherit; font-weight: 600; color: var(--accent-text); background: var(--accent); border: none; border-radius: var(--radius-sm); cursor: pointer; }
/* In the cabinet the bottom-left corner belongs to the sidebar and its collapse button: the notice moves right. */
.shell-app #cookie-notice { left: auto; right: 20px; }