:root {
  --bg: #111318;
  --bg-raised: #181b22;
  --bg-muted: #1e222b;
  --border: #2c313c;
  --text: #e8eaed;
  --text-muted: #9aa3b2;
  --hover: #273044;
  --accent: #5b8def;
  --accent-strong: #4d7fe0;
  --success: #7dcea0;
  --error: #e07a7a;
}

html {
  font-size: 14px;
  color-scheme: dark;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bg), 0 0 0 0.25rem var(--accent);
}

html, body {
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
}

.shell {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  height: 100%;
  min-height: 100%;
}

.shell.is-left-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.shell.is-left-collapsed .left-menu {
  display: none;
}

.shell__main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem 1.5rem;
  background: var(--bg);
}

.left-menu {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--bg-raised);
}

.left-menu__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 1rem 0.85rem 0;
}

.left-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.left-menu__heading {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.left-menu__brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.left-menu__home {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  height: 2rem;
  padding: 0 0.5rem 0 0.35rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.left-menu__actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.left-menu__refresh,
.left-menu__add,
.left-menu__collapse,
.left-menu__close,
.chat__new,
.chat__collapse,
.preview__edit,
.preview__back,
.preview__collapse,
.goals-rail__collapse {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text-muted);
}

.left-menu__refresh svg,
.left-menu__add svg,
.left-menu__collapse svg,
.left-menu__close svg,
.left-menu__home svg,
.left-menu__home-icon,
.left-menu__add-icon,
.chat__new svg,
.chat__collapse svg,
.goals-rail__collapse svg,
.preview__icon,
.preview__collapse svg,
.preview__edit-icon,
.preview__back-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.left-menu__refresh:hover,
.left-menu__refresh:focus-visible,
.left-menu__add:hover,
.left-menu__add:focus-visible,
.left-menu__collapse:hover,
.left-menu__collapse:focus-visible,
.left-menu__close:hover,
.left-menu__close:focus-visible,
.left-menu__home:hover,
.left-menu__home:focus-visible,
.left-menu__home.is-current,
.chat__new:hover,
.chat__new:focus-visible,
.chat__collapse:hover,
.chat__collapse:focus-visible,
.preview__collapse:hover,
.preview__collapse:focus-visible,
.preview__edit:hover,
.preview__edit:focus-visible,
.preview__back:hover,
.preview__back:focus-visible,
.goals-rail__collapse:hover,
.goals-rail__collapse:focus-visible {
  background: var(--hover);
  color: var(--text);
}

.left-menu__close {
  display: none;
}

.left-menu__refresh:disabled,
.left-menu__add:disabled {
  opacity: 0.55;
}

.left-menu__refresh.is-busy svg {
  animation: left-menu-spin 0.7s linear infinite;
}

@keyframes left-menu-spin {
  to {
    transform: rotate(360deg);
  }
}

.left-menu__search {
  flex: 0 0 auto;
  margin-bottom: 0.85rem;
}

.left-menu__search-input {
  width: 100%;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--bg-muted);
  color: inherit;
  font: inherit;
}

.left-menu__search-input::placeholder {
  color: var(--text-muted);
}

.left-menu__search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.left-menu__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.left-menu__footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  padding: 0.7rem 0.15rem 0.85rem;
  border-top: 1px solid var(--border);
}

.left-menu__footer .left-menu__item {
  flex: 0 0 auto;
  justify-content: center;
  gap: 0;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  color: var(--text-muted);
}

.left-menu__footer .left-menu__item-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.left-menu__footer .left-menu__add {
  margin-left: auto;
  color: var(--text-muted);
}

.left-menu__exit {
  display: flex;
  align-items: center;
}

.left-menu__schema {
  position: relative;
  flex: 0 0 auto;
}

.left-menu__schema-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
}

.left-menu__schema-toggle:hover,
.left-menu__schema-toggle:focus-visible,
.left-menu__schema.is-open .left-menu__schema-toggle {
  background: var(--hover);
  color: var(--text);
}

.left-menu__schema.is-schema .left-menu__schema-toggle {
  color: var(--error);
}

.left-menu__schema-icon {
  display: block;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
}

.left-menu__schema-option .left-menu__schema-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.left-menu__schema-menu {
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 0;
  z-index: 3;
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--bg-muted);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.35);
}

.left-menu__schema-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  white-space: nowrap;
}

.left-menu__schema-option:hover,
.left-menu__schema-option:focus-visible {
  background: var(--hover);
}

.left-menu__schema-option.is-active {
  background: var(--hover);
  color: var(--error);
}

.left-menu__empty {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.left-menu__group {
  margin-bottom: 1.1rem;
}

.left-menu:not(.is-filtering) .left-menu__group.is-collapsed {
  margin-bottom: 0;
}

.left-menu:not(.is-filtering) .left-menu__group.is-collapsed .left-menu__list {
  display: none;
}

.left-menu__group-name {
  position: relative;
  margin: 0;
}

.left-menu__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  margin: 0.1rem 0;
  padding: 0.4rem 0.55rem;
  min-height: 2.3rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.left-menu__group-toggle::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 0.32rem;
  height: 0.32rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.left-menu__group.is-collapsed .left-menu__group-toggle::after {
  transform: rotate(-45deg);
}

.left-menu__group-toggle:hover,
.left-menu__group-toggle:focus-visible {
  background: var(--hover);
  color: var(--text);
}

.left-menu__group-toggle:disabled {
  opacity: 0.55;
}

.left-menu__list {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.left-menu__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0.1rem 0;
  padding: 0.4rem 0.55rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.left-menu__item-icon {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--text-muted);
}

.left-menu__item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.left-menu__item:hover,
.left-menu__item:focus-visible,
.left-menu__item.is-current {
  background: var(--hover);
}

.left-menu__item:hover .left-menu__item-icon,
.left-menu__item:focus-visible .left-menu__item-icon,
.left-menu__item.is-current .left-menu__item-icon {
  color: var(--text);
}

.left-menu__row,
.left-menu__group {
  position: relative;
}

.left-menu__row[draggable="true"],
.left-menu__item[draggable="true"],
.left-menu__group[draggable="true"] {
  cursor: grab;
}

.left-menu__row.is-dragging,
.left-menu__group.is-dragging {
  opacity: 0.5;
}

.left-menu__row.is-error,
.left-menu__group.is-error {
  border-radius: 0.4rem;
  box-shadow: inset 0 0 0 1px var(--error);
}

.left-menu__group-toggle {
  padding-left: 1.4rem;
}

.left-menu__item {
  padding-left: 1.75rem;
}

.left-menu__item-grip,
.left-menu__group-grip {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  width: 0.8rem;
  height: 0.8rem;
  color: var(--text-muted);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.15s ease;
}

.left-menu__row:hover .left-menu__item-grip,
.left-menu__row:focus-within .left-menu__item-grip,
.left-menu__group-name:hover .left-menu__group-grip,
.left-menu__group-name:focus-within .left-menu__group-grip,
.left-menu.is-reordering .left-menu__item-grip,
.left-menu.is-reordering .left-menu__group-grip {
  opacity: 1;
}

.left-menu.is-reordering {
  user-select: none;
}

.left-menu__row.is-insert-before::before,
.left-menu__group.is-insert-before::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.left-menu__row.is-insert-before::before {
  top: -0.3rem;
}

.left-menu__group.is-insert-before::before {
  top: -0.55rem;
}

.left-menu__list.is-insert-end::after,
.left-menu__group.is-insert-end::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.left-menu__list.is-insert-end::after {
  margin-top: 0.2rem;
}

.left-menu__group.is-insert-end::after {
  position: absolute;
  right: 0;
  bottom: -0.55rem;
  left: 0;
}

.left-menu__group.is-drop > .left-menu__group-name {
  border-radius: 0.4rem;
  background: var(--hover);
}

.left-menu__favorites {
  margin-bottom: 1.1rem;
}

.left-menu__group-label {
  display: flex;
  align-items: center;
  margin: 0.1rem 0;
  padding: 0.4rem 1.9rem 0.4rem 1.4rem;
  min-height: 2.3rem;
  border-radius: 0.4rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.left-menu__star {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.left-menu__star-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.left-menu__row:hover .left-menu__star,
.left-menu__row:focus-within .left-menu__star,
.left-menu__star.is-active,
.left-menu__star:focus-visible {
  opacity: 1;
}

.left-menu__star.is-active .left-menu__star-icon {
  fill: currentColor;
  color: var(--accent);
}

.left-menu__star:hover,
.left-menu__star:focus-visible {
  background: var(--hover);
  color: var(--text);
}

.left-menu__star.is-active:hover,
.left-menu__star.is-active:focus-visible {
  color: var(--accent);
}

.left-menu__star:disabled {
  opacity: 0.55;
}

.left-menu__item {
  padding-right: 2rem;
}

.left-menu__group.is-drop > .left-menu__list,
.left-menu.is-reordering .left-menu__list.is-empty {
  border-radius: 0.4rem;
  background: var(--bg-muted);
}

.left-menu.is-reordering .left-menu__list.is-empty {
  min-height: 1.1rem;
}


@media (max-width: 767px) {
  .shell {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }

  .shell:not(.is-left-collapsed) .left-menu,
  .shell:not(.is-left-collapsed) .shell__main {
    grid-column: 1;
    grid-row: 1;
  }

  .shell:not(.is-left-collapsed) .left-menu {
    position: absolute;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-right: 0;
    box-shadow: none;
  }

  .left-menu__close {
    display: inline-flex;
  }

  .left-menu__collapse {
    display: none;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shell__main:has(.journal):has(.chat) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .shell.is-right-collapsed .shell__main:has(.journal):has(.chat) {
    grid-template-columns: minmax(0, 1fr);
  }

  .shell.is-right-collapsed .chat,
  .shell.is-right-collapsed .preview,
  .shell.is-right-collapsed .goals-rail {
    display: none;
  }

  .shell.is-right-collapsed .journal__header {
    padding-right: 0.4rem;
  }

  .shell.is-right-collapsed .journal__chat {
    display: inline-flex;
  }
}

.shell__main:has(.journal):has(.chat) .journal {
  margin: 0;
}

.journal,
.chat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
}

.chat {
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--bg-raised);
}

.shell.is-preview .chat,
.shell.is-goals .chat,
.shell.is-goals .preview {
  display: none;
}

.chat__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.journal__header,
.chat__header,
.preview__header,
.goals-rail__header {
  min-height: calc(2rem + 1.1rem + 1px);
}

.chat__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.45rem 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
}

.chat__title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.1rem;
}

.rail-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.15rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-muted);
}

.rail-switch__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.rail-switch__tab:hover,
.rail-switch__tab:focus-visible {
  color: var(--text);
}

.rail-switch__tab.is-active {
  background: var(--hover);
  color: var(--text);
}

.rail-switch__tab:disabled {
  opacity: 0.45;
  cursor: default;
}

.preview {
  display: none;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--bg-raised);
}

.preview:not([hidden]) {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.goals-rail {
  display: none;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--bg-raised);
}

.goals-rail:not([hidden]) {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.goals-rail__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.55rem 0.45rem 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
}

.goals-rail__actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.goals-rail__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.9rem 1rem 1.4rem;
}

.preview__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.55rem 0.45rem 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
}

.preview__heading {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
}

.preview__icon {
  flex: 0 0 auto;
  margin-top: 0.12rem;
  color: var(--text-muted);
}

.preview__title {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Готовая задача в записи: название перечёркнуто, поля записи остаются как есть. */
.preview.is-done .preview__title {
  color: var(--text-muted);
  text-decoration: line-through;
}

.preview__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

/* Стрелка возврата есть только на узких экранах: на широких запись переключают вкладки рейла. */
.preview__back {
  display: none;
}

.preview__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.9rem 1rem 1.4rem;
}

.preview__description {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.preview__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.preview__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

/* Дата/срок в блоке записи прижимается к правому краю строки фактов. */
.preview__badges > .journal__fact:last-child {
  margin-left: auto;
}

.preview__fields {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.preview__field {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.preview__label {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.preview__value {
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.preview__amount {
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Прогресс цели и кнопка «+1» стоят одной строкой: число слева, шаг — у правого края. */
.preview__progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.preview__step {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  cursor: pointer;
}

.preview__step:hover,
.preview__step:focus-visible {
  background: var(--hover);
  color: var(--text);
}

.preview__step:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Ошибка шага цели показывается между шапкой и телом записи. */
.preview__error {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--error);
  font-size: 0.82rem;
}

.preview__value--long {
  white-space: pre-wrap;
}

.preview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
}

.preview__meta-item {
  overflow-wrap: anywhere;
}

.preview.is-editing .preview__actions {
  opacity: 0.5;
  pointer-events: none;
}

.journal__table tbody tr.is-selected td {
  background: var(--hover);
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}

.journal__table tbody tr.is-selected td:first-child {
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent), inset 1px 0 0 var(--accent);
}

.journal__table tbody tr.is-selected td:last-child {
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent), inset -1px 0 0 var(--accent);
}

.journal__item.is-selected,
.journal__card.is-selected,
.journal__event.is-selected {
  background: var(--hover);
}

.journal__item.is-selected {
  box-shadow: inset 2px 0 0 var(--accent);
}

.journal__card.is-selected {
  border-color: var(--accent);
}

.journal__event.is-selected {
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}

.journal {
  overflow: hidden;
  background: var(--bg-raised);
}

.journal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.45rem 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
}

.shell.is-left-collapsed .journal__header {
  padding-left: 0.4rem;
}

.journal__heading {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.journal__score {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.35rem;
}

/* Keep a gap between the advice sparkle and the food score buttons. */
.journal__score .journal__action[data-score="rate"] {
  margin-left: 0.55rem;
}

.journal__search {
  justify-self: center;
  min-width: 0;
}

.journal__search-input {
  width: 20rem;
  max-width: 100%;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--bg-muted);
  color: inherit;
  font: inherit;
}

.journal__search-input::placeholder {
  color: var(--text-muted);
}

.journal__search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.journal__menu,
.journal__chat {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.journal__menu svg,
.journal__chat svg {
  width: 1.15rem;
  height: 1.15rem;
}

.journal__menu:hover,
.journal__menu:focus-visible,
.journal__chat:hover,
.journal__chat:focus-visible {
  background: var(--hover);
  color: var(--text);
}

.shell.is-left-collapsed .journal__menu {
  display: inline-flex;
}

.journal__title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal__title.is-renameable {
  cursor: text;
}

.journal__title.is-renameable:hover {
  background: var(--hover);
  border-radius: 0.4rem;
}

/* В режиме правки заголовок растягивается, чтобы поле ввода занимало всю ширину. */
.journal__title.is-editing {
  flex: 1 1 auto;
  min-width: 6rem;
  overflow: visible;
}

.journal__title-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 6rem;
  max-width: 20rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--accent);
  border-radius: 0.4rem;
  background: var(--bg-muted);
  color: inherit;
  font: inherit;
  font-weight: 600;
}

/* Рамка и так акцентная, лишнее кольцо вокруг поля не рисуем. */
.journal__title-input:focus,
.journal__title-input:focus-visible {
  outline: none;
}

.journal__title-input--error {
  border-color: var(--error);
}

.journal__title-error {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 0.55rem;
  color: var(--error);
  font-size: 0.8rem;
  white-space: nowrap;
}

.journal__pickers {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
}

@media (min-width: 768px) {
  .journal:not(.is-dashboard) .journal__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .journal:not(.is-dashboard) .journal__heading {
    justify-self: start;
  }

  .journal:not(.is-dashboard) .journal__pickers {
    justify-self: end;
  }
}

.journal__prefs {
  position: relative;
  flex: 0 0 auto;
}

.journal__view-toggle,
.journal__prefs-toggle,
.journal__action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.65rem;
  border: 0;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}

.journal__view-toggle:hover,
.journal__view-toggle:focus-visible,
.journal__prefs-toggle:hover,
.journal__prefs-toggle:focus-visible,
.journal__action:hover,
.journal__action:focus-visible {
  background: var(--hover);
}

.journal__action--icon {
  gap: 0;
  justify-content: center;
  padding: 0.28rem;
}

.journal__action-icon {
  display: block;
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
}

.journal__prefs-view:disabled,
.journal__view-toggle:disabled,
.journal__action:disabled {
  opacity: 0.55;
  cursor: default;
}

.row-dialog {
  box-sizing: border-box;
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
}

.row-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.row-dialog.is-paused {
  visibility: hidden;
}

.row-dialog--confirm {
  width: min(28rem, calc(100vw - 2rem));
}

.row-dialog__form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
}

.row-dialog__header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 1.1rem 0.75rem;
}

.row-dialog__header .row-dialog__title {
  padding: 0;
}

.row-dialog__icon {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--text-muted);
}

.row-dialog__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.row-dialog__close:hover,
.row-dialog__close:focus-visible {
  background: var(--hover);
  color: var(--text);
}

.row-dialog__close:disabled {
  opacity: 0.55;
  cursor: default;
}

.row-dialog__close-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.row-dialog__title {
  margin: 0;
  padding: 1rem 1.1rem 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.row-dialog__fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  padding: 0 1.1rem 0.35rem;
  overflow: auto;
}

.row-dialog__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
}

.row-dialog__label {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.row-dialog__input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.row-dialog__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

textarea.row-dialog__input {
  min-height: 5.5rem;
  resize: vertical;
}

input.row-dialog__input[type="date"] {
  color-scheme: dark;
}

input.row-dialog__input[type="time"] {
  color-scheme: dark;
}

.row-dialog__note {
  margin: 0;
  color: var(--text-muted);
}

.row-dialog__message {
  margin: 0;
  padding: 0 1.1rem 0.15rem;
  line-height: 1.45;
}

.row-dialog__error {
  margin: 0;
  padding: 0.15rem 1.1rem 0;
  color: var(--error);
}

.row-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem 1rem;
}

.row-dialog__cancel,
.row-dialog__save,
.row-dialog__delete,
.row-dialog__danger {
  padding: 0.35rem 0.85rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.row-dialog__cancel {
  background: var(--bg-muted);
  color: var(--text);
}

.row-dialog__cancel:hover,
.row-dialog__cancel:focus-visible {
  background: var(--hover);
}

.row-dialog__save {
  background: var(--accent);
  color: #fff;
}

.row-dialog__save:hover,
.row-dialog__save:focus-visible {
  background: var(--accent-strong);
}

.row-dialog__delete,
.row-dialog__danger {
  background: #d64545;
  color: #fff;
}

.row-dialog__delete {
  margin-right: auto;
}

.row-dialog__delete:hover,
.row-dialog__delete:focus-visible,
.row-dialog__danger:hover,
.row-dialog__danger:focus-visible {
  background: #e25656;
}

.row-dialog__cancel:disabled,
.row-dialog__save:disabled,
.row-dialog__delete:disabled,
.row-dialog__danger:disabled {
  opacity: 0.55;
  cursor: default;
}

.journal__stars {
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.journal__stars-filled {
  color: var(--text);
}

.journal__stars-empty {
  color: var(--border);
}

.journal__view-chevron {
  width: 0.85rem;
  height: 0.85rem;
}

.journal__prefs.is-open .journal__view-chevron {
  transform: rotate(180deg);
}

.journal__view-icon {
  display: block;
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
}

.journal__prefs-views {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}

.journal__prefs-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.2rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
}

.journal__prefs-view:hover,
.journal__prefs-view:focus-visible {
  background: var(--hover);
  color: var(--text);
}

.journal__prefs-view.is-active {
  border-color: var(--accent);
  background: var(--hover);
  color: var(--accent);
}

.journal__prefs-view:disabled:hover,
.journal__prefs-view:disabled:focus-visible {
  background: transparent;
  color: var(--text-muted);
}

.journal__prefs-dir-icon {
  display: block;
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
}

.journal__prefs-toggle.is-active {
  color: var(--accent);
}

.journal__prefs.is-filtered .journal__prefs-toggle {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.journal__prefs-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 16rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--bg-muted);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.35);
}

.journal__prefs-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.journal__prefs-label {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.journal__prefs-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.journal__prefs-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}

.journal__prefs-dirs {
  display: inline-flex;
  gap: 0.15rem;
}

.journal__prefs-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.journal__prefs-dir.is-active {
  border-color: var(--accent);
  background: var(--hover);
  color: var(--accent);
}

.journal__prefs-dir:disabled {
  opacity: 0.5;
  cursor: default;
}

.journal__prefs-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
}

/* display: inline-flex above wins over the UA [hidden] rule, so hide explicitly */
.journal__prefs-clear[hidden] {
  display: none;
}

.journal__prefs-clear:hover {
  border-color: var(--border);
  color: var(--text);
}

.journal__prefs-clear-icon {
  display: block;
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
}

.journal__prefs.is-error .journal__prefs-toggle {
  box-shadow: inset 0 0 0 1px var(--error);
}

.journal__prefs-error {
  margin: 0;
  color: var(--error);
  font-size: 0.8rem;
}

.journal__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* The dashboard keeps only the health advice sparkle; other journal actions stay hidden. */
.journal.is-dashboard .journal__prefs,
.journal.is-dashboard .journal__action:not([data-advice="health"]),
.journal.is-dashboard .journal__body {
  display: none;
}

.journal__ranges {
  display: none;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.journal.is-dashboard .journal__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
}

.journal.is-dashboard .journal__heading {
  justify-self: start;
}

.journal.is-dashboard .journal__coffee {
  justify-self: center;
  display: flex;
}

.journal:not(.is-dashboard) .journal__coffee {
  display: none;
}

.journal.is-dashboard .journal__search {
  display: none;
}

.journal.is-dashboard .journal__pickers {
  flex-wrap: wrap;
  justify-self: end;
}

.journal.is-dashboard .journal__ranges {
  display: flex;
}

.journal__switch {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0.12rem;
  border-radius: 999px;
  background: var(--bg-muted);
  gap: 0.1rem;
}

.journal__switch-option {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  padding: 0.2rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.journal__switch-option:hover,
.journal__switch-option:focus-visible,
.journal__switch-option.is-active {
  background: var(--hover);
  color: var(--text);
}

/* Тумблер «Скрыть выполненные» в панели «Отображение»: дорожка с бегунком и подпись. */
.journal__prefs-switch {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}

/* Поле гасится целиком там, где в таблице нечего скрывать.
   display: flex выше перебивает пользовательское [hidden], поэтому скрываем явно. */
.journal__prefs-field[hidden] {
  display: none;
}

.journal__prefs-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.journal__prefs-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.journal__prefs-switch-track::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  left: 0.12rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.15s ease, background 0.15s ease;
}

.journal__prefs-switch-input:checked + .journal__prefs-switch-track {
  border-color: var(--accent);
  background: var(--hover);
}

.journal__prefs-switch-input:checked + .journal__prefs-switch-track::after {
  transform: translateX(0.92rem);
  background: var(--accent);
}

.journal__prefs-switch-input:focus-visible + .journal__prefs-switch-track {
  box-shadow: 0 0 0 2px var(--accent);
}

.journal__prefs-switch-text {
  min-width: 0;
}

.journal__coffee {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.journal__coffee-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1;
}

.journal__coffee-icons {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.journal__coffee-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
  flex-shrink: 0;
}

.journal.is-dashboard .journal__badges {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.journal:not(.is-dashboard) .journal__badges {
  display: none;
}

.journal__sobriety {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.journal__sobriety-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1;
}

.journal__sobriety-value {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--text-muted);
}

.journal__sobriety-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
  flex-shrink: 0;
}

.journal__sobriety-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.journal__sobriety-value.is-drinking .journal__sobriety-icon {
  color: var(--error);
}

.journal__sobriety-value.is-drinking .journal__sobriety-count {
  border-color: var(--error);
  color: var(--error);
}

.journal__dashboard {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2.5rem;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem 1.25rem 2rem;
  container-type: inline-size;
}

.journal__lead {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-width: 0;
}

@container (min-width: 40rem) {
  .journal__lead {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    align-items: start;
  }
}

/* Три колонки: Расписание, Дела и События стоят одним рядом. */
@container (min-width: 56rem) {
  .journal__lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.journal__tiles {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-width: 0;
}

@container (min-width: 40rem) {
  .journal__tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2.5rem;
    row-gap: 2.5rem;
  }
}

.journal__panel {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

.journal__panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: 1rem;
  font-weight: 600;
}

.journal__panel-title svg,
.journal__panel-icon {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--text-muted);
}

.journal__panel-period {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 400;
}

.journal__panel-latest {
  margin-left: auto;
  margin-right: 20px;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.journal__panel-note {
  margin: -0.35rem 0 0.85rem;
}

.journal__events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.journal__events--timed .journal__event {
  grid-template-columns: minmax(3.5rem, max-content) minmax(0, 1fr) max-content;
}

.journal__events--timed .journal__event-day {
  white-space: nowrap;
}

.journal__events--marked .journal__event {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.5rem;
}

.journal__events--facts .journal__event {
  grid-template-columns: 2.25rem minmax(0, 1fr) max-content;
  align-items: center;
}

.journal__event {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}

.journal__event.is-editable {
  cursor: pointer;
}

.journal__event.is-editable:hover {
  background: var(--hover);
}

.journal__event-day {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.journal__event.is-today .journal__event-day {
  color: var(--accent);
}

.journal__event.is-overdue .journal__event-day {
  color: var(--error);
}


.journal__event-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.journal__event-name {
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal__event-detail {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal__event-length {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.35;
  white-space: nowrap;
}

.journal__event-fact {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.35;
  white-space: nowrap;
}

.journal__event.is-today .journal__event-fact {
  color: var(--accent);
}

.journal__event-fact-icon {
  display: block;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

.journal__event-fact-value {
  font-variant-numeric: tabular-nums;
}

.journal__event-mark {
  align-self: center;
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
}

.journal__event-mark-icon {
  display: block;
  width: 1rem;
  height: 1rem;
}

.journal__event.is-overdue .journal__event-mark {
  color: var(--error);
}

.journal__event.is-done .journal__event-name {
  color: var(--text-muted);
  text-decoration: line-through;
}

.journal__event-mark--high {
  color: var(--error);
}

.journal__event-mark--low {
  color: var(--success);
}

.journal__panel-empty {
  margin: 0;
  color: var(--text-muted);
}

/* Цели: панель правой колонки, у каждой цели сегментная шкала прогресса. */
.journal__goals {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal__goal {
  /* Тон строки: им красятся шкала, процент и подпись состояния. */
  --goal-tone: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* Отставание и просрочка переводят всю строку на красный одним объявлением. */
.journal__goal.is-behind,
.journal__goal.is-overdue {
  --goal-tone: var(--error);
}

.journal__goal:last-child {
  border-bottom: 0;
}

.journal__goal.is-editable {
  border-radius: 0.4rem;
  cursor: pointer;
}

.journal__goal.is-selected,
.journal__goal.is-editable:hover {
  background: var(--hover);
}

/* Название и срок стоят в одной строке, как дата в блоке записи: срок уходит вправо. */
.journal__goal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.journal__goal-name {
  min-width: 0;
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Срок прижимается к правому краю строки — как дата в блоке записи. */
.journal__goal-head > .journal__fact {
  margin-left: auto;
}

/* Значок приоритета в цели — без подписи: строка выровнена по baseline,
   а у SVG своей baseline нет, поэтому центрируем его по строке названия. */
.journal__goal-head > .journal__badge--icon {
  align-self: center;
}

/* Шкала прогресса набрана мелкими делениями с зазорами — как сегментный индикатор.
   Деление — это сама ячейка, поэтому оно растягивается по ширине строки. */
.journal__goal-bar {
  display: flex;
  align-items: stretch;
  /* Зазор мельче прежнего: 48 делений шкалы должны влезать в ширину панели. */
  gap: 0.18rem;
  height: 0.5rem;
}

.journal__goal-cell {
  flex: 1 1 0;
  min-width: 1px;
  border-radius: 0.08rem;
  background: var(--border);
}

/* Погашенные деления остаются приметными: иначе пустая часть шкалы пропадает. */
.journal__goal-cell.is-on {
  background: var(--goal-tone);
  box-shadow: 0 0 0.22rem var(--goal-tone);
}

.journal__goal-note {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.journal__goal-amount {
  font-variant-numeric: tabular-nums;
}

/* Процент у правого края строки: по нему сверяются с числом зажжённых делений. */
.journal__goal-percent {
  margin-left: auto;
  color: var(--goal-tone);
  font-variant-numeric: tabular-nums;
}

/* Подпись состояния («отстаёт») идёт тем же тоном, что и шкала. */
.journal__goal-state {
  color: var(--goal-tone);
}

.journal__goal.is-done .journal__goal-bar {
  opacity: 0.65;
}

.journal__goal.is-done .journal__goal-name {
  color: var(--text-muted);
  text-decoration: line-through;
}

.journal__cups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem 0.45rem;
  margin: 0;
}

.journal__cup {
  display: block;
  width: 2.85rem;
  height: auto;
  color: var(--text-muted);
}

.journal__cup-body {
  fill: #f4efe6;
}

.journal__cup-handle {
  stroke: #f4efe6;
}

.journal__cup-rim {
  stroke: #e7dfd2;
}

.journal__cup-coffee {
  fill: #6b3f24;
}

.journal__cup-shine {
  stroke: rgba(255, 255, 255, 0.55);
}

.journal__chart {
  position: relative;
  width: 100%;
  height: 14rem;
}

.journal__status {
  margin: 0;
  padding: 1rem;
  color: var(--text-muted);
}

.journal__status--error {
  color: var(--error);
}

.journal__table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  width: 100%;
}

.journal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: fixed;
}

.journal__table th,
.journal__table td {
  padding: 0.45rem 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journal__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--text-muted);
  font-weight: 600;
  background: var(--bg-raised);
}

.journal__table th.is-id,
.journal__table td.is-id {
  width: 3.5rem;
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}

.journal__table th.is-created_at,
.journal__table td.is-created_at {
  width: 8.5rem;
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}

.journal__table-empty {
  color: var(--text-muted);
}

.journal__table tbody tr.is-editable {
  cursor: pointer;
}

.journal__table tbody tr.is-editable:hover td {
  background: var(--hover);
}

/* Выполненная задача: строка таблицы приглушена и перечёркнута. */
.journal__table tbody tr.is-done td {
  color: var(--text-muted);
  text-decoration: line-through;
}

.journal__body:has(.journal__list) {
  overflow: auto;
}

.journal__list {
  flex: 0 0 auto;
  width: min(50rem, 100%);
  margin-inline: auto;
}

.journal__day {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.85rem 1rem 0.55rem;
  background: var(--bg-raised);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.journal__item + .journal__day {
  padding-top: 1.85rem;
}

.journal__day::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 0;
  left: 1rem;
  height: 1px;
  background: var(--border);
}

.journal__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.45rem;
  align-items: start;
  padding: 0.7rem 1rem 0.65rem;
}

.journal__item::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 0;
  left: 1rem;
  height: 1px;
  background: var(--border);
}

.journal__item.is-editable {
  cursor: pointer;
}

.journal__item.is-editable:hover {
  background: var(--hover);
}

.journal__item-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.journal__item-side {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: stretch;
  margin-left: 0.35rem;
}

.journal__item-name {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal__item-description {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal__item-facts {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.journal__item-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.journal__item-time-icon {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
}

.journal__item-field {
  min-width: 0;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal__item-field--long {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Выполненная задача в списке: название, описание и текстовые поля перечёркнуты. */
.journal__item.is-done .journal__item-name,
.journal__item.is-done .journal__item-description,
.journal__item.is-done .journal__item-field {
  color: var(--text-muted);
  text-decoration: line-through;
}

.journal__item-field-name {
  color: var(--text-muted);
}

/* Вторая строка контакта: кегль и цвет как у фактов в списке событий. */
.journal__item-field--muted {
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* Сумма платежа — первая строка: знак направления заменяет слова income/expense. */
.journal__item-amount {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal__item-amount--income {
  color: var(--success);
}

.journal__item-amount--expense {
  color: var(--error);
}

.journal__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.03rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.6;
  white-space: nowrap;
}

.journal__badge-icon {
  flex: 0 0 auto;
  width: 0.72rem;
  height: 0.72rem;
}

/* Статус и приоритет рисуются одной иконкой без плашки, подпись остаётся в подсказке. */
.journal__badge--icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-right: 0.15rem;
  color: var(--text-muted);
}

.journal__badge--icon .journal__badge-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.journal__badge--new,
.journal__badge--active {
  color: var(--accent);
}

.journal__badge--done {
  color: var(--success);
}

.journal__badge--low {
  color: var(--success);
}

.journal__badge--high,
.journal__badge--danger {
  color: var(--error);
}

/* Область/тема — серый текст без плашки; кегль подобран так, чтобы строчные
   буквы были по высоте как цифры даты (0.78rem у даты → 6px, тут 0.85rem → 7px). */
.journal__area {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.journal__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.journal__fact-icon {
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
}

.journal__fact--overdue {
  color: var(--error);
}

/* Дата события в строке фактов: кегль как у значения рядом, чтобы строка читалась ровно. */
.journal__event-date {
  font-size: 0.78rem;
}

.journal__board {
  display: flex;
  flex: 1 1 auto;
  gap: 0.75rem;
  min-width: 0;
  min-height: 0;
  padding: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
}

.journal__column {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  min-width: 16rem;
  max-width: 22rem;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
}

.journal__column.is-drop {
  border-color: var(--accent);
}

.journal__card.is-insert-before {
  position: relative;
}

.journal__card.is-insert-before::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.journal__column-cards.is-insert-end::after {
  content: "";
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.journal__column--other {
  opacity: 0.85;
}

.journal__column-head {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
}

.journal__column-title {
  min-width: 0;
  overflow: hidden;
  font-size: 0.95rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal__column-count {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.journal__column-cards {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.journal__card {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--bg-raised);
}

.journal__card[draggable="true"] {
  cursor: grab;
}

.journal__card.is-editable:hover {
  background: var(--hover);
}

.journal__card.is-dragging {
  opacity: 0.5;
}

.journal__card-title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.journal__card-description {
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.journal__card-field {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  line-height: 1.35;
}

.journal__card-field--long {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Выполненная задача на доске: заголовок, описание и текстовые поля карточки перечёркнуты. */
.journal__card.is-done .journal__card-title,
.journal__card.is-done .journal__card-description,
.journal__card.is-done .journal__card-field {
  color: var(--text-muted);
  text-decoration: line-through;
}

.journal__card-field-name {
  color: var(--text-muted);
}

.journal__card-time {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.journal__card-time-icon {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
}

.journal__card-duration {
  margin-left: auto;
}

.journal__card-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

/* Дата/срок в карточке прижимается к правому краю строки фактов. */
.journal__card-facts > .journal__fact:last-child {
  margin-left: auto;
}

.chat__log {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  background: transparent;
}

.chat__item {
  margin-bottom: 0.6rem;
  white-space: pre-wrap;
}

.chat__item--user {
  font-weight: 600;
}

.chat__item--sql {
  padding: 0.75rem;
  border-left: 4px solid var(--accent);
  border-radius: 0.4rem;
  background: var(--hover);
}

.chat__item--question {
  padding: 0.75rem;
  border-left: 4px solid var(--error);
  border-radius: 0.4rem;
  background: var(--hover);
}

.chat__question {
  margin: 0;
}

.chat__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.chat__choice {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.chat__choice:hover,
.chat__choice:focus-visible {
  border-color: var(--accent);
  background: var(--hover);
}

.chat__choice.is-picked {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.chat__choice:disabled {
  cursor: default;
  opacity: 0.55;
}

.chat__choice.is-picked:disabled {
  opacity: 1;
}

.chat__sql {
  margin: 0 0 0.6rem;
  font-family: Consolas, "Courier New", monospace;
  white-space: pre-wrap;
}

.chat__execute {
  padding: 0.35rem 0.8rem;
  border: 0;
  border-radius: 0.4rem;
  background: var(--accent-strong);
  color: #fff;
  font: inherit;
}

.chat__execute:disabled {
  opacity: 0.55;
}

.chat__item--result {
  font-family: Consolas, "Courier New", monospace;
  color: var(--success);
}

.chat__item--error {
  color: var(--error);
}

.chat__composer {
  display: flex;
  flex-direction: column;
  margin: 0 0.75rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--bg);
}

.chat__composer:focus-within {
  border-color: var(--accent);
}

.chat__input {
  width: 100%;
  min-height: 3.25rem;
  resize: none;
  padding: 0.85rem 0.95rem 0.4rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.chat__input::placeholder {
  color: var(--text-muted);
}

.chat__input:focus {
  outline: none;
}

.chat__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.35rem 0.45rem 0.45rem 0.55rem;
}

.chat__send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--accent-strong);
  color: #fff;
  cursor: pointer;
  font: inherit;
}

.chat__send-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.chat__send:disabled {
  opacity: 0.55;
}

.pane-switch {
  display: none;
}

.pane-switch__menu {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.pane-switch__menu svg {
  width: 1.15rem;
  height: 1.15rem;
}

.pane-switch__menu:hover,
.pane-switch__menu:focus-visible {
  background: var(--hover);
  color: var(--text);
}

.pane-switch__link {
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: none;
}

.pane-switch__link:hover,
.pane-switch__link:focus-visible {
  color: var(--text);
}

.pane-switch__link.is-active {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.28rem;
}

@media (max-width: 767px) {
  /* Раздел на узких экранах — крупные кнопки одной «таблеткой»: по ним легко попадать пальцем. */
  .pane-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
  }

  .pane-switch__tabs {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-muted);
  }

  .pane-switch__link {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    font-size: 0.95rem;
  }

  /* Открытый раздел заливается цветом, как у вкладок правой колонки: подчёркивания здесь нет. */
  .pane-switch__link.is-active {
    background: var(--hover);
    text-decoration: none;
  }

  /* Свёрнутое меню стоит рядом с «таблеткой», а не поверх неё. */
  .shell.is-left-collapsed .pane-switch__menu {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--bg-muted);
  }

  .shell.is-left-collapsed .pane-switch__menu svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .shell.is-left-collapsed .journal__menu {
    display: none;
  }

  .shell.is-left-collapsed .journal__header {
    padding-left: 1rem;
  }

  .shell__main:has(.journal):has(.chat) {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .shell.is-right-collapsed .shell__main:has(.journal):has(.chat) {
    grid-template-columns: minmax(0, 1fr);
  }

  .chat__collapse,
  .preview__collapse,
  .goals-rail__collapse {
    display: none;
  }

  /* Шапка записи на узком экране: стрелка возврата у левого края, правка — у правого. */
  .preview__header {
    justify-content: space-between;
    padding: 0.35rem 0.75rem;
  }

  .preview__edit,
  .preview__back {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--bg-muted);
  }

  .preview__edit-icon,
  .preview__back-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .preview__back {
    display: inline-flex;
  }

  .shell__main:has(.journal):has(.chat) .pane-switch {
    grid-column: 1;
    grid-row: 1;
  }

  .shell__main:has(.journal):has(.chat) .journal,
  .shell__main:has(.journal):has(.chat) .chat,
  .shell__main:has(.journal):has(.chat) .preview {
    grid-column: 1;
    grid-row: 2;
    position: static;
    width: auto;
    height: 100%;
    box-shadow: none;
  }

  .shell__main:has(.journal):has(.chat) .journal {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--bg-raised);
  }

  .journal__header {
    padding: 0.55rem 0.45rem 0.55rem 1rem;
    background: transparent;
    flex-wrap: wrap;
  }

  .journal__search {
    order: 3;
    flex: 1 0 100%;
  }

  .journal__search-input {
    width: 100%;
  }

  /* Доска на узких экранах: колонка занимает всю ширину, свайп листает по одной колонке
     и прижимает её к краю, поэтому карточки читаются без обрезки. */
  .journal__board {
    gap: 0;
    padding: 0.75rem 0;
    scroll-snap-type: x mandatory;
  }

  .journal__column {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .journal__view-toggle,
  .journal__action {
    background: transparent;
    border-radius: 0.4rem;
  }

  .chat__header > .chat__title {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    clip: auto;
  }

  .rail-switch {
    display: none;
  }

  .chat,
  .preview,
  .goals-rail {
    border-left: 0;
  }

  .shell.is-pane-chat .journal,
  .shell.is-pane-goals .journal,
  .shell.is-preview .journal {
    display: none;
  }

  .shell:not(.is-pane-chat) .chat {
    display: none;
  }

  /* На узких экранах цели занимают весь раздел: таба в правой колонке здесь нет. */
  .shell:not(.is-pane-goals) .goals-rail {
    display: none;
  }

  .shell.is-pane-goals .goals-rail {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    grid-column: 1;
    grid-row: 2;
    position: static;
    width: auto;
    height: 100%;
    box-shadow: none;
  }

  .goals-rail__header {
    display: none;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Экран входа: отдельный макет без меню и без site.js. */
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 1.5rem;
}

.login__card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  max-width: 20rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg-raised);
}

.login__title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}

.login__label {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.login__input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  /* 1rem — чтобы Safari на iPhone не приближал страницу при фокусе. */
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.login__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.15rem rgb(91 141 239 / 25%);
}

.login__input:disabled {
  opacity: 0.6;
}

.login__submit {
  padding: 0.6rem 0.7rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

.login__submit:hover:not(:disabled) {
  background: var(--accent-strong);
}

.login__submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.login__error,
.login__paused {
  margin: 0;
  padding: 0.5rem 0.6rem;
  font-size: 0.8125rem;
  border-radius: 0.5rem;
}

.login__error {
  color: var(--error);
  background: rgb(224 122 122 / 10%);
  border: 1px solid var(--error);
}

.login__paused {
  color: var(--text-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border);
}