/* The cabinet's new look, «Фраза и картинка» in the palette 3б (the owner, 03.11.2026: «и все разделы так переделай»): one layer over
   every page, the menu, the splash and the sign-in. Loaded last in cabinet.html and primer.html, scoped to body.cab, so the radar and the
   main page keep their look, and taking out its one <link> brings the cabinet back exactly as it was.
   The look, from the drafts cab/m2 and cab/v3b: a cream canvas without the ruling, white cards with large corners and no shadow, warm ink
   text, one teal action with white text, pills for buttons, the menu on the canvas with the open page as an ink pill; the colours of the
   zones (teal — your salon, lilac — the competitors, peach — the events), the traffic light only at signals; Onest 600, large and tight,
   in the headings, and the figures in the text face too (since 04.11.2026, «Цифры» at the end; JetBrains Mono no longer).
   «Дэшборд» (#dash-box, .dz*) and the chat «Обсудить» (.d-dock, .d-sheet, .d-askbar, .d-fab) are painted by dash.css: the rules for the
   shared parts below end with :not(:where(#dash-box *, .d-dock *, .d-sheet *)) — «not inside the dashboard or the chat», at no cost
   of specificity — and nothing here names their own classes.
   Step 3, the dark theme: every colour below is a variable of the first block; a dark block of the same names is all it takes. */

/* ===================================== 1. The palette: the only place with raw colours ===================================== */
body.cab {
  /* surfaces */
  --page: #f6f2ea;          /* the cream canvas */
  --surface: #ffffff;       /* the cards */
  --tint: #fbf8f2;          /* an inset on a card, the hover of a row */
  --panel: #f3ede3;         /* a quiet ground: a track, a grey chip, a job's box */
  --stone: #ece3d5;         /* the track of a segmented choice */
  /* text and lines */
  --fg: #1d1a15; --fg-2: #5b5247; --fg-3: #6f6458;            /* 17 : 1, 7.7 : 1, 5.8 : 1 on white; 5.2 : 1 on the canvas */
  --line: #e7ddcd; --line-strong: #d3c6b1; --field-line: #b8a993;
  --hover: rgba(29, 26, 21, .06);
  /* the action and the ink */
  --accent: #116c67; --accent-h: #0b5550; --on-accent: #ffffff; --accent-tint: #e4f8f1;   /* white on teal 6.2 : 1 */
  --ink: #1d1a15; --ink-h: #38322a; --on-ink: #ffffff;
  /* the zones: your salon, the competitors, the events */
  --you: #5fd5b6; --you-sheet: #c9f0e3; --you-soft: #e4f8f1; --you-art: #0f8a72;
  --rival: #bdb2ff; --rival-sheet: #e2dcff; --rival-soft: #efebff; --rival-ink: #3d2f99; --rival-art: #8f80ff;
  --event: #ffbd8a; --event-sheet: #ffe4cf; --event-soft: #fff1e6; --event-ink: #8a3d0a; --event-art: #f07f33;
  /* the traffic light: only at signals, always with a word */
  --red-bg: #ffe1da; --red-ink: #a3221a; --red-dot: #e5392b;
  --amber-bg: #ffeab8; --amber-ink: #744b00; --amber-dot: #e09b00;
  --green-bg: #d9f1e1; --green-ink: #1d6638; --green-dot: #2b9a57;
  --sched: #744b00; --on-sched: #ffffff; --warn-bg: #ffeab8; --ok: #1d6638;
  /* what floats: the panels over a map, the toast, the dimmed page */
  --shadow-float: 0 6px 24px rgba(29, 26, 21, .14);
  --shadow-pop: 0 16px 48px rgba(29, 26, 21, .22);
  --shadow-up: 0 -8px 24px rgba(29, 26, 21, .12);
  --scrim: rgba(29, 26, 21, .4);
  /* the basemap is light in every theme: what stands on it keeps these (the maps' own colours are in their scripts) */
  --on-map: #ffffff; --map-ink: #1d2023; --map-ink-2: #626c77; --map-edge: #bcc3d0; --map-label: rgba(255, 255, 255, .86); --map-none: #e4e5e1; --map-area: #4a3ea3;
  --map-mark-shadow: rgba(0, 0, 0, .25);
  /* the splash: the slots filling */
  --slot-line: #d3c6b1;
  /* the same in every theme: the site's mark (favicon.svg), the switch's knob, the light data scale of the maps; a map's frame (dark only) */
  --mark-tile: #116c67; --mark-sq: #ffffff; --mark-mint: #5fd5b6; --knob: #ffffff;
  --map-d1: #d8d3f1; --map-d2: #b3abe6; --map-d3: #8c80d6; --map-d4: #6557bf; --map-d5: #4a3ea3; --map-d6: #241c66; --map-res: #6557bf;
  --map-frame: transparent;
  color-scheme: light;
}
html { color-scheme: light; }

/* ===================================== 1b. The dark palette: the same names, its own steps ===================================== */
/* Dark when the system is dark and «Светлая» is not chosen, or when «Тёмная» is (theme.js puts data-theme on <html> before the first
   paint). The two copies below are the same text: change both. «Дэшборд» keeps its own block --dz-* on #page-dash (dash.css), so its
   dark steps are here too; the chat «Обсудить» takes the cabinet's variables. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { color-scheme: dark; }
  html:not([data-theme="light"]) body.cab {
    /* surfaces: a warm graphite canvas, the cards a step lighter */
    --page: #22201c; --surface: #2c2925; --tint: #35312c; --panel: #3a362f; --stone: #403b34;
    --fg: #f3eee6; --fg-2: #cbc1b3; --fg-3: #b3a899;            /* 12.5 : 1, 8.1 : 1, 6 : 1 on a card */
    --line: #433e37; --line-strong: #5a534a; --field-line: #7a7165;
    --hover: rgba(243, 238, 230, .08);
    /* the action lighter, with dark text (8 : 1); the ink turns light, so the open item is a light pill */
    --accent: #5cc8b6; --accent-h: #7ad6c6; --on-accent: #0f2420; --accent-tint: #1d3a35;
    --ink: #f3eee6; --ink-h: #ffffff; --on-ink: #1d1a15;
    /* the zones: their own dark steps — marks inside L 0.48–0.67 (dataviz validator, dark card), deep sheets under light text */
    --you: #16a384; --you-sheet: #1f4a40; --you-soft: #1c3933; --you-art: #16a384;
    --rival: #8c79e0; --rival-sheet: #3b3568; --rival-soft: #2f2b4f; --rival-ink: #d6cfff; --rival-art: #8c79e0;
    --event: #d5753a; --event-sheet: #553620; --event-soft: #3e2d1e; --event-ink: #ffcfa3; --event-art: #d5753a;
    /* the traffic light: dots validated on the dark card (CVD 7.9, legal with the word beside them), inks light on deep grounds */
    --red-bg: #4b241e; --red-ink: #ffab9e; --red-dot: #cf3f4c;
    --amber-bg: #463619; --amber-ink: #ffd27a; --amber-dot: #c8800d;
    --green-bg: #1e3d2b; --green-ink: #94dfae; --green-dot: #2fa465;
    --sched: #ffd27a; --on-sched: #1d1a15; --warn-bg: #463619; --ok: #94dfae;
    --sat-g: #2fa465; --sat-y: #c8800d; --sat-r: #cf3f4c; --sat-u: #8a8073;
    /* the data scale of cabinet-theme.css, dim to bright (the ordinal check passes on the dark card); the maps keep the light one */
    --d1: #5f57a4; --d2: #726ac0; --d3: #867fd7; --d4: #9b96e9; --d5: #b2aef5; --d6: #cccbfe;
    --ld-full: #b2aef5; --ld-mid: #867fd7; --ld-low: #5f57a4; --ld-full-t: #1d1a15; --ld-mid-t: #1d1a15; --ld-low-t: #f3eee6;
    /* what floats */
    --shadow-float: 0 6px 24px rgba(0, 0, 0, .45);
    --shadow-pop: 0 16px 48px rgba(0, 0, 0, .6);
    --shadow-up: 0 -8px 24px rgba(0, 0, 0, .4);
    --scrim: rgba(0, 0, 0, .6);
    --slot-line: #5a534a;
    --map-frame: #5a534a;   /* a light map inside a dark card gets a hairline */
    color-scheme: dark;
    --pr-tint-k: 55%;   /* «Стоимость»: the rows' tints of the script, thinner on the dark card */
  }
  html:not([data-theme="light"]) body.cab #page-dash {
    --dz-canvas: #22201c; --dz-paper: #2c2925; --dz-paper-2: #35312c; --dz-stone: #403b34;
    --dz-line: #433e37; --dz-line-2: #5a534a;
    --dz-ink: #f3eee6; --dz-ink-2: #cbc1b3; --dz-ink-h: #ffffff; --dz-on-ink: #1d1a15;
    --dz-hover: rgb(243 238 230 / .08); --dz-wash: rgb(243 238 230 / .09); --dz-wash-2: rgb(243 238 230 / .16); --dz-veil: rgb(255 255 255 / .16);
    --dz-sun: #1b4d42; --dz-sun-soft: #1c3933; --dz-sun-art: #16a384;
    --dz-lilac: #37306a; --dz-lilac-soft: #2f2b4f; --dz-lilac-ink: #d6cfff; --dz-lilac-art: #8c79e0;
    --dz-rose: #553620; --dz-rose-soft: #3e2d1e; --dz-rose-art: #d5753a;
    --dz-act: #5cc8b6; --dz-act-h: #7ad6c6; --dz-on-act: #0f2420;
    --dz-red-bg: #4b241e; --dz-red-ink: #ffab9e; --dz-red: #cf3f4c;
    --dz-amber-bg: #463619; --dz-amber-ink: #ffd27a; --dz-amber: #c8800d;
    --dz-green-bg: #1e3d2b; --dz-green-ink: #94dfae; --dz-green: #2fa465;
    --dz-grey: #8a8073;
    /* the zones' small squares and the other competitors' dots: bright marks, not the deep sheets under the bands (theme.css, 16) */
    --dz-mark-sun: #16a384; --dz-mark-lilac: #8c79e0; --dz-mark-rose: #d5753a; --dz-mark-other: #9a92c8;   /* 3.5 : 1 at its .8 opacity on the inset, greyer than the competitor in focus */
  }
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body.cab {
  /* surfaces: a warm graphite canvas, the cards a step lighter */
  --page: #22201c; --surface: #2c2925; --tint: #35312c; --panel: #3a362f; --stone: #403b34;
  --fg: #f3eee6; --fg-2: #cbc1b3; --fg-3: #b3a899;            /* 12.5 : 1, 8.1 : 1, 6 : 1 on a card */
  --line: #433e37; --line-strong: #5a534a; --field-line: #7a7165;
  --hover: rgba(243, 238, 230, .08);
  /* the action lighter, with dark text (8 : 1); the ink turns light, so the open item is a light pill */
  --accent: #5cc8b6; --accent-h: #7ad6c6; --on-accent: #0f2420; --accent-tint: #1d3a35;
  --ink: #f3eee6; --ink-h: #ffffff; --on-ink: #1d1a15;
  /* the zones: their own dark steps — marks inside L 0.48–0.67 (dataviz validator, dark card), deep sheets under light text */
  --you: #16a384; --you-sheet: #1f4a40; --you-soft: #1c3933; --you-art: #16a384;
  --rival: #8c79e0; --rival-sheet: #3b3568; --rival-soft: #2f2b4f; --rival-ink: #d6cfff; --rival-art: #8c79e0;
  --event: #d5753a; --event-sheet: #553620; --event-soft: #3e2d1e; --event-ink: #ffcfa3; --event-art: #d5753a;
  /* the traffic light: dots validated on the dark card (CVD 7.9, legal with the word beside them), inks light on deep grounds */
  --red-bg: #4b241e; --red-ink: #ffab9e; --red-dot: #cf3f4c;
  --amber-bg: #463619; --amber-ink: #ffd27a; --amber-dot: #c8800d;
  --green-bg: #1e3d2b; --green-ink: #94dfae; --green-dot: #2fa465;
  --sched: #ffd27a; --on-sched: #1d1a15; --warn-bg: #463619; --ok: #94dfae;
  --sat-g: #2fa465; --sat-y: #c8800d; --sat-r: #cf3f4c; --sat-u: #8a8073;
  /* the data scale of cabinet-theme.css, dim to bright (the ordinal check passes on the dark card); the maps keep the light one */
  --d1: #5f57a4; --d2: #726ac0; --d3: #867fd7; --d4: #9b96e9; --d5: #b2aef5; --d6: #cccbfe;
  --ld-full: #b2aef5; --ld-mid: #867fd7; --ld-low: #5f57a4; --ld-full-t: #1d1a15; --ld-mid-t: #1d1a15; --ld-low-t: #f3eee6;
  /* what floats */
  --shadow-float: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, .6);
  --shadow-up: 0 -8px 24px rgba(0, 0, 0, .4);
  --scrim: rgba(0, 0, 0, .6);
  --slot-line: #5a534a;
  --map-frame: #5a534a;   /* a light map inside a dark card gets a hairline */
  color-scheme: dark;
  --pr-tint-k: 55%;   /* «Стоимость»: the rows' tints of the script, thinner on the dark card */
}
html[data-theme="dark"] body.cab #page-dash {
  --dz-canvas: #22201c; --dz-paper: #2c2925; --dz-paper-2: #35312c; --dz-stone: #403b34;
  --dz-line: #433e37; --dz-line-2: #5a534a;
  --dz-ink: #f3eee6; --dz-ink-2: #cbc1b3; --dz-ink-h: #ffffff; --dz-on-ink: #1d1a15;
  --dz-hover: rgb(243 238 230 / .08); --dz-wash: rgb(243 238 230 / .09); --dz-wash-2: rgb(243 238 230 / .16); --dz-veil: rgb(255 255 255 / .16);
  --dz-sun: #1b4d42; --dz-sun-soft: #1c3933; --dz-sun-art: #16a384;
  --dz-lilac: #37306a; --dz-lilac-soft: #2f2b4f; --dz-lilac-ink: #d6cfff; --dz-lilac-art: #8c79e0;
  --dz-rose: #553620; --dz-rose-soft: #3e2d1e; --dz-rose-art: #d5753a;
  --dz-act: #5cc8b6; --dz-act-h: #7ad6c6; --dz-on-act: #0f2420;
  --dz-red-bg: #4b241e; --dz-red-ink: #ffab9e; --dz-red: #cf3f4c;
  --dz-amber-bg: #463619; --dz-amber-ink: #ffd27a; --dz-amber: #c8800d;
  --dz-green-bg: #1e3d2b; --dz-green-ink: #94dfae; --dz-green: #2fa465;
  --dz-grey: #8a8073;
  /* the zones' small squares and the other competitors' dots: bright marks, not the deep sheets under the bands (theme.css, 16) */
  --dz-mark-sun: #16a384; --dz-mark-lilac: #8c79e0; --dz-mark-rose: #d5753a; --dz-mark-other: #9a92c8;   /* 3.5 : 1 at its .8 opacity on the inset, greyer than the competitor in focus */
}

/* ===================================== 2. Sizes, faces and the icons (no colours) ===================================== */
body.cab {
  --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Onest", system-ui, sans-serif;
  --mono: var(--font);   /* the figures' face, the text's: every var(--mono) of cabinet-theme.css, dash.css and mailings.css («Цифры» at the end) */
  --r-card: 24px; --r-in: 16px; --r-ctl: 14px; --r-pill: 9999px;
  --side: 260px;
  /* the menu's icons (cab/m2's set), drawn by a mask in the text's colour */
  --i-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  --i-windows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='3'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3Cpath d='M9 15h6' stroke-dasharray='2 2.2'/%3E%3C/svg%3E");
  --i-rivals: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h8v10H3zM13 6h8v14h-8z'/%3E%3Cpath d='M6 14h2M16 10h2M16 14h2'/%3E%3C/svg%3E");
  --i-compare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V9M12 20V4M19 20v-7'/%3E%3C/svg%3E");
  --i-price: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5 11 5h8v8l-7.5 7.5a1.5 1.5 0 0 1-2.1 0l-5.9-5.9a1.5 1.5 0 0 1 0-2.1z'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.3'/%3E%3C/svg%3E");
  --i-place: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c.6-3.6 3-5.5 6-5.5s5.4 1.9 6 5.5'/%3E%3Cpath d='M16 4.8a3 3 0 0 1 0 6.2M18 14.8c1.6.7 2.6 2.3 3 5.2'/%3E%3C/svg%3E");
  --i-leads: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h3l8-4v14l-8-4H4z'/%3E%3Cpath d='M7 15l1.5 5h2.5L10 15.6M18.5 9.5a3.5 3.5 0 0 1 0 5'/%3E%3C/svg%3E");
  --i-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19 10 13l3.5 3.5L20 10'/%3E%3Cpath d='M15 10h5v5'/%3E%3C/svg%3E");
  --i-company: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 5.5 4h13L20 9.5M4 9.5h16M4 9.5a2.7 2.7 0 0 0 5.3 0 2.7 2.7 0 0 0 5.4 0 2.7 2.7 0 0 0 5.3 0M5.5 12.5V20h13v-7.5'/%3E%3Cpath d='M10 20v-4.5h4V20'/%3E%3C/svg%3E");
  --i-memory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h10l3 3v13H6z'/%3E%3Cpath d='M9 10h7M9 13.5h7M9 17h4'/%3E%3C/svg%3E");
  --i-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='18.5' cy='12' r='1.6'/%3E%3C/svg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9'/%3E%3C/svg%3E");
}

/* ===================================== 3. The page: canvas, text, links, focus ===================================== */
body.cab { background: var(--page); color: var(--fg); font: 400 15px/1.5 var(--font); accent-color: var(--accent); }
body.cab ::selection { background: var(--you-sheet); color: var(--fg); }
body.cab :is(h1, h2, h3, h4):not(:where(#dash-box *, .d-dock *, .d-sheet *)) { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
body.cab a:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { color: var(--fg); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
body.cab a:not(:where(#dash-box *, .d-dock *, .d-sheet *)):hover { color: var(--accent); }
body.cab :focus-visible:not(:where(#dash-box *, .d-dock *, .d-sheet *, .d-fab, .d-askbar)) { outline: 3px solid var(--ink); outline-offset: 2px; }
body.cab ::placeholder { color: var(--fg-3); opacity: 1; }
body.cab .cab-note:not(:where(#dash-box *)) { font-size: 13px; color: var(--fg-2); }
body.cab .cab-note .num { color: var(--fg); }
body.cab .cap:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { font-size: 12px; color: var(--fg-2); }

/* ===================================== 4. The shell: the menu, the phone's top bar and tabs ===================================== */
body.cab .cab-side { padding: 16px 8px 16px 16px; border-right: 0; background: transparent; gap: 12px; overflow-y: auto; overscroll-behavior: contain; }
body.cab .cab-brandrow { min-height: 44px; gap: 12px; padding: 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
/* the mark of the site's icon (favicon.svg): a teal tile with four squares, one of them in your salon's teal; its letters stay for nobody */
body.cab .cab-mark { flex: none; width: 32px; height: 32px; border-radius: 9px; font-size: 0; color: transparent;
  background: linear-gradient(var(--mark-sq), var(--mark-sq)) 7px 7px / 8px 8px no-repeat, linear-gradient(var(--mark-sq), var(--mark-sq)) 17px 7px / 8px 8px no-repeat,
    linear-gradient(var(--mark-sq), var(--mark-sq)) 7px 17px / 8px 8px no-repeat, linear-gradient(var(--mark-mint), var(--mark-mint)) 17px 17px / 8px 8px no-repeat, var(--mark-tile); }
body.cab .cab-co { gap: 2px; padding: 14px 36px 14px 16px; border: 0; border-radius: 20px; background: var(--surface); }
body.cab .cab-co[aria-current] { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 2px var(--ink); }
body.cab .cab-co b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
body.cab .cab-co span { font-size: 12px; color: var(--fg-2); }
body.cab .cab-chev { right: 12px; font-size: 22px; color: var(--fg-2); }
body.cab .cab-nav { gap: 2px; }
body.cab .cab-nav .cab-grp { margin: 14px 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--fg-2); }
body.cab .cab-nav a { justify-content: flex-start; gap: 10px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill); color: var(--fg); font: 500 14px/1.25 var(--font); white-space: nowrap; }
body.cab .cab-nav a:hover { background: var(--hover); color: var(--fg); }
body.cab .cab-nav a[aria-current] { background: var(--ink); color: var(--on-ink); font-weight: 500; }
body.cab .cab-nav a:focus-visible { outline-offset: 1px; }
body.cab .cab-nav a::before, body.cab .cab-nav .cab-soon::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--i, none) center / 20px 20px no-repeat; mask: var(--i, none) center / 20px 20px no-repeat; }
body.cab .cab-nav a .num { margin-left: auto; flex: none; padding: 2px 7px; border-radius: var(--r-pill); background: var(--surface); color: var(--fg-2); font-size: 12px; font-weight: 500; line-height: 1.4; }
body.cab .cab-nav a[aria-current] .num { color: var(--fg); }
body.cab .cab-nav .cab-soon { justify-content: flex-start; gap: 10px; white-space: nowrap; min-height: 40px; padding: 0 12px; color: var(--fg-3); font: 500 14px/1.25 var(--font); }
body.cab .cab-soon small { margin-left: auto; padding: 1px 7px; border: 0; border-radius: var(--r-pill); background: var(--panel); color: var(--fg-2); font-size: 12px; font-weight: 500; }
body.cab .cab-foot { padding: 12px 12px 0; font-size: 12px; color: var(--fg-2); }
/* which icon: by the page an item opens (cabinet.html and primer.html); «Расширить бизнес», the one «скоро» left since «Лидогенерация»
   opened (the owner, 04.11.2026: «открой раздел «лидогенерация»»), by its class */
body.cab :is(.cab-nav, .cab-tabbar) [data-page=dash] { --i: var(--i-dash); }
body.cab :is(.cab-nav, .cab-tabbar) [data-page=windows] { --i: var(--i-windows); }
body.cab :is(.cab-nav, .cab-tabbar) [data-page=rivals] { --i: var(--i-rivals); }
body.cab .cab-nav [data-page=compare] { --i: var(--i-compare); }
body.cab .cab-nav [data-page=price] { --i: var(--i-price); }
body.cab .cab-nav :is([data-page=place], [data-page=area]) { --i: var(--i-place); }
body.cab .cab-nav [data-page=target] { --i: var(--i-target); }
body.cab .cab-nav [data-page=leads] { --i: var(--i-leads); }
body.cab .cab-nav :is(.cab-soon, [data-page=expand]) { --i: var(--i-expand); }
body.cab .cab-nav [data-page=company] { --i: var(--i-company); }
body.cab .cab-nav [data-page=memory] { --i: var(--i-memory); }
body.cab .cab-tabbar [data-page=more] { --i: var(--i-more); }

/* ===================================== 5. The page's head ===================================== */
body.cab .cab-main { padding: 28px 28px 56px; }
body.cab .cab-ph:not(:where(#dash-box *)) { gap: 8px 20px; margin-bottom: 20px; align-items: flex-end; }
body.cab .cab-h1:not(:where(#dash-box *)) { font-family: var(--font-display); font-size: 36px; line-height: 1.05; font-weight: 600; letter-spacing: -.035em; }
body.cab .cab-meta { padding-bottom: 4px; }

/* ===================================== 6. Cards and grounds ===================================== */
body.cab :is(.t-card, .cab-card2, .cab-day, .cab-info, #cab-own .sch, .cab-client, .cab-card, .cab-wmap, .riv-list, .riv-map, .pl-map, .pl-mapcard, .pl-stats,
  .cmp-card, .cmp-top, .cmp-sum > .cmp-part, .riv-start, .riv-due, .pl-wait):not(:where(#dash-box *, .d-dock *, .d-sheet *)) {
  border-color: transparent; border-radius: var(--r-card); background-color: var(--surface); }
body.cab .cab-card2 .cab-info { padding: 0; border-radius: 0; }   /* «О компании»: the list inside its card, not a card in a card */
body.cab .ex-map { border-color: var(--line); border-radius: var(--r-in); }   /* a map inside a white card keeps its edge */
body.cab .t-card.pad:not(:where(#dash-box *)) { padding: 22px 24px; }
body.cab .riv-due { border-color: transparent; box-shadow: inset 4px 0 0 var(--amber-dot); }
body.cab .t-banner, body.cab .pl-send { border: 0; border-radius: var(--r-in); background: var(--surface); }
body.cab :is(.t-job, .pl-ext > div, .lg-places, .cmp-miss, .riv-run, .cmp-prog):not(:where(#dash-box *, .d-dock *, .d-sheet *)) { border: 0; border-radius: var(--r-in); background: var(--tint); }
body.cab .pl-ext > div:first-child { background: var(--you-soft); }
body.cab .pl-right > .cmp-part { padding: 22px 24px; border-radius: var(--r-card); background: var(--surface); }   /* «Что видно на месте»: a card like its neighbours */
body.cab .cab-empty:not(:where(#dash-box *)) { border: 1.5px dashed var(--line-strong); border-radius: var(--r-card); background: var(--tint); }
body.cab .cab-empty b { font-family: var(--font-display); font-weight: 600; }
body.cab .t-ch h2, body.cab .cab-h2, body.cab .cmp-h, body.cab .lg-card-h h2 { font-weight: 600; letter-spacing: -.02em; }
body.cab .t-ch h2:not(:where(#dash-box *)) { font-size: 18px; }
body.cab .cab-h2 { font-size: 18px; }
body.cab .cmp-h { font-size: 18px; }
body.cab .cmp-card .cmp-h { font-size: 24px; letter-spacing: -.03em; }
body.cab .lg-card-h h2 { font-size: 19px; }
body.cab .cmp-part-h h4, body.cab .riv-sum b, body.cab .tg-svc .tg-h b, body.cab .set-row b, body.cab .set-co b, body.cab .cab-pick b { font-weight: 600; }
body.cab :is(.t-strip > div, .pl-stat):not(:where(#dash-box *)) { border-color: var(--line); }
body.cab .t-metric .cap:not(:where(#dash-box *)) { font-size: 13px; color: var(--fg-2); }
body.cab .t-bar:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { background: var(--panel); }
body.cab .t-bar.act i, body.cab .cmp-bar i { background: var(--accent); }
body.cab .cmp-bar { background: var(--panel); }

/* ===================================== 7. Buttons: pills; one teal action, the rest outlined in ink ===================================== */
body.cab .btn:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { height: auto; min-height: 40px; padding: 0 18px; border: 1.5px solid var(--fg); border-radius: var(--r-pill);
  background: transparent; color: var(--fg); font: 600 14px/1.2 var(--font); letter-spacing: -.005em; gap: 8px; text-decoration: none; }
body.cab .btn:not(:where(#dash-box *, .d-dock *, .d-sheet *)):hover { background: var(--hover); border-color: var(--fg); color: var(--fg); }
body.cab .btn.btn-primary:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
body.cab .btn.btn-primary:not(:where(#dash-box *, .d-dock *, .d-sheet *)):hover { border-color: var(--accent-h); background: var(--accent-h); color: var(--on-accent); }
body.cab .btn.btn-primary:not(:where(#dash-box *, .d-dock *, .d-sheet *)):disabled { border-color: var(--panel); background: var(--panel); color: var(--fg-3); }
body.cab .btn.btn-ghost:not(.btn-line):not(:where(#dash-box *, .d-dock *, .d-sheet *)) { border-color: transparent; padding: 0 12px; color: var(--fg); }
body.cab .btn.btn-ghost:not(.btn-line):not(:where(#dash-box *, .d-dock *, .d-sheet *)):hover { background: var(--hover); border-color: transparent; }
body.cab .btn.btn-ghost.btn-line:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { padding: 0 18px; border-color: var(--fg); background: transparent; color: var(--fg); }
body.cab .btn.btn-sm:not(:where(#dash-box *, .d-dock *, .d-sheet *)), body.cab .btn.btn-ghost.btn-line.btn-sm:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { min-height: 36px; padding: 0 14px; font-size: 13px; }
body.cab .btn.btn-ghost.btn-sm:not(.btn-line):not(:where(#dash-box *, .d-dock *, .d-sheet *)) { padding: 0 10px; }
body.cab .btn:not(:where(#dash-box *, .d-dock *, .d-sheet *)) svg { width: 16px; height: 16px; }
body.cab .btn:not(:where(#dash-box *, .d-dock *, .d-sheet *)):disabled:not(.btn-primary) { border-color: var(--line-strong); color: var(--fg-3); background: transparent; }
/* the cabinet's own small buttons, now pills like the rest */
body.cab .cab-sw { min-height: 40px; height: auto; padding: 0 16px; border: 1.5px solid var(--fg); background: transparent; color: var(--fg); font-weight: 600; font-size: 14px; }
body.cab .cab-sw:hover { background: var(--hover); }
body.cab .cab-sw[aria-expanded=true] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
body.cab .riv-cmp, body.cab .riv-f-x .riv-up { text-decoration: none; border: 1.5px solid var(--fg); border-radius: var(--r-pill); background: transparent; color: var(--fg); font-weight: 600; }
body.cab .riv-cmp:hover, body.cab .riv-f-x .riv-up:hover { background: var(--hover); border-color: var(--fg); }
body.cab .cmp-look-tag, body.cab .cmp-link { color: var(--fg); text-decoration-thickness: 1.5px; }
body.cab .cmp-look-tag:hover, body.cab .cmp-link:hover { color: var(--accent); }

/* ===================================== 8. Chips, toggles, segmented choices, tabs ===================================== */
body.cab :is(.tg, .seg button):not(:where(#dash-box *, .d-dock *, .d-sheet *)) { height: auto; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill); background: var(--surface); color: var(--fg); font: 500 14px/1.2 var(--font); box-shadow: none; }
body.cab :is(.tg, .seg button):not(:where(#dash-box *, .d-dock *, .d-sheet *)):hover:not(:disabled) { border-color: var(--fg); }
body.cab :is(.tg[aria-pressed=true], .seg button[aria-selected=true]):not(:where(#dash-box *, .d-dock *, .d-sheet *)) { padding: 0 14px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--on-ink); font-weight: 600; }
body.cab :is(.tg, .seg button):not(:where(#dash-box *, .d-dock *, .d-sheet *)) .num { font-size: 12px; color: var(--fg-2); }
body.cab :is(.tg[aria-pressed=true], .seg button[aria-selected=true]):not(:where(#dash-box *, .d-dock *, .d-sheet *)) .num { color: var(--on-ink); opacity: .8; }
body.cab .seg:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { gap: 6px; }
body.cab .riv-l, body.cab .pl-layers h3 { font-size: 12px; font-weight: 600; color: var(--fg-2); }
/* tabs of a section: a stone track, the open one an ink pill */
body.cab .lg-tabs { display: flex; width: fit-content; max-width: 100%; gap: 2px; margin: -4px 0 20px; padding: 4px; border: 0; border-radius: var(--r-pill); background: var(--stone); }
body.cab .lg-tabs a { display: inline-flex; align-items: center; min-height: 36px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--r-pill); color: var(--fg); font-size: 14px; font-weight: 600; }
body.cab .lg-tabs a:hover { background: var(--hover); color: var(--fg); }
body.cab .lg-tabs a[aria-current=page] { background: var(--ink); color: var(--on-ink); }
body.cab .cmp-tabs { gap: 2px; padding: 4px; border: 0; border-radius: var(--r-pill); background: var(--stone); width: fit-content; max-width: 100%; margin-top: 0; }
body.cab .cmp-tabs button { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); color: var(--fg); font-weight: 600; }
body.cab .cmp-tabs button:hover { background: var(--hover); }
body.cab .cmp-tabs button:is([aria-selected=true], [aria-current]) { background: var(--ink); color: var(--on-ink); }
body.cab .cmp-tabs .num { font-size: 12px; }
/* a window of time to pick (Лидогенерация): a light chip with an empty ring at its right; picked, a see-through green with a green
   ring and a tick (the owner, 04.11.2026: «не просто белая, а потом чёрная… зелёные галочки… не ярко-зелёный, а полупрозрачный»).
   The ring's room is kept in both states, so a chip does not change its width when picked. */
body.cab .lg-w { position: relative; padding: 4px 36px 4px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-in); background: var(--surface); color: var(--fg); }
body.cab .lg-w::before, body.cab .lg-w::after { content: ""; position: absolute; top: 50%; right: 11px; width: 18px; height: 18px; margin-top: -9px; box-sizing: border-box; border-radius: 50%; }
body.cab .lg-w::before { border: 1.5px solid var(--field-line); }
body.cab .lg-w:hover { border-color: var(--field-line); background: var(--tint); }
body.cab .lg-w small { font-size: 12px; color: var(--fg-2); }
body.cab .lg-w[aria-pressed=true] { padding: 4px 36px 4px 12px; border-color: var(--green-dot); background: color-mix(in srgb, var(--green-dot) 16%, transparent); color: var(--fg); }
body.cab .lg-w[aria-pressed=true]:hover { background: color-mix(in srgb, var(--green-dot) 24%, transparent); }
body.cab .lg-w[aria-pressed=true]::before { border: 0; background: var(--green-dot); }
body.cab .lg-w[aria-pressed=true]::after { background: var(--surface); -webkit-mask: var(--i-tick) center / 12px 12px no-repeat; mask: var(--i-tick) center / 12px 12px no-repeat; }
body.cab .ed-t { border: 1.5px solid var(--line-strong); }

/* ===================================== 9. Statuses, badges, marks ===================================== */
body.cab .st:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { height: auto; min-height: 24px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--panel); color: var(--fg-2); font-size: 12px; font-weight: 600; line-height: 1.3; }
body.cab .st.ok:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { background: var(--green-bg); color: var(--green-ink); }
body.cab .st.warn:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { background: var(--amber-bg); color: var(--amber-ink); }
body.cab .st.act:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { background: var(--accent-tint); color: var(--accent); }
body.cab .badge:not(:where(#dash-box *)) { height: auto; min-height: 22px; padding: 1px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
body.cab .badge.grey:not(:where(#dash-box *)) { background: var(--panel); color: var(--fg-2); }
body.cab .riv-new { background: var(--you-soft); color: var(--accent); }
body.cab .lk { height: auto; min-height: 22px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
body.cab .lk-high { background: var(--rival-sheet); color: var(--rival-ink); }
body.cab .lk-mid { background: var(--rival-soft); color: var(--rival-ink); }
body.cab .val { border-radius: 8px; background: var(--panel); font-size: 12px; }
body.cab .lg-n { background: var(--you-sheet); color: var(--fg); font-weight: 600; }
body.cab .t-step .k { border-color: var(--line-strong); }
body.cab .t-step .k.done { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
body.cab .cmp-diff.up { color: var(--red-ink); }
body.cab .cmp-diff.down { color: var(--green-ink); }
body.cab .lg-count.over, body.cab .lg-mark { color: var(--amber-ink); }

/* ===================================== 10. Tables ===================================== */
body.cab .cmp-t thead th { background: var(--surface); font-size: 12px; font-weight: 600; color: var(--fg-2); letter-spacing: 0; border-bottom-color: var(--line-strong); }
body.cab .cmp-t th, body.cab .cmp-t td { border-bottom-color: var(--line); }
body.cab .cmp-t tr:hover td, body.cab .cmp-t tr:hover th { background: var(--tint); }
body.cab .cmp-t tbody th { font-weight: 600; }
body.cab .cmp-t .cmp-g th { font-size: 13px; font-weight: 600; color: var(--fg); }
body.cab :is(.cmp-t tr[aria-selected=true] th, .cmp-t tr[aria-selected=true] td) { background: var(--tint); box-shadow: inset 0 2px 0 var(--ink), inset 0 -2px 0 var(--ink); }
body.cab .cmp-also { color: var(--fg-3); }

/* ===================================== 11. Selections in lists and over maps ===================================== */
body.cab :is(.riv-row.on, .tg-svc.on) { background: var(--tint); box-shadow: inset 0 0 0 2px var(--ink); }
body.cab .riv-row.picked:not(.on) { background: var(--rival-soft); }
body.cab .riv-ring h3 { font-size: 12px; font-weight: 600; color: var(--fg-2); }
body.cab .riv-row .nm i { font-size: 12px; }
body.cab .riv-chip { border: 1.5px solid var(--rival); background: var(--rival-soft); }
body.cab .riv-chip-x { width: 32px; height: 32px; font-size: 12px; }
body.cab .riv-pickbox { box-shadow: none; border-bottom-color: var(--line); }
body.cab .tg-rivals button:hover { background: var(--tint); }

/* ===================================== 12. Form fields ===================================== */
body.cab :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden], [type=submit], [type=button]), select, textarea):not(:where(#dash-box *, .d-dock *, .d-sheet *, .maplibregl-map *)) {
  min-height: 40px; border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); background-color: var(--surface); color: var(--fg); }
body.cab :is(input, select, textarea):not(:where(#dash-box *, .d-dock *, .d-sheet *, .maplibregl-map *)):hover:not(:disabled):not([type=checkbox], [type=radio], [type=range]) { border-color: var(--field-line); }
body.cab :is(input, select, textarea):not(:where(#dash-box *, .d-dock *, .d-sheet *, .maplibregl-map *)):focus-visible:not([type=checkbox], [type=radio], [type=range]) { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
body.cab .cab-f input { height: 52px; border-radius: var(--r-ctl); }
body.cab .cab-f input[aria-invalid=true] { border-color: var(--red-ink); }
body.cab .cab-f > span, body.cab .lg-f, body.cab .ex-sel, body.cab .cmp-pick { font-size: 13px; font-weight: 600; color: var(--fg-2); }
body.cab :is(.cmp-pick select, .ex-sel select) { font-weight: 400; }
body.cab .set-sw { background: var(--field-line); }
body.cab .set-sw::after { background: var(--knob); box-shadow: none; }
body.cab .set-sw:checked { background: var(--accent); }

/* ===================================== 13. What folds: summary with a chevron ===================================== */
body.cab details > summary:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; min-height: 36px;
  padding: 0 10px; margin-inline: -10px; border-radius: var(--r-pill); color: var(--fg); font-size: 14px; font-weight: 600; list-style: none; cursor: pointer; }
body.cab details > summary:not(:where(#dash-box *, .d-dock *, .d-sheet *))::-webkit-details-marker { display: none; }
body.cab details > summary:not(:where(#dash-box *, .d-dock *, .d-sheet *))::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--i-chev) center / 18px 18px no-repeat; mask: var(--i-chev) center / 18px 18px no-repeat; }
body.cab details[open] > summary:not(:where(#dash-box *, .d-dock *, .d-sheet *))::after { transform: rotate(180deg); }
body.cab details > summary:not(:where(#dash-box *, .d-dock *, .d-sheet *)):hover { background: var(--hover); }
/* the pages' own summaries, which name their colour and size more strongly than the rule above */
body.cab :is(.cmp-cov, .pl-how, .lg-how, .riv-gone, .pr-who, .pr-more, .ml-fields, .cl-wins, .ld-how, .pl-pts) > summary { color: var(--fg); font-size: 14px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { body.cab details > summary:not(:where(#dash-box *, .d-dock *, .d-sheet *))::after { transition: transform .15s ease; } }

/* ===================================== 14. What floats: panels over the maps, the toast, the lists ===================================== */
body.cab :is(.map-legend, .map-msg, .riv-draw, .riv-searching, .riv-sheet, .pop) { border-color: transparent; border-radius: var(--r-in); box-shadow: var(--shadow-float); }
body.cab .riv-sheet { border-radius: 20px; }
body.cab .cl-dlg { border-radius: 20px; box-shadow: var(--shadow-pop); }
body.cab .rko { border-color: transparent; border-radius: 20px; box-shadow: var(--shadow-float); }
body.cab .pop { border-color: transparent; box-shadow: var(--shadow-float); }
body.cab .toast { border-radius: var(--r-in); background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-pop); }
/* a long toast wraps instead of running past both edges of a phone (the main session, 04.11.2026, at 390: «не переносится на вторую
   строку и обрезан с обеих сторон экрана»); on the phone it stands over the menu, and over the bar «Спросить…» where that is shown */
body.cab .toast { width: max-content; max-width: min(560px, calc(100vw - 32px)); white-space: normal; text-align: center; text-wrap: balance; line-height: 1.35; }
@media (max-width: 900px) {
  body.cab .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.cab:has(.d-askbar:not([hidden])) .toast { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); }
}
body.cab .cab-list { border: 0; border-radius: var(--r-in); background: var(--tint); }
body.cab .cab-list li { border-radius: 12px; }
body.cab .cab-list li[aria-selected=true] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
body.cab .cab-pick { border: 0; border-radius: var(--r-in); background: var(--you-soft); }
body.cab .cab-wmap-note { border: 0; border-radius: 12px; box-shadow: var(--shadow-float); }
body.cab .cab-err, body.cab .cmp-err { border-radius: var(--r-in); background: var(--red-bg); color: var(--red-ink); }
/* the maps are light in every theme: their own data scale, and a hairline where they stand in a dark card */
body.cab :is(.riv-map, .pl-map, .ex-map, .cab-wmap, .tg-mapcard .map, .pl-mtsmap .map) {
  --d1: var(--map-d1); --d2: var(--map-d2); --d3: var(--map-d3); --d4: var(--map-d4); --d5: var(--map-d5); --d6: var(--map-d6); --res: var(--map-res);
  outline: 1px solid var(--map-frame); outline-offset: -1px; }
/* the marks drawn by the cabinet over the light basemap */
body.cab .cab-wdot { border-color: var(--map-area); background: var(--on-map); }
body.cab .ex-mk { box-shadow: 0 1px 3px var(--map-mark-shadow); }
body.cab .ex-mk:hover { color: var(--on-map); }
body.cab .riv-rt { background: var(--map-label); color: var(--map-ink-2); }
body.cab .riv-rt.on { background: var(--on-map); color: var(--map-ink); box-shadow: 0 0 0 1px var(--map-edge); }
body.cab .pl-st.rail { color: var(--on-map); box-shadow: 0 0 0 2px var(--on-map); }
body.cab .pl-st.bus { background: var(--on-map); border-color: var(--map-ink); }
body.cab :is(.pp-mk i, .pl-legend .mk) { border-color: var(--on-map); }
body.cab .tg-ring { background: var(--on-map); }
body.cab :is(.tg-dot.none, .tg-legend .ex-cell) { background: var(--map-none); }
body.cab .tg-legend .sw.dash { border-top-color: var(--map-area); }
body.cab :is(.tg-legend .sw.terr, .pl-legend .sw.terr) { border-top-color: var(--map-ink); }

/* ===================================== 15. The splash and the sign-in ===================================== */
body.cab #splash { --canvas: var(--page); --canvas-bg: none; --canvas-fg: var(--fg); --canvas-fg-2: var(--fg-2); }
body.cab .sp-t { font-family: var(--font-display); font-weight: 600; letter-spacing: -.045em; }
body.cab .sp-slots { gap: 8px; }
body.cab .sp-slots i { width: 32px; height: 22px; border-radius: 7px; border: 1.5px solid var(--slot-line); animation-name: th-sp-fill; }
body.cab .sp-slots i:nth-child(7) { animation-name: th-sp-fill-last; }
@keyframes th-sp-fill { to { background: var(--you); border-color: var(--you); } }
@keyframes th-sp-fill-last { to { background: var(--accent); border-color: var(--accent); } }
@media (prefers-reduced-motion: reduce) {
  body.cab .sp-slots i:nth-child(n) { animation: none; background: var(--you); border-color: var(--you); }
  body.cab .sp-slots i:nth-child(n):last-child { background: var(--accent); border-color: var(--accent); }
}
body.cab .sp-go { min-height: 56px; padding: 0 30px; font-size: 16px; }
body.cab .cab-in { background: var(--page); }
body.cab .cab-card { gap: 16px; padding: 32px; }
body.cab .cab-h { font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
body.cab .cab-lead { color: var(--fg-2); }
body.cab .cab-hint, body.cab .cab-st { font-size: 13px; color: var(--fg-2); }
body.cab .btn.au-co { border-radius: var(--r-in); }

/* ===================================== 16. The pages' own parts ===================================== */
/* «Свободные окна» */
body.cab .cab-day { padding: 20px 22px; }
body.cab .cab-day.on { border-color: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
body.cab .cab-day-h b { font-size: 13px; font-weight: 600; color: var(--fg-2); }
body.cab .cab-day-h span { font-size: 13px; color: var(--fg-2); }
body.cab .cab-fig small { font-size: 13px; color: var(--fg-2); }
body.cab .cab-meter { height: 8px; border-radius: var(--r-pill); background: var(--panel); }
body.cab .cab-free li b { font-weight: 600; }
body.cab .cab-free li span { font-family: var(--font); font-size: 13px; font-variant-numeric: tabular-nums; }
/* «О компании», «Настройки», «Ещё» */
body.cab .cab-info dt { color: var(--fg-2); font-size: 13px; }
body.cab .cab-more { padding: 4px 20px; }
body.cab .cab-more a { font-weight: 600; }
body.cab .cab-more a:hover { color: var(--accent); }
body.cab .cab-more a::after { color: var(--fg-2); }
body.cab .cab-more .cab-soon span { color: var(--fg-3); }
/* a pointer's hover only where there is a pointer: a finger's tap would leave the ring on */
@media (hover: hover) {
  body.cab .cab-co:not([aria-current]):hover, body.cab .cab-day:not(.on):hover { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
  body.cab .cab-list li:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
}
/* small print raised to 12 px */
body.cab :is(.cab-nav a .num, .riv-lv, .riv-cmp-on, .dm, .dm-h, .tg-keys, .tg-who, .tg-legend, .cmp-dl, .riv-searching) { font-size: max(12px, 1em); }
body.cab :is(.pl-legend .ends, .wk, .pl-hr, .pr-t thead th, .pr-t td small, .riv-rt, .office-mk b, .pl-st.rail, .pp-mk b, .fx-svc-h, .cg-svc small, .cg-svc em, .cg-n, .cg-p, .cg-c.busy span,
  .cg-sel, .ms-s small, .ld-k, .wk-d .num, .st-chips span, .pp-busy span) { font-size: 12px; }
body.cab :is(.fx-svc-h, .cg-svc small, .cg-svc em, .cg-c.busy span, .ld-k) { color: var(--fg-2); }
/* «Дэшборд» in the dark: its zones' squares and the other competitors' dots take bright marks (--dz-mark-*, the dark block only);
   in the light theme these fall back to dash.css's own colours, so nothing there changes */
body.cab .dz-j > i { background: var(--dz-mark-sun, var(--dz-sun)); }
body.cab .dz-j.rivals > i { background: var(--dz-mark-lilac, var(--dz-lilac)); }
body.cab .dz-j.events > i { background: var(--dz-mark-rose, var(--dz-rose)); }
body.cab .dz.sun .dz-sq { background: var(--dz-mark-sun, var(--dz-band)); }
body.cab .dz.lilac .dz-sq { background: var(--dz-mark-lilac, var(--dz-band)); }
body.cab .dz.rose .dz-sq { background: var(--dz-mark-rose, var(--dz-band)); }
body.cab .g-ot { fill: var(--dz-mark-other, var(--dz-lilac)); }
/* «Стоимость» */
body.cab .pr-svc[style] { background: color-mix(in srgb, var(--pr-tint, transparent) var(--pr-tint-k, 100%), transparent); }
body.cab .pr-t thead th { font-weight: 600; color: var(--fg-2); text-transform: none; letter-spacing: 0; }
body.cab .pr-t td small, body.cab .pr-note, body.cab .pr-ph span { color: var(--fg-2); }
body.cab .pr-svc { border-radius: var(--r-in); }
/* the open example (primer.html, primer.css): its own small print */
body.cab :is(.dm-top-note, .dm-riv.head, .dm-lbl) { font-size: 12px; color: var(--fg-2); }
body.cab .dm-riv.head { font-weight: 600; text-transform: none; letter-spacing: 0; }
body.cab .dm-hint { border-left: 0; border-radius: var(--r-in); background: var(--surface); }
body.cab .dm-ch { border: 1.5px solid var(--line-strong); border-radius: var(--r-in); }
body.cab .dm-ch:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ===================================== 17. The theme's switch (theme.js puts it in) ===================================== */
/* three radios as a stone track, the chosen one an ink pill; the radios stay focusable and read, only their circles are hidden */
body.cab .th-pick { min-width: 0; margin: 0; padding: 0; border: 0; }
body.cab .th-pick legend { margin: 0 0 8px; padding: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
body.cab .th-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--stone); }
body.cab .th-seg label { position: relative; display: grid; cursor: pointer; }
body.cab .th-seg input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.cab .th-seg span { display: grid; place-items: center; min-height: 44px; padding: 0 10px; border-radius: var(--r-pill); color: var(--fg); font-size: 14px; font-weight: 600; text-align: center; }
body.cab .th-seg input:checked + span { background: var(--ink); color: var(--on-ink); }
body.cab .th-seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { body.cab .th-seg input:not(:checked) + span:hover { background: var(--hover); } }
/* at the foot of the menu, over «Данные обновляются…»; there the words are a size smaller to fit three in 228 px */
body.cab .th-side { margin-top: auto; padding: 0 4px; }
body.cab .th-side legend { margin-left: 8px; }
body.cab .th-side .th-seg span { padding: 0 4px; font-size: 12px; }
body.cab .th-side + .cab-foot { margin-top: 0; }
body.cab .th-card { max-width: 760px; margin-top: 12px; }
body.cab #page-more .th-card { max-width: none; }

/* ===================================== 18. The phone ===================================== */
@media (max-width: 900px) {
  body.cab { font-size: 16px; }
  body.cab .cab-top:not([hidden]) { gap: 12px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); border-bottom: 0; background: var(--page); }
  body.cab .cab-topco { gap: 12px; min-height: 48px; }
  body.cab .cab-topco::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(var(--mark-sq), var(--mark-sq)) 8px 8px / 9px 9px no-repeat, linear-gradient(var(--mark-sq), var(--mark-sq)) 19px 8px / 9px 9px no-repeat,
      linear-gradient(var(--mark-sq), var(--mark-sq)) 8px 19px / 9px 9px no-repeat, linear-gradient(var(--mark-mint), var(--mark-mint)) 19px 19px / 9px 9px no-repeat, var(--mark-tile); }
  body.cab .cab-topco b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  body.cab .cab-topco[aria-current] { color: var(--fg); }
  body.cab .cab-topco[aria-current] b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
  body.cab .cab-main { padding: 8px 16px 96px; }
  body.cab .cab-h1:not(:where(#dash-box *)) { font-size: 30px; }
  body.cab .cab-ph:not(:where(#dash-box *)) { margin-bottom: 16px; }
  body.cab :is(.t-card, .cab-card2, .cab-day, .cab-info, #cab-own .sch, .cab-client, .riv-list, .cmp-card, .cmp-top, .cmp-sum > .cmp-part, .riv-start, .riv-due, .pl-wait, .pl-mapcard, .pl-stats):not(:where(#dash-box *, .d-dock *, .d-sheet *)) { border-radius: 20px; }
  /* the bottom tabs: an icon in a pill over the word, the open one an ink pill (cab/m2) */
  body.cab .cab-tabbar:not([hidden]) { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-top: 0; background: var(--surface); box-shadow: 0 -1px 0 var(--line); }
  body.cab .cab-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 0; border-radius: 12px; color: var(--fg-2); font-size: 12px; font-weight: 600; }
  body.cab .cab-tabbar a[aria-current] { color: var(--fg); font-weight: 600; }
  body.cab .cab-tabbar a i { display: grid; place-items: center; width: 52px; height: 28px; border-radius: var(--r-pill); background: transparent; opacity: 1; }
  body.cab .cab-tabbar a i::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--i, none) center / 22px 22px no-repeat; mask: var(--i, none) center / 22px 22px no-repeat; }
  body.cab .cab-tabbar a[aria-current] i { background: var(--ink); color: var(--on-ink); }
  /* 44 px to a finger, 16 px in a field (no zoom on focus) */
  body.cab .btn:not(:where(#dash-box *, .d-dock *, .d-sheet *)), body.cab .btn.btn-sm:not(:where(#dash-box *, .d-dock *, .d-sheet *)), body.cab .btn.btn-ghost.btn-line.btn-sm:not(:where(#dash-box *, .d-dock *, .d-sheet *)),
  body.cab :is(.tg, .seg button, .cab-sw, .riv-cmp, .riv-f-x .riv-up, .lg-tabs a, .cmp-tabs button):not(:where(#dash-box *, .d-dock *, .d-sheet *)),
  body.cab details > summary:not(:where(#dash-box *, .d-dock *, .d-sheet *)) { min-height: 44px; }
  body.cab :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden], [type=submit], [type=button]), select, textarea):not(:where(#dash-box *, .d-dock *, .d-sheet *, .maplibregl-map *)) {
    min-height: 44px; font-size: 16px; }
  /* the tabs share the track in equal parts and a long name takes two lines, so none is cut at the screen's edge (the main session,
     04.11.2026, at 390: «Рекла…» of «Реклама Ozon» in «Продвинуть окна · МТС Маркетолог · Реклама Ozon») */
  body.cab .lg-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: auto; overflow: visible; border-radius: 22px; }
  body.cab .lg-tabs a { justify-content: center; padding: 4px 8px; border-radius: 18px; text-align: center; white-space: normal; line-height: 1.2; text-wrap: balance; }
  body.cab .cab-card { padding: 24px 20px; }
  body.cab .pl-hv { font-size: 12px; }
  body.cab .cl-foot { box-shadow: var(--shadow-up); }
  /* a link in running text: taller to the finger by its padding, the lines stay where they are */
  body.cab main :is(p, li, dd, td, span, small, em, b, label) > a:not([class]):not(:where(#dash-box *, .d-dock *, .d-sheet *)) { padding-block: 14px; }
  body.cab :is(.cmp-link, .cmp-look-tag, .cmp-dl, .ed-x):not(:where(#dash-box *, .d-dock *, .d-sheet *)) { min-height: 44px; min-width: 44px; }
  body.cab :is(.cmp-link, .cmp-dl) { display: inline-flex; align-items: center; }
  body.cab .cmp-look-tag { display: flex; align-items: center; }
  body.cab .cab-more { padding: 4px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  body.cab :is(.btn, .tg, .seg button, .cab-nav a, .cab-sw, .lg-tabs a, .cab-co, .cab-day) { transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s; }
}

/* ============ «Цена и предложения»: the five panels apart (the owner, 04.11.2026: «поправь дизайн, не нравится что всё слилось и
   какие-то деревенские надписи, шрифты»). Each panel a small card of its own on the canvas tint inside the white card, a plain title
   over its chart (Weights & Biases «System», Refero eba7517e: a card a chart, the title in plain words); the finding under the chart
   apart, under a line of its own (Mercury «Insights», Refero bb1d3ce5). The labels are headings of the small step in the text face, not stamps in capitals;
   the figures are in the text face with even digits instead of the monospace. The charts keep their size. Colours by the dashboard's
   variables, so the dark theme follows. ============ */
body.cab .dz-prices { gap: 10px; }
body.cab .dz-prices .dz-pn { gap: 8px; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--dz-canvas); }
body.cab .dz-prices > header + .dz-pn { padding-top: 12px; }
body.cab .dz-prices .dz-pn-h .dz-tag { padding: 0; border-radius: 0; background: none; color: var(--dz-ink); font: 600 15px/1.3 var(--dz-font);
  letter-spacing: -.01em; text-transform: none; }
body.cab .dz-prices .dz-pn-h small { font-size: 12.5px; }
body.cab .dz-prices .dz-pn-say { margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--dz-line-2); font-size: 14px; line-height: 1.45; }
/* a panel with nothing but its finding (an empty «Новое у конкурентов») has no chart to part it from: no second line under the head */
body.cab .dz-prices .dz-pn-h + .dz-pn-say { margin-top: 0; padding-top: 2px; border-top: 0; }
body.cab .dz-prices .num { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0; }
body.cab .dz-prices .g-rub { font: 600 12.5px var(--dz-font); font-variant-numeric: tabular-nums; }
body.cab .dz-prices .g-pc { font: 500 12px var(--dz-font); font-variant-numeric: tabular-nums; }
body.cab .dz-prices .dz-pn-pc { font: 600 13px var(--dz-font); font-variant-numeric: tabular-nums; }
body.cab .dz-prices .dz-chipx { background: var(--dz-paper); }
body.cab .dz-prices .dz-chipx i { font: 500 12px var(--dz-font); font-variant-numeric: tabular-nums; }
body.cab .dz-prices .dz-rank li::before { font: 600 12.5px var(--dz-font); font-variant-numeric: tabular-nums; }
/* the dots' rims take the panel's ground, so a dot does not wear a halo of another colour */
body.cab .dz-prices :is(circle.g-you, .g-rv, .g-me) { stroke: var(--dz-canvas); }
body.cab .dz-prices > footer { margin-top: 4px; }
@media (max-width: 640px) {
  body.cab .dz-prices .dz-pn { padding: 12px; border-radius: 16px; }
}
/* The panels' heads and the competitors' names stand out (the owner, 04.11.2026: «Можно как-нибудь заголовки и названия обвести,
   выделить, чтобы ещё лучше читалось», to «Конкуренты» of the same page: «типа такого стиля»). A panel's head is a band of its own
   on the soft teal of the zone, the number in an ink circle (.dz-pn-n), the title larger; a competitor in «Акции сейчас» and «За что
   хвалят» is named as in the rows of «Конкуренты» — a letter in a lilac circle (.dz-ava) and the name bold, the distance small. The
   offers' rows (one chart above them since de0e7c3) are a name line — letter, name, distance, the percent at the right — over the text. Until the markup has .dz-pn-n and .dz-ava, the band and the bold
   names hold without them. */
body.cab .dz-prices .dz-pn { padding-top: 0; overflow: hidden; }
body.cab .dz-prices > header + .dz-pn { padding-top: 0; }
body.cab .dz-prices .dz-pn-h { align-items: center; margin: 0 -14px 2px; padding: 9px 14px; border-bottom: 1px solid var(--dz-line); background: var(--dz-sun-soft); }
body.cab .dz-prices .dz-pn-h .dz-tag { display: inline-flex; align-items: center; gap: 10px; font: 700 16.5px/1.25 var(--dz-font); letter-spacing: -.015em; }
body.cab .dz-prices .dz-pn-n { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--dz-ink); color: var(--dz-on-ink); font: 700 13px var(--dz-font); font-style: normal; font-variant-numeric: tabular-nums; }
body.cab .dz-prices .dz-ava { width: 28px; height: 28px; background: var(--dz-lilac); color: var(--dz-ink); font: 700 13px var(--dz-font); }
body.cab .dz-prices .dz-promo li { grid-template-columns: minmax(0, 1fr); gap: 2px 12px; padding: 6px 0; }
body.cab .dz-prices .dz-promo li > b { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
body.cab .dz-prices .dz-promo li > b small { display: inline; margin-left: 8px; font-size: 12.5px; font-weight: 500; }
body.cab .dz-prices .dz-promo li > div { grid-column: 1 / -1; }
body.cab .dz-prices .dz-rank li { grid-template-columns: 22px 172px minmax(0, 1fr); align-items: center; }
body.cab .dz-prices .dz-rank li > b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
body.cab .dz-prices .dz-rank li.you > b { padding-left: 36px; }
@container (max-width: 519px) {
  body.cab .dz-prices .dz-rank li { grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; }
  body.cab .dz-prices .dz-rank li > span { grid-column: 2; }
}
@media (max-width: 640px) {
  body.cab .dz-prices .dz-pn { padding-top: 0; }
  body.cab .dz-prices .dz-pn-h { margin-inline: -12px; padding: 9px 12px; }
}

/* ============ A thing a card, not a run of text (the owner, 04.11.2026, on «Акции сейчас»: «просто какой-то текст друг за другом
   идёт, при этом это, по идее, должно быть разделено какими-то выделенными прямоугольниками … клиент сам что найдёт, то найдёт»).
   An offer is a white card on its panel: the letter, the name, how far and since when in its head, the offer's words a line of their
   own, «Условия» folded inside it on an inset (District «Offers», Refero fa743af4: a card an offer, its details under a hairline in the
   card). A place's praise and complaint two lines under their labels; a neighbour's news a card of its own; «Почему так» a tile a
   reason; «Откуда это известно» one inset of rows. Colours by the dashboard's variables, so the dark theme follows. ============ */
body.cab .dz-prices :is(.dz-pn-l, .dz-off-l) { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.cab .dz-prices li.dz-oc { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--dz-line); border-radius: 14px; background: var(--dz-paper); }
body.cab .dz-oc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
body.cab .dz-oc-h > b { font-size: 14.5px; font-weight: 700; color: var(--dz-ink); overflow-wrap: anywhere; }
body.cab .dz-oc-h > small { font-size: 12.5px; color: var(--dz-ink-2); }
body.cab .dz-oc-d { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--dz-canvas); font-size: 12px; font-weight: 500; color: var(--dz-ink-2); white-space: nowrap; }
body.cab .dz-oc-t { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--dz-ink); }
body.cab .dz-oc > .dz-how { margin: 0; padding-top: 2px; border-top: 1px solid var(--dz-line); }
body.cab .dz-oc > .dz-how > summary { font-size: 13px; font-weight: 600; color: var(--dz-ink); }
body.cab .dz-oc > .dz-how p { margin: 2px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--dz-canvas); font-size: 13px; line-height: 1.45; color: var(--dz-ink-2); }
/* «За что хвалят и ругают»: a place a card too, its praise and complaint a line each under a label */
body.cab .dz-prices .dz-rank { gap: 6px; }
body.cab .dz-prices .dz-rank li { padding: 10px 12px; border: 1px solid var(--dz-line); border-radius: 14px; background: var(--dz-paper); }
body.cab .dz-prices .dz-rank li:first-child { border-top: 1px solid var(--dz-line); }
body.cab .dz-says { display: grid; gap: 5px; font-size: 13.5px; line-height: 1.4; color: var(--dz-ink); }
body.cab .dz-says > span { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: 8px; }
body.cab .dz-says i { padding: 1px 0; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.5; text-align: center; }
body.cab .dz-says .good i { background: var(--dz-green-bg); color: var(--dz-green-ink); }
body.cab .dz-says .bad i { background: var(--dz-red-bg); color: var(--dz-red-ink); }
body.cab .dz-says small { font-size: 12px; color: var(--dz-ink-2); white-space: nowrap; }
/* «Что поменялось»: a neighbour a card on the canvas tint; his conditions on a white inset in it, «Что делать» — advice for your salon —
   on your soft teal */
body.cab .dz-news .dz-chg { display: grid; gap: 10px; }
body.cab .dz-calm + .dz-chg { margin-top: 14px; }
body.cab .dz-news .dz-chg > li.dz-nw:nth-child(n) { gap: 8px; padding: 14px; border: 0; border-radius: 18px; background: var(--dz-canvas); }
body.cab .dz-nw .dz-proof > p { margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--dz-paper); font-size: 13.5px; line-height: 1.45; color: var(--dz-ink-2); }
body.cab .dz-nw > span { padding: 8px 12px; border-radius: 12px; background: var(--dz-sun-soft); color: var(--dz-ink); }
/* «Почему так» of the chance of a new neighbour: a tile a reason */
body.cab .dz-entry > .dz-proof:not(.dz-entry-more) ul { gap: 6px; padding: 0; list-style: none; }
body.cab .dz-entry > .dz-proof:not(.dz-entry-more) li { padding: 8px 12px; border-radius: 12px; background: var(--dz-canvas); font-size: 13.5px; line-height: 1.45; color: var(--dz-ink); }
/* «Откуда это известно» of a signal: one inset, a fact a row */
body.cab .dz-sig .dz-proof ul { gap: 0; margin-top: 4px; padding: 4px 12px; border-radius: 12px; background: var(--dz-canvas); list-style: none; }
body.cab .dz-sig .dz-proof li { padding: 6px 0; border-top: 1px solid var(--dz-line); }
body.cab .dz-sig .dz-proof li:first-child { border-top: 0; }
/* «Ближайшие события»: a date over its line «через … · праздник» in every row, a short one too («14 февраля» stood in one line with it);
   the dates under «Ещё 3 даты» on the same edge as those above (.dz-rest's 4 px at the sides moved them) */
body.cab .dz-rib li p { display: grid; justify-content: start; gap: 2px; }
body.cab .dz-rib-more { margin-inline: 0; }

/* ============ Labels in plain words (the owner, 04.11.2026, to «КАБИНЕТ ВСЁ ПОДГОТОВИЛ — ОТ ВАС ОДНО ДЕЙСТВИЕ» over «Готовые решения»:
   «откуда вот такие страшные визуализации этого текста? … либо замени это как-то и визуализируй красиво, либо … убери вообще»).
   The line under a chapter's title was caught by the pill of the price panels' label (dash.css .dz-tag): monospace capitals on a beige
   plate; it is a quiet line of the text face again. The eyebrows of the head and of the zones («Дэшборд · ArtCut», «Ваш салон»…) and
   the fields' names in a competitor's card («Свободное время», «Цена»…) lose their capitals and spacing as well, as the panels' heads
   did. The example primer.html takes the same. ============ */
body.cab #page-dash .dz-chh .dz-tag { padding: 0; border-radius: 0; background: none; color: var(--dz-ink-2); font: 500 13.5px/1.35 var(--dz-font);
  letter-spacing: 0; text-transform: none; }
body.cab #page-dash .dz-eye { font-size: 13.5px; letter-spacing: 0; text-transform: none; }
body.cab #page-dash .dz-facts dt { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
/* «Акции сейчас» as rows of one chart (40a35d8 of the session «Дэшборд»): the axis's figures and «почти без скидки» at 12 px, as all
   small text of the cabinet */
body.cab .dz-prices .g-mo { font-size: 12px; }
body.cab .dz-prices .dz-off-pc small { font-size: 12px; }
/* a competitor's row in «Конкуренты»: «дешевле вас», «цены не сравнить» under the percent at 12 px, as all small text of the cabinet */
body.cab #page-dash .dz-rvp small { font-size: 12px; }
/* the chat's footnote «Отвечает по данным кабинета, не делает ничего за вас…» (#dash-note) at 12 px, as all small text of the cabinet */
body.cab #dash-note { font-size: 12px; }
/* the hints «цена, ₽» and «минут» in the empty fields of «Услуги и цены» (facts.js .fx-in.num) in the text face: .num gives the field
   the monospace of the figures, which the hint, a word, does not need (the main session, 04.11.2026); the typed figures keep it */
body.cab .fx-in.num::placeholder { font-family: var(--font); letter-spacing: 0; }
/* ============ «Цифры»: the figures of the whole cabinet in the text face, as on «Дэшборд» (dash.css #dash-main .num) and «Реклама Ozon»
   (the main session, 04.11.2026: «делай одним правилом на весь кабинет… Где числа стоят колонкой (таблицы, счётчики друг под другом),
   оставь цифры одной ширины в тексте Onest (tabular-nums), чтобы колонки не прыгали»; the owner of the price card: «деревенские надписи,
   шрифты», of the labels: «страшные визуализации этого текста»). In the monospace the no-break space between the thousands took a whole
   cell: «27  528». --mono is the text's face (the second block), so every var(--mono) of cabinet-theme.css, dash.css and mailings.css
   follows; .num, the figures wrapped in a text (dash.js and primer.js nums), takes its words' face and weight, as dash.css does on the
   dashboard. Plain digits where a figure stands alone or in a sentence (an even «1» made «15» read «1 5»); even ones where figures stand
   in a column: tables, fields, the menu's counts, a competitor's distances, the ends of the bars of «Целевая аудитория», the ranks and the
   times to promote. ============ */
body.cab .num { font-family: inherit; font-weight: inherit; font-variant-numeric: normal; letter-spacing: 0; }
body.cab :is(b, strong).num { font-weight: 600; }
/* the large figures of the tiles, the day cards and «Место и потоки» */
body.cab :is(.t-metric .v, .cab-fig, .pl-stat b) { font-weight: 600; font-variant-numeric: normal; letter-spacing: -.02em; }
/* in a column */
body.cab :is(td, th).num, body.cab :is(td, th) .num, body.cab input.num, body.cab .cab-nav .num, body.cab .riv-row .dist,
body.cab .tg-tone .num, body.cab .lg-w .num, body.cab .dz-rank li::before { font-variant-numeric: tabular-nums; }

/* ===================================== Подсказки нового клиента (src/tour.js, 05.11.2026) ===================================== */
/* By the tour of Vimeo's home (Refero, flow 720): a white card at its part of the page — the count, a title, one or two sentences, «Назад»
   and «Дальше» — the part ringed; on a phone a sheet over the bottom bars. The teal is only on «Дальше» and the ring, the page's focus. */
body.cab .tour-q { position: relative; display: inline-grid; place-items: center; flex: none; align-self: center; width: 32px; height: 32px; margin: 0 auto 0 -8px;
  padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--fg-2); font: 600 16px/1 var(--font); cursor: pointer; }
body.cab .tour-q::after { content: ""; position: absolute; inset: -6px; }   /* 44 px under the finger */
body.cab .tour-q:hover { border-color: var(--field-line); background: var(--tint); color: var(--fg); }
body.cab .tour-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.cab #dash-head .tour-q { margin: 0 -8px 0 auto; border-color: var(--dz-line-2); background: var(--dz-paper); color: var(--dz-ink-2); }
body.cab #dash-head .tour-q:hover { color: var(--dz-ink); }
body.cab .tour { position: fixed; z-index: 25; width: min(360px, calc(100vw - 16px)); box-sizing: border-box; padding: 14px 18px 16px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-pop); }
body.cab .tour[hidden], body.cab .tour-ring[hidden], body.cab .tour [hidden] { display: none; }
body.cab .tour-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
body.cab .tour-n { font-size: 12.5px; font-weight: 600; color: var(--fg-3); font-variant-numeric: tabular-nums; }
body.cab :is(.tour-skip, .tour-off) { min-height: 32px; padding: 0; border: 0; background: none; color: var(--fg-2); font: 500 13px/1.3 var(--font);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); cursor: pointer; }
body.cab :is(.tour-skip, .tour-off):hover { color: var(--fg); text-decoration-color: currentColor; }
body.cab :is(.tour-skip, .tour-off):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
body.cab .tour-t { margin: 2px 0 6px; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--fg); }
body.cab .tour-d { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }
body.cab .tour-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 14px; }
body.cab .tour-go { display: flex; gap: 8px; margin-left: auto; }
body.cab .tour-arrow { position: absolute; left: var(--tour-x, 32px); width: 14px; height: 14px; margin-left: -7px; box-sizing: border-box;
  border: 1px solid var(--line); background: var(--surface); rotate: 45deg; }
body.cab .tour[data-side=below] .tour-arrow { top: -7.5px; border-right: 0; border-bottom: 0; }
body.cab .tour[data-side=above] .tour-arrow { bottom: -7.5px; border-left: 0; border-top: 0; }
body.cab .tour:is([data-side=over], [data-side=sheet]) .tour-arrow { display: none; }
body.cab .tour-ring { position: fixed; z-index: 24; box-sizing: border-box; border: 2px solid var(--accent); border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
@media (max-width: 900px) {
  body.cab .tour.tour-sheet { left: 12px; right: 12px; width: auto; max-width: 560px; margin-inline: auto; border-radius: 20px; box-shadow: var(--shadow-up); }
  body.cab .tour-sheet .tour-go .btn { min-height: 44px; padding-inline: 18px; }
  body.cab .tour-sheet :is(.tour-skip, .tour-off) { min-height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  body.cab .tour.tour-new { animation: tour-in .18s ease-out; }
}
@keyframes tour-in { from { opacity: 0; translate: 0 6px; } }
body.cab .tour[data-side=right] .tour-arrow { top: var(--tour-y, 28px); left: -7.5px; margin: -7px 0 0; border-top: 0; border-right: 0; }
body.cab .tour[data-side=left] .tour-arrow { top: var(--tour-y, 28px); left: auto; right: -7.5px; margin: -7px 0 0; border-bottom: 0; border-left: 0; }

/* ===================================== «Конкуренты»: «Ещё фильтры», имена на карте (05.11.2026) ===================================== */
/* The five entrepreneurs (radar/docs/2026-11-05-ux-round1.md, section 5): «фильтров больше, чем конкурентов» — «Похожесть» and
   «Территория» stay in view, the kind and the two switches go under «Ещё фильтры», its line saying what they hold; the map's marks
   carry their names when there are a few, else on hover, on the keyboard's focus and once pressed. */
body.cab .riv-more { flex: 1 1 auto; min-width: 0; }
body.cab .riv-more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill); color: var(--fg); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; }
body.cab .riv-more > summary::-webkit-details-marker { display: none; }
body.cab .riv-more > summary::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--i-chev) center / 12px 12px no-repeat;
  mask: var(--i-chev) center / 12px 12px no-repeat; }
body.cab .riv-more[open] > summary::after { rotate: 180deg; }
body.cab .riv-more > summary:hover { border-color: var(--field-line); background: var(--tint); }
body.cab .riv-more-n { font-size: 13px; font-weight: 400; color: var(--fg-2); }
body.cab .riv-more > .riv-f { margin-top: 10px; }
body.cab .riv-tgs { display: flex; flex-wrap: wrap; gap: 6px; }
body.cab .riv-map .mk-n { display: none; position: absolute; left: calc(100% + 6px); top: 50%; translate: 0 -50%; padding: 2px 8px; border-radius: 999px;
  background: var(--on-map); color: var(--map-ink); font: 500 12px/1.3 var(--font); white-space: nowrap; box-shadow: 0 1px 4px var(--map-mark-shadow); pointer-events: none; }
body.cab .riv-map.few .mk-n, body.cab .riv-map .mk:is(:hover, :focus-visible, .focus) .mk-n { display: block; }
body.cab .riv-map .mk:is(:hover, :focus-visible) { z-index: 5; }
body.cab .riv-flt > .riv-f-x { flex: 0 0 auto; margin-left: auto; align-self: flex-start; }
body.cab .riv-fresh { color: var(--fg-2); }
@media (max-width: 900px) {
  body.cab .riv-map.few .mk-n { display: none; }   /* a phone's map is small: the names would lie on one another */
  body.cab .riv-map .mk:is(:hover, .focus) .mk-n { display: block; }
}

/* ===================================== «Загружается» (territory.js cabRun, 05.11.2026) ===================================== */
/* The owner: «если данных нет, но они загружаются, то нужно писать загружается» — what loads, how far it is, a moving bar (still with
   prefers-reduced-motion), that the page fills itself. */
body.cab .cab-load { display: grid; gap: 6px; max-width: 640px; padding: 18px 20px; border-radius: var(--r-card); background: var(--surface); }
body.cab .cab-load > b { font-size: 16px; font-weight: 600; color: var(--fg); }
body.cab .cab-load > span:not(.cab-load-bar) { font-size: 14px; color: var(--fg-2); }
body.cab .cab-load > small { font-size: 13px; color: var(--fg-3); }
body.cab .cab-load-bar { position: relative; display: block; height: 6px; margin: 4px 0; border-radius: 3px; background: var(--panel); overflow: hidden; }
body.cab .cab-load-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: inherit; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) { body.cab .cab-load-bar i { animation: cab-load 1.4s ease-in-out infinite; } }
@keyframes cab-load { from { translate: -100% 0; } to { translate: 340% 0; } }
/* the run going under the company's card (src/cabinet.js paintRun): what is done now, the minutes left, the bar with a light running along
   its filled part (as «Собираем данные», dash.css); still with reduced motion */
body.cab .cab-run { display: grid; gap: 5px; margin: 8px 4px 0; font-size: 12.5px; line-height: 1.35; color: var(--fg-2); }
body.cab .cab-run[hidden] { display: none; }
body.cab .cab-run-bar { display: block; height: 4px; border-radius: 2px; background: var(--panel); overflow: hidden; }
body.cab .cab-run-bar i { position: relative; display: block; height: 100%; border-radius: inherit; background: var(--accent); overflow: hidden; }
body.cab .cab-run-bar i::after { content: ''; position: absolute; inset: 0; translate: -100% 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--on-accent) 55%, transparent), transparent); animation: cab-run 1.8s linear infinite; }
@keyframes cab-run { to { translate: 100% 0; } }
@media (prefers-reduced-motion: reduce) { body.cab .cab-run-bar i::after { display: none; } }
body.cab .cab-top:not([hidden]) { flex-wrap: wrap; }
body.cab .cab-top .cab-run { flex-basis: 100%; margin: 0 0 2px; }
/* «Дополнительный разбор» before a wider territory (src/territory.js ask) */
body.cab .terr-dlg { max-width: min(440px, calc(100vw - 32px)); padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-float); }
body.cab .terr-dlg::backdrop { background: var(--scrim, rgb(29 26 21 / .4)); }
body.cab .terr-dlg h2 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
body.cab .terr-dlg p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; }
body.cab .terr-dlg .terr-dlg-s { font-size: 14px; color: var(--fg-2); }
body.cab .terr-dlg-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
body.cab .terr-dlg-act .btn { min-height: 44px; }

/* Round 2 of the five (radar/docs/2026-11-05-ux-round2.md): what the checkbox of a competitor does; the price «в целом» of the advice */
body.cab .riv-pickhint { flex-basis: 100%; font-size: 12.5px; color: var(--fg-2); }
body.cab .pr-advs .pr-of { margin-top: 6px; font-size: 13px; color: var(--fg-2); }
body.cab .pr-you .pr-vs { white-space: normal; text-wrap: balance; }   /* «по этой услуге у них обычно…» in the 176 px column: two lines */

/* ===================================== Пояснения с буквой «i» (src/info.js, 05.11.2026) ===================================== */
/* The owner: «такие большие тексты в подсказки с буквой i нужно выносить» — one short line in view, the rest behind a small «i» by the
   heading or the figure; the window of it outside the pages, under the mark (over it when there is no room), the same tokens in both
   themes. */
body.cab .cab-i { position: relative; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin: 0 0 0 6px; padding: 0;
  border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--fg-2); font: italic 600 12px/1 Georgia, 'Times New Roman', serif;
  vertical-align: 2px; cursor: pointer; }
body.cab .cab-i::after { content: ""; position: absolute; inset: -12px; }   /* 44 px under the finger */
body.cab .cab-i:hover, body.cab .cab-i[aria-expanded=true] { border-color: var(--field-line); background: var(--tint); color: var(--fg); }
body.cab .cab-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.cab .cab-i-pop { position: absolute; z-index: 26; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--fg); font-size: 14px; line-height: 1.45; white-space: pre-line; box-shadow: var(--shadow-pop); }
body.cab .cab-i-pop[hidden] { display: none; }
body.cab .cab-i-pop::before { content: ""; position: absolute; left: var(--i-x, 20px); width: 12px; height: 12px; margin-left: -6px; box-sizing: border-box;
  border: 1px solid var(--line); background: var(--surface); rotate: 45deg; }
body.cab .cab-i-pop[data-side=below]::before { top: -6.5px; border-right: 0; border-bottom: 0; }
body.cab .cab-i-pop[data-side=above]::before { bottom: -6.5px; border-left: 0; border-top: 0; }