/* Компоненты нового просмотра. Геометрию композиции задают исходные CSS В. */
:root { font-family: var(--font-text); }
body { color: var(--ink); background: var(--canvas); }
.studio, .prototype-note, .platform-header, .panel, .button,
.state-picker select, .close-dialog, .studio-details > summary { background: var(--paper); }
.button, .state-picker select, .answer-option, .lab-input { border-color: var(--control-line); }
.button { border-radius: var(--radius-control); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) {
  .button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
  .button:not(.primary):hover:not(:disabled), .nav-button:hover,
  .area-choice:hover, .projection-switch button:hover { background: var(--surface-hover); }
  .text-button:hover, .section-link:hover { color: var(--accent); }
  .answer-option:hover { background: var(--surface-hover); }
  .lab-input:hover { border-color: var(--ink); }
}
.button.primary:is(:active, [data-demo-state="pressed"]):not(:disabled) { background: var(--accent-active); border-color: var(--accent-active); }
.button.primary[data-demo-state="hover"] { background: var(--accent-hover); border-color: var(--accent-hover); }
.button:not(.primary):is(:active, [data-demo-state="pressed"]):not(:disabled) { background: var(--selected); border-color: var(--ink); }
.button:not(.primary)[data-demo-state="hover"] { background: var(--surface-hover); }
.projection-switch button[aria-pressed="true"], .nav-button[aria-current="page"] {
  background: var(--selected); color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -2px var(--accent);
}
.projection-switch button:active { background: var(--selected); }
.current-work { border-top-color: var(--accent); }
.progress-track span { background: var(--muted); }
.progress-summary strong, .section-stats { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.save-status::before { color: var(--ink); }
.sector-fill { fill: var(--surface-hover); stroke: var(--paper); }
.sector-hit[aria-pressed="true"] .sector-fill { fill: var(--selected); stroke: var(--paper); }
.sector-hit[aria-pressed="true"] .sector-number { fill: var(--ink); }
/* Внутренние контуры не перекрываются соседями при любом порядке SVG. */
.sector-contour { fill: none; stroke: var(--accent); stroke-width: var(--sector-contour-width); stroke-linejoin: round; visibility: hidden; pointer-events: none; }
@media (hover: hover) {
  .sector-hit:hover .sector-fill { fill: var(--sector-hover); }
  .sector-hit:hover .sector-contour { visibility: visible; stroke-dasharray: 4 3; }
}
.sector-hit[aria-pressed="true"] .sector-contour { visibility: visible; stroke-dasharray: none; }
.sector-hit:active .sector-fill { fill: var(--selected); }
/* SVG-группа получает нативный outline и от мыши; заменяем его только здесь. */
.sector-hit:focus, .sector-hit:focus-visible { outline: none; }
.sector-hit:focus-visible .sector-fill { fill: var(--surface-hover); stroke: var(--paper); stroke-width: 3px; }
.sector-hit[aria-pressed="true"]:focus-visible .sector-fill { fill: var(--selected); stroke: var(--paper); }
.sector-focus-ring { fill: none; stroke: var(--ink); stroke-width: var(--sector-focus-width); vector-effect: non-scaling-stroke; visibility: hidden; pointer-events: none; }
.sector-hit:focus-visible .sector-focus-ring { visibility: visible; }
.area-choice[aria-pressed="true"] { background: var(--selected); border-color: var(--control-line); box-shadow: inset 2px 0 var(--accent); }
.area-choice[aria-pressed="true"] .area-index { background: transparent; border-color: var(--accent); color: var(--ink); }
.area-choice:active { background: var(--selected); }
.answer-option:has(input:checked) { border-color: var(--control-line); background: var(--selected); box-shadow: inset 2px 0 var(--accent); }
.answer-option input { accent-color: var(--accent); }
dialog { color: var(--ink); background: var(--paper); border-radius: var(--radius-dialog); box-shadow: 0 20px 80px var(--dialog-shadow); }
dialog::backdrop { background: var(--backdrop); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible,
summary:focus-visible, .studio-details > summary:focus-visible, [data-demo-state="focus"] {
  outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset);
}
.skip-link { background: var(--selected); color: var(--ink); }
.page-loading-error { border-color: var(--control-line); }
.status-banner { border-color: var(--control-line); }
button:disabled, .button.primary:disabled {
  opacity: 1; color: var(--muted); background: var(--canvas); border-color: var(--control-line); box-shadow: none; cursor: default;
}
::selection { background: var(--selected); color: var(--ink); }
.button, .nav-button, .text-button, .section-link, .area-choice, .projection-switch button, .answer-option, .lab-input {
  transition: background-color var(--motion-control) var(--motion-ease), border-color var(--motion-control) var(--motion-ease), color var(--motion-control) var(--motion-ease);
}
.sector-fill { transition: fill var(--motion-control) var(--motion-ease); }
/* Второй вид движения: только появление диалога. Закрытие и фокус — сразу. */
dialog[open], dialog[open]::backdrop { animation: dialog-appear var(--motion-dialog) var(--motion-ease); }
@keyframes dialog-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog::backdrop { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}