/* aprs.ru — стили серверных страниц (карта — frontend/src/map.css). */
:root {
    --bg: #fff; --fg: #222; --muted: #777; --link: #1a4fa0; --line: #ddd; --head: #f3f5f8;
    --ok: #1b7f2a; --bad: #c0201c; --warn-bg: #fff4d6;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: var(--bg); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.topnav { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; padding: 8px 16px; background: var(--head); border-bottom: 1px solid var(--line); }
.topnav .brand { font-weight: 700; font-size: 16px; }
.topnav nav { flex: 1; }
.userbox { white-space: nowrap; }
.content { padding: 12px 16px 24px; max-width: 1200px; }
h1 { font-size: 20px; margin: 8px 0 12px; }
h2 { font-size: 16px; margin: 20px 0 8px; }
.footer { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.muted { color: var(--muted); }
.mono, .code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.code { background: #f6f6f6; padding: 8px; overflow-x: auto; white-space: pre-wrap; }
.flash { padding: 8px 12px; margin: 0 0 12px; border-radius: 4px; background: #e8f4ea; }
.flash-error { background: #fbe4e3; }
.warning { background: var(--warn-bg); padding: 4px 8px; display: inline-block; margin-top: 4px; }
.ok { color: var(--ok); font-weight: 600; }
.bad { color: var(--bad); font-weight: 600; }
.searchform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.searchform .modes label { margin-right: 6px; }
table.kv, table.list { border-collapse: collapse; }
table.kv th { text-align: left; vertical-align: top; padding: 3px 12px 3px 0; color: #444; font-weight: 600; white-space: nowrap; }
table.kv td { padding: 3px 0; }
table.list th, table.list td { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line); text-align: left; }
td.comment { white-space: pre-wrap; word-break: break-word; }
.target-title .sym { margin-right: 4px; }
.rawlist div { white-space: pre-wrap; word-break: break-all; padding: 1px 0; }
.raw-bad { color: var(--bad); }
.raw-err { font-style: italic; }
.pager a { margin-right: 16px; }
.form { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.form label { display: flex; flex-direction: column; gap: 2px; }
.form label.check { flex-direction: row; gap: 6px; align-items: center; }
form.inline { display: inline; }
ul.emails { margin: 0 0 6px; padding-left: 18px; }
button { cursor: pointer; }
button.danger { color: #fff; background: var(--bad); border: 0; padding: 4px 10px; }
.took { color: var(--muted); font-size: 12px; margin-top: 24px; }
.about { margin-top: 24px; color: #444; }
@media (max-width: 700px) { .topnav nav { flex-basis: 100%; } table.kv th { white-space: normal; } }
/* графики (templates/_chart.svg.twig, App\Service\Chart) */
:root { --c0: #1f6fd1; --c1: #d1461f; --c2: #2a9a3a; --c3: #8a3fc0; --c4: #c08a00; --c5: #0a9aa8; }
.chart { margin: 4px 0 16px; max-width: 760px; }
.chart h3 { font-size: 14px; margin: 0 0 2px; font-weight: 600; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .grid text, .chart .axis text { fill: var(--muted); font-size: 11px; }
.chart .zero { stroke: var(--muted); stroke-dasharray: 3 3; }
.chart path { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.chart .legend { font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.chart .legend i { display: inline-block; width: 12px; height: 3px; vertical-align: middle; margin-right: 4px; }
.chart .s0 { stroke: var(--c0); fill: var(--c0); } .chart .legend .s0 { background: var(--c0); }
.chart .s1 { stroke: var(--c1); fill: var(--c1); } .chart .legend .s1 { background: var(--c1); }
.chart .s2 { stroke: var(--c2); fill: var(--c2); } .chart .legend .s2 { background: var(--c2); }
.chart .s3 { stroke: var(--c3); fill: var(--c3); } .chart .legend .s3 { background: var(--c3); }
.chart .s4 { stroke: var(--c4); fill: var(--c4); } .chart .legend .s4 { background: var(--c4); }
.chart .s5 { stroke: var(--c5); fill: var(--c5); } .chart .legend .s5 { background: var(--c5); }
.chart path.s0, .chart path.s1, .chart path.s2, .chart path.s3, .chart path.s4, .chart path.s5 { fill: none; }
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 8px 24px; }
.table-wrap { overflow-x: auto; }
/* /browse/ */
.prefix-index { columns: 3 260px; column-gap: 24px; }
.prefix-group { break-inside: avoid; padding: 2px 0; }
.prefix-top { font-weight: 600; }
/* /stats/ и справочные страницы */
.tabs-nav a.active { font-weight: 700; color: var(--fg); }
table.bars td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.bars td.bar { width: 160px; }
table.bars td.bar span { display: block; height: 10px; background: var(--c0); min-width: 1px; }
.doc { max-width: 820px; }
.doc h2 { margin-top: 18px; }
.doc li { margin: 3px 0; }
/* шапка: ссылки через «·», на узком экране — меню */
.navlinks a + a::before { content: " · "; color: var(--muted); }
.navtoggle, .navburger { display: none; }

/* мобильная вёрстка (ТЗ 10.5): < 768 px */
@media (max-width: 767px) {
    body { font-size: 15px; }
    .topnav { padding: 8px 12px; gap: 6px 12px; align-items: center; }
    .navburger { display: inline-block; cursor: pointer; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
    .topnav nav.navlinks { display: none; flex-basis: 100%; }
    .navtoggle:checked ~ nav.navlinks { display: flex; flex-direction: column; }
    .navlinks a { padding: 8px 4px; border-bottom: 1px solid var(--line); }
    .navlinks a + a::before { content: none; }
    .userbox { white-space: normal; }
    .content { padding: 10px 12px 20px; }
    h1 { font-size: 18px; }
    table.list, table.kv { display: block; max-width: 100%; overflow-x: auto; }
    table.kv th { white-space: normal; }
    .searchform { flex-direction: column; align-items: stretch; }
    .searchform input, .searchform select, .searchform button, .form input, .form select { width: 100%; font-size: 16px; padding: 8px; box-sizing: border-box; }
    .form { max-width: none; }
    .charts { grid-template-columns: 1fr; }
    .chart { max-width: none; }
    .prefix-index { columns: 1; }
    .rawlist { font-size: 12px; }
    .footer { line-height: 2; }
}
.inline-h { margin: 12px 0 0; font-size: 15px; }
/* генератор встраиваемой карты */
.embed-form textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.embed-form .row { display: flex; gap: 6px; align-items: center; }
.embed-preview { border: 1px solid var(--line); max-width: 100%; }
.ad { margin: 16px 0; padding: 8px; border: 1px dashed var(--line); max-width: 760px; overflow: hidden; }