/* English comments are mandatory. */
/* Pieces on top of the design system, copied from Vestohod (vestohod/app/static/css/app.css): status colours
   the templates and tests rely on (`ok` / `warn` / `bad` / `muted`), tags and filter chips, key-value lists,
   code boxes, table cells, form classes and inline forms. Tropovod's own pieces are at the end. */

/* --- 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; }

/* The registration honeypot (app/antispam.py): off-screen rather than display:none, which bots skip. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Articles: tables inside the prose column and the closing call. */
.prose .table-responsive { margin: var(--space-4) 0 var(--space-5); }
.prose h3 { font-size: var(--font-size-md); margin: var(--space-6) 0 var(--space-2); }
.prose blockquote { margin: var(--space-4) 0 var(--space-5); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); background: var(--accent-subtle); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose blockquote p { margin: 0; color: var(--text-primary); }
/* The robot's page: robots.txt lines and a command, to be copied as they stand. A long line wraps on a phone, so the
   whole User-Agent is in sight; the copy keeps it one line. */
.prose pre { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--bg-hover); border-radius: var(--radius-md); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.85em; line-height: 1.6; color: var(--text-primary); }
.prose pre code { background: none; padding: 0; font-size: inherit; }
/* On a phone an article's table has to fit the column: headers wrap, cells keep less air. */
@media (max-width: 480px) { .prose .data-table th, .prose .data-table td { padding-left: var(--space-2); padding-right: var(--space-2); } .prose .data-table th { white-space: normal; } }
.article-cta { margin-top: var(--space-8); }
.article-cta p { margin-bottom: var(--space-4); }
.article-cover { display: block; width: 100%; height: auto; border-radius: var(--radius-lg, 12px); margin: var(--space-4) 0 var(--space-5); }

/* The public checker (/check). */
.check-form { display: flex; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); flex-wrap: wrap; }
.check-form .form-input { flex: 1 1 320px; min-width: 0; }
.check-form button[disabled] { opacity: .7; cursor: progress; }
.check-result { margin-top: var(--space-6); }
.check-verdict { border-left: 4px solid var(--border, #cbd5e1); }
.check-verdict.check-ok { border-left-color: var(--success); }
.check-verdict.check-warn { border-left-color: var(--warning); }
.check-verdict.check-bad { border-left-color: var(--danger); }
.check-verdict h2 { margin: var(--space-2) 0 var(--space-3); font-size: var(--font-size-xl, 1.35rem); }
.check-url { margin: 0; overflow-wrap: anywhere; }
.check-findings { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.check-findings li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-6); border-bottom: 1px solid var(--border, #e2e8f0); margin: 0; }
.check-findings li::before { content: ""; position: absolute; left: 4px; top: 1.15em; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
.check-findings li.ok::before { background: var(--success); }
.check-findings li.warn::before { background: var(--warning); }
.check-findings li.bad::before { background: var(--danger); }
.check-findings li b { display: block; }
.check-findings li span { overflow-wrap: anywhere; }
.check-progress { display: flex; gap: var(--space-4); align-items: flex-start; margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--accent); border-radius: var(--radius-lg, 12px); background: var(--accent-subtle); }
.check-progress[hidden] { display: none; }
.check-progress b, .check-progress span { display: block; }
.check-progress b { margin-bottom: var(--space-1); }
.check-spinner { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; border: 3px solid var(--accent-subtle); border-top-color: var(--accent); animation: check-spin .8s linear infinite; }
@keyframes check-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .check-spinner { animation-duration: 2.4s; } }

/* --- Tropovod's own pieces --- */
/* The balance in the header: a link to the billing page, the one number a person checks before a run. */
.header-credits { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-full); white-space: nowrap; }
.header-credits:hover { color: var(--accent); border-color: var(--accent); }
/* The packs on the billing page. */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.pack { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); }
.pack-size { font-weight: 600; color: var(--text-secondary); }
.pack-price { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: 700; color: var(--text-primary); }
.pack-note { flex: 1; }
.order-box { margin-bottom: var(--space-5); }
/* The run form on the cabinet's front page. */
.run-form-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
/* The stages of a run that goes on (routers/runs.py, _run_report.html). */
.run-stages { list-style: none; margin: var(--space-3) 0; padding: 0; }
.run-stages li { padding: 2px 0; color: var(--text-secondary); }
.run-stages li.done::before { content: "✓"; color: var(--success); display: inline-block; width: 1.2em; }
.run-stages li.current { color: var(--text-primary); font-weight: 600; }
.run-stages li.current::before { content: "→"; color: var(--accent); display: inline-block; width: 1.2em; }
.run-stages .notes { display: block; margin-left: 1.2em; font-size: var(--font-size-sm); font-weight: 400; color: var(--text-muted); }
/* A run's edits: the donor, the sentence with the words to link marked, the anchor. */
.run-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.run-list { margin-top: var(--space-5); }
.run-list .card-header p { margin: var(--space-1) 0 0; }
.edits { list-style: none; margin: 0; padding: 0; }
.edit { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); }
.edit-donor { font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.edit-text { margin: var(--space-2) 0; line-height: 1.6; }
.edit-text .label { display: inline-block; min-width: 3.5em; color: var(--text-muted); font-size: var(--font-size-sm); }
.edit mark { background: var(--accent-subtle); color: inherit; border-bottom: 2px solid var(--accent); padding: 0 2px; border-radius: 2px; }
.edit-meta { font-size: var(--font-size-sm); color: var(--text-muted); }
details.run-funnel { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); }
details.run-funnel summary { font-weight: 600; }
details.run-funnel .kv { margin-top: var(--space-3); }

/* --- The landing (index.html): sections below the hero. Cards, packs and badges are the cabinet's own, so the
   landing shows the product the way the cabinet does. --- */
.landing-links { display: flex; gap: var(--space-1); margin-right: var(--space-2); }
.lp-eyebrow { margin-bottom: var(--space-3); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.lp-note { margin: var(--space-4) 0 0; font-size: var(--font-size-sm); color: var(--text-muted); }
.lp-section { margin-top: var(--space-12); scroll-margin-top: var(--space-6); }
.lp-section h2, .lp-final h2 { font-size: var(--font-size-2xl); line-height: 1.25; margin-bottom: var(--space-3); }
.lp-lead { max-width: 760px; margin-bottom: var(--space-6); font-size: var(--font-size-md); }
.lp-small { max-width: 760px; margin: var(--space-4) 0 0; font-size: var(--font-size-sm); color: var(--text-muted); }
/* Real edits, marked the way the run's page marks them (.edit mark): the two ready ones side by side, the rewrite
   under them at full width, «было» beside «стало». */
.lp-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.lp-edit-wide { grid-column: 1 / -1; }
.lp-edit-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.lp-edit { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.lp-edit p { margin: 0; }
.lp-edit-route { font-size: var(--font-size-sm); color: var(--text-muted); }
.lp-edit-text { line-height: 1.6; color: var(--text-primary); }
.lp-edit-text .label { display: inline-block; min-width: 3.5em; color: var(--text-muted); font-size: var(--font-size-sm); }
.lp-edit mark { background: var(--accent-subtle); color: inherit; border-bottom: 2px solid var(--accent); padding: 0 2px; border-radius: 2px; }
.lp-edit .lp-edit-why { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: var(--font-size-sm); }
.lp-checks { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lp-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; }
.lp-steps li { counter-increment: step; margin: 0; padding: var(--space-5); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.lp-steps li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: var(--space-3); border-radius: var(--radius-full); background: var(--accent); color: var(--accent-text); font-weight: 700; }
.lp-steps h3 { margin-bottom: var(--space-2); }
.lp-steps p { margin: 0; font-size: var(--font-size-sm); }
.lp-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
.lp-robot { padding: var(--space-5); background: var(--accent-subtle); border-radius: var(--radius-lg); }
.lp-robot .feature-icon { background: var(--bg-card); }
.lp-robot h3 { margin-bottom: var(--space-2); }
.lp-robot p { font-size: var(--font-size-sm); }
.lp-robot p:last-child { margin-bottom: 0; }
.lp-packs { max-width: 900px; margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lp-faq { max-width: 800px; border-top: 1px solid var(--border); }
.lp-faq details { padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.lp-faq summary { position: relative; padding-right: var(--space-8); list-style: none; font-weight: 600; color: var(--text-primary); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: var(--space-2); top: -2px; font-size: var(--font-size-lg); color: var(--accent); }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq details p { margin: var(--space-3) 0 0; }
.lp-final { margin-top: var(--space-12); padding: var(--space-10) var(--space-6); text-align: center; background: var(--accent-subtle); border-radius: var(--radius-lg); }
.lp-final p { max-width: 560px; margin: 0 auto var(--space-6); }
.lp-final .hero-actions { justify-content: center; }
@media (max-width: 768px) {
    .landing-links { display: none; }
    .lp-section { margin-top: var(--space-10); }
    .lp-split, .lp-examples, .lp-edit-pair { grid-template-columns: 1fr; }
    .lp-final { padding: var(--space-8) var(--space-4); }
}