:root {
  --sun-capsule-height: 36px;
  --sun-round-button-size: 30px;
  --sun-modal-close-size: 28px;
  --sun-header-height: 40px;
  --sun-header-edge-button-size: 40px;
  --sun-header-font-size: clamp(20px, 2vw, 28px);
  --sun-left-menu-width: 300px;
  --sun-left-menu-compact-width: 58px;
}

/* Only the outer modal surface is flat; inner SUN controls keep their relief. */
dialog,
[role="dialog"],
[aria-modal="true"] {
  box-shadow: none !important;
}

/* Единая геометрия основных капсул SUN. Круглые кнопки и ячейки таблиц
   намеренно не входят в этот список. */
.menu-section > summary,
.segmented-control button,
.zodiac-palette-trigger,
.zodiac-palette-menu button,
.sun-action-button,
.sun-secondary-button,
.object-setting-choice select,
.setting-picker-trigger,
.setting-picker-menu button,
.theme-picker-trigger,
.theme-picker-menu button,
.theme-choice button,
.profile-folder-select select,
.profile-folder-item,
.profile-preference-field select,
.profile-preference-field .setting-picker-trigger,
.natal-now-button,
.natal-tool-section summary,
.natal-tool-tabs button,
.natal-tool-toggle:not(.is-symbol-only),
.natal-static-field,
.natal-tool-link,
.settings-nav a,
.settings-field input,
.settings-field select,
.settings-field .setting-picker-trigger,
.settings-ruler-row .setting-picker-trigger,
.settings-ruler-row .setting-picker-menu button,
.settings-city-suggestion,
.settings-city-save,
.settings-secondary-button,
.settings-map-search-row input,
.settings-map-search-row .sun-action-button,
.settings-map-summary,
.settings-map-cancel,
.settings-map-actions .sun-action-button,
.settings-ruler-select,
.settings-aspect-toolbar .setting-picker-trigger,
.settings-aspect-mode,
.graph-field input,
.sun-date-picker-today,
.graph-choice-row button,
.graph-aspect-buttons button,
.graph-objects summary,
.graph-settings-link,
.aspect-graph-submit,
.database-actions .sun-action-button,
.database-filters button,
.database-table select,
.database-row-actions button,
.database-dialog-fields input,
.sun-database-dialog footer button,
.login-field input,
.login-primary,
.sun-chart-field input,
.sun-chart-field select,
.sun-chart-toggle,
.sun-chart-map-search input,
.sun-chart-city-suggestions button,
.sun-chart-editor-actions button {
  height: var(--sun-capsule-height);
  min-height: var(--sun-capsule-height);
  max-height: var(--sun-capsule-height);
  box-sizing: border-box;
}

.menu-section > summary,
.segmented-control button,
.zodiac-palette-trigger,
.zodiac-palette-menu button,
.sun-action-button,
.sun-secondary-button,
.setting-picker-trigger,
.setting-picker-menu button,
.theme-picker-trigger,
.theme-picker-menu button,
.theme-choice button,
.profile-folder-item,
.natal-now-button,
.natal-tool-section summary,
.natal-tool-tabs button,
.natal-tool-toggle:not(.is-symbol-only),
.natal-static-field,
.natal-tool-link,
.settings-nav a,
.settings-field input,
.settings-field select,
.settings-field .setting-picker-trigger,
.settings-city-suggestion,
.settings-map-summary,
.settings-aspect-mode,
.graph-choice-row button,
.graph-aspect-buttons button,
.graph-objects summary,
.graph-settings-link,
.database-filters button,
.database-row-actions button,
.sun-database-dialog footer button,
.sun-chart-city-suggestions button,
.sun-chart-toggle,
.sun-chart-editor-actions button {
  display: flex;
  align-items: center;
}

.segmented-control button,
.sun-action-button,
.sun-secondary-button,
.natal-now-button,
.natal-tool-tabs button,
.natal-tool-toggle:not(.is-symbol-only),
.natal-tool-link,
.settings-nav a,
.settings-aspect-mode,
.graph-choice-row button,
.graph-aspect-buttons button,
.graph-settings-link,
.database-filters button,
.database-row-actions button,
.sun-database-dialog footer button,
.sun-chart-editor-actions button {
  justify-content: center;
}

/* Круглые управляющие кнопки используют единую базовую геометрию 30 px.
   Ячейки таблицы орбисов и блок баллов намеренно не затрагиваются. */
.round-button,
.profile-drawer-close,
.natal-edit-button,
.natal-now-icon-button,
.natal-tools-trigger,
.natal-tools-close,
.settings-location-button,
.sun-chart-location-button,
.settings-map-close,
.sun-date-picker-nav,
.database-dialog-close,
#database-dialog-close,
.sun-chart-editor-close,
.sun-chart-map-close,
.sun-chart-database-button {
  width: var(--sun-round-button-size);
  min-width: var(--sun-round-button-size);
  max-width: var(--sun-round-button-size);
  height: var(--sun-round-button-size);
  min-height: var(--sun-round-button-size);
  max-height: var(--sun-round-button-size);
  box-sizing: border-box;
}

.round-button img,
.natal-edit-button img,
.natal-now-icon-button img,
.natal-tools-trigger img {
  width: 20px;
  height: 20px;
}

/* Геолокация в настройках остаётся объёмной. */
.settings-location-button,
.sun-chart-location-button {
  padding: 0;
  place-items: center;
  background: var(--raised-control-fill);
  box-shadow: var(--control-raised-shadow);
}

.settings-location-button img,
.sun-chart-location-button img {
  display: block;
  width: 20px;
  height: 20px;
  margin: auto;
}

/* Крестики одинакового размера и всегда являются вырезом. */
#sun-menu-close,
#sun-global-close,
.profile-drawer-close,
.natal-tools-close,
.settings-map-close,
#database-dialog-close,
.sun-chart-editor-close,
.sun-chart-map-close,
.sun-chart-database-picker > header button {
  width: var(--sun-modal-close-size);
  min-width: var(--sun-modal-close-size);
  max-width: var(--sun-modal-close-size);
  height: var(--sun-modal-close-size);
  min-height: var(--sun-modal-close-size);
  max-height: var(--sun-modal-close-size);
  padding: 0 0 2px;
  color: var(--text);
  background: var(--cut-control-fill);
  box-shadow: var(--control-inset-shadow);
  font: 600 18px/1 "Oswald", sans-serif;
}

/* В редакторе карты кнопки локации и базы являются вырезами. */
.sun-chart-location-button,
.sun-chart-database-button {
  padding: 0;
  place-items: center;
  background: var(--cut-control-fill);
  box-shadow: var(--control-inset-shadow);
}

.sun-chart-database-button img {
  display: block;
  width: 20px;
  height: 20px;
  margin: auto;
}

.topbar {
  grid-template-columns: var(--sun-header-edge-button-size) minmax(0, 1fr) var(--sun-header-edge-button-size);
  gap: 10px;
}

/* Поле заголовка и крайние кнопки — 40 px; внутренние действия — 30 px. */
.topbar-track {
  height: var(--sun-header-height);
  min-height: var(--sun-header-height);
  max-height: var(--sun-header-height);
}

.topbar > .round-button {
  width: var(--sun-header-edge-button-size);
  min-width: var(--sun-header-edge-button-size);
  max-width: var(--sun-header-edge-button-size);
  height: var(--sun-header-edge-button-size);
  min-height: var(--sun-header-edge-button-size);
  max-height: var(--sun-header-edge-button-size);
  align-self: center;
}

.topbar > .round-button img {
  width: 20px;
  height: 20px;
}

.topbar-track h1,
.natal-chart-copy strong {
  font-size: var(--sun-header-font-size);
}

.sun-title-actions {
  gap: clamp(8px, 1vw, 14px);
  padding-right: 10px;
}

.sun-title-actions h1 {
  flex: 0 1 auto;
}

.sun-title-actions .natal-edit-button,
.sun-title-actions .natal-now-icon-button,
.sun-title-actions .natal-tools-trigger {
  display: grid;
  width: var(--sun-round-button-size);
  min-width: var(--sun-round-button-size);
  max-width: var(--sun-round-button-size);
  height: var(--sun-round-button-size);
  min-height: var(--sun-round-button-size);
  max-height: var(--sun-round-button-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  color: var(--text);
  background: var(--surface-deep);
  box-shadow: var(--figma-deep-shadow);
  cursor: pointer;
}

.sun-title-actions .natal-edit-button:active,
.sun-title-actions .natal-now-icon-button:active,
.sun-title-actions .natal-tools-trigger:active {
  box-shadow: var(--figma-deep-shadow);
}

.sun-title-actions .natal-edit-button img,
.sun-title-actions .natal-now-icon-button img,
.sun-title-actions .natal-tools-trigger img {
  display: none;
}

/* Верхние значки не используют цветовые фильтры: маска всегда берёт
   точный цвет текста текущей темы. */
.topbar .back-button img,
.topbar .profile-button img {
  display: none;
}

.topbar .back-button::before,
.topbar .profile-button::before,
.sun-title-actions .natal-edit-button::before,
.sun-title-actions .natal-now-icon-button::before,
.sun-title-actions .natal-tools-trigger::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.topbar .back-button::before {
  width: 20px;
  height: 20px;
  -webkit-mask-image: url("/icons/back-arrow.svg?v=2026.08.22-forecast-952");
  mask-image: url("/icons/back-arrow.svg?v=2026.08.22-forecast-952");
}

.topbar #index-menu-button::before {
  -webkit-mask-image: url("/icons/menu.svg?v=2026.08.22-forecast-952");
  mask-image: url("/icons/menu.svg?v=2026.08.22-forecast-952");
}

.topbar .profile-button::before {
  width: 20px;
  height: 20px;
  -webkit-mask-image: url("/icons/account.svg?v=2026.08.22-forecast-952");
  mask-image: url("/icons/account.svg?v=2026.08.22-forecast-952");
}

.sun-title-actions .natal-edit-button::before {
  -webkit-mask-image: url("/icons/plus.svg?v=2026.08.22-forecast-952");
  mask-image: url("/icons/plus.svg?v=2026.08.22-forecast-952");
}

/* Полный редактор использует знак редактирования; компактный редактор второй карты — плюс. */
.sun-title-actions #natal-edit-trigger::before,
.sun-title-actions #aspect-graph-edit-trigger::before {
  -webkit-mask-image: url("/icons/natal.svg?v=2026.08.22-forecast-952");
  mask-image: url("/icons/natal.svg?v=2026.08.22-forecast-952");
}

body.is-synastry-page .sun-title-actions #forecast-secondary-edit-trigger::before {
  -webkit-mask-image:url("/icons/natal.svg?v=2026.08.22-forecast-952");
  mask-image:url("/icons/natal.svg?v=2026.08.22-forecast-952");
}

.sun-title-actions .natal-now-icon-button::before {
  -webkit-mask-image: url("/icons/now.svg?v=2026.08.22-forecast-952");
  mask-image: url("/icons/now.svg?v=2026.08.22-forecast-952");
}

.sun-title-actions .natal-tools-trigger::before {
  -webkit-mask-image: url("/icons/star.svg?v=2026.08.22-forecast-952");
  mask-image: url("/icons/star.svg?v=2026.08.22-forecast-952");
}

.sun-title-actions .natal-reading-trigger::before {
  -webkit-mask-image: url("/icons/interpretations.svg?v=2026.08.22-forecast-952");
  mask-image: url("/icons/interpretations.svg?v=2026.08.22-forecast-952");
}

.sun-title-actions .natal-partnership-trigger::before {
  -webkit-mask-image: url("/icons/partnership.svg?v=2026.08.22-forecast-952");
  mask-image: url("/icons/partnership.svg?v=2026.08.22-forecast-952");
}

.sun-title-actions .natal-career-trigger::before {
  -webkit-mask-image: url("/icons/career-guidance.svg?v=2026.08.22-forecast-952");
  mask-image: url("/icons/career-guidance.svg?v=2026.08.22-forecast-952");
}

/* Поле карты занимает ту же ширину, что и верхняя строка. Открытая правая
   панель меняет только рабочую область под заголовком и не двигает профиль. */
.natal-content {
  padding-inline: 0;
}

body.natal-tools-open .index-shell {
  padding-right: clamp(18px, 2vw, 30px);
}

body.natal-tools-open .index-content {
  margin-right: calc(var(--natal-tools-panel-width) + var(--natal-tools-panel-gap));
  transition: margin-right .22s ease;
}

.natal-tools-drawer {
  top: calc(clamp(18px, 2vw, 30px) + var(--sun-header-height) + 5px);
  right: clamp(18px, 2vw, 30px);
  bottom: clamp(6px, .7vw, 10px);
}

/* Левое меню: основные значки и строки 36 px. Три служебные кнопки 22 px
   остаются без изменения. */
.sun-main-menu {
  width: min(var(--sun-left-menu-width), calc(100vw - 18px));
  padding: 18px 12px;
}

.sun-main-menu-list {
  gap: 10px;
  padding-inline: 0;
}

.sun-menu-link,
.sun-menu-group-button {
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 36px;
  font-size: 16px;
}

.sun-menu-symbol,
.sun-menu-group-items .sun-menu-symbol {
  flex-basis: 36px;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  font-size: 20px;
}

.sun-menu-symbol img,
.sun-menu-group-items .sun-menu-symbol img {
  width: 22px;
  height: 22px;
}

.sun-menu-group {
  gap: 8px;
}

.sun-menu-group-button {
  grid-template-columns: 46px minmax(0, 1fr);
}

.sun-menu-group-button::before {
  inset: 0 0 0 46px;
}

.sun-menu-group-button .sun-menu-text,
.sun-menu-link .sun-menu-text,
.sun-menu-group-items a .sun-menu-text {
  min-height: 36px;
  padding: 5px 14px;
}

.sun-menu-group-items {
  gap: 8px;
  padding: 0 8px;
}

.sun-menu-group-items a {
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 36px;
  font-size: 15px;
}

.sun-main-menu.is-compact {
  width: var(--sun-left-menu-compact-width);
  padding: 10px 4px;
}

.sun-main-menu.is-compact .sun-menu-controls {
  gap: 5px;
  margin-bottom: 10px;
}

.sun-main-menu.is-compact .sun-menu-control {
  flex-basis: 22px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
}

.sun-main-menu.is-compact .sun-menu-control img {
  width: 13px;
  height: 13px;
}

.sun-main-menu.is-compact .sun-main-menu-list {
  gap: 12px;
}

.sun-main-menu.is-compact .sun-menu-link,
.sun-main-menu.is-compact .sun-menu-group-button,
.sun-main-menu.is-compact .sun-menu-group-items a {
  grid-template-columns: 36px;
  min-height: 36px;
}

.sun-main-menu.is-compact .sun-menu-symbol {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  font-size: 20px;
}

.sun-main-menu.is-compact .sun-menu-symbol img {
  width: 22px;
  height: 22px;
}

body.sun-menu-pinned .index-shell {
  width: calc(100% - var(--sun-left-menu-width));
  margin-left: var(--sun-left-menu-width);
}

body.sun-menu-pinned.sun-menu-compact .index-shell,
body.sun-global-menu-pinned .app-shell:not(.index-shell),
body.sun-global-menu-pinned .login-layout {
  width: calc(100% - var(--sun-left-menu-compact-width));
  margin-left: var(--sun-left-menu-compact-width);
}

/* Единый стиль всех раскрывающихся списков SUN: поле объёмное, панель
   светлая, объём есть только у выбранного пункта. */
body .setting-picker-trigger,
body .setting-picker.is-open .setting-picker-trigger,
body[data-relief-mode="2"] .setting-picker-trigger {
  color: var(--text);
  background: var(--raised-control-fill);
  box-shadow: var(--control-raised-shadow);
  outline: 0;
}

/* Во всех состояниях общей модалки карты списки остаются вырезами. */
body .sun-chart-editor .sun-chart-field .setting-picker-trigger,
body .sun-chart-editor .sun-chart-field .setting-picker.is-open .setting-picker-trigger {
  background: var(--cut-control-fill);
  box-shadow: var(--control-inset-shadow);
}

body .setting-picker-menu {
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, var(--surface-deep) 50%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--background) 30%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

/* Все раскрывающиеся панели повторяют стеклянные подсказки: сама панель
   полупрозрачная с тонкой обводкой, обычные строки плоские. Это исключает
   сложение темных теней панели и каждой строки. */
body .theme-picker-menu,
body .zodiac-palette-menu,
body .sun-chart-city-suggestions,
body .settings-city-suggestions,
body .forecast-city-suggestions {
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, var(--surface-deep) 50%, transparent) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--background) 30%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

body .profile-preference-field .setting-picker-menu,
body .sun-chart-editor .sun-chart-city-suggestions,
body .settings-city-field .settings-city-suggestions,
body .forecast-field .forecast-city-suggestions {
  width: min(420px, calc(100vw - 24px));
  max-width: none;
  background: color-mix(in srgb, var(--surface-deep) 50%, transparent) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--background) 30%, transparent) !important;
}

body .settings-city-field .settings-city-suggestions,
body .forecast-field .forecast-city-suggestions {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

body .city-results,
body .event-city-results,
body .year-city-results {
  left: 50%;
  right: auto;
  width: min(420px, calc(100vw - 24px));
  max-width: none;
  transform: translateX(-50%);
}

body .theme-picker-menu button,
body .zodiac-palette-menu button,
body .sun-chart-city-suggestions button,
body .settings-city-suggestions button,
body .forecast-city-suggestions button {
  color: var(--text);
  background: transparent;
  box-shadow: none;
}

body .theme-picker-menu button.is-selected,
body .zodiac-palette-menu button.is-selected,
body .sun-chart-city-suggestions button.is-active,
body .settings-city-suggestions button.is-active,
body .forecast-city-suggestions button.is-active {
  color: var(--text);
  background: var(--raised-control-fill);
  box-shadow: var(--control-raised-shadow);
}

body .setting-picker-menu button,
body .setting-picker-menu button:focus,
body .setting-picker-menu button:focus-visible {
  color: var(--text);
  background: transparent;
  box-shadow: none;
  outline: 0;
}

body .setting-picker-menu button.is-selected,
body .setting-picker-menu button.is-selected:focus,
body .setting-picker-menu button.is-selected:focus-visible {
  color: var(--text);
  background: var(--raised-control-fill);
  box-shadow: var(--control-raised-shadow);
  outline: 0;
}

/* Два списка орбисов являются вырезами. Правило находится после общего
   объёмного стиля списков, чтобы он больше не мог переопределить их. */
body #settings-aspect-preset + .setting-picker .setting-picker-trigger,
body #settings-aspect-preset + .setting-picker.is-open .setting-picker-trigger,
body #settings-orb-combine + .setting-picker .setting-picker-trigger,
body #settings-orb-combine + .setting-picker.is-open .setting-picker-trigger {
  background: var(--cut-control-fill);
  box-shadow: var(--control-inset-shadow);
}

/* В управителях знаков выбранные планеты — объёмные акцентные поля. */
body .settings-ruler-row .setting-picker-trigger,
body .settings-ruler-row .setting-picker.is-open .setting-picker-trigger {
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: var(--control-raised-shadow);
}

/* В открытом списке только выбранный пункт объёмный; сама панель плоская. */
body .settings-ruler-row .setting-picker-menu button.is-selected,
body .settings-ruler-row .setting-picker-menu button.is-selected:focus,
body .settings-ruler-row .setting-picker-menu button.is-selected:focus-visible {
  color: var(--text);
  background: var(--raised-control-fill);
  box-shadow: var(--control-raised-shadow);
  outline: 0;
  transition: none;
}

/* SUN-952: общая шапка не является отдельным вырезом. Поверхность страницы
   остаётся цельной, а объём сохраняют только реальные управляющие кнопки и
   поля с данными. Это правило применяется одинаково к главным и внутренним
   страницам, включая компактную шапку прогнозных карт. */
.topbar-track,
.topbar > .topbar-track,
.topbar > .natal-title-track {
  align-items: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topbar-track h1,
.topbar-track :is(time, input, select, span, button, a) {
  align-self: center;
}

.topbar-track h1 {
  line-height: 1.14 !important;
  transform: none !important;
}

.topbar-track :is(.forecast-base-meta, .forecast-secondary-meta) {
  align-items: center !important;
}

.topbar-track :is(.forecast-base-meta, .forecast-secondary-meta) > :is(time, span, input) {
  align-self: center !important;
  line-height: 1 !important;
}

.topbar :is(
  .round-button,
  .natal-edit-button,
  .natal-now-icon-button,
  .natal-tools-trigger,
  .direction-aspects-trigger,
  .forecast-database-trigger,
  .forecast-secondary-now-trigger,
  .forecast-settings-trigger,
  .directions-panel-width-trigger,
  .forecast-calculate,
  .forecast-view-modes button
) {
  background: var(--raised-control-fill) !important;
  box-shadow: var(--control-raised-shadow) !important;
}

.topbar :is(
  .round-button,
  .natal-edit-button,
  .natal-now-icon-button,
  .natal-tools-trigger,
  .direction-aspects-trigger,
  .forecast-database-trigger,
  .forecast-secondary-now-trigger,
  .forecast-settings-trigger,
  .directions-panel-width-trigger,
  .forecast-calculate,
  .forecast-view-modes button
):active {
  box-shadow: var(--control-inset-shadow) !important;
}

/* В Дирекциях и Прогрессиях вторую дату редактирует одно inline-поле. Старая
   подпись времени не должна одновременно занимать ту же строку. */
body.sun-index-natal-layout:is(.is-directions-page, .is-progressions-page)
  .forecast-secondary-meta > :is(time, span) {
  display: none !important;
}

body.sun-index-natal-layout:is(.is-directions-page, .is-progressions-page)
  .forecast-secondary-meta > .forecast-secondary-inline-datetime:not([hidden]) {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box;
  line-height: 1 !important;
}

/* В компактной шапке старое правило имеет более высокую специфичность и
   возвращает подпись времени для Прогрессий. Перекрываем только этот
   конфликтный слой: в строке остаётся одно редактируемое поле даты. */
body.sun-index-natal-layout.sun-compact-chart-header:is(.is-directions-page, .is-progressions-page)
  .natal-title-track > .forecast-secondary-meta > :is(time, span) {
  display: none !important;
}

body.sun-index-natal-layout.sun-compact-chart-header:is(.is-directions-page, .is-progressions-page)
  .natal-title-track > .forecast-secondary-meta > .forecast-secondary-inline-datetime:not([hidden]) {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.direction-aspects-panel {
  scroll-margin-top: 16px;
}

/* Общая геометрия: верхняя панель остаётся плоской, а отдельные
   управляющие кнопки на ней всегда объёмные. */
.topbar-track {
  background: transparent !important;
  box-shadow: none !important;
}

.topbar > .round-button,
.sun-title-actions .natal-edit-button,
.sun-title-actions .natal-now-icon-button,
.sun-title-actions .natal-tools-trigger {
  background: var(--raised-control-fill);
  box-shadow: var(--control-raised-shadow);
}

/* Сегменты заканчиваются настоящим полукругом без квадратного артефакта. */
.segmented-control button {
  overflow: hidden;
  border-radius: 999px;
  isolation: isolate;
}

/* Переключатель типа карты всегда остаётся первым и видимым при прокрутке
   раскрытых разделов оформления. Капсулы не обрезаются контейнером: каждая
   кнопка сама ограничивает собственную заливку своим полукругом. */
.menu-section-mode {
  position: sticky;
  top: 0;
  z-index: 12;
  flex: none;
  padding-block: 5px;
  overflow: visible;
  border-radius: 0;
  background: var(--background);
}

/* Oswald имеет длинные нижние выносные элементы. Не обрезаем р/у/д в
   ограниченных по высоте заголовках, кнопках, полях и пунктах списков. */
.topbar-track h1 {
  line-height: 1.14;
  transform: none;
}

body button,
body input,
body select,
body textarea,
body summary,
body .setting-picker-menu button {
  line-height: 1.14;
}

/* Левое меню остаётся на светлой поверхности темы. Все его управляющие
   элементы — вырезы, а не объёмные кнопки. */
.sun-main-menu {
  background: var(--surface-light);
  box-shadow: none;
  border-radius: 0;
}

#sun-menu-close,
#sun-global-close {
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  padding: 0;
  font-size: 14px;
}

body:is(.sun-menu-pinned, .sun-global-menu-pinned) .app-shell {
  padding-left: 8px;
}

.sun-main-menu :is(button, a):hover,
.sun-main-menu :is(button, a):focus,
.sun-main-menu :is(button, a):focus-visible {
  outline: none;
}

.sun-menu-control,
.sun-menu-symbol,
.sun-menu-link .sun-menu-text,
.sun-menu-group-items a .sun-menu-text,
.sun-menu-group-button::before {
  background: var(--cut-control-fill);
  box-shadow: var(--control-inset-shadow);
}

.sun-menu-control[aria-pressed="true"],
.sun-menu-link.is-active .sun-menu-symbol,
.sun-menu-group-items a.is-active .sun-menu-symbol,
.sun-menu-group-items a[aria-current="page"] .sun-menu-symbol,
.sun-menu-group-items a.is-active .sun-menu-text,
.sun-menu-group-items a[aria-current="page"] .sun-menu-text {
  background: var(--accent);
  box-shadow: var(--control-inset-shadow);
  color: var(--accent-text);
}

@media (max-width: 1024px) {
  :root {
    --sun-header-height: 40px;
    --sun-header-edge-button-size: 40px;
    --sun-round-button-size: 36px;
  }

  .topbar {
    align-items: start;
  }

  .topbar > .round-button,
  .topbar-track {
    transform: translateY(-2px);
  }

  .topbar .back-button::before,
  .topbar .profile-button::before {
    width: 17px;
    height: 17px;
  }

  body.natal-tools-open .index-shell { padding-right: 0; }
  body.natal-tools-open .index-content { margin-right: 0; }
  .natal-tools-drawer { inset: auto; }
}

@media (max-width: 600px) {
  :root {
    --sun-header-height: 40px;
    --sun-header-edge-button-size: 40px;
    --sun-round-button-size: 36px;
    --sun-header-font-size: 17px;
  }

  .topbar > .round-button img { width: 20px; height: 20px; }

  .sun-title-actions .natal-edit-button,
  .sun-title-actions .natal-now-icon-button,
  .sun-title-actions .natal-tools-trigger {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
  }

  .sun-title-actions .natal-edit-button::before,
  .sun-title-actions .natal-now-icon-button::before,
  .sun-title-actions .natal-tools-trigger::before {
    width: 20px;
    height: 20px;
  }

  .natal-content {
    padding-inline: 0;
  }

  .natal-tools-drawer {
    inset: auto;
  }

  body.sun-menu-pinned .index-shell,
  body.sun-menu-pinned.sun-menu-compact .index-shell {
    width: 100%;
    margin-left: 0;
    padding-left: clamp(18px, 2vw, 30px);
  }
}

@media (max-width: 520px) {
  body.natal-tools-open .index-content {
    margin-right: 0;
  }
}

/* В оформлении уменьшаем только вертикальные интервалы, не меняя порядок. */
.workspace .control-panel {
  gap: 8px;
  font-size: 14px;
}

.workspace .menu-section > summary {
  font-size: 17px;
}

.workspace .menu-section-body {
  margin-top: 4px;
  padding-top: 10px;
  padding-bottom: 12px;
}

.workspace .map-color-settings,
.workspace .zodiac-ring-colors,
.workspace .zodiac-ring-color-heading {
  margin-top: 12px;
}

/* Вопросительный курсор не используется в интерфейсе SUN. */
[data-tooltip-kind],
[data-tooltip],
[aria-describedby] {
  cursor: default;
}

/* В компактном профиле крестик остаётся 18 px, но сохраняет рельеф выреза. */
.profile-drawer {
  width: min(390px, 94vw);
  font-size: 14px;
}

.profile-drawer-header {
  min-height: 54px;
  padding: 10px 14px;
}

.profile-drawer-header h2 {
  font-size: 20px;
}

.profile-drawer-section h3 {
  font-size: 16px;
}

.profile-drawer-close {
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  padding: 0 0 2px;
  background: var(--cut-control-fill);
  box-shadow: var(--control-inset-shadow);
  font-size: 16px;
}

/* Поля внутри вырезанной карточки профиля остаются объёмными в обоих режимах. */
body .profile-preference-field .setting-picker-trigger,
body .profile-preference-field .setting-picker.is-open .setting-picker-trigger {
  background: var(--raised-control-fill);
  box-shadow: var(--control-raised-shadow);
}

/* Оформление: перечисленные пользователем поля режима 2 являются вырезами.
   Геометрия общих списков не меняется. */
body #design-configuration-select + .setting-picker .setting-picker-trigger,
body #design-configuration-select + .setting-picker.is-open .setting-picker-trigger,
body .object-setting-choice [data-display-setting="secondaryRingPosition"] + .setting-picker .setting-picker-trigger,
body .object-setting-choice [data-display-setting="secondaryRingPosition"] + .setting-picker.is-open .setting-picker-trigger,
body .object-setting-choice [data-cusp-setting="lineStyle"] + .setting-picker .setting-picker-trigger,
body .object-setting-choice [data-cusp-setting="lineStyle"] + .setting-picker.is-open .setting-picker-trigger,
body .object-setting-choice [data-cusp-setting="secondaryLineStyle"] + .setting-picker .setting-picker-trigger,
body .object-setting-choice [data-cusp-setting="secondaryLineStyle"] + .setting-picker.is-open .setting-picker-trigger {
  background: var(--cut-control-fill);
  box-shadow: var(--control-inset-shadow);
}

body .theme-picker-trigger,
body .theme-picker.is-open .theme-picker-trigger,
body .zodiac-palette-trigger,
body .zodiac-palette-trigger[aria-expanded="true"] {
  background: var(--cut-control-fill);
  box-shadow: var(--control-inset-shadow);
}

body .theme-picker-menu button.is-selected,
body .zodiac-palette-menu button.is-selected {
  color: var(--text);
  background: var(--raised-control-fill);
  box-shadow: var(--control-raised-shadow);
}

body .profile-save-chart {
  display: none;
}

/* Selected rows in every dropdown keep only a white outline: no glass fill. */
body .setting-picker-menu button.is-selected,
body .setting-picker-menu button.is-selected:focus,
body .setting-picker-menu button.is-selected:focus-visible,
body .theme-picker-menu button.is-selected,
body .zodiac-palette-menu button.is-selected,
body .sun-chart-city-suggestions button.is-active,
body .settings-city-suggestions button.is-active,
body .forecast-city-suggestions button.is-active {
  color: var(--text);
  background: transparent;
  box-shadow: none;
  outline: 1px solid var(--text);
  outline-offset: -1px;
  opacity: 1;
}

body .profile-release {
  display: block;
}

body .apply-object-colors-toggle {
  grid-template-columns: max-content 18px;
  justify-content: start;
  gap: 8px;
}

body .design-configuration-name input {
  height: var(--sun-capsule-height);
  min-height: var(--sun-capsule-height);
  padding-block: 0;
}

/* SUN-952: компактные шапки карт не получают внешнюю подложку от
   переиспользованной панели. Две реальные даты Прогрессий и Дирекций
   выравниваются по одной вертикальной оси. */
body.sun-index-natal-layout .topbar > .natal-title-track,
body.sun-index-natal-layout .natal-tools-drawer > .natal-title-track {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width:1024px) {
  body.sun-index-natal-layout.sun-compact-chart-header:is(.is-directions-page, .is-progressions-page)
  .natal-title-track > .forecast-base-meta > time {
    display: flex !important;
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    padding-block: 0 !important;
    align-items: center !important;
    line-height: 1 !important;
  }

body.sun-index-natal-layout.sun-compact-chart-header:is(.is-directions-page, .is-progressions-page)
  .natal-title-track > .forecast-secondary-meta > .forecast-secondary-inline-datetime:not([hidden]) {
  display: block !important;
  box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    padding-block: 0 !important;
    line-height: normal !important;
  }

  /* На телефоне и планшете закреплённое левое меню накладывается на страницу,
     но не резервирует для себя постоянную колонку. */
  body:is(.sun-menu-pinned, .sun-global-menu-pinned) .app-shell,
  body:is(.sun-menu-pinned, .sun-global-menu-pinned) .login-layout {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* SUN-952: the aspect-period tables are part of the document flow.  On wide
   screens an earlier fixed-height chart layout trapped them below the wheel,
   so the page itself could not scroll after the table button was pressed.
   Keep the chart geometry intact; only release the three containing blocks
   that own the document's vertical overflow. */
@media (min-width: 601px) {
  html:has(body.sun-index-natal-layout:is(.is-directions-page, .is-progressions-page)),
  body.sun-index-natal-layout:is(.is-directions-page, .is-progressions-page) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
  }

  body.sun-index-natal-layout:is(.is-directions-page, .is-progressions-page)
  :is(.app-shell.index-shell, .index-layout, .index-content) {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  /* The shared app shell normally uses a viewport-sized grid.  It is useful
     for the wheel, but when the lower period table is open its minmax row can
     trap that sibling below the visible page.  Use regular document flow only
     for this explicit open state; the wheel's own fixed geometry is untouched. */
  body.sun-index-natal-layout.predictive-period-table-open
  .app-shell.index-shell {
    display: block !important;
    grid-template-rows: none !important;
  }
}

/* SUN-952: on a tablet the persistent menu becomes an overlay.  The older
   compact-menu selectors had greater specificity than the generic tablet
   rule above, so they still reserved a 58px column on every non-index page.
   Match those selectors exactly and release the content width everywhere. */
@media (max-width: 1024px) {
  body.sun-menu-pinned .index-shell,
  body.sun-menu-pinned.sun-menu-compact .index-shell,
  body.sun-global-menu-pinned.sun-menu-compact .app-shell:not(.index-shell),
  body.sun-global-menu-pinned:not(.sun-menu-compact) .app-shell:not(.index-shell),
  body.sun-global-menu-pinned .login-layout {
    box-sizing: border-box !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}