/* The open example of the cabinet (radar/docs/2026-11-03-demo-cabinet.md): only what the cabinet's own styles (app.css, cabinet.css,
   cabinet-theme.css, dash.css, price.css) do not have — the strip «Пример», the hints «Что это вам даёт», the windows by master, the
   neighbours, the scheme of the area and the steps of «Лидогенерация». Tokens of body.cab; the prefix dm- (pr- belongs to «Стоимость»). */
body.cab.dm { min-height: 100dvh; }

/* the strip over the page: what this is, and the way to the pilot */
.dm-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 24px; background: var(--tint); border-bottom: 1px solid var(--line); font-size: 13px; }
.dm-demo p { margin: 0; flex: 1 1 260px; }
.dm-demo b { font-weight: 500; }
body.cab .dm-demo .btn { text-decoration: none; }
body.cab .dm-demo .btn-primary, body.cab .dm-demo .btn-primary:hover { color: var(--on-accent); }
.dm-home { font-size: 13px; }
.dm-co { cursor: default; }
.dm-co:hover { border-color: var(--line); }
.dm-top-note { font: 400 11px var(--mono); color: var(--fg-3); }
body.cab.dm .cab-side { height: auto; min-height: calc(100dvh - 45px); }

/* «Что это вам даёт» at the main block of a page, and the sources under it */
.dm-hint { margin: 0 0 16px; padding: 10px 14px; border-left: 2px solid var(--ink); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; background: var(--tint); font-size: 13px; text-wrap: pretty; }
.dm-hint b { font-weight: 500; }
.dm-src { margin: 20px 0 0; font-size: 12px; color: var(--fg-3); text-wrap: pretty; }
.dm-stack { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* «Свободные окна»: the three days, each master a row of times; a free time is a button that picks it */
body.cab .dm-day { cursor: default; }
body.cab .dm-day:hover { border-color: var(--line); }
.dm-mrow { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.dm-mrow:first-of-type { border-top: 0; padding-top: 0; }
.dm-mrow > span { font-size: 12px; color: var(--fg-2); }
.dm-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-slot { display: inline-grid; place-items: center; min-width: 58px; height: 32px; padding: 0 8px; border-radius: 6px; font: 400 13px var(--mono); }
span.dm-slot { background: var(--panel); color: var(--fg-3); }
button.dm-slot { border: 1.5px dashed var(--d4); background: var(--surface); color: var(--d5); cursor: pointer; }
button.dm-slot:hover { border-style: solid; }
button.dm-slot[aria-pressed=true] { border: 1.5px solid var(--accent); background: var(--accent-tint); color: var(--accent); font-weight: 500; }
.dm-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; font-size: 12px; color: var(--fg-2); }
.dm-keys i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.dm-keys .busy { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.dm-keys .free { border: 1.5px dashed var(--d4); }
.dm-keys .picked { background: var(--accent-tint); border: 1.5px solid var(--accent); }
.dm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; padding: 14px 16px; }
.dm-bar p { margin: 0; flex: 1 1 200px; font-size: 13px; color: var(--fg-2); }

/* «Конкуренты рядом»: one row a neighbour */
.dm-rivs { display: grid; }
.dm-riv { display: grid; grid-template-columns: minmax(0, 1.4fr) 110px minmax(0, 1fr) 120px minmax(0, 1.4fr); gap: 4px 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dm-riv:first-child { border-top: 0; }
.dm-riv.head { padding-top: 0; font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.dm-riv b { font-weight: 500; font-size: 14px; }
.dm-riv .s { display: block; font-size: 12px; color: var(--fg-2); }
.dm-riv .full { color: var(--sched); }
.dm-riv .new { margin-left: 6px; }
.dm-lbl { display: none; font-size: 11px; color: var(--fg-3); margin-right: 4px; }

/* «Район и жители»: the scheme, the services by their clients */
.dm-map { display: block; width: 100%; height: auto; border-radius: var(--r-ctl); background: var(--panel); }
.dm-map .st { fill: var(--surface); }
.dm-map .h1 { fill: var(--d1); } .dm-map .h2 { fill: var(--d2); } .dm-map .h3 { fill: var(--d3); }
.dm-map .h4 { fill: var(--d4); } .dm-map .h5 { fill: var(--d5); } .dm-map .h6 { fill: var(--d6); }
.dm-map .zone { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 4; }
.dm-map .flow { fill: none; stroke: var(--sched); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 7; }
.dm-map .door { fill: var(--ink); stroke: var(--surface); stroke-width: 2.5; }
.dm-map .metro { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.dm-map text { font: 500 15px var(--font); fill: var(--fg); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.dm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--fg-2); }
.dm-legend i { display: inline-block; width: 12px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.dm-svcs { display: grid; gap: 10px; margin-top: 4px; }
.dm-svc { display: grid; grid-template-columns: 170px minmax(0, 1fr) 70px; gap: 12px; align-items: center; font-size: 13px; }
.dm-svc .track { height: 10px; border-radius: 5px; background: var(--panel); overflow: hidden; }
.dm-svc .track i { display: block; height: 100%; border-radius: 5px; background: var(--d4); }
.dm-svc .num { text-align: right; font-weight: 500; }

/* «Лидогенерация»: three steps; a channel is a card picked like a radio */
.dm-step-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.dm-step-h .k { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 500 12px var(--mono); border: 1.5px solid var(--accent); color: var(--accent); flex: none; }
.dm-step-h h2 { margin: 0; font-size: 16px; }
.dm-chs { display: grid; gap: 10px; }
.dm-ch { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); cursor: pointer; }
.dm-ch:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dm-ch input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); }
.dm-ch b { font-weight: 500; }
.dm-ch span { grid-column: 2; font-size: 13px; color: var(--fg-2); }
.dm-ch .why { font-size: 12px; color: var(--fg-3); }
.dm-text { margin: 0; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--page); border: 1px solid var(--line); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-text-n { margin: 6px 0 0; font-size: 12px; color: var(--fg-3); }
.dm-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dm-off { margin: 8px 0 0; font-size: 12px; color: var(--fg-3); }
.dm-none { font-size: 13px; color: var(--fg-2); }

/* «Обсудить» of the example: the questions offered, the field off */
body.cab.dm .d-in textarea:disabled { background: var(--panel); color: var(--fg-3); cursor: not-allowed; }
body.cab.dm .d-askbar { display: none; }

@media (max-width: 900px) {
  .dm-demo { padding: 8px 16px; }
  body.cab.dm .cab-top:not([hidden]) { top: 0; }
  .dm-riv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dm-riv.head { display: none; }
  .dm-lbl { display: inline; }
  .dm-svc { grid-template-columns: minmax(0, 1fr) 64px; }
  .dm-svc .track { grid-column: 1 / -1; grid-row: 2; }
}

/* «Стоимость» of the example draws «Что сделать» and «Как конкуренты привлекают клиентов» with two blocks of the cabinet's earlier dashboard,
   which dash.css dropped on 03.11.2026 (7e98c5b); those rules as they were, for the example only. Its «Дэшборд» is in the new look (dz-*). */
body.cab.dm .d-act.d-big { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; }
body.cab.dm .d-act.d-big > * { grid-column: 1; }
body.cab.dm .d-act.d-big > b { font-size: 16px; }
body.cab.dm .d-prow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
body.cab.dm .d-prow:first-of-type { border-top: 0; }
body.cab.dm .d-prow b { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
body.cab.dm .d-prow .d { grid-column: 2; font-size: 13px; color: var(--fg-2); }