/* ============================================================
   Обмер потолка — оформление
   Вид — Material 3 Expressive (m3.material.io, редакция I/O 2026; правило — .claude/rules/design.md).
   Цвета — алгоритмом Google из #673AB7, вариант Rainbow (D166): блок tokens ниже генерируется, руками не правится.
   Шрифт — Roboto (/styles/typography/fonts: «Roboto is the default»), числа — табличными цифрами.
   Старых имён переменных нет — только токены (псевдонимы SP-0 сняты в SP-6, AR-2). Каркас — шапка, списки, плавающая «+», меню,
   окна, поля, поиск, кнопки — по страницам компонентов m3.material.io (SP-1, числа сняты 16.09 — findings плана § 15);
   замер (SP-2), расчёт, окно «Итого», итоги, бланк (SP-3) — тоже по страницам сайта; числа SP-3 — findings плана § 20;
   движение окон и меню (SP-6) — findings плана § 36, 36.1.
   ============================================================ */

/* ---------- токены Material, кроме цветов (AR-14; сняты со страниц m3.material.io 15.09) ---------- */
:root{
  /* /styles/typography/type-scale-tokens — baseline: размер / межстрочное / вес / трекинг */
  --md-sys-typescale-display-large-size:57px;--md-sys-typescale-display-large-line-height:64px;--md-sys-typescale-display-large-weight:400;--md-sys-typescale-display-large-tracking:0px;
  --md-sys-typescale-display-medium-size:45px;--md-sys-typescale-display-medium-line-height:52px;--md-sys-typescale-display-medium-weight:400;--md-sys-typescale-display-medium-tracking:0px;
  --md-sys-typescale-display-small-size:36px;--md-sys-typescale-display-small-line-height:44px;--md-sys-typescale-display-small-weight:400;--md-sys-typescale-display-small-tracking:0px;
  --md-sys-typescale-headline-large-size:32px;--md-sys-typescale-headline-large-line-height:40px;--md-sys-typescale-headline-large-weight:400;--md-sys-typescale-headline-large-tracking:0px;
  --md-sys-typescale-headline-medium-size:28px;--md-sys-typescale-headline-medium-line-height:36px;--md-sys-typescale-headline-medium-weight:400;--md-sys-typescale-headline-medium-tracking:0px;
  --md-sys-typescale-headline-small-size:24px;--md-sys-typescale-headline-small-line-height:32px;--md-sys-typescale-headline-small-weight:400;--md-sys-typescale-headline-small-tracking:0px;
  --md-sys-typescale-title-large-size:22px;--md-sys-typescale-title-large-line-height:28px;--md-sys-typescale-title-large-weight:400;--md-sys-typescale-title-large-tracking:0px;
  --md-sys-typescale-title-medium-size:16px;--md-sys-typescale-title-medium-line-height:24px;--md-sys-typescale-title-medium-weight:500;--md-sys-typescale-title-medium-tracking:0px;
  --md-sys-typescale-title-small-size:14px;--md-sys-typescale-title-small-line-height:20px;--md-sys-typescale-title-small-weight:500;--md-sys-typescale-title-small-tracking:0px;
  --md-sys-typescale-body-large-size:16px;--md-sys-typescale-body-large-line-height:24px;--md-sys-typescale-body-large-weight:400;--md-sys-typescale-body-large-tracking:0px;
  --md-sys-typescale-body-medium-size:14px;--md-sys-typescale-body-medium-line-height:20px;--md-sys-typescale-body-medium-weight:400;--md-sys-typescale-body-medium-tracking:0px;
  --md-sys-typescale-body-small-size:12px;--md-sys-typescale-body-small-line-height:16px;--md-sys-typescale-body-small-weight:400;--md-sys-typescale-body-small-tracking:0.1px;
  --md-sys-typescale-label-large-size:14px;--md-sys-typescale-label-large-line-height:20px;--md-sys-typescale-label-large-weight:500;--md-sys-typescale-label-large-tracking:0px;
  --md-sys-typescale-label-medium-size:12px;--md-sys-typescale-label-medium-line-height:16px;--md-sys-typescale-label-medium-weight:500;--md-sys-typescale-label-medium-tracking:0.1px;
  --md-sys-typescale-label-small-size:11px;--md-sys-typescale-label-small-line-height:16px;--md-sys-typescale-label-small-weight:500;--md-sys-typescale-label-small-tracking:0.1px;
  /* /styles/shape/corner-radius-scale; «full» — полностью скруглённый, числа на странице нет */
  --md-sys-shape-corner-none:0px;--md-sys-shape-corner-extra-small:4px;--md-sys-shape-corner-small:8px;--md-sys-shape-corner-medium:12px;
  --md-sys-shape-corner-large:16px;--md-sys-shape-corner-large-increased:20px;--md-sys-shape-corner-extra-large:28px;
  --md-sys-shape-corner-extra-large-increased:32px;--md-sys-shape-corner-extra-extra-large:48px;
  /* /styles/spacing/tokens */
  --md-sys-measurement-space25:2px;--md-sys-measurement-space50:4px;--md-sys-measurement-space100:8px;--md-sys-measurement-space125:10px;
  --md-sys-measurement-space150:12px;--md-sys-measurement-space200:16px;--md-sys-measurement-space300:24px;--md-sys-measurement-space400:32px;
  /* /styles/elevation/tokens — высота уровня (Component elevation, DP Height) */
  --md-sys-elevation-level0:0px;--md-sys-elevation-level1:1px;--md-sys-elevation-level2:3px;--md-sys-elevation-level3:6px;
  --md-sys-elevation-level4:8px;--md-sys-elevation-level5:12px;
  /* /styles/motion/easing-and-duration/tokens-specs (сверено 17.09): «The easing and duration system is still used for transitions» — ими
     движутся окна и меню (блок «движение» ниже); движение самих компонентов в Expressive — пружины (/styles/motion/overview/specs), в приложении не заводится */
  --md-sys-motion-duration-short1:50ms;--md-sys-motion-duration-short2:100ms;--md-sys-motion-duration-short3:150ms;--md-sys-motion-duration-short4:200ms;
  --md-sys-motion-duration-medium1:250ms;--md-sys-motion-duration-medium2:300ms;--md-sys-motion-duration-medium3:350ms;--md-sys-motion-duration-medium4:400ms;
  --md-sys-motion-duration-long1:450ms;--md-sys-motion-duration-long2:500ms;--md-sys-motion-duration-long3:550ms;--md-sys-motion-duration-long4:600ms;
  --md-sys-motion-easing-standard:cubic-bezier(0.2,0,0,1);--md-sys-motion-easing-standard-decelerate:cubic-bezier(0,0,0,1);
  --md-sys-motion-easing-standard-accelerate:cubic-bezier(0.3,0,1,1);
  --md-sys-motion-easing-emphasized-decelerate:cubic-bezier(0.05,0.7,0.1,1);--md-sys-motion-easing-emphasized-accelerate:cubic-bezier(0.3,0,0.8,0.15);
}

/* === tokens:start === */
/* Сгенерировано design/material-mock/tokens-to-css.mjs из tokens.json (исходный #673AB7, rainbow; D166). Руками не править.
   Роли — /styles/color/roles; custom colors — /styles/color/advanced/overview («Define new colors»). */
:root{
  --md-sys-color-background:#f9f9f9;
  --md-sys-color-on-background:#1b1b1b;
  --md-sys-color-surface:#f9f9f9;
  --md-sys-color-surface-dim:#dadada;
  --md-sys-color-surface-bright:#f9f9f9;
  --md-sys-color-surface-container-lowest:#ffffff;
  --md-sys-color-surface-container-low:#f3f3f3;
  --md-sys-color-surface-container:#eeeeee;
  --md-sys-color-surface-container-high:#e8e8e8;
  --md-sys-color-surface-container-highest:#e2e2e2;
  --md-sys-color-on-surface:#1b1b1b;
  --md-sys-color-surface-variant:#e2e2e2;
  --md-sys-color-on-surface-variant:#474747;
  --md-sys-color-inverse-surface:#303030;
  --md-sys-color-inverse-on-surface:#f1f1f1;
  --md-sys-color-outline:#777777;
  --md-sys-color-outline-variant:#c6c6c6;
  --md-sys-color-shadow:#000000;
  --md-sys-color-scrim:#000000;
  --md-sys-color-surface-tint:#6b4ea2;
  --md-sys-color-primary:#6b4ea2;
  --md-sys-color-on-primary:#ffffff;
  --md-sys-color-primary-container:#ebddff;
  --md-sys-color-on-primary-container:#533688;
  --md-sys-color-inverse-primary:#d3bbff;
  --md-sys-color-secondary:#635b70;
  --md-sys-color-on-secondary:#ffffff;
  --md-sys-color-secondary-container:#e9def8;
  --md-sys-color-on-secondary-container:#4b4358;
  --md-sys-color-tertiary:#7e525d;
  --md-sys-color-on-tertiary:#ffffff;
  --md-sys-color-tertiary-container:#ffd9e1;
  --md-sys-color-on-tertiary-container:#643b46;
  --md-sys-color-error:#ba1a1a;
  --md-sys-color-on-error:#ffffff;
  --md-sys-color-error-container:#ffdad6;
  --md-sys-color-on-error-container:#93000a;
  --md-sys-color-primary-fixed:#ebddff;
  --md-sys-color-primary-fixed-dim:#d3bbff;
  --md-sys-color-on-primary-fixed:#250059;
  --md-sys-color-on-primary-fixed-variant:#533688;
  --md-sys-color-secondary-fixed:#e9def8;
  --md-sys-color-secondary-fixed-dim:#cdc2db;
  --md-sys-color-on-secondary-fixed:#1f182b;
  --md-sys-color-on-secondary-fixed-variant:#4b4358;
  --md-sys-color-tertiary-fixed:#ffd9e1;
  --md-sys-color-tertiary-fixed-dim:#f0b7c5;
  --md-sys-color-on-tertiary-fixed:#31101b;
  --md-sys-color-on-tertiary-fixed-variant:#643b46;
  --md-custom-ok-color:#006b54;
  --md-custom-ok-on-color:#ffffff;
  --md-custom-ok-color-container:#80f8d2;
  --md-custom-ok-on-color-container:#002118;
  --md-custom-plan-color:#4559a9;
  --md-custom-plan-on-color:#ffffff;
  --md-custom-plan-color-container:#dde1ff;
  --md-custom-plan-on-color-container:#001453;
  --md-custom-pick-color:#006b54;
  --md-custom-pick-on-color:#ffffff;
  --md-custom-pick-color-container:#6efad0;
  --md-custom-pick-on-color-container:#002118;
  --md-custom-due-color:#b02e00;
  --md-custom-due-on-color:#ffffff;
  --md-custom-due-color-container:#ffdbd1;
  --md-custom-due-on-color-container:#3b0900;
  --app-plan-fill:rgba(69,89,169,0.075);
}
@media (prefers-color-scheme:dark){
  :root:not([data-app-theme="light"]){
    --md-sys-color-background:#131313;
    --md-sys-color-on-background:#e2e2e2;
    --md-sys-color-surface:#131313;
    --md-sys-color-surface-dim:#131313;
    --md-sys-color-surface-bright:#393939;
    --md-sys-color-surface-container-lowest:#0e0e0e;
    --md-sys-color-surface-container-low:#1b1b1b;
    --md-sys-color-surface-container:#1f1f1f;
    --md-sys-color-surface-container-high:#2a2a2a;
    --md-sys-color-surface-container-highest:#353535;
    --md-sys-color-on-surface:#e2e2e2;
    --md-sys-color-surface-variant:#474747;
    --md-sys-color-on-surface-variant:#c6c6c6;
    --md-sys-color-inverse-surface:#e2e2e2;
    --md-sys-color-inverse-on-surface:#303030;
    --md-sys-color-outline:#919191;
    --md-sys-color-outline-variant:#474747;
    --md-sys-color-shadow:#000000;
    --md-sys-color-scrim:#000000;
    --md-sys-color-surface-tint:#d3bbff;
    --md-sys-color-primary:#d3bbff;
    --md-sys-color-on-primary:#3b1d70;
    --md-sys-color-primary-container:#533688;
    --md-sys-color-on-primary-container:#ebddff;
    --md-sys-color-inverse-primary:#6b4ea2;
    --md-sys-color-secondary:#cdc2db;
    --md-sys-color-on-secondary:#342d40;
    --md-sys-color-secondary-container:#4b4358;
    --md-sys-color-on-secondary-container:#e9def8;
    --md-sys-color-tertiary:#f0b7c5;
    --md-sys-color-on-tertiary:#4a2530;
    --md-sys-color-tertiary-container:#643b46;
    --md-sys-color-on-tertiary-container:#ffd9e1;
    --md-sys-color-error:#ffb4ab;
    --md-sys-color-on-error:#690005;
    --md-sys-color-error-container:#93000a;
    --md-sys-color-on-error-container:#ffdad6;
    --md-sys-color-primary-fixed:#ebddff;
    --md-sys-color-primary-fixed-dim:#d3bbff;
    --md-sys-color-on-primary-fixed:#250059;
    --md-sys-color-on-primary-fixed-variant:#533688;
    --md-sys-color-secondary-fixed:#e9def8;
    --md-sys-color-secondary-fixed-dim:#cdc2db;
    --md-sys-color-on-secondary-fixed:#1f182b;
    --md-sys-color-on-secondary-fixed-variant:#4b4358;
    --md-sys-color-tertiary-fixed:#ffd9e1;
    --md-sys-color-tertiary-fixed-dim:#f0b7c5;
    --md-sys-color-on-tertiary-fixed:#31101b;
    --md-sys-color-on-tertiary-fixed-variant:#643b46;
    --md-custom-ok-color:#62dbb7;
    --md-custom-ok-on-color:#00382b;
    --md-custom-ok-color-container:#00513f;
    --md-custom-ok-on-color-container:#80f8d2;
    --md-custom-plan-color:#b8c4ff;
    --md-custom-plan-on-color:#0f2878;
    --md-custom-plan-color-container:#2b4090;
    --md-custom-plan-on-color-container:#dde1ff;
    --md-custom-pick-color:#4cddb5;
    --md-custom-pick-on-color:#00382b;
    --md-custom-pick-color-container:#00513f;
    --md-custom-pick-on-color-container:#6efad0;
    --md-custom-due-color:#ffb5a0;
    --md-custom-due-on-color:#5f1500;
    --md-custom-due-color-container:#872100;
    --md-custom-due-on-color-container:#ffdbd1;
    --app-plan-fill:rgba(184,196,255,0.075);
  }
}
:root[data-app-theme="dark"]{
  --md-sys-color-background:#131313;
  --md-sys-color-on-background:#e2e2e2;
  --md-sys-color-surface:#131313;
  --md-sys-color-surface-dim:#131313;
  --md-sys-color-surface-bright:#393939;
  --md-sys-color-surface-container-lowest:#0e0e0e;
  --md-sys-color-surface-container-low:#1b1b1b;
  --md-sys-color-surface-container:#1f1f1f;
  --md-sys-color-surface-container-high:#2a2a2a;
  --md-sys-color-surface-container-highest:#353535;
  --md-sys-color-on-surface:#e2e2e2;
  --md-sys-color-surface-variant:#474747;
  --md-sys-color-on-surface-variant:#c6c6c6;
  --md-sys-color-inverse-surface:#e2e2e2;
  --md-sys-color-inverse-on-surface:#303030;
  --md-sys-color-outline:#919191;
  --md-sys-color-outline-variant:#474747;
  --md-sys-color-shadow:#000000;
  --md-sys-color-scrim:#000000;
  --md-sys-color-surface-tint:#d3bbff;
  --md-sys-color-primary:#d3bbff;
  --md-sys-color-on-primary:#3b1d70;
  --md-sys-color-primary-container:#533688;
  --md-sys-color-on-primary-container:#ebddff;
  --md-sys-color-inverse-primary:#6b4ea2;
  --md-sys-color-secondary:#cdc2db;
  --md-sys-color-on-secondary:#342d40;
  --md-sys-color-secondary-container:#4b4358;
  --md-sys-color-on-secondary-container:#e9def8;
  --md-sys-color-tertiary:#f0b7c5;
  --md-sys-color-on-tertiary:#4a2530;
  --md-sys-color-tertiary-container:#643b46;
  --md-sys-color-on-tertiary-container:#ffd9e1;
  --md-sys-color-error:#ffb4ab;
  --md-sys-color-on-error:#690005;
  --md-sys-color-error-container:#93000a;
  --md-sys-color-on-error-container:#ffdad6;
  --md-sys-color-primary-fixed:#ebddff;
  --md-sys-color-primary-fixed-dim:#d3bbff;
  --md-sys-color-on-primary-fixed:#250059;
  --md-sys-color-on-primary-fixed-variant:#533688;
  --md-sys-color-secondary-fixed:#e9def8;
  --md-sys-color-secondary-fixed-dim:#cdc2db;
  --md-sys-color-on-secondary-fixed:#1f182b;
  --md-sys-color-on-secondary-fixed-variant:#4b4358;
  --md-sys-color-tertiary-fixed:#ffd9e1;
  --md-sys-color-tertiary-fixed-dim:#f0b7c5;
  --md-sys-color-on-tertiary-fixed:#31101b;
  --md-sys-color-on-tertiary-fixed-variant:#643b46;
  --md-custom-ok-color:#62dbb7;
  --md-custom-ok-on-color:#00382b;
  --md-custom-ok-color-container:#00513f;
  --md-custom-ok-on-color-container:#80f8d2;
  --md-custom-plan-color:#b8c4ff;
  --md-custom-plan-on-color:#0f2878;
  --md-custom-plan-color-container:#2b4090;
  --md-custom-plan-on-color-container:#dde1ff;
  --md-custom-pick-color:#4cddb5;
  --md-custom-pick-on-color:#00382b;
  --md-custom-pick-color-container:#00513f;
  --md-custom-pick-on-color-container:#6efad0;
  --md-custom-due-color:#ffb5a0;
  --md-custom-due-on-color:#5f1500;
  --md-custom-due-color-container:#872100;
  --md-custom-due-on-color-container:#ffdbd1;
  --app-plan-fill:rgba(184,196,255,0.075);
}
/* === tokens:end === */

/* полосы прокрутки и поля браузера — по теме (/design-critic В3): светлая — light, тёмная — dark; схема та же, что у блока цветов выше */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-app-theme="light"]){color-scheme:dark}}
:root[data-app-theme="dark"]{color-scheme:dark}

/* старых имён цветов (--accent, --ink, --plan-line …) больше нет: псевдонимы SP-0 (AR-2) сняты в SP-6, стили и чертёж (js/plan.js)
   читают токены прямо */
/* тени уровней — как их рисует сайт в таблицах токенов (elevation-preview-block, 16.09):
   уровень 1 — /components/buttons/specs (elevated button), 2 — /components/menus/specs, 3 — /components/dialogs/specs */
:root{
  --md-sys-elevation-shadow1:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
  --md-sys-elevation-shadow2:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);
  --md-sys-elevation-shadow3:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
  /* /foundations/interaction/states/state-layers: «Press +10% opacity», «Hover +8% opacity» */
  --md-sys-state-pressed:.1;--md-sys-state-hover:.08;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface);
  font-family:Roboto,system-ui,sans-serif;
  font-size:15px;line-height:1.4;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
button:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}
.mono{font-family:inherit;font-variant-numeric:tabular-nums}   /* числа — Roboto с табличными цифрами (AR-15) */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* container-type — ширины Material по ширине приложения, а не окна (план Material AR-12): тесты и dev/preview.html задают размер стилем */
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--md-sys-color-surface-container);container-type:inline-size}

/* ---------- ширины (/foundations/layout/breakpoints/*, 16.09) ----------
   compact — «use 16dp margins»; medium — «Medium layouts have margins of 24dp»; expanded, large — «a leading and trailing margin of
   24dp», «The spacer between panes is 24dp»; левая фиксированная — «360dp by default» (expanded, 840–1199), «412dp in large and
   extra-large layouts» (от 1200). Поля сверху и снизу 24, скругление 16, панели surface на surface container — одобренный макет D157
   (design/material-mock/gen.mjs:526-532), на сайте текстом нет — план Material, таблица «Не из Material».
   Две панели — js/app.js isWide (от 840 в ширину и 480 в высоту, D187); страницы внутри панелей — с полями 16, как в макете */
@container (min-width:600px){
  #app>.page{padding-left:var(--md-sys-measurement-space300);padding-right:var(--md-sys-measurement-space300)}
}
@container (min-width:1200px){
  .panes>.pane.list{flex-basis:412px}
}
.panes{flex:1;min-height:0;display:flex;gap:var(--md-sys-measurement-space300);padding:var(--md-sys-measurement-space300);
  background:var(--md-sys-color-surface-container)}
.pane{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--md-sys-shape-corner-large);background:var(--md-sys-color-surface)}
.pane.list{flex:0 0 360px}
.pane.detail{flex:1}

/* ---------- шапка: small app bar (/components/app-bars/specs, 16.09) ----------
   высота 64, отступы слева и справа 4, между кнопками 0; заголовок 22/28/400, подзаголовок 12/16/500;
   контейнер surface, заголовок on-surface, подзаголовок и кнопки on-surface-variant */
.bar{
  flex:0 0 auto;display:flex;align-items:center;gap:0;height:64px;
  padding:0 var(--md-sys-measurement-space50);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);
}
.bar h1{
  margin:0;padding:0 var(--md-sys-measurement-space50);flex:1;min-width:0;
  font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);
  font-weight:var(--md-sys-typescale-title-large-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bar>h1:first-child{padding-left:var(--md-sys-measurement-space150)}   /* без кнопки слева заголовок — в 16 от края */
.bar .sub{display:block;color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);
  font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* medium flexible («Объект», «Бланк монтажа» — D364): контейнер по тексту, заголовок 28/36/400, подзаголовок 14/20/500, текст переносится
   («Don’t wrap text in a small app bar», flexible — «multi-line support»: /components/app-bars/guidelines, /specs); при прокрутке — small
   (.small, js/app.js barCollapse); ⋮ — справа в первом ряду */
.bar.tall{height:auto;min-height:64px;flex-wrap:wrap;align-content:flex-start;padding-bottom:var(--md-sys-measurement-space150)}
.bar.tall>.iconbtn:is([data-menu-site],[data-menu-crew]){margin-left:auto}
.bar.tall h1{order:2;flex-basis:100%;padding:0 var(--md-sys-measurement-space150);white-space:normal;
  font-size:var(--md-sys-typescale-headline-medium-size);line-height:var(--md-sys-typescale-headline-medium-line-height)}
.bar.tall .sub{white-space:normal;font-size:var(--md-sys-typescale-title-small-size);
  line-height:var(--md-sys-typescale-title-small-line-height);letter-spacing:0}
.bar.tall.small{height:64px;flex-wrap:nowrap;padding-bottom:0}
.bar.tall.small>.iconbtn:is([data-menu-site],[data-menu-crew]){margin-left:0}
.bar.tall.small h1{order:0;flex-basis:auto;padding:0 var(--md-sys-measurement-space50);white-space:nowrap;
  font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height)}
.bar.tall.small .sub{white-space:nowrap;font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height)}
.bar.tall.small .sub+.sub{display:none}
.bar .sub .nw{white-space:nowrap}   /* имя и телефон заказчика в строке шапки бланка не рвутся — строка переносится по точке (D364) */

.iconbtn{width:38px;height:38px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;color:var(--md-sys-color-on-surface-variant)}
.iconbtn:active{background:var(--md-sys-color-surface-container-highest)}
.iconbtn[disabled]{opacity:.35;cursor:default;background:none}
.iconbtn svg{width:20px;height:20px;fill:currentColor}   /* значки Material Symbols — заливкой (AR-5) */
/* кнопка-значок S (/components/icon-buttons/specs): контейнер 40, значок 24, круглая; цель касания 48 */
.bar .iconbtn,.plrow .iconbtn{width:48px;height:48px;padding:var(--md-sys-measurement-space50);border-radius:50%;
  background-clip:content-box;color:var(--md-sys-color-on-surface-variant)}
.bar .iconbtn:active,.plrow .iconbtn:active{background-color:color-mix(in srgb,var(--md-sys-color-on-surface-variant) 10%,transparent)}
.bar .iconbtn[disabled],.plrow .iconbtn[disabled]{opacity:.38;background:none}
.bar .iconbtn svg,.plrow .iconbtn svg{width:24px;height:24px}

/* ---------- страницы со списками ---------- */
/* поля страницы — compact 16 (/foundations/layout/breakpoints/overview) */
.page{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:var(--md-sys-measurement-space100) var(--md-sys-measurement-space200) var(--md-sys-measurement-space300)}
/* под плавающей «+» низ страницы свободен: 16 + 56 + 16 */
.page.hasfab{padding-bottom:88px}
/* список — expressive segmented (/components/lists/specs, 16.09): между строками 2; углы 4 внутри, 16 снаружи
   («Unselected corner radius: 4dp inner, 16dp outer»); строка от 56, отступы 16 слева, 24 справа, 10 сверху и снизу,
   между элементами 12; текст 16/24/400 on-surface, вторая строка 14/20/400 on-surface-variant; контейнер surface */
.list{display:flex;flex-direction:column;gap:var(--md-sys-measurement-space25)}
.row{
  display:flex;align-items:center;gap:var(--md-sys-measurement-space150);width:100%;min-height:56px;text-align:left;
  background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);border:none;
  border-radius:var(--md-sys-shape-corner-large);
  padding:10px var(--md-sys-measurement-space300) 10px var(--md-sys-measurement-space200);box-shadow:none;
}
.row:active{background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,var(--md-sys-color-surface))}
/* монитор: строки на панели (surface) залиты surface container low (D196; /styles/color/roles, /components/lists/guidelines «filled list items»);
   на телефоне строки и так светлее фона приложения (surface на surface container) — как были. Выбранная, раскрытая, красная — свои цвета ниже */
.panes .row{background:var(--md-sys-color-surface-container-low)}
.panes .row:active{background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,var(--md-sys-color-surface-container-low))}
/* монитор: содержимое правой панели не шире 840, прижато влево, справа пусто (D192); шапка — во всю панель (она не .page) */
.pane.detail .page{padding-right:max(var(--md-sys-measurement-space200),calc(100% - 840px - var(--md-sys-measurement-space200)))}
/* монитор: кнопки по ширине надписи, слева (D191; /components/buttons/guidelines «Don't allow the button to stretch»); зазор 8 — как .btnrow */
.panes .btnrow{justify-content:flex-start}
.panes .btnrow .btn{flex:0 0 auto}
.list>.row{border-radius:var(--md-sys-shape-corner-extra-small)}
.list>.row:first-child,.list>:not(.row)+.row{border-top-left-radius:var(--md-sys-shape-corner-large);border-top-right-radius:var(--md-sys-shape-corner-large)}
.list>.row:last-child,.list>.row:not(:has(+.row)){border-bottom-left-radius:var(--md-sys-shape-corner-large);border-bottom-right-radius:var(--md-sys-shape-corner-large)}
/* выбранная строка (монитор, объект открыт справа): «selected container color» secondary container, текст on secondary container,
   «Selected corner radius: 16dp» (/components/lists/specs, 16.09) */
.list>.row[aria-current="true"]{border-radius:var(--md-sys-shape-corner-large);
  background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.list>.row[aria-current="true"] .meta,.list>.row[aria-current="true"] .chev{color:var(--md-sys-color-on-secondary-container)}
.row .grow{flex:1;min-width:0}
.row .title{font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);
  font-weight:var(--md-sys-typescale-body-large-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);
  color:var(--md-sys-color-on-surface-variant)}
.row .lead,.row .chev{color:var(--md-sys-color-on-surface-variant);flex:0 0 auto;display:grid;place-items:center}
.row .lead svg{width:24px;height:24px;fill:currentColor}
.row .chev svg{width:20px;height:20px;fill:currentColor}          /* trailing icon expressive 20 */
.tag{
  display:inline-block;margin-left:var(--md-sys-measurement-space100);vertical-align:2px;
  padding:0 var(--md-sys-measurement-space100);border-radius:var(--md-sys-shape-corner-small);
  background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);
  font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);
  font-weight:var(--md-sys-typescale-label-small-weight);
}
/* пустое состояние — body-medium on-surface-variant по центру (AR-16) */
.empty{padding:var(--md-sys-measurement-space300) var(--md-sys-measurement-space200);text-align:center;color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height)}

/* ---------- кнопки S (/components/buttons/specs, 16.09): высота 40, 14/20/500, значок 20, отступы 16, между значком и словом 8,
   round — полное скругление; filled primary, tonal secondary container, outlined — обводка 1 outline variant, text — primary ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--md-sys-measurement-space100);height:40px;
  padding:0 var(--md-sys-measurement-space200);border-radius:20px;white-space:nowrap;
  font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);
  font-weight:var(--md-sys-typescale-label-large-weight)}
.btn svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor}
.btn.filled{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.btn.tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.btn.outlined{border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant)}
.btn.text{color:var(--md-sys-color-primary)}
.btn.text.danger{color:var(--md-sys-color-error)}
.btn:active{filter:brightness(.92)}
.btn.outlined:active,.btn.text:active{filter:none;background:color-mix(in srgb,currentColor 10%,transparent)}
.btnrow{display:flex;gap:var(--md-sys-measurement-space100);margin-top:var(--md-sys-measurement-space200)}
.btnrow .btn{flex:1}
.btnend{display:flex;justify-content:flex-end;gap:var(--md-sys-measurement-space100);margin-top:var(--md-sys-measurement-space300)}
.btnstart{display:flex;margin-top:var(--md-sys-measurement-space300)}

/* ---------- плавающая «+» (/components/floating-action-button/specs): 56, значок 24, скругление 16, primary container,
   тень уровня 3; отступ 16 от краёв (/components/fab-menu/specs: «The FAB should always have 16dp margins») ---------- */
.fab{position:absolute;right:var(--md-sys-measurement-space200);bottom:var(--md-sys-measurement-space200);z-index:5;
  width:56px;height:56px;border-radius:var(--md-sys-shape-corner-large);display:grid;place-items:center;
  background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);
  box-shadow:var(--md-sys-elevation-shadow3)}
.fab svg{width:24px;height:24px;fill:currentColor}
.fab:active{filter:brightness(.94)}

/* ---------- полоска «… удалено · Отменить» (D207; /components/snackbar/specs, 18.09): высота 48 в одну строку, отступ 16 слева и 8
   справа при кнопке, контейнер inverse surface, текст inverse on surface body-medium, кнопка — text button inverse primary label-large;
   тень level 3 и скругление extra small 4 — свотчи без чисел (таблица «Не из Material» плана); от краёв 16 (compact margins), над «+»
   на 8 — js/undo.js snackPlace; на мониторе слева, по содержимому, не шире 560 (AR-13). Под затемнением окон (50), над «+» (5) — AR-3 а.
   Появление short4 200, уход копией short3 150 (/styles/motion/easing-and-duration). ---------- */
:is(.snack,.snack-gone){display:flex;align-items:center;gap:var(--md-sys-measurement-space100);min-height:48px;box-sizing:border-box;
  padding:0 var(--md-sys-measurement-space100) 0 var(--md-sys-measurement-space200);border-radius:var(--md-sys-shape-corner-extra-small);
  background:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface);box-shadow:var(--md-sys-elevation-shadow3);
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);
  font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking)}
.snack{position:absolute;z-index:40;left:var(--md-sys-measurement-space200);right:var(--md-sys-measurement-space200);
  bottom:calc(var(--md-sys-measurement-space200) + env(safe-area-inset-bottom, 0px))}
#app.paned>.snack{left:var(--md-sys-measurement-space300);right:auto;max-width:560px}   /* expanded: поля 24 (/foundations/layout/breakpoints/expanded) — вровень с левой панелью */
.snacktext{flex:1;min-width:0}
.snackbtn{flex:0 0 auto;min-height:40px;padding:0 var(--md-sys-measurement-space150);border-radius:20px;
  color:var(--md-sys-color-inverse-primary);font-size:var(--md-sys-typescale-label-large-size);
  line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);
  letter-spacing:var(--md-sys-typescale-label-large-tracking)}
.snackbtn:active{background:color-mix(in srgb, var(--md-sys-color-inverse-primary) 10%, transparent)}
@media (hover:hover){.snackbtn:hover:not(:active){background:color-mix(in srgb, var(--md-sys-color-inverse-primary) 8%, transparent)}}
/* пока полоска видна, последний ряд списка прокручивается над ней: запас 48 + 8 (AR-5) */
#app.snack-on .page{padding-bottom:calc(var(--md-sys-measurement-space300) + 48px + var(--md-sys-measurement-space100))}
#app.snack-on .page.hasfab{padding-bottom:calc(88px + 48px + var(--md-sys-measurement-space100))}

/* ---------- поиск (/components/search/specs; /components/app-bars/specs «Search container»): 56, полное скругление,
   контейнер surface container, значок и подсказка on-surface-variant, текст 16/24 ---------- */
.searchbar{display:flex;align-items:center;gap:var(--md-sys-measurement-space200);height:56px;
  margin-bottom:var(--md-sys-measurement-space200);padding:0 var(--md-sys-measurement-space200);border-radius:28px;
  background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}
.searchbar svg{width:24px;height:24px;flex:0 0 auto;fill:currentColor}
.searchbar .fin.search{flex:1;min-width:0;height:100%;margin:0;padding:0;border:none;border-radius:0;background:transparent;
  color:var(--md-sys-color-on-surface);outline:none;font-size:var(--md-sys-typescale-body-large-size)}
.searchbar .fin.search::placeholder{color:var(--md-sys-color-on-surface-variant)}
.searchbar:focus-within{outline:2px solid var(--md-sys-color-primary);outline-offset:-2px}


/* поиск в шапке «Объектов» (D317: на месте заголовка — поле поиска, ⋮ рядом; /components/app-bars/specs «Search container») */
.bar.search .searchbar{flex:1;min-width:0;margin:0 0 0 var(--md-sys-measurement-space150)}
/* от поля до ⋮ — 8 (/components/app-bars/specs, «Search app bar size and padding measurements», 21.09; план календаря SP-3 п.9; до того 0) */
.bar.search{gap:var(--md-sys-measurement-space100)}

/* ---------- вкладки «Календарь» · «Объекты» — primary tabs (/components/tabs/specs, проверено 21.09) ----------
   высота 48 с чертой 1 внутри; «Tabs are divided into equal sections»; полоска выбранной 3, углы 3·3·0·0, отступ 2 с каждого края
   подписи, не короче 24; подпись title small 14/20/500; цвета — контейнер surface, выбранная primary, остальные on surface variant,
   черта outline variant; состояния — слой 8 / 10 % цветом подписи (/foundations/interaction/states/state-layers) */
.tabs{flex:0 0 auto;display:flex;height:48px;background:var(--md-sys-color-surface);border-bottom:1px solid var(--md-sys-color-outline-variant)}
.tab{flex:1;display:flex;justify-content:center;height:100%;padding:0 var(--md-sys-measurement-space200);border:none;border-radius:0;
  background:none;color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);
  font-weight:var(--md-sys-typescale-title-small-weight);letter-spacing:var(--md-sys-typescale-title-small-tracking)}
.tab span{position:relative;display:flex;align-items:center;min-width:24px;justify-content:center}
.tab[aria-selected="true"]{color:var(--md-sys-color-primary)}
.tab[aria-selected="true"] span::after{content:"";position:absolute;left:2px;right:2px;bottom:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--md-sys-color-primary)}
.tab:active{background:color-mix(in srgb,currentColor 10%,transparent)}
@media (hover:hover){.tab:hover{background:color-mix(in srgb,currentColor 8%,transparent)}}

/* ---------- «Неделя» лентой (D243, D244): картинки SP-0 и SP-1, принятые владельцем ----------
   число дня title small 14/20/500 (D323), день недели label small 11/16/500 строчными, кружок «сегодня» 28, цифры по центру
   кружка по краске букв (D322), до плашек 12 — по снимку Google Календаря владельца (D320, D321); число стоит у верха ленты,
   пока идут записи дня (sticky); плашки — цвета Google из calEvents (D309), углы 4 внутри и 16 снаружи группы дня, как список
   (/components/lists/specs); бронь — бледная заливка и рамка SVG 2 / 8 / 6 Графитом (D316: CSS dashed длину штриха не задаёт) */
.todayic{position:relative;display:block;width:24px;height:24px}
.todayic svg{position:absolute;inset:0}
.todayic b{position:absolute;left:0;right:0;top:10px;text-align:center;font-size:9px;line-height:11px;font-weight:700;
  font-variant-numeric:tabular-nums}
.page.cal{padding-top:0}
.cweek{display:flex;align-items:center;gap:var(--md-sys-measurement-space100);
  padding:var(--md-sys-measurement-space150) var(--md-sys-measurement-space50) var(--md-sys-measurement-space50);
  color:var(--md-sys-color-on-surface-variant);font-size:var(--md-sys-typescale-label-medium-size);
  line-height:var(--md-sys-typescale-label-medium-line-height);font-weight:var(--md-sys-typescale-label-medium-weight);
  letter-spacing:var(--md-sys-typescale-label-medium-tracking)}
.cweek::after{content:"";flex:1;height:1px;background:var(--md-sys-color-outline-variant)}
.cday{display:flex;gap:var(--md-sys-measurement-space150);padding:var(--md-sys-measurement-space100) 0}
.cday+.cday{border-top:1px solid var(--md-sys-color-outline-variant)}
.cdcol{flex:0 0 36px;width:36px;align-self:flex-start;position:sticky;top:0;text-align:center;padding-top:var(--md-sys-measurement-space50)}
.cdcol .dw{color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);
  font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking)}
.cdcol .dn{color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);
  font-weight:var(--md-sys-typescale-title-small-weight)}
.cday.today .dw{color:var(--md-sys-color-primary)}
.cday.today .dn{display:grid;place-items:center;width:28px;height:28px;margin:0 auto;border-radius:50%;
  background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.cday .evs{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--md-sys-measurement-space25)}
.cev{position:relative;display:block;width:100%;min-width:0;margin:0;border:none;text-align:left;
  border-radius:var(--md-sys-shape-corner-extra-small);padding:6px var(--md-sys-measurement-space150);
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);
  font-weight:var(--md-sys-typescale-body-medium-weight)}
.evs>.cev:first-child{border-top-left-radius:var(--md-sys-shape-corner-large);border-top-right-radius:var(--md-sys-shape-corner-large)}
.evs>.cev:last-child{border-bottom-left-radius:var(--md-sys-shape-corner-large);border-bottom-right-radius:var(--md-sys-shape-corner-large)}
.cev.one{padding-top:var(--md-sys-measurement-space100);padding-bottom:var(--md-sys-measurement-space100)}
.cev .l1{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cev .l2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:color-mix(in srgb,currentColor 78%,transparent)}
.cev.hold{background:color-mix(in srgb,var(--ev) 18%,transparent);color:var(--md-sys-color-on-surface)}
.cev .dash{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cev .dash rect{width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke:#616161;stroke-width:2;stroke-dasharray:8 6}
button.cev:active{box-shadow:inset 0 0 0 999px color-mix(in srgb,currentColor 10%,transparent)}
@media (hover:hover){button.cev:hover{box-shadow:inset 0 0 0 999px color-mix(in srgb,currentColor 8%,transparent)}}
.cnow{display:flex;align-items:center;margin:var(--md-sys-measurement-space25) 0}
.cnow i{width:8px;height:8px;border-radius:50%;background:#D50000;flex:0 0 auto}
.cnow s{flex:1;height:2px;background:#D50000}
.cempty{padding:6px var(--md-sys-measurement-space50);color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height)}

/* ---------- «Сентябрь ▾» — кнопка вида (D245, план календаря SP-7): текст — от заголовка шапки 22/28/400, стрелка arrow_drop_down 24,
   цель 48, полностью скруглённая; слой 8 / 10 % цветом текста (/foundations/interaction/states/state-layers); текст — в 16 от края,
   как был (4 шапки + 4 + 8). Меню вида — строки меню статуса (.stitem): открытый — tertiary container (/components/menus/specs) ---------- */
.bar>h1.calh1{padding-left:var(--md-sys-measurement-space50)}
.calttl{display:inline-flex;align-items:center;max-width:100%;height:48px;padding:0 var(--md-sys-measurement-space50) 0 var(--md-sys-measurement-space100);
  border-radius:24px;color:inherit}
.calttl>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calttl>svg{width:24px;height:24px;flex:0 0 24px;fill:currentColor}
.calttl:active{background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,transparent)}
@media (hover:hover){.calttl:hover:not(:active){background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent)}}
.menu button.stitem .sdot.vic{color:var(--md-sys-color-on-surface-variant)}
.menu button.stitem.on .sdot.vic{color:inherit}

/* ---------- «Месяц» (план календаря SP-7; картинка «„Месяц“ в календаре», мерило § 21; D236, D282, D338–D341) ----------
   раскладка — как на снимке Google Календаря владельца 19.09 (D282), каждое число — ступень Material: поля экрана 4, между клетками и
   полосками 2 (/styles/spacing/tokens: Space 50, Space 25), скругление 4 (/styles/shape/corner-radius-scale: Extra small); число 14/20/500
   (title small, как в ленте — D323), место под число 32; сегодня — заливка primary 32 × 20, полностью скруглённая; полоска 16 — текст
   11/16/500 (label small), отступ 4, в одну строку, лишнее обрезается без многоточия (D236: «сколько символов влезет»); галочка сделанного
   12 — не из Material (у сайта значки от 20, на полоске 16 не помещаются); строка дней недели 24 — 12/16/500 (label medium); черта
   месяца — 14/20/500 цветом текста и линия 1 outline variant, отступы как у строки недели ленты (/components/divider/specs). Клетка —
   кнопка на весь день (D339): число и полоски тапа не ловят. Клетки — surface на surface container, на мониторе — surface container low
   на surface (D196); слой 8 / 10 % цветом текста */
.mhead{flex:0 0 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:var(--md-sys-measurement-space25);height:24px;
  align-items:center;padding:0 var(--md-sys-measurement-space50);text-align:center;color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);
  font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}
.mhead .on{color:var(--md-sys-color-primary)}
.page.cal.month{display:flex;flex-direction:column;gap:var(--md-sys-measurement-space25);padding:0 var(--md-sys-measurement-space50) 88px}
.mweek{flex:0 0 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:var(--md-sys-measurement-space25);
  row-gap:var(--md-sys-measurement-space25)}
.mtile{grid-row:1/-1;display:block;width:100%;height:auto;margin:0;padding:0;border:none;border-radius:var(--md-sys-shape-corner-extra-small);
  background:var(--md-sys-color-surface)}
.mtile:active{background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,var(--md-sys-color-surface))}
.panes .mtile{background:var(--md-sys-color-surface-container-low)}
.panes .mtile:active{background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,var(--md-sys-color-surface-container-low))}
@media (hover:hover){
  .mtile:hover:not(:active){background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,var(--md-sys-color-surface))}
  .panes .mtile:hover:not(:active){background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,var(--md-sys-color-surface-container-low))}
}
.mdn{grid-row:1;align-self:center;justify-self:center;position:relative;box-sizing:border-box;min-width:32px;height:20px;
  padding:0;border-radius:10px;text-align:center;pointer-events:none;color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);
  font-weight:var(--md-sys-typescale-title-small-weight);font-variant-numeric:tabular-nums}
.mdn.today{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.msb{position:relative;min-width:0;height:16px;padding:0 var(--md-sys-measurement-space50);border-radius:var(--md-sys-shape-corner-extra-small);
  overflow:hidden;white-space:nowrap;text-overflow:clip;pointer-events:none;
  font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);
  font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking)}
.msb.hold{background:color-mix(in srgb,var(--ev) 18%,transparent);color:var(--md-sys-color-on-surface)}
.msb .dash{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.msb .dash rect{width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke:#616161;stroke-width:2;stroke-dasharray:8 6}
.msb>svg:not(.dash){width:12px;height:12px;margin-right:2px;vertical-align:-2px;fill:currentColor}
.mdiv{flex:0 0 auto;display:flex;align-items:center;gap:var(--md-sys-measurement-space100);
  padding:var(--md-sys-measurement-space150) var(--md-sys-measurement-space50) var(--md-sys-measurement-space50);color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);
  font-weight:var(--md-sys-typescale-title-small-weight)}
.mdiv::after{content:"";flex:1;height:1px;background:var(--md-sys-color-outline-variant)}
/* ---------- экран обмера (план Material SP-2, D161): устройство как сегодня, цифры — со страниц m3.material.io (findings § 17) ---------- */
/* чертёж — фон surface container low; «вписать» — кнопка-значок S tonal (/components/icon-buttons/specs: 40 в цели 48, значок 24) */
#planwrap{flex:1;position:relative;min-height:0;background:var(--md-sys-color-surface-container-low);touch-action:none}
#plan{display:block;width:100%;height:100%}
.planbtns{position:absolute;right:var(--md-sys-measurement-space100);top:var(--md-sys-measurement-space100);display:flex;gap:var(--md-sys-measurement-space100)}   /* в ряд: значок фигуры слева от «вписать» (D219) */
.planbtns .iconbtn{width:48px;height:48px;padding:var(--md-sys-measurement-space50);border-radius:50%;background-clip:content-box;
  background-color:color-mix(in srgb,var(--md-sys-color-secondary-container) 60%,transparent);color:var(--md-sys-color-on-secondary-container)}   /* полупрозрачная — D219; 60 % — Не из Material (сайт числа не даёт) */
.planbtns .iconbtn svg{width:24px;height:24px}
.planbtns .iconbtn:active{filter:brightness(.92)}

/* площадь и периметр на чертеже (D181) — плашкой «как у кнопки» «вписать»: высота 40 (контейнер кнопки-значка S,
   /components/icon-buttons/specs), полное скругление, tonal (secondary container), текст label-large 14/20/500, отступы 16
   (/components/buttons/specs, S); по центру кнопки «вписать»: 8 + 4 сверху и слева; на нажатия не отвечает */
.planstats{position:absolute;left:var(--md-sys-measurement-space150);top:var(--md-sys-measurement-space150);height:40px;
  display:flex;align-items:center;padding:0 var(--md-sys-measurement-space200);border-radius:20px;white-space:nowrap;pointer-events:none;
  background:color-mix(in srgb,var(--md-sys-color-secondary-container) 60%,transparent);color:var(--md-sys-color-on-secondary-container);   /* D219 */
  font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);
  font-weight:var(--md-sys-typescale-label-large-weight)}

/* полосы состояния (Не из Material, D161): отступы space125 / space200, текст label-large 14/20/500, значок 20
   (/styles/icons/applying-icons: «Optical sizes range from 20dp to 48dp»); цвета custom ok container / error container */
.notice{flex:0 0 auto;display:flex;align-items:center;gap:var(--md-sys-measurement-space100);min-height:40px;
  padding:var(--md-sys-measurement-space125) var(--md-sys-measurement-space200);
  font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);
  font-weight:var(--md-sys-typescale-label-large-weight)}
.notice.bad{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}
.notice.good{background:var(--md-custom-ok-color-container);color:var(--md-custom-ok-on-color-container)}
.notice svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor}

/* ---------- панель ввода: surface; поля страницы compact 16 ---------- */
.dock{
  flex:0 0 auto;background:var(--md-sys-color-surface);
  padding:var(--md-sys-measurement-space100) var(--md-sys-measurement-space200) calc(var(--md-sys-measurement-space200) + env(safe-area-inset-bottom));
}
/* подсказка title-small 14/20/500; набранное число emphasized headline-medium 28/36/500 */
.prompt{display:flex;align-items:baseline;gap:var(--md-sys-measurement-space100);padding:0 0 var(--md-sys-measurement-space100)}
.prompt .what{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);
  font-weight:var(--md-sys-typescale-title-small-weight)}
.prompt .val{color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-headline-medium-size);line-height:var(--md-sys-typescale-headline-medium-line-height);font-weight:500}
.prompt .val.ph{color:var(--md-sys-color-outline);font-weight:var(--md-sys-typescale-headline-medium-weight)}
.prompt .unit{color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height)}

/* длина и ширина прямоугольной комнаты — outlined text field (/components/text-fields/specs, 16.09): 56, скругление 4, обводка 1
   outline, в фокусе 3 primary, отступ 16, текст и суффикс body-large 16/24, подпись на рамке body-small 12/16 */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--md-sys-measurement-space100);padding:var(--md-sys-measurement-space100) 0 var(--md-sys-measurement-space200)}
.field{
  position:relative;display:flex;align-items:center;gap:var(--md-sys-measurement-space50);height:56px;text-align:left;
  padding:0 var(--md-sys-measurement-space200);border-radius:var(--md-sys-shape-corner-extra-small);
  border:1px solid var(--md-sys-color-outline);background:transparent;color:var(--md-sys-color-on-surface);
}
.field.on{border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 2px var(--md-sys-color-primary)}
.field .flabel{position:absolute;left:var(--md-sys-measurement-space150);top:-8px;padding:0 var(--md-sys-measurement-space50);
  background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface-variant);white-space:nowrap;
  font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height)}
.field.on .flabel{color:var(--md-sys-color-primary)}
.field .fval{flex:1;min-width:0;font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height)}
.field .funit{color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height)}

.chips{display:flex;gap:6px;overflow-x:auto;padding:0 4px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:6px 11px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);
  font-size:13px;font-weight:600;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container-high);
}
.chip.on{background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}

/* клавиатура (Не из Material, D161): 3 столбца, 12 клавиш; кнопка square S (/components/buttons/specs: скругление 12), высота 48 —
   цель касания; зазор space100; цифры title-large 22/28; значки 24; фон surface container highest */
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md-sys-measurement-space100)}
.key{
  height:48px;border-radius:var(--md-sys-shape-corner-medium);display:grid;place-items:center;
  background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);
  font-weight:var(--md-sys-typescale-title-large-weight);
}
.key:active{background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,var(--md-sys-color-surface-container-highest))}
.key.small{color:var(--md-sys-color-on-surface-variant);font-size:var(--md-sys-typescale-title-medium-size)}
.key svg{width:24px;height:24px;fill:currentColor}

/* кнопки действий — кнопки S (.btn, выше): filled «Готово» / «Замкнуть» / «Расчёт помещения», tonal остальные; во всю ячейку */
.acts{display:grid;gap:var(--md-sys-measurement-space100);margin-top:var(--md-sys-measurement-space100);grid-template-columns:repeat(4,1fr)}
.acts.two{grid-template-columns:repeat(2,1fr)}
.acts.one{grid-template-columns:1fr}
.acts .btn{width:100%;min-width:0}
/* ряд со связкой «Шаг назад» · «Шаг вперёд» — по сетке клавиш (D219): связка шириной с клавишу, главная — с две.
   Связка — connected button group (/components/button-groups/specs, 16.09: «use 2dp padding», внутренние углы XS 4, внешние полные) */
.acts.step{grid-template-columns:repeat(3,1fr)}
.acts.step>.btn{grid-column:2 / span 2}
/* «Готово» не прыгает (D222): во всех состояниях под «2» и «3»; «Отменить» / «Отмена» — словом под «1» (со значком на 360 не помещается) */
.acts.step>.btn.left{grid-column:1;padding:0}
.stepgroup{display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:0}
.stepgroup .btn{padding:0}
.stepgroup .btn:first-child{border-radius:20px 4px 4px 20px}
.stepgroup .btn:last-child{border-radius:4px 20px 20px 4px}
/* выключенная кнопка (/components/buttons/specs, Disabled): контейнер on-surface 10 %, надпись и значок on-surface 38 % */
.btn[disabled]{cursor:default;filter:none;background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,transparent);
  color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent);border-color:transparent}

/* ---------- «Итоги», «Бланк монтажа», низ «Расчёта»: строки «название — число» (план Material SP-3) ----------
   строка списка (/components/lists/specs): от 56, текст body-large 16/24 on-surface, число справа — title-medium 16/24/500 табличными */
.row.kv{justify-content:space-between;align-items:center;gap:var(--md-sys-measurement-space150);border:none}
.row.kv .k{font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);
  color:var(--md-sys-color-on-surface)}
.row.kv .v{flex:0 0 auto;text-align:right;color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);
  font-weight:var(--md-sys-typescale-title-medium-weight)}
/* текст в строке — body-medium 14/20 on-surface-variant (вторая строка элемента списка) */
/* абзац-пояснение «Итогов» — не длиннее 75 знаков в строке (D198) */
.row .hint{max-width:75ch}
.plainlist,.row .hint{margin:0;color:var(--md-sys-color-on-surface-variant);word-break:break-word;font-variant-numeric:tabular-nums;
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height)}
/* заголовок раздела — title-small 14/20/500 on-surface-variant; отступ слева как у текста строки (16), сверху 16, снизу 8 */
.sectionlabel{margin:var(--md-sys-measurement-space200) var(--md-sys-measurement-space200) var(--md-sys-measurement-space100);
  color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);
  font-weight:var(--md-sys-typescale-title-small-weight)}

/* ---------- окна ---------- */
/* ---------- окна: basic dialog (/components/dialogs/specs, таблица Basic, 16.09) ----------
   скругление 28, ширина 280–560, отступы 24, заголовок 24/32/400 (headline), заголовок–поле 16, поле–кнопки 24,
   между кнопками 8, контейнер surface container high, тень уровня 3. Затемнение — числа на сайте нет, как сегодня (Не из Material).
   :is(…-gone) — уходящая копия окна выглядит как окно (движение — блок ниже; план Material SP-6) */
:is(.scrim,.scrim-gone){position:fixed;inset:0;background:rgba(10,14,18,.55);display:grid;place-items:center;padding:18px;z-index:50}
/* D215: окно стоит низом на середине экрана приложения (клавиатура до него не достаёт и, прячась, не сдвигает); выше половины —
   верх на 18 (отступ затемнения), не выше. Две равные строки сетки: первая растёт под высокое окно (max-content — у окна с прокруткой автоминимум 0). Кроме меню у кнопки (.clear) и
   окна «Итого» (.cleanscrim). Сайт ставит окна по центру (/components/dialogs) — место по слову владельца, в «Не из Material» */
:is(.scrim,.scrim-gone):not(.clear):not(.cleanscrim){grid-template-rows:minmax(max-content,1fr) 1fr}
:is(.scrim,.scrim-gone):not(.clear):not(.cleanscrim)>:is(.modal,.modal-gone){grid-row:1;align-self:end}
:is(.modal,.modal-gone){background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);
  border-radius:var(--md-sys-shape-corner-extra-large);padding:var(--md-sys-measurement-space300);
  width:100%;min-width:min(280px,100%);max-width:560px;max-height:86vh;overflow-y:auto;box-shadow:var(--md-sys-elevation-shadow3)}
:is(.modal,.modal-gone) h2{margin:0 0 var(--md-sys-measurement-space200);font-size:var(--md-sys-typescale-headline-small-size);
  line-height:var(--md-sys-typescale-headline-small-line-height);font-weight:var(--md-sys-typescale-headline-small-weight)}
:is(.modal,.modal-gone) p{margin:0 0 14px;font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);
  color:var(--md-sys-color-on-surface-variant)}
/* поле окна — outlined text field (/components/text-fields/specs): 56, скругление 4, обводка 1 outline, в фокусе 3 primary, отступ 16 */
:is(.modal,.modal-gone) input{display:block;width:100%;height:56px;font:inherit;font-size:var(--md-sys-typescale-body-large-size);
  padding:0 var(--md-sys-measurement-space200);border-radius:var(--md-sys-shape-corner-extra-small);
  border:1px solid var(--md-sys-color-outline);background:transparent;color:var(--md-sys-color-on-surface);margin-bottom:var(--md-sys-measurement-space300)}
:is(.modal,.modal-gone) input:focus{outline:none;border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 2px var(--md-sys-color-primary)}
.mbtns{display:flex;gap:var(--md-sys-measurement-space100);justify-content:flex-end}
/* кнопки окна — S 40: «Отмена» text, «Готово» filled */
.mbtn{height:40px;padding:0 var(--md-sys-measurement-space200);border-radius:20px;color:var(--md-sys-color-primary);
  font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);
  font-weight:var(--md-sys-typescale-label-large-weight)}
.mbtn:active{background:color-mix(in srgb,currentColor 10%,transparent)}
.mbtn.go{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.mbtn.danger{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}
/* строки выбора в окне («Тема», каскад) и пункты меню: 48 (цель касания; baseline list-item 48), отступы 16, между 12, значок 20,
   14/20/500 (/components/menus/specs) */
.menu{display:flex;flex-direction:column;gap:var(--md-sys-measurement-space25)}
.menu button{display:flex;align-items:center;gap:var(--md-sys-measurement-space150);min-height:48px;text-align:left;
  padding:0 var(--md-sys-measurement-space200);border-radius:var(--md-sys-shape-corner-extra-small);
  font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);
  font-weight:var(--md-sys-typescale-label-large-weight)}
.menu button svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor;color:var(--md-sys-color-on-surface-variant)}
.menu button.on{color:var(--md-sys-color-primary)}
.menu button.on svg{margin-left:auto;color:inherit}
.menu button:active{background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,transparent)}
.menu button.danger{color:var(--md-sys-color-error)}
.menu .mlabel{flex:1}
.menu .mtrail{color:var(--md-sys-color-on-surface-variant);margin-left:var(--md-sys-measurement-space150)}
/* «Что показывать» в календаре (D331): строки-галочки — checkbox (/components/checkbox/specs, 21.09): квадрат 18, скругление 2, обводка 2
   on-surface-variant; выбранный — обводки нет, заливка primary, галочка on-primary 18; цель — вся строка 48. Кружок слоя — цвет плашки
   календаря (D309), 12 — как на принятой картинке «Кто что видит» (Не из Material) */
.ckbox{box-sizing:border-box;width:18px;height:18px;flex:0 0 18px;margin:0 3px;border-radius:2px;
  border:2px solid var(--md-sys-color-on-surface-variant);display:grid;place-items:center}
.ckrow[aria-checked="true"] .ckbox{border:0;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.menu .ckbox svg{width:18px;height:18px;color:inherit}
.ckdot{width:12px;height:12px;flex:0 0 12px;border-radius:50%}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* меню у кнопки (AR-6): expressive — контейнер 12, пункт 4 (первый и последний 12), отступ группы 2, между пунктами 2;
   контейнер surface container, тень уровня 2; ширина 112–280; затемнения нет — тап мимо закрывает */
:is(.scrim,.scrim-gone).clear{background:transparent;display:block;padding:0}
:is(.modal,.modal-gone).menu{position:fixed;width:auto;min-width:112px;max-width:280px;padding:var(--md-sys-measurement-space25);
  border-radius:var(--md-sys-shape-corner-medium);background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow2)}
:is(.modal,.modal-gone).menu button:first-child{border-top-left-radius:var(--md-sys-shape-corner-medium);border-top-right-radius:var(--md-sys-shape-corner-medium)}
:is(.modal,.modal-gone).menu button:last-child{border-bottom-left-radius:var(--md-sys-shape-corner-medium);border-bottom-right-radius:var(--md-sys-shape-corner-medium)}
.shareimg{width:100%;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);display:block;background:#fff}

/* ---------- движение: окна и меню появляются и уходят (план Material SP-6; сайт снят 17.09 — findings плана § 36, 36.1) ----------
   /styles/motion/transitions/transition-patterns: «M3 transitions use the legacy easing and duration system»; «Enter and exit … Within screen
   bounds — Commonly used with: FABs, dialogs, menus»; «expand and collapse along the x or y axis … Scale and z-axis motion is avoided»; «The
   direction a component enters is informed by their location on screen, expanding away from the device edge». /components/menus/guidelines:
   «Menus use an enter and exit transition»; /components/dialogs/guidelines: «Dialogs use an enter and exit transition pattern»;
   /components/fab-menu/guidelines: «Originate the transition from one of the FAB's trailing corners, preferably the top-aligned corner».
   /styles/motion/easing-and-duration/applying-easing-and-duration: появление — «Enter the screen: Emphasized decelerate», уход — «Exit the
   screen permanently: Emphasized accelerate»; длительность по площади («Transitions that cover small areas of the screen have short durations.
   Those that traverse large areas have long durations»), уход короче («Transitions that exit, dismiss, or collapse an element use shorter
   durations»): меню — появление short4 200 («covers a small area with a short 200ms duration»), уход short3 150 (короче; числа на сайте нет —
   план, «Не из Material»); окно — medium2 300 («transitions that traverse a medium area») и short4 200 («Emphasized accelerate 200ms — Exit the
   screen»); окно «Итого» во весь экран — medium4 400 («Emphasized decelerate 400ms — Enter the screen») и short4 200.
   Раскрытие — clip-path: место и размер окна не меняются. Раскрытое окно не обрезается по размаху тени: самая большая тень окна — уровень 3
   (/components/dialogs/specs, --md-sys-elevation-shadow3 выше), слой 0 1px 18px — сдвиг 1 + размытие 18 = 19.
   Уходит копия окна вне #app (js/app.js modalLeave) — классы scrim-gone / modal-gone, их вид — правила окна выше через :is().
   То же окно при перерисовке — .still (js/app.js render); меню над кнопкой — .up (js/actions.js placeMenu); «уменьшить движение» — правило
   @media (prefers-reduced-motion) в начале файла. */
:root{--app-shadow-reach:19px}
@keyframes md-enter-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(calc(-1 * var(--app-shadow-reach)))}}
@keyframes md-enter-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(calc(-1 * var(--app-shadow-reach)))}}
@keyframes md-exit-up{from{clip-path:inset(calc(-1 * var(--app-shadow-reach)))}to{clip-path:inset(0 0 100% 0)}}
@keyframes md-exit-down{from{clip-path:inset(calc(-1 * var(--app-shadow-reach)))}to{clip-path:inset(100% 0 0 0)}}
@keyframes md-fade-in{from{opacity:0}to{opacity:1}}
@keyframes md-fade-out{from{opacity:1}to{opacity:0}}
.scrim{animation:md-fade-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate)}
.modal{animation:md-enter-down var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate)}
.scrim.clear,.modal.menu{animation-duration:var(--md-sys-motion-duration-short4)}
.modal.menu.up{animation-name:md-enter-up}
.scrim.cleanscrim,.modal.cleanwin{animation-duration:var(--md-sys-motion-duration-medium4)}
.scrim.still,.scrim.still .modal{animation:none}
.scrim-gone{animation:md-fade-out var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards}
.snack{animation:md-fade-in var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate)}
.snack.still{animation:none}
.snack-gone{animation:md-fade-out var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized-accelerate) forwards}
.modal-gone{animation:md-exit-up var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards}
.scrim-gone.clear,.modal-gone.menu{animation-duration:var(--md-sys-motion-duration-short3)}
.modal-gone.menu.up{animation-name:md-exit-down}

.storage{font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);
  color:var(--md-sys-color-on-surface-variant);text-align:center;padding:12px 4px 0}

/* ---------- прайс и позиция ---------- */
.plrow{padding:4px 8px 4px 16px;gap:0}
.plrow .grow{display:flex;align-items:center;gap:12px;text-align:left;padding:6px 0;color:inherit}
.plrow .pltext{flex:1;min-width:0}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* формы «Заказчик» и «Позиция»: без карточки, поля на фоне страницы */
.form{display:flex;flex-direction:column}
.card.form{background:transparent;border:none;box-shadow:none;padding:0}
.form>.fl{font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);
  font-weight:var(--md-sys-typescale-title-small-weight);color:var(--md-sys-color-on-surface-variant);margin:16px 0 8px}
.form>.fl:first-child{margin-top:0}
/* outlined text field (/components/text-fields/specs, 16.09): 56, скругление 4, обводка 1 outline, в фокусе 3 primary,
   отступ 16, текст 16/24; подпись на рамке — 12/16 (body small) */
.fin{width:100%;font:inherit;font-size:var(--md-sys-typescale-body-large-size);padding:10px 12px;border-radius:10px;
  border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}
.fin:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:-1px}
.tf{position:relative;margin-top:var(--md-sys-measurement-space200)}
.tf:first-child{margin-top:var(--md-sys-measurement-space100)}
.tf .fin{display:block;height:56px;padding:0 var(--md-sys-measurement-space200);border-radius:var(--md-sys-shape-corner-extra-small);
  border:1px solid var(--md-sys-color-outline);background:transparent;color:var(--md-sys-color-on-surface)}
.tf .fin:focus{outline:none;border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 2px var(--md-sys-color-primary)}
.tf .fl{position:absolute;left:var(--md-sys-measurement-space150);top:-8px;padding:0 var(--md-sys-measurement-space50);
  background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);pointer-events:none;
  font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height)}
.tf .fin:focus+.fl{color:var(--md-sys-color-primary)}
.fin.bad,.tf .fin.bad{border-color:var(--md-sys-color-error);box-shadow:inset 0 0 0 2px var(--md-sys-color-error);background:transparent}
.tf .fin.bad+.fl{color:var(--md-sys-color-error)}
.fhint{font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);
  color:var(--md-sys-color-on-surface-variant);margin:4px 16px 0}
.chips.wrap{flex-wrap:wrap;overflow:visible;padding:0}
/* filter chips в формах и окнах (/components/chips/specs, 16.09): 32, скругление 8, обводка 1 outline variant, 14/20/500,
   отступы 16, между 8; выбранный — secondary container без обводки */
.chips .chip{height:32px;padding:0 var(--md-sys-measurement-space200);border-radius:var(--md-sys-shape-corner-small);
  border:1px solid var(--md-sys-color-outline-variant);background:transparent;color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);
  font-weight:var(--md-sys-typescale-label-large-weight)}
.chips .chip.on{background:var(--md-sys-color-secondary-container);border-color:transparent;color:var(--md-sys-color-on-secondary-container)}
.chips.wrap{gap:var(--md-sys-measurement-space100)}
/* строка-галочка «Выдаём» в форме позиции (план 2 SP-0, D272; картинка шага 0 — мерило § 27): отступ от поля выше — как между полями (.tf, 16) */
.form>.list{margin-top:var(--md-sys-measurement-space200)}

/* ---------- расчёт (план Material SP-3): строки — expressive segmented list (/components/lists/specs), как .list .row выше ---------- */
.estrooms,.estorder,.estroom{margin-bottom:var(--md-sys-measurement-space200)}
.estroomrow .v{flex:0 0 auto;color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);
  font-weight:var(--md-sys-typescale-title-medium-weight)}
.estroomrow.blocked,.estrow.blocked{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}
.estroomrow.blocked .v,.estroomrow.blocked .chev,.estrow.blocked .meta{color:var(--md-sys-color-on-error-container)}
/* заголовок раздела «На весь заказ», «Нет в прайсе» — title-small, как .sectionlabel */
.esttitle,.estmissing{padding:var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);
  font-weight:var(--md-sys-typescale-title-small-weight)}
/* заголовок помещения: имя title-medium и числа body-medium в одной строке (план, «Расчёт помещения»); цель касания 48 */
.estheadbtn{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--md-sys-measurement-space100);width:100%;min-height:48px;
  text-align:left;padding:var(--md-sys-measurement-space150) var(--md-sys-measurement-space200)}
.esthead .title{color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);
  font-weight:var(--md-sys-typescale-title-medium-weight)}
.esthead .meta{color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height)}
/* «по чертежу …» — text-кнопка S, серым (D77: «рядом серым») */
.estdraw{display:flex;flex-wrap:wrap;gap:var(--md-sys-measurement-space100);padding:0 0 var(--md-sys-measurement-space100)}
.btn.text.estdrawbtn{color:var(--md-sys-color-on-surface-variant)}

/* строка расчёта — вариант 2 (D164): имя и связка значков в первой строке, под ними формула, «вручную», комментарий, ползунок.
   .esttext — без своей рамки (display:contents), чтобы формула шла во всю ширину под связкой */
.estrow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--md-sys-measurement-space150);row-gap:0;align-items:center;
  padding-top:var(--md-sys-measurement-space125);padding-bottom:var(--md-sys-measurement-space125)}
.estrow>.esttext{display:contents}
.estrow .title{grid-column:1;grid-row:1}
.estrow>.estacts{grid-column:2;grid-row:1}
.estrow .meta{grid-column:1/-1;grid-row:2}
/* «вручную» — справа, в одной строке с числом и ценой (D184) */
.estrow:has(.estmanual) .meta{grid-column:1}
.estrow .estmanual{grid-column:2;grid-row:2;justify-self:end;white-space:nowrap}
.estrow>.estcomment{grid-column:1/-1;grid-row:4}
/* D33: строка без числа — формула целиком primary; у строки с числом primary только число и цена (кнопки) */
.estrow.none .meta{color:var(--md-sys-color-primary)}
.estnum{font:inherit;color:var(--md-sys-color-primary);font-weight:var(--md-sys-typescale-label-large-weight);padding:2px 0;position:relative}
/* цель нажатия 48 без изменения вида (Н1; /foundations/designing/structure): невидимый слой по центру числа */
.estnum::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,48px);height:48px;transform:translate(-50%,-50%)}
.estnum:active{background:color-mix(in srgb,currentColor 10%,transparent)}
.estrow.blocked .estnum{color:inherit}
/* «Плёнка не выбрана» нажимается всей строкой (AR-18): кнопка — во всю строку, отступы строки на ней */
.estrow.estpick{display:flex;padding:0}
.estrow.estpick>.grow{display:flex;align-items:center;align-self:stretch;min-height:56px;text-align:left;
  padding:10px var(--md-sys-measurement-space300) 10px var(--md-sys-measurement-space200)}
/* связка значков — connected button group XS (/components/button-groups/specs, 16.09): между кнопками 2, внутренние углы 4,
   внешние — полные; «minimum width of 48dp»; высота XS 32, значок 20 (/components/icon-buttons/specs); tonal — secondary container */
.estacts{display:flex;gap:var(--md-sys-measurement-space25)}
.estico{width:48px;height:32px;display:grid;place-items:center;border-radius:var(--md-sys-shape-corner-extra-small);
  background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.estico:first-child{border-top-left-radius:16px;border-bottom-left-radius:16px}
.estico:last-child{border-top-right-radius:16px;border-bottom-right-radius:16px}
.estico svg{width:20px;height:20px;fill:currentColor}
.estico:active{filter:brightness(.92)}
.estico.on{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}   /* карандаш с комментарием */
/* выключенная (/components/buttons/specs, Disabled): контейнер on-surface 10 %, значок 38 % */
.estico[disabled]{cursor:default;filter:none;background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,transparent);
  color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent)}
.estmanual{color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height)}
.estcomment{font-style:italic;color:var(--md-sys-color-on-surface-variant);white-space:pre-wrap;word-break:break-word;
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height)}
.estrow.blocked .estmanual,.estrow.blocked .estcomment{color:inherit}
/* ползунок XS окна «Количество» (/components/sliders/specs): дорожка 16, скругление 8, ручка 4 × 44, зазор у ручки 6, точка-упор 4;
   цвета — активная дорожка и ручка primary, неактивная secondary container, упор on secondary container; выключенный — активная и
   ручка on-surface 38 %, неактивная on-surface 12 % (Disabled / Track, Handle, 16.09). Зазор 6 — тенью цветом строки (AR-9) */
/* D209: ползунок — в окне «Количество» под полем (поле уже с отступом 24 снизу), до кнопок 24 (отступ окна, /components/dialogs/specs);
   зазор у ручки — цветом окна surface container high */
.estsliderwrap{position:relative;height:44px;margin-bottom:var(--md-sys-measurement-space300);--est-row-bg:var(--md-sys-color-surface-container-high)}
/* правило поля окна (56, обводка, отступ) ползунка не касается */
:is(.modal,.modal-gone) input.estslider,:is(.modal,.modal-gone) input.estslider:focus{height:44px;padding:0;margin:0;border:0;border-radius:0;
  background:transparent;box-shadow:none}
.estsliderwrap::after{content:"";position:absolute;right:6px;top:20px;width:4px;height:4px;border-radius:2px;pointer-events:none;
  background:var(--md-sys-color-on-secondary-container)}
.estslider{--md-comp-slider-track-height:16px;--md-comp-slider-handle-width:4px;--md-comp-slider-handle-height:44px;
  --est-on:var(--md-sys-color-primary);--est-off:var(--md-sys-color-secondary-container);
  display:block;width:100%;height:44px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;
  touch-action:pan-y}
.estslider::-webkit-slider-runnable-track{height:var(--md-comp-slider-track-height);border-radius:8px;
  background:linear-gradient(to right,var(--est-on) var(--p,0%),var(--est-off) var(--p,0%))}
.estslider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--md-comp-slider-handle-width);
  height:var(--md-comp-slider-handle-height);margin-top:calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
  border:none;border-radius:2px;background:var(--est-on);box-shadow:0 0 0 6px var(--est-row-bg)}
.estslider::-moz-range-track{height:var(--md-comp-slider-track-height);border-radius:8px;background:var(--est-off)}
.estslider::-moz-range-progress{height:var(--md-comp-slider-track-height);border-radius:8px;background:var(--est-on)}
.estslider::-moz-range-thumb{width:var(--md-comp-slider-handle-width);height:var(--md-comp-slider-handle-height);border:none;border-radius:2px;
  background:var(--est-on);box-shadow:0 0 0 6px var(--est-row-bg)}
.estslider[disabled]{cursor:default;--est-on:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent);
  --est-off:color-mix(in srgb,var(--md-sys-color-on-surface) 12%,transparent)}
/* категория — строка списка 56, справа expand_more / expand_less; вложенная — отступ слева +16 на уровень */
.estcat{padding-left:calc(var(--md-sys-measurement-space200) + var(--d, 0) * var(--md-sys-measurement-space200))}
/* раскрытая категория (D183: «Только выделение акцентным цветом и заголовок делаем жирнее»): primary container / on primary container,
   название title-medium 16/24/500; позиции без сдвига, у стрелки подложки нет */
.estcat.open{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.estcat.open .chev{color:inherit}
/* подпись свёрнутой категории (D193) — trailing supporting text: body-medium on-surface-variant (/components/lists/guidelines) */
.estcatsum{flex:0 0 auto;white-space:nowrap;color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height)}
.estcat.open .title{font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);
  font-weight:var(--md-sys-typescale-title-medium-weight)}
/* предупреждение плёнки С-36 — primary container, значок 20 (/styles/icons/applying-icons), текст label-large */
.estwarn{display:flex;align-items:center;gap:var(--md-sys-measurement-space100);border-radius:var(--md-sys-shape-corner-extra-small);
  padding:var(--md-sys-measurement-space125) var(--md-sys-measurement-space200);
  background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);
  font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);
  font-weight:var(--md-sys-typescale-label-large-weight)}
.estwarn svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor}
/* «Итого» помещения — строка: «Итого» title-medium, сумма emphasized title-large 22/28/500 primary (type-scale-tokens, Emphasized) */
.row.kv.esttotal .k{font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);
  font-weight:var(--md-sys-typescale-title-medium-weight)}
.row.kv.esttotal .v{color:var(--md-sys-color-primary);
  font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);font-weight:500}
.empty.small{padding:10px 12px;font-size:13px;text-align:left}
.cas{margin-bottom:14px}
/* окно карандаша — многострочное outlined text field (/components/text-fields/specs): скругление 4, обводка 1 outline, в фокусе
   3 primary, отступ 16, текст 16/24 */
:is(.modal,.modal-gone) textarea{display:block;width:100%;min-height:104px;resize:vertical;font:inherit;margin-bottom:var(--md-sys-measurement-space300);
  padding:var(--md-sys-measurement-space200);border-radius:var(--md-sys-shape-corner-extra-small);
  border:1px solid var(--md-sys-color-outline);background:transparent;color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height)}
:is(.modal,.modal-gone) textarea:focus{outline:none;border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 2px var(--md-sys-color-primary)}

/* ---------- «Расчёт»: блок после правки чертежа (SP-5, D84-D89) — полоса С-52: error container, значок 20, label-large ---------- */
.estblock{display:flex;align-items:center;gap:var(--md-sys-measurement-space100);margin:0 0 var(--md-sys-measurement-space100);
  padding:var(--md-sys-measurement-space125) var(--md-sys-measurement-space200);border-radius:var(--md-sys-shape-corner-medium);
  background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);
  font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);
  font-weight:var(--md-sys-typescale-label-large-weight)}
.estblock svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor}
.estlocked .estroomrow:not(.blocked),.estlocked .estcat,.estlocked .estheadbtn,.estlocked .estdrawbtn,
.estlocked .estrow:not(.blocked){opacity:.5}

/* ---------- «Какие стены считать» (SP-5): полоса суммы — surface container low, on-surface ---------- */
.notice.wpsum{background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);border-top:1px solid var(--md-sys-color-outline-variant)}

/* ---------- низ «Расчёта»: строки списка, «Строитель» и «Безнал +8 %» — filter chips (/components/chips/specs, 16.09):
   32, скругление 8, обводка 1 outline variant, label-large, отступы 16, между 8; выбранная — secondary container, галочка 18,
   отступ перед ней 8 ---------- */
.estkv{width:100%;text-align:left}
.estchecks{display:flex;flex-wrap:wrap;gap:var(--md-sys-measurement-space100);padding-top:var(--md-sys-measurement-space200)}
.estcheck{display:inline-flex;align-items:center;gap:var(--md-sys-measurement-space100);height:32px;
  padding:0 var(--md-sys-measurement-space200);border-radius:var(--md-sys-shape-corner-small);
  border:1px solid var(--md-sys-color-outline-variant);background:transparent;color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);
  font-weight:var(--md-sys-typescale-label-large-weight)}
.estcheck.on{padding-left:var(--md-sys-measurement-space100);border-color:transparent;
  background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.estcheck svg{width:18px;height:18px;flex:0 0 auto;fill:currentColor}
.estlocked .estkv,.estlocked .estcheck{opacity:.5}
.row.kv.estcontract .v{color:var(--md-sys-color-primary)}

/* «Бланк монтажа»: помещение — заголовок раздела и группа строк; позиция body-large, комментарий курсивом body-medium под ней;
   заказчик — строкой плашки вверху (план 2 SP-1, D361 — правила .crewcard ниже) */
.twocol .crewbtn{grid-column:1/-1}
.crewblock{margin-bottom:var(--md-sys-measurement-space200)}
.crewtitle{margin:0 var(--md-sys-measurement-space200) var(--md-sys-measurement-space100);color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);
  font-weight:var(--md-sys-typescale-title-small-weight)}
.crewline{color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height)}
.crewnote{font-style:italic;color:var(--md-sys-color-on-surface-variant);white-space:pre-wrap;word-break:break-word;
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height)}

/* окно «Итого» помещения — full-screen dialog (/components/dialogs/specs, «Full-screen dialogs are for compact breakpoints only»):
   во весь экран приложения, а не окна браузера (D148, D149); шапка — small app bar 64 с крестиком слева (D165, AR-10), заголовок
   title-large; кнопок внизу нет. absolute, а не fixed: #app сам fixed — затемнение ложится ровно на него */
:is(.scrim,.scrim-gone).cleanscrim{position:absolute;padding:0}
:is(.modal,.modal-gone).cleanwin{max-width:none;height:100%;max-height:none;border-radius:0;display:flex;flex-direction:column;overflow:hidden;padding:0;
  background:var(--md-sys-color-surface);box-shadow:none;
  padding-bottom:env(safe-area-inset-bottom)}
.cleanbox{flex:1;min-height:0;display:flex;flex-direction:column}
:is(.modal,.modal-gone) .cleanbar h2{flex:1;min-width:0;margin:0;padding:0 var(--md-sys-measurement-space50);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);
  font-weight:var(--md-sys-typescale-title-large-weight)}
.cleanlist{flex:1;min-height:0;overflow-y:auto;padding:0 var(--md-sys-measurement-space200) var(--md-sys-measurement-space200)}
/* строка — как в «Расчёте», в одну строчку: название body-large 500 on-surface, формула body-medium on-surface-variant (D150, D151) */
.cleanline{padding:var(--md-sys-measurement-space150) 0;border-bottom:1px solid var(--md-sys-color-outline-variant)}
.cleanname{color:var(--md-sys-color-on-surface);font-weight:500;
  font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height)}
.cleanmeta{color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height)}
.kv.cleantotal{display:flex;justify-content:space-between;align-items:baseline;padding:var(--md-sys-measurement-space200) 0}
.cleantotal .k{font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);
  font-weight:var(--md-sys-typescale-title-medium-weight)}
.cleantotal .v{font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);font-weight:500}
.cleanlist .empty{padding:14px 0}   /* только окно «Итого»: «.modal .empty» перебивал «.empty.small» каскада плёнки */

/* ---------- «Какое помещение?»: названия прижаты к низу экрана (D124) — tonal S высотой 48 (цель касания) в два столбца,
   «Своё название» outlined во всю ширину под ними ---------- */
.page.pickbottom{display:flex;flex-direction:column}
.page.pickbottom>.pickgrid{margin-top:auto}
.pickgrid .btn.pickname{height:48px;width:100%}
.pickgrid .btn.wide{display:flex;width:100%;margin-top:var(--md-sys-measurement-space100)}

/* «Расчёт помещения»: «Следующее помещение» tonal · «Весь адрес» outlined — кнопки S рядом (D104, D115), прижаты вправо */
.twocol.roomestnav{display:flex;justify-content:flex-end;gap:var(--md-sys-measurement-space100);margin-top:var(--md-sys-measurement-space200)}

/* ---------- наведение мышью (/design-critic Н1): слой состояния 8 % цветом текста поверх контейнера
   (/foundations/interaction/states/state-layers: «Hover +8% opacity», --md-sys-state-hover). Только там, где есть мышь
   (@media hover), чтобы на телефоне подсветка не залипала; нажатие (:active, 10 %) главнее ---------- */
@media (hover:hover){
  button.row:hover:not(:active),.row>button.grow:hover:not(:active),.estheadbtn:hover:not(:active),.field:hover:not(:active){
    background-color:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,var(--md-sys-color-surface))}
  .list>button.row[aria-current="true"]:hover:not(:active){
    background-color:color-mix(in srgb,var(--md-sys-color-on-secondary-container) 8%,var(--md-sys-color-secondary-container))}
  .estcat.open:hover:not(:active){
    background-color:color-mix(in srgb,var(--md-sys-color-on-primary-container) 8%,var(--md-sys-color-primary-container))}
  button.row.blocked:hover:not(:active){
    background-color:color-mix(in srgb,var(--md-sys-color-on-error-container) 8%,var(--md-sys-color-error-container))}
  .btn.filled:hover:not(:active):not([disabled]),.mbtn.go:hover:not(:active){
    background-color:color-mix(in srgb,var(--md-sys-color-on-primary) 8%,var(--md-sys-color-primary))}
  .btn.tonal:hover:not(:active):not([disabled]),.planbtns .iconbtn:hover:not(:active),.estico:hover:not(:active):not([disabled]),
  .estcheck.on:hover:not(:active),.chips .chip.on:hover:not(:active){
    background-color:color-mix(in srgb,var(--md-sys-color-on-secondary-container) 8%,var(--md-sys-color-secondary-container))}
  .estico.on:hover:not(:active){
    background-color:color-mix(in srgb,var(--md-sys-color-on-primary-container) 8%,var(--md-sys-color-primary-container))}
  .fab:hover:not(:active){
    background-color:color-mix(in srgb,var(--md-sys-color-on-primary-container) 8%,var(--md-sys-color-primary-container))}
  .btn.outlined:hover:not(:active):not([disabled]),.btn.text:hover:not(:active):not([disabled]),.mbtn:not(.go):hover:not(:active),
  .estnum:hover:not(:active),.estcheck:not(.on):hover:not(:active),.chips .chip:not(.on):hover:not(:active){
    background-color:color-mix(in srgb,currentColor 8%,transparent)}
  .bar .iconbtn:hover:not(:active):not([disabled]),.plrow .iconbtn:hover:not(:active):not([disabled]){
    background-color:color-mix(in srgb,var(--md-sys-color-on-surface-variant) 8%,transparent)}
  .menu button:hover:not(:active){background-color:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent)}
  .key:hover:not(:active){
    background-color:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,var(--md-sys-color-surface-container-highest))}
}

/* ---------- общая база не ответила (D306, D313): кружок ожидания; после заходов — сообщение и «Перезагрузить».
   Кружок — «circular progress indicator» (/components/progress-indicators/specs: «Size 40dp», «Active indicator width 4dp»),
   поворот 1,2 с (там же, «Duration 1,200ms»); сообщение — body-large on-surface-variant, не длиннее 75 знаков в строке
   (design.md § 6 п.7); промежуток 24 (space300) ---------- */
.loadwait{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--md-sys-measurement-space300);text-align:center}
.loadwait .loadmsg{margin:0;max-width:75ch;color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height)}
.loadwait .spin{width:40px;height:40px;border-radius:50%;
  border:4px solid var(--md-sys-color-surface-container-highest);border-top-color:var(--md-sys-color-primary);
  animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.loadwait .spin{animation:none}}

/* ============================================================
   «+» КАЛЕНДАРЯ, «НОВЫЙ ЗАМЕР», ОКНА ДАТЫ И ВРЕМЕНИ — план календаря SP-2 (картинка шага 0 21.09, D325, D326; js/visits.js,
   js/pickers.js). Страницы сняты 21.09 браузером MCP.
   ============================================================ */

/* «Новый замер» — окно на весь экран (/components/dialogs/specs, full-screen: шапка 56, крестик 24, отступы 24, между элементами 8,
   контейнер surface container high — здесь экран приложения, а не окно поверх; на мониторе — правая панель, не шире 840, D192).
   «Готово» — text button в шапке (анатомия full-screen dialog: «Text button»). Обёртка без своей коробки (display:contents): шапка и
   страница остаются прямыми детьми #app / панели */
.nv{display:contents}
.bar.nvbar{height:56px;background:var(--md-sys-color-surface-container-high)}
.bar.nvbar h1{padding-left:var(--md-sys-measurement-space50)}
.nvok{padding:0 var(--md-sys-measurement-space150);flex:0 0 auto}
.nvok[disabled]{background:none;color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent)}
.nvform{display:flex;flex-direction:column;gap:var(--md-sys-measurement-space200);padding-top:var(--md-sys-measurement-space150);max-width:560px}
.nvform .tf{margin-top:0}
.tworow{display:grid;grid-template-columns:1fr 1fr;gap:var(--md-sys-measurement-space200)}
/* кнопка-поле (дата, «С», «По»): вид outlined text field 56 с подписью на рамке и значком справа 24 (/components/text-fields/specs) */
.tfbtn{display:flex;align-items:center;gap:var(--md-sys-measurement-space100);width:100%;height:56px;text-align:left;
  padding:0 var(--md-sys-measurement-space150) 0 var(--md-sys-measurement-space200);border-radius:var(--md-sys-shape-corner-extra-small);
  border:1px solid var(--md-sys-color-outline);background:transparent;color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-variant-numeric:tabular-nums}
.tfbtn .v{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfbtn svg{width:24px;height:24px;flex:0 0 auto;fill:var(--md-sys-color-on-surface-variant)}
.tfbtn:active{background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,transparent)}
.nvwho{display:flex;flex-direction:column;gap:var(--md-sys-measurement-space100)}
.nvlabel{padding-left:var(--md-sys-measurement-space200);color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height)}
/* «Кто едет» — connected button group S (/components/button-groups/specs, 21.09: «For all connected button groups, use 2dp padding»;
   round: наружные углы полные, внутренние 8; цель касания 48 — невидимым слоем); tonal toggle button (/components/buttons/specs):
   не выбрано — secondary container / on secondary container, выбрано — secondary / on secondary */
.cbg{display:flex;gap:var(--md-sys-measurement-space25);align-self:flex-start;padding:var(--md-sys-measurement-space50) 0}
.cb{position:relative;height:40px;min-width:96px;padding:0 var(--md-sys-measurement-space200);display:inline-flex;align-items:center;justify-content:center;
  gap:var(--md-sys-measurement-space100);border-radius:var(--md-sys-shape-corner-small);
  background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);
  font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight)}
.cb:first-child{border-top-left-radius:20px;border-bottom-left-radius:20px}
.cb:last-child{border-top-right-radius:20px;border-bottom-right-radius:20px}
.cb[aria-pressed="true"]{background:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary);border-radius:20px}
.cb svg{width:18px;height:18px;fill:currentColor}
.cb::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.cb:active{filter:brightness(.92)}
/* полоска без «Отменить» — отступ 16 с обеих сторон (/components/snackbar/specs) */
.snack.noact{padding-right:var(--md-sys-measurement-space200)}

/* окно даты — modal date picker (/components/date-pickers/specs, токены Modal, 21.09): контейнер 360, скругление 28, surface container high;
   шапка 120: подпись 14/20/500 и заголовок 32/40/400 on-surface-variant; строка месяца — 14/20/500 с кнопками-значками;
   дни недели и числа 16/24/400, клетка 40, сегодня — обводка 1 primary, выбранное — заливка primary / on primary */
:is(.modal,.modal-gone).dp{max-width:360px;padding:0;overflow:hidden}
.dphd{height:120px;padding:var(--md-sys-measurement-space200) var(--md-sys-measurement-space300) var(--md-sys-measurement-space150);
  display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--md-sys-color-outline-variant)}
.dpsup{color:var(--md-sys-color-on-surface-variant);font-size:var(--md-sys-typescale-label-large-size);
  line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight)}
.dpbig{font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);
  font-weight:var(--md-sys-typescale-headline-large-weight);color:var(--md-sys-color-on-surface)}
.dpnav{display:flex;align-items:center;padding:var(--md-sys-measurement-space50) var(--md-sys-measurement-space150)}
.dpmon{flex:1;padding-left:var(--md-sys-measurement-space50);color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight)}
.dpgrid{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--md-sys-measurement-space150) var(--md-sys-measurement-space100);justify-items:center}
.dpw{height:36px;display:grid;place-items:center;color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height)}
.dpd{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-variant-numeric:tabular-nums}
.dpd.today{box-shadow:inset 0 0 0 1px var(--md-sys-color-primary);color:var(--md-sys-color-primary)}
.dpd.sel{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:none}
.dpd:active{background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,transparent)}
.dp .mbtns{padding:var(--md-sys-measurement-space100) var(--md-sys-measurement-space150) var(--md-sys-measurement-space150)}

/* окно времени — time picker dial, 24 ч по вертикали (/components/time-pickers/specs, 21.09): отступы 24, заголовок 12/16/500
   on-surface-variant; поля часов и минут 96 × 80 (24h — 114), цифры 57/64/400, выбранное — primary container / on primary container,
   невыбранное — surface container highest; циферблат 256 surface container highest, цифры 16/24/400, ручка 48 primary, центр 8, стрелка 2 */
:is(.modal,.modal-gone).tp{max-width:328px;padding:var(--md-sys-measurement-space300) var(--md-sys-measurement-space300) var(--md-sys-measurement-space150)}
.tphl{color:var(--md-sys-color-on-surface-variant);margin-bottom:20px;
  font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);
  font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}
.tpsel{display:flex;align-items:center;justify-content:center;margin-bottom:var(--md-sys-measurement-space300)}
.tpf{width:96px;height:80px;border-radius:var(--md-sys-shape-corner-small);display:grid;place-items:center;
  background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface);font-variant-numeric:tabular-nums;
  font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);
  font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking)}
.tpf[aria-pressed="true"]{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.tpsep{width:24px;text-align:center;font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height)}
.tpdial{position:relative;width:256px;height:256px;border-radius:50%;background:var(--md-sys-color-surface-container-highest);margin:0 auto var(--md-sys-measurement-space150)}
.tpn{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;display:grid;place-items:center;
  color:var(--md-sys-color-on-surface);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-variant-numeric:tabular-nums}
.tpn.in{color:var(--md-sys-color-on-surface-variant);font-size:var(--md-sys-typescale-body-medium-size)}
.tpn.sel{color:var(--md-sys-color-on-primary);z-index:2}
.tphand{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--md-sys-color-primary);z-index:1}
.tptrk{position:absolute;left:50%;top:50%;width:2px;margin-left:-1px;background:var(--md-sys-color-primary);transform-origin:top center;z-index:1}
.tpc{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--md-sys-color-primary);z-index:1}
.tphand.dot::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--md-sys-color-on-primary)}   /* минута между подписями */
.tpin{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:var(--md-sys-measurement-space300)}
:is(.modal,.modal-gone) .tpin input{width:96px;height:72px;margin:0;text-align:center;font-variant-numeric:tabular-nums;
  font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height)}
.tpfoot{display:flex;align-items:center;gap:var(--md-sys-measurement-space100);margin:0 calc(-1 * var(--md-sys-measurement-space150))}
.tpfoot .sp{flex:1}
@media (hover:hover){
  .tfbtn:hover:not(:active){background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent)}
  .cb:hover:not(:active){filter:brightness(.96)}
  .dpd:hover:not(:active):not(.sel){background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent)}
  .tpn:hover:not(.sel){background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent)}
}

/* ---------- экран адреса (план календаря SP-3; картинка версии 3, D328, D247, D248, D263) ----------
   Поле «Статус» — outlined text field 56 с подписью на рамке (/components/text-fields/specs, 21.09): слева кружок 24 цвета плашки
   календаря (D309; у «Думает» и «Отказался» — кольцо, D264), отступ у значков 12, между значком и текстом 16, справа стрелка 24; тап —
   список у поля (/components/menus/guidelines: «Text field dropdown menus», «Select menus», «A menu can open from a text field»),
   выбранный — tertiary container / on tertiary container (/components/menus/specs, «Menus - Color - Standard»), значок пункта 20.
   Выключенное поле у записи «Разное» — обводка 12 %, надпись 38 % (/components/text-fields/specs, disabled). */
.stf{margin-top:var(--md-sys-measurement-space100);padding-left:var(--md-sys-measurement-space150);gap:var(--md-sys-measurement-space200)}
.sdot{display:grid;place-items:center;flex:0 0 auto}
.stf .sdot svg{width:24px;height:24px;fill:currentColor}
.stf[disabled]{cursor:default;border-color:color-mix(in srgb,var(--md-sys-color-on-surface) 12%,transparent);color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent)}
.stf[disabled]:active{background:transparent}
.menu button.stitem .sdot svg{width:20px;height:20px;margin-left:0;color:inherit;fill:currentColor}
.menu button.stitem.on{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}
.panes .tf .fl{background:var(--md-sys-color-surface)}   /* подпись на рамке — фоном панели монитора (панели surface, D157) */
/* «Позвонить» · «Навигатор» — кнопки S tonal со значками, делят ряд, зазор 8 (D247; /components/buttons/guidelines «Button container width
   can be responsive»); одна — по ширине надписи, слева («Don't allow the button to stretch»); на мониторе обе по ширине надписи (D191) */
.siteacts{display:flex;gap:var(--md-sys-measurement-space100);margin-top:var(--md-sys-measurement-space200)}
.siteacts .btn{flex:1;text-decoration:none}
.siteacts.one .btn,.panes .siteacts .btn{flex:0 0 auto}
/* выезды — свой список над помещениями (D248), между списками 16; строка «Монтаж · 24–25 сент. · 09:00 · Валера» на телефоне не влезает в
   одну строчку — переносится (two-line list item, /components/lists/specs), а не режется с многоточием: бригада в конце строки важнее всего
   (SP-5, глазами 22.09) */
.list[data-site-visits]{margin:var(--md-sys-measurement-space200) 0}
.list[data-site-visits] .row .title{white-space:normal}
/* «Завёл Миша 19.09 в 14:20» — body small on-surface-variant по центру, как строки внизу «Объектов» (D263, § 17.2 п.8) */
.storage.made{padding-top:var(--md-sys-measurement-space200)}
/* «Кто едет» после «Монтажа» — выключенная кнопка: контейнер 12 %, надпись 38 % (/components/buttons/specs, disabled; D239) */
.cb[disabled]{background:color-mix(in srgb,var(--md-sys-color-on-surface) 12%,transparent);color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent);cursor:default}

/* ---------- «Объекты»: ряд статусов и ярлык (план календаря SP-3; D254, D298, D328, D330) ----------
   Ряд — filter chips (/components/chips/specs: 32, скругление 8, обводка outline variant, 14/20/500, отступы 16, у галочки 8, галочка 18;
   выбранный — secondary container), одной строкой, листается вбок («Chip sets can be scrolled horizontally», «Filter chips can be shown
   underneath a search field» — /components/chips/guidelines), от края до края экрана с полями 16 */
.chips.stat{flex:0 0 auto;gap:var(--md-sys-measurement-space100);
  margin:0 calc(-1 * var(--md-sys-measurement-space200)) var(--md-sys-measurement-space100);
  padding:0 var(--md-sys-measurement-space200) var(--md-sys-measurement-space100)}
.chips.stat .chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--md-sys-measurement-space100);white-space:nowrap}
.chips.stat .chip.on{padding-left:var(--md-sys-measurement-space100)}
.chips.stat .chip svg{width:18px;height:18px;flex:0 0 auto;fill:currentColor}
/* ярлык статуса в строке (D328): цвет плашки календаря, надпись по контрасту (D309); «Думает», «Отказался» — обводка без заливки;
   размер как у «пример» (.tag): label small 11/16/500, скругление 8 — Не из Material */
.row .metaline{display:flex;align-items:center;flex-wrap:wrap;min-width:0}   /* ярлык и числа в одной строке */
.stag{display:inline-block;margin-right:var(--md-sys-measurement-space100);vertical-align:1px;white-space:nowrap;
  padding:0 var(--md-sys-measurement-space100);border-radius:var(--md-sys-shape-corner-small);
  font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);
  font-weight:var(--md-sys-typescale-label-small-weight)}
.stag.hollow{border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant);line-height:14px;padding:0 7px}

/* ---------- «Бригады» и «Выходной» (план календаря SP-4; картинка шага 0 «Бригады и выходной», D332; страницы сняты 21.09) ----------
   «Бригады» — список, как «Прайс» (/components/lists/specs: строка от 56, между строками 2; «Place supplementary actions, like a bookmark
   or menu, in the trailing position» — /components/lists/guidelines): строка нажимается целиком, справа значок ⋮ 20, как стрелка строк. */
/* поле «Бригада» пустое — подпись внутри поля, 16/24 on-surface-variant (/components/text-fields/specs, label text в покое) */
.tfbtn .ph{flex:1;min-width:0;color:var(--md-sys-color-on-surface-variant)}
/* окно «Бригада» (D305) — basic dialog со списком (/components/dialogs/guidelines: «Basic dialogs most often appear as alerts or lists»);
   строки — как окно «Тема» (48, 14/20/500, у выбранной галочка primary); длинный список листается, заголовок и «Отмена» стоят
   («the dialog title is pinned at the top, with buttons pinned at the bottom», там же, «Scrolling») */
:is(.modal,.modal-gone).crewpick{display:flex;flex-direction:column;overflow:hidden}
.crewpick h2,.crewpick .mbtns{flex:0 0 auto}
.crewlist{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0 calc(-1 * var(--md-sys-measurement-space100))}
.crewpick .mbtns{margin-top:var(--md-sys-measurement-space200)}
/* «Выходной» — дни календарём на экране (D332): выбор промежутка модального date picker (/components/date-pickers/specs, «Date picker -
   Modal», range selection, 21.09): день 40, 16/24/400; сегодня — обводка 1 primary; первый и последний — заливка primary / on primary; между
   ними — полоса secondary container высотой 40, надпись on secondary container; промежуток — 22/28/400 (range selection header headline),
   над ним 14/20/500 (header supporting text). Сетка — 7 × 48, как у окна даты (контейнер 360, поля 12); не растягивается («Don't scale the
   date picker responsively to a larger size», /components/date-pickers/guidelines) */
.drbox{display:flex;flex-direction:column}
.drsup{color:var(--md-sys-color-on-surface-variant);font-size:var(--md-sys-typescale-label-large-size);
  line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight)}
.drbig{margin-top:var(--md-sys-measurement-space50);font-size:var(--md-sys-typescale-title-large-size);
  line-height:var(--md-sys-typescale-title-large-line-height);font-weight:var(--md-sys-typescale-title-large-weight)}
.drbox .dpnav{padding:var(--md-sys-measurement-space100) 0 0;max-width:336px}
.drbox .dpmon{padding-left:0}
.drgrid{display:grid;grid-template-columns:repeat(7,1fr);max-width:336px}
.drd{position:relative;height:40px;display:grid;place-items:center;padding:0;border:none;background:none;color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-variant-numeric:tabular-nums}
.drd>span{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.drd.t>span{box-shadow:inset 0 0 0 1px var(--md-sys-color-primary);color:var(--md-sys-color-primary)}
.drd.in,.drd.s,.drd.e{color:var(--md-sys-color-on-secondary-container)}
.drd.in::before,.drd.s::before,.drd.e::before{content:"";position:absolute;top:0;bottom:0;background:var(--md-sys-color-secondary-container)}
.drd.in::before{left:0;right:0}
.drd.s::before{left:50%;right:0}
.drd.e::before{left:0;right:50%}
.drd.s.e::before{display:none}
.drd.s>span,.drd.e>span{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:none}
.drd:active>span{background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,transparent)}
.drd.s:active>span,.drd.e:active>span{background:color-mix(in srgb,var(--md-sys-color-on-primary) 10%,var(--md-sys-color-primary))}
@media (hover:hover){
  .drd:hover:not(:active):not(.s):not(.e)>span{background:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,transparent)}
}

/* ---------- экран этапа и «По звонку» (план календаря SP-5; картинка шага 0 «Этапы монтажа и бронь», D333, D334; страницы сняты 21.09) ----------
   Экран этапа — на весь экран, как «Выходной»: те же .nv, .nvbar, .nvform, .drbox, сетка дней (D333). «Дни» и кнопка «По звонку» — в одной
   строке высотой с текстовую кнопку (40, /components/buttons/specs); пустой промежуток и пустое время «--:--» — on-surface-variant, как подпись
   поля в покое (/components/text-fields/specs). Поле «Бригада», чьи дни легли на выходной, — обводка error, как поле с ошибкой (там же, error). */
.drhead{display:flex;align-items:center;justify-content:space-between;min-height:40px}
.drhead .btn.text{padding:0 var(--md-sys-measurement-space150);margin-right:calc(-1 * var(--md-sys-measurement-space150))}
.drbig.dim,.tfbtn .v.dim{color:var(--md-sys-color-on-surface-variant)}
.tfbtn.bad{border-color:var(--md-sys-color-error);box-shadow:inset 0 0 0 1px var(--md-sys-color-error)}
.tfbtn.bad .fl,.tfbtn.bad .v{color:var(--md-sys-color-error)}
/* серая бригада в окне (D234): выключенная строка — надпись 38 % (/foundations/interaction/states, disabled), подпись «выходной» справа body medium */
.crewlist button.off{color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent);cursor:default}
.crewlist button.off:active{background:transparent}
.crewlist .cnote{margin-left:auto;font-weight:var(--md-sys-typescale-body-medium-weight);font-size:var(--md-sys-typescale-body-medium-size);
  line-height:var(--md-sys-typescale-body-medium-line-height)}
/* «+ Этап» — по ширине надписи, слева, как одинокий «Навигатор» (§ 17.2 п.3; «Don't allow the button to stretch», /components/buttons/guidelines);
   до списка помещений — 16, как между остальными группами «Объекта» (D365; /foundations/layout/grids-spacing/spacing «Rhythm») */
.btnrow.stageadd{justify-content:flex-start;margin-bottom:var(--md-sys-measurement-space200)}
.btnrow.stageadd .btn{flex:0 0 auto}
/* «По звонку: N» — one-line list item 56 под вкладками (/components/lists/specs: значок 24 слева в 16, стрелка 20 справа в 24),
   surface container low, черта снизу outline variant; не прокручивается вместе с лентой */
.row.callline{flex:0 0 auto;border-radius:0;min-height:56px;padding:0 var(--md-sys-measurement-space300) 0 var(--md-sys-measurement-space200);
  background:var(--md-sys-color-surface-container-low);border-bottom:1px solid var(--md-sys-color-outline-variant)}
.row.callline>svg{width:24px;height:24px;fill:var(--md-sys-color-on-surface-variant);flex:0 0 auto}
/* строка «По звонку» — как строка прайса: адрес и подпись слева нажимаются, трубка справа — своя кнопка (multi-action list) */
.plrow.calls .iconbtn{color:var(--md-sys-color-primary)}

/* ---------- «Разное» (план календаря SP-6; картинка шага 0 «Запись «Разное»», D335–D337; страницы сняты 22.09) ----------
   Форма — те же .nv, .nvbar, .nvform, .tf, .tfbtn, что у «Нового замера» и «Выходного». Окно «Кто едет» — то же .crewpick: люди и бригады
   разделены чертой (divider: 1, outline variant, поля 8 — /components/divider/specs; «Use a divider for: Scrollable menus … On web, use a
   divider to separate menu items» — /components/menus/guidelines). «Сделано» — строка списка с галочкой справа (trailing checkbox,
   /components/lists/guidelines), квадрат — тот же .ckbox 18, скругление 2, обводка 2 (/components/checkbox/specs). Сделанная плашка — тот же
   Графит, галочка 18 перед текстом (D335, D269). */
.crewdiv{flex:0 0 auto;height:1px;margin:var(--md-sys-measurement-space100) 0;background:var(--md-sys-color-outline-variant)}
.row.ckrow .ckbox svg{width:18px;height:18px;fill:currentColor}
.cev.done .l1 svg{width:18px;height:18px;fill:currentColor;vertical-align:-4px;margin-right:var(--md-sys-measurement-space50)}

/* ---------- «Деньги» на объекте (план 3 «Деньги по этапам» SP-1; картинка шага 0 — мерило § 35.2; правки /design-critic 04.10) ----------
   Карточка — те же .crewblock/.crewtitle/.crewcard/.crewkv, что у «Денег» бланка; строки — 56, как строки списков
   (/components/lists/specs «One line = 56dp»; цель касания 48); шевронов нет — число у правого края, в одну линию со
   «Суммой договора» (решение владельца 04.10 «убери шевроны»); блок отстоит от списка помещений на space200, как секции
   экрана; «Сумма договора» — primary, как на «Расчёте» (D284); подпись «Откат строителю · …» / «Безнал: …» — body-medium
   on-surface-variant */
[data-money-block]{margin-top:var(--md-sys-measurement-space200)}
[data-money-block] .crewkv{min-height:56px;align-items:center}
button.moneyrow{padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.moneyrow .v{margin-left:auto}
[data-money-block] [data-money-contract] .v{color:var(--md-sys-color-primary)}
.moneynote{font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);
  color:var(--md-sys-color-on-surface-variant)}
@media (hover:hover){                                                   /* наведение — слой 8 % (/foundations/interaction/states) */
  [data-money-block] .moneyrow:hover:not(:active){background-color:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,var(--md-sys-color-surface))}
  .panes [data-money-block] .moneyrow:hover:not(:active){background-color:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,var(--md-sys-color-surface-container-low))}}

/* ---------- деньги этапа (план 3 «Деньги по этапам» SP-2; картинка шага 0 — мерило § 36.2; ответы владельца 04.10 § 36.4) ----------
   Строка этапа в «Деньгах» адреса — одна строка без переносов (решение владельца 04.10): имя слева, «в офис N» справа,
   галочка «Сдано» у края (квадрат 18 — как «Сделано», D335; тап — сразу, D266); подписи (кто сдал, разница, причина) —
   мелкими строками под этапом. «В офис» оранжевый, пока не «Сдано» (№ 4): custom_due — Мандарин без гармонизации (AR-11).
   На экране этапа: число приложения — серым, это placeholder поля (/components/text-fields/specs — supporting text серым);
   вписанное руками — чёрным; подпись под полем одна — «осталось N» частичной выдачи (№ 6: объяснялок нет). */
.moneystage{display:flex;align-items:center;flex-wrap:wrap;min-height:56px}
.moneystagerow{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;
  padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.moneystage .moneynote{flex-basis:100%;padding:0 0 8px}
[data-money-extra]{margin:0}
/* «Заказчик сам» (план 3 SP-4б, § 39.4): одна ячейка-кнопка двумя строками — «Заказчик сам: Вставка — 1,00 м.п.»,
   строкой ниже в ней же «из зарплаты бригады» слева и сумма справа у края (минус не красный — у бригады вычлось). */
button.moneyself{display:block;width:100%;padding:2px 0 10px;border:0;background:none;font:inherit;color:inherit;
  text-align:left;cursor:pointer}
.moneyself:disabled{opacity:.38;cursor:default}
.moneyself .selfnote{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:2px}
.ckbtn{display:flex;align-items:center;gap:8px;padding:0 0 0 12px;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.cklbl{font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);
  font-weight:var(--md-sys-typescale-label-large-weight);color:var(--md-sys-color-on-surface-variant)}
.ckbtn[aria-checked="true"] .ckbox{border:0;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.ckbtn:disabled{opacity:.38}
.due{color:var(--md-custom-due-color)}                                  /* «Сдать в офис» — оранжевый, пока не «Сдано» (№ 4) */
/* экран этапа */
.tf .fin::placeholder{color:var(--md-sys-color-on-surface-variant)}     /* серое число приложения (№ 3) */
.fin.red{color:var(--md-sys-color-error)}                               /* минус расчёта «Бригаде» (D250) */
.msec{display:flex;flex-direction:column;gap:var(--md-sys-measurement-space200)}
.nvh{color:var(--md-sys-color-on-surface-variant);font-size:var(--md-sys-typescale-title-small-size);
  line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--md-sys-typescale-title-small-weight)}
.payrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;
  padding:0 var(--md-sys-measurement-space200)}
.payrow .k{font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height)}
.payrow .v{font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:500}
.resthint{font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);
  color:var(--md-sys-color-on-surface-variant);margin-top:-8px;padding:0 var(--md-sys-measurement-space200)}
@media (hover:hover){
  .moneystagerow:hover:not(:active){background-color:color-mix(in srgb,var(--md-sys-color-on-surface) 8%,var(--md-sys-color-surface))}}

/* ---------- деньги записи «Разное» (план 3 «Деньги по этапам» SP-5; картинка шага 0 — мерило § 41.2; ответ № 9 от 06.10) ----------
   Вторая строка карточки выезда на экране записи: «В офис N» и галочка «Сдано» — та же строка, что у этапов
   в «Деньгах» (SP-2), но в списке выездов: фон строки, отступы как у строки выезда, снизу углы 16 —
   продолжение карточки; «В офис» оранжевый, пока «Сдано» нет и везти что-то есть (0 ₽ не горит). */
.list>.miscmoney{margin-top:var(--md-sys-measurement-space25);padding:0 var(--md-sys-measurement-space300) 0 var(--md-sys-measurement-space200);
  background:var(--md-sys-color-surface);border-radius:var(--md-sys-shape-corner-extra-small)}
.panes .list>.miscmoney{background:var(--md-sys-color-surface-container-low)}
.list>.miscmoney:last-child{border-bottom-left-radius:var(--md-sys-shape-corner-large);border-bottom-right-radius:var(--md-sys-shape-corner-large)}
.list>.row:has(+.miscmoney){border-bottom-left-radius:var(--md-sys-shape-corner-extra-small);border-bottom-right-radius:var(--md-sys-shape-corner-extra-small)}
.list>.miscmoney .moneynote{padding:0 0 8px}

/* ---------- «Бланк монтажа» (план 2 «Выдача на монтаж», SP-1; картинка шага 0 — мерило plans/20260919-calendar-findings.md § 28) ----------
   Плашка (D361): заказчик и дни монтажа сверху, «Деньги» внизу — одна плашка на блок, как строка списка: фон surface (монитор — surface
   container low, D196), углы 16, слева 16, справа 24 (/components/lists/specs, 24.09), сверху и снизу 12, между строками 4 (/styles/spacing/tokens);
   текст body-large 16/24, сумма — title-medium 16/24/500 табличными, как в строках «название — число» */
.crewcard{display:flex;flex-direction:column;gap:var(--md-sys-measurement-space50);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);
  border-radius:var(--md-sys-shape-corner-large);
  padding:var(--md-sys-measurement-space150) var(--md-sys-measurement-space300) var(--md-sys-measurement-space150) var(--md-sys-measurement-space200)}
.panes .crewcard{background:var(--md-sys-color-surface-container-low)}
.crewcard.crewhead{margin-bottom:var(--md-sys-measurement-space200)}
.crewln,.crewkv .k{font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height)}
.crewkv{display:flex;justify-content:space-between;align-items:baseline;gap:var(--md-sys-measurement-space150)}
.crewkv .v{flex:0 0 auto;font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);
  font-weight:var(--md-sys-typescale-title-medium-weight)}
/* «Деньги» бланка — выезды подблоками (план 3 SP-3, D360, № 6-1): заголовок этапа — title-small 500 без заглавных, как crewtitle,
   но внутри плашки; числа подблока — в одной правой линии с договором (space-between у .crewkv) */
.crewmrow{display:flex;flex-direction:column;gap:var(--md-sys-measurement-space50);margin-top:var(--md-sys-measurement-space150)}
.crewname{color:var(--md-sys-color-on-surface-variant);font-size:var(--md-sys-typescale-title-small-size);
  line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--md-sys-typescale-title-small-weight)}
/* «Подробнее» (D358) — строка, как свёрнутая категория «Расчёта» (.estcat, D183, D193) */
.list.crewmore{margin-bottom:var(--md-sys-measurement-space200)}
/* «Выдать» (D275, D357): строка-галочка; одна строка — 56, две — 72, три — 88 (/components/lists/specs «One line … 56dp», «Two lines … 72dp»,
   «Three lines … 88dp»); галочка на уровне первой строки — отступы сверху и снизу 16 / 14 / 12, квадрат ниже на 3 (при отметке не прыгает —
   замечание владельца 24.09, мерило § 28.7 № 6; сайт от 88 ставит по верху, до 88 — по середине). Отмеченная — залита целиком: secondary
   container, углы 16 (/components/lists/guidelines «The selected state applies to the entire list item»; /components/lists/specs «Selected
   corner radius: 16dp») */
.row.issuerow{align-items:flex-start}
.row.issuerow.l1{padding-top:var(--md-sys-measurement-space200);padding-bottom:var(--md-sys-measurement-space200)}
.row.issuerow.l2{min-height:72px;padding-top:14px;padding-bottom:14px}
.row.issuerow.l3{min-height:88px;padding-top:var(--md-sys-measurement-space150);padding-bottom:var(--md-sys-measurement-space150)}
.row.issuerow .ckbox{margin-top:3px}
.issuerow .title,.issuerow .meta{display:block}
.issuerow .title{white-space:normal}
.list>.row.issuerow[aria-checked="true"]{border-radius:var(--md-sys-shape-corner-large);
  background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.list>.row.issuerow[aria-checked="true"] .meta{color:var(--md-sys-color-on-secondary-container)}
/* строка без галочки (D366): не кнопка — слоя «нажата» нет (design.md § 6 п.5: оба слоя — у нажимаемых); вид — строка списка 56, справа пусто */
.list>.row.issuerow.plain:active{background:var(--md-sys-color-surface)}
.panes .list>.row.issuerow.plain:active{background:var(--md-sys-color-surface-container-low)}

/* ---------- «Не хватает» (план 2 SP-3; картинка шага 0 — мерило § 30, D368–D372; страницы сняты 26.09) ----------
   Группа на позицию — segmented list (/components/lists/guidelines «Use segmented gaps and filled list items to define a list group»):
   строки через 2, углы 16 снаружи и 4 внутри — общие правила .list выше; между группами 16 (space200, как блоки бланка). Первая строка —
   позиция, title-medium 16/24/500, как сумма в «Деньгах» бланка; не нажимается — слоя «нажата» нет (design.md § 6 п.5). Адреса — строки
   56 (/components/lists/specs «One line list item container height 56dp»), текст «мелко» — supporting text 14/20 on surface variant
   («List list item supporting text size 14pt, line height 20pt»), переносится, а не режется; стрелка 20 справа («trailing icon expressive
   size 20dp») — как у «По звонку: N» */
.lackgrp{margin-bottom:var(--md-sys-measurement-space200)}
.row.lackhead .title{white-space:normal;font-size:var(--md-sys-typescale-title-medium-size);
  line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight)}
.list>.row.lackhead:active{background:var(--md-sys-color-surface)}
.panes .list>.row.lackhead:active{background:var(--md-sys-color-surface-container-low)}
.lackln{display:block;color:var(--md-sys-color-on-surface-variant);
  font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height)}
/* Roboto — тот же шрифт Material, теперь с нашего сервера и без внешних запросов.
   Google Fonts: https://github.com/google/fonts/tree/main/ofl/roboto (OFL-1.1).
   Копия variable font: веса 100–900, обычная ширина; кириллица внутри файла. */
@font-face {
  font-family:Roboto;
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/Roboto.ttf') format('truetype');
}