/* Government panel — ported from the approved mockup */
:root {
--r3-overlay: none;
color-scheme: light;
--page: #f4f6f9;
--surface: #ffffff;
--ink: #131a26;
--ink-2: #47536a;
--muted: #7d8698;
--line: #e3e7ee;
--line-strong: #cdd4df;
--accent: #2563c4;
--accent-soft: #e8f0fc;
--accent-ink: #ffffff;
--sidebar-bg: #101f38;
--sidebar-ink: #c6d2e5;
--sidebar-ink-strong: #ffffff;
--sidebar-active: rgba(255,255,255,0.10);
--sidebar-line: rgba(255,255,255,0.08);
--chart-1: #2563c4;
--chart-fill: rgba(37,99,196,0.10);
--ok: #0ca30c; --ok-soft: #e4f4e4; --ok-ink: #0a6e0a;
--warn: #b97800; --warn-soft: #fdf1d8; --warn-ink: #8a5a00;
--crit: #d03b3b; --crit-soft: #fbe7e7; --crit-ink: #a52e2e;
--neutral-soft: #eef1f5; --neutral-ink: #55607a;
--shadow: 0 1px 2px rgba(16,31,56,0.05), 0 4px 14px rgba(16,31,56,0.05);
/* The scrollbar is furniture, not content: a thumb the weight of a
hairline, no track at all, and it darkens under the pointer. */
--scroll-thumb: rgba(19,26,38,0.20);
--scroll-thumb-hover: rgba(19,26,38,0.36);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--r3-overlay: invert(1) brightness(1.75);
--page: #0f1520;
--surface: #161d2b;
--ink: #eef2f8;
--ink-2: #b5bfcf;
--muted: #8791a3;
--line: #242d3e;
--line-strong: #35405a;
--accent: #4d8fe8;
--accent-soft: #1c2a44;
--sidebar-bg: #0b111e;
--sidebar-ink: #aab6c9;
--chart-1: #3987e5;
--chart-fill: rgba(57,135,229,0.14);
--ok: #0ca30c; --ok-soft: #12301b; --ok-ink: #4ecb6f;
--warn: #e0a63a; --warn-soft: #33280f; --warn-ink: #e8b95c;
--crit: #e05b5b; --crit-soft: #38181c; --crit-ink: #ef8585;
--neutral-soft: #222b3c; --neutral-ink: #9daabd;
--shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.25);
--scroll-thumb: rgba(238,242,248,0.18);
--scroll-thumb-hover: rgba(238,242,248,0.34);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--r3-overlay: invert(1) brightness(1.75);
--page: #0f1520;
--surface: #161d2b;
--ink: #eef2f8;
--ink-2: #b5bfcf;
--muted: #8791a3;
--line: #242d3e;
--line-strong: #35405a;
--accent: #4d8fe8;
--accent-soft: #1c2a44;
--sidebar-bg: #0b111e;
--sidebar-ink: #aab6c9;
--chart-1: #3987e5;
--chart-fill: rgba(57,135,229,0.14);
--ok: #0ca30c; --ok-soft: #12301b; --ok-ink: #4ecb6f;
--warn: #e0a63a; --warn-soft: #33280f; --warn-ink: #e8b95c;
--crit: #e05b5b; --crit-soft: #38181c; --crit-ink: #ef8585;
--neutral-soft: #222b3c; --neutral-ink: #9daabd;
--shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.25);
--scroll-thumb: rgba(238,242,248,0.18);
--scroll-thumb-hover: rgba(238,242,248,0.34);
}
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; }
body {
font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
background: var(--page); color: var(--ink);
display: flex; min-height: 100vh;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
/* ---------- scrollbars ----------
One declaration dresses every scroller in the panel, and it does so by
inheritance: `scrollbar-width` and `scrollbar-color` are inherited
properties, so the root hands them to the sidebar, the tables, the map's
panels, the editor and anything added tomorrow. Nothing has to remember to
opt in, and a place that wants no scrollbar at all still wins by saying so
on itself.
The `@supports` guard is not belt and braces. Chrome and Edge only learned
these two properties in 121, and Safari in 18.2; older ones need the WebKit
pseudo-elements. But an element with *any* `::-webkit-scrollbar` rule is
taken off the platform's modern scrollbar in Chrome — which on macOS means
losing the overlay bar that appears only while scrolling. So the modern
browsers get the standard properties and keep their platform behaviour, and
only the old ones are painted by hand. */
/* Measured, not assumed: of the two properties only `scrollbar-color` is
inherited. `scrollbar-width` is not — declared on the root alone it thins
the document's own scrollbar and leaves every inner scroller at `auto`,
which is exactly the coarse bar this replaces. So the width goes on `*`,
where the few places that ask for no scrollbar at all still outrank it. */
html { scrollbar-color: var(--scroll-thumb) transparent; }
* { scrollbar-width: thin; }
@supports not (scrollbar-width: thin) {
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
/* A 4px thumb inside a 10px gutter: the transparent border is padding the
background does not paint over, which is the only way to inset a WebKit
thumb. */
::-webkit-scrollbar-thumb {
background: var(--scroll-thumb);
border: 3px solid transparent;
background-clip: content-box;
border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }
}
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
/* ---------- Sidebar ---------- */
.gov-sidebar {
width: 248px; flex: none; background: var(--sidebar-bg); color: var(--sidebar-ink);
display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 20px 16px 16px; text-align: center;
border-bottom: 1px solid var(--sidebar-line, rgba(255,255,255,0.08));
}
/* Logo stacked above the labels (132px golden-ratio base scaled down 35%).
The mark used to be a single-colour glyph, which is why it was whitened to
sit on the navy: `brightness(0) invert(1)` on full-colour artwork would
flatten the road, the bars and the network into one white silhouette and
lose the road markings entirely, since they are white already. So it keeps
its own colours and gets a light plate to sit on — which is also the only
way navy artwork stays legible against a navy sidebar. The plate's padding
is included in the 86px the brand block was built around. */
.brand .brand-logo {
width: 70px; height: auto;
padding: 8px;
border-radius: 11px;
background: #fff;
box-shadow: 0 1px 3px rgba(5, 12, 25, 0.35);
}
.brand .brand-text { min-width: 0; }
.brand-home {
display: flex; flex-direction: column; align-items: center; gap: 10px;
color: inherit; text-decoration: none; border-radius: 7px; padding: 2px 6px;
transition: opacity 0.15s ease;
}
.brand-home:hover { opacity: 0.85; }
.brand-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand .t1 { color: var(--sidebar-ink-strong, #fff); font-weight: 650; font-size: 13.5px; line-height: 1.3; }
.brand .t2 { font-size: 11px; opacity: 0.75; margin-top: 2px; letter-spacing: 0.3px; }
/* The nav is the panel's one tall scroller, and a stock scrollbar cuts a pale
gutter down the dark sidebar. The gutter is kept at a constant width so the
links never shift when the menu grows past the screen, but the thumb is only
painted while the pointer is on the sidebar: nothing to see at rest, a hint
of one when it is being used. */
.gov-nav {
padding: 14px 10px; overflow-y: auto; flex: 1;
overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.gov-sidebar:hover .gov-nav { scrollbar-color: rgba(255,255,255,0.16) transparent; }
/* The same hand-painted fallback the root carries, in the sidebar's own
colours — and behind the same guard, so a browser that understands
`scrollbar-color` uses the two lines above and keeps its platform scrollbar. */
@supports not (scrollbar-width: thin) {
.gov-nav::-webkit-scrollbar { width: 6px; }
.gov-nav::-webkit-scrollbar-track { background: transparent; }
.gov-nav::-webkit-scrollbar-thumb {
background: transparent; border: 0; border-radius: 99px;
transition: background 0.18s ease;
}
.gov-sidebar:hover .gov-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); }
.gov-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.26); }
}
.nav-label {
font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
opacity: 0.55; padding: 14px 10px 6px;
}
.gov-nav a {
display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 1px 0;
border-radius: 5px; color: inherit; text-decoration: none; font-size: 13.5px;
}
.gov-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.gov-nav a.active { background: var(--sidebar-active); color: #fff; font-weight: 600; }
.gov-nav a.active .ic { color: #7fb0f0; }
.gov-nav .ic { width: 18px; height: 18px; flex: none; opacity: 0.9; }
.nav-home { margin-bottom: 6px; padding-bottom: 6px; }
.gov-nav .badge {
margin-left: auto; background: #d03b3b; color: #fff; font-size: 10.5px;
font-weight: 700; border-radius: 99px; padding: 1px 7px;
}
.sidebar-foot {
padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08);
font-size: 11px; opacity: 0.6;
}
/* ---------- Filter sub-sidebar ----------
A second column against the sidebar for screens with more filters than a
toolbar can hold. Sticky like the nav, collapses to a rail, and stacks above
the content once the sidebar itself is gone. */
.gov-subnav {
width: 276px; flex: none; background: var(--surface);
border-right: 1px solid var(--line);
position: sticky; top: 0; height: 100vh;
display: flex; flex-direction: column;
transition: width 0.18s ease;
}
.subnav-head {
display: flex; align-items: center; gap: 8px;
padding: 13px 14px; border-bottom: 1px solid var(--line);
}
.subnav-head h2 {
margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden;
}
.subnav-toggle {
margin-left: auto; display: grid; place-items: center;
width: 28px; height: 28px; border-radius: 5px; color: var(--ink-2); flex: none;
}
.subnav-toggle:hover { background: var(--page); }
.subnav-body { flex: 1; overflow-y: auto; padding: 14px; }
.subnav-body .field { margin-bottom: 11px; }
.subnav-body .field > span { font-size: 11.5px; color: var(--muted); }
.subnav-body select,
.subnav-body input[type="text"],
.subnav-body input[type="search"],
.subnav-body input[type="number"],
.subnav-body input[type="date"],
.subnav-body .ts-wrapper { width: 100%; }
.subnav-actions { display: grid; gap: 8px; margin-top: 16px; }
.subnav-actions > * { width: 100%; text-align: center; justify-content: center; }
/* Actions live at the foot of the column, one per row: the icon carries its
name beside it, so what each one does is readable without hovering. */
.subnav-foot {
border-top: 1px solid var(--line); padding: 10px 12px;
display: grid; gap: 8px;
}
.subnav-foot .icon-btn {
min-height: 34px; padding: 0 11px;
display: flex; align-items: center; gap: 9px;
border: 1px solid var(--line); border-radius: 6px;
color: var(--ink-2); background: var(--surface); text-decoration: none;
font-size: 12.5px; white-space: nowrap; overflow: hidden;
}
.subnav-foot .icon-btn svg { flex: none; }
.subnav-foot .icon-btn:hover { background: var(--page); color: var(--ink); }
.gov-subnav.collapsed { width: 47px; }
/* Account activity: the user card's sub-sidebar (gov.users._activity). */
.ua-sec { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.ua-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.ua-sec h3 {
margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--muted);
}
.ua-facts { margin: 0; display: grid; gap: 3px; font-size: 12.5px; }
.ua-facts dt { color: var(--muted); font-size: 11.5px; margin-top: 6px; }
.ua-facts dt:first-child { margin-top: 0; }
.ua-facts dd { margin: 0; color: var(--ink); }
.ua-facts small, .ua-list small { display: block; color: var(--muted); font-size: 11.5px; }
.ua-count-h { margin: 12px 0 6px; font-size: 11.5px; color: var(--muted); }
.ua-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ua-counts > div {
border: 1px solid var(--line); border-radius: 6px; padding: 6px 7px;
display: grid; gap: 1px; min-width: 0;
}
.ua-counts b { font-size: 15px; color: var(--ink); }
.ua-counts span { font-size: 10.5px; color: var(--muted); overflow-wrap: break-word; }
.ua-counts .bad b { color: var(--crit-ink); }
.ua-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px; }
.ua-list a { color: var(--ink); }
.ua-device { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-empty { color: var(--muted); }
.ua-ev { font-weight: 600; }
.ua-ev-login_failed, .ua-ev-login_refused { color: var(--crit-ink); }
.ua-ev-password_set, .ua-ev-password_changed { color: var(--warn-ink); }
/* On the rail there is no room for the names; the title attribute carries them. */
.gov-subnav.collapsed .subnav-foot { padding: 8px 6px; }
.gov-subnav.collapsed .subnav-foot .icon-btn { justify-content: center; padding: 0; }
.gov-subnav.collapsed .subnav-foot .icon-btn span { display: none; }
.gov-subnav.collapsed .subnav-head { justify-content: center; padding: 13px 8px; }
.gov-subnav.collapsed .subnav-head h2,
.gov-subnav.collapsed .subnav-body { display: none; }
.gov-subnav.collapsed .subnav-toggle { margin-left: 0; }
/* ---------- Statistics strip ---------- */
.stat-strip { margin-bottom: 14px; }
.stat-split {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 14px; margin-top: 14px; align-items: start;
}
.stat-legend { display: grid; gap: 7px; padding: 6px 18px 16px; font-size: 12.5px; }
.stat-legend .row { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 9px; }
.stat-legend .sw { width: 11px; height: 11px; border-radius: 3px; }
.stat-legend .nm { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-legend .vl { font-weight: 650; font-variant-numeric: tabular-nums; }
.stat-legend .pc { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.stat-empty { padding: 10px 18px 18px; color: var(--muted); font-size: 12.5px; }
/* Registry totals run to seven digits and carry a unit, so the label and the
value both need more room than the dashboard's own bars. */
.stat-bars .bar-row { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; }
.stat-bars .bv { white-space: nowrap; }
@media (max-width: 1100px) {
.stat-split { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Main ---------- */
.gov-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
display: flex; align-items: center; gap: 14px; padding: 12px 26px;
background: var(--surface); border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 16px; font-weight: 650; margin: 0; }
.tb-btn {
display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px;
border: 1px solid var(--line); color: var(--ink-2);
}
.tb-btn:hover { background: var(--page); }
.tb-spacer { margin-left: auto; }
select.lang {
border: 1px solid var(--line); background: var(--surface); color: var(--ink);
border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px;
}
.user-chip { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.user-chip .av {
width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft);
color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.user-chip .nm { font-size: 13px; font-weight: 600; line-height: 1.2; }
.user-chip .rl { font-size: 11.5px; color: var(--muted); }
.content { padding: 24px 26px 48px; max-width: 1240px; width: 100%; margin: 0 auto; }
/* ---------- Cards & grids ---------- */
.card {
background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
box-shadow: var(--shadow);
}
.card-h { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 0; }
.card-h h3 { margin: 0; font-size: 14px; font-weight: 650; }
.card-h .sub { font-size: 12px; color: var(--muted); }
/* Six counters, so the row breaks 3+3 or 2+2+2 rather than stranding one on a
line of its own — auto-fit at 220px gave five and a widow. */
/* The counters are the headline band; everything under them is the detail
behind it. A step wider than the 14px the rest of the page runs on, so the
two read as separate bands rather than as one long stack — before the charts
went in, the grid's own top margin was doing this and nothing replaced it. */
.kpis {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 14px; margin-bottom: 21px;
}
@media (min-width: 1180px) { .kpis { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 760px) and (max-width: 1179px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi { padding: 16px 18px; }
.kpi .lb { font-size: 12px; color: var(--ink-2); }
.kpi .v { font-size: 28px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; }
.kpi .v .vs { font-size: 15px; color: var(--muted); font-weight: 600; }
.kpi .d { font-size: 12px; margin-top: 4px; color: var(--muted); }
.kpi .d.up { color: var(--ok-ink); }
.kpi .d.warn { color: var(--warn-ink); }
.grid-2 {
display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 14px; margin-top: 14px; align-items: start;
}
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }
/* ---------- Charts ---------- */
.chart-wrap { padding: 8px 12px 14px; position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-tooltip {
position: absolute; pointer-events: none; background: var(--surface);
border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: var(--shadow);
padding: 7px 10px; font-size: 12px; display: none; z-index: 5; white-space: nowrap;
}
.chart-tooltip .tv { font-weight: 700; font-variant-numeric: tabular-nums; }
.bars { padding: 12px 18px 16px; display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; font-size: 12.5px; }
.bar-row .rg { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--neutral-soft); border-radius: 4px; height: 14px; }
.bar-fill { background: var(--chart-1); height: 100%; border-radius: 4px; min-width: 3px; }
.bar-row .bv { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 18px 14px; font-size: 12px; color: var(--ink-2); }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.stack { display: flex; height: 16px; border-radius: 4px; overflow: hidden; margin: 12px 18px 4px; background: var(--neutral-soft); }
.stack div + div { border-left: 2px solid var(--surface); }
/* ---------- Chips ---------- */
.chip {
display: inline-flex; align-items: center; gap: 6px; border-radius: 99px;
font-size: 11.5px; font-weight: 600; padding: 3px 10px; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--ok-soft); color: var(--ok-ink); }
.chip.warn { background: var(--warn-soft); color: var(--warn-ink); }
.chip.crit { background: var(--crit-soft); color: var(--crit-ink); }
.chip.mut { background: var(--neutral-soft); color: var(--neutral-ink); }
.chip.acc { background: var(--accent-soft); color: var(--accent); }
/* ---------- Attention list ---------- */
.alist { padding: 6px 6px 10px; }
.aitem { display: flex; gap: 12px; padding: 10px 12px; border-radius: 6px; }
.aitem:hover { background: var(--page); }
.aitem .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.aitem .t { font-size: 13px; font-weight: 600; }
.aitem .s { font-size: 12px; color: var(--muted); margin-top: 1px; }
.empty-note { padding: 14px 18px; font-size: 12.5px; color: var(--muted); }
/* ---------- Toolbar, forms, tables ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; }
.search {
display: flex; align-items: center; gap: 8px;
background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
padding: 6px 12px; width: 280px; color: var(--muted);
}
.search input { border: none; background: none; outline: none; color: var(--ink); width: 100%; font: inherit; }
.toolbar select {
border: 1px solid var(--line); background: var(--surface); border-radius: 6px;
padding: 7px 12px; font: inherit; font-size: 13px; color: var(--ink);
}
.btn-primary {
display: inline-block; text-decoration: none; text-align: center;
background: var(--accent); color: #fff; border: none; border-radius: 6px;
padding: 8px 16px; font-weight: 600; font-size: 13px;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
display: inline-block; text-decoration: none; text-align: center;
border: 1px solid var(--line); border-radius: 6px; padding: 7px 14px;
font-size: 13px; color: var(--ink-2); background: var(--surface);
}
.btn-ghost:hover { background: var(--page); }
.ml-auto { margin-left: auto; }
.tbl-wrap { overflow-x: auto; }
table.gov-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gov-table th {
text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
color: var(--muted); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--line);
white-space: nowrap;
}
.gov-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.gov-table tr:last-child td { border-bottom: none; }
.gov-table tbody tr:hover { background: var(--page); }
.gov-table td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.proj-name { font-weight: 600; }
.proj-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.pbar { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.pbar .tr { flex: 1; height: 6px; background: var(--neutral-soft); border-radius: 3px; }
.pbar .fl { height: 100%; border-radius: 3px; background: var(--chart-1); }
.pbar .pv { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; width: 34px; text-align: right; }
.pager {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line);
}
.pager nav { display: flex; gap: 4px; }
.pager a, .pager span.pg-item {
display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px;
border-radius: 4px; border: 1px solid var(--line); font-size: 12.5px;
color: var(--ink-2); text-decoration: none;
}
.pager a:hover { background: var(--page); }
.pager .pg-cur { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pager .pg-dis { opacity: 0.4; }
/* Jump straight to a page. The numbered links only ever reach a few pages
either side of this one, so on a long registry they are not a way to get
anywhere — the field is. */
.pager-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pg-jump { display: flex; align-items: center; gap: 6px; }
.pg-jump label { font-size: 12px; color: var(--muted); }
.pg-jump input {
width: 58px; height: 28px; padding: 0 6px; text-align: center;
border: 1px solid var(--line); border-radius: 4px;
background: var(--surface); color: var(--ink);
font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.pg-jump input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.pg-jump-of { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pg-jump-go {
display: grid; place-items: center; width: 28px; height: 28px; flex: none;
border: 1px solid var(--line); border-radius: 4px; color: var(--ink-2); cursor: pointer;
}
.pg-jump-go:hover { background: var(--page); color: var(--ink); }
/* ---------- Reports ---------- */
.rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; margin-bottom: 20px; }
.rep-card { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.rep-card .ric {
width: 38px; height: 38px; border-radius: 6px; background: var(--accent-soft);
color: var(--accent); display: grid; place-items: center;
}
.rep-card h4 { margin: 4px 0 0; font-size: 14px; }
.rep-card p { margin: 0; font-size: 12.5px; color: var(--muted); flex: 1; }
.rep-card .acts { display: flex; gap: 8px; margin-top: 6px; }
/* ---------- Users ---------- */
.role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.role-card { padding: 16px 18px; }
.role-card .rc-n { font-size: 22px; font-weight: 700; }
.role-card .rc-l { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.uav {
width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center;
font-size: 12px; font-weight: 700; background: var(--neutral-soft); color: var(--neutral-ink);
margin-right: 10px; vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 860px) {
/* The sidebar becomes a drawer on a phone (see "Phones" at the end of the
file); the filter column becomes a band above the content, still
collapsible so the table can have the screen. */
body { flex-wrap: wrap; }
.gov-subnav,
.gov-subnav.collapsed {
position: static; height: auto; width: 100%;
border-right: 0; border-bottom: 1px solid var(--line);
}
.gov-subnav.collapsed .subnav-head { justify-content: space-between; padding: 13px 14px; }
.gov-subnav.collapsed .subnav-head h2 { display: block; }
.gov-subnav.collapsed .subnav-toggle { margin-left: auto; }
}
/* ---------- Login page ---------- */
body.login-page {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 18px; padding: 24px;
}
.login-top { display: flex; gap: 10px; align-items: center; }
.login-card { width: 100%; max-width: 400px; padding: 28px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
/* The crest was a gradient tile with "UZ" set in it, standing in for a mark
there wasn't one of. It is the mark now. The white plate does nothing on the
light card and is what makes it readable on the dark one. */
.login-brand .crest {
width: 42px; height: 42px; flex: none; border-radius: 6px;
padding: 4px; background: #fff; object-fit: contain;
box-shadow: 0 1px 2px rgba(5, 12, 25, 0.18);
}
.login-brand .t1 { font-weight: 650; font-size: 14.5px; line-height: 1.25; }
.login-brand .t2 { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.login-h { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.login-sub { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.alert-error {
background: var(--crit-soft); color: var(--crit-ink); border-radius: 6px;
padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}
.field { display: block; margin-bottom: 14px; }
.field span {
display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px;
}
.field input {
width: 100%; border: 1px solid var(--line-strong); background: var(--page);
color: var(--ink); border-radius: 6px; padding: 9px 12px; font: inherit; font-size: 14px;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.remember {
display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2);
margin: 4px 0 18px; cursor: pointer;
}
.remember input { accent-color: var(--accent); width: 15px; height: 15px; }
.login-btn { width: 100%; padding: 10px 16px; font-size: 14px; }
.login-foot { font-size: 12px; color: var(--muted); }
/* ---------- Flash messages & roles page ---------- */
.alert-success {
background: var(--ok-soft); color: var(--ok-ink); border-radius: 6px;
padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}
.content > .alert-error, .content-full > .alert-error { margin-bottom: 14px; }
.roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.role-panel { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.role-panel .rp-head { display: flex; align-items: center; gap: 10px; }
.role-panel .rp-head h4 { margin: 0; font-size: 14.5px; flex: 1; }
.role-panel .rp-users { font-size: 12px; color: var(--muted); }
.perm-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.perm-item {
display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2);
padding: 6px 9px; border-radius: 5px; cursor: pointer;
}
.perm-item:hover { background: var(--page); }
.perm-item input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.perm-empty { font-size: 12.5px; color: var(--muted); padding: 4px 2px; }
.rp-actions { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form input[type="text"] {
border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
border-radius: 6px; padding: 8px 12px; font: inherit; font-size: 13px; width: 240px;
}
.btn-danger {
border: 1px solid transparent; border-radius: 6px; padding: 7px 14px; font-size: 13px;
background: var(--crit-soft); color: var(--crit-ink);
}
.btn-danger:hover { filter: brightness(0.97); }
/* create-role form */
.rp-subtitle { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.perm-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 4px 14px; margin-bottom: 4px;
}
.role-panel .rp-head h4 { font-size: 14.5px; margin: 0; }
/* role permission badges on index */
.perm-badges { display: flex; flex-wrap: wrap; gap: 6px; }
/* user form & table actions */
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 640px) { .form-2col { grid-template-columns: 1fr; } }
.row-actions { display: inline-flex; gap: 8px; align-items: center; }
.row-actions form { margin: 0; }
/* road form */
.form-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
@media (max-width: 640px) { .form-3col { grid-template-columns: 1fr; } }
.field select.field-select {
width: 100%; border: 1px solid var(--line-strong); background: var(--surface);
color: var(--ink); border-radius: 6px; padding: 9px 12px; font: inherit; font-size: 14px;
}
/* geometry textarea */
.field textarea.field-textarea {
width: 100%; border: 1px solid var(--line-strong); background: var(--page);
color: var(--ink); border-radius: 6px; padding: 9px 12px; font: 12px/1.5 ui-monospace, monospace;
resize: vertical;
}
.field textarea.field-textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field-hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
/* geometry map editor */
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.geo-map { height: 300px; border-radius: 6px; border: 1px solid var(--line-strong); z-index: 0; }
.geo-tools { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; }
#geoRawWrap:not([hidden]) { display: block; margin-top: 8px; }
.geo-tools .geo-route-toggle {
display: inline-flex; gap: 6px; align-items: center;
font-size: 12.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.geo-tools .geo-route-toggle input { accent-color: var(--accent); }
#geoSnap:disabled { opacity: 0.6; cursor: progress; }
/* roads index map */
.roads-map-card { margin-bottom: 14px; padding: 0; overflow: hidden; }
.roads-map { height: 380px; }
tr[data-road-id] { cursor: pointer; }
tr[data-road-id].row-active > td { background: color-mix(in srgb, #e11d48 8%, transparent); }
tr[data-road-id].row-active .proj-name { color: #e11d48; }
/* trash tabs */
.trash-tabs { flex-wrap: wrap; gap: 8px; }
.trash-tabs .chip { text-decoration: none; }
.trash-tabs .chip:hover { filter: brightness(0.95); }
@media (max-width: 900px) {
.roads-map { height: 280px; }
}
/* full-width road form: inputs on top, map below */
.road-form-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.road-form-map { margin-top: 8px; }
.road-form-map .geo-map { height: max(48vh, 380px); }
@media (max-width: 900px) {
.road-form-map .geo-map { height: 320px; }
}
/* grouped permission checkboxes */
.perm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 6px; }
.perm-group { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 10px; margin: 0; min-width: 0; }
.perm-group legend {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
color: var(--muted); font-weight: 600; padding: 0 4px;
}
.perm-badges .chip { white-space: normal; text-align: left; }
/* HRM module helpers */
.field-row { display: flex; flex-wrap: wrap; gap: 14px; }
.field-row .field { flex: 1 1 180px; min-width: 160px; }
.field .hint, small.hint { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
p.hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
/* Style bare selects/textareas (HRM forms) to match the .field inputs */
.field select {
width: 100%; border: 1px solid var(--line-strong); background: var(--surface);
color: var(--ink); border-radius: 6px; padding: 9px 36px 9px 12px; font: inherit; font-size: 14px;
cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
}
.field select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field select:hover { border-color: var(--accent); }
.field textarea {
width: 100%; border: 1px solid var(--line-strong); background: var(--page);
color: var(--ink); border-radius: 6px; padding: 9px 12px; font: inherit; font-size: 14px;
line-height: 1.5; resize: vertical; min-height: 64px;
}
.field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.badge-ok { background: rgba(34, 160, 90, 0.15); color: #1f9d55; }
.badge-no { background: rgba(210, 60, 60, 0.15); color: #d23c3c; }
.qr-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border, #e5e5ea); }
.qr-token { display: inline-block; margin: 8px 0; padding: 8px 12px; border-radius: 6px;
background: var(--surface-2, #f2f2f5); font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all; }
/* ---------- UI kit: system-standard widgets ---------- */
/* modal confirmation */
.gov-modal-backdrop {
position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
background: rgba(10, 16, 28, 0.55); backdrop-filter: blur(2px);
}
/* display:grid above would otherwise override the [hidden] attribute, keeping
the modal on screen for AJAX callers that don't navigate away. */
.gov-modal-backdrop[hidden] { display: none; }
.gov-modal {
background: var(--surface); color: var(--ink); border-radius: 10px;
width: min(420px, calc(100vw - 32px)); padding: 22px 22px 18px;
box-shadow: 0 20px 60px rgba(0,0,0,0.35); border: 1px solid var(--line);
}
.gov-modal-title { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; }
.gov-modal-text { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.gov-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
/* three-dot row actions dropdown */
.actions-menu { position: relative; display: inline-block; }
.actions-menu > button {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
border: 1px solid var(--line-strong); border-radius: 6px; font-size: 12.5px;
color: var(--ink-2); background: var(--surface); white-space: nowrap;
}
.actions-menu > button:hover { background: var(--page); }
.actions-menu .dots { font-weight: 700; letter-spacing: 1px; }
.actions-menu .menu {
display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
min-width: 190px; background: var(--surface); border: 1px solid var(--line);
border-radius: 7px; box-shadow: var(--shadow); padding: 5px; text-align: left;
}
.actions-menu.open .menu { display: block; }
.actions-menu .menu a, .actions-menu .menu button {
display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px;
border-radius: 5px; font-size: 13px; color: var(--ink); text-decoration: none;
background: none; border: none; text-align: left;
}
.actions-menu .menu a:hover, .actions-menu .menu button:hover { background: var(--page); }
.actions-menu .menu .danger { color: var(--crit); }
.actions-menu .menu form { margin: 0; }
/* uz/ru/en language tabs */
.lang-tabs { margin-bottom: 12px; }
.lang-tabs .lang-tab-bar { display: inline-flex; gap: 2px; background: var(--neutral-soft); padding: 3px; border-radius: 6px; margin-bottom: 8px; }
.lang-tabs .lang-tab {
padding: 5px 14px; border-radius: 5px; font-size: 12px; font-weight: 600;
color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.lang-tabs .lang-tab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.lang-tabs .lang-pane[hidden] { display: none; }
/* toggle switch (active/inactive style booleans) */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
width: 40px; height: 22px; flex: none; border-radius: 99px; background: var(--line-strong);
position: relative; transition: background 0.15s ease;
}
.switch .track::after {
content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
border-radius: 50%; background: #fff; transition: transform 0.15s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-group { display: flex; flex-wrap: wrap; gap: 14px 26px; padding: 4px 0; }
/* checkbox/radio button-pill groups */
.check-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.check-pills label { position: relative; cursor: pointer; }
.check-pills input { position: absolute; opacity: 0; inset: 0; }
.check-pills .pill {
display: inline-block; padding: 7px 14px; border-radius: 99px; font-size: 12.5px;
border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface);
transition: all 0.12s ease; user-select: none;
}
.check-pills input:checked + .pill {
background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.check-pills input:focus-visible + .pill { outline: 2px solid var(--accent); outline-offset: 2px; }
/* form layout sections */
.form-section {
border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px 18px;
margin: 0 0 14px; min-width: 0;
}
.form-section > legend {
padding: 0 8px; margin-left: -8px; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent);
}
/* flatpickr theme alignment */
.flatpickr-calendar { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--accent); border-color: var(--accent); }
/* responsive filter toolbar: inputs/selects stretch to fill the row */
.toolbar .search { flex: 1 1 280px; width: auto; min-width: 220px; }
.toolbar select { flex: 1 1 220px; min-width: 180px; }
.toolbar .ts-wrapper { flex: 1 1 220px; min-width: 180px; width: auto; }
.toolbar .ts-wrapper .ts-control { width: 100%; }
.map-borders-toggle { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 900px) {
.toolbar .search,
.toolbar select,
.toolbar .ts-wrapper,
.toolbar input[name] { width: 100%; flex: 1 1 100%; min-width: 0; }
.toolbar .btn-ghost, .toolbar .btn-primary { flex: 1 1 auto; text-align: center; justify-content: center; }
.toolbar .ml-auto { margin-left: 0; }
}
/* ---------- Road segments drawer (roads map) ---------- */
.rs-backdrop {
position: fixed; inset: 0; z-index: 90;
display: flex; justify-content: flex-end;
background: rgba(10, 16, 28, 0.42);
backdrop-filter: blur(2px);
opacity: 0; transition: opacity 0.22s ease;
}
.rs-backdrop[hidden] { display: none; }
.rs-backdrop.open { opacity: 1; }
.rs-drawer {
width: min(500px, 94vw); height: 100%;
display: flex; flex-direction: column;
background: var(--surface);
border-left: 1px solid var(--line-strong);
box-shadow: -10px 0 34px rgba(16, 31, 56, 0.20);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-backdrop.open .rs-drawer { transform: translateX(0); }
.rs-head {
display: flex; align-items: flex-start; gap: 12px;
padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.rs-head-titles { flex: 1; min-width: 0; }
.rs-title {
margin: 0; font-size: 16px; font-weight: 680; color: var(--ink);
line-height: 1.35;
}
.rs-sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.rs-close {
flex: none; width: 34px; height: 34px; border-radius: 6px;
border: 1px solid var(--line); background: var(--page);
color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer;
display: grid; place-items: center; transition: background 0.15s, color 0.15s;
}
.rs-close:hover { background: var(--crit-soft); color: var(--crit-ink); border-color: transparent; }
.rs-body { flex: 1; overflow-y: auto; padding: 18px 22px 28px; }
.rs-note { color: var(--muted); font-size: 13px; text-align: center; padding: 28px 0; }
.rs-note-err { color: var(--crit-ink); }
.rs-group { margin-bottom: 22px; }
.rs-group-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.rs-group-title {
font-size: 11.5px; font-weight: 720; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-2);
}
.rs-group-count {
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
background: var(--neutral-soft); color: var(--neutral-ink);
}
.rs-add {
margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--accent); background: transparent; color: var(--accent);
font-size: 12px; font-weight: 640; transition: background 0.15s, color 0.15s;
}
.rs-add:hover { background: var(--accent); color: var(--accent-ink); }
.rs-add svg { display: block; }
.rs-list { display: flex; flex-direction: column; gap: 8px; }
.rs-seg {
display: flex; align-items: center; gap: 12px;
padding: 11px 14px; border-radius: 7px;
background: var(--page); border: 1px solid var(--line);
transition: border-color 0.15s, box-shadow 0.15s;
}
.rs-seg:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.rs-seg-km { font-size: 13.5px; font-weight: 620; color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-seg-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.rs-icon {
width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
border: 1px solid transparent; background: transparent; color: var(--muted);
display: grid; place-items: center; transition: background 0.15s, color 0.15s;
}
.rs-icon:hover { background: var(--accent-soft); color: var(--accent); }
.rs-icon-danger:hover { background: var(--crit-soft); color: var(--crit-ink); }
.rs-empty {
margin: 0; padding: 16px; text-align: center; font-size: 12.5px;
color: var(--muted); background: var(--page);
border: 1px dashed var(--line-strong); border-radius: 7px;
}
/* Value chips — one distinct colour per road category (1..5) */
.rs-chip {
display: inline-flex; align-items: center; padding: 3px 10px;
border-radius: 999px; font-size: 11.5px; font-weight: 680; white-space: nowrap;
}
.rs-val-1 { background: var(--accent-soft); color: var(--accent); }
.rs-val-2 { background: var(--ok-soft); color: var(--ok-ink); }
.rs-val-3 { background: var(--warn-soft); color: var(--warn-ink); }
.rs-val-4 { background: var(--crit-soft); color: var(--crit-ink); }
.rs-val-5 { background: var(--neutral-soft); color: var(--neutral-ink); }
/* Inline add / edit form */
.rs-form {
padding: 14px; border-radius: 7px; margin-bottom: 2px;
background: var(--page); border: 1px solid var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.rs-form-row { display: flex; gap: 12px; }
.rs-form-row .rs-field { flex: 1; }
.rs-field { display: block; margin-bottom: 12px; }
.rs-field:last-of-type { margin-bottom: 12px; }
.rs-field > span {
display: block; margin-bottom: 5px; font-size: 11.5px; font-weight: 620; color: var(--ink-2);
}
.rs-field select, .rs-field input {
width: 100%; padding: 8px 10px; border-radius: 6px;
border: 1px solid var(--line-strong); background: var(--surface);
color: var(--ink); font-size: 13px; font-family: inherit;
}
.rs-field select:focus, .rs-field input:focus {
outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent);
}
.rs-form-err {
margin: 0 0 10px; font-size: 12px; color: var(--crit-ink);
background: var(--crit-soft); padding: 7px 10px; border-radius: 5px;
}
.rs-form-actions { display: flex; gap: 8px; }
.rs-form-actions .btn-primary, .rs-form-actions .btn-ghost { padding: 7px 16px; font-size: 12.5px; }
@media (max-width: 560px) {
.rs-drawer { width: 100vw; }
.rs-form-row { flex-direction: column; gap: 0; }
}
/* ---------------------------------------------------------------------------
Collapsible nav groups + sidebar collapse
The sidebar width is a token so the collapsed rail and the transition stay
in sync; `.gov-sidebar` itself is still the sticky 100vh flex column.
--------------------------------------------------------------------------- */
.gov-sidebar { width: var(--sidebar-w, 248px); transition: width 0.18s ease; }
.gov-sidebar.collapsed { --sidebar-w: 68px; }
.brand { position: relative; }
.nav-toggle {
position: absolute; top: 10px; right: 8px;
width: 28px; height: 28px; display: grid; place-items: center;
border-radius: 5px; color: var(--sidebar-ink); opacity: 0.75;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; }
.gov-sidebar.collapsed .brand { padding: 16px 8px 12px; }
/* In the rail the plate shrinks with the mark, or 8px of padding would eat a
quarter of the 68px column. */
.gov-sidebar.collapsed .brand-logo { width: 32px; padding: 5px; border-radius: 7px; }
.gov-sidebar.collapsed .brand-text,
.gov-sidebar.collapsed .sidebar-foot { display: none; }
.gov-sidebar.collapsed .nav-toggle { position: static; margin: 8px auto 0; }
.nav-group { margin-bottom: 2px; }
.nav-group > .nav-label {
display: flex; align-items: center; gap: 6px; width: 100%;
padding: 10px 10px 6px; text-align: left;
font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
color: inherit; opacity: 0.55; border-radius: 5px;
}
.nav-group > .nav-label:hover { opacity: 0.85; }
.nav-group > .nav-label span { flex: 1; min-width: 0; }
.nav-group > .nav-label .chev { flex: none; transition: transform 0.16s ease; }
.nav-group.collapsed > .nav-label .chev { transform: rotate(-90deg); }
.nav-group.collapsed > .nav-group-body { display: none; }
/* Icon-only rail: labels and group headers fold away, icons centre. */
.gov-sidebar.collapsed .gov-nav { padding: 10px 8px; }
.gov-sidebar.collapsed .nav-group > .nav-label { display: none; }
.gov-sidebar.collapsed .nav-group.collapsed > .nav-group-body { display: block; }
.gov-sidebar.collapsed .nav-group + .nav-group { border-top: 1px solid var(--sidebar-line); padding-top: 6px; margin-top: 6px; }
.gov-sidebar.collapsed .gov-nav a { justify-content: center; padding: 9px 0; }
.gov-sidebar.collapsed .gov-nav a > span { display: none; }
.gov-sidebar.collapsed .gov-nav .ic { width: 20px; height: 20px; }
/* ---------------------------------------------------------------------------
Interactive map workspace
The map is the screen. There is no bar above it and none below it: the
search rides over its top edge, the filter panel floats clear of its right
edge, and the dock sits in the bottom-left corner. Every gap, radius and
control height is a Fibonacci step (5 / 8 / 13 / 21 / 34 / 55), and the
floating cards share one glass treatment so they read as one layer above
the canvas rather than as five unrelated boxes.
--------------------------------------------------------------------------- */
body.map-page {
display: block; height: 100vh; height: 100dvh; overflow: hidden;
}
.map-shell {
--m-gap: 13px;
--m-radius: 11px;
--m-panel: clamp(288px, 21vw, 372px);
/* The one panel that decides what is drawn. It has the whole left edge
because that is what it is for; the tools it displaced are along the
bottom. */
/* The rail down its left is a 38 px strip of turned names, so the pane
beside it keeps very nearly the whole column. */
--m-layers: clamp(306px, 22vw, 366px);
/* The map API paints its own "Яндекс Карты" badge in this corner and it
has to stay readable, so the dock clears it rather than sitting on it. */
--m-dock: 34px;
/* The bottom bar's height, and zero here on purpose: not every map has
one. The workspace does and sets it below; the trunk-network screen
has no dock at all, and a shell that reserved 52 px for a bar that is
never drawn leaves a dead strip under the canvas. */
--m-bar: 0px;
/* Two 38px columns plus their gap, padding and border. */
--m-tools: 91px;
/* One height for everything standing on the bottom strip. They were
drawn at 38, 40, 44, 46, 47 and 48 px — every card sized by whatever
happened to be inside it — and a row of blocks that do not line up
reads as a row that is broken rather than as one that is varied. */
--m-dock-h: 44px;
/* The widest card the left column holds, which is what everything opening
beside the column has to clear. */
--m-left: 144px;
/* Opaque unless the browser can mix a translucent surface for us; a
failed color-mix would otherwise leave every floating card unpainted. */
--m-glass: var(--surface);
position: fixed; inset: 0; overflow: hidden;
}
@supports (background: color-mix(in srgb, white 50%, transparent)) {
.map-shell { --m-glass: color-mix(in srgb, var(--surface) 88%, transparent); }
}
#govMap { position: absolute; inset: 0; z-index: 0; }
/* One treatment for everything that floats over the canvas. */
.map-find-bar,
.map-find-list,
.map-panel-card,
.map-panel-head,
.map-layers-card,
.map-tape,
.map-toast,
.map-keys,
.dock-card {
border: 1px solid var(--line);
border-radius: var(--m-radius);
background: var(--m-glass);
backdrop-filter: blur(13px) saturate(1.4);
-webkit-backdrop-filter: blur(13px) saturate(1.4);
box-shadow: 0 8px 34px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.06);
}
/* ------------------------------------------------------------ map search */
/* Centred over the top edge, because that is where the eye starts. The
results drop under it, and picking one flies the camera to that road. */
/* Centred over the top edge, seven pixels from it, and no wider than the
space between the tools and the filter panel. */
.map-find {
position: absolute; z-index: 6; top: 7px; left: 50%; transform: translateX(-50%);
width: min(466px, calc(100% - 2 * max(var(--m-panel), var(--m-layers)) - 4 * var(--m-gap)));
min-width: 288px;
display: flex; flex-direction: column;
}
.map-find-bar {
flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px;
border-radius: 8px;
}
.map-find-bar > svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.map-find-bar input {
flex: 1; min-width: 0; height: 28px; border: 0; background: none;
color: var(--ink); font-size: 12.5px; outline: none;
}
.map-find-bar .btn-primary {
height: 28px; width: 30px; flex: none; padding: 0;
display: inline-grid; place-items: center; border-radius: 6px;
}
.map-find-bar .btn-primary svg { width: 14px; height: 14px; }
/* Our own clear button, so the way out of a search is the same in every
browser — Chrome draws a native one and Firefox none — and it takes back
the filter as well as the text. The native one is hidden for that reason. */
.map-find-x {
width: 24px; height: 24px; flex: none; display: grid; place-items: center;
padding: 0; border: 0; border-radius: 50%;
background: var(--page); color: var(--muted); cursor: pointer;
}
.map-find-x:hover { background: var(--line); color: var(--ink); }
.map-find-x[hidden] { display: none; }
.map-find-x svg { width: 12px; height: 12px; }
#filterSearch::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* Which road the DRP figures count, while one is selected. Said above the
tiles because the same tile reading 40 and 4 000 means two different
questions, and only this line says which one was asked. */
.ml-scope {
margin: 0 0 8px; padding: 6px 10px; border-radius: 7px;
background: var(--accent-soft); color: var(--accent);
font-size: 11.5px; font-weight: 650;
}
.ml-scope[hidden] { display: none; }
.map-find-list {
list-style: none; margin: 6px 0 0; padding: 5px;
/* Tall enough for both registers at their capped five rows plus their two
headings — a search that covers two registers and shows one of them is
not one search. */
min-height: 0; max-height: min(56vh, 430px); overflow-y: auto;
border-radius: 9px;
}
.map-find-list[hidden] { display: none; }
.map-find-item {
width: 100%; display: flex; align-items: center; gap: 8px;
padding: 7px 9px; border-radius: 8px; text-align: left; font-size: 12.5px;
color: var(--ink-2); background: none; border: 0; cursor: pointer;
}
.map-find-item:hover { background: var(--page); color: var(--ink); }
.map-find-item i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* The offer to go to a typed coordinate, which carries a pin where a road
carries its class colour. */
.map-find-item > svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.map-find-coord .nm { font-weight: 600; color: var(--ink); }
.map-find-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-find-item .ix {
flex: none; font-size: 10.5px; font-weight: 700; color: var(--accent);
background: var(--accent-soft); border-radius: 99px; padding: 1px 6px;
}
.map-find-item b { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-find-empty { padding: 9px 10px; font-size: 12px; color: var(--muted); text-align: center; }
/* Two registers in one list. The heading only appears when there is a second
group to tell it apart from — a lone heading over a lone group is a label
nobody needed. */
.map-find-group {
padding: 8px 10px 3px; font-size: 9.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted);
}
.map-find-group:first-child { padding-top: 3px; }
.map-find-more { padding: 4px 10px 7px; font-size: 10.5px; color: var(--muted); }
/* A survey road carries the trace the survey panel is drawn with, so the two
read as the same thing in two places. */
.map-find-survey > svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
/* The readout that names the road the survey register is pointed at. Pressing
it puts the cursor in the one search, which is where the road is chosen. */
/* Deliberately not a field.
It was a bordered box with a magnifier in it, which is a text input in every
way a reader can see — so they typed into it, nothing happened, and the
panel looked broken. It is a value with a way to change it now: no frame, no
magnifier, the road in the panel's own type and a quiet verb beside it. */
/* One row: the road on the left, the survey year on the right. It was a
stacked column of four labelled rows, which is a lot of chrome over a panel
whose whole job is what is under it.
The row itself is declared **once**, with the panel's own chrome, further
down. A second `.ml-picker` stood here and lost `display` and
`flex-direction` to it, which left exactly the two properties that one does
not set — `align-items: flex-end` and the basis below — standing inside a
column they were never written for: in a column a `flex-basis` is a
*height*, so the road field became 140 px of nothing, and `flex-end` is the
cross axis, so every value was pushed to the right-hand edge. Measured at
the panel's real width (318 px), that block was 207 px tall. It is 80 px. */
.ml-picker[hidden] { display: none; }
.ml-picker > .ml-field { flex: 1 1 140px; min-width: 0; }
.ml-picker > .ml-field-year { flex: 0 0 auto; }
/* The label is what sizes this field, so it must not wrap: "ГОД
ОБСЛЕДОВАНИЯ" over two lines makes the row as tall again as the control it
names, which is what sent the year under the road in the first place. */
.ml-field-year > span { white-space: nowrap; }
.ml-input-sm { width: auto; min-width: 92px; }
/* The road's other numbers, quiet and on their own line under its name.
`display: block` never achieved that on its own — the button is a flex row
and a block child is simply an item in it — so it takes a full basis; and
`order`, because the markup puts this between the name and the verb, where
a full-width item sends that verb down to a third line. */
.ml-road-alt { order: 1; flex: 1 0 100%; font-size: 10.5px; line-height: 1.35; color: var(--muted); }
.ml-road-alt[hidden] { display: none; }
.ml-road-face {
width: 100%; min-height: 32px; padding: 0;
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
border: 0; background: none; color: var(--ink); cursor: pointer;
font-size: 12.5px; text-align: left;
}
.ml-road-face b {
min-width: 0; max-width: 100%; font-weight: 700; font-size: 14px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ml-road-face > span {
flex: none; font-size: 10.5px; color: var(--accent);
border-bottom: 1px dashed currentColor;
}
.ml-road-face:hover > span { border-bottom-style: solid; }
.ml-road-face:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Which stretch of the road every figure below is counted over. Under the
road's own name rather than beside it: it qualifies the whole panel, not
the name, and a reader scanning the counts has to meet it on the way. */
.ml-bound {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
margin: -2px 0 0; font-size: 11px; color: var(--muted);
}
.ml-bound[hidden] { display: none; }
.ml-bound button {
flex: none; padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; color: var(--accent);
border-bottom: 1px dashed currentColor;
}
.ml-bound button:hover { border-bottom-style: solid; }
.map-field .ml-road-face { min-height: 36px; }
.map-field .ml-road-face b { font-size: 14.5px; }
/* -------------------------------------------------------- filter panel */
/* Detached from the edge on every side, so the canvas keeps running under
it — on a wall screen the map is the point, and a rail glued to the frame
cuts a column out of it. */
.map-panel {
position: absolute; z-index: 6;
top: var(--m-gap); right: var(--m-gap); bottom: var(--m-gap);
width: var(--m-panel);
display: flex; flex-direction: column; align-items: stretch; gap: 8px;
pointer-events: none;
}
.map-panel > * { pointer-events: auto; }
/* The panel's own header bar, and its fold.
It was a 34 px square floating beside the card. Folding the panel left that
square alone on the edge — a control whose whole message is "there used to
be a panel here", in a column that had just thrown its width away. As a
header the width is the panel's whether it is open or folded, so what comes
back is where it was left. */
.map-panel-head {
flex: none; width: 100%; height: 40px; padding: 0 12px;
display: flex; align-items: center; gap: 9px;
color: var(--ink-2); cursor: pointer; text-align: left;
}
.map-panel-head:hover { color: var(--ink); }
.map-panel-ic { width: 16px; height: 16px; flex: none; color: var(--accent); }
.map-panel-name {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}
.map-panel-chev { width: 15px; height: 15px; flex: none; transition: transform 0.18s ease; }
/* How much is holding. On the header rather than inside the card, because
the header is the one part of the panel that survives being folded — and a
reader who folds the panel and then wonders why the network looks thin is
exactly the reader this number is for. */
.map-panel-live {
flex: none; padding: 1px 7px; border-radius: 99px;
background: var(--accent-soft); color: var(--accent);
font-size: 10.5px; font-weight: 700; letter-spacing: 0;
}
.map-panel-card {
flex: 1; min-width: 0; min-height: 0;
/* A column of sections that fold. It was a row, with a rail of turned
tabs down the outer edge — see `wirePanelSections`. */
display: flex; flex-direction: column; overflow: hidden;
}
/* One sheet, divided — not a stack of little cards.
The panel asks three things in order (where, what is holding, what is
picked) and they are steps of one reading rather than three objects on a
shelf, so they are separated by a rule and not by a gutter. The padding
went with the gutter: a section owns its own 13px, which is what lets a
list inside one run edge to edge under its heading. */
.map-panel-body {
flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
display: flex; flex-direction: column;
scrollbar-width: thin;
}
.map-insp {
flex: none; min-width: 0; padding: 13px;
display: flex; flex-direction: column; gap: 10px;
}
.map-insp + .map-insp { border-top: 1px solid var(--line); }
.map-insp-head { display: flex; align-items: center; gap: 8px; }
.map-insp-ic { width: 16px; height: 16px; flex: none; color: var(--accent); }
.map-insp-name {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
color: var(--ink-2);
}
.map-insp-link {
flex: none; padding: 0; border: 0; background: none; cursor: pointer;
font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.map-insp-link:hover { color: var(--accent); }
.map-insp-count {
flex: none; padding: 1px 7px; border-radius: 99px;
background: var(--neutral-soft); color: var(--muted);
font-size: 10.5px; font-weight: 700;
}
.map-insp-count.on { background: var(--accent-soft); color: var(--accent); }
.map-insp-apply { width: 100%; height: 34px; font-size: 12.5px; }
/* ---------- the place chain ---------- */
/* Three questions that narrow each other, drawn as the chain they are. The
node fills in when its own step is answered; the connector below it only
colours when the step *under* it is answered too, so the rail reads as how
far down the hierarchy the reader has actually got. */
.map-chain { display: flex; flex-direction: column; }
.map-chain-step { display: flex; gap: 11px; align-items: stretch; }
.map-chain-step.is-locked { opacity: 0.5; }
.map-chain-rail {
width: 14px; flex: none; display: flex; flex-direction: column; align-items: center;
}
.mc-line { width: 2px; background: var(--line); }
.mc-top { height: 12px; }
.mc-bottom { flex: 1; }
.map-chain-step:first-child .mc-top,
.map-chain-step:last-child .mc-bottom { background: transparent; }
.mc-node {
width: 12px; height: 12px; flex: none; box-sizing: border-box;
border-radius: 50%; border: 1.6px solid var(--line-strong); background: var(--surface);
}
.map-chain-step.is-set > .map-chain-rail .mc-node { border-color: var(--accent); background: var(--accent); }
.map-chain-step.is-set > .map-chain-rail .mc-top,
.map-chain-step.is-set + .map-chain-step > .map-chain-rail .mc-top { background: var(--accent); }
.map-chain-step.is-set:has(+ .map-chain-step.is-set) > .map-chain-rail .mc-bottom { background: var(--accent); }
.map-chain-field {
position: relative; flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 1px; padding: 4px 0 8px;
}
.map-chain-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
color: var(--muted);
}
/* The select itself wears the box. Tom Select is bound to these — the map's
pickers are searchable, which a transparent select laid over a drawn box
would throw away — so the face is styled at `.ts-control`, and the bare
element is styled to match for the moment before the widget is built. */
.map-chain-select {
width: 100%; height: 34px; padding: 0 10px;
border: 1px solid var(--line-strong); border-radius: 6px;
background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
}
/* The widget copies the original select's class list onto its wrapper, so
the wrapper would wear the box too and draw it twice. It is stripped bare
and the box moves to the control — written at `.ts-wrapper.single
.ts-control` or narrower, because that is the selector the widget's own
stylesheet uses and anything shorter loses to it. */
.map-chain-field .ts-wrapper { border: 0; background: none; padding: 0; border-radius: 0; height: auto; }
.map-chain-field .ts-wrapper.single .ts-control {
min-height: 34px; height: 34px; padding: 0 10px;
border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface);
font-size: 13px; color: var(--muted);
}
.map-chain-field .ts-wrapper.disabled .ts-control { background: var(--page); }
.map-chain-step.is-set .map-chain-select,
.map-chain-step.is-set .map-chain-field .ts-wrapper.single .ts-control { font-weight: 600; color: var(--ink); }
/* ---------- what is holding ---------- */
.map-active {
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden;
}
.map-active[hidden] { display: none; }
.map-active-row {
display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 11px;
border: 0; background: none; width: 100%; text-align: left; color: inherit; font: inherit;
}
.map-active-row + .map-active-row { border-top: 1px solid var(--line); }
.map-active-row[data-ml-open] { cursor: pointer; }
.map-active-row[data-ml-open]:hover { background: var(--page); }
/* The group's colour, as a bar rather than a dot: it is read down the list
as "these four are the survey's", which a dot in a row of text is not. */
.map-active-bar { width: 4px; align-self: stretch; flex: none; border-radius: 99px; }
.map-active-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.map-active-txt > i { font-style: normal; font-size: 10px; color: var(--muted); }
.map-active-txt > b {
font-size: 12.5px; font-weight: 600; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-active-x {
flex: none; width: 26px; height: 26px; display: grid; place-items: center;
border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer;
}
.map-active-x:hover { background: var(--crit-soft); color: var(--crit); }
.map-active-x svg { width: 13px; height: 13px; }
.map-active-none {
margin: 0; padding: 12px 10px; border-radius: 7px; background: var(--page);
text-align: center; font-size: 11.5px; color: var(--muted);
}
.map-active-clear {
align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 10px;
border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer;
}
.map-active-clear:hover { border-color: var(--crit); color: var(--crit); }
.map-active-clear svg { width: 14px; height: 14px; flex: none; }
.map-active-clear[hidden] { display: none; }
/* ---------- what is picked ---------- */
/* Drawn whether or not anything is: a heading with a dashed frame under it
says what the block is for, where an empty column said only that the panel
had ended. */
.map-insp-empty {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 18px 12px; border: 1px dashed var(--line-strong); border-radius: 9px;
text-align: center;
}
.map-insp-empty > b { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.map-insp-empty > span { font-size: 11px; line-height: 1.4; color: var(--muted); }
#mapInspSelected:has(#govMapDetail:not([hidden])) .map-insp-empty { display: none; }
.map-insp-sel {
min-width: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12px;
animation: map-float-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.map-insp-sel[hidden] { display: none; }
.map-detail-class {
flex: none; display: inline-flex; align-items: center; gap: 5px;
padding: 1px 7px; border-radius: 99px;
font-size: 10.5px; font-weight: 700;
}
.map-detail-class[hidden] { display: none; }
.map-detail-class > i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.map-detail-jump { display: flex; gap: 8px; }
.map-detail-jump[hidden] { display: none; }
.map-detail-jump > button {
flex: 1; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-size: 12px;
}
.map-detail-jump svg { width: 14px; height: 14px; flex: none; }
/* The sections are ordinary accordions in the column: their own frame, their
own chevron, any number open at once. They were stripped of all three while
the rail decided which single one was showing. */
/* Folded, the panel is its own header bar and nothing else — at the width it
had open. It used to shrink to a 34 px pill, which took the column's width
away along with its contents and left the reader hunting for where the
panel had gone; the width is the one thing a fold must not take. */
.map-shell.panel-closed .map-panel-card { display: none; }
.map-shell.panel-closed .map-panel { bottom: auto; }
.map-shell.panel-closed .map-panel-chev { transform: rotate(-90deg); }
.map-shell.layers-closed .map-find { width: min(466px, calc(100% - 2 * var(--m-panel) - 4 * var(--m-gap))); }
.map-shell.layers-closed .map-toast { left: calc(34px + 2 * var(--m-gap)); }
/* --------------------------------------------------------- panel sections */
.map-sec {
flex: none; border: 1px solid var(--line); border-radius: 9px;
background: var(--surface); overflow: hidden;
}
.map-sec-head {
display: flex; align-items: center; gap: 8px; padding: 11px 13px;
list-style: none; cursor: pointer; user-select: none;
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--ink-2);
}
.map-sec-head::-webkit-details-marker { display: none; }
.map-sec-head:hover { background: var(--page); }
.map-sec-head > span:first-of-type { flex: 1; min-width: 0; }
.map-sec-ic { width: 16px; height: 16px; flex: none; color: var(--accent); }
.map-sec-chev { width: 14px; height: 14px; flex: none; color: var(--muted); transition: transform 0.15s ease; }
.map-sec[open] > .map-sec-head .map-sec-chev { transform: rotate(180deg); }
.map-sec-count {
flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0;
color: var(--muted); background: var(--neutral-soft); border-radius: 99px; padding: 1px 7px;
}
.map-sec-count.on { color: var(--accent); background: var(--accent-soft); }
.map-sec-body { padding: 13px; border-top: 1px solid var(--line); }
.map-sec-tools { display: flex; gap: 5px; margin-bottom: 10px; }
.map-sec-actions { display: flex; gap: 8px; margin-top: 13px; }
.map-sec-btn { flex: 1; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; }
.map-mini {
font-size: 10.5px; font-weight: 600; color: var(--accent);
padding: 3px 8px; border-radius: 5px; background: var(--accent-soft);
}
.map-mini:hover { filter: brightness(0.96); }
.map-field { display: flex; flex-direction: column; gap: 5px; }
.map-field > span {
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--muted);
}
.map-select {
width: 100%; height: 36px; padding: 0 10px;
border: 1px solid var(--line-strong); border-radius: 6px;
background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px;
}
.map-select:hover { border-color: var(--accent); }
/* Category tiles: two columns, because these lists run to twenty-odd rows
and a single column pushed everything else off the panel. */
.map-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.map-tile {
display: flex; align-items: center; gap: 6px; min-width: 0;
padding: 5px 6px; border-radius: 6px; text-align: left;
border: 1px solid var(--line); background: var(--page);
transition: background 0.12s ease, border-color 0.12s ease;
}
.map-tile:hover { border-color: var(--accent); }
.map-tile.active { background: var(--accent); border-color: var(--accent); }
/* Nothing of this kind within what the map is showing. Still offered —
ticking it is how you find that out — but not pretending otherwise. */
.map-tile-empty:not(.active) { opacity: 0.55; }
.map-tile.active .map-tile-name { color: #fff; }
.map-tile.active .map-tile-val { color: rgba(255, 255, 255, 0.9); }
.map-tile-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
/* The name is the tile. It used to open with a circled initial — K, T, a
digit — which named nothing and made twenty tiles look like twenty of the
same thing; the wording carries the identity now, so it is what is bold. */
.map-tile-name {
min-width: 0; font-size: 10.5px; font-weight: 650; line-height: 1.25; color: var(--ink);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.map-tile-val { font-size: 11px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
/* The category's own artwork, which is what it is drawn as on the map. The
frame is there whether or not a picture arrives — 89 of the 103 categories
have none uploaded, and the ones that do can still lose the file — so a
tile is the same height and the name starts in the same column either way,
instead of a broken glyph in some rows and nothing in others. */
.map-tile-ic {
width: 22px; height: 22px; flex: none;
display: grid; place-items: center;
border-radius: 5px; background: var(--neutral-soft);
overflow: hidden;
}
/* The glyph sits at three quarters of the tile, which is the ratio the icon
set's own tile is drawn at (24 of 32). Filling the square edge to edge left
the drawing touching the rounded corners it is framed by. */
.map-tile-ic img { width: 16px; height: 16px; object-fit: contain; }
.map-tile.active .map-tile-ic { background: rgba(255, 255, 255, 0.24); }
/* The grade a segment tile stands for, in the colour it is drawn in.
Five steps of one hue read as an order; a name alone does not. */
.map-tile-dot {
width: 11px; height: 11px; flex: none; border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.16);
}
.map-tile.active .map-tile-dot { border-color: rgba(255, 255, 255, 0.7); }
/* ---------------------------------------------------------- photo viewer */
/* A photo opened from a card stays on the card: full size over a dimmed page,
walked through with the arrows or the keyboard, closed with Escape or a
click on the frame. Opening it in a new tab loses the record it belongs to. */
.gov-shots {
position: fixed; inset: 0; z-index: 90;
background: rgba(9, 12, 20, 0.86);
display: grid; grid-template-columns: 64px 1fr 64px; align-items: center;
padding: 24px;
}
.gov-shots[hidden] { display: none; }
body.gov-shots-open { overflow: hidden; }
.gov-shots-stage {
grid-column: 2; margin: 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.gov-shots-stage img {
max-width: 100%; max-height: calc(100vh - 120px);
border-radius: 8px; background: #fff;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.gov-shots-stage figcaption {
color: rgba(255, 255, 255, 0.82); font-size: 12.5px;
font-variant-numeric: tabular-nums; text-align: center;
}
.gov-shots-nav, .gov-shots-x {
display: grid; place-items: center; cursor: pointer;
border: 0; border-radius: 50%; color: #fff;
background: rgba(255, 255, 255, 0.14);
}
.gov-shots-nav { width: 44px; height: 44px; }
.gov-shots-prev { grid-column: 1; justify-self: start; }
.gov-shots-next { grid-column: 3; justify-self: end; }
.gov-shots-nav svg { width: 22px; height: 22px; }
.gov-shots-nav:hover, .gov-shots-x:hover { background: rgba(255, 255, 255, 0.26); }
.gov-shots-alone .gov-shots-nav { visibility: hidden; }
.gov-shots-x { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; }
.gov-shots-x svg { width: 18px; height: 18px; }
.gov-shots-count {
position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
color: rgba(255, 255, 255, 0.75); font-size: 12px; font-variant-numeric: tabular-nums;
}
/* The photo block inside the map's floating card. */
.map-shots { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.map-shots[hidden] { display: none; }
.map-shots-head {
display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px;
font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.map-shots-head b { color: var(--accent); font-variant-numeric: tabular-nums; }
.map-shots .shot { width: 58px; height: 58px; }
/* The road card's tail: what has been reported done on this stretch. A row
of dates is the argument and the thumbnails under it are the evidence, so
the two stay together rather than being split into separate blocks. */
.map-reports { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.map-reports[hidden] { display: none; }
.map-report + .map-report { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.map-report-h { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--ink); }
.map-report-h .nm {
flex: 1; min-width: 0; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.map-report-h .dt { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-report-h:hover .nm { color: var(--accent); }
.map-report-meta { margin-top: 2px; font-size: 11px; color: var(--muted); }
.map-report .shot-strip { margin-top: 6px; }
.map-report .shot { width: 52px; height: 52px; border-radius: 6px; }
.map-reports-all {
display: inline-block; margin-top: 9px;
font-size: 11.5px; font-weight: 600; color: var(--accent);
}
/* The strip of thumbnails a record's photos are offered as. */
.shot-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.shot {
display: block; width: 74px; height: 74px; flex: none;
border-radius: 7px; overflow: hidden; cursor: zoom-in;
border: 1px solid var(--line); background: var(--page);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot:hover { border-color: var(--accent); }
/* Where the photographs are the record rather than a footnote to it — a
day's work report, a repair request's before and after.
Bigger than the 74 px thumbnail, and still a **fixed** tile: these cards
had no rule for their photos at all, so a phone picture rendered at its own
three-thousand-pixel width and ran straight out of the card. It never
showed locally, where the seeded photos are small. `object-fit: cover`
crops rather than squashes, and the full frame is one press away in the
viewer every one of these thumbnails is already wired to. */
.shot-strip-lg .shot { width: 164px; height: 164px; border-radius: 8px; }
@media (max-width: 760px) {
.shot-strip-lg .shot { width: 132px; height: 132px; }
}
@media (max-width: 480px) {
/* Two to a row on a phone, whatever the card is worth. */
.shot-strip-lg .shot { width: calc(50% - 4px); height: auto; aspect-ratio: 1; }
}
/* ------------------------------------------------------- points on the map */
/* A point is the thing it stands for: its category's icon on a white disc
ringed in that category's colour, so a row of them reads as a row of kinds
rather than as a row of dots. The colour is handed in as `color`, which is
what the ring and the plain fallback both inherit. */
.map-pin {
width: 26px; height: 26px; margin: -13px 0 0 -13px;
border-radius: 50%; background: #fff;
border: 2px solid currentColor;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.32);
display: grid; place-items: center; overflow: hidden;
cursor: pointer;
}
.map-pin img { width: 15px; height: 15px; object-fit: contain; display: block; }
/* Nothing was uploaded for this kind, so the colour is all there is to say. */
.map-pin-plain { background: currentColor; border-color: #fff; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
/* --------------------------------------------------------- the selection */
/* What is selected reads inside the panel's own column, as the third of the
inspector's three sections, rather than as a second card over the map.
Two things it used to be and is not: a card floating in the middle of the
canvas, which put chrome over the very ground the reader had just clicked;
and a framed block with an accent edge inside the column, which is a card
drawn inside a card. Its own heading says what it is, and the rule above
it separates it from what is holding — the frame was saying the same thing
a third time. */
@keyframes map-float-in { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .map-insp-sel { animation: none; } }
.map-float-head { display: flex; align-items: center; gap: 6px; }
.map-float-head .map-detail-kind { flex: none; min-width: 0; margin: 0; }
.map-float-head .map-x { margin-left: auto; }
.map-x {
width: 26px; height: 26px; flex: none; display: grid; place-items: center;
border-radius: 5px; color: var(--ink-2);
}
.map-x:hover { background: var(--crit-soft); color: var(--crit-ink); }
.map-x svg { width: 15px; height: 15px; }
.map-detail-kind {
flex: none; padding: 1px 7px; border-radius: 99px;
background: var(--accent-soft); color: var(--accent);
font-size: 10.5px; font-weight: 700; letter-spacing: 0;
}
.map-detail-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.map-detail-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 11px; font-size: 12px; }
.map-detail-row + .map-detail-row { border-top: 1px solid var(--line); }
/* The register rows are one card, and the card has to find its own edges:
the body they sit in also carries the point readout, the copy control, the
actions and the reports, so the frame belongs to the *run* of rows rather
than to the block around them. First and last of a run are named by what
is beside them, which is the only thing that tells them apart here. */
.map-detail-body > .map-detail-row {
background: var(--surface);
border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.map-detail-body > .map-detail-row:not(.map-detail-row + .map-detail-row) {
border-top: 1px solid var(--line); border-top-left-radius: 9px; border-top-right-radius: 9px;
}
.map-detail-body > .map-detail-row:not(:has(+ .map-detail-row)) {
border-bottom: 1px solid var(--line); border-bottom-left-radius: 9px; border-bottom-right-radius: 9px;
}
.map-detail-row > span { flex: 1; min-width: 0; color: var(--muted); overflow-wrap: break-word; }
.map-detail-row > b { font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: break-word; }
/* The clicked point, ready to be taken elsewhere. Reading a coordinate off a
screen and typing it back in by hand is how a coordinate acquires a typo. */
.map-detail-copy > button {
display: flex; align-items: center; gap: 6px; padding: 2px 6px; margin: -2px -6px;
border: 0; border-radius: 5px; background: none; cursor: pointer;
color: var(--ink); font: inherit; font-size: 12px;
/* Without this the button cannot shrink below its own content, so a long
value runs back over its label instead of wrapping under itself. Only
`overflow-wrap`, never `word-break: break-word`: these are compound
technical terms and that breaks them where no reader would. */
min-width: 0; max-width: 68%;
}
.map-detail-copy > button:hover { background: var(--page); }
.map-detail-copy > button b {
font-weight: 600; font-variant-numeric: tabular-nums;
min-width: 0; text-align: right; overflow-wrap: break-word; word-break: normal;
}
.map-detail-copy > button svg { width: 13px; height: 13px; flex: none; color: var(--muted); }
.map-detail-copy > button.copied { background: var(--ok-soft); color: var(--ok-ink); }
.map-detail-copy > button.copied svg { color: var(--ok); }
/* Where the browser refused the clipboard, the text is selected instead. */
.map-detail-copy > button.selected { background: var(--accent-soft); }
.map-detail-actions { margin-top: 13px; display: flex; gap: 8px; }
.map-detail-actions > a { flex: 1; text-align: center; }
/* ------------------------------------------- the point under the cursor */
/* The kilometre and the coordinate the pointer is on, in the panel rather
than only in the card that follows the cursor: the hover card is where a
figure is glanced at and this is where it is taken from. Set apart from the
registry rows above it, because those describe the road and these two
describe one point on it. */
.map-point {
margin-top: 11px; padding: 8px 10px 4px;
border: 1px solid var(--line); border-radius: 6px; background: var(--page);
}
.map-point-head {
display: flex; align-items: baseline; gap: 8px;
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--muted);
}
.map-point-head > span { flex: 1; min-width: 0; }
.map-point-head > i { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); }
.map-point .map-detail-row { padding: 4px 0; }
.map-point .map-detail-row:first-of-type { border-top: 0; }
.map-point-hint { margin: 5px 0 6px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
/* --------------------------------------------- copying the whole card */
/* One press copies, the chevron chooses what "copy" means. The chosen form
stays on the face of the button, so the reader never has to open the list
to find out what the next press will do. */
.map-copy-all { position: relative; display: flex; margin-top: 11px; }
.map-copy-all > button {
display: flex; align-items: center; gap: 7px; padding: 7px 10px;
border: 1px solid var(--line); background: var(--surface); cursor: pointer;
color: var(--ink); font: inherit; font-size: 12px; font-weight: 600;
}
.map-copy-all .mca-go { flex: 1; min-width: 0; border-radius: 6px 0 0 6px; }
.map-copy-all .mca-more { border-radius: 0 6px 6px 0; border-left: 0; padding: 7px 8px; }
.map-copy-all > button:hover { background: var(--page); }
.map-copy-all > button svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.map-copy-all .mca-go > span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-copy-all .mca-face {
flex: none; padding: 1px 6px; border-radius: 999px;
background: var(--accent-soft); color: var(--accent);
font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.map-copy-all .mca-go.copied { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--ok-soft); }
.map-copy-all .mca-go.copied svg { color: var(--ok); }
.map-copy-all .mca-go.selected { background: var(--accent-soft); }
/* Upwards: the button sits at the foot of a card that is already as tall as
the map, so a list dropping below it would open off the bottom. */
.map-copy-all .mca-menu {
position: absolute; z-index: 12; right: 0; bottom: calc(100% + 5px);
min-width: 168px; padding: 4px;
border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}
.map-copy-all .mca-menu[hidden] { display: none; }
.map-copy-all .mca-menu button {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 7px 9px; border: 0; border-radius: 5px; background: none; cursor: pointer;
color: var(--ink); font: inherit; font-size: 12px; text-align: left;
}
.map-copy-all .mca-menu button:hover { background: var(--page); }
.map-copy-all .mca-menu button > span { flex: 1; min-width: 0; }
.map-copy-all .mca-tick { width: 13px; height: 13px; flex: none; color: var(--accent); visibility: hidden; }
.map-copy-all .mca-menu button[aria-checked="true"] { color: var(--accent); font-weight: 650; }
.map-copy-all .mca-menu button[aria-checked="true"] .mca-tick { visibility: visible; }
/* ------------------------------------------------------ what the keys do */
.map-keys {
position: absolute; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(352px, calc(100% - 2 * var(--m-gap)));
max-height: calc(100% - 2 * var(--m-gap)); overflow-y: auto;
padding: 11px 14px 12px; font-size: 12px;
}
.map-keys[hidden] { display: none; }
.map-keys-row {
display: flex; align-items: center; gap: 12px; padding: 6px 0;
}
.map-keys-row + .map-keys-row { border-top: 1px solid var(--line); }
.map-keys-row > span { flex: 1; min-width: 0; color: var(--ink); }
.map-keys-row > kbd {
flex: none; padding: 2px 8px; border: 1px solid var(--line); border-bottom-width: 2px;
border-radius: 4px; background: var(--page); color: var(--ink-2);
font-family: inherit; font-size: 11px; font-weight: 700; white-space: nowrap;
}
/* Cluster contents: a clickable list of the objects under one bubble. */
.map-detail-list { display: flex; flex-direction: column; gap: 2px; max-height: 42vh; overflow-y: auto; }
.map-detail-item {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 8px; border-radius: 6px; text-align: left; font-size: 12.5px;
}
.map-detail-item:hover { background: var(--page); }
.map-detail-item .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.map-detail-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.map-detail-item .km { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-empty { margin: 0; font-size: 12.5px; color: var(--muted); }
/* ------------------------------------------------------- hover readout */
/* Follows the cursor along a road and reports the kilometre under it. Never
takes the pointer: the map has to keep receiving every move that drives it. */
.map-hover {
position: absolute; z-index: 4; pointer-events: none;
min-width: 152px; max-width: 280px;
padding: 10px 13px 11px; border: 1px solid var(--line);
border-left: 3px solid var(--accent); border-radius: 9px;
background: var(--m-glass); backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px); box-shadow: var(--shadow);
opacity: 0; transform: translateY(4px); transition: opacity 0.12s ease, transform 0.12s ease;
}
.map-hover.on { opacity: 1; transform: none; }
.map-hover-head { display: flex; align-items: baseline; gap: 8px; }
.map-hover-name {
flex: 1; min-width: 0; font-size: 13px; font-weight: 650; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.map-hover-index {
flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
color: var(--accent); background: var(--accent-soft);
border-radius: 99px; padding: 1px 7px;
}
.map-hover-index[hidden] { display: none; }
.map-hover-km {
margin-top: 4px; display: flex; align-items: baseline; gap: 5px;
font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--accent);
font-variant-numeric: tabular-nums;
}
.map-hover-km small { font-size: 12px; font-weight: 600; color: var(--muted); }
.map-hover-tag {
margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line);
display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2);
}
.map-hover-tag[hidden] { display: none; }
.map-hover-tag i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.map-hover-tag span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* --------------------------------------------------------- tape measure */
/* Its running total sits above the dock, where the eye already is. */
.map-tape {
position: absolute; z-index: 5; left: var(--m-gap); bottom: calc(var(--m-dock) + 63px);
width: 233px; padding: 11px 14px 13px; border-left: 3px solid var(--accent);
}
.map-tape[hidden] { display: none; }
.map-tape-head {
display: flex; align-items: center; gap: 8px;
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--accent);
}
.map-tape-head > span { flex: 1; min-width: 0; }
.map-tape-km {
margin-top: 3px; display: flex; align-items: baseline; gap: 5px;
font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.map-tape-km small { font-size: 12px; font-weight: 600; color: var(--muted); }
.map-tape-hint { margin: 5px 0 0; font-size: 11px; line-height: 1.4; color: var(--muted); }
/* ------------------------------------------------------- road index badge */
/* The number a line is called, written along it, the way a road atlas prints
a route shield — and the way the trunk-network map's `.gm-label b` already
does, which is where the shape comes from. The class colour arrives inline,
per badge, because three classes share these rules.
Two differences from the trunk map's, both deliberate. It takes a press
(`cursor: pointer`, and no `pointer-events: none`), because here the badge
is the way to "that road, all of it". And it is painted on the map's own
tiles rather than on a panel surface, so it is opaque by design instead of
following the panel theme — a translucent plate over a satellite photograph
is not a plate. */
.map-index {
/* Yandex drops the layout element at the anchor point and leaves the
centring to it. A badge is as wide as its index — "M39" to "4K1085" —
so it translates itself back by half of whatever it turned out to be,
which is also the box `badgeShape()` measures the press against. */
width: max-content; transform: translate(-50%, -50%);
padding: 2px 7px; border-radius: 4px;
border: 1.5px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 5px rgba(15, 23, 42, 0.4);
background: #1d6fd0; color: #fff;
font: 700 11px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
white-space: nowrap; user-select: none; cursor: pointer;
}
/* ---------------------------------------------------------------- toast */
.map-toast {
position: absolute; z-index: 5;
left: calc(var(--m-layers) + 2 * var(--m-gap)); bottom: calc(var(--m-dock) + 117px);
margin: 0; padding: 8px 14px;
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--ink-2); white-space: nowrap;
}
/* Both offsets above are the workspace's: they stand the line clear of the
layers panel on the left and of the cards that used to sit above the bar.
A map with neither — the trunk-network screen — reads it in the corner it
was put in, one gap up from the badge. */
.map-shell:not(:has(.map-layers)) .map-toast {
left: var(--m-gap); bottom: calc(var(--m-dock) + var(--m-gap));
}
.map-toast[hidden] { display: none; }
.map-toast::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ok); }
.map-toast.busy::before { background: var(--warn); }
.map-toast.empty::before { background: var(--crit); }
/* The tape owns that corner while it is measuring. */
/* A pointer tool is out: the cursor says so over the whole canvas. */
.map-shell.measuring #govMap,
.map-shell.panorama #govMap { cursor: crosshair; }
.map-shell.measuring .map-toast { bottom: calc(var(--m-dock) + 227px); }
/* ------------------------------------------------------------------ dock */
/* Two cards in the bottom-left corner: which roads are drawn, and how much of
them there is. The tools live in the palette on the left edge. */
.map-dock {
position: absolute; z-index: 6; bottom: var(--m-dock);
left: calc(var(--m-layers) + 2 * var(--m-gap));
right: calc(var(--m-panel) + 2 * var(--m-gap));
display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
pointer-events: none;
}
.map-shell.layers-closed .map-dock { left: calc(34px + 2 * var(--m-gap)); }
.dock-card { pointer-events: auto; display: flex; align-items: center; }
/* An author `display` beats the browser's own `[hidden]` rule, so a card
that can be hidden has to say so here. */
.dock-card[hidden] { display: none; }
/* ---------- the way out of every filter at once ---------- */
/* First on the bottom bar, and the one thing on it that keeps a fill: every
other group in the bar drops its card chrome because the bar is the
surface, and this one does not, because it is the answer to "why does the
map look like this" and a reader who cannot find it reloads the page
instead. It has no `order`, so it lands ahead of the tools; when there is
nothing to clear it is not in the row at all, gap and all. */
.map-clear-all {
flex: none; pointer-events: auto; cursor: pointer;
display: inline-flex; align-items: center; gap: 10px;
height: var(--m-dock-h); padding: 0 17px;
border: none; border-radius: 9px;
background: var(--accent); color: var(--accent-ink);
font-size: 13.5px; font-weight: 650; white-space: nowrap;
box-shadow: 0 10px 28px rgba(37, 99, 196, 0.34), 0 1px 2px rgba(15, 23, 42, 0.14);
transition: filter 0.14s ease, transform 0.12s ease;
}
.map-clear-all[hidden] { display: none; }
.map-clear-all:hover { filter: brightness(1.08); }
.map-clear-all:active { transform: translateY(1px); }
.map-clear-all svg { width: 17px; height: 17px; flex: none; }
/* How many are holding. A reader who cannot see why the network looks thin
needs the number more than the word. */
.map-clear-all b {
min-width: 22px; height: 22px; padding: 0 6px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px; background: rgba(255, 255, 255, 0.24);
font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.map-classes { gap: 3px; padding: 5px; }
.map-class { position: relative; cursor: pointer; }
.map-class input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.map-class-pill {
display: inline-flex; align-items: center; gap: 7px;
height: 34px; padding: 0 13px; border-radius: 8px;
font-size: 12.5px; font-weight: 600; color: var(--muted);
white-space: nowrap; user-select: none;
transition: background 0.12s ease, color 0.12s ease;
}
.map-class-pill i {
width: 10px; height: 10px; border-radius: 3px; flex: none;
background: var(--muted); transition: opacity 0.12s ease;
opacity: 0.35;
}
.map-class input:checked + .map-class-pill { color: var(--ink); background: var(--page); }
.map-class input:checked + .map-class-pill i { opacity: 1; }
.map-class input:focus-visible + .map-class-pill { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A spot in the repair history — a bridge, which the 2026 sheet gives one
coordinate and no length. Same shape as the survey's own marker, in the
period's colour, which is written on by the layer rather than here: there
are five periods and one stylesheet rule cannot be five colours. */
.map-works-pin {
width: 14px; height: 14px;
border: 2.5px solid #fff; border-radius: 50%;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.45);
transform: translate(-7px, -7px);
}
/* The repair history's own switch in the strip. It wears the class pills'
shape so it reads as the end of that row of filters, and nothing else:
its swatch is a round dot rather than the classes' rounded square, because
it is a layer over the network and not one of the three the network is
divided into. */
.map-worksbar .map-class-pill i { border-radius: 50%; }
.map-metrics { gap: 21px; padding: 7px 17px; }
.map-metric { display: flex; flex-direction: column; gap: 1px; }
.map-metric > span {
font-size: 9.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--muted); white-space: nowrap;
}
.map-metric > b {
font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--accent);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* --------------------------------------------------------- tool palette */
/* Left edge, two columns, the way a drawing program stacks its tools. Every
button here acts on the view — what is drawn is decided on the right and
along the bottom, so the two never mix. */
/* The palette and the basemap card stack in one column, so the second is
always right under the first however many tools the first holds. */
.map-left {
position: absolute; z-index: 6; left: var(--m-gap); top: var(--m-gap);
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
/* The column is only as wide as whatever is in it, so the narrow icon
cards stay narrow and the search under them can be a field. */
pointer-events: none;
}
.map-left > * { pointer-events: auto; flex: none; }
.map-tools {
display: grid; grid-template-columns: repeat(2, 38px); gap: 3px;
padding: 5px;
border: 1px solid var(--line); border-radius: 9px;
background: var(--m-glass);
backdrop-filter: blur(13px) saturate(1.4);
-webkit-backdrop-filter: blur(13px) saturate(1.4);
box-shadow: 0 8px 34px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.06);
}
.tool-btn {
position: relative; width: 38px; height: 38px;
display: grid; place-items: center; border-radius: 6px;
border: 0; background: none; color: var(--ink-2); cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.tool-btn:hover { background: var(--page); color: var(--ink); }
.tool-btn svg { width: 19px; height: 19px; }
.tool-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.tool-btn-ok[aria-pressed="true"] { background: var(--ok-soft); color: var(--ok); }
.tool-btn-crit[aria-pressed="true"] { background: var(--crit-soft); color: var(--crit); }
/* Spans both columns, so a group never ends mid-row. */
.tool-sep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 3px 2px; }
/* A tool that carries a count takes the whole width: four digits crammed into
a 38px square sat on top of the icon they belong to. */
.tool-btn-wide {
grid-column: 1 / -1; width: auto; height: 34px;
display: flex; align-items: center; gap: 8px; padding: 0 8px;
}
.tool-badge {
margin-left: auto; flex: none; white-space: nowrap; min-width: 15px; height: 16px;
display: grid; place-items: center; padding: 0 5px;
border-radius: 99px; background: var(--neutral-ink); color: #fff;
font-size: 9.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.tool-btn-warn[aria-pressed="true"] { background: var(--warn-soft); color: var(--warn); }
.tool-btn-ok .tool-badge { background: var(--ok); }
.tool-btn-crit .tool-badge { background: var(--crit); }
.tool-btn-warn .tool-badge { background: var(--warn); }
/* The colour question sits in its own card under the base maps: two of them
in a row of three would read as a third base map. */
.map-colours { grid-template-columns: repeat(2, 1fr); }
/* Which kilometre the readout means was two unlabelled icons, and nobody
could tell which was which. Stacked, named, and under a heading that says
what the choice is about — the column is a little wider for it, which is
the price of the words. */
.map-kmmode {
width: var(--m-tools);
display: flex; flex-direction: column; gap: 2px; padding: 6px;
border: 1px solid var(--line); border-radius: 8px;
background: var(--m-glass);
backdrop-filter: blur(13px) saturate(1.4);
-webkit-backdrop-filter: blur(13px) saturate(1.4);
box-shadow: 0 8px 34px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.06);
}
/* Folded, the card is icon-only and as narrow as the ones above it. */
.map-kmmode.open { width: var(--m-left); }
.kmmode-toggle {
display: flex; align-items: center; gap: 4px; width: 100%;
padding: 2px 4px 4px; border: 0; background: none; cursor: pointer;
color: var(--muted);
}
.kmmode-head {
flex: 1; min-width: 0; text-align: left;
font-size: 9.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kmmode-toggle:hover { color: var(--ink-2); }
.kmmode-chev { width: 13px; height: 13px; flex: none; transition: transform 0.15s ease; }
.map-kmmode:not(.open) .kmmode-head { display: none; }
.map-kmmode:not(.open) .kmmode-toggle { justify-content: center; padding: 2px 0 4px; }
.map-kmmode:not(.open) .kmmode-chev { transform: rotate(-90deg); }
.map-kmmode:not(.open) .kmmode-row { justify-content: center; padding: 0; }
.map-kmmode:not(.open) .kmmode-row span { display: none; }
.kmmode-row {
display: flex; align-items: center; gap: 7px; width: 100%;
height: 28px; padding: 0 6px; border: 0; border-radius: 6px;
background: none; color: var(--ink-2); cursor: pointer;
font-size: 11px; text-align: left;
transition: background 0.12s ease, color 0.12s ease;
}
.kmmode-row svg { width: 15px; height: 15px; flex: none; }
.kmmode-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmmode-row:hover { background: var(--page); color: var(--ink); }
.kmmode-row[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
/* The base maps as a segmented card. The workspace moved its three into the
settings card; the trunk-network screen (`#gmViews`) still wears this. */
.map-views {
width: 132px;
display: block;
padding: 4px;
border: 1px solid var(--line); border-radius: 8px;
background: var(--m-glass);
backdrop-filter: blur(13px) saturate(1.4);
-webkit-backdrop-filter: blur(13px) saturate(1.4);
box-shadow: 0 8px 34px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.06);
}
.view-btn {
height: 28px; display: grid; place-items: center; border-radius: 6px;
border: 0; background: none; color: var(--muted); cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.view-btn:hover { background: var(--page); color: var(--ink); }
.view-btn svg { width: 16px; height: 16px; }
.view-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.view-list { display: flex; flex-direction: column; gap: 3px; }
.view-list .view-btn {
width: 100%; height: 32px; padding: 0 9px;
display: flex; align-items: center; gap: 9px;
justify-items: start; place-items: center start;
font-size: 12px; text-align: left;
}
.view-list .view-btn svg { width: 16px; height: 16px; flex: none; }
.view-list .view-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.display-body { padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 9px; }
.display-body[hidden] { display: none; }
.display-row { display: flex; flex-direction: column; gap: 4px; }
.display-row > span {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--muted);
}
.display-row input[type="range"] { width: 100%; accent-color: var(--accent); margin: 0; }
/* One slider per significance class, under one heading: three questions of
the same kind, which is not the same thing as three settings. */
.display-group { display: flex; flex-direction: column; gap: 7px; }
.display-head {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--muted);
}
/* Named rather than shouted: these are three labels inside a group that
already carries the heading, so they read as rows, not as three headings. */
.display-row-class > span {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 600; text-transform: none;
letter-spacing: 0; color: var(--ink-2);
}
/* The key is drawn at the weight its slider is set to — the card shows the
difference between the classes instead of printing two numbers to compare. */
.display-key { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.key-class-1 { background: var(--crit); }
.key-class-2 { background: var(--accent); }
.key-class-3 { background: var(--ok); }
.key-class-4 { background: var(--warn); }
.display-row-class > span b {
margin-left: auto; font-weight: 700; color: var(--accent);
font-variant-numeric: tabular-nums;
}
/* Why the control exists, in one line: a reader who meets a slider called
"base map strength" has no reason to guess it is the answer to the
restaurants crowding their road. */
/* A switch reads across the row like the sliders beside it, not stacked. */
.display-row-switch { justify-content: space-between; gap: 12px; }
.display-row-switch .switch { flex: none; }
.display-note {
margin: -2px 0 0; font-size: 10px; line-height: 1.35; color: var(--muted);
}
.display-reset {
margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 6px;
height: 28px; border-radius: 6px; border: 1px solid var(--line);
background: var(--surface); color: var(--ink-2); cursor: pointer;
font-size: 11.5px; font-weight: 600;
}
.display-reset:hover { border-color: var(--accent); color: var(--accent); }
.display-reset svg { width: 13px; height: 13px; }
/* ------------------------------------------------------------- panorama */
/* One eye per place a panorama was recorded. Centred on its own point, and
haloed in white so it reads on satellite imagery as well as on the scheme. */
.pano-eye {
width: 16px; height: 16px; margin: -8px 0 0 -8px;
color: var(--accent); cursor: pointer;
filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)
drop-shadow(0 1px 2px rgba(15, 23, 42, 0.45));
}
.pano-eye svg { display: block; width: 16px; height: 16px; }
/* A Yandex panorama plays over the map rather than in a window of its own:
the point of picking one is to see the same place from the ground. */
.map-pano {
position: absolute; z-index: 7; top: 68px;
left: calc(var(--m-layers) + 2 * var(--m-gap));
right: calc(var(--m-panel) + 2 * var(--m-gap));
height: min(52vh, 460px);
display: flex; flex-direction: column; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--m-radius);
background: var(--surface);
box-shadow: 0 8px 34px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.06);
}
.map-pano[hidden] { display: none; }
.map-pano-head {
flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px;
border-bottom: 1px solid var(--line);
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--accent);
}
.map-pano-head > span { flex: 1; min-width: 0; }
.map-pano-stage { flex: 1; min-height: 0; background: var(--page); }
/* ------------------------------------------------------------ responsive */
/* Below the golden-section breakpoint the panel would starve the canvas, so
it goes full height over it and the dock takes the whole width back. */
@media (max-width: 1200px) {
.map-shell { --m-panel: min(84vw, 344px); --m-layers: min(84vw, 304px); }
.map-dock { right: var(--m-gap); }
.map-find { width: min(400px, calc(100% - 2 * var(--m-layers) - 4 * var(--m-gap))); }
}
/* Narrow enough that two side panels plus a strip between them leaves nothing
for the map: the panels keep their width and fold, and everything along the
bottom takes the whole width back and runs under them. */
@media (max-width: 900px) {
.map-shell { --m-layers: min(86vw, 300px); --m-panel: min(86vw, 300px); }
.map-dock,
.map-shell.layers-closed .map-dock { left: var(--m-gap); right: var(--m-gap); }
.map-toast,
.map-shell.layers-closed .map-toast { left: var(--m-gap); }
}
@media (max-width: 720px) {
.map-shell { --m-gap: 8px; }
.map-metrics { gap: 13px; padding: 7px 13px; }
.map-metric > b { font-size: 15px; }
}
/* Road card page: all data for one road beside its own geometry. */
.road-card-grid {
display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 14px; align-items: start;
}
.road-card-main { min-width: 0; }
.road-card-side { position: sticky; top: 74px; min-width: 0; }
.road-card-map { height: max(46vh, 360px); border-radius: 0 0 8px 8px; overflow: hidden; z-index: 0; }
.mt-14 { margin-top: 14px; }
.kv-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0 18px; padding: 12px 18px 18px;
}
.kv { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv > span { font-size: 11.5px; color: var(--muted); }
.kv > b { font-size: 13.5px; font-weight: 600; }
.el-group + .el-group { border-top: 1px solid var(--line); }
.el-group-head { display: flex; align-items: center; gap: 9px; padding: 14px 18px 6px; }
.el-group-icon { width: 20px; height: 20px; object-fit: contain; flex: none; }
.el-group-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; }
@media (max-width: 1000px) {
.road-card-grid { grid-template-columns: 1fr; }
.road-card-side { position: static; }
.road-card-map { height: 320px; }
}
/* ==========================================================================
Load-capacity calculator (gov.calculator + its two settings registries)
========================================================================== */
/* ---------- shared sub-navigation ---------- */
.calc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.calc-tabs a {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 550;
text-decoration: none; transition: border-color .15s, color .15s, background .15s;
}
.calc-tabs a svg { width: 16px; height: 16px; flex: none; }
.calc-tabs a:hover { border-color: var(--line-strong); color: var(--ink); }
.calc-tabs a.active {
background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
/* ---------- workspace layout ---------- */
.calc-shell { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 16px; align-items: start; }
.calc-result { display: grid; gap: 16px; transition: opacity .15s; }
.calc-result[aria-busy="true"] { opacity: .55; }
@media (max-width: 1080px) { .calc-shell { grid-template-columns: 1fr; } }
/* ---------- vehicle picker ---------- */
.calc-params { padding-bottom: 18px; }
.calc-group-label {
margin: 16px 18px 8px; font-size: 11px; font-weight: 650; letter-spacing: .04em;
text-transform: uppercase; color: var(--muted);
}
.calc-types { display: grid; gap: 8px; padding: 0 18px; }
.calc-type {
display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px;
padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.calc-type:hover { border-color: var(--line-strong); background: var(--neutral-soft); }
/* Visually hidden but still focusable and exposed to assistive tech. */
.calc-type input {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.calc-type:has(input:checked), .calc-type.is-selected {
border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent);
}
.calc-type:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ct-figure { display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.ct-figure svg, .ct-figure img { width: 100%; max-height: 34px; object-fit: contain; }
.calc-type:has(input:checked) .ct-figure, .calc-type.is-selected .ct-figure { color: var(--accent); }
.ct-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-name { margin: 0; font-size: 13.5px; font-weight: 600; }
.ct-meta { font-size: 11.5px; color: var(--muted); }
.ct-axles {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-width: 38px; padding: 4px 6px; border-radius: 6px;
background: var(--neutral-soft); color: var(--neutral-ink); font-size: 15px; font-weight: 700; line-height: 1;
}
.ct-axles i { font-style: normal; font-size: 9.5px; font-weight: 600; text-transform: uppercase; opacity: .75; }
.calc-type:has(input:checked) .ct-axles,
.calc-type.is-selected .ct-axles { background: var(--accent); color: var(--accent-ink); }
/* ---------- mass input ---------- */
.calc-mass { padding: 18px 18px 0; }
.cm-row { display: flex; align-items: center; gap: 0; }
.cm-row input {
flex: 1; min-width: 0; border-radius: 7px 0 0 7px; border-right: 0;
font-size: 20px; font-weight: 650; padding: 10px 12px;
}
.cm-unit {
padding: 11px 14px; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 7px 7px 0;
background: var(--neutral-soft); color: var(--muted); font-size: 12.5px; white-space: nowrap;
}
.cm-range { width: 100%; margin: 12px 0 2px; accent-color: var(--accent); }
.calc-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px 0; }
.calc-legal { margin: 14px 18px 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.calc-legal a { color: var(--accent); }
/* ---------- result ---------- */
.calc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 14px 18px 0; }
.calc-kpi {
display: flex; flex-direction: column; gap: 6px;
padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--page);
}
.calc-kpi .lb { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.calc-kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.calc-kpi .v i { font-style: normal; margin-left: 4px; font-size: 13px; font-weight: 550; color: var(--muted); }
.calc-kpi.is-hero { background: var(--accent-soft); border-color: var(--accent); }
.calc-kpi.is-hero .v { color: var(--accent); }
.calc-kpi.is-hero .lb { color: var(--accent); opacity: .85; }
.calc-usage { padding: 16px 18px 0; }
.cu-track { height: 10px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.cu-fill { height: 100%; border-radius: 999px; background: var(--ink-2); transition: width .2s ease; }
.cu-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.cu-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cu-sw { width: 10px; height: 10px; border-radius: 3px; }
.cu-sw-veh { background: var(--ink-2); }
.cu-sw-cargo { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
/* ---------- axle diagram ---------- */
.axle-diagram { margin: 4px 0 0; padding: 10px 18px 16px; overflow-x: auto; }
.axle-diagram svg { display: block; width: 100%; max-height: 190px; color: var(--ink-2); }
.axle-diagram figcaption { margin-top: 2px; text-align: center; font-size: 11.5px; color: var(--muted); }
.ax-cab { fill: var(--accent); opacity: .85; }
.ax-body { fill: var(--accent); opacity: .18; stroke: var(--accent); stroke-width: 1.5; }
.ax-chassis { fill: var(--ink-2); opacity: .55; }
.ax-tyre { fill: var(--ink); opacity: .78; }
.ax-hub { fill: var(--surface); }
.ax-load { fill: var(--ink); font-size: 13px; font-weight: 650; }
.calc-note { margin: 0; padding: 0 18px 16px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
/* ---------- cargo cards ---------- */
.cargo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 14px 18px 4px; }
.cargo-card {
display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--page);
}
.cg-img { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; flex: none; }
.cg-img-ph {
display: flex; align-items: center; justify-content: center;
background: var(--neutral-soft); color: var(--muted);
}
.cg-img-ph svg { width: 22px; height: 22px; }
.cg-body { min-width: 0; }
.cg-name { margin: 0; font-size: 13.5px; font-weight: 600; }
.cg-density { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }
.cg-vol { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.cg-vol strong { font-size: 18px; font-weight: 700; color: var(--accent); }
.cg-vol span { font-size: 11px; color: var(--muted); }
/* ---------- empty states ---------- */
.calc-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; text-align: center; }
.calc-empty > svg { width: 46px; height: 46px; color: var(--muted); opacity: .6; }
.calc-empty .ce-title { margin: 0; font-size: 14px; font-weight: 600; }
.calc-empty .ce-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.calc-empty.is-inline { padding: 28px 18px; }
/* ---------- settings tables ---------- */
.code-chip {
padding: 2px 8px; border-radius: 4px; background: var(--neutral-soft);
color: var(--neutral-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}
.row-thumb { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); }
/* An element category's icon is a drawing on a 24px grid, not a photograph:
it is padded and fitted whole rather than cropped to fill, or the glyph's
own margins are cut off and every icon reads as a different size. */
.row-thumb-icon { object-fit: contain; padding: 4px; background: var(--soft); }
.row-thumb-empty { display: inline-block; background: var(--soft); }
.muted-dash { color: var(--muted); }
.axle-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.axle-badges i {
font-style: normal; padding: 2px 7px; border-radius: 4px;
background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 650;
}
/* ---------- axle repeater (vehicle type form) ---------- */
.axle-repeater { display: grid; gap: 8px; margin-top: 4px; }
.axle-row { display: grid; grid-template-columns: 28px 1fr auto 30px; align-items: center; gap: 8px; }
.ar-no {
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 6px;
background: var(--neutral-soft); color: var(--neutral-ink); font-size: 12px; font-weight: 650;
}
.ar-unit { font-size: 12px; color: var(--muted); }
.ar-del {
width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line);
color: var(--muted); font-size: 17px; line-height: 1;
}
.ar-del:hover { border-color: var(--crit); color: var(--crit); }
.axle-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.axle-sum { font-size: 12.5px; color: var(--muted); }
/* ==========================================================================
GeoJSON export: the filter form beside the counts it produces
========================================================================== */
.export-grid {
display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
gap: 14px; align-items: start;
}
.export-form { min-width: 0; }
.export-side { position: sticky; top: 74px; min-width: 0; }
.export-intro { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); }
.export-form .check-pills + .hint { margin-bottom: 16px; }
.export-pill-tools { display: flex; gap: 8px; margin: 10px 0 16px; }
.export-switches { flex-direction: column; gap: 12px; }
.export-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.export-actions button[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 1000px) {
.export-grid { grid-template-columns: 1fr; }
.export-side { position: static; }
}
/* ---------- print: the result panel only ---------- */
@media print {
.gov-sidebar, .topbar, .calc-tabs, .calc-params, .calc-actions, .pager { display: none !important; }
.gov-main, .content, .content-full { display: block; padding: 0; }
.calc-shell { display: block; }
.card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
.cargo-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Topbar bell. The count sits on the icon rather than beside it, so the
button keeps the same width whether or not anything is waiting. */
.tb-bell { position: relative; text-decoration: none; }
.tb-bell-dot {
position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
/* A count badge, so a pill rather than a corner radius: it has to stay round
at one digit and stretch at three. Left out of the radius reduction for
that reason. */
padding: 0 4px; border-radius: 99px;
background: var(--crit); color: #fff;
font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
/* Track-list board. Columns scroll sideways as a group rather than the page:
a request with seven stages must not widen the card it sits in. */
.kanban { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 12px; }
.kanban-col {
flex: 0 0 210px; background: var(--page);
border: 1px solid var(--line); border-radius: 7px; padding: 8px;
}
.kanban-head {
display: flex; align-items: center; justify-content: space-between;
font-size: 11.5px; font-weight: 600; color: var(--ink-2);
margin-bottom: 8px; text-transform: uppercase; letter-spacing: .02em;
}
.kanban-card {
background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
padding: 8px 9px; margin-bottom: 7px;
}
.kanban-card-t { font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.kanban-card-m { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
.kanban-card-s { font-size: 11px; color: var(--muted); }
.kanban-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 10px 0; }
/* Per-stage moves sit inside a table cell, so each form stays on one line. */
.stage-actions { display: flex; flex-direction: column; gap: 5px; }
.stage-actions form { display: flex; align-items: center; gap: 5px; }
.stage-actions input[type=number] { width: 62px; }
.stage-actions input[type=text] { min-width: 140px; }
.stage-add { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
/* ---- dashboard ------------------------------------------------------ */
/* ---------------------------------------------------------------------------
Dashboard charts and the list behind a counter
One measure per chart, so every bar is the same single hue. Where a row
carries a status the colour rides a dot beside its label — a bar coloured by
status would put good and satisfactory two ΔE apart for a colourblind
reader, and the dot plus the label never does.
--------------------------------------------------------------------------- */
.dash-charts {
display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
gap: 14px; margin-bottom: 14px;
}
.viz .card-h { margin-bottom: 4px; }
.viz-bars { list-style: none; margin: 0; padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 9px; }
.viz-bar {
display: grid; grid-template-columns: minmax(0, 9rem) 1fr auto;
align-items: center; gap: 10px; border-radius: 5px;
}
.viz-bar:hover { background: var(--page); }
/* A bar that has a list behind it says so the way the counters do. */
.viz-bar-open { cursor: pointer; }
.viz-bar-open:hover .viz-bar-key { color: var(--ink); }
.viz-bar-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.viz-bar-key {
display: flex; align-items: center; gap: 6px; min-width: 0;
font-size: 12px; color: var(--ink-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Identity beside the text, never in it: a status hue is unreadable as type. */
.viz-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.viz-dot-ok { background: var(--ok); }
.viz-dot-warn { background: var(--warn); }
.viz-dot-crit { background: var(--crit); }
/* The track is one step off the surface and stays recessive; the fill is
square where it leaves the baseline and rounded at the data end. */
.viz-bar-track { height: 14px; border-radius: 4px; background: var(--neutral-soft); overflow: hidden; }
.viz-bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--accent); }
.viz-bar-val {
font-size: 12.5px; font-weight: 700; color: var(--ink);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.viz-empty { margin: 0; padding: 4px 18px 20px; font-size: 12.5px; color: var(--muted); }
/* A counter that has a list behind it says so by being reachable. */
.kpi-open { cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.kpi-open:hover { border-color: var(--accent); }
.kpi-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-modal-box {
width: min(880px, calc(100vw - 32px)); max-height: min(80vh, 720px);
display: flex; flex-direction: column; padding: 16px 18px 14px;
}
.dash-modal-head { display: flex; align-items: center; gap: 10px; flex: none; }
.dash-modal-head .gov-modal-title { flex: 1; min-width: 0; margin: 0; }
.dash-modal-body { flex: 1; min-height: 0; overflow: auto; margin-top: 12px; }
.dash-modal-table { width: 100%; }
.dash-modal-table th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
/* The footer carries the pager, so it lays out as a row rather than a line
of text: the count on the left, the arrows and the field on the right. */
.dash-modal-foot {
flex: none; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
font-size: 11.5px; color: var(--muted);
}
.dash-modal-foot:empty { display: none; }
.dash-modal-count { white-space: nowrap; }
.dash-modal-foot nav { display: flex; gap: 4px; }
.dash-modal-foot a, .dash-modal-foot .pg-item {
display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px;
border-radius: 4px; border: 1px solid var(--line); font-size: 12.5px;
color: var(--ink-2); text-decoration: none;
}
.dash-modal-foot a:hover { background: var(--page); color: var(--ink); }
.dash-modal-foot .pg-dis { opacity: 0.4; }
.dash-crumbs {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 13px; margin-bottom: 12px; color: var(--ink-2);
}
.dash-crumbs a { color: var(--accent); text-decoration: none; }
.dash-crumbs a:hover { text-decoration: underline; }
.dash-crumbs .sep { color: var(--muted); }
.dash-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.dash-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: dashPulse 2.4s ease-in-out infinite; }
@keyframes dashPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.dash-bar {
display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
padding: 12px 14px; margin-bottom: 14px;
}
.dash-bar .field { margin: 0; min-width: 150px; }
.dash-bar-spacer { flex: 1 1 auto; }
/* Two columns on a wide screen, one on a narrow one. The left column carries
the wide charts, so it gets the larger share. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.dash-col { min-width: 0; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
/* Region bars double as drill-down links. */
a.bar-row { text-decoration: none; color: inherit; border-radius: 6px; }
a.bar-row:hover { background: var(--page); }
.bar-fill.tone-ok { background: var(--ok); }
.bar-fill.tone-warn { background: var(--warn); }
.bar-fill.tone-crit { background: var(--crit); }
.dash-map { height: 340px; border-radius: 7px; overflow: hidden; margin-bottom: 12px; }
/* A number that moved during a poll flashes once rather than the page
redrawing under the reader. */
.metric-bumped { animation: metricBump 1.1s ease-out; }
@keyframes metricBump {
0% { background: var(--accent-soft); }
100% { background: transparent; }
}
/* ---------------------------------------------------------------------------
INTERNATIONAL NETWORK MAP
The trunk-network screen. It reuses the map workspace's shell, tools and
basemap card wholesale; what is new is the list of routes on the right and
the numbered badge written along each line.
--------------------------------------------------------------------------- */
/* The workspace's panel card is a row, because the workspace builds a rail
of section tabs down its outer edge and the chosen section takes the rest
of the card. This one holds no rail — a heading and one list, which stack.
Said on the card rather than asked of its contents, so the card that has a
rail keeps the row even where `:has()` is not understood: left as a row,
the heading and the list sat side by side and the list was squeezed to
nothing, which is a panel that looks empty while holding fifteen routes. */
.gm-card { flex-direction: column; }
.gm-head {
flex: none; padding: 13px 14px 11px; border-bottom: 1px solid var(--line);
}
.gm-head h1 {
margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--ink);
}
.gm-head p {
margin: 5px 0 0; display: flex; align-items: baseline; gap: 5px;
font-size: 11.5px; color: var(--muted);
}
.gm-head p b { font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gm-head p i { font-style: normal; color: var(--line); }
.gm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-item {
display: flex; align-items: stretch; gap: 2px;
border-radius: 7px; transition: background 0.12s ease;
}
.gm-item:hover { background: var(--page); }
/* The chosen route, which is also the one drawn over the others. */
.gm-item.is-on { background: var(--accent-soft); }
.gm-item.is-off .gm-row { opacity: 0.42; }
.gm-row {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
padding: 7px 8px; border: 0; border-radius: 7px; background: none;
text-align: left; cursor: pointer; color: inherit;
}
/* The colour the route is drawn in: the whole legend, one row at a time. */
.gm-row > i { width: 4px; align-self: stretch; border-radius: 99px; flex: none; }
.gm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-nm { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.gm-nm b {
flex: none; font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
color: var(--ink); font-variant-numeric: tabular-nums;
}
.gm-nm span {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 12px; color: var(--ink-2);
}
.gm-sub {
display: flex; align-items: baseline; gap: 5px;
font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.gm-sub i { font-style: normal; color: var(--line); }
.gm-eye {
width: 30px; flex: none; display: grid; place-items: center;
border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer;
}
.gm-eye:hover { background: var(--surface); color: var(--ink-2); }
.gm-eye svg { width: 15px; height: 15px; }
.gm-eye .gm-eye-off,
.gm-eye[aria-pressed="false"] .gm-eye-on { display: none; }
.gm-eye[aria-pressed="false"] .gm-eye-off { display: block; }
.gm-empty { padding: 16px 10px; font-size: 12px; color: var(--muted); text-align: center; }
/* --------------------------------------------------------- the road number */
/* Written along the line rather than beside it, the way a road atlas prints a
route shield. Which halves are drawn is the filter's decision, made by
handing the map a different layout — so nothing here has to hide anything.
The route's colour arrives inline, per label, because fifteen routes share
these rules. Never interactive: a click on a label belongs to the line
underneath it.
Painted on the map's own tiles rather than on a panel surface, so it is
opaque by design instead of following the panel's theme. */
.gm-label {
/* Yandex drops the layout element at the anchor point and leaves the
centring to it — `.map-pin` does that with negative margins, which only
works at a fixed size. A label is as wide as its text, so it translates
itself back by half of whatever it turned out to be. */
width: max-content; transform: translate(-50%, -50%);
display: flex; flex-direction: column; align-items: center; gap: 2px;
pointer-events: none; user-select: none; white-space: nowrap;
}
.gm-label b {
padding: 2px 7px; border-radius: 4px;
background: #1d6fd0; color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 5px rgba(15, 23, 42, 0.4);
font: 700 11px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.gm-label i {
max-width: 240px; overflow: hidden; text-overflow: ellipsis;
padding: 1px 7px; border-radius: 4px;
/* The route's colour down the edge, so the name still says which line it
belongs to in the mode where no numbered badge is drawn above it. */
border-left: 3px solid #1d6fd0;
background: rgba(255, 255, 255, 0.94); color: #17233a;
font: 600 10px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; font-style: normal;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
}
/* ---------- API key, shown once ----------
The panel that carries a freshly minted key. Deliberately the loudest thing
on the screen: the string exists for this one response and there is no way
to produce it again, so an operator who scrolls past it has lost it. */
.api-secret {
border-left: 3px solid var(--accent);
background: var(--accent-soft);
margin-bottom: 14px;
}
.api-secret .as-head { display: flex; align-items: center; gap: 10px; color: var(--accent); }
.api-secret .as-title { font-weight: 700; font-size: 14px; }
.api-secret .as-name { font-size: 12px; color: var(--ink-2); margin-top: 1px; }
.api-secret .as-value {
display: flex; align-items: center; gap: 10px; margin-top: 12px;
padding: 10px 12px; border-radius: 6px;
background: var(--surface); border: 1px solid var(--line);
}
.api-secret .as-value code {
flex: 1; min-width: 0; font-size: 13px; letter-spacing: 0.01em;
/* The key is one unbroken token; wrapping it is what lets it be read at
all on a narrow screen, and it is selected by the button, not by hand. */
word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.api-secret .as-value .btn-ghost { flex: none; }
.api-secret .as-value .btn-ghost.is-copied { color: var(--ok-ink); border-color: var(--ok-ink); }
.api-secret .as-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
/* Scope checkboxes: the same button-group kit as everywhere else, but the
groups are labelled, because "what may this key read" is read down the
labels rather than across forty identical pills. */
.scope-group + .scope-group { margin-top: 14px; }
.scope-group > .sg-label {
display: block; margin-bottom: 6px;
font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted);
}
/* ---------- Road sign catalogue ----------
The picture is the column a reader actually scans, so it leads the row and
is given a fixed width: forty signs of different proportions would otherwise
make every row a different height. */
.gov-table th.sign-col, .gov-table td.sign-col { width: 76px; }
.sign-thumb {
display: block; width: 56px; height: 56px;
object-fit: contain;
/* A white plate, because half the catalogue is white-field artwork that
would vanish into a dark table. */
background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px;
}
/* A road sign on the map: its own artwork, not a coloured dot. The white plate
is load-bearing — half the GOST catalogue is white-field artwork that would
otherwise dissolve into a satellite basemap. */
.map-sign {
width: 32px; height: 32px; margin: -16px 0 0 -16px;
display: grid; place-items: center;
background: #fff; border-radius: 5px; padding: 2px;
box-shadow: 0 1px 4px rgba(5, 12, 25, 0.45);
}
.map-sign img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The section's switch sits on its own line above the hint. */
.map-sec-body > .switch { margin: 2px 0 8px; }
/* A counted cluster of signs. Three sizes, so the distribution is read before
any of the numbers are: where the network is dense is the question a reader
opening this layer actually has. */
.map-sign-cluster {
display: grid; place-items: center;
border-radius: 50%; color: #fff; font-weight: 700;
font-variant-numeric: tabular-nums; cursor: pointer;
background: var(--accent);
border: 2px solid rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 8px rgba(5, 12, 25, 0.45);
}
.map-sign-cluster.sm { width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 11px; }
.map-sign-cluster.md { width: 38px; height: 38px; margin: -19px 0 0 -19px; font-size: 12.5px; }
.map-sign-cluster.lg { width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 13.5px; }
/* Where the signs are, beside the map. A map can only draw what is on screen;
this is the part that says the thing you want is somewhere else. */
.map-areas { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.map-areas-h {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.map-area {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 6px 8px; border-radius: 5px; text-align: left;
background: transparent; color: var(--ink); font-size: 12.5px; cursor: pointer;
}
.map-area:hover { background: var(--page); }
.map-area .ma-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-area .ma-name i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.map-area .ma-n {
flex: none; font-variant-numeric: tabular-nums; font-weight: 650;
color: var(--accent); background: var(--accent-soft);
border-radius: 99px; padding: 1px 8px; font-size: 11.5px;
}
/* ---------- Rich-text editor (Quill, CMS forms) ---------- */
.rich-text { border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); overflow: hidden; }
.rich-text.is-invalid { border-color: var(--crit); }
.rich-text .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--line); background: var(--page); }
.rich-text .ql-container.ql-snow { border: 0; font-family: inherit; font-size: 14px; }
.rich-text .ql-editor { min-height: 280px; color: var(--ink); line-height: 1.6; }
.rich-text .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.rich-text .ql-snow .ql-stroke { stroke: var(--ink-2); }
.rich-text .ql-snow .ql-fill { fill: var(--ink-2); }
.rich-text .ql-snow .ql-picker { color: var(--ink-2); }
.rich-text .ql-snow .ql-picker-options { background: var(--surface); border-color: var(--line); }
.rich-text .ql-snow .ql-tooltip { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.rich-text .ql-snow .ql-tooltip input[type=text] { background: var(--page); color: var(--ink); border-color: var(--line-strong); }
.rich-text .ql-editor img { max-width: 100%; height: auto; border-radius: 6px; }
.rich-text .ql-editor h2 { font-size: 1.4em; } .rich-text .ql-editor h3 { font-size: 1.2em; } .rich-text .ql-editor h4 { font-size: 1.05em; }
.row-thumb-wide { width: 72px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: var(--page); }
.badge-draft { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--warn-soft); color: var(--warn-ink); }
.badge-live { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--ok-soft); color: var(--ok-ink); }
.badge-muted { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--neutral-soft); color: var(--neutral-ink); }
.menu-tree .child td:first-child { padding-left: 36px; }
.menu-tree .child td:first-child::before { content: '↳ '; color: var(--muted); }
.msg-body { white-space: pre-wrap; line-height: 1.6; color: var(--ink); }
/* ---------------------------------------------------------------------------
The external road-condition bank's sign layer.
Its road list runs to three hundred rows, so it scrolls inside its own
section instead of pushing every other filter off the panel.
--------------------------------------------------------------------------- */
.map-abdd-fields,
/* The repair history's own filter column — the same stack, named for
itself so a change to one layer's panel cannot reach the other. */
.map-works-fields { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.map-abdd-roads { max-height: 236px; overflow-y: auto; margin-top: 4px; }
.map-area[aria-pressed="true"] { background: var(--accent-soft); font-weight: 650; }
.map-area .ma-name b { font-weight: 700; }
/* One sign's card, opened from its pin. The artwork is the heading: a reader
recognises the picture before they read the code beside it. */
.map-abdd-card { display: flex; gap: 10px; align-items: flex-start; max-width: 300px; }
.map-abdd-card img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.map-abdd-card dl { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 12px; }
.map-abdd-card dt { color: var(--muted); }
.map-abdd-card dd { margin: 0; }
.map-abdd-card .ac-src { margin-top: 6px; font-size: 10.5px; color: var(--muted); }
/* A surveyed sign with no picture to draw — its GOST code matches no
catalogue entry, or the artwork is missing or failed to load. It is still a
sign standing at a real kilometre, so it keeps its place on the road as a
plain circle instead of leaving a broken-image glyph there. */
.map-sign-dot {
width: 16px; height: 16px; border-radius: 50%;
background: var(--accent); border: 2px solid #fff;
box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
padding: 0;
}
/* ===========================================================================
Diagnostics deck — the camera car's film.
The bottom of the screen rather than a window of its own, because the map
above it is the index: the marker moving along the road is the scrubber, and
the two are only worth anything seen together. Everything on the bar is one
row — transport, seek, speed, reading — so the eye crosses it once.
=========================================================================== */
.video-deck {
/* A card standing clear of the bottom edge, and framed on all four sides.
It used to be the floor of the screen — edge to edge, flush on the
bottom, an edge along the top and nothing anywhere else. What that
looked like was not a deck but a deck with its bottom cut off: the
controls ran into the edge of the screen and the film read as the top
half of something. It is a block now, the way the tool strip beside it
became one, with the map running underneath it on every side. */
position: absolute; z-index: 8;
left: var(--m-gap); right: var(--m-gap); bottom: var(--m-gap);
display: flex; flex-direction: column;
border: 1px solid var(--line);
border-radius: var(--m-radius);
background: var(--m-glass);
backdrop-filter: blur(16px) saturate(1.45);
-webkit-backdrop-filter: blur(16px) saturate(1.45);
box-shadow: 0 18px 54px rgba(15, 23, 42, 0.22), 0 1px 2px rgba(15, 23, 42, 0.08);
overflow: hidden;
animation: vd-rise 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes vd-rise { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .video-deck { animation: none; } }
/* With the film open, everything that floats over the map clears it: the dock
would be underneath it, and the two side columns would be cut off by it. */
.map-shell:has(.video-deck:not([hidden])) .map-dock {
bottom: calc(var(--vd-height) + 2 * var(--m-gap));
}
/* The tools go on working over the film — zooming and switching the base map
is exactly what a reader does while watching it. The network's two figures
are what stands down, because they are a readout and the film is one too. */
.map-shell:has(.video-deck:not([hidden])) .map-dock .dock-card { display: none; }
.map-shell:has(.video-deck:not([hidden])) .map-panel,
.map-shell:has(.video-deck:not([hidden])) .map-layers {
bottom: calc(var(--vd-height) + 3 * var(--m-gap) + var(--m-dock-real, var(--m-dock-h)));
}
/* ---------- the bar ---------- */
.vd-bar {
display: flex; align-items: center; gap: 14px;
padding: 9px 12px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
}
.vd-transport { display: flex; align-items: center; gap: 6px; }
.vd-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; flex: none;
border: 1px solid var(--line-strong); border-radius: 7px;
background: var(--surface); color: var(--ink-2); cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.vd-btn svg { width: 17px; height: 17px; }
.vd-btn:hover { border-color: var(--accent); color: var(--accent); }
.vd-btn:disabled { opacity: 0.4; cursor: default; border-color: var(--line); color: var(--muted); }
/* The one control the hand goes to without looking. */
.vd-play {
width: 40px; height: 40px; border-radius: 8px;
background: var(--accent); border-color: var(--accent); color: #fff;
box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent);
}
.vd-play:hover { background: var(--accent); border-color: var(--accent); color: #fff; filter: brightness(1.06); }
.vd-play svg { width: 19px; height: 19px; }
.vd-seek { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 10px; }
.vd-seek input[type="range"] {
flex: 1; min-width: 0; height: 22px; -webkit-appearance: none; appearance: none;
background: transparent; cursor: pointer;
}
.vd-seek input[type="range"]::-webkit-slider-runnable-track {
height: 5px; border-radius: 99px;
/* Filled to the played position, so the track reads as progress rather
than as a setting. */
background: linear-gradient(90deg, var(--accent) var(--vd-progress, 0%), var(--line-strong) var(--vd-progress, 0%));
}
.vd-seek input[type="range"]::-moz-range-track { height: 5px; border-radius: 99px; background: var(--line-strong); }
.vd-seek input[type="range"]::-moz-range-progress { height: 5px; border-radius: 99px; background: var(--accent); }
.vd-seek input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 15px; height: 15px; margin-top: -5px; border-radius: 50%;
background: var(--surface); border: 3px solid var(--accent);
box-shadow: 0 1px 5px rgba(15, 23, 42, 0.3);
}
.vd-seek input[type="range"]::-moz-range-thumb {
width: 15px; height: 15px; border-radius: 50%;
background: var(--surface); border: 3px solid var(--accent);
}
.vd-count {
flex: none; font-size: 11.5px; font-variant-numeric: tabular-nums;
color: var(--muted); min-width: 84px; text-align: right;
}
.vd-speed { display: flex; gap: 2px; padding: 3px; border-radius: 7px; background: var(--page); flex: none; }
.vd-rate {
border: 0; background: transparent; cursor: pointer;
padding: 4px 9px; border-radius: 6px;
font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums;
color: var(--muted);
}
.vd-rate:hover { color: var(--ink); }
.vd-rate[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
/* The three readings the register itself names: address, latitude, longitude.
Tabular figures and a fixed width, so they do not shuffle as the car moves. */
.vd-readout { display: flex; gap: 16px; margin: 0; flex: none; }
.vd-readout > div { display: flex; flex-direction: column; gap: 1px; min-width: 88px; }
.vd-readout dt {
font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.vd-readout dd {
margin: 0; font-size: 13.5px; font-weight: 650; color: var(--ink);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* A coordinate read off a screen is a coordinate typed wrong, so the two GPS
figures are buttons that put themselves on the clipboard. */
.vd-copy {
border: 0; padding: 0; background: none; cursor: copy; text-align: left;
font: inherit; color: inherit;
border-bottom: 1px dashed var(--line-strong);
}
.vd-copy:hover { color: var(--accent); border-bottom-color: var(--accent); }
.vd-copy.is-copied { color: var(--ok-ink, var(--accent)); border-bottom-color: currentColor; }
.vd-where {
flex: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 12px; color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line);
}
.vd-where b { color: var(--ink); font-weight: 650; }
.vd-close { margin-left: auto; }
/* ---------- the four frames ---------- */
/* The four frames are **one** picture.
They are not four cameras looking at four things: they are a single 180°
view the rig cut into quarters, so any gap between them is a gap torn
through the middle of the road. No margin, no border between them, no
rounded corners except at the two outside ends — the strip has to read as
one continuous photograph, because that is what it is. */
.vd-strip {
flex: 1; min-height: 0;
display: grid; grid-template-columns: repeat(var(--vd-cams, 4), minmax(0, 1fr));
gap: 0; padding: 0;
background: #0b1119;
}
.vd-cam {
position: relative; min-width: 0; overflow: hidden;
background: #0b1119;
display: flex; align-items: center; justify-content: center;
/* carries a 40px side margin from the user agent, which put
eighty pixels of nothing through the middle of a continuous road. */
margin: 0;
}
.vd-cam img {
width: 100%; height: 100%; object-fit: cover; display: block;
/* The next frame replaces this one; a transition would smear the road. */
transition: none;
}
.vd-cam.is-empty img { opacity: 0; }
/* Which quarter is which still matters to somebody reading a defect, but not
enough to cut the picture into four all the time. It shows on hover. */
.vd-cam-label {
position: absolute; left: 8px; top: 8px; z-index: 2;
padding: 2px 8px; border-radius: 99px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: #fff; background: rgba(9, 14, 24, 0.62);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
.vd-strip:hover .vd-cam-label { opacity: 1; }
.vd-cam-miss {
position: absolute; inset: 0; display: none;
align-items: center; justify-content: center;
font-size: 11.5px; color: rgba(255, 255, 255, 0.62);
}
.vd-cam.is-empty .vd-cam-miss { display: flex; }
/* The film is wide before it is tall: on a short screen the frames shrink
rather than the bar, because the bar is where the controls are. A variable,
so the panel and the tool column know how far to stop short of it. */
.map-shell { --vd-height: clamp(212px, 33vh, 372px); }
.video-deck { height: var(--vd-height); }
/* A class selector outranks the user agent's `[hidden] { display: none }`, so
`display: flex` above was keeping the deck on screen with nothing in it
whenever it was hidden. The same trap as the play glyph. */
.video-deck[hidden] { display: none; }
@media (max-width: 1180px) {
.vd-readout > div:nth-child(n + 3) { display: none; }
.vd-where { display: none; }
}
@media (max-width: 900px) {
.map-shell { --vd-height: clamp(180px, 42vh, 320px); }
.vd-readout { display: none; }
}
/* The car, walking the road while the film plays. A pulse rather than a pin:
it is not a place you can click, it is where you are. */
.map-car { position: relative; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.map-car i {
position: absolute; inset: 7px; border-radius: 50%;
background: var(--accent); border: 2.5px solid #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.45);
}
.map-car::before {
content: ''; position: absolute; inset: 0; border-radius: 50%;
background: color-mix(in srgb, var(--accent) 34%, transparent);
animation: car-pulse 1.6s ease-out infinite;
}
@keyframes car-pulse {
from { transform: scale(0.55); opacity: 0.9; }
to { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .map-car::before { animation: none; opacity: 0.35; } }
/* Which glyph the play button wears. Driven by a class, because `hidden` is a
property of HTMLElement and an