/* The entrepreneur's cabinet (cabinet.html): the radar's tokens, bar and buttons (app.css) and its start screen (splash.css);
   here only the cabinet's own blocks: the sign-in card, the three days of free windows and the company's card. One red action
   per screen («Войти»); the load figures keep the radar's colours (green ≥ 95 % booked, yellow 70–95 %, red < 70 %). */
body.cab { padding: 0; min-height: 100vh; min-height: 100dvh; }
.cab-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.cab-bar { position: sticky; top: 0; z-index: 5; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.cab-bar .brand { flex-direction: column; align-items: flex-start; gap: 0; }
.cab-bar .mark { font-size: 17px; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.cab-where { font-size: 12px; color: var(--canvas-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.cab-by { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--canvas-fg-2); white-space: nowrap; }
.cab-out { color: var(--canvas-fg); height: 40px; border: 1px solid var(--canvas-line); border-radius: 999px; padding: 0 16px; }
.cab-out:focus-visible { outline: 2px solid var(--canvas-fg); outline-offset: 2px; }

/* sign-in */
.cab-in { flex: 1; display: grid; place-items: center; padding: 32px 16px; }
.cab-card { width: min(440px, 100%); display: grid; gap: 14px; padding: 32px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.cab-h { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; }
.cab-lead { margin: 0 0 6px; color: var(--fg-2); }
.cab-f { display: grid; gap: 6px; font-weight: 500; }
.cab-f input { height: 52px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--fg); font: 400 16px var(--font); }
.cab-f input:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
.cab-f input[aria-invalid=true] { border-color: var(--accent); }
.cab-hint { margin: -6px 0 0; font-size: 13px; color: var(--fg-2); }
.cab-err { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--fg); font-size: 14px; }
.cab-go { width: 100%; margin-top: 6px; }
/* the search of the sign-in: the list under the field, in the flow of the card (eight at most, no scroll of its own) */
.cab-find { display: grid; gap: 6px; }
.cab-list { margin: 0; padding: 4px; list-style: none; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.cab-list li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.cab-list li b { font-weight: 600; overflow-wrap: anywhere; }
.cab-list li span { font-size: 13px; color: var(--fg-2); overflow-wrap: anywhere; }
.cab-list li[aria-selected=true], .cab-list li:hover { background: var(--page); }
.cab-st { margin: 0; font-size: 13px; color: var(--fg-2); }
.cab-st:empty { display: none; }
/* a search under way: a turning ring before the words */
.cab-st.busy::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; border: 2px solid var(--line); border-top-color: var(--fg); border-radius: 50%; animation: cab-spin .8s linear infinite; }
@keyframes cab-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cab-st.busy::before { animation-duration: 2.4s; } }
.cab-ya { justify-self: start; max-width: 100%; white-space: normal; text-align: left; }
/* the sign-in beside our map: the companies found as dots, the one under the arrows or the pointer with its name; the one picked waits for «Войти» */
.cab-split { width: min(1180px, 100%); display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.cab-split .cab-card { width: 100%; align-content: start; }
.cab-list li .cab-adr { color: var(--fg); }
.cab-pick { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--page); }
.cab-pick b { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.cab-pick span { font-size: 13px; color: var(--fg-2); }
.cab-pick p { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.cab-pick .cab-go { margin-top: 10px; }
.cab-pick .go { justify-self: start; margin-top: 2px; }
.cab-wmap { position: relative; min-height: 560px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
/* over maplibre-gl.css, which comes later and makes the map's box relative, so it would have no height */
.cab-wmap .cab-wmap-gl { position: absolute; inset: 0; }
.cab-wmap-note { position: absolute; left: 12px; right: 52px; bottom: 12px; justify-self: start; width: fit-content; max-width: calc(100% - 64px); margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--fg-2); pointer-events: none; }
.cab-wmap-note:empty { display: none; }
.cab-wdot { display: block; width: 12px; height: 12px; border: 2px solid #4a3ea3; border-radius: 50%; background: #ffffff; cursor: pointer; }
.cab-wmap .office-mk { z-index: 2; }
@media (max-width: 767px) {
  .cab-split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cab-wmap { min-height: 280px; }
  .cab-wmap[data-empty] { display: none; }
}

/* the company's page */
.cab-home { width: min(1080px, 100%); margin: 0 auto; padding: 28px 16px 48px; display: grid; gap: 32px; }
.cab-sec { display: grid; gap: 14px; }
.cab-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cab-h2 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.cab-note { font-size: 13px; color: var(--fg-2); }
.cab-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cab-day { display: grid; gap: 12px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.cab-day-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cab-day-h b { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.cab-day-h span { color: var(--fg-2); font-size: 13px; }
.cab-fig { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.1; }
.cab-fig small { display: block; margin-top: 4px; font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--fg-2); }
.cab-meter { --c: var(--ld-mid); height: 8px; border-radius: 999px; background: var(--page); overflow: hidden; }
.cab-meter i { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.cab-meter.full { --c: var(--ld-full); }
.cab-meter.low { --c: var(--ld-low); }
.cab-day-b { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* the editor of one day of the owner's schedule */
.cab-edit { margin-top: 16px; }
.ed-rows { display: grid; gap: 14px; }
.ed-row { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ed-row:first-child { padding-top: 0; border-top: 0; }
.ed-role { display: grid; gap: 4px; max-width: 360px; }
.ed-role input { height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); font: inherit; background: var(--surface); }
.ed-times { display: grid; gap: 8px; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-t { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font-size: 13px; }
.ed-x { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--fg-2); font-size: 16px; line-height: 1; cursor: pointer; }
.ed-x:hover { background: var(--panel); color: var(--fg); }
.ed-out { height: 26px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); font: inherit; font-size: 12px; color: var(--fg-2); }
.ed-add { display: inline-flex; align-items: center; gap: 6px; }
.ed-add input { height: 32px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); font: inherit; background: var(--surface); }
#cab-own { margin-top: 16px; }
#cab-own .sch { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
/* the grid filled by hand (src/hand.js): a row of hours for each specialist, free as the grid's free tile, busy as its busy one */
.hg { margin-top: 16px; display: grid; gap: 12px; }
.hg .t-ch { margin-bottom: 0; }
.hg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.hg-days button { height: 36px; }
.hg-grid { display: grid; gap: 6px; user-select: none; -webkit-user-select: none; }
.hg-r { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 12px; align-items: center; }
.hg-who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; }
.hg-nm { display: grid; line-height: 1.2; }
.hg-n { font-size: 13px; font-weight: 600; white-space: nowrap; }
.hg-src { font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.hg-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--panel); }
.hg-role { min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); font: inherit; font-size: 13px; background: var(--surface); color: var(--fg); }
.hg-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--fg-2); font-size: 16px; line-height: 1; cursor: pointer; }
.hg-x:hover { background: var(--panel); color: var(--fg); }
.hg-cells { display: grid; grid-template-columns: repeat(var(--hg-n), minmax(0, 1fr)); gap: 3px; touch-action: pan-y; }
.hg-hr .hg-cells span { font-size: 11px; color: var(--fg-3); text-align: center; font-variant-numeric: tabular-nums; }
.hg-c { height: 36px; min-width: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); cursor: pointer; }
.hg-c:hover { border-color: var(--fg-3); }
.hg-c:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
.hg-c.busy, .hg-lg i.busy { border-color: transparent; background: color-mix(in srgb, var(--fg-3) 55%, var(--surface)); }
.hg-c.past, .hg-lg i.past { border-style: dashed; border-color: var(--line); background: none; cursor: default; }
.hg-add { justify-self: start; }
.hg-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.hg-lg i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -3px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); }
.hg-sum, .hg-ok { margin: 0; }
.hg-off { margin: 0; padding: 12px 0; }
@media (max-width: 767px) {
  .hg-r { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hg-hr .hg-who { display: none; }
  .hg-r + .hg-r { padding-top: 6px; }
  .hg-c { height: 40px; }
}
.cab-free { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.cab-free li { display: grid; gap: 2px; }
.cab-free li b { font-weight: 500; }
.cab-free li span { color: var(--fg-2); font-variant-numeric: tabular-nums; }
/* a busy specialist under the free ones: the name quieter than theirs */
.cab-free li.taken b { color: var(--fg-2); }
.cab-none { color: var(--fg-2); }
/* «Что можно продвигать» under the day cards (cabinet.js sureHtml, the owner, 04.11.2026): the day beside, who, the hours, the service */
.cab-sure { margin-top: 16px; }
.cab-sure-g { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.cab-sure .t-ch + .cab-sure-g { margin-top: 0; }
.cab-sure-l { gap: 10px; }
.cab-sure-l li { grid-template-columns: minmax(140px, 180px) minmax(0, 1fr); column-gap: 16px; }
.cab-sure-l li > * { grid-column: 2; }
.cab-sure-l li > .cab-sure-w { grid-column: 1; grid-row: 1 / span 3; }
.cab-sure-n, .cab-sure-p { margin: 8px 0 0; font-size: 13px; color: var(--fg-2); }
.cab-sure-p { font-size: 14px; color: var(--fg); }
.cab-sure .pp-btns { margin-top: 12px; }
@media (max-width: 767px) {
  .cab-sure-l li { grid-template-columns: minmax(0, 1fr); }
  .cab-sure-l li > *, .cab-sure-l li > .cab-sure-w { grid-column: 1; grid-row: auto; }
}
/* the switch of a day: the card opens that day's schedule under the cards; the open one carries an ink edge */
.cab-day { cursor: pointer; transition: border-color .15s; }
.cab-day:hover { border-color: var(--line-strong); }
.cab-day.on { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.cab-sw { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-top: 2px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--surface); color: var(--fg); font-weight: 500; }
.cab-sw svg { transition: transform .2s; }
.cab-sw[aria-expanded=true] { background: var(--fg); border-color: var(--fg); color: var(--surface); }
.cab-sw[aria-expanded=true] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .cab-day, .cab-sw svg { transition: none; } }
/* the schedule itself: the grid of «Клиент» (client.css), here in the page's flow under the cards */
.cab-client { flex: none; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: clip; scroll-margin-top: 80px; }
.cab-client .cl-body { overflow: visible; padding: 20px; }
/* «Отправить» stays in view while the grid scrolls past (on a phone client.css fixes the strip to the bottom already) */
@media (min-width: 901px) { .cab-client .cl-foot { position: sticky; bottom: 0; z-index: 3; } }
.cab .toast { position: fixed; bottom: 24px; }
.cab-empty { padding: 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-card); color: var(--fg-2); display: grid; gap: 6px; }
.cab-empty b { color: var(--fg); font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.cab-info { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.cab-info dt { color: var(--fg-2); }
.cab-info dd { margin: 0; overflow-wrap: anywhere; }
.cab-info a { color: var(--fg); text-underline-offset: 3px; }

@media (max-width: 560px) {
  .cab-card { padding: 24px 20px; }
  .cab-by { display: none; }
  .cab-info { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cab-info dd { margin-bottom: 10px; }
}

/* the company's two pages under the bar, as the radar's steps: the current one white with the red underline */
.cab-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
  background: var(--canvas); background-image: var(--canvas-bg); border-top: 1px solid var(--canvas-line); }
.cab-nav a { position: relative; display: inline-flex; align-items: center; height: 46px; padding: 0 10px; color: var(--canvas-fg-2); font-weight: 500; text-decoration: none; white-space: nowrap; }
.cab-nav a:hover { color: var(--canvas-fg); }
.cab-nav a[aria-current=page] { color: var(--canvas-fg); font-weight: 600; }
.cab-nav a[aria-current=page]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.cab-nav a:focus-visible { outline: 2px solid var(--canvas-fg); outline-offset: -2px; border-radius: 6px; }

/* «Подготовка целевой аудитории» (audience.js): step 1, the competitors nearby — the radar's filter, list and map */
.cab-aud { width: min(1240px, 100%); gap: 22px; }
.cab-aud-h { display: grid; gap: 6px; }
.cab-aud-h .cab-lead { max-width: 72ch; }
.cab-step { display: inline-flex; align-items: center; height: 24px; margin-right: 10px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--on-ink);
  font-family: var(--font); font-size: 12px; font-weight: 600; vertical-align: 3px; }
.riv-start, .riv-due { display: grid; gap: 10px; justify-items: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.riv-start b, .riv-due b { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.riv-start span, .riv-due span { color: var(--fg-2); max-width: 70ch; }
.riv-start .btn { margin-top: 6px; }
.riv-due { grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-color: var(--sched); }
.riv-due > div { display: grid; gap: 4px; }
.riv-due .btn svg, .riv-up svg { flex: none; }
#riv-box { display: grid; gap: 18px; }
.riv-none { margin: 0; padding: 14px 6px; color: var(--fg-2); }
.riv-flt { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.riv-f { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.riv-l { flex: none; min-width: 124px; font-size: 13px; color: var(--fg-2); }
.riv-f .seg .num, .riv-chips .num { font-size: 12px; color: var(--fg-2); }
.riv-f .seg button[aria-selected=true] .num { color: var(--fg); }
.riv-f .seg { flex-wrap: wrap; }   /* at 375 «1 км · 2 км · 3 км · Своя область» is 17 px wider than the page: «Своя область» takes a line of its own */
.riv-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.riv-f-x { padding-left: 138px; }   /* the toggles line up with the chips, under the labels' column */
.riv-f-x .riv-up { margin-left: auto; height: 40px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 16px; }
.riv-f-x .riv-up:hover { text-decoration: none; border-color: var(--fg); }
.riv-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.riv-list { min-width: 0; }
.riv-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 2px 6px 10px; font-size: 13px; color: var(--fg-2); }
.riv-sum b { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--fg); }
.riv-saved { margin-left: auto; color: var(--fg-3); }
.riv-ring h3 { position: sticky; top: 64px; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; padding: 14px 6px 8px;
  background: var(--page); font-family: var(--font-display); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.riv-ring h3 .num { font-size: 13px; color: var(--fg-2); }
.riv-row { cursor: pointer; }
.riv-row .nm { flex-wrap: wrap; row-gap: 4px; }
.riv-row .nm .badge { height: 22px; font-size: 11px; }
.riv-new { background: var(--sched); color: var(--on-sched); }
.riv-m2 { margin-top: 2px; font-size: 13px; color: var(--fg-2); overflow-wrap: anywhere; }
.riv-m2 a { color: var(--fg); text-underline-offset: 3px; }
.riv-dot { margin: 0 6px; color: var(--fg-3); }
.riv-row.off { cursor: default; }
.riv-gone { margin-top: 18px; }
.riv-gone summary { padding: 10px 6px; color: var(--fg-2); cursor: pointer; font-size: 13px; }
.riv-map { position: sticky; top: 80px; height: calc(100vh - 104px); height: calc(100dvh - 104px); min-height: 360px; margin: 0; border: 1px solid var(--line); }
.riv-map #riv-mapgl { position: absolute; inset: 0; }
.riv-map .office-mk { z-index: 3; }   /* the company stays over its competitors' dots */
.map-legend i.o { width: 12px; height: 12px; border-radius: 3px; background: var(--fg); border: 0; }
.riv-rt { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .86); color: #626c77; font: 500 11px var(--font-display); pointer-events: none; }
.riv-rt.on { color: #1d2023; font-weight: 600; background: #ffffff; box-shadow: 0 0 0 1px #bcc3d0; }
@media (max-width: 900px) {
  .riv-body { grid-template-columns: minmax(0, 1fr); }
  .riv-map { position: relative; top: 0; order: -1; height: 340px; min-height: 0; }
  .riv-ring h3 { top: 64px; }
}
@media (max-width: 560px) {
  .riv-flt { padding: 16px; }
  .riv-l { min-width: 0; flex-basis: 100%; }
  .riv-f-x { padding-left: 0; }
  .riv-f-x .riv-up { margin-left: 0; }
  .riv-chips .tg, .riv-f-x .tg { height: 36px; padding: 0 12px; }
  .riv-due { grid-template-columns: minmax(0, 1fr); }
  .riv-start, .riv-due { padding: 20px; }
}

/* step 2, the comparison with the competitors (audience.js, api/compare.js) */
.riv-cb { display: block; }
.riv-cmp { margin-top: 4px; }
.riv-lv { display: block; margin-top: 2px; font-family: var(--font); font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.riv-cmp-on { display: block; margin-top: 4px; font-family: var(--font); font-size: 12px; color: var(--fg-2); }
/* «Результат ›» is a link and reads as the «Сравнить» it replaces; «Сравниваем…» carries the bar of «Сравнение» */
.riv-row .dist a.go { color: var(--fg); }
.riv-row .dist .cmp-wait { display: grid; gap: 4px; width: 84px; margin-left: auto; text-decoration: none; }
.riv-pick-a a.btn { text-decoration: none; }
/* a value of a comparison that is not there: its reason greyed; one being read again: «дочитываем…» with the bar of «Сравнение» */
.cmp-na { color: var(--fg-2); }
.cmp-cell-wait { gap: 4px; max-width: 160px; font-size: 12px; }
/* what «Обновить список» gave, over the list until the next press */
.riv-run { margin: 12px; padding: 10px 12px; border-radius: 8px; background: var(--page); color: var(--fg); }
.riv-run b { font-weight: 600; }
.riv-mts { flex-basis: 100%; font-size: 13px; color: var(--fg-2); }
.riv-mts a { color: var(--fg); text-underline-offset: 3px; }
.cmp-lead { margin: -4px 0 0; max-width: 72ch; }
#cmp-box { display: grid; gap: 18px; }
.cmp-top { display: grid; gap: 10px; justify-items: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.cmp-go { white-space: normal; text-align: left; height: auto; min-height: 52px; padding: 12px 22px; }
.cmp-note { margin: 0; font-size: 13px; color: var(--fg-2); max-width: 80ch; }
.cmp-note a { color: var(--fg); text-underline-offset: 3px; }
.cmp-ours { margin: 0; font-size: 13px; }
.cmp-err { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 14px; }
.cmp-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; width: 100%; }
.cmp-prog > div:first-child { display: grid; gap: 2px; }
.cmp-prog span { font-size: 13px; color: var(--fg-2); }
.cmp-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--page); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .4s; }
.cmp-prog .cmp-bar { grid-row: 2; }
.cmp-wait .cmp-bar i { width: 30%; animation: cmpmove 1.4s ease-in-out infinite; }
@keyframes cmpmove { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .cmp-wait .cmp-bar i { animation: none; width: 100%; opacity: .4; } .cmp-bar i { transition: none; } }
.cmp-card, .cmp-sum { display: grid; gap: 22px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); scroll-margin-top: 80px; }
.cmp-card { border-color: var(--fg); }
/* the way from the summary to one competitor and back */
.cmp-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.cmp-link:hover { text-decoration-color: currentColor; }
.cmp-link:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 4px; }
.cmp-pickrow { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cmp-pick { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; max-width: 520px; font-size: 13px; color: var(--fg-2); }
.cmp-pick span { flex: none; white-space: nowrap; }
.cmp-pick select { flex: 1 1 0; width: 0; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--fg); font: inherit; font-size: 15px; }
.cmp-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cmp-h { margin: 0 0 4px; font-family: var(--font-display); font-size: 18px; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.cmp-h .num { font-size: 15px; color: var(--fg-2); }
.cmp-act { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-act .btn svg { flex: none; }
.cmp-wait { display: grid; gap: 8px; }
.cmp-wait span { color: var(--fg-2); }
.cmp-part { display: grid; gap: 10px; min-width: 0; }
.cmp-part-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cmp-part-h h4 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.cmp-dl { font-size: 13px; font-weight: 500; color: var(--fg); text-underline-offset: 3px; }
.cmp-tw { min-width: 0; }
.cmp-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp-t th, .cmp-t td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.cmp-t thead th { font-size: 12px; font-weight: 600; color: var(--fg-2); border-bottom-color: var(--line-strong); }
.cmp-t tbody th { font-weight: 500; color: var(--fg-2); }
.cmp-gen tbody th { width: 26%; }
.cmp-gen td { width: 37%; }
.cmp-t td.num { min-width: 7em; font-family: var(--font); font-variant-numeric: tabular-nums; }   /* the figures keep together (their spaces do not break), a long unit wraps */
.cmp-t .cmp-g th { padding-top: 16px; background: transparent; color: var(--fg); font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.cmp-svc tr.k-theirs td:nth-child(3), .cmp-svc tr.k-theirs td:nth-child(4) { font-weight: 500; }
.cmp-diff { font-family: var(--font); font-size: 13px; font-weight: 600; white-space: nowrap; }
.cmp-diff.up { color: var(--fg); }
.cmp-diff.down { color: var(--fg-2); }
.cmp-rev ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-chips .num { font-size: 12px; color: var(--fg-2); }
.cmp-wks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.cmp-wk { display: grid; gap: 8px; min-width: 0; }
.cmp-wk b { font-weight: 600; }
.wk { display: grid; grid-template-columns: 22px repeat(14, minmax(0, 1fr)); gap: 2px; align-items: center; font-size: 11px; color: var(--fg-2); }
.wk-h { font-variant-numeric: tabular-nums; }
.wk i { display: block; height: 16px; border-radius: 3px; background: color-mix(in srgb, var(--ink) calc(var(--v) * 100%), var(--page)); }
@media (max-width: 700px) {
  .cmp-card, .cmp-sum, .cmp-top { padding: 16px; }
  /* the summaries stay tables and scroll sideways; a comparison's own tables turn into small cards, one row each */
  .cmp-sum .cmp-tw { overflow-x: auto; overscroll-behavior-x: contain; }
  .cmp-sum .cmp-t { min-width: 640px; }
  .cmp-card .cmp-t, .cmp-card .cmp-t tbody { display: block; }
  .cmp-card .cmp-t thead { display: none; }
  .cmp-card .cmp-t tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .cmp-card .cmp-t th, .cmp-card .cmp-t td { width: auto; padding: 2px 0; border: 0; }
  .cmp-card .cmp-t tbody th[scope=row] { grid-column: 1 / -1; padding-bottom: 4px; }
  .cmp-card .cmp-t td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--fg-2); }
  .cmp-svc tr { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
  .cmp-card .cmp-t td.num { min-width: 0; }
  .cmp-svc tr.cmp-g { display: block; padding: 14px 0 4px; }
  .cmp-svc td:nth-child(2), .cmp-svc td:nth-child(4) { align-self: end; text-align: right; }
  .cmp-svc td:nth-child(5) { grid-column: 1 / -1; }
  .cmp-svc td:nth-child(5)[data-l]::before { display: inline; margin-right: 6px; }
  .cmp-svc td:nth-child(5):empty { display: none; }
  .cmp-prog { grid-template-columns: minmax(0, 1fr); }
  .cmp-prog .cmp-bar { grid-row: auto; }
}
.cmp-cov summary { padding: 4px 0; color: var(--fg-2); cursor: pointer; font-size: 13px; }
.cmp-cov summary .num { margin-left: 6px; }
.cmp-cov ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; max-width: 90ch; }
.cmp-cov li b { font-weight: 600; }
.cmp-gripes { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; max-width: 90ch; }
.cmp-gripes li b { font-weight: 600; }
.cmp-set { width: max-content; max-width: 100%; margin-top: 10px; }
.cmp-set .num { margin-left: 6px; font-size: 12px; color: var(--fg-2); }
.cmp-set button[aria-selected=true] .num { color: inherit; }
/* «Внешний вид, соцсети и реклама» */
.look .look-top { display: inline-flex; align-items: center; gap: 10px; }
.look-h { margin: 18px 0 8px; font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.look-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.look-sum h5 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.look-sum ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.look-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
.look-col > b { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.look-ph { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.look-ph a { display: block; border-radius: 8px; overflow: hidden; background: var(--page); }
.look-ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 700px) {
  .look-sum, .look-cols { grid-template-columns: minmax(0, 1fr); }
  .look-ph { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cmp-also { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--fg-3); }
.cmp-miss { padding: 12px 14px; border-radius: 12px; background: var(--page); font-size: 13px; }
.cmp-miss b { font-weight: 600; }
.cmp-miss ul { margin: 4px 0 0; padding-left: 18px; color: var(--fg-2); }

/* step 3, place and flows (place.js, api/place.js) */
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.pl-top .cab-note { min-width: 0; }
.pl-wait { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
#pl-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
#pl-head:empty { display: none; }
#pl-head { display: grid; gap: 12px; }
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pl-stat { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.pl-stat b { font-family: var(--font-display); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-stat span { font-size: 13px; color: var(--fg-2); }
.pl-ctl { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.pl-ctl .seg .num { margin-left: 6px; font-size: 12px; color: var(--fg-2); }
.pl-ctl .seg button[aria-selected=true] .num { color: inherit; }
.pl-map { height: 520px; margin: 0; border: 1px solid var(--line); }
.pl-map #pl-mapgl { position: absolute; inset: 0; }
.pl-map .office-mk { z-index: 3; }
.map-legend i.pl-lh, .map-legend i.pl-lw, .map-legend i.pl-lp { width: 18px; height: 4px; border: 0; border-radius: 2px; vertical-align: 2px; }
.map-legend i.pl-lh { background: #f95721; }
.map-legend i.pl-lw { background: #2a78d6; }
.map-legend i.pl-lp { height: 0; border-top: 2.5px dotted #1d2023; border-radius: 0; }
.map-legend i.pl-lt { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--c); }
.pl-sw { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--c); vertical-align: 0; }
.pl-inc td:last-child { color: var(--fg-2); }
.pl-st { display: grid; place-items: center; cursor: default; }
.pl-st.rail { width: 20px; height: 20px; border-radius: 50%; background: var(--c, #1d2023); color: #ffffff; font: 600 11px var(--font-display); box-shadow: 0 0 0 2px #ffffff; }
.pl-st.bus { width: 10px; height: 10px; border-radius: 3px; background: #ffffff; border: 2px solid #1d2023; }
.pl-cap { margin-top: -6px; }
/* the baseline is drawn across the whole chart, under the bars and over the hours */
.pl-hours { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 2px; align-items: end; height: 140px; margin: 0 6px; background: linear-gradient(var(--line), var(--line)) 0 calc(100% - 20px) / 100% 1px no-repeat; }
.pl-hr { display: grid; grid-template-rows: 18px 1fr 20px; grid-template-columns: minmax(0, 1fr); height: 100%; min-width: 0; text-align: center; font-size: 11px; color: var(--fg-2); font-variant-numeric: tabular-nums; cursor: default; }
/* each part keeps its row: a column with no bar keeps its hour under the line */
.pl-hr i { grid-row: 2; align-self: end; display: block; height: calc(var(--v) * 100%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--ink); }
.pl-hr i[hidden] { display: none; }
.pl-hr:hover i, .pl-hr.on i { background: var(--fg); }
.pl-hv { grid-row: 1; align-self: end; color: var(--fg); font-weight: 600; white-space: nowrap; }
/* an hour is written where it begins: on the left edge of its column */
.pl-hl { grid-row: 3; justify-self: start; align-self: end; transform: translateX(-50%); white-space: nowrap; line-height: 16px; }
.pl-hcard { align-self: start; }
.pl-hread { min-height: 2.6em; margin-top: 8px; color: var(--fg); }
.pl-dls { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pl-t tbody th[scope=row] { width: 24%; }
.pl-facts tbody th[scope=row] { width: 34%; }
.pl-val { width: 26%; font-weight: 500; }
.pl-none { color: var(--fg-2); font-weight: 400; }
.pl-ev { display: block; margin-top: 4px; font-size: 12px; color: var(--fg-3); }
.pl-pts summary { cursor: pointer; }
.pl-pts ol { margin: 6px 0 0; padding-left: 22px; font-size: 13px; font-weight: 400; }
.pl-how summary { padding: 4px 0; color: var(--fg-2); cursor: pointer; font-size: 13px; }
.pl-how ul { margin: 6px 0 8px; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--fg-2); max-width: 80ch; }
@media (max-width: 700px) {
  .pl-map { height: 380px; }
  .pl-ctl .seg button { padding: 0 12px; }
  .pl-ctl .seg .num { display: none; }   /* the caption under the map says the hours */
  .pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-stat b { font-size: 19px; }
  .pl-hours { height: 124px; }
  .pl-hv { font-size: 10px; }
  /* the tables turn into small cards, one row each, as the comparison's do */
  .pl-t, .pl-t tbody { display: block; }
  .pl-t thead { display: none; }
  .pl-t tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--line); }
  .pl-t th, .pl-t td, .pl-t tbody th[scope=row], .pl-val { width: auto; padding: 2px 0; border: 0; }
  .pl-t td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 400; color: var(--fg-2); }
  .pl-t tr.cmp-g { padding: 14px 0 4px; }
}

/* the sign-in by a code sent to the email (auth.js): the same card as the company's search */
.au-form { display: grid; gap: 12px; }
.au-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.au-points { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; }
.au-points ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.au-list { display: grid; gap: 8px; }
body.cab .btn.au-co { height: auto; padding: 12px 16px; display: grid; justify-content: start; justify-items: start; gap: 2px; white-space: normal; text-align: left; }
.au-co span { color: var(--fg-2); font-size: 13px; font-weight: 400; }
.au-out { justify-self: start; }
/* the company proven by its phone (auth.js, the owner 04.11.2026): a landline in the list cannot take an SMS */
body.cab .btn.au-co:disabled { opacity: .55; cursor: not-allowed; }
.au-help { font-size: 13px; color: var(--fg-2); margin: 0; }
.au-in { display: grid; gap: 4px; margin: 4px 0 0; }
.au-in p { margin: 0; }
.au-in .au-reg { justify-self: start; margin-top: 6px; }
/* a button that reads as a link inside a phrase: no box, no gap after it */
.au-link { display: inline; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.au-link:hover { text-decoration-thickness: 2px; }
.au-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
/* a record with no company: its town above the company's field (auth.js findStep) */
.au-city { display: grid; gap: 4px; margin-bottom: 12px; }
.au-city .cab-st:empty { display: none; }
/* «Перед первым входом» (auth.js consentStep, the owner 04.11.2026): two ticks, each paper opens in the card */
.au-checks { display: grid; gap: 12px; }
.au-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.au-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent, #1c6b5a); cursor: pointer; }
.au-doc-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.au-doc-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.au-doc { display: grid; gap: 10px; max-height: 50vh; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--line, #ddd); border-radius: var(--r-card, 12px); font-size: 14px; line-height: 1.5; overscroll-behavior: contain; }
.au-doc-h { margin: 0; font-size: 16px; font-weight: 600; }
.au-doc p { margin: 4px 0 0; }
.au-doc ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.au-doc section { display: grid; gap: 2px; }
.au-doc section section { margin: 6px 0 0 12px; }
.au-doc #au-doc-x { justify-self: start; }

/* where a page's facts come from (the owner, 03.11.2026: «с пометкой откуда мы берем данные») */
.cab-src { margin: 20px 0 0; color: var(--fg-3); font-size: 12px; line-height: 1.5; }

/* «Аккаунт» in the profile's settings (account.js, the owner 04.11.2026): leave, or delete what the user made */
.acc-card { display: grid; gap: 14px; margin-top: 12px; }
.acc-h { margin: 0; font-size: 17px; font-weight: 600; }
.acc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.acc-row b { display: block; font-size: 15px; font-weight: 500; }
.acc-row .set-d, .acc-card .set-d { display: block; margin-top: 2px; font-size: 13px; color: var(--fg-2); }
body.cab .btn.acc-danger { color: var(--red-ink, #a3221a); }
.acc-confirm { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--red-dot, #e5392b); border-radius: var(--r-card, 12px); background: var(--red-bg, #ffe1da); }
.acc-q { font-size: 15px; font-weight: 600; }
.acc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.acc-cols ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.acc-l { font-size: 13px; font-weight: 600; text-transform: none; }
.acc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
body.cab .btn.acc-del { background: var(--red-ink, #a3221a); border-color: var(--red-ink, #a3221a); color: var(--surface, #fff); }
body.cab .btn.acc-del:disabled { opacity: .45; cursor: not-allowed; }
.acc-bad { color: var(--red-ink, #a3221a); }
@media (max-width: 560px) { .acc-row { grid-template-columns: 1fr; } .acc-row .btn { justify-self: start; } }
/* «Сменить почту», «Сменить пароль» (account.js, the owner 04.11.2026) */
.acc-form { display: grid; gap: 10px; padding: 12px 0 4px; max-width: 420px; }