/* Backoffice kit of the picaz estate — THE canonical stylesheet.
   The convention (design project "Varys BO") lives in gibbon docs/bo-convention.md;
   where it states a number, that number wins: topbar 38px, table row 30px, body
   text 14.5px, cell padding 8px, block frame 2px with 1px lines inside, entity
   blocks in exactly two columns, zero radii anywhere. Tokens: gimli palette,
   Industry geometry. Distribution: gibbon/bo embed for Go apps (update = bump),
   a vendored copy with the gibbon version in this header for Python apps. */

/* Fonts are self-hosted (the backoffice must open with the outside network
   down): latin subsets only — Barlow has no cyrillic at all, russian data falls
   through to system-ui with or without the CDN. */
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/barlow-condensed-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/barlow-condensed-700.woff2") format("woff2");
}

:root {
  --bg: #ffffff; --surface: #f9fafb; --text: #111827; --divider: #e5e7eb;
  --n100: #f9fafb; --n200: #f3f4f6; --n300: #e5e7eb; --n400: #d1d5db;
  --n500: #9ca3af; --n600: #6b7280; --n700: #4b5563; --n800: #374151; --n900: #111827;
  --a50: #eff6ff; --a100: #dbeafe; --a300: #bfdbfe; --a: #2563eb; --a600: #1d4ed8; --a800: #1e40af;
  --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; /* health dot and error banners ONLY */
  --head: "Barlow Condensed", system-ui, sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rh: 30px;      /* table row */
  --fs: 14.5px;    /* body text */
  --shadow: 0 8px 24px rgba(17, 24, 39, .18);
}

* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--body); font-size: var(--fs); line-height: 1.45;
  display: flex; flex-direction: column; overflow: hidden;
}
a { color: var(--a); text-decoration: none }
a:hover { color: var(--a600); text-decoration: underline }
h1 { margin: 0; font-family: var(--head); font-size: 26px; letter-spacing: .04em; text-transform: uppercase; line-height: 1 }
pre { margin: 0; font-family: var(--mono); font-size: var(--fs); line-height: 1.55; white-space: pre-wrap; word-break: break-word }
details > summary { list-style: none; cursor: pointer }
details > summary::-webkit-details-marker { display: none }
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-thumb { background: var(--n300) }
::-webkit-scrollbar-track { background: transparent }
.mono { font-family: var(--mono); font-size: 13px; color: var(--n700) }
.muted { color: var(--n600) }
.spacer { flex: 1 }
.chev { opacity: .45; flex: none }

/* --- topbar (§2: mark · app+env · entity groups · uuid jump · health · bridge · avatar) --- */
.topbar {
  display: flex; align-items: center; gap: 10px; height: 38px; flex: none;
  padding: 0 10px; border-bottom: 1px solid var(--divider);
}
.brand { display: flex; align-items: center; gap: 7px; flex: none }
.brand .mark { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--a) }
.brand .name { font-family: var(--head); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; line-height: 1 }
.app { position: relative; flex: none }
.app > summary, .app > .chip { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid var(--divider); font-size: var(--fs) }
.app > summary:hover { background: var(--n200) }
.app .id { font-weight: 600 }
/* The company chip repeats the app chip's box on purpose — same height, same
   border: they are one pair, «какое приложение · чья компания». The name is not
   bold, unlike .app .id: it is the longer of the two and would otherwise pull
   the eye away from the app it qualifies. */
.company { position: relative; flex: none }
.company > summary, .company > .chip { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid var(--divider); font-size: var(--fs) }
.company > summary:hover { background: var(--n200) }
.company .co { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.env { padding: 0 5px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; background: var(--a50); color: var(--a800) }
.env.prod { background: var(--a); color: #fff }
.env.neutral { background: var(--n200); color: var(--n700) }
.menu {
  position: absolute; top: calc(100% + 3px); z-index: 70; min-width: 170px; padding: 4px 0;
  background: var(--bg); border: 1px solid var(--divider); box-shadow: var(--shadow);
}
.menu.left { left: 0 } .menu.right { right: 0; width: 250px }
.menu .cap { padding: 3px 10px 5px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--n600) }
.menu a, .menu .item { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: var(--fs); color: var(--text) }
.menu a:hover, .menu .item:hover { background: var(--a50); text-decoration: none }
.menu .item.on { font-weight: 600; background: var(--a50); color: var(--a800) }
.menu .sep { height: 1px; margin: 4px 0; background: var(--divider) }

/* No overflow here on purpose: the group dropdowns are absolutely positioned
   inside it, and a scroll container would clip them into invisibility — the
   neighbours would be unreachable. A bar with enough groups to need scrolling
   has to render its menus outside this box (position: fixed), not hide them. */
.groups { display: flex; align-items: center; gap: 2px; margin-left: 4px; min-width: 0 }
.group { position: relative; flex: none; display: flex; align-items: center }
.group > .label {
  display: flex; align-items: center; height: 28px; padding: 0 8px;
  white-space: nowrap; font-size: var(--fs); color: var(--text);
}
.group > details > summary { display: flex; align-items: center; height: 28px; padding: 0 3px }
.group:hover { background: var(--a50) }
.group > .label:hover { text-decoration: none }
.group.on { background: var(--a50) }
.group.on > .label { color: var(--a800) }
.group.on.primary > .label { font-weight: 600 }

.jump { position: relative; flex: 0 1 250px; min-width: 110px; margin-left: auto }
.jump input {
  width: 100%; height: 28px; padding: 0 8px 0 25px; font-family: var(--mono); font-size: 14px;
  color: var(--text); background: var(--n200); border: 1px solid var(--divider); border-radius: 0; outline: none;
}
.jump .ico { position: absolute; left: 7px; top: 6px; color: var(--n500); pointer-events: none }
.health {
  display: flex; align-items: center; gap: 5px; height: 27px; padding: 0 7px; flex: none;
  border: 1px solid var(--divider); font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--n700);
}
.health:hover { text-decoration: none }
.health .dot { width: 7px; height: 7px; background: var(--n400) }
.health .dot.green { background: var(--ok) } .health .dot.yellow { background: var(--warn) } .health .dot.red { background: var(--bad) }
.bridge {
  display: flex; align-items: center; gap: 5px; height: 27px; padding: 0 8px; flex: none;
  border: 1px solid var(--divider); font-size: 14px; font-weight: 600; color: var(--a);
}
.bridge:hover { background: var(--a50); text-decoration: none }
.who { position: relative; flex: none }
.who > summary { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 3px }
.who > summary:hover { background: var(--n200) }
.who .face {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--a); color: #fff; font-family: var(--head); font-size: 11px; letter-spacing: .02em;
}
.who .sub { padding: 7px 10px; border-bottom: 1px solid var(--divider) }
.who .tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--divider) }
.who form.signout button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 10px; cursor: pointer; text-align: left;
  font-family: var(--body); font-size: var(--fs); color: var(--text); background: none; border: none;
}
.who form.signout button:hover { background: var(--a50) }

/* --- page frame --- */
main { flex: 1; min-width: 0; overflow: auto; padding: 10px 12px 40px }
.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 14px }
.crumbs .route { font-family: var(--mono); font-size: 13px; color: var(--n600) }
.pagehead { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; flex-wrap: wrap }
.pagehead .count { font-family: var(--mono); font-size: 14px; color: var(--n600); padding-bottom: 2px }
.search { position: relative }
.search input {
  width: 210px; height: 30px; padding: 0 7px 0 24px; font-family: var(--body); font-size: var(--fs);
  background: var(--bg); border: 1px solid var(--divider); border-radius: 0; outline: none;
}
.search .ico { position: absolute; left: 6px; top: 7px; color: var(--n500); pointer-events: none }
.clearf { display: inline-flex; align-items: center; height: 30px; padding: 0 8px; font-size: 14px; color: var(--n600); white-space: nowrap }
.clearf:hover { background: var(--n200); color: var(--text); text-decoration: none }

/* banners: the page-level error and notice (§4 renders the same .err inside a
   modal). --ok/--warn/--bad colors live here and in the health dot, nowhere else. */
.err { padding: 5px 8px; border: 1px solid #fca5a5; background: #fef2f2; color: #b91c1c; font-size: var(--fs) }
.err b { font-weight: 600 }
.notice { padding: 5px 8px; border: 1px solid var(--a300); background: var(--a50); color: var(--a800); font-size: var(--fs) }

/* one primary per screen (§7) — solid fill is only ever this */
.btn {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; cursor: pointer;
  border: 1px solid var(--divider); background: var(--bg); color: var(--n700);
  font-family: var(--body); font-size: var(--fs); font-weight: 600; white-space: nowrap;
}
.btn:hover { background: var(--a50); color: var(--a800); text-decoration: none }
.btn.primary { background: var(--a); border-color: var(--a); color: #fff; letter-spacing: .02em }
.btn.primary:hover { background: var(--a600); color: #fff }
.btn.ghost { border-color: transparent }
.btn.ghost:hover { background: var(--n200); color: var(--text) }
/* the browser's default focus ring is rounded — the kit has no radii anywhere */
:focus-visible { outline: 2px solid var(--a); outline-offset: 0; border-radius: 0 }
.tag { display: inline-block; padding: 1px 6px; font-size: 12px; letter-spacing: .04em; background: var(--a50); color: var(--a800) }
.tag.off { background: var(--n200); color: var(--n700) }
.tag.bad { background: #fef2f2; color: #b91c1c }
.tag.outline { background: transparent; border: 1px solid var(--a); color: var(--a) }
.copy { display: inline-flex; color: var(--n500); opacity: .4; cursor: pointer; vertical-align: middle }
.copy:hover { opacity: 1; color: var(--a) }

/* --- blueprint frame: the Industry corner marks (§3a) --- */
.blueprint { position: relative; border: 1px solid var(--divider) }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: rgba(17, 24, 39, .55) }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100% }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px }
.blueprint > .corner.tl { top: -6px; left: -6px } .blueprint > .corner.tr { top: -6px; right: -6px }
.blueprint > .corner.bl { bottom: -6px; left: -6px } .blueprint > .corner.br { bottom: -6px; right: -6px }

/* --- table (§3): 2px frame, sticky head + sticky filter row --- */
.tframe { border: 2px solid var(--n300); background: var(--bg) }
.tscroll { overflow: auto }
table.t { width: 100%; border-collapse: collapse }
table.t th {
  position: sticky; top: 0; z-index: 3; height: 27px; padding: 0 8px; text-align: left; white-space: nowrap;
  background: var(--n200); border-bottom: 1px solid var(--divider);
  font-weight: 600; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--n700);
}
table.t th a { display: inline-flex; align-items: center; gap: 3px; color: inherit }
table.t th a:hover { color: var(--a); text-decoration: none }
table.t th .arrow { color: var(--a) }
table.t tr.filters th { top: 27px; z-index: 2; height: 19px; padding: 2px 4px; background: var(--n100) }
table.t tr.filters input, table.t tr.filters select {
  width: 100%; min-width: 64px; height: 24px; padding: 0 4px; color: var(--text); background: var(--bg);
  font-family: var(--body); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none;
  border: 1px solid var(--divider); border-radius: 0; outline: none;
}
table.t td {
  height: var(--rh); padding: 0 8px; font-size: var(--fs); white-space: nowrap;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--n200);
}
table.t tbody tr:hover { background: var(--a50) }
table.t tbody tr.click { cursor: pointer }
table.t td.link { color: var(--a); font-weight: 600 }
table.t td.mono { font-family: var(--mono); font-size: 13px; color: var(--n700) }
table.t td.num { font-family: var(--mono); font-size: 13px }
table.t td.muted { color: var(--n600) }
table.t td.acts { width: 52px; padding: 0 6px; text-align: right }
table.t td.empty, .empty { padding: 10px; font-size: 14px; color: var(--n600); white-space: normal }
.act { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 22px; color: var(--n500) }
.act:hover { color: var(--a); background: var(--a50); text-decoration: none }
.pager { display: flex; align-items: center; gap: 10px; margin-top: 7px; font-size: 14px; color: var(--n700) }
.pager .info { font-family: var(--mono); font-size: 13px }
.pager .step { display: inline-flex; align-items: center; height: 27px; padding: 0 9px; border: 1px solid var(--divider); color: var(--n700) }
.pager .step:hover { background: var(--a50); text-decoration: none }
.pager .step.dead { color: var(--n400); pointer-events: none }
.pager select { height: 27px; padding: 0 4px; font-family: var(--body); font-size: 14px; background: var(--bg); border: 1px solid var(--divider); border-radius: 0 }

/* --- entity page (§3a): exactly two columns of blocks, never auto-fit --- */
.ehead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 2px }
.eid { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-family: var(--mono); font-size: 14px; color: var(--n700) }
.tabs { display: flex; margin-bottom: 9px; border-bottom: 1px solid var(--divider) }
.tabs a {
  padding: 4px 12px; font-size: var(--fs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--n600); border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--text); text-decoration: none }
.tabs a.on { color: var(--text); border-bottom-color: var(--a) }
.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start }
.blocks .wide { grid-column: 1 / -1 }
.block { border: 2px solid var(--n300); background: var(--bg) }
.block > header {
  display: flex; align-items: center; gap: 9px; padding: 6px 10px;
  background: var(--n100); border-bottom: 2px solid var(--n300);
}
.block > header .title { font-family: var(--head); font-size: 17px; letter-spacing: .06em; text-transform: uppercase; line-height: 1 }
.block > header .meta { font-family: var(--mono); font-size: 12.5px; color: var(--n600) }
.block > header .btn { height: 27px; padding: 0 11px; font-size: 14px }
.props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; padding: 8px 10px }
.props.one { grid-template-columns: minmax(0, 1fr) }
.props .p { display: flex; align-items: baseline; gap: 8px; min-height: 26px; padding: 3px 0; border-bottom: 1px solid var(--n200) }
.props .p .k { width: 96px; flex: none; font-size: 13px; color: var(--n600) }
/* 96px is the convention's label column; russian labels need more before they
   collide with the value, so a surface opts in rather than each row guessing. */
.props.widek .p .k { width: 150px }
.props .p .v { flex: 1; min-width: 0; font-family: var(--mono); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.props .p .v.wrap { white-space: normal; word-break: break-word }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 10px }
.tile { border: 1px solid var(--divider); background: var(--n100) }
.tile:hover { border-color: var(--a) }
.tile .shot { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden }
.tile .shot img { width: 100%; height: 100%; object-fit: cover }
.tile .cap { display: flex; align-items: center; gap: 5px; padding: 3px 5px; border-top: 1px solid var(--divider); font-family: var(--mono); font-size: 12.5px; color: var(--n700) }
.tile .cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pane { padding: 8px 10px; overflow: auto; max-height: 460px }

/* --- JSON panel (§5) --- */
.json { border: 2px solid var(--n300); background: var(--bg) }
.json > header { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--n100); border-bottom: 1px solid var(--divider) }
.json > header input { width: 200px; height: 27px; padding: 0 7px; font-family: var(--mono); font-size: 14px; background: var(--bg); border: 1px solid var(--divider); border-radius: 0; outline: none }
.json > header .btn { height: 25px; padding: 0 8px; font-size: 13px; font-weight: 400 }
.json > header .path, .json > header .info { font-family: var(--mono); font-size: 13px; color: var(--n600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.json .tree { padding: 6px 8px; overflow: auto; max-height: 60vh; font-family: var(--mono); font-size: var(--fs); line-height: 1.55 }
.json .ln { display: flex; align-items: center; gap: 6px; height: 22px }
.json .ln:hover { background: var(--a50) }
.json .ln .caret { width: 11px; flex: none; color: var(--n500); text-align: center; cursor: pointer }
.json .ln .k { color: var(--a800) }
.json .str { color: #15803d } .json .num { color: #b45309 } .json .bool { color: #7c3aed; font-weight: 600 }
.json .null { color: var(--n500); font-style: italic } .json .node { color: var(--n600) }
.json .ref { color: var(--a); border-bottom: 1px solid var(--a300) }
.json .hit { background: #fef9c3 }

/* --- modal (§4): one dialog per mutation, addressable by ?modal= --- */
dialog.modal {
  width: min(560px, 96vw); margin: 8vh auto auto; padding: 0; color: var(--text);
  border: 2px solid var(--n300); background: var(--bg); box-shadow: var(--shadow);
}
dialog.modal::backdrop { background: rgba(17, 24, 39, .4) }
dialog.modal > header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--divider) }
dialog.modal > header .title { font-family: var(--head); font-size: 19px; letter-spacing: .04em; text-transform: uppercase; line-height: 1 }
dialog.modal .mtabs { display: flex; align-items: center; background: var(--n100); border-bottom: 1px solid var(--divider) }
dialog.modal .mtabs a { padding: 4px 12px; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n600); border-bottom: 2px solid transparent }
dialog.modal .mtabs a.on { color: var(--text); border-bottom-color: var(--a) }
dialog.modal .mtabs .deep { padding: 0 10px; font-family: var(--mono); font-size: 12.5px; color: var(--n600) }
dialog.modal .body { padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow: auto }
dialog.modal .f { display: flex; flex-direction: column; gap: 3px }
dialog.modal .f label { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--n700) }
dialog.modal .f .req { color: var(--bad) }
dialog.modal .f .hint { font-size: 13px; color: var(--n600) }
dialog.modal input[type=text], dialog.modal input[type=password], dialog.modal input[type=number], dialog.modal select {
  width: 100%; height: 34px; padding: 0 8px; font-family: var(--body); font-size: 16px;
  background: var(--bg); border: 1px solid var(--divider); border-radius: 0; outline: none;
}
dialog.modal textarea {
  width: 100%; min-height: 90px; padding: 6px 8px; font-family: var(--mono); font-size: var(--fs);
  background: var(--bg); border: 1px solid var(--divider); border-radius: 0; outline: none; resize: vertical;
}
dialog.modal .err { margin: 8px 10px 0 }
dialog.modal footer { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-top: 1px solid var(--divider) }
dialog.modal footer .esc { font-family: var(--mono); font-size: 12.5px; color: var(--n600) }
dialog.modal .req-json { padding: 10px }
dialog.modal .req-json .cap { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--n600); margin-bottom: 4px }
dialog.modal .req-json pre { padding: 8px; background: var(--n100); border: 1px solid var(--divider) }

/* --- toast (§2 z-index: drawer 60, menu 70, toast 90; an open dialog is in
   the top layer above them all, so bo.js appends the toast inside it) --- */
.toast {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--n900); color: #fff; font-size: var(--fs); box-shadow: var(--shadow);
}
.toast .dot { width: 6px; height: 6px; background: #60a5fa }

/* --- drawer: the mobile row detail (§3) --- */
.drawer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; background: rgba(17, 24, 39, .35) }
.drawer .sheet { width: min(420px, 92vw); background: var(--bg); border-left: 1px solid var(--divider); box-shadow: var(--shadow); display: flex; flex-direction: column }
.drawer header { display: flex; align-items: center; gap: 8px; height: 38px; flex: none; padding: 0 10px; background: var(--n100); border-bottom: 1px solid var(--divider) }
.drawer header .title { font-family: var(--head); font-size: 16.5px; letter-spacing: .06em; text-transform: uppercase }
.drawer .rows { flex: 1; overflow: auto; padding: 8px 10px }
.drawer .rows .p { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--n200); font-size: var(--fs) }
.drawer .rows .p .k { width: 92px; flex: none; color: var(--n600); font-size: 13px }
.drawer .rows .p .v { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13.5px; word-break: break-all }
.drawer footer { display: flex; gap: 6px; flex: none; padding: 8px 10px; border-top: 1px solid var(--divider) }

@media (max-width: 700px) {
  :root { --rh: 26px }
  /* .label, not span: the dot is a span too and must survive */
  .brand .name, .bridge span, .health .label { display: none }
  .groups { display: none }
  /* The company chip stays where the nav goes: on a phone «чья это компания»
     outranks «куда пойти», and the name only gets shorter. */
  .company .co { max-width: 110px }
  table.t th:nth-child(n+3), table.t td:nth-child(n+3) { display: none }
  table.t tr.filters { display: none }
  .blocks { grid-template-columns: minmax(0, 1fr) }
  .props { grid-template-columns: minmax(0, 1fr) }
  .search input { width: 140px }
}