/* @boog-ui-start */
/* Slider UI Kit — primitives (CSS classes over tokens).
   Source of truth for states: frontend/design/kit.html
   Plan: docs/superpowers/plans/2026-07-03-slider-design-system.md */

/* ══ Buttons ══════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);
  font:600 var(--text-md)/1 var(--font-body);padding:var(--space-3) var(--space-4);
  border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;
  transition:background var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard);}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.btn:disabled,.btn.is-loading{opacity:.5;pointer-events:none;}
.btn--primary{background:var(--color-accent);color:var(--color-on-accent);}
.btn--primary:hover{background:var(--color-accent-hover);}
.btn--primary:active{background:var(--color-accent-active);}
.btn--secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border);}
.btn--secondary:hover{background:var(--color-surface-2);}
.btn--ghost{background:transparent;color:var(--color-text);}
.btn--ghost:hover{background:var(--state-hover);}
.btn--danger{background:var(--color-danger);color:var(--color-on-accent);}
.btn--danger:hover{filter:brightness(.95);}
.btn--sm{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);}
.btn--block{width:100%;justify-content:center;}

/* ══ Icon button (toolbar) ════════════════════════ */
.icon-btn{display:inline-grid;place-items:center;width:var(--space-8);height:var(--space-8);
  border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--color-muted);
  cursor:pointer;transition:background var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard);}
.icon-btn:hover{background:var(--state-hover);color:var(--color-text);}
.icon-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.icon-btn[aria-pressed="true"]{background:var(--color-accent-weak);color:var(--color-accent);}
.icon-btn:disabled{opacity:.4;pointer-events:none;}
.icon-btn--sm{width:var(--space-6);height:var(--space-6);}
.icon-btn svg{width:var(--size-icon);height:var(--size-icon);}

/* ══ Forms ════════════════════════════════════════ */
.field{display:flex;flex-direction:column;gap:var(--space-1);}
.field__label{font:600 var(--text-sm)/1 var(--font-body);color:var(--color-text);}
.field__control{font:var(--text-md)/1.4 var(--font-body);color:var(--color-text);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);
  /* self-sufficient against the legacy monolith `input{}` reset (fixed min-width +
     inset shadow) that loads after this file on the editor page */
  width:100%;min-width:0;box-shadow:none;
  transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard);}
.field__control:hover{border-color:var(--slate-300);}
.field__control:focus{outline:none;border-color:var(--color-accent);box-shadow:var(--focus-ring);}
.field__control[aria-invalid="true"]{border-color:var(--color-danger);}
.field__control:disabled{background:var(--color-surface-2);color:var(--color-muted);cursor:not-allowed;}
.field__msg{font:var(--text-xs)/1.3 var(--font-body);color:var(--color-muted);}
.field__msg.is-error{color:var(--color-danger);}
select.field__control{appearance:none;padding-right:var(--space-8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--space-3) center;}

/* ══ Surfaces ═════════════════════════════════════ */
.panel{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--elev-2);overflow:hidden;}
.panel__header{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);
  font:700 var(--text-md)/1 var(--font-display);}
.panel__body{padding:var(--space-4);}

/* ══ Feedback: chip / badge ═══════════════════════ */
.chip{display:inline-flex;align-items:center;gap:var(--space-1);
  font:600 var(--text-xs)/1 var(--font-body);padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-pill);background:var(--color-surface-2);color:var(--color-muted);}
.chip--accent{background:var(--color-accent-weak);color:var(--color-accent);}
.chip--success{background:var(--color-success-weak);color:var(--color-success);}
.chip--warning{background:var(--color-warning-weak);color:var(--color-warning);}
.chip--danger{background:var(--color-danger-weak);color:var(--color-danger);}
.chip--purple{background:var(--color-purple-weak);color:var(--color-purple);}

/* ══ Feedback: tooltip ════════════════════════════ */
.tooltip-bubble{position:fixed;z-index:9999;background:var(--slate-800);color:var(--color-on-inverse);
  font:var(--text-xs)/1.3 var(--font-body);padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);box-shadow:var(--elev-2);pointer-events:none;opacity:0;
  transition:opacity var(--motion-fast) var(--ease-standard);}
.tooltip-bubble.is-visible{opacity:1;}

/* ══ Toggle (switch) ══════════════════════════════ */
.switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.switch__track{width:var(--space-8);height:var(--space-5);border-radius:var(--radius-pill);
  background:var(--slate-300);position:relative;transition:background var(--motion-base) var(--ease-standard);}
.switch__thumb{position:absolute;top:var(--space-05);left:var(--space-05);
  width:var(--size-thumb);height:var(--size-thumb);border-radius:var(--radius-pill);
  background:var(--color-surface);box-shadow:var(--elev-1);transition:transform var(--motion-base) var(--ease-standard);}
.switch input:checked + .switch__track{background:var(--color-accent);}
.switch input:checked + .switch__track .switch__thumb{transform:translateX(var(--space-3));}
.switch input:focus-visible + .switch__track{box-shadow:var(--focus-ring);}
.switch input:disabled + .switch__track{opacity:.5;}

/* ══ Popover / dropdown shell ═════════════════════ */
.popover{position:absolute;z-index:1000;min-width:var(--space-16);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);box-shadow:var(--elev-3);padding:var(--space-2);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard);}
.popover.is-open{opacity:1;transform:none;pointer-events:auto;}
.popover__item{display:flex;align-items:center;gap:var(--space-2);width:100%;
  padding:var(--space-2) var(--space-3);border:none;background:transparent;border-radius:var(--radius-sm);
  font:var(--text-md)/1 var(--font-body);color:var(--color-text);cursor:pointer;text-align:left;}
.popover__item:hover{background:var(--state-hover);}

/* ══ Slider (range) ═══════════════════════════════ */
.slider{display:flex;align-items:center;gap:var(--space-3);min-width:0;}
.slider input[type=range]{-webkit-appearance:none;appearance:none;height:var(--space-1);flex:1;min-width:0;width:0;
  border-radius:var(--radius-pill);cursor:pointer;outline:none;--_fill:0%;
  background:linear-gradient(var(--color-accent),var(--color-accent)) 0/var(--_fill) 100% no-repeat,var(--slate-200);}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:var(--size-thumb);height:var(--size-thumb);border-radius:var(--radius-pill);
  background:var(--color-surface);border:var(--border-thick) solid var(--color-accent);
  box-shadow:var(--elev-1);transition:transform var(--motion-fast) var(--ease-standard);}
.slider input[type=range]::-moz-range-thumb{width:var(--size-thumb);height:var(--size-thumb);
  border-radius:var(--radius-pill);background:var(--color-surface);
  border:var(--border-thick) solid var(--color-accent);box-shadow:var(--elev-1);}
.slider input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12);}
.slider input[type=range]:focus-visible{box-shadow:var(--focus-ring);}
.slider input[type=range]:disabled{opacity:.5;cursor:not-allowed;}
.slider__value{min-width:var(--space-8);text-align:right;
  font:600 var(--text-sm)/1 var(--font-mono);color:var(--color-muted);}

/* ══ Divider ══════════════════════════════════════ */
.divider{border:none;border-top:1px solid var(--color-border);margin:var(--space-3) 0;}
.divider--v{border:none;border-left:1px solid var(--color-border);align-self:stretch;width:0;margin:0 var(--space-2);}

/* ══ Toolbar (плавающая группа инструментов) ══════ */
.toolbar{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--elev-2);}
.toolbar__sep{width:0;align-self:stretch;border-left:1px solid var(--color-border);margin:var(--space-1);}

/* ══ Toolbar trigger anchor (позиционирует .popover относительно кнопки в тулбаре) ══ */
.toolbar-anchor{position:relative;display:inline-flex;}
/* Компактная кнопка-триггер с текстовым ярлыком (шрифт/размер/тип) внутри тулбара */
.toolbar-trigger{display:inline-flex;align-items:center;width:auto;gap:var(--space-1);padding:0 var(--space-3);
  height:var(--space-8);font:600 var(--text-sm)/1 var(--font-body);color:var(--color-text);white-space:nowrap;}
.toolbar-trigger .icon{--size-icon:14px;color:var(--color-muted);}
/* Мини-свотч цвета текста под буквой "A" (кнопка цвета текста в тулбаре) */
.text-color-trigger{position:relative;font:700 var(--text-md)/1 var(--font-body);color:var(--color-text);}
.text-color-trigger::after{content:"";position:absolute;left:24%;right:24%;bottom:5px;height:3px;border-radius:2px;background:var(--color-text);}

/* ══ Segmented control (режим слоя) ═══════════════ */
.segmented{display:inline-flex;background:var(--color-surface-2);border-radius:var(--radius-md);padding:var(--space-05);gap:var(--space-05);}
.segmented__item{border:none;background:transparent;border-radius:var(--radius-sm);cursor:pointer;
  padding:var(--space-1) var(--space-3);font:600 var(--text-sm)/1 var(--font-body);color:var(--color-muted);}
.segmented__item[aria-selected="true"]{background:var(--color-surface);color:var(--color-text);box-shadow:var(--elev-1);}
.segmented__item:focus-visible{outline:none;box-shadow:var(--focus-ring);}

/* ══ Tabs (вкладки панели) ════════════════════════ */
.tabs{display:flex;gap:var(--space-4);border-bottom:1px solid var(--color-border);}
.tab{border:none;background:transparent;cursor:pointer;padding:var(--space-3) 0;margin-bottom:-1px;
  font:600 var(--text-md)/1 var(--font-body);color:var(--color-muted);border-bottom:var(--border-thick) solid transparent;}
.tab[aria-selected="true"]{color:var(--color-accent);border-bottom-color:var(--color-accent);}
.tab:focus-visible{outline:none;box-shadow:var(--focus-ring);}

/* ══ Menu (содержимое дропдауна) ══════════════════ */
.menu{display:flex;flex-direction:column;gap:var(--space-05);min-width:calc(var(--space-16) * 3);}
.menu__item{display:flex;align-items:center;gap:var(--space-2);width:100%;border:none;background:transparent;
  border-radius:var(--radius-sm);cursor:pointer;padding:var(--space-2) var(--space-3);
  font:var(--text-md)/1 var(--font-body);color:var(--color-text);text-align:left;}
.menu__item:hover{background:var(--state-hover);}
.menu__item .icon{color:var(--color-muted);}
.menu__kbd{margin-left:auto;}
.menu__sep{border:none;border-top:1px solid var(--color-border);margin:var(--space-1) 0;}
.menu__section{padding:var(--space-1) var(--space-3);font:600 var(--text-xs)/1 var(--font-body);
  color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em;}

/* ══ Dialog ═══════════════════════════════════════ */
/* NOTE: named `.dialog*` (not `.modal*`) on purpose — the legacy editor monolith
   already owns `.modal` (a full-screen overlay wrapper) on slider/forge/profile.
   Using `.modal` here collided: the kit box-model (its max-width cap) leaked onto
   the legacy overlay and shoved every editor modal to the left. Kept separate. */
.dialog-overlay{position:fixed;inset:0;background:oklch(0.2 0.02 240 / .45);display:grid;place-items:center;z-index:5000;padding:var(--space-4);}
.dialog-overlay[hidden]{display:none;}
.dialog{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--elev-4);
  width:100%;max-width:calc(var(--space-16) * 8);overflow:hidden;display:flex;flex-direction:column;}
.dialog__header{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);font:700 var(--text-lg)/1 var(--font-display);}
.dialog__body{padding:var(--space-5);}
.dialog__footer{display:flex;justify-content:flex-end;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);}

/* ══ Avatar / presence ═══════════════════════════ */
.avatar{display:inline-grid;place-items:center;width:var(--space-8);height:var(--space-8);border-radius:var(--radius-pill);
  background:var(--color-accent-weak);color:var(--color-accent);font:600 var(--text-sm)/1 var(--font-body);
  position:relative;border:var(--border-thick) solid var(--color-surface);}
.avatar--sm{width:var(--space-6);height:var(--space-6);font-size:var(--text-xs);}
.avatar--lg{width:var(--space-10);height:var(--space-10);font-size:var(--text-md);}
.avatar__dot{position:absolute;right:0;bottom:0;width:var(--space-2);height:var(--space-2);
  border-radius:var(--radius-pill);background:var(--color-success);border:var(--border-thick) solid var(--color-surface);}
.avatar-stack{display:inline-flex;}
.avatar-stack .avatar + .avatar{margin-left:calc(var(--space-3) * -1);}

/* ══ Toast ════════════════════════════════════════ */
.toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);
  background:var(--color-surface);border:1px solid var(--color-border);border-left:var(--space-1) solid var(--color-accent);
  border-radius:var(--radius-md);box-shadow:var(--elev-3);min-width:calc(var(--space-16) * 4);}
.toast--success{border-left-color:var(--color-success);}
.toast--warning{border-left-color:var(--color-warning);}
.toast--danger{border-left-color:var(--color-danger);}
.toast__msg{flex:1;font:var(--text-md)/1.3 var(--font-body);color:var(--color-text);}

/* ══ Stepper (числовое поле) ══════════════════════ */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface);overflow:hidden;}
.stepper input{border:none;outline:none;width:var(--space-16);text-align:center;background:transparent;
  font:var(--text-md)/1 var(--font-mono);color:var(--color-text);padding:var(--space-2);}
.stepper button{border:none;background:transparent;cursor:pointer;color:var(--color-muted);padding:var(--space-2);display:grid;place-items:center;}
.stepper button:hover{background:var(--state-hover);color:var(--color-text);}

/* ══ Color swatch (триггер цвета) ═════════════════ */
.swatch-btn{width:var(--space-8);height:var(--space-8);border-radius:var(--radius-md);
  border:1px solid var(--color-border);cursor:pointer;padding:0;}
.swatch-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.swatch-btn--sm{width:var(--space-5);height:var(--space-5);border-radius:var(--radius-sm);}

/* ══ Checkbox / Radio ═════════════════════════════ */
.check{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;font:var(--text-md)/1 var(--font-body);}
.check input{width:var(--space-4);height:var(--space-4);accent-color:var(--color-accent);}

/* ══ Badge count ══════════════════════════════════ */
.badge-count{display:inline-grid;place-items:center;min-width:var(--space-4);height:var(--space-4);padding:0 var(--space-1);
  border-radius:var(--radius-pill);background:var(--color-danger);color:var(--color-on-accent);font:600 var(--text-xs)/1 var(--font-body);}

/* ══ Kbd (горячая клавиша) ════════════════════════ */
.kbd{display:inline-grid;place-items:center;min-width:var(--space-5);height:var(--space-5);padding:0 var(--space-1);
  border:1px solid var(--color-border);border-bottom-width:var(--border-thick);border-radius:var(--radius-sm);
  background:var(--color-surface-2);font:600 var(--text-xs)/1 var(--font-mono);color:var(--color-muted);}

/* ══ List row (участник / слайд / история) ════════ */
.list-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);}
.list-row:hover{background:var(--state-hover);}
.list-row__body{flex:1;min-width:0;}
.list-row__title{font:600 var(--text-md)/1.2 var(--font-body);color:var(--color-text);}
.list-row__meta{font:var(--text-sm)/1.2 var(--font-body);color:var(--color-muted);}

/* ══ Empty state ══════════════════════════════════ */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);
  padding:var(--space-10);color:var(--color-muted);}
.empty .icon{width:var(--space-10);height:var(--space-10);color:var(--color-border);}
.empty__title{font:700 var(--text-lg)/1.2 var(--font-display);color:var(--color-text);}

/* ══ Spinner / progress ═══════════════════════════ */
.spinner{width:var(--space-6);height:var(--space-6);border-radius:var(--radius-pill);
  border:var(--border-thick) solid var(--color-border);border-top-color:var(--color-accent);animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.progress{height:var(--space-2);background:var(--color-surface-2);border-radius:var(--radius-pill);overflow:hidden;}
.progress__bar{height:100%;background:var(--color-accent);border-radius:var(--radius-pill);}

/* ══ Loaders «живые» — несовпадающие периоды, чтобы не приедалось ══ */
/* A) Aurora — перетекающий сгусток (огонь/вода): морф + вращение + дыхание */
.loader-aurora{width:var(--space-12);height:var(--space-12);
  background:
    radial-gradient(closest-side, transparent 10%, oklch(1 0 0 / .78) 94%),
    conic-gradient(from 0turn,
    var(--pastel-rose, var(--color-danger)),
    var(--pastel-amber, var(--color-warning)),
    var(--pastel-yellow, var(--color-warning)),
    var(--pastel-green, var(--color-success)),
    var(--pastel-sky, var(--color-accent)),
    var(--pastel-purple, var(--color-purple)),
    var(--pastel-rose, var(--color-danger)));
  border-radius:var(--radius-pill);
  filter:saturate(1.18);
  -webkit-mask:radial-gradient(closest-side, black 32%, transparent 100%);
  mask:radial-gradient(closest-side, black 32%, transparent 100%);
  animation:aurora-spin 7s linear infinite, aurora-breathe 5s ease-in-out infinite;}
@keyframes aurora-morph{
  0%,100%{border-radius:47% 53% 60% 40% / 40% 47% 53% 60%;}
  33%{border-radius:63% 37% 44% 56% / 56% 63% 37% 44%;}
  66%{border-radius:38% 62% 57% 43% / 45% 39% 61% 55%;}}
@keyframes aurora-spin{to{transform:rotate(1turn);}}
@keyframes aurora-breathe{0%,100%{scale:1;}50%{scale:1.08;}}

/* B) Comet — мягкий хвост по кольцу */
.loader-comet{width:var(--space-12);height:var(--space-12);border-radius:var(--radius-pill);
  background:conic-gradient(from 0turn, transparent, var(--color-accent));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--space-2)), black 0);
  mask:radial-gradient(farthest-side, transparent calc(100% - var(--space-2)), black 0);
  animation:aurora-spin 1.2s linear infinite;}

/* D) Fusion — комета огибает Aurora, цвет головы/хвоста = тон колеса под ней (насыщенный) */
@property --comet-a{syntax:'<angle>';inherits:false;initial-value:0deg;}
.loader-fusion{position:relative;width:var(--space-16);height:var(--space-16);}
/* тело — Aurora (пастель), в центре */
.loader-fusion::before{content:'';position:absolute;inset:0;border-radius:var(--radius-pill);
  background:conic-gradient(from 0turn,
    var(--pastel-rose, var(--color-danger)), var(--pastel-amber, var(--color-warning)),
    var(--pastel-yellow, var(--color-warning)), var(--pastel-green, var(--color-success)),
    var(--pastel-sky, var(--color-accent)), var(--pastel-purple, var(--color-purple)),
    var(--pastel-rose, var(--color-danger)));
  filter:saturate(1.15);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--space-2) * 1.4), black 0);
  mask:radial-gradient(farthest-side, transparent calc(100% - var(--space-2) * 1.4), black 0);
  animation:aurora-breathe 5s ease-in-out infinite, aurora-spin 7s linear infinite;}
/* комета — то же ПАСТЕЛЬНОЕ колесо (те же углы), чуть насыщеннее ядра + вращающийся хвост-маска */
.loader-fusion::after{content:'';position:absolute;inset:0;border-radius:var(--radius-pill);
  background:conic-gradient(from 0turn,
    var(--pastel-rose, var(--color-danger)), var(--pastel-amber, var(--color-warning)),
    var(--pastel-yellow, var(--color-warning)), var(--pastel-green, var(--color-success)),
    var(--pastel-sky, var(--color-accent)), var(--pastel-purple, var(--color-purple)),
    var(--pastel-rose, var(--color-danger)));
  filter:saturate(1.35);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--space-2)), black 0),
    conic-gradient(from var(--comet-a), black, transparent 60%);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(farthest-side, transparent calc(100% - var(--space-2)), black 0),
    conic-gradient(from var(--comet-a), black, transparent 60%);
  mask-composite:intersect;
  animation:comet-orbit 2.4s linear infinite, aurora-spin 7s linear infinite;}
@keyframes comet-orbit{to{--comet-a:360deg;}}

/* C) Ripple — расходящиеся круги (капли по воде) */
.loader-ripple{position:relative;width:var(--space-12);height:var(--space-12);}
.loader-ripple span{position:absolute;inset:0;border:var(--border-thick) solid var(--color-accent);
  border-radius:var(--radius-pill);animation:ripple 1.8s cubic-bezier(0,.2,.8,1) infinite;}
.loader-ripple span:nth-child(2){animation-delay:.6s;}
.loader-ripple span:nth-child(3){animation-delay:1.2s;}
@keyframes ripple{from{transform:scale(.15);opacity:1;}to{transform:scale(1);opacity:0;}}

/* E) Логотип-лоадер BOOG — две кометы (синяя/красная) по часовой друг за другом;
   буквы B/G вспыхивают белым только под плотной головой (в маску входят головы, не хвосты) */
.loader-boog{position:relative;box-sizing:border-box;width:var(--space-12);height:var(--space-12);font-size:var(--space-12);
  border-radius:var(--radius-pill);background:var(--color-surface);overflow:hidden;box-shadow:var(--elev-1);
  font-family:var(--font-display);font-weight:900;}
.loader-boog__arm{position:absolute;inset:0;animation:lb-spin 1.2s linear infinite;}
.loader-boog__arm--red{animation-delay:-.6s;}
.loader-boog__head{position:absolute;top:50%;left:50%;width:.46em;height:.46em;margin:-.23em;
  border-radius:var(--radius-pill);transform:translateY(-.27em);}
.loader-boog__arm--blue .loader-boog__head{background:var(--brand-logo-blue);color:var(--brand-logo-blue);}
.loader-boog__arm--red .loader-boog__head{background:var(--brand-logo-red);color:var(--brand-logo-red);}
/* хвост-комета по кольцу — как в логотипе слайдера (conic-дуга + маска-кольцо), но непрерывный */
.loader-boog__arm::before{content:'';position:absolute;inset:0;border-radius:var(--radius-pill);
  -webkit-mask:radial-gradient(closest-side,transparent 42%,black 50%,black 62%,transparent 70%);
  mask:radial-gradient(closest-side,transparent 42%,black 50%,black 62%,transparent 70%);
  filter:blur(.03em);}
.loader-boog__arm--blue::before{background:conic-gradient(from 300deg,transparent,var(--brand-logo-blue) 52deg,transparent 62deg);}
.loader-boog__arm--red::before{background:conic-gradient(from 300deg,transparent,var(--brand-logo-red) 52deg,transparent 62deg);}
@keyframes lb-spin{to{transform:rotate(360deg);}}
.loader-boog__letters{position:absolute;inset:0;z-index:2;color:var(--color-on-accent);pointer-events:none;
  -webkit-mask:radial-gradient(circle,black 58%,transparent 62%),radial-gradient(circle,black 58%,transparent 62%);
  mask:radial-gradient(circle,black 58%,transparent 62%),radial-gradient(circle,black 58%,transparent 62%);
  -webkit-mask-size:.4em .4em;mask-size:.4em .4em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:lb-mask 1.2s linear infinite;}
.loader-boog__letters b{position:absolute;font-size:.32em;line-height:1;transform:translate(-50%,-50%);}
.loader-boog__letters .lb{left:31%;top:31%;}
.loader-boog__letters .lg{left:69%;top:69%;}
@keyframes lb-mask{
  0%{-webkit-mask-position:.3em .04em,.3em .58em;mask-position:.3em .04em,.3em .58em;}
  12.5%{-webkit-mask-position:.5em .12em,.12em .5em;mask-position:.5em .12em,.12em .5em;}
  25%{-webkit-mask-position:.58em .3em,.04em .3em;mask-position:.58em .3em,.04em .3em;}
  37.5%{-webkit-mask-position:.5em .5em,.12em .12em;mask-position:.5em .5em,.12em .12em;}
  50%{-webkit-mask-position:.3em .58em,.3em .04em;mask-position:.3em .58em,.3em .04em;}
  62.5%{-webkit-mask-position:.12em .5em,.5em .12em;mask-position:.12em .5em,.5em .12em;}
  75%{-webkit-mask-position:.04em .3em,.58em .3em;mask-position:.04em .3em,.58em .3em;}
  87.5%{-webkit-mask-position:.12em .12em,.5em .5em;mask-position:.12em .12em,.5em .5em;}
  100%{-webkit-mask-position:.3em .04em,.3em .58em;mask-position:.3em .04em,.3em .58em;}
}
@media (prefers-reduced-motion:reduce){.loader-boog__arm,.loader-boog__letters{animation:none;}}

/* ══════════ Slider-специфичные примитивы (по инвентарю редактора) ══════════ */

/* ══ Choice-card / плитка выбора (текст/шаблоны/импорт/темы) ══ */
.choice-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface);cursor:pointer;text-align:center;
  transition:border-color var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard);}
.choice-card:hover{border-color:var(--slate-300);}
.choice-card:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.choice-card.is-active,.choice-card[aria-selected="true"]{border-color:var(--color-accent);
  box-shadow:0 0 0 1px var(--color-accent);background:var(--color-accent-weak);}
.choice-card[aria-disabled="true"]{opacity:.5;pointer-events:none;}
.choice-card__icon{width:var(--space-8);height:var(--space-8);display:grid;place-items:center;color:var(--color-muted);}
.choice-card.is-active .choice-card__icon,.choice-card[aria-selected="true"] .choice-card__icon{color:var(--color-accent);}
.choice-card__label{font:600 var(--text-sm)/1.2 var(--font-body);color:var(--color-text);}
.choice-card__desc{font:var(--text-xs)/1.3 var(--font-body);color:var(--color-muted);}

/* ══ Swatch-grid (палитра выбора цвета) ══ */
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--space-6),1fr));gap:var(--space-2);}
.swatch-grid__item{aspect-ratio:1;border-radius:var(--radius-sm);border:1px solid var(--color-border);cursor:pointer;padding:0;}
.swatch-grid__item:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.swatch-grid__item[aria-selected="true"]{box-shadow:0 0 0 var(--border-thick) var(--color-surface),0 0 0 calc(var(--border-thick) * 2) var(--color-accent);}

/* ══ Menu: чекаемый пункт + горячая клавиша ══ */
.menu__item[aria-checked]::before{content:"";width:var(--space-4);text-align:center;flex:none;}
.menu__item[aria-checked="true"]::before{content:"✓";color:var(--color-accent);font-weight:700;}
.menu__shortcut{margin-left:auto;color:var(--color-muted);font:var(--text-xs)/1 var(--font-mono);}

/* ══ Icon-group (сегменты icon-кнопок: слои/выравнивание/рамка/draw) ══ */
.icon-group{display:inline-flex;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);overflow:hidden;}
.icon-group .icon-btn{border-radius:0;border:none;}
.icon-group .icon-btn + .icon-btn{border-left:1px solid var(--color-border);}

/* ══ Dimension grid (X/Y/W/H) ══ */
.dim-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);}
.dim-field{display:flex;flex-direction:column;gap:var(--space-1);}
.dim-field input{width:100%;text-align:center;outline:none;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2);
  font:var(--text-md)/1 var(--font-mono);color:var(--color-text);}
.dim-field input:focus{border-color:var(--color-accent);box-shadow:var(--focus-ring);}
.dim-field__cap{text-align:center;font:var(--text-xs)/1 var(--font-body);color:var(--color-muted);}

/* ══ Collapsible / accordion ══ */
.collapse{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);overflow:hidden;}
.collapse__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;
  border:none;background:transparent;cursor:pointer;text-align:left;padding:var(--space-3) var(--space-4);
  font:600 var(--text-md)/1 var(--font-body);color:var(--color-text);}
.collapse__header:hover{background:var(--state-hover);}
.collapse__chevron{color:var(--color-muted);transition:transform var(--motion-fast) var(--ease-standard);}
.collapse.is-open .collapse__chevron{transform:rotate(180deg);}
.collapse__body{padding:var(--space-4);border-top:1px solid var(--color-border);}
.collapse:not(.is-open) .collapse__body{display:none;}

/* ══ Search field (leading icon) ══ */
.search{display:inline-flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);}
.search:focus-within{border-color:var(--color-accent);box-shadow:var(--focus-ring);}
.search .icon{color:var(--color-muted);flex:none;}
.search input{flex:1;border:none;outline:none;background:transparent;padding:var(--space-2) 0;
  font:var(--text-md)/1 var(--font-body);color:var(--color-text);}

/* ══ Chips-input (токены + ввод) ══ */
.chips-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);}
.chips-input:focus-within{border-color:var(--color-accent);box-shadow:var(--focus-ring);}
.chips-input input{flex:1;min-width:var(--space-16);border:none;outline:none;background:transparent;padding:var(--space-1);
  font:var(--text-md)/1 var(--font-body);color:var(--color-text);}
.chip__x{cursor:pointer;opacity:.6;}
.chip__x:hover{opacity:1;}

/* ══ Status-dot (мультистатус) ══ */
.status-dot{display:inline-block;width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:var(--color-muted);}
.status-dot--online{background:var(--color-success);}
.status-dot--away{background:var(--color-warning);}
.status-dot--busy{background:var(--color-danger);}
.status-dot--offline{background:var(--slate-300);}

/* ══ Tool-popover (оболочка мини-панели создания) ══ */
.tool-popover{width:calc(var(--space-16) * 4);background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--elev-3);overflow:hidden;}
.tool-popover__header{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);}
.tool-popover__title{font:700 var(--text-md)/1 var(--font-display);}
.tool-popover__desc{padding:var(--space-2) var(--space-4) 0;font:var(--text-sm)/1.3 var(--font-body);color:var(--color-muted);}
.tool-popover__body{padding:var(--space-4);}

/* ══ Line preview (толщина/стиль связи) ══ */
.line-preview{width:var(--space-12);height:0;border-top:var(--border-thick) solid var(--color-text);}
.line-preview--thin{border-top-width:1px;}
.line-preview--thick{border-top-width:var(--space-1);}
.line-preview--dashed{border-top-style:dashed;}
.line-preview--dotted{border-top-style:dotted;}
/* Редкий штрих: разреженный пунктир длиннее и реже родного --dashed (border-style не даёт управлять
   длиной штриха/просвета) — рисуется фоном, а не border, чтобы не путать с обычной штриховой. */
.line-preview--loosely-dashed{border-top:none;height:var(--border-thick);
  background-image:repeating-linear-gradient(to right, var(--color-text) 0 calc(var(--space-2) + var(--space-05)), transparent calc(var(--space-2) + var(--space-05)) calc(var(--space-4) + var(--space-05)));}

/* ══ Inline-editable title ══ */
.inline-edit__view{cursor:text;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);
  font:700 var(--text-lg)/1 var(--font-display);color:var(--color-text);}
.inline-edit__view:hover{background:var(--state-hover);}
.inline-edit__input{padding:var(--space-1) var(--space-2);border:1px solid var(--color-accent);border-radius:var(--radius-sm);
  outline:none;box-shadow:var(--focus-ring);font:700 var(--text-lg)/1 var(--font-display);color:var(--color-text);}
.inline-edit__input[hidden],.inline-edit__view[hidden]{display:none;}

/* ══ Timer pill (обратный отсчёт с заливкой-прогрессом) ══ */
.timer-pill{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);overflow:hidden;cursor:pointer;
  padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-pill);
  background:var(--color-surface);font:600 var(--text-sm)/1 var(--font-mono);color:var(--color-text);}
.timer-pill__fill{position:absolute;inset:0;z-index:0;background:var(--color-accent-weak);transform-origin:left;}
.timer-pill > *{position:relative;z-index:1;}
.timer-pill--paused{color:var(--color-muted);}
.timer-pill--expired{color:var(--color-danger);border-color:var(--color-danger);}
.timer-pill--expired .timer-pill__fill{background:var(--color-danger-weak);}

/* ══ Slide thumbnail (филмстрип) ══ */
.slide-thumb{display:flex;flex-direction:column;gap:var(--space-1);cursor:pointer;width:calc(var(--space-16) * 2);}
.slide-thumb__preview{aspect-ratio:16/9;overflow:hidden;background:var(--color-surface-2);
  border:1px solid var(--color-border);border-radius:var(--radius-md);}
.slide-thumb.is-active .slide-thumb__preview{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent);}
.slide-thumb__title{font:600 var(--text-sm)/1.2 var(--font-body);color:var(--color-text);}
.slide-thumb__meta{font:var(--text-xs)/1 var(--font-body);color:var(--color-muted);}

/* ══ Zoom HUD (пилюля −/значение-меню/+) ══ */
.zoom-hud{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);box-shadow:var(--elev-2);}
.zoom-hud__value{min-width:var(--space-12);border:none;background:transparent;cursor:pointer;border-radius:var(--radius-md);
  padding:var(--space-1) var(--space-3);font:600 var(--text-sm)/1 var(--font-mono);color:var(--color-text);}
.zoom-hud__value:hover{background:var(--state-hover);}

/* ══ Remote cursor (живой курсор участника) ══ */
.remote-cursor{position:relative;display:inline-block;color:var(--color-accent);}
.remote-cursor__ptr{width:var(--size-icon);height:var(--size-icon);}
.remote-cursor__bubble{position:absolute;left:var(--space-4);top:var(--space-4);white-space:nowrap;
  display:inline-flex;align-items:center;gap:var(--space-1);background:currentColor;
  border-radius:var(--radius-pill);padding:var(--space-05) var(--space-2);}
.remote-cursor__bubble span{color:var(--color-on-accent);font:600 var(--text-xs)/1 var(--font-body);}

/* ══ Мини-карта ══ */
.minimap{width:calc(var(--space-16) * 3);background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);box-shadow:var(--elev-2);overflow:hidden;}
.minimap__header{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);
  font:600 var(--text-sm)/1 var(--font-body);color:var(--color-muted);}
.minimap__body{position:relative;aspect-ratio:16/10;background:var(--color-surface-2);
  background-image:radial-gradient(var(--color-border) 1px, transparent 0);background-size:var(--space-3) var(--space-3);}
.minimap__viewport{position:absolute;border:var(--border-thick) solid var(--color-accent);
  border-radius:var(--radius-sm);background:oklch(0.55 0.15 235 / .1);}
.minimap__footer{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-top:1px solid var(--color-border);}

/* ══ Draw-тулбар ══ */
.draw-toolbar{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);box-shadow:var(--elev-2);}
.draw-toolbar__group{display:inline-flex;align-items:center;gap:var(--space-2);}
/* кнопка цвета кисти — компактная, как во всплывающем баре объекта */
.draw-toolbar .swatch-btn{width:var(--space-5);height:var(--space-5);border-radius:var(--radius-sm);}
.draw-preset{display:grid;place-items:center;width:var(--space-6);height:var(--space-6);
  border:none;background:transparent;cursor:pointer;border-radius:var(--radius-pill);}
.draw-preset:hover{background:var(--state-hover);}
.draw-preset[aria-pressed="true"]{background:var(--color-accent-weak);}
.draw-preset .dot{border-radius:var(--radius-pill);background:var(--color-text);}
.draw-preset .dot--s{width:var(--space-1);height:var(--space-1);}
.draw-preset .dot--m{width:var(--space-2);height:var(--space-2);}
.draw-preset .dot--l{width:var(--space-3);height:var(--space-3);}
/* .swatch-btn как есть в ките (заливка цветом через style="background"), нативный
   input[type=color] лежит поверх невидимым слоем — только для открытия пикера. */
.draw-color-swatch{position:relative;overflow:hidden;padding:0;cursor:pointer;}
.draw-color-swatch input[type="color"]{position:absolute;inset:0;width:100%;height:100%;
  border:none;padding:0;margin:0;cursor:pointer;opacity:0;}

/* ══ Стикер на холсте (с загибом угла) ══ */
.sticky{position:relative;width:calc(var(--space-16) * 2);aspect-ratio:1;padding:var(--space-4);
  background:var(--pastel-amber, var(--color-warning-weak));border-radius:var(--radius-sm);box-shadow:var(--elev-2);
  font:var(--text-md)/1.4 var(--font-body);color:var(--slate-900);}
.sticky::after{content:"";position:absolute;right:0;bottom:0;width:var(--space-5);height:var(--space-5);
  background:linear-gradient(135deg, transparent 50%, oklch(0 0 0 / .12) 50%);}
/* цвета стикера — палитра контента холста (пастельные токены, единые для холста/промо) */
.sticky--yellow{background:var(--pastel-yellow);}
.sticky--amber{background:var(--pastel-amber);}
.sticky--rose{background:var(--pastel-rose);}
.sticky--purple{background:var(--pastel-purple);}
.sticky--sky{background:var(--pastel-sky);}
.sticky--green{background:var(--pastel-green);}
.sticky--slate{background:var(--color-surface-2);}
/* формы стикера (реальные пресеты холста: квадрат по умолчанию, прямоугольник, круг) */
.sticky--rect{aspect-ratio:auto;width:calc(var(--space-16) * 2.5);min-height:calc(var(--space-16) * 1.4);}
.sticky--circle{aspect-ratio:1;border-radius:var(--radius-pill);display:grid;place-items:center;text-align:center;}
.sticky--circle::after{display:none;}
/* компактный стикер — для миниатюр слайда и промо-раскладок */
.sticky--sm{width:calc(var(--space-16) * 1.4);padding:var(--space-3);font:600 var(--text-sm)/1.35 var(--font-body);}
.sticky--sm.sticky--rect{width:calc(var(--space-16) * 1.9);min-height:calc(var(--space-12));}

/* ══ Голосование на холсте (виджет опроса — ближайшая доработка Слайдера) ══ */
.vote{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  box-shadow:var(--elev-2);padding:var(--space-4);width:calc(var(--space-16) * 3.6);box-sizing:border-box;
  display:flex;flex-direction:column;gap:var(--space-3);}
.vote__title{display:flex;align-items:center;gap:var(--space-2);font:700 var(--text-md)/1.2 var(--font-body);color:var(--color-text);}
.vote__title .icon{--size-icon:16px;color:var(--color-muted);}
.vote__opt{display:flex;flex-direction:column;gap:var(--space-1);}
.vote__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  font:var(--text-sm)/1.2 var(--font-body);color:var(--color-text);}
.vote__pct{color:var(--color-muted);font-weight:700;flex:none;}
.vote__bar{height:var(--space-2);border-radius:var(--radius-pill);background:var(--color-surface-2);overflow:hidden;}
.vote__fill{display:block;height:100%;border-radius:var(--radius-pill);background:var(--color-accent);
  transition:width var(--motion-base) var(--ease-standard);}
.vote__fill--success{background:var(--color-success);}
.vote__fill--warning{background:var(--color-warning);}
.vote__fill--purple{background:var(--color-purple);}
.vote__opt[aria-checked="true"] .vote__row{font-weight:700;color:var(--color-accent);}
.vote__foot{display:flex;align-items:center;justify-content:space-between;
  font:var(--text-xs)/1 var(--font-body);color:var(--color-muted);padding-top:var(--space-1);}

/* ══ Фигуры холста (SHAPE_LIBRARY) — заливка + обводка на токенах ══ */
.shape{position:relative;display:grid;place-items:center;width:calc(var(--space-16) * 1.8);aspect-ratio:1;
  box-sizing:border-box;padding:var(--space-2);text-align:center;
  background:color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border:var(--border-thick) solid var(--color-accent);color:var(--color-text);
  font:600 var(--text-sm)/1.2 var(--font-body);box-shadow:var(--elev-1);}
.shape--slate{background:var(--color-surface);border-color:var(--slate-400);}
.shape--success{background:color-mix(in srgb,var(--color-success) 12%,var(--color-surface));border-color:var(--color-success);}
.shape--warning{background:color-mix(in srgb,var(--color-warning) 12%,var(--color-surface));border-color:var(--color-warning);}
.shape--danger{background:color-mix(in srgb,var(--color-danger) 12%,var(--color-surface));border-color:var(--color-danger);}
.shape--purple{background:color-mix(in srgb,var(--color-purple) 12%,var(--color-surface));border-color:var(--color-purple);}
/* формы с радиусами (обводка рендерится корректно) */
.shape--rect{aspect-ratio:16/10;border-radius:0;}
.shape--rounded{aspect-ratio:16/10;border-radius:var(--radius-md);}
.shape--circle{border-radius:var(--radius-pill);}
.shape--capsule{aspect-ratio:16/7;border-radius:var(--radius-pill);}
/* формы через clip-path — заливкой (обводку срезал бы clip), берут плотный цвет */
.shape--clip{border:none;background:var(--color-accent);color:var(--color-on-accent);box-shadow:none;}
.shape--clip.shape--slate{background:var(--slate-500);}
.shape--clip.shape--success{background:var(--color-success);}
.shape--clip.shape--warning{background:var(--color-warning);}
.shape--clip.shape--danger{background:var(--color-danger);}
.shape--clip.shape--purple{background:var(--color-purple);}
.shape--triangle{clip-path:polygon(50% 2%,98% 98%,2% 98%);}
.shape--diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.shape--pentagon{clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);}
.shape--hexagon{clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);}
.shape--octagon{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);}
.shape--parallelogram{aspect-ratio:16/9;clip-path:polygon(24% 0,100% 0,76% 100%,0 100%);}
.shape--trapezoid{aspect-ratio:16/9;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);}
/* линия как объект-фигура */
.shape--line{aspect-ratio:auto;width:calc(var(--space-16) * 2);height:0;background:none;border:none;
  border-top:var(--border-thick) solid var(--color-text);box-shadow:none;padding:0;}

/* ══ Текстовый блок холста ══ */
.text-block{font:var(--text-lg)/1.45 var(--font-body);color:var(--color-text);
  padding:var(--space-2) var(--space-3);border:1px solid transparent;max-width:calc(var(--space-16) * 4);}
.text-block--bordered{border-color:var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);}
.text-block__ph{color:var(--color-muted);}

/* ══ Коннектор (линия-связь со стрелкой; пути curve/ortho/bezier рендерит SVG холста) ══ */
.connector{display:inline-flex;align-items:center;color:var(--color-text);}
.connector__line{width:calc(var(--space-16) * 1.6);height:0;border-top:var(--border-thick) solid currentColor;}
.connector--dashed .connector__line{border-top-style:dashed;}
.connector--dotted .connector__line{border-top-style:dotted;}
.connector--loosely-dashed .connector__line{border-top:none;height:var(--border-thick);
  background-image:repeating-linear-gradient(to right, currentColor 0 calc(var(--space-2) + var(--space-05)), transparent calc(var(--space-2) + var(--space-05)) calc(var(--space-4) + var(--space-05)));}
.connector--accent{color:var(--color-accent);}
.connector--danger{color:var(--color-danger);}
.connector--muted{color:var(--color-muted);}
.connector__arrow{width:0;height:0;border-top:var(--space-1) solid transparent;border-bottom:var(--space-1) solid transparent;
  border-left:var(--space-2) solid currentColor;}

/* ══ Изображение на холсте (рамка-объект) ══ */
.canvas-image{position:relative;display:grid;place-items:center;width:calc(var(--space-16) * 2.4);aspect-ratio:16/10;
  background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);
  overflow:hidden;color:var(--color-muted);box-shadow:var(--elev-1);}
.canvas-image .icon{--size-icon:var(--space-6);}

/* ══ Таблица холста (мини-объект) ══ */
.canvas-table{border-collapse:collapse;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--color-surface);box-shadow:var(--elev-1);font:var(--text-sm)/1.2 var(--font-body);}
.canvas-table th,.canvas-table td{border:1px solid var(--color-border);padding:var(--space-2) var(--space-3);text-align:left;}
.canvas-table th{background:var(--color-surface-2);color:var(--color-muted);font-weight:700;
  font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.3px;}
.canvas-table td{color:var(--color-text);}
.canvas-table .num{text-align:right;font-variant-numeric:tabular-nums;}
.canvas-table tr.is-top td{background:var(--color-accent-weak);color:var(--color-accent);font-weight:700;}

/* ══ Логотип-монограмма BOOG (BO/OG) — точки-спутники с кометным хвостом ══ */
.as-boog{position:relative;box-sizing:border-box;width:var(--brand-logo-size);height:var(--brand-logo-size);padding:var(--brand-logo-pad);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;place-items:center;
  font-family:var(--font-display);font-weight:900;font-size:var(--brand-logo-font);line-height:.8;letter-spacing:-.3px;
  border-radius:var(--radius-pill);background:var(--color-surface);
  box-shadow:inset 0 0 0 var(--brand-logo-ring) var(--color-border);color:var(--brand-logo-ink);}
.as-boog>span{display:block;}
/* B и G — на той же em-орбите (.72em), что и точки-спутники, чтобы выравнивание
   букв и кружков не зависело от соотношения размер-коробки/шрифт: иначе на
   крупном размере B уезжает выше своего кружка, а G — ниже. */
.as-boog>span:nth-child(1),.as-boog>span:nth-child(4){position:absolute;left:50%;top:50%;
  width:1em;height:1em;margin:-.5em 0 0 -.5em;display:grid;place-items:center;}
.as-boog>span:nth-child(1){transform:rotate(225deg) translate(.72em) rotate(-225deg);}
.as-boog>span:nth-child(4){transform:rotate(45deg) translate(.72em) rotate(-45deg);}
.as-boog>span:nth-child(2),.as-boog>span:nth-child(3){position:absolute;left:50%;top:50%;
  width:.71em;height:.71em;margin:-.355em 0 0 -.355em;border-radius:var(--radius-pill);color:transparent;overflow:hidden;}
.as-boog>span:nth-child(2){background:var(--brand-logo-blue);animation:as-boog-a 30s ease-in-out infinite;}
.as-boog>span:nth-child(3){background:var(--brand-logo-red);animation:as-boog-b 30s ease-in-out infinite;}
@keyframes as-boog-a{0%{transform:rotate(-45deg) translate(.72em);}10%,50%{transform:rotate(135deg) translate(.72em);}60%,100%{transform:rotate(315deg) translate(.72em);}}
@keyframes as-boog-b{0%{transform:rotate(135deg) translate(.72em);}10%,50%{transform:rotate(315deg) translate(.72em);}60%,100%{transform:rotate(495deg) translate(.72em);}}
.as-boog::before,.as-boog::after{content:'';position:absolute;inset:0;border-radius:var(--radius-pill);
  -webkit-mask:radial-gradient(closest-side,transparent 22%,black 31%,black 56%,transparent 66%);
  mask:radial-gradient(closest-side,transparent 22%,black 31%,black 56%,transparent 66%);
  filter:blur(var(--brand-logo-blur));opacity:0;pointer-events:none;}
.as-boog::before{background:conic-gradient(from 35deg,transparent,var(--brand-logo-blue) 55deg,transparent 55deg);
  animation:as-boog-rota 30s ease-in-out infinite,as-boog-trail 30s ease-in-out infinite;}
.as-boog::after{background:conic-gradient(from 35deg,transparent,var(--brand-logo-red) 55deg,transparent 55deg);
  animation:as-boog-rotb 30s ease-in-out infinite,as-boog-trail 30s ease-in-out infinite;}
@keyframes as-boog-rota{0%{rotate:-45deg}10%,50%{rotate:135deg}60%,100%{rotate:315deg}}
@keyframes as-boog-rotb{0%{rotate:135deg}10%,50%{rotate:315deg}60%,100%{rotate:495deg}}
@keyframes as-boog-trail{0%,1%{opacity:0}3%{opacity:.75}8%{opacity:.75}11%{opacity:0}50%{opacity:0}52%{opacity:.75}57%{opacity:.75}61%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.as-boog>span,.as-boog::before,.as-boog::after{animation:none!important;}.as-boog::before,.as-boog::after{display:none;}}

/* ══ Блок-схема / flow-chart (узлы процесса + стрелки-связи) ══ */
.flow{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0;}
.flow__node{display:grid;place-items:center;min-width:calc(var(--space-16) * 1.1);
  padding:var(--space-2) var(--space-3);text-align:center;white-space:nowrap;
  background:color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border:var(--border-thick) solid var(--color-accent);border-radius:var(--radius-md);
  font:600 var(--text-sm)/1.15 var(--font-body);color:var(--color-text);box-shadow:var(--elev-1);}
.flow__node--start{border-radius:var(--radius-pill);border-color:var(--color-success);
  background:color-mix(in srgb, var(--color-success) 12%, var(--color-surface));}
.flow__node--end{border-radius:var(--radius-pill);border-color:var(--color-purple);
  background:color-mix(in srgb, var(--color-purple) 12%, var(--color-surface));}
.flow__node--decision{border-color:var(--color-warning);
  background:color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));}
.flow__link{flex:none;position:relative;width:var(--space-6);height:0;
  border-top:var(--border-thick) solid var(--color-muted);}
.flow__link::after{content:"";position:absolute;right:calc(var(--space-05) * -1);top:50%;transform:translateY(-50%);
  width:0;height:0;border-top:var(--space-1) solid transparent;border-bottom:var(--space-1) solid transparent;
  border-left:var(--space-2) solid var(--color-muted);}
.flow__link--dashed{border-top-style:dashed;}
/* вертикальная ветка (напр. «нет» вниз от решения) */
.flow__link--down{width:0;height:var(--space-5);border-top:none;border-left:var(--border-thick) solid var(--color-muted);}
.flow__link--down::after{right:auto;left:50%;top:auto;bottom:calc(var(--space-05) * -1);transform:translateX(-50%);
  border-top:var(--space-2) solid var(--color-muted);border-left:var(--space-1) solid transparent;border-right:var(--space-1) solid transparent;border-bottom:none;}

/* ══ Picker-grid (выбор фигуры/иконки/коннектора) ══ */
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--space-10),1fr));gap:var(--space-2);}
.picker-grid__item{display:grid;place-items:center;aspect-ratio:1;cursor:pointer;color:var(--color-muted);
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);}
.picker-grid__item:hover{border-color:var(--slate-300);color:var(--color-text);}
.picker-grid__item[aria-selected="true"]{border-color:var(--color-accent);background:var(--color-accent-weak);color:var(--color-accent);}
/* Модификатор без окантовки — состояние только фоном (плашка смены типа объекта) */
.picker-grid--flat .picker-grid__item{border-color:transparent;}
.picker-grid--flat .picker-grid__item:hover{border-color:transparent;background:var(--state-hover);}
.picker-grid--flat .picker-grid__item[aria-selected="true"]{border-color:transparent;background:var(--color-accent-weak);}
/* Превью формы контуром (линия/фигура), тонируется через currentColor */
.shape-ico{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:7;stroke-linejoin:round;stroke-linecap:round;}
/* Панель сгруппированного выбора фигуры ("Все фигуры") */
.allshapes{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  box-shadow:var(--elev-2);padding:var(--space-3);min-width:calc(var(--space-16) * 3.4);max-width:320px;}
.allshapes .menu__section{margin-top:var(--space-2);}
.allshapes .menu__section:first-child{margin-top:0;}

/* ══ Vertical tool-rail (левый/правый рельс инструментов) ══ */
.rail{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--elev-2);}
.rail__divider{width:60%;height:0;border:none;border-top:1px solid var(--color-border);margin:var(--space-1) 0;}
/* @boog-ui-end */

/* ══════════ Домашние примитивы — дашборд и афиша (ADR-030) ══════════ */

/* ══ KPI-плитка (метрика + тренд) ══ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);}
.kpi{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-1);background:var(--color-surface);}
.kpi__l{font:600 var(--text-xs)/1.2 var(--font-body);color:var(--color-muted);}
.kpi__v{font:900 var(--text-2xl)/1 var(--font-display);color:var(--color-text);}
.kpi__v small{font:700 var(--text-md)/1 var(--font-body);color:var(--color-muted);}
.kpi__d{display:inline-flex;align-items:center;gap:var(--space-1);font:700 var(--text-xs)/1 var(--font-body);}
.kpi__d .icon{--size-icon:var(--space-3);}
.kpi__d--up{color:var(--color-success);}
.kpi__d--down{color:var(--color-danger);}
.kpi__d--flat{color:var(--color-muted);}

/* ══ Timeline (лента стадий процесса) ══ */
.timeline{display:flex;align-items:flex-start;}
.timeline__step{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);
  position:relative;text-align:center;}
.timeline__step::before,.timeline__step::after{content:"";position:absolute;top:var(--space-3);
  height:var(--border-thick);background:var(--color-border);z-index:0;}
.timeline__step::before{left:0;right:50%;}
.timeline__step::after{left:50%;right:0;}
.timeline__step:first-child::before{display:none;}
.timeline__step:last-child::after{display:none;}
.timeline__dot{position:relative;z-index:1;width:var(--space-6);height:var(--space-6);border-radius:var(--radius-pill);
  display:grid;place-items:center;background:var(--color-surface-2);color:var(--color-muted);
  border:var(--border-thick) solid var(--color-border);font:800 var(--text-xs)/1 var(--font-body);}
.timeline__dot .icon{--size-icon:var(--space-3);}
.timeline__label{font:600 var(--text-xs)/1.1 var(--font-body);color:var(--color-muted);}
.timeline__step.is-done .timeline__dot{background:var(--color-success);border-color:var(--color-success);color:var(--color-on-accent);}
.timeline__step.is-done::before,.timeline__step.is-done::after{background:var(--color-success);}
.timeline__step.is-current .timeline__dot{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent);
  box-shadow:0 0 0 var(--space-1) var(--color-accent-weak);}
.timeline__step.is-current::before{background:var(--color-success);}
.timeline__step.is-current .timeline__label{color:var(--color-accent-active);font-weight:800;}

/* ══ Bars (горизонтальный мини бар-чарт) ══ */
.bars{display:flex;flex-direction:column;gap:var(--space-3);}
.bar{display:grid;grid-template-columns:1fr auto;gap:var(--space-05) var(--space-2);align-items:center;}
.bar__l{display:flex;align-items:center;gap:var(--space-1);min-width:0;
  font:600 var(--text-sm)/1.2 var(--font-body);color:var(--color-text);}
.bar__l .icon{--size-icon:var(--space-3);flex:none;}
.bar__n{font:700 var(--text-xs)/1 var(--font-body);color:var(--color-muted);white-space:nowrap;}
.bar__track{display:block;grid-column:1/-1;height:var(--space-3);background:var(--color-surface-2);border-radius:var(--radius-pill);overflow:hidden;}
.bar__fill{display:block;height:100%;border-radius:var(--radius-pill);}
.bar__fill--accent{background:var(--color-accent);}
.bar__fill--success{background:var(--color-success);}
.bar__fill--warning{background:var(--color-warning);}
.bar__fill--danger{background:var(--color-danger);}
.bar__fill--purple{background:var(--color-purple);}
.bar__fill--muted{background:var(--color-muted);}

/* ══ Radar (паутинка компетенций: свой уровень × цель) ══
   SVG строится в primitives.js → initRadars(), по data-axes="Ось:свой:цель,...".
   Координаты/viewBox генератора — неизбежная SVG-геометрия (числа без px, user units). */
.radars{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);}
.radar{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);overflow:hidden;
  border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2);background:var(--color-surface);}
.radar__title{display:flex;align-items:center;gap:var(--space-1);font:700 var(--text-xs)/1 var(--font-body);color:var(--color-text);}
.radar__title::before{content:"";width:var(--space-2);height:var(--space-2);border-radius:3px;background:currentColor;flex:none;}
.radar svg{width:100%;height:auto;display:block;overflow:visible;}
.radar .rg-ring{fill:none;stroke:var(--color-border);stroke-width:1;}
.radar .rg-axis{stroke:var(--color-border);stroke-width:1;}
.radar .rg-gap{stroke:none;}
.radar .rg-target{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:4 3;stroke-linejoin:round;opacity:.9;}
.radar .rg-own{fill:currentColor;fill-opacity:.34;stroke:currentColor;stroke-width:2;stroke-linejoin:round;}
.radar .rg-dot{fill:currentColor;}
.radar .rg-tdot{fill:var(--color-surface);stroke:currentColor;stroke-width:1.3;}
/* font-size намеренно не в CSS: SVG-геометрия виджета (расстояние меток от центра) рассчитана
   под компактный кегль, заданный числом в primitives.js → initRadars() (SVG-атрибут font-size). */
.radar .rg-label{fill:var(--color-muted);font-family:var(--font-body);font-weight:600;}
.radar__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-05);}
.radar__legend .lg{display:inline-flex;align-items:center;gap:var(--space-1);font:600 var(--text-xs)/1 var(--font-body);color:var(--color-muted);}
.radar__legend .lg::before{content:"";width:var(--space-3);height:var(--space-2);flex:none;}
.radar__legend .lg--own::before{background:currentColor;opacity:.5;border-radius:2px;}
.radar__legend .lg--tgt::before{border:1px dashed currentColor;border-radius:2px;background:transparent;}
.radar__legend .lg--gap::before{background:repeating-linear-gradient(45deg,currentColor 0 var(--space-05),transparent var(--space-05) var(--space-1));opacity:.6;border-radius:2px;}
.radar__scale{font:var(--text-xs)/1 var(--font-body);color:var(--color-muted);}


/* ══ Poster (постер-афиша мероприятия: один каркас под роль × стадия) ══
   Источник объединения: «Афиша мероприятия» (участник/ассессор, лента ЖЦ,
   расписание) + кабинет Организатора US-9 (команды с входом на доску,
   приглашение модератора по QR). Паутинные диаграммы компетенций (.radar*
   выше) используются ВНУТРИ афиши через .block, но не входят в каркас
   постера — кандидат в будущий dataviz-примитив кита, здесь не портируется. */
.poster{display:flex;flex-direction:column;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--elev-2);}

.poster__cover{position:relative;padding:var(--space-5);min-height:var(--poster-cover-min-h);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:var(--color-on-accent);}
.poster__cover--test{background:var(--poster-cover-test);}
.poster__cover--learn{background:var(--poster-cover-learn);}
.poster__wm{position:absolute;right:var(--poster-wm-offset-x);bottom:var(--poster-wm-offset-y);
  color:var(--color-on-accent);opacity:.16;pointer-events:none;}
.poster__wm .icon{--size-icon:var(--size-icon-wm);}
.poster__badges{position:absolute;top:var(--space-4);left:var(--space-5);right:var(--space-5);
  display:flex;align-items:center;gap:var(--space-2);}
.poster__badges .spacer{flex:1;}
.pchip{display:inline-flex;align-items:center;gap:var(--space-1);border-radius:var(--radius-pill);
  padding:var(--space-1) var(--space-3);font:700 var(--text-xs)/1 var(--font-body);
  background:var(--poster-scrim-chip);color:var(--color-text);backdrop-filter:blur(2px);}
.pchip .icon{--size-icon:var(--space-3);}
.pchip--stage{background:var(--poster-scrim-stage);color:var(--color-on-accent);}
.poster__close{margin-left:var(--space-2);width:var(--size-badge-round);height:var(--size-badge-round);
  border-radius:var(--radius-pill);border:none;background:var(--poster-scrim-chip);color:var(--color-text);
  display:grid;place-items:center;cursor:pointer;flex:none;}
.poster__close .icon{--size-icon:var(--space-4);}
.poster__title{position:relative;font:900 var(--text-xl)/1.1 var(--font-display);margin:0;
  text-shadow:var(--poster-title-shadow);}
.poster__sub{position:relative;margin-top:var(--space-1);font:var(--text-sm)/1.35 var(--font-body);
  color:var(--poster-sub-color);text-shadow:var(--poster-sub-shadow);max-width:44ch;}

.poster__body{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);}

/* ── лента жизненного цикла игры ── */
.lifecycle{display:flex;align-items:flex-start;}
.lcstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);position:relative;text-align:center;}
.lcstep::before,.lcstep::after{content:"";position:absolute;top:var(--space-3);height:var(--border-thick);
  background:var(--color-border);z-index:0;}
.lcstep::before{left:0;right:50%;}
.lcstep::after{left:50%;right:0;}
.lcstep:first-child::before{display:none;}
.lcstep:last-child::after{display:none;}
.lcstep__dot{position:relative;z-index:1;width:var(--size-badge-sm);height:var(--size-badge-sm);
  border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--color-surface-2);
  color:var(--color-muted);border:var(--border-thick) solid var(--color-border);font:800 var(--text-xs)/1 var(--font-body);}
.lcstep__dot .icon{--size-icon:var(--space-3);}
.lcstep__label{font:600 var(--text-xs)/1.1 var(--font-body);color:var(--color-muted);}
.lcstep.is-done .lcstep__dot{background:var(--color-success);border-color:var(--color-success);color:var(--color-on-accent);}
.lcstep.is-done::before,.lcstep.is-done::after{background:var(--color-success);}
.lcstep.is-current .lcstep__dot{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent);
  box-shadow:0 0 0 var(--space-1) var(--color-accent-weak);}
.lcstep.is-current::before{background:var(--color-success);}
.lcstep.is-current .lcstep__label{color:var(--color-accent-active);font-weight:800;}

/* ── честный масштаб (без содержания) ── */
.facts{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);}
.fact{display:inline-flex;align-items:center;gap:var(--space-1);font:var(--text-sm)/1.2 var(--font-body);color:var(--color-text);}
.fact .icon{--size-icon:var(--space-4);color:var(--color-muted);}
.fact b{font-weight:700;}

/* ── секции афиши (заголовок-капс + содержимое) ── */
.block{display:flex;flex-direction:column;gap:var(--space-2);}
.block__cap{display:flex;align-items:center;gap:var(--space-1);font:700 var(--text-xs)/1 var(--font-body);
  color:var(--color-muted);text-transform:uppercase;letter-spacing:.05em;}
.block__cap .icon{--size-icon:var(--space-3);}
.block__cap .spacer{flex:1;}
.block__cap .mini{font-weight:600;letter-spacing:0;text-transform:none;color:var(--color-muted);}

/* ── живое состояние (присутствие / прогресс) ── */
.live{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);
  border-radius:var(--radius-md);background:var(--color-surface-2);}
.live__row{display:flex;align-items:center;gap:var(--space-2);font:var(--text-sm)/1.2 var(--font-body);color:var(--color-text);}
.live__row .icon{--size-icon:var(--space-4);color:var(--color-muted);}
.live__row b{font-weight:700;}
.live__row .spacer{flex:1;}

/* ── команды + вход на общую доску команды (US-9) ── */
.teams{display:flex;flex-direction:column;gap:var(--space-2);}
.team{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-border);border-radius:var(--radius-md);}
.team > .icon{--size-icon:var(--space-4);color:var(--color-muted);flex:none;}
.team__n{font:700 var(--text-sm)/1.2 var(--font-body);}
.team__m{margin-left:auto;font:var(--text-xs)/1 var(--font-body);color:var(--color-muted);}
.team .btn{flex:none;}

/* ── ведущие (организатор / главный модератор / модератор) ── */
.leads{display:flex;flex-direction:column;gap:var(--space-05);}
.lead-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) 0;}
.lead-role{display:inline-grid;place-items:center;width:var(--size-badge-round);height:var(--size-badge-round);
  border-radius:var(--radius-pill);background:var(--color-accent-weak);color:var(--color-accent-active);flex:none;}
.lead-role .icon{--size-icon:var(--space-4);}
.lead-role--org{background:var(--color-warning-weak);color:var(--color-warning);}
.lead-role--lead{background:var(--color-accent-weak);color:var(--color-accent-active);}
.lead-name{font:600 var(--text-sm)/1.1 var(--font-body);color:var(--color-text);}
.lead-cap{font:var(--text-xs)/1.1 var(--font-body);color:var(--color-muted);margin-left:auto;}
.lead-row .icon-btn{margin-left:var(--space-2);}

/* ── приглашение модератора по QR-ссылке ── */
.invite{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:center;
  padding:var(--space-3);border:1px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);}
.qr-box{width:var(--size-qr-box);height:var(--size-qr-box);border-radius:var(--radius-sm);background:var(--color-surface);
  border:1px solid var(--color-border);display:grid;place-items:center;color:var(--slate-400);flex:none;}
.qr-box .icon{--size-icon:var(--size-icon-qr);}
.invite__t{font:700 var(--text-sm)/1.2 var(--font-body);color:var(--color-text);}
.invite__d{font:var(--text-xs)/1.4 var(--font-body);color:var(--color-muted);margin:var(--space-05) 0 var(--space-2);}
.invite__link{display:flex;gap:var(--space-2);align-items:center;}
.invite__link .field{flex:1;}

/* ── расписание дней (сеансы, без заданий) ── */
.sched{display:flex;flex-direction:column;}
.day{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);
  border-radius:var(--radius-md);border:1px solid transparent;}
.day + .day{margin-top:var(--space-05);}
.day__n{width:var(--size-badge-sm);height:var(--size-badge-sm);border-radius:var(--radius-pill);display:grid;place-items:center;flex:none;
  background:var(--color-surface-2);color:var(--color-muted);font:800 var(--text-xs)/1 var(--font-body);}
.day__n .icon{--size-icon:var(--space-3);}
.day__body{flex:1;min-width:0;}
.day__title{font:600 var(--text-sm)/1.2 var(--font-body);color:var(--color-text);}
.day__meta{font:var(--text-xs)/1.2 var(--font-body);color:var(--color-muted);}
.day.is-done .day__n{background:var(--color-success);color:var(--color-on-accent);}
.day.is-current{background:var(--color-accent-weak);border-color:color-mix(in oklab, var(--color-accent) 30%, transparent);}
.day.is-current .day__n{background:var(--color-accent);color:var(--color-on-accent);}
.day.is-todo{opacity:.62;}

/* ── футер действия (билет: роль + одно крупное действие) ── */
.poster__action{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);
  background:var(--color-surface);display:flex;flex-direction:column;gap:var(--space-2);}
.myrole{display:flex;align-items:center;gap:var(--space-2);font:var(--text-sm)/1.2 var(--font-body);color:var(--color-muted);}
.myrole b{color:var(--color-text);font-weight:700;}
.myrole .rb{display:inline-grid;place-items:center;width:var(--space-6);height:var(--space-6);border-radius:var(--radius-pill);
  background:var(--color-accent-weak);color:var(--color-accent-active);flex:none;}
.myrole .rb .icon{--size-icon:var(--space-4);}
.act-row{display:flex;gap:var(--space-2);align-items:center;}
.act-row .spacer{flex:1;}
.act-note{font:var(--text-xs)/1.2 var(--font-body);color:var(--color-muted);text-align:center;}